/* KRESGO  ·  one stylesheet, no framework.
   Colours are sampled from the supplied logo file, not chosen.
   Cyan carries the software side, lime carries the support services side,
   so a visitor knows which half of the company they are in before reading.
   Written with logical properties throughout, so the Arabic RTL version is a
   translation job rather than a second stylesheet. */

:root{
  --navy:#000032;          /* sampled from the logo */
  --navy-2:#0b1a52;
  --navy-3:#16265f;
  --cyan:#00aecf;          /* sampled: software */
  --cyan-d:#0092ad;
  --cyan-l:#e4f7fb;
  --lime:#a2cb49;          /* sampled: support services */
  --lime-d:#7da733;
  --lime-l:#f1f8e3;
  --gold:#c6922f;          /* the fourth accent, used only for Haramain */
  --gold-d:#9a6f1d;
  --gold-l:#fbf3e2;

  --ink:#101828;
  --body:#3f4a5c;
  --mut:#687486;
  --line:#e3e8ef;
  --line-2:#eef2f7;
  --bg:#ffffff;
  --bg-alt:#f6f8fb;
  --bg-deep:#000032;

  --r:14px;
  --r-s:9px;
  --max:1240px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 10px 30px rgba(16,24,40,.06);
  --shadow-l:0 18px 46px rgba(0,0,50,.13);
}

*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--body);
  font:16px/1.65 "Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body[dir=rtl]{font-family:"Segoe UI",Tahoma,"Noto Naskh Arabic",system-ui,sans-serif}

img{max-width:100%;height:auto;display:block}
a{color:var(--navy-3);text-decoration:none}
a:hover{color:var(--cyan-d)}
/* ----------------------------------------------------------- headings
   One scale for the whole site, with weight coming DOWN as the size comes
   down. Everything used to be 800, which is extra bold: right for a hero and
   far too heavy for a subheading sitting in a paragraph of 16px text, where
   it reads as shouting. Letter spacing is tightened only on the large sizes,
   because negative tracking on small text just makes it harder to read. */
h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.2}
h1{font-size:clamp(1.95rem,4.2vw,3.05rem);font-weight:800;letter-spacing:-.021em;
  line-height:1.12}
h2{font-size:clamp(1.3rem,2.1vw,1.72rem);font-weight:740;letter-spacing:-.014em}
h3{font-size:1.07rem;font-weight:700;letter-spacing:-.006em}
h4{font-size:1rem;font-weight:700;letter-spacing:0}

/* a section head introduces a whole band of the page, so it may be larger and
   heavier than an ordinary h2 */
