/* =============================================================================
   Direct Hire — "Bring your maid to the UAE" (Step 4)
   -----------------------------------------------------------------------------
   The page styles that do not exist on the site yet: the boarding-pass card,
   the departures board, the inclusion list, the journey timeline, the
   DIY-vs-EzeeHire cards, the final CTA and the landing-page footer.

   Rules of this file:
     * only the selectors listed in docs/direct-hire/MAP.md §3.2 (plus the
       Arabic block at the end) - everything else comes from home-v4.css,
       v4-base.css and landing-v4.css, which the pages load (R1);
     * every rule is scoped under `.dh`, so nothing here can leak into
       another page;
     * logical properties only;
     * no @import, no font declarations;
     * the dirham sign is the site's font glyph (`.dirham-symbol`), not the
       prototype's SVG, so the four `.aed` rules of the prototype are
       rewritten for it.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.dh{
  --gold:#E9C46A;
  --gold-lt:#F5DE9E;
  --ivory:#FBFCFE;
}

/* ── Hero + boarding pass ───────────────────────────────────────────────── */
.dh .phero{position:relative;isolation:isolate;overflow:hidden;background:var(--navy);color:#fff;padding-block:clamp(44px,5.5vw,76px) clamp(56px,6vw,88px);}
.dh .phero .aurora{opacity:.85;}
.dh .phero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;background-image:linear-gradient(90deg,var(--line-d) 1px,transparent 1px);background-size:calc(100% / 6) 100%;}
.dh .phero-in{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,72px);align-items:center;}
.dh .phero h1{font-family:var(--f-d);font-weight:300;font-size:clamp(2.1rem,4.4vw,3.6rem);line-height:1.06;letter-spacing:-.03em;margin-block-end:20px;}
.dh .phero h1 em{font-style:italic;background:linear-gradient(100deg,#fff 0%,var(--cyan-lt) 55%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.dh .phero .hero-sub{margin-block-end:28px;}
.dh .phero .stats{grid-template-columns:repeat(4,auto);}

.dh .dx-hero{padding-block:clamp(40px,5vw,72px) clamp(70px,7vw,104px);}
.dh .dx-hero .phero-in{grid-template-columns:1.05fr .95fr;}
.dh .dx-hero h1{font-size:clamp(2.2rem,4.6vw,3.85rem);}

.dh .dx-arcs{position:absolute;inset:0;z-index:-1;inline-size:100%;block-size:100%;pointer-events:none;opacity:.55;}
.dh:dir(rtl) .dx-arcs{transform:scaleX(-1);}
.dh .dx-arcs path{fill:none;stroke:url(#dxg);stroke-width:1.2;stroke-dasharray:3 7;animation:dxdash 26s linear infinite;}
.dh .dx-arcs circle{fill:var(--cyan-lt);}
.dh .dx-arcs .hub{fill:var(--cyan);filter:drop-shadow(0 0 10px var(--cyan));}
.dh .dx-arcs .ring{fill:none;stroke:var(--cyan);stroke-width:1;transform-origin:center;transform-box:fill-box;animation:dxring 3.2s ease-out infinite;}
@keyframes dxdash{to{stroke-dashoffset:-400;}}
@keyframes dxring{from{transform:scale(.4);opacity:.9;}to{transform:scale(3.2);opacity:0;}}

.dh .dx-tag{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(233,196,106,.42);border-radius:40px;padding:5px 16px 5px 5px;margin-block-end:22px;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-lt);background:rgba(233,196,106,.06);}
.dh .dx-tag b{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#2B1D00;border-radius:30px;padding:5px 11px;letter-spacing:.14em;}

.dh .dx-incl{display:flex;flex-wrap:wrap;gap:10px 22px;margin-block:-6px 30px;font-size:.8rem;color:rgba(234,241,250,.82);}
.dh .dx-incl li{display:inline-flex;align-items:center;gap:7px;}
.dh .dx-incl .icon{color:var(--cyan);font-size:.95rem;}
.dh .dx-incl .free{color:var(--gold-lt);font-weight:700;}

.dh .bp{position:relative;background:var(--ivory);color:var(--navy);border-radius:24px;box-shadow:0 60px 120px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.5);transform:rotate(-1.4deg);transition:transform .6s var(--ease);}
.dh .bp:hover{transform:rotate(0deg) translateY(-4px);}
.dh:dir(rtl) .bp{transform:rotate(1.4deg);}
.dh:dir(rtl) .bp:hover{transform:none;}
.dh .bp-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 26px;border-start-start-radius:24px;border-start-end-radius:24px;background:linear-gradient(100deg,var(--navy-3),var(--blue) 70%,#2C86C4);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;}
.dh .bp-top .bm{font-family:var(--f-d);font-size:1.05rem;letter-spacing:-.01em;text-transform:none;font-weight:400;}
.dh .bp-top .bm i{color:var(--cyan-lt);}
.dh .bp-top .cls{display:inline-flex;align-items:center;gap:6px;color:var(--gold-lt);}
.dh .bp-route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:14px;padding:26px 26px 18px;}
.dh .bp-k{display:block;font-size:.58rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-block-end:4px;}
.dh .bp-code{font-family:var(--f-d);font-size:clamp(2.2rem,3.4vw,2.7rem);font-weight:400;line-height:1;letter-spacing:.02em;color:var(--navy);transition:opacity .25s;}
.dh .bp-code.swap{opacity:0;}
/* The airport code stays Latin in the Arabic page. */
.dh #cp-code{direction:ltr;}
.dh .bp-city{display:block;font-size:.74rem;color:var(--muted);margin-block-start:6px;}
.dh .bp-to{text-align:end;}
.dh .bp-to .bp-code{display:inline-flex;align-items:center;gap:8px;font-size:clamp(1.5rem,2.2vw,1.85rem);block-size:clamp(2.2rem,3.4vw,2.7rem);letter-spacing:.06em;}
.dh .bp-to .bp-code .icon{font-size:.62em;color:var(--blue);stroke-width:1.6;}
.dh .bp-path{position:relative;inline-size:clamp(56px,7vw,96px);block-size:30px;margin-block-end:30px;}
.dh .bp-path::before{content:'';position:absolute;inset-inline:0;inset-block-start:50%;border-block-start:2px dashed var(--border);}
.dh .bp-path .icon{position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;font-size:1.25rem;color:var(--cyan);background:var(--ivory);padding-inline:6px;inline-size:1em;block-size:1em;box-sizing:content-box;}
.dh:dir(rtl) .bp-path .icon{translate:50% -50%;transform:scaleX(-1);}
.dh .bp-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:4px 26px 24px;}
.dh .bp-fields b{display:block;font-size:.84rem;font-weight:700;color:var(--navy-3);}
.dh .bp-fields .g{color:var(--green);}
.dh .bp-perf{position:relative;margin-inline:22px;border-block-start:2px dashed var(--border);}
.dh .bp-perf::before,.dh .bp-perf::after{content:'';position:absolute;inset-block-start:-15px;inline-size:28px;block-size:28px;border-radius:50%;background:var(--navy);}
.dh .bp-perf::before{inset-inline-start:-37px;}
.dh .bp-perf::after{inset-inline-end:-37px;}
.dh .bp-stub{padding:22px 26px 26px;}
.dh .bp .cpick{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-block:8px 20px;}
.dh .bp .cpick button{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:11px;border:1px solid var(--border);background:#fff;font-size:.76rem;font-weight:600;color:var(--navy-3);cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;}
.dh .bp .cpick button:hover{border-color:var(--cyan);}
.dh .bp .cpick button[aria-checked="true"]{border-color:var(--blue);background:var(--mist-2);box-shadow:inset 0 0 0 1px var(--blue);color:var(--navy);}
.dh .bp .cpick button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
.dh .bp .cpick .flag{inline-size:22px;block-size:15px;}
.dh .bp .cpick .icon{font-size:15px;color:var(--blue);}
.dh .bp-fare{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-block-end:18px;}
.dh .bp-price{font-family:var(--f-d);font-size:clamp(2.3rem,3.6vw,2.9rem);font-weight:400;letter-spacing:-.03em;line-height:1;color:var(--navy);}
.dh .bp-price .dirham-symbol{font-size:.78em;fill:var(--navy);margin-inline-end:.08em;vertical-align:-.02em;}
.dh .bp-price.ask{font-size:clamp(1.7rem,2.6vw,2.1rem);font-style:italic;color:var(--blue);}
.dh .bp-unit{display:block;font-size:.72rem;color:var(--muted);margin-block-start:8px;}
.dh .bp-days{display:block;font-size:.72rem;font-weight:600;color:var(--navy);margin-block-start:4px;}
.dh .bp-days[hidden]{display:none;}
.dh .bp-bars{flex-shrink:0;inline-size:96px;block-size:46px;opacity:.75;background:repeating-linear-gradient(90deg,var(--navy) 0 2px,transparent 2px 4px,var(--navy) 4px 5px,transparent 5px 8px,var(--navy) 8px 11px,transparent 11px 13px);border-radius:2px;}
.dh .bp .btn{inline-size:100%;background:var(--navy);color:#fff;padding-block:16px;box-shadow:0 14px 30px rgba(11,26,48,.28);}
.dh .bp .btn:hover{background:var(--navy-3);}
.dh .bp .btn .wa{display:grid;place-items:center;inline-size:24px;block-size:24px;border-radius:50%;background:var(--green);}
.dh .bp .btn .wa .icon{font-size:.8rem;}
.dh .bp-note{margin-block-start:12px;text-align:center;font-size:.68rem;color:var(--muted);}

/* ── Proof strip ─────────────────────────────────────────────────────────── */
.dh .dx-proof{background:var(--navy);border-block-start:1px solid var(--line-d);color:rgba(234,241,250,.78);}
.dh .dx-proof ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding-block:20px;font-size:.78rem;font-weight:600;letter-spacing:.02em;}
.dh .dx-proof li{display:inline-flex;align-items:center;gap:10px;}
.dh .dx-proof .icon{color:var(--cyan);font-size:1.05rem;}
.dh .dx-proof .st{color:var(--star);}

/* ── Departures board ───────────────────────────────────────────────────── */
.dh .dx-board{background:linear-gradient(180deg,var(--mist) 0%,var(--mist-2) 100%);}
.dh .board{background:linear-gradient(180deg,var(--navy-2),var(--navy));border-radius:28px;padding:clamp(8px,1vw,12px);color:#fff;box-shadow:0 40px 90px rgba(11,26,48,.28);position:relative;overflow:hidden;}
.dh .board::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 50% 60% at 90% 0%,rgba(28,170,221,.16),transparent 60%);}
.dh .board-bar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px clamp(16px,2vw,26px);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(234,241,250,.55);}
.dh .board-bar .ttl{display:inline-flex;align-items:center;gap:10px;color:#fff;}
.dh .board-bar .ttl .icon{color:var(--cyan);font-size:1.1rem;}
.dh .board-bar .live{display:inline-flex;align-items:center;gap:8px;color:var(--cyan-lt);}
.dh .board-bar .live::before{content:'';inline-size:7px;block-size:7px;border-radius:50%;background:#3BD18F;box-shadow:0 0 0 0 rgba(59,209,143,.6);animation:dxlive 2s infinite;}
@keyframes dxlive{70%{box-shadow:0 0 0 8px rgba(59,209,143,0);}100%{box-shadow:0 0 0 0 rgba(59,209,143,0);}}
.dh .board-h,.dh .brow{position:relative;display:grid;grid-template-columns:150px minmax(0,1.5fr) minmax(0,1.2fr) 170px 52px;align-items:center;gap:18px;padding-inline:clamp(16px,2vw,26px);}
.dh .board-h{padding-block:10px;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(234,241,250,.4);border-block-start:1px solid var(--line-d);}
.dh .brow{padding-block:20px;border-block-start:1px solid var(--line-d);border-radius:16px;transition:background .3s;}
.dh .brow:hover{background:rgba(255,255,255,.045);}
.dh .flap{display:flex;gap:4px;}
.dh .flap span{display:grid;place-items:center;inline-size:34px;block-size:42px;border-radius:6px;background:linear-gradient(180deg,#1A3358 50%,#152B4C 50%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 2px 0 rgba(0,0,0,.25);font-family:var(--f-b);font-size:1.15rem;font-weight:700;color:var(--cyan-lt);letter-spacing:0;}
.dh .b-origin{display:flex;align-items:center;gap:14px;min-inline-size:0;}
.dh .b-origin .flag{inline-size:34px;block-size:23px;}
.dh .b-origin b{display:block;font-family:var(--f-d);font-size:1.3rem;font-weight:400;letter-spacing:-.01em;line-height:1.15;}
.dh .b-origin small{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:.72rem;color:rgba(234,241,250,.55);margin-block-start:3px;}
.dh .pill{display:inline-flex;font-size:.56rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:20px;border:1px solid rgba(233,196,106,.45);color:var(--gold-lt);}
.dh .pill.best{border-color:rgba(59,209,143,.5);color:#6FE3B0;}
/* D12 (Q3): the typical time under the country name. */
.dh .b-origin small.b-days{gap:5px;color:var(--gold-lt);}
.dh .b-origin small.b-days .icon{inline-size:12px;block-size:12px;}
.dh .b-incl{font-size:.76rem;color:rgba(234,241,250,.6);line-height:1.6;}
.dh .b-fare{text-align:end;}
.dh .b-fare .p{font-family:var(--f-d);font-size:1.75rem;font-weight:400;letter-spacing:-.02em;line-height:1;white-space:nowrap;}
.dh .b-fare .p .dirham-symbol{font-size:.78em;fill:var(--cyan-lt);margin-inline-end:.08em;}
.dh .b-fare .p.ask{font-style:italic;font-size:1.3rem;color:var(--cyan-lt);}
.dh .b-fare small{display:block;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(234,241,250,.45);margin-block-start:6px;}
.dh .b-go{display:grid;place-items:center;inline-size:46px;block-size:46px;border-radius:50%;border:1px solid rgba(127,211,240,.35);color:var(--cyan-lt);transition:background .3s,color .3s,transform .3s var(--ease);}
.dh .brow:hover .b-go{background:var(--cyan);color:var(--navy);transform:translateX(3px);}
.dh:dir(rtl) .brow:hover .b-go{transform:translateX(-3px);}
.dh .brow.other .flap span{color:var(--gold-lt);}
.dh .board-foot{position:relative;padding:16px clamp(16px,2vw,26px) 14px;border-block-start:1px solid var(--line-d);font-size:.72rem;color:rgba(234,241,250,.5);}

/* ── One fare (the inclusions) ─────────────────────────────────────────── */
.dh .dx-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,110px);align-items:start;}
.dh .dx-split .h2{max-inline-size:15ch;}
.dh .dx-from{display:inline-flex;align-items:center;gap:18px;margin-block-start:34px;padding:14px 14px 14px 22px;border:1px solid var(--border);border-radius:18px;background:#fff;box-shadow:0 18px 40px rgba(27,54,96,.07);}
/* The label only: a bare `span` also hit the <x-price> spans inside <b> (tiny, uppercase price; Step 8 QA). */
.dh .dx-from > div > span{font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
.dh .dx-from b{display:block;font-family:var(--f-d);font-size:1.7rem;font-weight:400;letter-spacing:-.02em;color:var(--navy);line-height:1.1;}
.dh .dx-from b .dirham-symbol{font-size:.78em;fill:var(--navy);}
.dh .dx-list{counter-reset:dx;}
.dh .dx-list li{display:grid;grid-template-columns:56px 1fr auto;gap:18px;align-items:center;padding-block:24px;border-block-start:1px solid var(--line-l);}
.dh .dx-list li:last-child{border-block-end:1px solid var(--line-l);}
.dh .dx-list .n{font-family:var(--f-d);font-style:italic;font-weight:300;font-size:1.9rem;color:var(--blue);line-height:1;}
.dh .dx-list h3{font-family:var(--f-d);font-weight:400;font-size:1.3rem;letter-spacing:-.01em;color:var(--navy);line-height:1.2;}
.dh .dx-list p{font-size:.86rem;color:var(--muted);margin-block-start:4px;line-height:1.7;}
.dh .dx-list .ic{display:grid;place-items:center;inline-size:48px;block-size:48px;border-radius:50%;background:var(--mist-2);color:var(--blue);font-size:1.2rem;}
.dh .dx-list .free .ic{background:linear-gradient(135deg,var(--gold-lt),var(--gold));color:#3A2600;}
.dh .dx-list .free h3::after{content:'Free';display:inline-flex;vertical-align:middle;margin-inline-start:10px;font-family:var(--f-b);font-style:normal;font-size:.56rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:20px;background:var(--green);color:#fff;}

/* ── Journey ────────────────────────────────────────────────────────────── */
.dh .dx-journey{position:relative;overflow:hidden;background:var(--navy);color:#fff;}
.dh .dx-journey::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 45% 60% at 12% 110%,rgba(52,103,167,.45),transparent 60%),radial-gradient(ellipse 40% 50% at 92% -10%,rgba(28,170,221,.22),transparent 60%);}
.dh .dx-journey .wrap{position:relative;}
.dh .track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.4vw,34px);}
.dh .track::before,.dh .track::after{content:'';position:absolute;inset-block-start:31px;inset-inline:12.5%;block-size:1px;background:rgba(127,211,240,.18);}
.dh .track::after{background:linear-gradient(90deg,var(--cyan),var(--cyan-lt));transform:scaleX(0);transform-origin:left;transition:transform 2.4s var(--ease) .3s;}
.dh:dir(rtl) .track::after{transform-origin:right;}
.dh .track.in::after{transform:scaleX(1);}
.dh .track .plane{position:absolute;inset-block-start:20px;inset-inline-start:12.5%;z-index:2;font-size:1.4rem;color:#fff;filter:drop-shadow(0 0 10px rgba(28,170,221,.9));animation:dxfly 7s var(--ease) infinite;}
.dh:dir(rtl) .track .plane{transform:scaleX(-1);}
@keyframes dxfly{0%{inset-inline-start:12.5%;opacity:0;}8%{opacity:1;}88%{opacity:1;}100%{inset-inline-start:85%;opacity:0;}}
.dh .leg{position:relative;text-align:center;}
.dh .leg .dot{position:relative;z-index:1;display:grid;place-items:center;inline-size:62px;block-size:62px;margin-inline:auto;border-radius:50%;background:var(--navy-2);border:1px solid rgba(127,211,240,.3);color:var(--cyan-lt);font-size:1.35rem;box-shadow:0 0 0 8px var(--navy);}
.dh .leg.end .dot{background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;border-color:transparent;box-shadow:0 0 0 8px var(--navy),0 0 40px rgba(28,170,221,.5);}
.dh .leg .num{display:block;margin-block:22px 8px;font-family:var(--f-d);font-style:italic;font-weight:300;font-size:.95rem;color:var(--cyan);}
.dh .leg h3{font-family:var(--f-d);font-weight:400;font-size:1.3rem;letter-spacing:-.01em;line-height:1.2;}
.dh .leg p{font-size:.84rem;color:var(--txt-d);line-height:1.7;margin-block-start:8px;max-inline-size:28ch;margin-inline:auto;}
.dh .leg .who{display:inline-flex;margin-block-start:14px;font-size:.58rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:20px;border:1px solid var(--line-d);color:rgba(234,241,250,.6);}
.dh .leg .who.you{border-color:rgba(127,211,240,.45);color:var(--cyan-lt);}
.dh .leg .who.free{background:var(--green);border-color:var(--green);color:#fff;}

/* ── DIY vs EzeeHire + the router links ─────────────────────────────────── */
.dh .dx-vs{display:grid;grid-template-columns:1fr 1.08fr;gap:clamp(16px,2vw,24px);align-items:stretch;}
.dh .vs{border-radius:26px;padding:clamp(26px,3vw,40px);}
.dh .vs h3{font-family:var(--f-d);font-weight:400;font-size:1.5rem;letter-spacing:-.01em;margin-block-end:22px;}
.dh .vs li{display:grid;grid-template-columns:22px 1fr;gap:14px;padding-block:14px;border-block-start:1px solid;font-size:.88rem;line-height:1.6;}
.dh .vs li b{display:block;font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-block-end:2px;}
.dh .vs li .icon{margin-block-start:3px;}
.dh .vs-diy{background:#fff;border:1px solid var(--border);color:var(--muted);}
.dh .vs-diy h3{color:var(--muted);}
.dh .vs-diy li{border-color:var(--line-l);}
.dh .vs-diy li b{color:rgba(100,116,139,.75);}
.dh .vs-diy .icon{color:#B4C2D3;}
.dh .vs-us{position:relative;overflow:hidden;background:linear-gradient(155deg,var(--navy-3),var(--navy) 70%);color:#fff;box-shadow:0 40px 80px rgba(11,26,48,.3);}
.dh .vs-us::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 50% at 100% 0%,rgba(28,170,221,.22),transparent 60%);}
.dh .vs-us>*{position:relative;}
.dh .vs-us h3 i{color:var(--cyan-lt);}
.dh .vs-us li{border-color:var(--line-d);color:rgba(234,241,250,.9);}
.dh .vs-us li b{color:var(--cyan-lt);}
.dh .vs-us .icon{color:var(--cyan);}
.dh .vs-us .btn{margin-block-start:26px;}
.dh .dx-links{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-block-start:clamp(28px,3vw,40px);}
.dh .dx-links a{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;border:1px solid var(--border);background:#fff;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s;}
.dh .dx-links a:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 18px 36px rgba(27,54,96,.1);}
.dh .dx-links .ri{display:grid;place-items:center;inline-size:44px;block-size:44px;border-radius:14px;background:var(--mist-2);color:var(--blue);font-size:1.1rem;flex-shrink:0;}
.dh .dx-links b{display:block;font-size:.95rem;color:var(--navy);}
.dh .dx-links small{font-size:.78rem;color:var(--muted);}
.dh .dx-links a>.icon{margin-inline-start:auto;color:var(--blue);}

/* ── Final CTA ──────────────────────────────────────────────────────────── */
.dh .dx-final{position:relative;overflow:hidden;isolation:isolate;background:var(--navy);color:#fff;text-align:center;padding-block:clamp(72px,9vw,128px);}
.dh .dx-final .dx-arcs{opacity:.4;}
.dh .dx-final .h2{margin-inline:auto;max-inline-size:18ch;font-size:clamp(2.1rem,4.4vw,3.5rem);}
.dh .dx-final p{margin:18px auto 32px;max-inline-size:52ch;color:var(--txt-d);}
.dh .dx-final .final-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.dh .dx-final small{display:block;margin-block-start:22px;font-size:.74rem;letter-spacing:.06em;color:rgba(234,241,250,.5);}
.dh .dx-final small .dirham-symbol{font-size:.85em;fill:currentColor;}

/* ── Landing-page footer ────────────────────────────────────────────────── */
.dh .lp-foot{background:#07142A;color:rgba(234,241,250,.5);text-align:center;padding:28px var(--gut) 34px;font-size:.76rem;line-height:1.9;}
.dh .lp-foot a{color:rgba(234,241,250,.75);}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .dh .dx-hero .phero-in{grid-template-columns:1fr;}
  .dh .bp{max-inline-size:560px;transform:none;}
  .dh .board-h,.dh .brow{grid-template-columns:130px minmax(0,1fr) 150px 46px;}
  .dh .b-incl,.dh .board-h .hi{display:none;}
  .dh .dx-split{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .dh .bp-route{padding:22px 20px 14px;}
  .dh .bp-fields{padding-inline:20px;grid-template-columns:1fr 1fr;}
  .dh .bp-fields>div:last-child{display:none;}
  .dh .bp-stub{padding:20px;}
  .dh .bp-perf::before{inset-inline-start:-35px;}
  .dh .bp-perf::after{inset-inline-end:-35px;}
  .dh .bp-bars{inline-size:64px;}
  .dh .board-h{display:none;}
  .dh .brow{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"code origin go" "code fare go";gap:6px 14px;padding-block:16px;}
  .dh .flap{grid-area:code;}
  .dh .b-origin{grid-area:origin;}
  .dh .b-fare{grid-area:fare;text-align:start;}
  .dh .b-go{grid-area:go;inline-size:40px;block-size:40px;}
  .dh .flap span{inline-size:26px;block-size:34px;font-size:.95rem;}
  .dh .b-origin .flag{display:none;}
  .dh .b-origin b{font-size:1.1rem;}
  .dh .b-fare .p{font-size:1.35rem;}
  .dh .b-fare small{display:none;}
  .dh .track{grid-template-columns:1fr;gap:0;}
  .dh .track::before,.dh .track::after{inset-inline:31px auto;inset-block:31px 31px;inline-size:1px;block-size:auto;}
  .dh .track::after{transform:scaleY(0);transform-origin:top;}
  .dh .track.in::after{transform:scaleY(1);}
  .dh .track .plane{display:none;}
  .dh .leg{display:grid;grid-template-columns:62px 1fr;gap:0 20px;text-align:start;padding-block-end:30px;}
  .dh .leg .dot{grid-row:span 4;margin:0;}
  .dh .leg .num{margin-block:4px 4px;}
  .dh .leg p{margin-inline:0;max-inline-size:none;}
  .dh .leg .who{justify-self:start;margin-block-start:10px;}
  .dh .dx-vs,.dh .dx-links{grid-template-columns:1fr;}
  .dh .dx-proof ul{justify-content:flex-start;}
  .dh .dx-list li{grid-template-columns:40px 1fr;}
  .dh .dx-list .ic{display:none;}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .dh .dx-arcs path,.dh .dx-arcs .ring,.dh .track .plane,.dh .board-bar .live::before{animation:none;}
  .dh .track::after{transition:none;transform:none;}
  .dh .bp,.dh .bp:hover{transform:none;}
}

/* ── Arabic ─────────────────────────────────────────────────────────────── */
/* Tajawal has no italic and letter-spacing breaks the Arabic joining. */
.dh:lang(ar) *{letter-spacing:0 !important;}
.dh:lang(ar) em,.dh:lang(ar) .dx-list .n,.dh:lang(ar) .leg .num,.dh:lang(ar) .bp-price.ask,.dh:lang(ar) .b-fare .p.ask{font-style:normal;}
.dh:lang(ar) h1,.dh:lang(ar) .h2{font-weight:700;line-height:1.3;}
.dh:lang(ar) .dx-hero h1{font-size:clamp(2rem,4.2vw,3.4rem);}
.dh:lang(ar) .dx-list h3,.dh:lang(ar) .leg h3,.dh:lang(ar) .vs h3,.dh:lang(ar) .b-origin b,.dh:lang(ar) .bp-to .bp-code{font-weight:700;}
.dh:lang(ar) .bp-to .bp-code{font-size:clamp(1.6rem,2.4vw,2rem);}
.dh:lang(ar) .hero-sub,.dh:lang(ar) .lede,.dh:lang(ar) .dx-list p,.dh:lang(ar) .leg p{line-height:1.9;}
.dh:lang(ar) .bp-top .bm,.dh:lang(ar) .vs-us h3 [dir=ltr]{font-family:'Fraunces',serif;font-weight:400;}
.dh:lang(ar) .flap span,.dh:lang(ar) .bp-code#cp-code{font-family:'Montserrat',sans-serif;}
.dh:lang(ar) .bp-code#cp-code{font-weight:500;}
.dh:lang(ar) .dx-list .free h3::after{content:'مجاناً';}

/* ── Landing page footer (the prototype's .lp-foot; outside the .dh wrapper,
   and this file only loads on the two direct-hire pages) ─────────────── */
body.lp-v4 .lp-foot{background:#07142A;color:rgba(234,241,250,.5);text-align:center;padding:28px clamp(16px,5vw,48px) 34px;font-size:.76rem;line-height:1.9;}
body.lp-v4 .lp-foot a{color:rgba(234,241,250,.75);}
/* The 5th inclusion's title already says FREE (R5 wording): keep the gold icon, drop the pill. */
.dh .dx-list .free.titled h3::after{content:none;}

/* The site page also loads v4-global(-rtl).css, which colours every h1–h4
   navy; in the prototype these headings take their container's colour, so
   on the dark hero, journey and EzeeHire card they were navy-on-navy
   (Step 8 QA). The landing page never loads v4-global, so it is unaffected. */
.dh .phero h1,.dh .leg h3,.dh .vs h3{color:inherit;}
/* v4-global also pads every <section> 72px 5%; the prototype has no such rule.
   :where() keeps this at element specificity, so each section's own padding
   (.band, .phero, .dx-final) still wins (Step 8 QA: tall proof strip). */
:where(.dh) section{padding:0;}
/* Phones (Step 8 QA): in the prototype the nowrap offer tag (≈370px) set the
   hero column's minimum width, so at 360px the whole EN hero (headline,
   text, buttons, boarding pass) was 400px wide and clipped on the right.
   Grid items may shrink, and the tag tightens and may wrap. */
.dh .phero-in>*{min-width:0;}
@media (max-width:420px){
  .dh .dx-tag{flex-wrap:wrap;row-gap:4px;letter-spacing:.1em;font-size:.6rem;}
  /* Three columns can't fit "Philippines" + flag at 360px: two rows → three. */
  .dh .bp .cpick{grid-template-columns:repeat(2,minmax(0,1fr));}
}