/* SANAD shared additions (both languages) */

/* skip link */
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:100;background:var(--gold);color:var(--navy);font-weight:700;padding:10px 16px;border-radius:8px;text-decoration:none}
.skip:focus{top:12px}

/* top contact bar */
.topbar{background:#011a31;color:var(--on-navy-muted);font-size:13.5px;border-bottom:1px solid var(--navy-line)}
.topbar .tb-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding-block:4px}
.topbar a{color:var(--on-navy);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:32px;min-width:32px}
.tb-contact{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}
.tb-contact .tb-lbl{color:var(--on-navy-muted)}
.tb-contact a:hover .tb-num{color:var(--gold-hi)}
.tb-contact svg{color:var(--gold);flex:none}
.tb-num{font-variant-numeric:tabular-nums;letter-spacing:.01em;unicode-bidi:isolate}
.tb-sep{width:1px;height:16px;background:var(--navy-line)}
.tb-social{display:flex;align-items:center;gap:6px}
.tb-social a{width:32px;height:32px;justify-content:center;border-radius:8px;border:1px solid var(--navy-line);transition:background .2s,border-color .2s,color .2s}
.tb-social a:hover{background:var(--navy-2);border-color:var(--gold);color:var(--gold-hi)}
.topbar a:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
@media (max-width:560px){.tb-sep,.tb-contact .tb-lbl,.tb-wa-txt{display:none}.topbar{font-size:13px}.tb-contact{gap:4px 12px}}

/* floating WhatsApp button: icon only, sits in the page margin */
.g-fab{position:fixed;z-index:30;bottom:calc(20px + env(safe-area-inset-bottom,0px));inset-inline-end:20px;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.3);transition:transform .2s var(--ease)}
.g-fab:hover{transform:translateY(-2px)}
.g-fab svg{width:28px;height:28px}
.g-fab:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media (max-width:560px){.g-fab{width:52px;height:52px;bottom:calc(14px + env(safe-area-inset-bottom,0px));inset-inline-end:14px}}

/* service cards: on touch screens the card opens the service page in one tap */
.flip-link{color:var(--gold-ink);text-decoration:none;align-items:center;gap:6px;font-weight:600;font-size:.8125rem;margin-top:auto}
.flip-link::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.m-four .flip-link{min-height:24px;color:var(--gold-ink)!important;display:none!important;border:0!important;padding:0!important;animation:none!important;opacity:1!important;grid-template-rows:none}
@media (hover:none){.m-four .flip-link{display:inline-flex!important}}

/* partners in success (logos only until real testimonials are approved) */
.partners{background:var(--bg)}
.partners .p-head{margin-bottom:var(--h2gap,32px)}
.partners .p-sub{color:var(--muted);margin:8px 0 0;max-width:60ch}
.p-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,220px));gap:14px}
.p-logos li{aspect-ratio:3/2;overflow:hidden;min-width:0;background:#fff;border:1px solid var(--line);border-radius:var(--r,12px);padding:18px;display:grid;place-items:center;transition:border-color .2s,box-shadow .2s}
.p-logos li:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(1,36,66,.08)}
.p-logos img{width:100%;height:100%;object-fit:contain}
@media (max-width:520px){.p-logos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* minimum 24px tap targets for stand-alone links */
footer .meta a,footer .f-svc a{display:inline-block;padding-block:3px;min-height:24px}
.phone-card .mail,.phone-card .li-link{display:inline-block;padding-block:3px;min-height:24px}
.ab-name a{display:inline-block;padding-block:3px}
.g-row.top a{display:inline-block;padding-block:4px;min-height:24px}

/* ===== Arabic homepage (GCC) ===== */
html[lang=ar] .m-hero{background:radial-gradient(55% 70% at 15% 40%,rgba(234,176,34,.14),transparent 60%),radial-gradient(60% 80% at 90% 0%,rgba(31,76,116,.6),transparent 70%),linear-gradient(180deg,#012442 0%,#011a31 100%)!important}
.g-eyebrow{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--gold);font-size:15px;margin:0 0 16px}
.g-eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);border-radius:2px}
.g-globe{margin:0;justify-self:center;width:min(100%,600px)}
.g-globe img{display:block;width:100%;height:auto}
.g-gcc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:6px}
.g-gcc span{color:var(--gold);font-weight:700;font-size:14px;margin-inline-end:4px}
.g-gcc b{font-weight:600;font-size:13.5px;color:var(--on-navy);border:1px solid var(--navy-line);border-radius:999px;padding:5px 12px;background:rgba(255,255,255,.04)}