.sec-head h2{font-size:clamp(1.44rem,2.6vw,2rem);font-weight:780;letter-spacing:-.019em}
p{margin:0 0 1.1em}
.ic{flex:none;vertical-align:-.15em}
.skip{position:absolute;inset-inline-start:-9999px}
.skip:focus{inset-inline-start:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:8px}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:22px}
section{padding-block:clamp(52px,6.5vw,84px)}
section.alt{background:var(--bg-alt)}
section.tight{padding-block:clamp(36px,4vw,54px)}
.center{text-align:center}
.grid>*,.split>*,.cols>*,.foot-grid>*,.stats>*{min-width:0}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;
  font-weight:650;font-size:15.4px;cursor:pointer;
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(0,0,50,.2)}
.btn-primary:hover{background:var(--navy-2);color:#fff}
.btn-cyan{background:var(--cyan);color:#00212b;box-shadow:0 6px 18px rgba(0,174,207,.3)}
.btn-cyan:hover{background:var(--cyan-d);color:#fff}
.btn-lime{background:var(--lime);color:#1d2b05;box-shadow:0 6px 18px rgba(162,203,73,.34)}
.btn-lime:hover{background:var(--lime-d);color:#fff}
.btn-line{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--navy);color:var(--navy)}
.btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.4);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.18);color:#fff}
.btn-sm{padding:9px 15px;font-size:14px}

/* ------------------------------------------------------------------ topbar */
.topbar{background:var(--navy);color:#c9d3e8;font-size:13.4px}
.topbar .wrap{display:flex;gap:18px;align-items:center;justify-content:space-between;
  min-height:40px;flex-wrap:wrap}
/* A thumb needs something to land on. These links sit in a thin bar, so the
   bar is not made taller; the link is given the height instead and the
   padding is pulled back out with a negative margin. */
.topbar a{color:#dbe4f5;display:inline-flex;align-items:center;
  min-height:40px;padding-inline:4px;margin-inline:-4px}
.topbar a:hover{color:var(--cyan)}
.tb-left{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.tb-tag{color:var(--lime);font-weight:650}

/* the countries we cover, in the top bar on every page */
.tb-geo{display:inline-flex;align-items:center;gap:8px;color:#c9d3e8}
.tb-geo .ic{color:var(--cyan);flex:none}
.tb-geo b{font-weight:600;color:#eef3fb}
.tb-geo .sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.34);
  display:inline-block}

/* ------------------------------------------------- the country rotator
   Without the script this is an ordinary line of text listing every country.
   The script stacks the names and shows one at a time. The full list is in the
   top bar and the footer either way, so nothing depends on the animation. */
.cyc{display:inline-grid;vertical-align:bottom;text-align:start}
.cyc-i{display:none}
.cyc.on{position:relative}
.cyc.on .cyc-all{display:none}
.cyc.on .cyc-i{display:block;grid-area:1/1;white-space:nowrap;
  opacity:0;transform:translateY(.45em);transition:opacity .45s var(--ease),
  transform .45s var(--ease)}
.cyc.on .cyc-i.show{opacity:1;transform:translateY(0)}
.cyc.on .cyc-i.out{opacity:0;transform:translateY(-.45em)}
.lang{display:inline-flex;gap:6px;align-items:center}
.lang a{padding:2px 8px;border-radius:6px;font-size:12.6px}
.lang a.on{background:rgba(255,255,255,.14);color:#fff}

/* ------------------------------------------------------------------ header */
/* The header floats rather than banding the whole width: a rounded card that
   sits on the page with the navy showing either side of it. `background:none`
   on the sticky element and the white on the inner wrap is what makes the
   shape, and the padding block is what keeps it off the top edge once it
   sticks. */
/* the strip the card sits on is navy, not white, so there is no white line
   across the page at any scroll position: one dark bar, one floating card */
.site-head{position:sticky;top:0;z-index:40;background:var(--navy);border:0;
  padding:12px clamp(12px,2.2vw,22px);transition:padding .25s var(--ease)}
/* 🔴 No backdrop-filter here, and it must not come back. Any filter, transform
   or backdrop-filter on this bar makes it the containing block for every
   position:fixed descendant, and the phone menu is one: it was being pinned
   to the inside of this 112px bar instead of to the screen, so it opened as a
   cut off sliver. At 97% white the blur was invisible anyway. */
.site-head .wrap{display:flex;align-items:center;gap:20px;min-height:72px;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);border-radius:18px;
  padding-inline:clamp(14px,1.8vw,22px);
  box-shadow:0 3px 14px rgba(0,0,50,.07);
  transition:box-shadow .25s var(--ease)}
.site-head.stuck{padding-block:8px}
.site-head.stuck .wrap{box-shadow:0 12px 34px rgba(0,0,50,.16)}
.brand img{height:40px;width:auto}
nav.main{margin-inline-start:auto;display:flex;align-items:center;gap:3px}
nav.main>.item{position:relative}
nav.main>.item>a,nav.main>.item>button{
  display:inline-flex;align-items:center;gap:5px;background:none;border:0;font:inherit;
  padding:10px 13px;border-radius:9px;color:var(--ink);font-weight:600;font-size:15px;cursor:pointer}
nav.main>.item>a:hover,nav.main>.item>button:hover{background:var(--bg-alt)}
/* While a menu is down, its own button stays lit so it is clear which one is
   open and that the pointer is still inside it. */
nav.main>.item.open>button{background:var(--cyan-l);color:var(--navy)}
nav.main>.item.open>button .ic{color:var(--cyan-d)}
nav.main>.item.open>button .ic{transform:rotate(180deg)}
nav.main>.item>button .ic{transition:transform .18s var(--ease)}
nav.main>.item>a[aria-current]{color:var(--navy);background:var(--bg-alt)}
nav.main .cta{margin-inline-start:8px}
/* the nav reset above sets background:none and colour, and outranks .btn-cyan,
   so the call to action has to be stated again at a higher specificity */
nav.main .cta a.btn.btn-cyan{background:var(--cyan);color:#00212b;padding:12px 20px}
nav.main .cta a.btn.btn-cyan:hover{background:var(--cyan-d);color:#fff}

.mega{position:absolute;inset-inline-start:0;top:calc(100% + 10px);z-index:50;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-l);
  padding:14px;display:none}
/* The panel sits 10px below the button. That gap is outside the menu, so a
   pointer travelling down to the panel used to leave the item and the menu
   shut in the person's face. This fills the gap with an invisible bridge that
   belongs to the panel, so the pointer never leaves. It is absolutely
   positioned, which also keeps it out of the grid flow of .mega.wide. */
.mega::before{content:"";position:absolute;inset-inline:-10px;top:-14px;height:14px}
.item.open .mega{display:block;animation:pop .2s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega.one{width:330px}
.mega.wide{width:min(760px,92vw);display:none;grid-template-columns:repeat(2,1fr);gap:4px}
.item.open .mega.wide{display:grid}
.mega a{display:flex;gap:11px;align-items:flex-start;padding:10px 12px;border-radius:9px;
  color:var(--ink);border:1px solid transparent;
  transition:background .14s var(--ease),border-color .14s var(--ease),color .14s var(--ease)}
/* The row under the pointer has to be obvious, and it carries the colour of
   the menu it belongs to: cyan for software, lime for support services. */
.mega a:hover,.mega a:focus-visible{background:var(--cyan-l);border-color:#bfe9f3;color:var(--navy)}
.mega a:hover b,.mega a:focus-visible b{color:var(--navy)}
.mega a:hover span,.mega a:focus-visible span{color:#3d5a66}
.mega a:hover .mi,.mega a:focus-visible .mi{color:var(--cyan-d)}
.mega.lime a:hover,.mega.lime a:focus-visible{background:var(--lime-l);border-color:#d6e8af}
.mega.lime a:hover span,.mega.lime a:focus-visible span{color:#4c5a37}
.mega.lime a:hover .mi,.mega.lime a:focus-visible .mi{color:var(--lime-d)}
.mega a b{display:block;font-size:14.6px;font-weight:650;line-height:1.3}
.mega a span{display:block;font-size:12.8px;color:var(--mut);line-height:1.4;margin-top:2px}
.mega .mi{flex:none;color:var(--cyan);margin-top:2px}
.mega.lime .mi{color:var(--lime-d)}
.mega-foot{grid-column:1/-1;margin-top:6px;border-top:1px solid var(--line-2);padding-top:10px}

.burger{display:none;margin-inline-start:auto;background:none;border:1px solid var(--line);
  border-radius:9px;padding:9px;color:var(--ink);cursor:pointer}

/* ------------------------------------------------------------------- hero */
.hero{position:relative;background:var(--bg-deep);color:#fff;overflow:hidden;padding-block:0}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:
   radial-gradient(900px 420px at 82% 8%,rgba(0,174,207,.34),transparent 62%),
   radial-gradient(760px 420px at 6% 96%,rgba(162,203,73,.22),transparent 60%)}
.hero .wrap{position:relative;z-index:1}
/* only the top band is two columns. The doors below use the full width. */
.hero .wrap.hero-top{padding-block:clamp(56px,7.5vw,96px);
  display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,54px);align-items:center}
.hero .copy{min-width:0}
/* the icon wall: thirteen platforms and five services, shown rather than claimed */
/* 18 tiles, 13 platforms and 5 services, in SIX columns so they make three full
   rows with nothing left stranded on the end. At five columns the last row held
   three tiles and read as a mistake. */
.wall{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;min-width:0}
.wall i{display:grid;place-items:center;aspect-ratio:1;border-radius:13px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#92a6c8;transition:transform .3s var(--ease),color .3s,background .3s,
  border-color .3s,box-shadow .3s}
.wall i.cy{color:var(--cyan);background:rgba(0,174,207,.13);border-color:rgba(0,174,207,.34)}
.wall i.li{color:var(--lime);background:rgba(162,203,73,.16);border-color:rgba(162,203,73,.42)}
.wall i:hover{transform:translateY(-3px);background:rgba(255,255,255,.12);color:#fff}

/* Each tile drifts and breathes on its own offset, so the wall is alive rather
   than a static block. The delay comes from --d, set per tile in the markup. */
.js .wall i{animation:wallfloat 7s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes wallfloat{
  0%,100%{transform:translateY(0);box-shadow:0 0 0 rgba(0,174,207,0)}
  50%    {transform:translateY(-5px);box-shadow:0 7px 20px rgba(0,0,0,.26)}
}
.js .wall i.cy{animation-name:wallfloat-cy}
@keyframes wallfloat-cy{
  0%,100%{transform:translateY(0);border-color:rgba(0,174,207,.34);
          box-shadow:0 0 0 rgba(0,174,207,0)}
  50%    {transform:translateY(-5px);border-color:rgba(0,174,207,.8);
          box-shadow:0 7px 22px rgba(0,174,207,.22)}
}
.js .wall i.li{animation-name:wallfloat-li}
@keyframes wallfloat-li{
  0%,100%{transform:translateY(0);border-color:rgba(162,203,73,.42);
          box-shadow:0 0 0 rgba(162,203,73,0)}
  50%    {transform:translateY(-5px);border-color:rgba(162,203,73,.9);
          box-shadow:0 7px 22px rgba(162,203,73,.22)}
}
.wall i:hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .js .wall i{animation:none}
}
.wall-note{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;
  font-size:13px;color:#9fb0cf}
.wall-note b{color:#fff}
.wall-note span{display:inline-flex;align-items:center;gap:7px}
.wall-note .dot{width:9px;height:9px;border-radius:50%}
.hero h1{color:#fff;max-width:14ch;padding-bottom:.18em}
.hero h1 .hl{position:relative;white-space:nowrap}
/* the rule sits BELOW the descenders. At bottom:.06em it cut through the tail
   of the y in "two ways". */
.hero h1 .hl::after{content:"";position:absolute;inset-inline:0;bottom:-.14em;height:.085em;
  border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--lime))}
.hero .lead{font-size:clamp(1.02rem,1.4vw,1.14rem);color:#c3cee4;max-width:46ch;margin-bottom:1.8em}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12.4px;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--lime);margin-bottom:1.1em}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--lime)}
/* the hero eyebrow carries the rotator, so it needs room for the tallest name
   and must not collapse as the word changes */
.eyebrow-geo{align-items:baseline}
.eyebrow-geo .cyc{min-width:11ch;color:#fff}
.hero-cta{display:flex;gap:13px;flex-wrap:wrap}

/* the two doors: the whole point of the home page */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,5vw,60px)}
.door{position:relative;border-radius:var(--r);padding:28px 26px 24px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  transition:transform .22s var(--ease),background .22s}
.door:hover{transform:translateY(-3px);background:rgba(255,255,255,.085)}
.door .dt{display:inline-flex;align-items:center;gap:8px;font-size:11.8px;font-weight:750;
  letter-spacing:.15em;text-transform:uppercase;margin-bottom:12px}
.door.support .dt{color:var(--lime)}
.door.software .dt{color:var(--cyan)}
.door h2{color:#fff;font-size:1.26rem;margin-bottom:.45em}
.door p{color:#b9c5dd;font-size:14.8px;margin-bottom:1.3em}
.door .btn{width:fit-content}

/* ------------------------------------------------------------- section head */
.sec-head{max-width:66ch;margin-bottom:clamp(26px,3vw,38px)}
.sec-head.center{margin-inline:auto;text-align:center}
.rule{width:52px;height:3px;border-radius:2px;background:var(--cyan);margin-bottom:18px}
.sec-head.center .rule{margin-inline:auto}
.rule.lime{background:var(--lime)}
.sec-head p{color:var(--mut);font-size:1.02rem;margin:0}

/* ------------------------------------------------------------------- cards */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:24px 22px;box-shadow:var(--shadow);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-l)}
.card h3{margin:0}
.card p{color:var(--mut);font-size:14.8px;margin:0;flex:1}
.card .ci{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;margin-bottom:10px}
.card-support .ci{background:var(--lime-l);color:var(--lime-d)}
.card-support:hover{border-color:var(--lime)}
.card-software .ci{background:var(--cyan-l);color:var(--cyan-d)}
.card-software:hover{border-color:var(--cyan)}
.card .more{display:inline-flex;align-items:center;gap:6px;font-size:13.8px;font-weight:650;
  color:var(--navy-3);margin-top:12px}
.card-software .more{color:var(--cyan-d)}
.card-support .more{color:var(--lime-d)}
.card:hover .more .ic{transform:translateX(3px)}
body[dir=rtl] .card:hover .more .ic{transform:translateX(-3px)}
.card .more .ic{transition:transform .2s var(--ease)}

/* feature band */
.feat{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
.feat .f{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 22px}
.feat .f .ci{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:var(--cyan-l);color:var(--cyan-d);margin-bottom:12px}
.feat .f h3{font-size:1.04rem}
.feat .f p{margin:0;color:var(--mut);font-size:14.6px}

/* ticks */
ul.ticks{list-style:none;padding:0;margin:0 0 1.5em}
ul.ticks li{position:relative;padding-block:8px;padding-inline-start:33px;font-size:15.4px;color:var(--body)}
ul.ticks li::before{content:"";position:absolute;inset-inline-start:0;top:13px;width:19px;height:19px;
  border-radius:50%;background:var(--cyan-l)}
ul.ticks li::after{content:"";position:absolute;inset-inline-start:6px;top:18px;width:7px;height:11px;
  border:solid var(--cyan-d);border-width:0 2px 2px 0;transform:rotate(42deg)}
body[dir=rtl] ul.ticks li::after{transform:rotate(42deg) scaleX(-1)}
ul.ticks.lime li::before{background:var(--lime-l)}
ul.ticks.lime li::after{border-color:var(--lime-d)}
ul.ticks.gold li::before{background:var(--gold-l)}
ul.ticks.gold li::after{border-color:var(--gold-d)}
.rule.gold{background:linear-gradient(90deg,var(--gold),var(--lime))}
.lead-p{font-size:clamp(1.04rem,1.5vw,1.16rem);color:var(--ink);font-weight:550;
  margin-bottom:1em}

/* --------------------------------------------- documents and running prose
   Legal pages and a news post body. A heading here is a signpost inside
   continuous text, not a banner: it is barely larger than the paragraph and
   it sits closer to the text it introduces than to the text above it, which
   is what makes a long page scannable rather than shouty. */
.doc{max-width:78ch}
/* the brand carried into the heading, rather than another block of black:
   navy text with a short cyan to lime bar beside it, the same two colours the
   logo uses and the same pair as the rule above every section head */
.doc h2,.prose h2{position:relative;font-size:1.2rem;font-weight:700;
  letter-spacing:-.008em;margin-top:2.2em;margin-bottom:.5em;color:var(--navy);
  padding-inline-start:16px}
.doc h2::before,.prose h2::before{content:"";position:absolute;
  inset-inline-start:0;top:.16em;bottom:.16em;width:4px;border-radius:3px;
  background:linear-gradient(180deg,var(--cyan),var(--lime))}
.doc h2:first-child,.prose h2:first-child{margin-top:0}
.doc h3,.prose h3{font-size:1.02rem;font-weight:700;margin-top:1.6em;margin-bottom:.35em}
.doc p{font-size:16px;line-height:1.75;color:var(--body);margin:0 0 1.05em}
.doc p b,.doc p strong{color:var(--ink);font-weight:650}
.doc ul{padding-inline-start:22px;margin:0 0 1.2em}
.doc li{margin:.3em 0}

/* ------------------------------------------------- prose, for a news post
   One readable column. The width is capped in characters rather than pixels,
   so the line length stays comfortable at any font size. */
.prose{max-width:74ch}
.prose>.lead{font-size:clamp(1.04rem,1.5vw,1.17rem);color:var(--ink);font-weight:500;
  margin:0 0 1.5em;padding-inline-start:16px;border-inline-start:3px solid var(--cyan)}
.prose h2{font-size:clamp(1.18rem,2vw,1.42rem);color:var(--navy);letter-spacing:-.015em;
  margin:1.9em 0 .6em}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 1.15em;font-size:16.2px;line-height:1.75}
.prose ul.ticks{margin-bottom:1.6em}

/* ------------------------------------------------------------------- split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,58px);align-items:center}
.fig{width:100%;border-radius:var(--r);overflow:hidden;background:var(--bg-alt);
  border:1px solid var(--line);display:grid;place-items:center;padding:28px;min-height:300px}

/* ------------------------------------------------------- the group cards
   Four brands, each in its own accent, so the structure of the company is
   readable before a word of it is read. */
.brands{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.brand-card{position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:24px 24px 26px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);transition:transform .25s var(--ease),
  box-shadow .25s var(--ease),border-color .25s}
.brand-card::before{content:"";position:absolute;inset-block-start:0;inset-inline:0;height:4px;
  background:var(--tone,var(--cyan))}
.brand-card:hover{transform:translateY(-3px);border-color:var(--tone,var(--cyan));
  box-shadow:0 14px 34px rgba(16,24,40,.1)}
.brand-card.t-navy{--tone:var(--navy-3);--tone-l:#eef1f9;--tone-d:var(--navy-2)}
.brand-card.t-lime{--tone:var(--lime);--tone-l:var(--lime-l);--tone-d:var(--lime-d)}
.brand-card.t-cyan{--tone:var(--cyan);--tone-l:var(--cyan-l);--tone-d:var(--cyan-d)}
.brand-card.t-gold{--tone:var(--gold);--tone-l:var(--gold-l);--tone-d:var(--gold-d)}
.bc-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.bc-head .ci{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;
  background:var(--tone-l);color:var(--tone-d)}
.bc-head h3{margin:0;font-size:1.08rem;color:var(--ink);letter-spacing:-.01em}
.bc-head .role{font-size:13.2px;color:var(--mut)}
.bc-head .num{margin-inline-start:auto;font-size:2.1rem;font-weight:800;line-height:1;
  color:var(--tone);opacity:.18}
.brand-card p{margin:0;font-size:15.2px}
.bc-link{display:inline-flex;align-items:center;gap:7px;margin-top:14px;font-weight:650;
  font-size:14px;color:var(--tone-d);min-height:40px}

/* ------------------------------------------------ the build band on About */
.band-build{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,48px);
  align-items:center;background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(26px,3.6vw,44px)}
.band-build h2{margin-top:.1em}
.band-build .hero-cta{margin-top:20px}
.bb-art{min-width:0}

/* ------------------------------------------------------ countries, in page */
.geo-strip{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.geo-strip .k{display:inline-flex;align-items:center;gap:8px;font-size:12.6px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.geo-strip .k .ic{color:var(--cyan-d)}
.geo-strip .chips{display:flex;flex-wrap:wrap;gap:8px}
.geo-strip .chips span{padding:7px 14px;border-radius:22px;font-size:14px;font-weight:600;
  color:var(--ink);background:#fff;border:1px solid var(--line)}
.geo-strip .hint{margin-top:12px}

/* ------------------------------------------- branded picture panel
   Drawn in inc/art.php, one per service and platform. */
.art-wrap{width:100%;min-width:0}
.art{display:block;width:100%;height:auto;aspect-ratio:640/460;border-radius:var(--r);
  box-shadow:0 18px 44px rgba(0,0,50,.18)}
.art-cap{display:block;margin-top:12px;font-size:13.4px;color:var(--mut);text-align:center}
body[dir=rtl] .art-cap{text-align:center}

/* placeholder where a real product screenshot goes */
.shot{width:100%;border-radius:var(--r);border:1px dashed var(--line);background:
  linear-gradient(135deg,var(--bg-alt),#fff);display:grid;place-items:center;
  padding:46px 24px;text-align:center;color:var(--mut)}
.shot b{display:block;color:var(--ink);font-size:15px;margin-bottom:5px}
.shot span{font-size:13.4px}

/* ------------------------------------------------------------------- stats */
.stats{background:var(--navy);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.stat .v{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800;color:var(--cyan);line-height:1.1}
.stat .l{font-size:14px;color:#bcc8e0;margin-top:5px}

/* -------------------------------------------------------------------- CTA */
.cta-band{background:linear-gradient(120deg,var(--navy),var(--navy-3));color:#fff;border-radius:var(--r);
  padding:clamp(30px,4vw,46px);display:flex;gap:26px;align-items:center;justify-content:space-between;
  flex-wrap:wrap}
.cta-band h2{color:#fff;margin:0 0 .3em}
.cta-band p{color:#c3cee4;margin:0;max-width:52ch}
.cta-band .btns{display:flex;gap:12px;flex-wrap:wrap}

/* ------------------------------------------------------------------ forms */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fg{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.fg.full{grid-column:1/-1}
label{font-size:14px;font-weight:650;color:var(--ink)}
/* 16px, not 15. Safari on iPhone zooms the whole page in when a field under
   16px is tapped, and it does not zoom back out afterwards, so the visitor is
   left filling in a form on a page that no longer fits. One pixel of type
   size is the whole fix. */
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:16px;color:var(--ink);background:#fff;transition:border-color .16s,box-shadow .16s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,174,207,.14)}
textarea{min-height:130px;resize:vertical}
.req{color:#d14343}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:14px 17px;border-radius:10px;margin-bottom:18px;font-size:15px}
.alert-ok{background:var(--lime-l);border:1px solid var(--lime);color:#2f4a05}
.alert-bad{background:#fdecec;border:1px solid #f3b4b4;color:#8a2020}
.hint{font-size:13px;color:var(--mut)}

.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,46px);align-items:start}
.info{background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px}
.info-row{display:flex;gap:13px;align-items:flex-start;padding-block:13px;border-bottom:1px solid var(--line)}
.info-row:last-child{border-bottom:0}
.info-row .ic{color:var(--cyan-d);margin-top:3px}
.info-row .k{font-size:12.4px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mut)}
.info-row .v{font-size:15.2px;color:var(--ink);margin-top:2px}
/* the email address is the action on this page, so it gets a thumb sized target */
.info-row .v a{display:inline-flex;align-items:center;min-height:40px}

/* -------------------------------------------------------------- breadcrumb */
.crumb{font-size:13.6px;color:var(--mut);margin-bottom:14px}
.crumb a{color:var(--mut)}
.crumb a:hover{color:var(--navy)}
.crumb .sep{margin-inline:7px;opacity:.6}

.page-head{background:var(--bg-deep);color:#fff;position:relative;overflow:hidden}
.page-head::before{content:"";position:absolute;inset:0;
  background:radial-gradient(700px 320px at 88% 0%,rgba(0,174,207,.3),transparent 62%)}
.page-head.lime::before{background:radial-gradient(700px 320px at 88% 0%,rgba(162,203,73,.26),transparent 62%)}
.page-head .wrap{position:relative;padding-block:clamp(40px,5vw,66px)}
.page-head h1{color:#fff;margin-bottom:.35em}
.page-head p{color:#c3cee4;max-width:62ch;margin:0;font-size:1.02rem}
.page-head .crumb,.page-head .crumb a{color:#9fb0cf}
.page-head .crumb a:hover{color:#fff}

/* ------------------------------------------------------------------ footer */
.site-foot{background:var(--navy);color:#b7c3db;padding-block:clamp(44px,5vw,64px) 0;font-size:14.6px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:34px}
.site-foot h4{color:#fff;font-size:13.4px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.site-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.site-foot a{color:#b7c3db}
.site-foot a:hover{color:var(--cyan)}
/* width:auto matters. The <img> carries width="900" as an attribute, so a rule
   that sets only the height leaves the browser using 900px for the width and
   the logo renders smeared across the footer. */
.foot-brand img{height:40px;width:auto;margin-bottom:14px}
.foot-brand p{font-size:14.4px;color:#9fadc8;max-width:36ch}
.foot-geo{margin-top:18px}
.foot-geo .k{display:inline-flex;align-items:center;gap:7px;font-size:12.4px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#8fa0bd;margin-bottom:10px}
.foot-geo .k .ic{color:var(--cyan)}
.foot-geo .chips{display:flex;flex-wrap:wrap;gap:7px}
.foot-geo .chips span{padding:5px 11px;border-radius:20px;font-size:13px;color:#e7eefb;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15)}
.foot-bot{margin-top:38px;border-top:1px solid rgba(255,255,255,.12);padding-block:20px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.4px;color:#8e9cb8}

/* ---------------------------------------------------------------- reveal
   Content is visible by default. It only starts hidden once the script has
   proved it is running, so a script that fails to load can never leave a
   visitor looking at a blank page. */
.js .rv{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* ------------------------------------------------------------ cookie note */
.cookie{position:fixed;inset-inline:16px;bottom:16px;z-index:60;max-width:460px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-l);
  padding:18px 20px;display:none}
.cookie.show{display:block;animation:pop .3s var(--ease) both}
.cookie p{font-size:14px;margin-bottom:12px}
.cookie .row{display:flex;gap:10px;flex-wrap:wrap}

/* ------------------------------------------------------------ breakpoints */
@media(max-width:1024px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:900px){
  .burger{display:inline-flex}
  nav.main{display:none;position:fixed;inset-block:0;inset-inline-end:0;width:min(330px,86vw);
    background:#fff;flex-direction:column;align-items:stretch;gap:2px;padding:84px 16px 28px;
    box-shadow:-18px 0 44px rgba(16,24,40,.16);overflow-y:auto;z-index:45}
  nav.main.open{display:flex;animation:navIn .26s var(--ease) both}
  @keyframes navIn{from{transform:translateX(100%)}to{transform:none}}
  body[dir=rtl] nav.main.open{animation:navInR .26s var(--ease) both}
  @keyframes navInR{from{transform:translateX(-100%)}to{transform:none}}
  nav.main>.item>a,nav.main>.item>button{width:100%;justify-content:space-between;padding:13px 14px}
  .mega,.mega.wide{position:static;width:auto;box-shadow:none;border:0;border-radius:0;
    padding:2px 0 8px;background:none}
  .mega.wide{grid-template-columns:1fr}
  .item.open .mega.wide{display:grid}
  nav.main .cta{margin:10px 0 0}
  nav.main .cta .btn{width:100%;justify-content:center}
  .doors,.split,.contact-grid,.g3,.feat{grid-template-columns:1fr}
  .hero .wrap.hero-top{grid-template-columns:1fr}
  .wall{order:-1;grid-template-columns:repeat(6,1fr);gap:7px;max-width:420px}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .brands{grid-template-columns:1fr}
  .band-build{grid-template-columns:1fr}
  .band-build .bb-art{order:-1}
}
@media(max-width:620px){
  .g2,.g4{grid-template-columns:1fr}
  .wall{display:none}
  .form-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .topbar .tb-left span:not(.tb-tag){display:none}
}
@media print{
  .topbar,.site-head,.site-foot,.burger,.cookie,.hero-cta,.btn{display:none!important}
  body{color:#000}
}