/* ---------- hero videos ---------- */
/* the video IS the background now (no photo). The tiny filter keeps the browser from switching the video to a
   separate "overlay" layer a moment after it starts, which is what gave the faint blue colour shift */
video.bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.001)}
.slide{background:var(--navy)}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(27,34,51,.85) 0%,rgba(40,59,135,.65) 45%,rgba(40,59,135,0) 78%);pointer-events:none}
[dir="rtl"] .slide::after{background:linear-gradient(270deg,rgba(27,34,51,.85) 0%,rgba(40,59,135,.65) 45%,rgba(40,59,135,0) 78%)}
.slide .in{z-index:2}
.phero video.bgv{z-index:0}

/* ---------- sub-page layout ---------- */
/* compact hero, so a sub-page reads as "a part of" its service rather than another service page */
.phero.sub .wrap{padding-bottom:clamp(40px,4vw,56px);gap:14px}
.phero.sub h1{font-size:clamp(30px,3.6vw,46px)}
/* strip of sibling links right under the hero */
.subnav{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 6px 18px rgba(40,59,135,.06)}
.subnav .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.sn-home{flex-shrink:0;font-weight:700;color:var(--navy);padding-inline-end:16px;border-inline-end:1px solid var(--line)}
.sn-list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-block:10px}
.sn-list::-webkit-scrollbar{display:none}
.sn-list a{flex-shrink:0;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background .25s,color .25s}
.sn-list a:hover{background:var(--mist);color:var(--navy)}
.sn-list a[aria-current="page"]{background:var(--navy);color:var(--white)}
[dir="rtl"] .sn-list a{font-size:15px}

/* ---------- card styles (a different one per category page) ---------- */
/* feature: first service is a big gradient tile with its graphic, the rest are plain white with a colour bar */
.st-feature .it:not(:first-child){background:var(--white)!important;color:var(--ink);box-shadow:none;border:1px solid var(--line);border-inline-start:5px solid var(--c);border-radius:16px;min-height:0}
.st-feature .it:not(:first-child) .wm,.st-feature .it:not(:first-child) .ii{display:none}
.st-feature .it:not(:first-child) b{color:var(--navy)}.st-feature .it:not(:first-child) .d{color:var(--slate)}
.items.bal.st-feature>.it:first-child{flex-basis:100%;min-height:200px;justify-content:center;padding:36px}
.st-feature .it:first-child b{font-size:24px}.st-feature .it:first-child .d{font-size:16px;max-width:60ch}
.st-feature .it:first-child .wm{inset-inline-end:40px;top:50%;transform:translateY(-50%);opacity:.18}
.st-feature .it:first-child .wm svg{width:180px;height:180px}

/* list: no boxes at all, a clean two-column list with coloured markers */
.items.st-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.st-list .it{background:none!important;box-shadow:none;border-radius:0;min-height:0;padding:20px 0 20px 28px;border-bottom:1px solid var(--line);color:var(--ink)}
[dir="rtl"] .st-list .it{padding:20px 28px 20px 0}
.st-list .it::before{content:"";position:absolute;inset-inline-start:0;top:27px;width:12px;height:12px;border-radius:4px;background:var(--c);transform:rotate(45deg)}
.st-list .it:hover{transform:none}
.st-list .wm,.st-list .ii{display:none}
.st-list .it b{color:var(--navy);font-size:18px}.st-list .it .d{color:var(--slate)}
@media(max-width:700px){.items.st-list{grid-template-columns:1fr}}

/* num: white cards, the only graphic is a large outlined number */
.st-num{counter-reset:it}
.st-num .it{counter-increment:it;background:var(--white)!important;color:var(--ink);border:1px solid var(--line);box-shadow:none;padding-top:72px}
.st-num .it::before{content:counter(it,decimal-leading-zero);position:absolute;inset-inline-start:26px;top:18px;font-size:44px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--c)}
.st-num .wm,.st-num .ii{display:none}
.st-num .it b{color:var(--ink)}.st-num .it .d{color:var(--slate)}
.st-num .it:hover{border-color:var(--c)}

/* band: white cards with a full-colour gradient band on top, no icons */
.st-band .it{background:var(--white)!important;color:var(--ink);box-shadow:0 10px 30px rgba(40,59,135,.08);padding-top:44px}
.st-band .it::before{content:"";position:absolute;inset-inline:0;top:0;height:14px;background:linear-gradient(90deg,var(--c),var(--cyan))}
.st-band .wm,.st-band .ii{display:none}
.st-band .it b{color:var(--ink);font-size:18px}.st-band .it .d{color:var(--slate)}
.items:not(.bal).st-feature>.it:first-child{grid-column:1/-1;min-height:180px;padding:32px}
@media(max-width:700px){.slide::after{background:rgba(27,34,51,.6)}}
/* hero without the arch photo: text keeps the left part, the video fills the rest */
.slide .in{grid-template-columns:minmax(0,1fr)}
.slide .tx{max-width:760px}

/* homepage hero: shorter, so the top of the next section shows on a laptop screen (Sameer 12 Oct).
   Every page hero uses the same height and spacing (Sameer 19 Oct: all heroes must match) */