/* bridge section (banner-style pillars) */
.g-pillars{background:linear-gradient(180deg,#011a31 0%,#012442 100%);color:var(--on-navy);padding-block:clamp(48px,6vw,80px)}
.g-pillars h2{font:700 max(1.625rem,min(2.6vw,2.25rem))/1.3 var(--display);color:#fff;margin:0 0 6px;text-align:center}
.g-pillars .g-sub{color:var(--on-navy-muted);text-align:center;margin:0 0 clamp(28px,3vw,40px)}
.g-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.g-row>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:8px 24px;border-inline-start:1px solid rgba(234,176,34,.55)}
.g-row>div:first-child{border-inline-start:0}
.g-row svg{width:46px;height:46px;color:var(--gold)}
.g-row.top h3{margin:0;font:700 clamp(20px,2.1vw,26px)/1.35 var(--display);color:#fff}
.g-row.top a{color:var(--gold);font-weight:700;font-size:14px;text-decoration:none}
.g-row.top a:hover{color:var(--gold-hi)}
.g-sep{height:1px;margin:clamp(26px,3vw,38px) 0;background:linear-gradient(90deg,transparent,rgba(234,176,34,.7),transparent)}
.g-row.bot svg{width:34px;height:34px}
.g-row.bot h3{margin:0;font:700 18px/1.35 var(--display);color:#fff;display:flex;align-items:center;gap:10px}
.g-row.bot p{margin:0;color:var(--on-navy);line-height:1.8;max-width:30ch}
@media (max-width:760px){.g-row{grid-template-columns:1fr;gap:22px}.g-row>div{border-inline-start:0;padding:0}.g-row.top>div+div,.g-row.bot>div+div{border-top:1px solid rgba(234,176,34,.3);padding-top:20px}}

/* 404 */
.nf{min-height:60vh;display:grid;place-items:center;text-align:center;padding:72px 16px}
.nf h1{font:800 clamp(2rem,4vw,3rem)/1.15 var(--display);margin:0 0 12px;color:#fff}
.nf p{color:var(--on-navy-muted);margin:0 0 6px}
.nf .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.nf .btn{display:inline-flex}

/* header: keep the menu on one line on small laptops and tablets in landscape */
@media (min-width:961px) and (max-width:1279px){
  .nav-links{gap:6px}
  .hdr-navy .nav-links a{white-space:nowrap;padding-inline:8px;font-size:.9375rem}
  .hdr-navy .nav{gap:28px}
  .nav-lang{padding-inline-start:10px;margin-inline-start:2px}
  .nav-end .btn{padding:0 16px}
}
/* never split a phone number across two lines */
.tb-num,.phone-card .mail{white-space:nowrap}

/* Arabic About: background and experience tiles with icons */
.ab-tiles{list-style:none;margin:22px 0 26px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ab-tiles li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--r,12px);padding:16px 18px}
.ab-tiles svg{width:34px;height:34px;flex:none;color:var(--gold-ink);margin-top:2px}
.ab-tiles b{display:block;color:var(--fg);font:700 1.0625rem/1.35 var(--display);margin-bottom:4px}
.ab-tiles span{display:block;color:var(--muted);font-size:.9375rem;line-height:1.7}
@media (max-width:560px){.ab-tiles{grid-template-columns:1fr}}

/* Arabic service cards: clearer, larger text and an always-visible details link */
html[lang=ar] .h-strip .flip-f p{font-size:1rem;line-height:1.75;color:#2c3e55}
html[lang=ar] .h-strip .flip-f h3{font-size:1.25rem}
html[lang=ar] .m-four .flip-link{display:inline-flex!important;font-size:.875rem;font-weight:700}
@media (max-width:560px){html[lang=ar] .h-strip .m-four.flips{grid-template-columns:1fr}}

/* client logos: five in one row on desktop; centred rows on tablet and phone */
.p-logos{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:980px){.p-logos{display:flex;flex-wrap:wrap;justify-content:center}.p-logos li{flex:0 0 calc((100% - 28px)/3)}}
@media (max-width:520px){.p-logos li{flex-basis:calc((100% - 14px)/2)}}

/* Arabic service pages: challenge (bold) + what we do */
html[lang=ar] .signs li span b{display:block;color:var(--fg);font:700 1.0625rem/1.4 var(--display);margin-bottom:6px}
html[lang=ar] .signs li span{color:#3c4b60;line-height:1.75}
.p-logos li{position:relative}
.p-logos img{position:absolute;inset:14px;width:calc(100% - 28px);height:calc(100% - 28px);object-fit:contain}

/* hero headline: close the gap the display font leaves before , and . */
.m-hero h1 .pc{margin-inline-start:-.1em}

/* track record: the 10%+ figure matches the 25%+ figure */
.mini:not(.navy) b.num{font-size:64px;line-height:1.1;letter-spacing:-.02em;color:var(--navy,#012442)}
.mini:not(.navy) b.num sup{font-size:32px;color:var(--gold-ink)}
@media (max-width:560px){.mini b.num{font-size:52px!important}.mini b.num sup{font-size:26px!important}}

/* clients: placeholders until approvals arrive */
.p-logos li.soon{border-style:dashed;background:var(--alt,#f3f6fa)}
.p-logos li.soon:hover{border-color:var(--line);box-shadow:none}
.p-logos li.soon span{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:.8125rem;font-weight:600;letter-spacing:.02em;line-height:1.5}
.t-grid{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.t-soon{position:relative;background:var(--alt,#f3f6fa);border:1px dashed var(--line);border-radius:var(--r,12px);padding:22px 24px 20px;min-height:150px;display:flex;flex-direction:column;gap:8px}
.t-q{font:700 54px/1 var(--display);color:var(--gold);height:30px}
.t-soon p{margin:0;color:var(--fg);font-weight:600}
.t-who{margin-top:auto;color:var(--muted);font-size:.8125rem}
@media (max-width:640px){.t-grid{grid-template-columns:1fr}}

/* LinkedIn: icon + name card (contact) and icon link (About) */
.li-card{display:flex;align-items:center;gap:12px;text-decoration:none;padding:10px 14px;margin-top:2px;border:1px solid var(--navy-line);border-radius:12px;background:rgba(255,255,255,.04);transition:border-color .2s,background .2s;max-width:100%}
.li-card:hover{border-color:var(--gold);background:rgba(255,255,255,.07)}
.li-card:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.li-ic{flex:none;width:38px;height:38px;border-radius:9px;background:#0a66c2;color:#fff;display:grid;place-items:center}
.li-ic svg{width:20px;height:20px}
.li-txt{display:flex;flex-direction:column;min-width:0}
.li-txt b{color:var(--on-navy);font-weight:700;font-size:1rem;line-height:1.35}
.li-txt small{color:var(--gold);font-size:.8125rem;font-weight:600;line-height:1.4}
.li-card:hover .li-txt small{color:var(--gold-hi)}
.ab-name a.ab-li{display:inline-flex;align-items:center;gap:8px;min-height:32px;font-weight:600}
.ab-li svg{width:18px;height:18px;flex:none;padding:3px;box-sizing:content-box;border-radius:5px;background:#0a66c2;color:#fff}

/* ===== audit fixes (Oct 2026) ===== */
/* tablet: hero photo fills the whole hero (no flat band above it) */
@media (min-width:761px) and (max-width:980px){html[lang|=en] .m-hero{background:linear-gradient(180deg,rgba(1,28,52,.9) 0%,rgba(1,28,52,.82) 50%,rgba(1,28,52,.55) 75%,rgba(1,28,52,.85) 100%),url(img/bg-fdd693fec2.webp) 60% 40%/cover no-repeat,#012442!important}}
/* About: keep the photo in view while the text scrolls past (desktop) */
@media (min-width:981px){.about2 .ab-quote{position:sticky;top:110px;align-self:start}}
/* figures beside the "Built for" heading: number and label on one line */
.pb-figs li{align-items:center}
/* English display headings: pull in the gap the face leaves before . , ? ! : */
html[lang|=en] .pc{margin-inline-start:-.08em}
html[lang|=en] .m-hero h1 .pc{margin-inline-start:-.1em}
/* service cards: title aligned with its icon and text, in both languages */
.m-four .flip-f h3{align-self:flex-start;text-align:start}
/* Track record: subline sits with its heading */
#results .h3-h2{margin-bottom:10px!important}
/* tender figures: display face with even-width digits instead of a code font */
.ledger dd{font-family:var(--display)!important;font-weight:700!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em!important}
/* browser surfaces in the brand palette */
::selection{background:rgba(234,176,34,.4)}
input,textarea{caret-color:var(--gold-ink)}
.dark input,.dark textarea,.contact input,.contact textarea{caret-color:var(--gold)}
:root{accent-color:var(--gold)}
/* experience figures: same box height whatever the glyphs (e.g. £) so the lines below align */
.exp li{align-content:start}
.exp b{display:block;height:1em;line-height:1!important}
.pc{display:inline!important;color:inherit!important;font:inherit!important}

/* ===== second audit fixes ===== */
/* headings: narrow hyphen from the text face, never split a hyphenated word */
.nw{white-space:nowrap}
.hy{font-family:var(--body)!important;font-weight:600;letter-spacing:0}
/* form errors: clearly visible, with a warning mark */
.enq .err:not([hidden]){display:flex;align-items:center;gap:7px;color:#ffb4a3!important;font-weight:600;margin-top:6px}
.enq .err:not([hidden])::before{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6 .01 0M11 10h2v5h-2zm0 7h2v2h-2z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1 21h22L12 2zm0 6 .01 0M11 10h2v5h-2zm0 7h2v2h-2z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat}
.enq [aria-invalid=true]{border-color:#ff9c87!important;box-shadow:0 0 0 1px #ff9c87}
/* homepage 3D: controls in the empty corner, clear of the chart */
.m-stage .stage-ctl{right:auto;left:8px}
/* phone menu: dim the page behind it (shadow clipped so the header stays clear) */
@media (max-width:960px){.nav-links.open{box-shadow:0 0 0 100vmax rgba(1,16,32,.62);clip-path:inset(0 -100vmax -100vmax -100vmax)}}