/* ═══════════════════════════════════════════════════════════
   ECC — SHARED SITE CHROME
   Canonical header, language bar and footer for every page,
   plus the responsive and cross-browser corrections.
   Loaded AFTER each page's own <style> so it wins on conflict.
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. HEADER (identical on all pages) ---------- */
header#hdr{position:fixed;inset:0 0 auto 0;z-index:80;transition:.35s var(--ease,cubic-bezier(.22,.8,.24,1))}
header#hdr .nav{display:flex;align-items:center;gap:26px;height:76px;
  padding-inline:clamp(16px,4vw,44px);max-width:1460px;margin-inline:auto}
header#hdr .brand img{height:40px;width:auto}
header#hdr .brand .b-color{display:none}
header#hdr ul{display:flex;gap:4px;margin-left:auto;list-style:none}
header#hdr ul a{display:block;padding:9px 13px;border-radius:8px;font-weight:600;font-size:14.5px;
  color:#E7E3E0;transition:.25s;white-space:nowrap}
header#hdr ul a:hover{color:#fff;background:rgba(255,255,255,.08)}
header#hdr ul a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--red,#B63127)}
header#hdr .cta{margin-left:6px;background:var(--red,#B63127);color:#fff;font-weight:700;font-size:14.5px;
  padding:11px 20px;border-radius:10px;transition:.25s;white-space:nowrap;
  box-shadow:var(--shadow-r,0 12px 34px rgba(182,49,39,.28))}
header#hdr .cta:hover{background:var(--red-deep,#90251B);transform:translateY(-1px)}
header#hdr.solid{background:rgba(20,24,29,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.07)}
header#hdr.lightbar{background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line,#E8E4E1)}
header#hdr.lightbar ul a{color:var(--ink-2,#1C2127)}
header#hdr.lightbar ul a:hover{background:var(--mist,#F7F5F3);color:var(--ink,#14181D)}
header#hdr.lightbar .brand .b-white{display:none}
header#hdr.lightbar .brand .b-color{display:block}

#mnav{display:none}
#burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:22px;cursor:pointer;
  width:44px;height:44px;border-radius:10px}
header#hdr.lightbar #burger{color:var(--ink,#14181D)}

/* ---------- 2. LANGUAGE BAR ---------- */
header#hdr .lang{display:flex;gap:2px;margin-left:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:3px}
header#hdr .lang button{border:0;background:none;color:#C7CCD2;font:700 12px/1 var(--disp,'Cairo',sans-serif);
  padding:7px 9px;border-radius:8px;cursor:pointer;transition:.2s;min-width:34px}
header#hdr .lang button:hover{color:#fff}
header#hdr .lang button.on{background:var(--red,#B63127);color:#fff}
header#hdr.lightbar .lang{background:var(--mist,#F7F5F3);border-color:var(--line,#E8E4E1)}
header#hdr.lightbar .lang button{color:var(--slate,#5F6670)}
header#hdr.lightbar .lang button.on{background:var(--red,#B63127);color:#fff}

/* ---------- 3. HEADER RESPONSIVE ----------
   Breakpoint raised from 1023px to 1199px: at 1024–1199 the full
   nav, language bar and CTA overflowed the viewport.               */
@media(max-width:1199px){
  header#hdr ul,header#hdr .nav > .cta,header#hdr .nav > .lang{display:none}
  #burger{display:grid;place-items:center}
  #mnav{position:fixed;inset:76px 0 auto 0;background:var(--ink,#14181D);padding:14px 22px 26px;
    display:none;flex-direction:column;gap:2px;border-bottom:1px solid var(--line-dark,#2E353D);
    z-index:79;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;
    -webkit-overflow-scrolling:touch}
  #mnav.open{display:flex !important}
  #mnav a{padding:13px 10px;border-radius:10px;color:#E7E3E0;font-weight:700;
    border-bottom:1px solid rgba(255,255,255,.05)}
  #mnav a:active{background:rgba(255,255,255,.06)}
  #mnav .cta{margin-top:12px;background:var(--red,#B63127);color:#fff;text-align:center;
    border-radius:12px;border-bottom:0}
  #mnav .lang{display:flex;gap:4px;margin:14px 0 0;justify-content:center;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    border-radius:10px;padding:4px}
  #mnav .lang button{border:0;background:none;color:#C7CCD2;font:700 13px/1 var(--disp,'Cairo',sans-serif);
    padding:10px 12px;border-radius:8px;cursor:pointer;min-width:44px;min-height:40px}
  #mnav .lang button.on{background:var(--red,#B63127);color:#fff}
}
@media(max-width:479px){
  header#hdr .nav{height:66px;padding-inline:14px}
  header#hdr .brand img{height:32px}
  #mnav{inset:66px 0 auto 0;max-height:calc(100dvh - 66px)}
}

