/* Wordcraft homepage — Brand Book 2.0 layer (design only).
   Loaded AFTER home.css. Changes fonts, colours, spacing and section rhythm.
   No text, heading, link or URL is changed. */

: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);
  --line:rgba(255,255,255,.14);
  --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{font-size:16px;background:var(--bg)}

/* ---------- shared type ---------- */
.lbl{font-family:var(--fb);font-weight:600;font-size:12px;letter-spacing:.16em}
.lbl.sky{color:var(--gold)}
.h2{font-family:var(--fd);font-size:clamp(34px,4.1vw,58px);line-height:1.08;font-weight:300;letter-spacing:-.01em}
.h2 .dim,.h2 span[style*="--blue"]{color:#fff;font-weight:700}
html[lang="ar"] .h2{font-weight:400;line-height:1.35}
.head{margin-bottom:48px}
.head p{font-size:16px;line-height:1.7}
.pill{font-family:var(--fb);font-weight:500;font-size:15px;min-height:52px}
.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{color:var(--gold)}

/* ---------- header ---------- */
.hdr-in{height:96px}
.logo img{height:54px}
.hdr.solid{background:rgba(8,29,66,.92)}
.hdr.solid .logo img{height:42px}
.nav{font-family:var(--fb);font-size:14px;font-weight:500;gap:30px}
.tel{font-family:var(--fb);font-weight:500}
.hr>.pill-w{background:var(--blue);color:#fff}
.hr>.pill-w:hover{background:#fff;color:var(--blue)}

/* ---------- hero: one calm centred statement + action bar + fact strip ---------- */
.hero{min-height:max(760px,100svh);justify-content:center}
.hero .bgw img{object-position:50% 55%;animation-duration:30s}
.hero::before{background:linear-gradient(180deg,rgba(0,102,178,.72) 0%,rgba(11,42,99,.80) 38%,rgba(11,42,99,.70) 62%,rgba(8,29,66,.92) 100%)!important}
.hero::after{background:linear-gradient(180deg,rgba(8,29,66,0) 75%,var(--bg) 100%)}
.hero-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:34px;padding-top:128px;padding-bottom:36px}
.copy{align-items:center;gap:20px;max-width:1040px}
.h1row{justify-content:center}
.h1row .live{display:none}
.h1{font-family:var(--fb);font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.86);max-width:96ch;line-height:1.7}
html[lang="ar"] .h1{font-size:15px;text-transform:none}
.disp{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:.26em;font-family:var(--fd);font-size:clamp(44px,5.6vw,84px);line-height:1.04;letter-spacing:-.015em}
.disp::after{content:"";order:2;flex-basis:100%;height:0}
.disp .ln:nth-child(-n+2){order:1}
.disp .ln:nth-child(n+3){order:3}
.disp .ln:nth-child(-n+2)>span{font-weight:300}
.disp .ln:nth-child(n+3)>span{font-weight:700}
.disp .ln:nth-child(4)>span{color:var(--gold)!important}
html[lang="ar"] .disp{font-size:clamp(42px,5.4vw,80px);line-height:1.3}
.alt-line{font-size:18px;color:rgba(255,255,255,.72)}
.lead{font-size:17px;max-width:760px;color:rgba(255,255,255,.86)}
.copy .row{justify-content:center}
.copy>.f1{align-items:center}
.lead{margin-inline:auto}
.finder{flex-direction:row;align-items:center;gap:18px;background:#fff;color:var(--ink);border-radius:999px;padding:8px 8px 8px 26px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);margin-top:10px}
html[dir="rtl"] .finder{padding:8px 26px 8px 8px}
.finder .lbl{color:var(--inkm);font-size:11px;white-space:nowrap}
.finder .row{gap:6px;flex-wrap:nowrap}
.finder .chipg{background:var(--ice);border:0;color:var(--ink);backdrop-filter:none;font-size:13.5px;min-height:42px;padding:0 16px}
.finder .chipg:hover{background:var(--blue);color:#fff}
.glass{width:100%;max-width:1100px;flex-direction:row;align-items:center;justify-content:space-between;gap:32px;padding:18px 34px;border-radius:20px;background:rgba(8,29,66,.62);border-color:rgba(255,255,255,.16)}
.glass .gtop svg{display:none}
.glass .gtop .lbl{color:var(--gold)!important;font-size:11px!important;max-width:150px;line-height:1.6;display:block;text-align:start}
.glass .hr1{width:1px;height:46px;align-self:center}
.glass .gr{gap:12px}
.glass .gsm{white-space:nowrap}
.glass .g2{display:flex;gap:44px}
.glass .g2>div{display:flex;flex-direction:column;gap:2px;text-align:start}
.glass .g2 b{font-family:var(--fd);font-size:30px;white-space:nowrap;line-height:1.1}
.glass .gr b{font-family:var(--fd);font-size:44px}
.glass>span{font-size:13px!important;max-width:200px;text-align:start}
.cue{display:none}

/* ---------- ticker: quieter ---------- */
.ticker{background:var(--bg);padding-block:20px;border-block-color:rgba(255,255,255,.08)}
.ticker .mq{font-family:var(--fd);font-size:clamp(22px,2.3vw,32px);font-weight:300;letter-spacing:0;gap:40px}
.ticker .mq>span:not(.outline){font-weight:600}
.ticker .outline{-webkit-text-stroke:1px rgba(255,255,255,.4)}
.ticker .mq>span.outline:only-child,.ticker .mq>span:is(.outline):not([data-i]){color:var(--gold);-webkit-text-stroke:0;font-size:.6em}

/* ---------- light sections (alternating rhythm) ---------- */
#about,#who,#story,#blog{
  background:#fff;color:var(--ink);
  --w85:rgba(11,27,51,.86); --w70:rgba(11,27,51,.72); --w60:rgba(11,27,51,.62); --w35:rgba(11,27,51,.42);
  --line:rgba(11,27,51,.12);
}
#who{background:var(--ice)}
#services,#who,#story,#offices,#blog,#reviews{padding-block:clamp(64px,6.6vw,96px)!important}
#about .h2 .dim,#who .h2 .dim,#story .h2 .dim,#blog .h2 .dim,.light .h2 .dim,.light .h2 span[style*="--blue"]{color:var(--blue)}
#about .lbl.sky,#who .lbl.sky,#story .lbl.sky,#blog .lbl.sky{color:var(--blue)}
.light{border-radius:0;background:#fff}
#faq.light{background:var(--ice)}
.light .lbl.t{color:var(--blue)}
.light .h2{color:var(--ink)}

/* about */
#about .stmt .big{font-family:var(--fd);font-weight:300;font-size:clamp(24px,2.8vw,40px);line-height:1.3}
#about .stmt .big .w.off{opacity:.3}
.nums{border-top-color:var(--line);margin-top:56px}
.nums>div{border-inline-start-color:var(--line)}
.nums b{font-family:var(--fd);font-weight:700;color:var(--blue)}
.nums b em{color:var(--gold-d)}
.nums span{color:var(--inkm);font-size:14px}

/* services (dark) */
#services{background:var(--bg)}
.pn{background:var(--navy);border-radius:24px}
.closed .v,.opened .nm b{font-family:var(--fd);letter-spacing:-.01em}
.closed .v{font-weight:500;font-size:26px}
.opened .nm b{font-weight:700}
.opened p{font-size:16px}

/* who we help (ice) */
.wh{background:#fff;border:1px solid var(--mist);border-radius:24px;box-shadow:0 20px 40px -32px rgba(11,27,51,.5)}
.wh:hover{border-color:var(--blue)}
.wh h3{font-family:var(--fd);font-weight:600;font-size:24px}
.wh li svg{color:var(--blue)}
.wh .im .chipg{color:#fff}
.wh .go{color:var(--blue);font-family:var(--fb);font-weight:600}

/* why / process / clients (white) */
.tile{border-radius:24px;background:var(--ice)}
.tile.dk{background:var(--navy)}
.tile.bl{background:var(--grad)}
.tile h3,.bigno,.step h3{font-family:var(--fd)}
.tile h3{font-weight:600;letter-spacing:-.01em}
.tile.dk .lbl{color:var(--gold)}
.icos span{background:#fff}
.step .k{background:#fff;font-family:var(--fb)}
.step:last-child .k{background:var(--blue)}
.lt{background:var(--ice);border-radius:18px}

/* reviews (dark) */
#reviews{background:var(--bg)}
.score{background:var(--navy);border-radius:24px}
.score .big{font-family:var(--fd);font-weight:700}
.rv{border-radius:24px}
.rv q{font-family:var(--fb);font-size:16.5px;line-height:1.65}
.rv.feat{background:var(--grad);border-color:transparent}
.rv.feat q{font-family:var(--fd);font-weight:400;font-size:clamp(20px,2vw,27px);line-height:1.45}

/* story (white) */
.founder,.team,.vm>div{border-radius:24px}
.founder q{font-family:var(--fd);font-weight:400}
.founder .q,.founder q{color:#fff}
.founder .q span{color:rgba(255,255,255,.75)!important}
.team span{background:rgba(8,29,66,.75);color:#fff}
.vm>div{background:var(--ice);border:0}
.vm .lbl.sky{color:var(--blue)!important}
.tl{border-top-color:var(--line)}
.tl>div::before{background:var(--blue);box-shadow:0 0 0 6px rgba(0,102,178,.14)}
.tl b{font-family:var(--fd);color:var(--blue)}
.gov .mq span{background:var(--ice);border-color:transparent;color:var(--ink)}

/* offices (dark) */
#offices{background:var(--bg)}
.map{border-radius:24px}
.oc{border-radius:20px}
.oc .c,.map-card b{font-family:var(--fd)}
.oc .c small{color:var(--gold)}
.oc.act .c small{color:#fff}

/* blog (white) */
.bfeat{border-radius:24px}
.bfeat h3,.bi h3{font-family:var(--fd)}
.bfeat h3{color:#fff}
.bfeat p{color:rgba(255,255,255,.8)}
.bfeat .meta{color:rgba(255,255,255,.75)}
.meta .tg{color:var(--blue);font-family:var(--fb);font-weight:600}
.bfeat .meta .tg{color:var(--gold)}
.bf button[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}
.bi:hover h3{color:var(--blue)}
#blog .pill-g{border-color:var(--blue);color:var(--blue);background:transparent}
#blog .pill-g:hover{background:var(--blue);color:#fff}

/* faq (ice) */
.faq summary{font-family:var(--fd);font-weight:600;letter-spacing:-.005em}
.faq .h2{font-weight:600}

/* closing call to action */
#contact{background:var(--ice)!important}
.cta{background:var(--grad);border-radius:32px}
.cta .bm{color:rgba(255,255,255,.07)}
.cta h2{font-family:var(--fd);font-weight:300;font-size:clamp(40px,6.4vw,92px);letter-spacing:-.02em;line-height:1.02}
.cta h2 span:last-child{color:var(--gold);font-weight:700}
.cta .lbl{color:var(--sky)!important}

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

/* phones */
@media (max-width:760px){
  .hero{min-height:auto}
  .hero-in{padding-top:110px;gap:28px}
  .h1{font-size:11px}
  .disp{font-size:clamp(30px,8.6vw,42px);column-gap:.22em}
  html[lang="ar"] .disp{font-size:clamp(34px,10vw,46px)}
  .logo img{height:36px}
}
@media (min-width:761px) and (max-width:1200px){
  .glass{flex-wrap:wrap;justify-content:center}
  .glass .hr1{display:none}
}

/* ---------- compact rhythm (desktop): same content, less scrolling ---------- */
@media (min-width:761px){
  .sec,#services,#who,#story,#offices,#blog,#reviews{padding-block:clamp(56px,5vw,80px)!important}
  .head{margin-bottom:36px}
  .nums{margin-top:40px}.nums>div{padding-top:24px}
  .panels{height:540px}
  .wh .im{height:190px}.wh .bd{padding:22px;gap:12px}.wh li{padding-block:8px}
  .bento{grid-auto-rows:minmax(230px,auto);gap:16px}
  .tile{padding:28px}.wa{padding:32px;gap:28px}
  .phone{gap:8px;padding:14px}.bub .th{height:72px}
  #process,#why>.col{margin-top:64px!important}
  .lt{height:96px}
  .rv-grid,.revs{gap:16px}.score{padding:28px;gap:16px}.score .big{font-size:92px}.rv{padding:26px;gap:14px}
  .founder{min-height:460px}.team{height:280px}.side .team{min-height:280px}.vm>div{padding:22px}
  .tl{margin-top:44px}.tl>div{padding-top:22px}.gov{margin-top:40px}
  .map{min-height:480px}.oc{padding:16px 20px}.olist{gap:10px}
  .bfeat{min-height:460px}.bi{padding-block:14px}.bi .im{height:76px}
  .faq summary{padding-block:18px}
  .cta{padding:84px 56px 76px;gap:36px}
  .ftr{padding-block:72px 32px}.fb{margin-top:48px}
}

/* About block: the skyline boardroom photo */
@media (min-width:761px){
  #about .stmt{grid-template-columns:360px minmax(0,1fr);align-items:stretch}
  #about .stmt>.col{padding:20px!important;min-height:330px;border-radius:24px;background:#0B2A63 url(img/hd-business.webp) 70% 50%/cover}
  #about .stmt>.col svg{display:none}
  #about .stmt>.col .lbl{align-self:flex-start;background:rgba(8,29,66,.78);color:#fff!important;padding:7px 12px;border-radius:999px}
  #about .stmt .big{align-self:center}
}

/* ---------- hero (Brand Book cover look): tower-top photo on one side, Deep Navy fade behind the
   headline, so no text sits on the logo symbol ---------- */
.hero{background:var(--bg)}
.hero .bgw{z-index:-3;border-radius:0;transform:none!important}
.hero .bgw img{animation:none!important;object-position:50% 45%!important}
.hero::after{background:linear-gradient(180deg,rgba(8,29,66,0) 72%,var(--bg) 100%)!important}
.hr>.pill-w{background:#fff;color:var(--blue)}
.hr>.pill-w:hover{background:var(--gold);color:var(--ink)}
@media (min-width:761px){
  .hero .bgw{inset:0 0 0 44%!important}
  html[dir="rtl"] .hero .bgw{inset:0 44% 0 0!important}
  .hero::before{background:linear-gradient(90deg,#0B2A63 0%,#0B2A63 44%,rgba(11,42,99,.72) 56%,rgba(8,29,66,.12) 82%)!important}
  html[dir="rtl"] .hero::before{background:linear-gradient(270deg,#0B2A63 0%,#0B2A63 44%,rgba(11,42,99,.72) 56%,rgba(8,29,66,.12) 82%)!important}
  .hero-in{justify-items:stretch;text-align:start;padding-top:150px}
  .copy{align-items:flex-start;max-width:none;width:100%}
  .copy>.f1{align-items:flex-start!important}
  .h1row,.disp,.alt-line,.lead{max-width:46%;justify-content:flex-start}
  .f1>.row:first-of-type{max-width:60%;justify-content:flex-start}
  .disp{font-size:clamp(44px,5vw,76px);justify-content:flex-start}
  html[lang="ar"] .disp{font-size:clamp(42px,4.8vw,72px)}
  .lead{margin-inline:0!important;font-size:16px}
  .finder{align-self:stretch;margin-top:22px}
  .glass{max-width:none}
}
@media (max-width:760px){
  .hero::before{background:linear-gradient(180deg,rgba(11,42,99,.2) 0,rgba(11,42,99,.35) 220px,#0B2A63 340px,#081D42 100%)!important}
  .hero .bgw{inset:0 0 auto 0!important;height:360px}
  .hero .bgw img{object-position:50% 38%!important}
  .hero-in{padding-top:330px}
}

/* About statement on white: readable highlight + second half */
#about .stmt .big .sky{color:var(--blue);font-weight:500}
#about .stmt .big .dim{color:rgba(11,27,51,.55)}

/* phones: fact strip fits, calmer spacing */
@media (max-width:760px){
  /* keep the theme's 3-column phone strip: rating | languages | quote time */
  .glass{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:16px 4px;max-width:none}
  .glass>.gtop,.glass>.hr1,.glass>span{display:none}
  .glass .g2{display:contents}
  .glass .gr,.glass .g2>div{flex-direction:column;align-items:center;text-align:center;gap:4px;padding-inline:6px}
  .glass .gr{display:flex;border-inline-end:1px solid var(--line)}
  .glass .g2>div:first-child{border-inline-end:1px solid var(--line)}
  .glass .gr b,.glass .g2 b{font-size:26px;white-space:nowrap}
  .glass .gr .col{align-items:center}
  .glass .gsm{white-space:normal;justify-content:center;text-align:center}
  html[lang="ar"] .glass .g2 b{white-space:normal;line-height:1.15}
  .sec,#services,#who,#story,#offices,#blog,#reviews{padding-block:52px!important}
  .head{margin-bottom:26px;gap:16px}
  .nums{margin-top:32px}
  .tl{margin-top:36px}.gov{margin-top:32px}
}