/* Wordcraft Brand Book 2.0 layer for every page except the homepage (home-brand.css) and /go/ landings (end of go.css).
   Loaded after site.css + theme.css. Design only: fonts, brand colours, hero fade, cards, CTA band, footer.
   No markup or text depends on this file. */

:root{
  --bg:#081D42; --navy:#0B2A63; --navy2:#123A7A; --blue:#0066B2; --blue-d:#00579A; --sky:#8CC8F5; --ice:#EEF3FA;
  --gold:#E8B959; --gold-d:#8A6A1C; --ink:#0B1B33; --inkm:#5B6B85; --mist:#D5DEEB;
  --w85:rgba(255,255,255,.88); --w70:rgba(255,255,255,.76); --w60:rgba(255,255,255,.68); --w35:rgba(255,255,255,.45);
  --fd:'Saira',Arial,sans-serif; --fb:'Poppins',Arial,sans-serif;
  --grad:linear-gradient(165deg,#0066B2 0%,#0B2A63 62%,#081D42 100%);
}
html[lang="ar"]{--fd:'Readex Pro',Arial,sans-serif;--fb:'Readex Pro',Arial,sans-serif}
body{background:var(--bg);font-family:var(--fb)}

/* ---------- shared type ---------- */
.lbl{font-family:var(--fb);font-weight:600;letter-spacing:.16em}
.lbl.sky{color:var(--gold)}
.h2{font-family:var(--fd);font-weight:300;letter-spacing:-.01em;line-height:1.08}
.h2 .dim,.h2 span[style*="--blue"]{color:#fff;font-weight:700}
html[lang="ar"] .h2{font-weight:400;line-height:1.35}
.pill{font-family:var(--fb);font-weight:500}
.pill-b{background:var(--blue);box-shadow:0 14px 30px -14px rgba(0,102,178,.9)}
.pill-b:hover{background:var(--blue-d)}
.pill-w{color:var(--ink)}
.pill-w:hover{background:var(--gold);color:var(--ink)}
.stars,.trust .stars svg{color:var(--gold)}

/* ---------- header ---------- */
body.inner .hdr{background:rgba(8,29,66,.92)}
body.inner .logo img{height:42px}
.nav{font-family:var(--fb);font-weight:500}
.nav a[aria-current="page"]::after{background:var(--gold)}
.tel{font-family:var(--fb);font-weight:500}
.hr>.pill-w{background:#fff;color:var(--blue)}
.hr>.pill-w:hover{background:var(--gold);color:var(--ink)}

/* ---------- page hero: Deep Navy fade (Brand Book), photo stays on the far side, never behind the title ---------- */
.ph::before{background:linear-gradient(90deg,#0B2A63 0%,rgba(11,42,99,.94) 40%,rgba(11,42,99,.55) 72%,rgba(8,29,66,.35) 100%),
  linear-gradient(180deg,rgba(0,102,178,.35) 0%,transparent 35%,transparent 70%,var(--bg) 100%)!important}
html[dir="rtl"] .ph::before{background:linear-gradient(270deg,#0B2A63 0%,rgba(11,42,99,.94) 40%,rgba(11,42,99,.55) 72%,rgba(8,29,66,.35) 100%),
  linear-gradient(180deg,rgba(0,102,178,.35) 0%,transparent 35%,transparent 70%,var(--bg) 100%)!important}
.ph-bg img{opacity:.7}
/* the office-tower photo shows a printed logo sign: keep it on the far half so the page title never sits on it */
/* the old office-tower photo has a computer-made "Wordcraft" sign (Brand Kit rule 7): show the Brand Book tower top
   instead (decorative background; the <img> and its alt text stay in the page) */
.ph-bg:has(img[src*="building"]){background:url(img/tower-top.webp) 50% 40%/cover no-repeat}
.ph-bg img[src*="building"]{opacity:0!important;animation:none}
@media (min-width:761px){
  .ph-bg:has(img[src*="building"]){inset:0 0 0 46%}
  html[dir="rtl"] .ph-bg:has(img[src*="building"]){inset:0 46% 0 0}
}
@media (max-width:760px){.ph-bg:has(img[src*="building"]){opacity:.3}}
.ph h1{font-family:var(--fd);font-weight:700;letter-spacing:-.015em}
.ph h1[lang="ar"],html[lang="ar"] .ph h1{font-weight:700;letter-spacing:0}
.ph-lead{color:rgba(255,255,255,.86)}
.trust svg{color:var(--sky)}
.trust b{font-family:var(--fd)}

/* ---------- article + side column ---------- */
.prose{font-size:16.5px;line-height:1.78}
.prose h1,.prose h2,.prose h3,.prose h4,.prose .hv-3,.prose .hv-4{font-family:var(--fd);letter-spacing:-.01em}
.prose h2{font-weight:700}
.prose h3{font-weight:600}
.prose a{color:var(--sky);text-decoration-color:rgba(140,200,245,.45)}
.prose ul li::before{background-color:rgba(140,200,245,.16)}
.prose ol li::before{background:var(--blue);font-family:var(--fb)}
.prose th{font-family:var(--fd)}
.prose[lang="ar"],.prose[lang="ar"] h2,.prose[lang="ar"] h3{font-family:'Readex Pro',Arial,sans-serif}
.toc a.on{border-inline-start-color:var(--gold);background:rgba(140,200,245,.08)}
.qcard{background:var(--grad);box-shadow:0 30px 60px -30px rgba(0,102,178,.7)}
.qcard b{font-family:var(--fd);font-weight:700}
.qcard .lbl{color:var(--gold)!important}
details.qa summary h3{font-family:var(--fd);font-weight:600}
details.qa[open] summary i{background:var(--blue);border-color:var(--blue)}

/* ---------- cards ---------- */
.sc,.pc,.wh,.founder2{background:var(--navy);border-color:rgba(255,255,255,.1)}
.sc h3,.pc h2,.oc2 h3,.wh h3{font-family:var(--fd);letter-spacing:-.01em}
.sc .go{font-family:var(--fb);color:var(--sky)}
.rvs-score .big,.rvq q,.cbox b,.founder2 q{font-family:var(--fd)}
.cbox svg{color:var(--sky)}
.oc2 h3{font-weight:700}
.qinline{background:var(--grad)}
.meta .tg{color:var(--gold);font-family:var(--fb);font-weight:600}
.bf button[aria-pressed="true"],.chips button[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- closing call to action ---------- */
.cta{background:var(--grad)}
.cta .bm{color:rgba(255,255,255,.07)}
.cta h2,.cta-h{font-family:var(--fd);font-weight:300;letter-spacing:-.02em;line-height:1.04}
.cta h2 span:last-child,.cta-h [data-i="cta_h2"]{color:var(--gold);font-weight:700}
html[lang="ar"] .cta h2,html[lang="ar"] .cta-h{line-height:1.35}

/* ---------- footer ---------- */
.ftr{background:var(--bg)}
.ftr .fh,.fg h4{font-family:var(--fb)!important;font-weight:600!important;color:var(--gold)!important}
.bigword{display:none}

/* ---------- mega menu + drawer ---------- */
.mm,.drawer{font-family:var(--fb)}
.drawer nav{font-family:var(--fd)}