/* ---------- 4. FOOTER (identical on all pages) ---------- */
footer.site-footer{background:#101317;color:#9AA1A9;padding:64px 0 34px;
  border-top:1px solid rgba(255,255,255,.06)}
footer.site-footer .wrap{max-width:var(--w,1180px);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
footer.site-footer .f-g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.07)}
footer.site-footer .f-g img{height:44px;width:auto;margin-bottom:18px}
footer.site-footer .f-g p{font-size:14px;max-width:380px}
footer.site-footer .f-g h4{color:#fff;font-size:14px;letter-spacing:.14em;
  font-family:var(--mono,ui-monospace,monospace);font-weight:600;margin-bottom:16px}
footer.site-footer .f-g ul{list-style:none}
footer.site-footer .f-g ul li{margin-bottom:10px}
footer.site-footer .f-g ul a{font-size:14px;transition:.2s}
footer.site-footer .f-g ul a:hover{color:#fff}
footer.site-footer .f-bot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:26px;font:400 12.5px var(--mono,ui-monospace,monospace);letter-spacing:.06em}
footer.site-footer .f-bot .tag{color:var(--red,#B63127)}
footer.site-footer .f-legal{display:flex;gap:18px;flex-wrap:wrap}
footer.site-footer .f-legal a:hover{color:#fff}
@media(max-width:1023px){footer.site-footer .f-g{grid-template-columns:1fr 1fr}}
@media(max-width:639px){
  footer.site-footer{padding:44px 0 26px}
  footer.site-footer .f-g{grid-template-columns:1fr;gap:28px}
  footer.site-footer .f-bot{flex-direction:column;gap:8px}
}

/* ---------- 5. BACK TO TOP ---------- */
#top{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);width:48px;height:48px;
  border-radius:14px;border:0;background:var(--red,#B63127);color:#fff;font-size:17px;cursor:pointer;
  box-shadow:var(--shadow-r,0 12px 34px rgba(182,49,39,.28));opacity:0;pointer-events:none;
  transition:.3s var(--ease,ease);z-index:70}
#top.show{opacity:1;pointer-events:auto}
#top:hover{background:var(--red-deep,#90251B);transform:translateY(-3px)}

/* ---------- 6. GLOBAL RESPONSIVE / CROSS-BROWSER FIXES ---------- */

/* Overflow was previously hidden by body{overflow-x:hidden}, which clipped
   the logo mark and eagle watermark instead of fitting them. Contain the
   decorative layers properly so nothing is cut off. */
html,body{max-width:100%}
.hero,.sec,section{overflow-x:clip}
@supports not (overflow:clip){.hero,.sec,section{overflow-x:hidden}}
.hero .glow,.glow{max-width:100vw;pointer-events:none}
.mark,.mark img{max-width:100%;height:auto}
svg{max-width:100%}

/* Safari/iOS: dvh where supported, vh fallback everywhere else */
@supports (height:100dvh){.hero > .wrap{min-height:100dvh}}
.hero .hstats .wrap{min-height:0 !important}

/* Tap targets: 44px minimum on touch pointers (WCAG 2.5.5) */
@media(pointer:coarse){
  header#hdr .lang button,#burger,#top,
  .ind-pill,.uc-expand-btn,.f-g ul a,.f-legal a{min-height:44px}
  .f-g ul a,.f-legal a{display:inline-block;padding-block:4px}
}

/* Long unbroken strings (emails, URLs, AED figures) must not force scroll */
p,li,td,dd,.uc-title,.uc-challenge,.pf-copy{overflow-wrap:break-word;word-wrap:break-word}

/* Firefox: backdrop-filter is unsupported on older builds — keep the bar readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header#hdr.solid{background:rgba(20,24,29,.97)}
  header#hdr.lightbar{background:rgba(255,255,255,.98)}
}

/* Reduced motion honoured for the reveal layer as well as scrolling */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .uc-card,.reveal{opacity:1 !important;transform:none !important}
}

/* Skip link — was parked off-screen with a negative offset that some
   browsers refuse to scroll back into view on focus */
.skip{position:absolute;left:-9999px;top:0;z-index:200}
.skip:focus{left:8px;top:8px;background:var(--red,#B63127);color:#fff;
  padding:10px 16px;border-radius:8px;font-weight:700}

/* ---------- 7. IMPACT PAGE RESPONSIVE CORRECTIONS ---------- */
/* Sidebar pills overflowed the viewport at 360/414px and the whole
   layout overflowed at 1024px. Collapse to a horizontal scroller. */
@media(max-width:1199px){
  .layout{grid-template-columns:1fr !important;display:block !important}
  .sidebar{position:static !important;width:auto !important;max-width:100% !important}
  .sidebar-inner{position:static !important;display:flex;gap:8px;overflow-x:auto;
    padding:12px 16px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    border-bottom:1px solid var(--line,#E8E4E1);background:var(--mist,#F7F5F3)}
  .sidebar-inner::-webkit-scrollbar{height:4px}
  .sidebar-inner::-webkit-scrollbar-thumb{background:var(--red,#B63127);border-radius:4px}
  .sb-label{display:none}
  .ind-pill{flex:0 0 auto;width:auto !important;max-width:none;scroll-snap-align:center;
    white-space:nowrap;padding:10px 14px}
  .ip-name{white-space:nowrap}
  .main{padding:24px 16px !important;min-height:0 !important}
}
@media(max-width:639px){
  .cases-grid{gap:14px}
  .uc-top{flex-direction:column;align-items:flex-start;gap:12px}
  .uc-right{align-self:flex-start}
  .uc-detail-inner{grid-template-columns:1fr !important}
  .breadcrumb{padding:10px 16px;font-size:12px}
}

/* ---------- 8. CONTACT FORM STATUS ---------- */
.cform-note{margin-top:16px;padding:13px 16px;border-radius:10px;font-size:14.5px;
  line-height:1.55;display:none}
.cform-note.ok,.cform-note.err{display:block}
.cform-note.ok{background:#EAF5EC;border:1px solid #BEDCC5;color:#1E5E32}
.cform-note.err{background:var(--chip,#F6EAE8);border:1px solid #E4BDB8;color:var(--red-deep,#90251B)}

/* ---------- 9. SCENARIO NOTICE (Impact page) ---------- */
.scenario-note{background:#FFF8E9;border:1px solid #EBD9AE;border-left:4px solid #C99A2E;
  border-radius:10px;padding:15px 18px;margin:0 auto 26px;max-width:1180px;
  font-size:14px;line-height:1.65;color:#5A4718;display:flex;gap:12px;align-items:flex-start}
.scenario-note i{color:#C99A2E;margin-top:3px;flex:none}
.scenario-note b{color:#3F3110}
@media(max-width:1199px){.scenario-note{margin:16px;max-width:none}}


/* ---------- 10. IMPACT HERO CLEARS THE FIXED HEADER ---------- */
body.has-fixed-header{padding-top:0}
#ucmain .hero{padding-top:calc(76px + clamp(30px,5vw,64px)) !important}
nav.breadcrumb{margin-top:76px}
@media(max-width:479px){
  #ucmain .hero{padding-top:calc(66px + 26px) !important}
  nav.breadcrumb{margin-top:66px}
}


/* ═══════════════ REVISION 2 ═══════════════ */

/* ---------- A. CAIRO EVERYWHERE ----------
   JetBrains Mono was carrying the small labels, statistics, section
   numbers and table headers. The brief is Cairo across every page and
   section, so the mono token now resolves to Cairo and the letterspacing
   is reduced to suit it. */
:root{
  --mono:'Cairo','Segoe UI','Helvetica Neue',Arial,sans-serif !important;
  --disp:'Cairo','Segoe UI','Helvetica Neue',Arial,sans-serif !important;
  --f:'Cairo','Segoe UI','Helvetica Neue',Arial,sans-serif !important;
}
body,button,input,select,textarea,h1,h2,h3,h4,h5,h6,.mono,code,kbd,
.hstats b,.f-bot,.f-g h4,.legal-toc b,.legal-wrap th,.legal-wrap h2 .num,
.breadcrumb,.ip-count,.uc-metric-big,.sb-label{
  font-family:'Cairo','Segoe UI','Helvetica Neue',Arial,sans-serif !important;
}
.f-bot,.f-g h4,.legal-toc b,.legal-wrap th{letter-spacing:.08em}
.hstats b,.uc-metric-big{letter-spacing:-.01em}

/* ---------- B. EAGLE WATERMARK ----------
   Now an inline SVG, so it stays sharp at any size. Sized and positioned
   to sit fully inside the section instead of bleeding off three edges. */
.why{position:relative;overflow:hidden}
.why .eaglewm{
  position:absolute;
  right:clamp(10px,3vw,72px);
  top:50%;
  transform:translateY(-50%);
  /* percentage heights cannot resolve here (the section has no definite
     height), which made the SVG fall back to 100% width and bleed off the
     edge — so it is sized in viewport units and capped by aspect ratio */
  height:clamp(200px,30vw,470px);
  width:auto;
  aspect-ratio:390 / 450;
  opacity:.14;
  color:currentColor;
  pointer-events:none;
  z-index:1;
}
.why .wrap{position:relative;z-index:2}
@media(max-width:1023px){
  .why .eaglewm{height:clamp(180px,34vw,330px);opacity:.11;
    right:auto;left:50%;transform:translate(-50%,-50%)}
}
@media(max-width:639px){
  .why .eaglewm{height:clamp(150px,44vw,240px);opacity:.09}
}

/* ---------- C. POLICY PAGES ----------
   Vertical rhythm tightened; the page was running roughly a third longer
   than it needed to. Also clears the fixed header. */
.legal-wrap{max-width:820px;margin:0 auto;
  padding:calc(76px + 34px) 24px 64px !important}
.legal-wrap h1{margin-bottom:8px !important}
.legal-updated{margin-bottom:22px !important}
.legal-intro{margin-bottom:26px !important;padding-bottom:22px !important}
.legal-toc{margin-bottom:30px !important;padding:18px 22px !important}
.legal-toc li{margin-bottom:4px !important}
.legal-wrap section{
  /* the anchor offset was done with 128px of real padding, which is where
     most of the empty space came from — scroll-margin does the same job
     for TOC jumps without occupying the page */
  padding-top:0 !important;
  scroll-margin-top:100px !important;
  margin-bottom:26px !important;
}
.legal-wrap h2{margin-bottom:9px !important}
.legal-wrap p{margin-bottom:9px !important;line-height:1.68 !important}
.legal-wrap ul{margin:8px 0 !important}
.legal-wrap li{margin-bottom:4px !important;line-height:1.62 !important}
.legal-wrap table{margin:12px 0 6px !important}
.legal-wrap td{padding:9px 14px !important}
.legal-contact-box{margin-top:34px !important;padding:22px 26px !important}
@media(max-width:479px){
  .legal-wrap{padding:calc(66px + 24px) 18px 48px !important}
  .legal-wrap h1{font-size:28px}
}

/* ---------- D. COOKIE PREFERENCES ---------- */
.cookie-bar{display:none}
.cookie-bar.open{display:block}
.cookie-panel{display:none}
.cookie-panel.open{display:block}
@media(max-width:639px){
  .cookie-bar{padding:18px 16px;max-height:80vh;overflow-y:auto}
  .cookie-inner{gap:14px}
  .cookie-actions{width:100%}
  .cookie-actions .cbtn{flex:1 1 auto;min-height:44px}
}


/* ---------- E. NAVIGATION ICONS WITHOUT A CDN DEPENDENCY ----------
   The menu button and back-to-top previously relied on Font Awesome. If
   the CDN is slow or blocked, the primary mobile navigation disappears
   entirely, so both now use inline SVG. */
#burger{display:none;place-items:center;padding:0}
#burger .ic-x{display:none}
#burger.is-open .ic-bars{display:none}
#burger.is-open .ic-x{display:block}
#burger svg{width:22px;height:22px}
#top{display:grid;place-items:center}
#top svg{width:18px;height:18px}
@media(max-width:1199px){#burger{display:grid}}


/* ---------- F. HERO MOTION FIELD ----------
   #net is a <canvas>, which is a replaced element: `inset:0` positions it
   but does not stretch it, so it sat at the browser default 300x150 in the
   top-left corner of the hero. It now fills the section properly. */
#net{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:.55}
@media(max-width:639px){#net{opacity:.4}}