:root{--hero-h:max(560px,calc(100svh - 120px))}   /* the next section peeks in by 120px on every page and screen (Sameer 19 Oct) */
main>.sec:first-child,main>#services:first-child{padding-top:clamp(24px,2.5vw,32px)}   /* ...and what peeks in is its content, not empty padding */
main>.sec:first-child .split{align-items:start}   /* heading level with the top of the photo, so it shows in the peek */
.slide{min-height:var(--hero-h)}
.slide .in{padding-block:calc(var(--hdr-h) + 24px) 120px}
.hero-nav{bottom:44px}
@media (max-width:900px){.slide .in{padding-block:calc(var(--hdr-h) + 24px) 120px}.hero-nav{bottom:36px}}
/* on shorter laptop screens the headline scales with the screen height too, so the next section still peeks in */
.slide h1.motto{font-size:clamp(40px,min(6vw,8.5svh),80px)}
.slide h2{font-size:clamp(32px,min(4.5vw,6.5svh),56px)}
.slide .tx{gap:clamp(14px,2.4svh,24px)}
.slide .in{padding-block:calc(var(--hdr-h) + 32px) 128px}
.phero{min-height:var(--hero-h);display:flex;align-items:center}.phero>.wrap{width:100%}
.phero .wrap,.phero.sub .wrap{padding-block:calc(var(--hdr-h) + 32px) 64px}   /* less bottom room than the homepage: no slide dots here */
/* Why Gulf: four cards in one row on desktop */
@media (min-width:901px){#why .why,.why.four{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* service cards without photos: a colour band with the service icon (photos are used once, in the homepage explorer) */
.svc .im{aspect-ratio:auto;height:84px;background:linear-gradient(135deg,var(--c),#12AEEF)}
.svc .ic{bottom:-26px}
/* branch cards on Contact: no photo */
.branch.nophoto{grid-template-columns:1fr}
/* legal pages: plain header */
.phero:not(:has(video)):not(:has(img)){background:linear-gradient(120deg,var(--ink),var(--navy) 60%,var(--blue))}
/* homepage service tabs on phones: two-column grid instead of a strip that cuts words off */
@media (max-width:700px){.ex-tabs{display:grid!important;grid-template-columns:1fr 1fr;overflow:visible!important;gap:8px}
 .ex-tab{min-height:52px;padding:8px 10px;font-size:14px;gap:8px}.ex-tab .ic{width:32px;height:32px;flex-shrink:0}.ex-tab .ic svg{width:18px;height:18px}
 .ex-tab .ex-t{white-space:normal;line-height:1.25}}
/* very narrow phones (320px): keep long words such as "Cybersecurity" inside the tab */
@media (max-width:340px){.ex-tab{padding:8px 7px;gap:6px;font-size:13px}.ex-tab .ic{width:28px;height:28px}.ex-tab .ex-t{min-width:0;overflow-wrap:anywhere}}
/* the human-check footer text is <small>, which the browser shrinks to 8.3px; use the 10px the widget was designed with */
.hc-brand small{font-size:10px}

/* careers application form (13 Oct 2026) */
.apply-wrap{max-width:760px}
.apply-wrap .head{text-align:center;justify-content:center}.apply-wrap .head .lead{margin-inline:auto}
.cvdrop{position:relative}
.cvdrop input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.cv-box{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border:1.5px dashed var(--line);border-radius:14px;background:var(--mist);color:var(--navy);cursor:pointer;text-align:center;transition:border-color .2s,background .2s}
.cv-box b{font-size:15px;color:var(--ink);word-break:break-all}.cv-box small{font-weight:400;color:var(--slate)}
.cvdrop:hover .cv-box,.cvdrop input:focus-visible+.cv-box{border-color:var(--cyan);background:#e3f4fc}
.cvdrop input:focus-visible+.cv-box{box-shadow:0 0 0 4px rgba(18,174,239,.25)}
.cvdrop.has .cv-box{border-style:solid;border-color:var(--blue)}

/* contrast: link-blue text on white needs 4.5:1 (#0A7FCB is 4.2:1) */
.chip-l.all,.cookie a{color:#0768AA}
/* WCAG 2.2 target size: the caret toggle grows from 22px to 24px by taking the 2px end padding of the link beside it,
   so nothing moves and nothing overlaps (the caret itself stays centred where it was) */
.dd .top,[dir="rtl"] .dd .top{padding-inline-end:0}
.dd .tog{width:24px;min-width:24px;flex:none;padding-inline-start:2px}

/* Form results (sent / could not send / fix the form) appear in a centred pop-up, see js/forms.js. The thin inline strips under the
   form are no longer shown; their text is the pop-up's wording. */
.qform .msg,.qform.sent .msg.ok,.qform.err .msg.no,.qform.capx .msg.cap-no{display:none!important}
.fm-lock{overflow:hidden}
.fm-ov{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(20,27,48,.62);animation:fmfade .18s ease-out}
.fm-box{width:min(100%,460px);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;color:var(--ink,#1B2233);border-radius:22px;padding:34px 28px 28px;text-align:center;box-shadow:0 30px 80px rgba(10,20,50,.35);animation:fmpop .22s ease-out}
.fm-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;margin-bottom:16px}
.fm-box.ok .fm-ic{background:#e3f4fc;color:#0768AA}
.fm-box.no .fm-ic{background:#fde8e8;color:#B42318}
.fm-box h2{margin:0 0 10px;font-size:24px;line-height:1.25;color:var(--navy,#283B87)}
.fm-box.no h2{color:#8a1c1c}
.fm-box p{margin:0 0 24px;font-size:17px;line-height:1.6}
.fm-ok{min-width:140px;justify-content:center}
@keyframes fmfade{from{opacity:0}to{opacity:1}}
@keyframes fmpop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:480px){.fm-box{padding:28px 20px 22px}.fm-box h2{font-size:21px}.fm-box p{font-size:16px}.fm-ok{width:100%}}
@media (prefers-reduced-motion:reduce){.fm-ov,.fm-box{animation:none}}