/* =====================================================================================
   Saura preview site, FAMILY 2 kit (light pages, deep navy, Deel language).
   Font: IBM Plex Sans Arabic 300-700, loaded by the <link> in shell.html's <head>.
   Every value is lifted 1:1 from the approved homepage-2 (saura-homepages/3-deel-new-copy.html).
   New pieces (inner heroes, breadcrumb, grids, feature and related cards, FAQ, reveal, active nav)
   are built from those same values. Catalog and snippets: _kit/COMPONENTS.md, live demo: _kit/demo.html.

    1 tokens        2 base          3 layout + spacing    4 type          5 buttons, links, chips
    6 panels        7 cards + mini UIs                    8 inner-page heroes
    9 sections reused from the homepage                   10 FAQ, reveal, active nav
   11 header       12 mega menu    13 mobile menu        14 footer       15 WhatsApp + expert dock
   16 booking modal
   ===================================================================================== */

/* ---------- 1 tokens ---------- */
:root{
  --ink:#1B1B1B; --navy:#0B1B3F; --mint:#8FE3C6; --teal:#0B8A73; --sand:#E8C590; --glow:#3346BA;
  --ink70:rgba(27,27,27,.7); --ink16:rgba(27,27,27,.16); --line:#E6E4E1;
  --card:#F7F5F2; --dark:#1B1B1B; --cream:#FAF4EE; --c65:rgba(250,244,238,.65); --c85:rgba(250,244,238,.85);
  --c16:rgba(250,244,238,.16); --band:#FFFBF4; --bar:#FEF0D8; --tint:#E3F6EE;
  --mu:0 1px 2px rgba(27,27,27,.05),0 8px 22px rgba(27,27,27,.08);
  --hdr:#0C1A3E; --sky0:#0C1A3E; --sky1:#081430; --sky2:#050C21;
  --pad:64px;
}
@media (max-width:1100px){:root{--pad:40px}}
@media (max-width:640px){:root{--pad:24px}}

/* ---------- 2 base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff}
html{scroll-padding-top:160px}
body{font-family:"IBM Plex Sans Arabic",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a,button{color:inherit;font:inherit;text-decoration:none;border:0;background:none;cursor:pointer}
img,svg{display:block}
bdi{unicode-bidi:isolate}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.arw{width:16px;height:16px;flex:none}
.ico{width:24px;height:24px;flex:none}
.m-br{display:none}
@media (max-width:640px){.m-br{display:inline}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- 3 layout + spacing ---------- */
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.sec{padding-top:150px}
.sec-sm{padding-top:96px}
.sec-b{padding-bottom:120px}
@media (max-width:640px){.sec{padding-top:88px}.sec-sm{padding-top:80px}.sec-b{padding-bottom:90px}}
/* the section right before the floating expert dock keeps room for it */
main>:has(+.dock):not(.gr){padding-bottom:150px}
.g2,.g3,.g4{display:grid;gap:28px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.mt{margin-top:48px}
@media (max-width:1240px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr);gap:16px}.mt{margin-top:40px}}

/* ---------- 4 type ---------- */
.eb{font-size:14px;line-height:22px;font-weight:500;color:var(--ink70)}
.c{text-align:center}
.h1{font-size:min(calc(2.9vw + 18px),calc(5.6svh + 16px),78px);line-height:1.27;font-weight:600;color:var(--ink);text-wrap:balance}
.h2{margin-top:12px;font-size:42px;line-height:1.26;font-weight:600;color:var(--ink);text-wrap:balance}
.h3{font-size:24px;line-height:1.35;font-weight:600;color:var(--ink);text-wrap:balance}
.h4{font-size:20px;line-height:1.4;font-weight:600;color:var(--ink)}
.acc{color:var(--teal)}
.mut{color:rgba(27,27,27,.55)}
.lead{max-width:720px;font-size:clamp(18px,calc(1.1vw + 5px),21px);line-height:1.62;color:var(--ink70)}
.sub{max-width:640px;font-size:17px;line-height:1.7;color:var(--ink70)}
.txt{font-size:18px;line-height:1.6;color:var(--ink70);text-wrap:pretty}
.small{font-size:14px;line-height:22px;color:var(--ink70)}
.c .lead,.c .sub,.lead.c,.sub.c{margin-inline:auto}
/* section head: eyebrow + h2 (+ .sub); .sh-split puts the sub at the far end like "what our customers say" */
.sh .sub{margin-top:16px}
.sh-split{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.sh-split .h2{margin-top:8px}
.sh-split .sub{max-width:444px;margin:0;padding-bottom:4px}
/* long text (case studies, sector pages) */
.prose{max-width:760px;font-size:18px;line-height:1.8;color:rgba(27,27,27,.82)}
.prose>*+*{margin-top:18px}
.prose h2{margin-top:52px;font-size:30px;line-height:1.35;font-weight:600;color:var(--ink)}
.prose h3{margin-top:36px;font-size:22px;line-height:1.45;font-weight:600;color:var(--ink)}
.prose strong{font-weight:600;color:var(--ink)}
.prose a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li+li{margin-top:8px}
.prose li::marker{color:var(--teal)}
.prose blockquote{padding-inline-start:20px;border-inline-start:3px solid var(--mint);font-size:20px;line-height:1.7;font-weight:500;color:var(--ink)}
@media (max-width:1100px){.h2{font-size:34px}}
@media (max-width:1050px){.h1{font-size:min(calc(3.2vw + 28px),60px)}}
@media (max-width:900px){.sh-split{flex-direction:column;align-items:flex-start;gap:16px}}
@media (max-width:640px){
  .h1{font-size:34px;line-height:1.3}
  .h2{font-size:28px;line-height:1.3;margin-top:8px}
  .h3{font-size:20px}
  .h4{font-size:18px}
  .eb{font-size:13px}
  .lead{font-size:16.5px;line-height:1.65}
  .sub{font-size:16px}
  .txt{font-size:17px}
  .prose{font-size:17px}
  .prose h2{font-size:24px;margin-top:40px}
}
/* text on navy (.is-navy and every navy component) and on ink (.is-dark and every dark component) */
:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat) :is(.h1,.h2,.h3,.h4){color:#fff}
:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat) .eb{color:var(--mint);font-weight:600}
:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat) .lead{color:rgba(226,234,255,.8)}
:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat) :is(.sub,.txt,.small){color:rgba(255,255,255,.74)}
:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat) .mut{color:rgba(226,234,255,.55)}
:is(.is-dark,.panel-dark,.xp,.gr) :is(.h1,.h2,.h3,.h4){color:var(--cream)}
:is(.is-dark,.panel-dark,.xp,.gr) :is(.eb,.lead,.sub,.txt,.small){color:var(--c65)}
:is(.is-dark,.panel-dark,.xp,.gr) .mut{color:rgba(250,244,238,.55)}
:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat,.is-dark,.panel-dark,.xp,.gr) .acc{color:var(--mint)}

/* ---------- 5 buttons, links, chips ---------- */
.btn-dark{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:51px;padding:0 22px;border-radius:200px;background:var(--ink);color:#fff;font-size:16px;font-weight:500;white-space:nowrap;transition:background .2s}
.btn-dark:hover{background:#3A3A3A}
.btn-out{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:51px;padding:0 18px;border-radius:200px;box-shadow:inset 0 0 0 2px var(--ink16);font-size:16px;font-weight:500;color:var(--ink);white-space:nowrap;transition:box-shadow .2s}
.btn-out:hover{box-shadow:inset 0 0 0 2px rgba(27,27,27,.5)}
.btn-navy,.ex-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:51px;padding:0 18px;border-radius:200px;background:var(--navy);color:#fff;font-size:16px;font-weight:500;white-space:nowrap;transition:background .2s}
.btn-navy:hover,.ex-b:hover{background:#16295A}
/* on navy: the homepage hero buttons */
.btn-white,.btn-ghost,.oy-b{height:52px;min-width:196px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 30px;border-radius:999px;font-size:17px;font-weight:600;white-space:nowrap;transition:background-color .2s,box-shadow .2s}
.btn-white,.oy-b1{background:#fff;color:var(--navy);box-shadow:0 10px 30px -12px rgba(143,227,198,.45)}
.btn-white:hover,.oy-b1:hover{background:#E4FAF2}
.btn-ghost,.oy-b2{color:#fff;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.btn-ghost:hover,.oy-b2:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.c .btn-row,.btn-row.c{justify-content:center}
/* text link with arrow, small pill link on dark, round arrow button */
.lnk{display:inline-flex;align-items:center;gap:8px;font-size:16px;line-height:1.6;font-weight:500;color:var(--ink70);transition:color .2s}
.lnk:hover{color:var(--ink)}
:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat) .lnk{color:var(--mint)}
:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat) .lnk:hover{color:#fff}
:is(.is-dark,.panel-dark,.xp,.gr) .lnk{color:var(--c85)}
:is(.is-dark,.panel-dark,.xp,.gr) .lnk:hover{color:#fff}
.xp-more{padding:6px 12px;margin-inline-start:-12px;display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:13px;line-height:20px;font-weight:500;color:#fff;transition:background .2s}
.xp-more:hover{background:rgba(255,255,255,.08)}
.ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 2px var(--ink16);color:var(--ink);transition:box-shadow .2s,background .2s}
.ring:hover{box-shadow:inset 0 0 0 2px rgba(27,27,27,.45)}
.ring svg{width:18px;height:18px}
/* floating chip over a visual (.mchip, absolute) and its static twin (.chip) */
.chip,.mchip{display:inline-flex;align-items:center;gap:8px;height:40px;padding-inline:6px 14px;border-radius:999px;background:#fff;box-shadow:var(--mu);font-size:13px;font-weight:500;color:#3A3A3A;white-space:nowrap}
.mchip{position:absolute}
.chip b,.mchip b{font-weight:700;color:var(--ink);font-size:14px}
.chip .mi,.mchip .mi{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.chip .mi svg,.mchip .mi svg{width:15px;height:15px}
.mi-up,.mi-ok{background:#D8F3E8;color:#0B7A64}
.mi-ar{background:#E5EAFB;color:var(--navy);font-size:14px;font-weight:700}
/* platform chips (Google, Meta, Snapchat...): <span class="mu pch"><span class="pi">svg</span>name</span> */
.pchs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pch{display:inline-flex;align-items:center;gap:7px;height:38px;padding-inline:5px 12px;border-radius:999px;font-size:13px;font-weight:600;color:#2B2B2B}
.pi{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none}
.pi svg{width:15px;height:15px}
/* tags (what we did) and a small mint badge */
.tags,.sp-tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tags li{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:500;color:var(--ink70)}
.sp-tags li,:is(.is-navy,.ph-navy,.panel-navy,.zr,.feat) .tags li{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);font-size:14px;font-weight:500;color:rgba(236,241,255,.9)}
.badge{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:#E6F6EF;color:#0B7A64;font-size:11px;font-weight:600}
.badge svg{width:10px;height:10px}
/* chips on ink (dark panel) */
.cc{display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:11px 14px;border-radius:999px;background:rgba(255,255,255,.05);font-size:13px;font-weight:600;color:rgba(250,244,238,.64);white-space:nowrap}
.cc svg{width:16px;height:16px;flex:none}
/* rating row: light by default, navy colours inside navy surfaces */
.rate{list-style:none;display:flex;align-items:center;flex-wrap:wrap;gap:8px 0;font-size:14.5px;line-height:22px;color:var(--ink70)}
.rate li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.rate li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:rgba(27,27,27,.28);margin-inline:16px 9px}
.rate b{font-weight:600;color:var(--ink)}
.c .rate,.rate.c{justify-content:center}
.stars{display:inline-flex;gap:2px;color:#D9A55A}
.stars svg{width:13px;height:13px}
:is(.is-navy,.ph-navy,.panel-navy,.zr) .rate{color:rgba(208,220,250,.6)}
:is(.is-navy,.ph-navy,.panel-navy,.zr) .rate li+li::before{background:rgba(208,220,250,.32)}
:is(.is-navy,.ph-navy,.panel-navy,.zr) .rate b{color:rgba(255,255,255,.86)}
:is(.is-navy,.ph-navy,.panel-navy,.zr) .stars{color:#E8C590}
/* breadcrumb */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;font-size:14px;line-height:22px;font-weight:500;color:var(--ink70)}
.crumbs li{display:inline-flex;align-items:center}
.crumbs li+li::before{content:"";width:6px;height:6px;margin-inline:12px 13px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);opacity:.55}
.crumbs a{transition:color .2s}
.crumbs a:hover,.crumbs [aria-current]{color:var(--ink)}
:is(.is-navy,.ph-navy,.panel-navy) .crumbs ol{color:rgba(226,234,255,.62)}
:is(.is-navy,.ph-navy,.panel-navy) .crumbs a:hover,:is(.is-navy,.ph-navy,.panel-navy) .crumbs [aria-current]{color:#fff}
@media (max-width:640px){
  .btn-row{flex-direction:column;align-items:stretch;gap:10px}
  .btn-row>:not(.btn-dark,.btn-out,.btn-navy,.btn-white,.btn-ghost,.oy-b){align-self:center}
  .btn-white,.btn-ghost,.oy-b{height:50px;font-size:16.5px}
  .rate{font-size:14px;gap:4px 0}
  .crumbs ol{font-size:13px}
}

/* ---------- 6 panels and surfaces ---------- */
.band{background:var(--band)}
.panel-wrap{padding-inline:12px}
.panel{border-radius:20px;padding:80px 52px}
.panel-in{max-width:1312px;margin:0 auto}
.panel-navy{background:var(--navy) linear-gradient(242deg,rgba(51,70,186,0) 48.33%,var(--glow) 100%);color:#fff}
.panel-dark{background:var(--dark);color:var(--cream)}
.panel-warm{background:var(--card)}
.panel-mint{background:var(--mint)}
@media (max-width:1100px){.panel{padding:64px 32px}}
@media (max-width:640px){.panel{padding:44px 20px 24px;border-radius:16px}}

/* ---------- 7 cards and mini UIs ---------- */
/* product card (homepage "services"): warm card, title, text, a mini UI in the middle, arrow at the corner */
.sv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.svc{position:relative;display:flex;flex-direction:column;min-width:0;min-height:438px;padding:24px;border-radius:16px;background:var(--card);color:var(--ink);transition:background .2s}
a.svc:hover{background:#F2EFE9}
.svc h3{font-size:24px;line-height:1.35;font-weight:600;color:var(--ink);text-wrap:balance}
.svc h3 span{white-space:nowrap}
.svc>p{margin-top:6px;font-size:18px;line-height:1.6;color:var(--ink70);text-wrap:pretty}
.svc>p.bal{text-wrap:balance}
.svc>p+p{margin-top:8px}
.sv-ui{position:relative;margin:auto;padding-block:30px 40px;width:100%;display:flex;flex-direction:column;align-items:center}
.svc-go{position:absolute;inset-inline-end:22px;bottom:20px;width:28px;height:28px;display:grid;place-items:center;color:var(--ink);transition:transform .25s}
.svc-go svg{width:18px;height:18px}
a.svc:hover .svc-go,a.rel:hover .svc-go{transform:translateX(-4px)}
/* feature card: icon tile, title, text */
.fc{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;padding:24px;border-radius:16px;background:var(--card)}
.fc h3{font-size:20px;line-height:1.4;font-weight:600;color:var(--ink)}
.fc p{margin-top:-10px;font-size:16px;line-height:1.6;color:var(--ink70);text-wrap:pretty}
.fc-w{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.ic,.mg-ic{width:48px;height:48px;flex:none;border-radius:12px;background:var(--tint);display:grid;place-items:center;color:var(--navy)}
.ic svg,.mg-ic svg{width:22px;height:22px}
/* related page card (links to another family page) */
.rel{position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:196px;padding:24px 24px 60px;border-radius:16px;background:var(--card);color:var(--ink);transition:background .2s}
a.rel:hover{background:#F2EFE9}
.rel .ic{margin-bottom:10px}
.rel h3{font-size:20px;line-height:1.4;font-weight:600}
.rel p{font-size:16px;line-height:1.6;color:var(--ink70);text-wrap:pretty}
/* mini UI building blocks: white card, header row with a mint badge, metric rows with bars */
.mu{background:#fff;border-radius:12px;box-shadow:var(--mu)}
.mu-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--ink);margin-bottom:4px}
.mu-h span{font-size:10px;font-weight:600;color:#0B7A64;background:#E6F6EF;border-radius:999px;padding:1px 8px}
.mu-row{display:grid;grid-template-columns:118px 1fr;align-items:center;gap:10px;height:26px;font-size:11.5px;color:#55534F}
.mu-row i{display:block;height:6px;border-radius:6px;background:#EEECE8;position:relative;overflow:hidden}
.mu-row i::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);border-radius:6px;background:var(--c,#9FDCC6)}
/* report card (the homepage ads card): <div class="mu mu-rep"><p class="mu-h">..<span>..</span></p><div class="mu-row">..<i style="--w:68%"></i></div></div> */
.mu-rep{width:min(300px,100%);padding:12px 14px 6px;text-align:start}
/* a column or row of static chips */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chips.col{flex-direction:column;align-items:center}
/* a real screenshot in a white card with a caption line (the homepage SEO card) */
.mu-shot{width:min(320px,100%);padding:14px 14px 12px;border-radius:14px}
.mu-shot img{width:100%;height:auto;border-radius:4px}
.mu-cap{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid #EFEDEA;font-size:11px;font-weight:600;color:#8A8A8A}
.mu-cap i{width:6px;height:6px;border-radius:50%;background:#2DB37F}
/* floating UI cards over a photo (homepage dark panel scenes) */
.xc{background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 2px 6px rgba(0,0,0,.06),0 16px 36px rgba(0,0,0,.18);overflow:hidden}
.xc+.xc{margin-top:14px}
.xc-h{padding:11px 16px;font-size:17px;line-height:1.4;font-weight:600;color:#1B1B1B}
.xc-b{padding:12px 16px 14px;display:flex;align-items:center;gap:8px;font-size:13px;color:#55534F}
.xc-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:6px;background:#F7F1E6;font-size:13px;font-weight:500;color:#3A3A3A}
.xc-tag svg{width:14px;height:14px}
.t-sand{background:#F8E6CF}.t-mint{background:#D3F2E6}.t-blue{background:#DCE8FB}
.xc-list{list-style:none;position:relative;padding:12px 16px 14px}
.xc-list::before{content:"";position:absolute;top:30px;bottom:30px;inset-inline-start:21px;width:2px;background:#9ADFC6}
.xc-list li{position:relative;display:flex;align-items:center;gap:12px;min-height:50px;font-size:13px;color:#55534F}
.xc-list li::before{content:"";position:absolute;inset-inline-start:2px;width:8px;height:8px;border-radius:50%;background:#2DB37F}
.xc-list .xi{margin-inline-start:24px;width:36px;height:36px;border-radius:9px;background:#E8F7F0;color:var(--navy);display:grid;place-items:center;flex:none}
.xc-list .xi svg{width:18px;height:18px}
.xc-list b{display:block;font-size:14px;font-weight:600;color:#1B1B1B}
.xc-rows{padding:6px 16px 12px}
.xc-row{display:grid;grid-template-columns:1fr 92px;align-items:center;gap:12px;height:38px;font-size:13px;font-weight:500;color:#3A3A3A;border-bottom:1px solid #F0EEEA}
.xc-row:last-child{border:0}
.xc-row svg{width:92px;height:24px}
.xc-meet{display:flex;align-items:center;gap:12px;padding:14px 16px}
.xc-meet .xi{width:40px;height:40px;border-radius:10px;background:#DCE8FB;color:var(--navy);display:grid;place-items:center;flex:none}
.xc-meet .xi svg{width:20px;height:20px}
.xc-meet b{display:block;font-size:15px;font-weight:600;color:#1B1B1B}
.xc-meet small{display:block;font-size:12.5px;color:#7A7874}
@media (max-width:1240px){.sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .sv-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .svc{min-height:438px;padding:20px}
  .svc h3{font-size:20px}
  .svc>p{font-size:17px}
  .sv-ui{padding-block:28px 44px}
  .svc-go{inset-inline-end:18px;bottom:16px}
  .fc,.rel{padding:20px}
  .rel{padding-bottom:56px;min-height:0}
}

/* ---------- 8 inner-page heroes ----------
   .ph-navy  the homepage hero's navy sky (the header shares its colour, so header + hero read as one surface),
             copy on the start side, a page visual (.ph-vis) on the other side; add .ph-c to centre the copy.
   .ph-light Deel product-page hero: white, same split, the visual on a soft colour panel. */
.ph{position:relative;overflow:hidden;isolation:isolate}
.ph-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;column-gap:64px;row-gap:44px;min-height:clamp(560px,calc(100svh - 80px),780px);padding-block:48px 72px}
.ph-copy{min-width:0}
.ph .crumbs{margin-bottom:26px}
.ph .eb{margin-bottom:12px}
.ph .lead{margin-top:18px}
.ph .btn-row{margin-top:32px}
.ph .rate{margin-top:28px}
.ph-vis{position:relative;min-width:0}
/* beside a visual the headline stops at 60px (centred heroes keep the homepage's 78px cap) */
@media (min-width:1051px){.ph:not(.ph-c) .h1{font-size:min(calc(2.9vw + 18px),calc(5.6svh + 16px),60px)}}
.ph-navy{background:radial-gradient(ellipse 46% 52% at 26% 42%,rgba(64,96,214,.13),rgba(64,96,214,0) 72%),linear-gradient(180deg,var(--sky0) 0%,var(--sky1) 58%,var(--sky2) 100%);color:#fff}
.ph-light{background:#fff}
.ph-c .ph-in{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.ph-c .ph-copy{max-width:920px}
.ph-c .crumbs ol,.ph-c .btn-row,.ph-c .rate{justify-content:center}
.ph-c .lead{margin-inline:auto}
.ph-c.ph-navy{background:radial-gradient(ellipse 52% 46% at 50% 34%,rgba(64,96,214,.13),rgba(64,96,214,0) 72%),linear-gradient(180deg,var(--sky0) 0%,var(--sky1) 58%,var(--sky2) 100%)}
/* hero visual A: a photo in a rounded frame with floating UI cards (.xc) and chips (.mchip) */
.vis-photo{position:relative;height:min(540px,calc(100svh - 210px));min-height:420px;border-radius:24px;overflow:hidden;background:#2A2A2A;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.vis-photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vis-ui{position:absolute;top:28px;inset-inline-start:28px;width:min(300px,calc(100% - 56px));transform-origin:top right}
.vis-photo>img.flip,.xp-media>img.flip{transform:scaleX(-1)}
/* chips pinned to a corner of the visual, half outside it: .at-be bottom-end, .at-bs bottom-start, .at-te, .at-ts */
.ph-vis>.mchip.at-be{inset-inline-end:-18px;bottom:44px}
.ph-vis>.mchip.at-bs{inset-inline-start:-18px;bottom:44px}
.ph-vis>.mchip.at-te{inset-inline-end:-18px;top:44px}
.ph-vis>.mchip.at-ts{inset-inline-start:-18px;top:44px}
/* hero visual B: a soft colour panel holding mini UIs (the homepage quote-card colours) */
.vis-panel{position:relative;display:grid;place-items:center;height:min(540px,calc(100svh - 210px));min-height:420px;padding:40px;border-radius:20px;overflow:hidden;isolation:isolate}
.vis-panel>*{position:relative}
.vis-a{background:linear-gradient(172deg,#D6F2E8 0%,#E3E7FB 100%)}
.vis-a::before{content:"";position:absolute;inset:auto -12% -40% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.vis-b{background:var(--mint)}
.vis-c{background:var(--navy) linear-gradient(242deg,rgba(51,70,186,0) 40%,var(--glow) 100%)}
.vis-d{background:linear-gradient(172deg,#FBF0DC 0%,#F5E6E4 100%)}
.vis-w{background:var(--card)}
.ph-navy .vis-panel{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ph-navy .vis-w{background:rgba(255,255,255,.05)}
@media (max-width:1100px){
  .ph-in{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:48px 72px}
  .vis-photo,.vis-panel{height:460px;min-height:0}
}
@media (max-width:640px){
  .ph-in{padding-block:30px 48px;row-gap:34px}
  .ph .crumbs{margin-bottom:18px}
  .ph .eb{margin-bottom:8px}
  .ph .lead{margin-top:12px}
  .ph .btn-row{margin-top:22px}
  .ph .rate{margin-top:18px}
  .vis-photo,.vis-panel{height:360px;border-radius:16px}
  .vis-panel{padding:24px 16px}
  .vis-ui{top:14px;inset-inline-start:14px;transform:scale(.8)}
  .ph-vis>.mchip.at-be,.ph-vis>.mchip.at-te{inset-inline-end:12px}
  .ph-vis>.mchip.at-bs,.ph-vis>.mchip.at-ts{inset-inline-start:12px}
  .ph-vis>.mchip.at-be,.ph-vis>.mchip.at-bs{bottom:16px}
}

/* ---------- 9 sections reused from the homepage (exact class names) ---------- */
/* logo strip: the spotlight's logo row (images sized per logo with --w/--h, like the homepage) */
.lg-sec{padding-top:44px}
.lg-cap{text-align:center;font-size:15px;line-height:1.6;color:var(--ink70)}
.lg-cap b{font-weight:600;color:var(--ink)}
.lg-cap+.lg-strip{margin-top:6px}
.lg-row{list-style:none;position:relative;display:flex;justify-content:space-between;align-items:stretch;--rs:.9}
.lg-row::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--line)}
.lg-row>li{flex:none;display:grid;place-items:center;height:80px;padding-inline:10px}
.lg-row img{width:calc(var(--w) * var(--rs));height:calc(var(--h) * var(--rs));object-fit:contain;opacity:.6;transition:opacity .35s ease}
.lg-row a:hover img{opacity:.82}
.lg-row.on-navy::after{background:rgba(255,255,255,.1)}
.lg-row.on-navy img{filter:brightness(0) invert(1);opacity:.55}
@media (max-width:1400px){.lg-row{--rs:.8}.lg-row>li{padding-inline:8px}}
@media (max-width:1240px){.lg-row{--rs:.74}.lg-row>li{padding-inline:6px}}
@media (max-width:1100px){
  .lg-strip{margin-inline:calc(var(--pad) * -1);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--pad),#000 calc(100% - var(--pad)),transparent)}
  .lg-strip::-webkit-scrollbar{display:none}
  .lg-row{--rs:1;width:max-content;min-width:100%;padding-inline:var(--pad);justify-content:flex-start;gap:4px}
  .lg-row::after{inset-inline:var(--pad)}
  .lg-row>li{scroll-snap-align:center;padding-inline:16px}
}
@media (max-width:640px){.lg-row{--rs:.92}.lg-row>li{height:72px;padding-inline:14px}}

/* featured case: one slide of the homepage client spotlight (navy stage, white logo plate, story, number) */
.feat{display:grid;grid-template-columns:minmax(0,43fr) minmax(0,57fr);padding:12px;border-radius:20px;background:#0C1A3E linear-gradient(242deg,rgba(51,70,186,0) 38%,rgba(51,70,186,.82) 100%);color:#fff;overflow:hidden;isolation:isolate}
.feat-plate{min-height:240px;border-radius:12px;background:#fff;display:grid;place-items:center;padding:28px}
.feat-plate img{width:auto;height:auto;max-width:min(329px,86%);max-height:150px}
.feat-txt{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:30px 52px 30px 40px}
.sp-name{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.5;font-weight:500;color:rgba(226,234,255,.7)}
.sp-place{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:rgba(255,255,255,.1);font-size:13px;font-weight:600;color:#fff}
.sp-line{margin-top:10px;max-width:600px;font-size:33px;line-height:1.45;font-weight:600;color:#fff;text-wrap:balance}
.sp-tags{margin:16px 0 0;padding:0}
.sp-stat{margin-top:24px;display:flex;align-items:baseline;gap:14px}
.sp-stat b{font-size:56px;line-height:1;font-weight:700;color:var(--mint)}
.sp-stat span{font-size:18px;line-height:1.4;font-weight:500;color:rgba(226,234,255,.8)}
.sp-q{margin:24px 0 0;max-width:560px}
.sp-q blockquote{margin:0;font-size:19px;line-height:1.6;font-weight:500;color:#fff}
.sp-q figcaption{margin-top:8px;font-size:14px;font-weight:500;color:rgba(143,227,198,.9)}
.feat-txt .lnk{margin-top:22px}
@media (max-width:1240px){.feat-txt{padding:26px 36px 26px 28px}.sp-line{font-size:27px}.sp-stat b{font-size:50px}}
@media (max-width:900px){
  .feat{grid-template-columns:minmax(0,1fr);padding:10px}
  .feat-plate{min-height:168px}
  .feat-txt{padding:22px 16px 18px}
  .sp-line{font-size:24px}
  .sp-tags{margin-top:12px}.sp-tags li{height:28px;font-size:13px;padding:0 11px}
  .sp-q blockquote{font-size:17px}
}
@media (max-width:640px){
  .feat{border-radius:18px}
  .feat-plate{min-height:150px}
  .feat-txt{padding:20px 12px 14px}
  .sp-name{font-size:14px}
  .sp-line{margin-top:6px;font-size:21px;line-height:1.5}
  .sp-stat{margin-top:16px;gap:10px}
  .sp-stat b{font-size:40px}
  .sp-stat span{font-size:16px}
  .sp-q{margin-top:16px}.sp-q blockquote{font-size:16px}
}

/* comparison table: Saura column lifted in navy (rows line up through subgrid) */
.cmp{padding-top:150px}
.cmp .h2{max-width:900px;margin-inline:auto}
.cmp-t{max-width:1088px;margin:52px auto 0;padding:12px;border-radius:20px;background:var(--card);display:grid;grid-template-columns:minmax(140px,.62fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(5,auto)}
.cmp-col{grid-row:span 5;display:grid;grid-template-rows:subgrid;min-width:0}
.cmp-hd{display:flex;align-items:center;gap:12px;padding:24px 28px 22px;font-size:22px;line-height:1.3;font-weight:600;color:var(--ink)}
.cmp-c{display:flex;align-items:flex-start;gap:14px;padding:22px 28px;border-top:1px solid #E6E2DC;font-size:18px;line-height:1.55;color:var(--ink70)}
.cmp-c>span{text-wrap:pretty}
.cmp-c b{font-weight:600}
.cmp-c small{display:block;margin-top:2px;font-size:15px;line-height:1.6}
.cmp-k{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;font-style:normal}
.cmp-lb .cmp-c{padding-inline:18px 8px;font-size:16px;font-weight:600;color:var(--ink)}
.cmp-us{border-radius:14px;background:var(--navy) linear-gradient(242deg,rgba(51,70,186,0) 38%,var(--glow) 100%);box-shadow:0 18px 40px -22px rgba(11,27,63,.6)}
.cmp-us .cmp-hd{color:#fff}
.cmp-us .cmp-c{border-color:rgba(255,255,255,.12);color:#fff}
.cmp-us .cmp-c small{color:rgba(255,255,255,.72)}
.cmp-mk{height:24px;width:auto}
.cmp-av{width:32px;height:32px;border-radius:50%;background:#E6E2DC;color:#6E6B67;display:grid;place-items:center;flex:none}
.cmp-av svg{width:18px;height:18px}
.cmp-ic{width:24px;height:24px;margin-top:2px;border-radius:50%;flex:none;display:grid;place-items:center}
.cmp-ic svg{width:12px;height:12px}
.cmp-ic.ok{background:var(--mint);color:var(--navy)}
.cmp-ic.no{background:#E6E2DC;color:#7A7672}
@media (max-width:900px){
  .cmp-t{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:8px}
  .cmp-t .cmp-lb{display:none}
  .cmp-hd{padding:20px 20px 16px;font-size:20px}
  .cmp-c{padding:18px 20px;font-size:17px}
  .cmp-k{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;margin-bottom:2px;font-size:13px;line-height:20px;font-weight:600;opacity:.62}
}
@media (max-width:640px){
  .cmp{padding-top:88px}
  .cmp-t{margin-top:32px;padding:0;background:none;grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:12px}
  .cmp-col{grid-row:auto;display:block;border-radius:16px}
  .cmp-them{background:var(--card)}
  .cmp-hd{padding:20px 20px 14px}
  .cmp-c{padding:16px 20px;font-size:16px}
  .cmp-c small{font-size:14px}
}

/* timeline: tabs (optional) + three steps on a dashed line; each panel sets its tint with --t1 */
.tl{padding-block:232px 120px}
.tl .h2{margin-top:4px}
.tl-tabs{margin-top:38px;display:flex;justify-content:center;gap:20px}
.tl-tab{display:inline-flex;align-items:center;gap:8px;height:36px;padding:2px;padding-inline-end:10px;border-radius:8px;font-size:18px;line-height:28px;font-weight:600;color:#8A8A8A;white-space:nowrap;transition:background .2s,color .2s}
.tl-tab:hover{color:var(--ink)}
.tl-ic{width:32px;height:32px;border-radius:6px;display:grid;place-items:center;transition:background .2s}
.tl-ic svg{width:19px;height:19px}
.tl-tab[aria-selected="true"]{background:var(--t1);color:var(--ink)}
.tl-tab[aria-selected="true"] .tl-ic{background:var(--t2)}
.tl-panel{margin-top:64px;--t1:#D6F3E7}
.tl-panel[hidden]{display:none}
.tl-steps{list-style:none;position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.tl-steps::before{content:"";position:absolute;top:5px;inset-inline:140px;height:2px;background:repeating-linear-gradient(90deg,#CCC 0 5px,transparent 5px 10px)}
.tl-step{position:relative;width:280px;display:flex;flex-direction:column;align-items:center;text-align:center}
.tl-dot{width:12px;height:12px;border-radius:50%;background:#CCC;margin-bottom:32px}
.tl-step h3{font-size:24px;line-height:1.3;font-weight:600;color:rgba(0,0,0,.87);margin-bottom:7px;white-space:nowrap}
.tl-step p{width:100%;padding:20px;border-radius:12px;background:var(--t1);font-size:16px;line-height:1.7;color:var(--ink);text-wrap:balance}
.tl-panel.in .tl-step p{animation:tlin .45s cubic-bezier(.2,.8,.2,1) both}
.tl-panel.in .tl-step:nth-child(2) p{animation-delay:.06s}
.tl-panel.in .tl-step:nth-child(3) p{animation-delay:.12s}
@keyframes tlin{from{transform:translateY(6px)}to{transform:none}}
.tl-note{margin-top:44px;text-align:center;font-size:14px;line-height:22px;color:var(--ink70)}
@media (max-width:900px){
  .tl-step{width:31%}
  .tl-steps::before{inset-inline:15.5%}
  .tl-step h3{font-size:21px;white-space:normal}
  .tl-tabs{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .tl-tabs::-webkit-scrollbar{display:none}
}
@media (max-width:640px){
  .tl{padding-block:110px 90px}
  .tl-tabs{margin-top:28px;gap:20px}
  .tl-panel{margin-top:34px}
  .tl-steps{flex-direction:column;gap:30px;padding-inline-start:28px}
  .tl-steps::before{top:8px;bottom:60px;inset-inline:5px auto;width:2px;height:auto;background:repeating-linear-gradient(180deg,#CCC 0 5px,transparent 5px 10px)}
  .tl-step{width:100%;align-items:flex-start;text-align:start}
  .tl-dot{position:absolute;inset-inline-start:-28px;top:8px;margin:0}
  .tl-step h3{font-size:20px;margin-bottom:10px}
  .tl-step p{padding:18px 20px;text-wrap:pretty}
  .tl-note{margin-top:30px}
  .tl-tab{position:relative}
  .tl-tab::after{content:"";position:absolute;inset:-4px 0}
}

/* dark panel on a cream band ("same face from the first call") */
.xp-band{background:var(--band);padding-inline:12px}
.xp{margin:0 auto;border-radius:20px;background:var(--dark);color:var(--cream);padding:80px 52px}
.xp-in{max-width:1312px;margin:0 auto}
.xp h2{font-size:42px;line-height:1.26;font-weight:600;color:var(--cream);text-wrap:balance}
.xp-cols{margin-top:60px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;row-gap:12px}
.xp-col{display:flex;flex-direction:column;align-items:flex-start;padding:20px;border-radius:16px;font-size:18px;line-height:1.5;color:var(--c65)}
.xp-col.on{background:rgba(255,255,255,.05)}
.xp-col strong{font-weight:600;color:#fff}
.xp-col .xp-more{margin-top:auto}
.xp-col p+.xp-more{margin-top:26px}
.xp-media{position:relative;margin-top:20px;height:550px;border-radius:24px;overflow:hidden;background:#2A2A2A}
.xp-media>img{width:100%;height:100%;object-fit:cover}
.xp-media .vis-ui{top:46px;inset-inline-start:120px;width:310px}
@media (max-width:1100px){.xp h2{font-size:34px}.xp{padding:64px 32px}}
@media (max-width:900px){.xp-cols{grid-template-columns:minmax(0,1fr);margin-top:40px}.xp-col{padding:18px 0;border-radius:0;background:none!important;border-bottom:1px solid rgba(250,244,238,.14)}.xp-media{height:420px;border-radius:16px}}
@media (max-width:640px){
  .xp-band{padding:0;background:var(--dark)}
  .xp{border-radius:0;padding:64px 16px 40px}
  .xp h2{font-size:28px;line-height:1.3}
  .xp-media{height:300px}
  .xp-media .vis-ui{top:12px;inset-inline-start:12px;transform:scale(.66)}
  .xp-more{min-height:44px}
}

/* customer quotes: big quotes on colour cards (a wide card beside a narrow one, the second row flips) */
.rv{padding-top:96px}
.rv-head{max-width:1440px;margin:0 auto;padding-inline:104px;display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.rv-head .h2{margin-top:8px}
.rv-sub{max-width:444px;font-size:17px;line-height:1.7;color:var(--ink70);padding-bottom:4px}
.lq{max-width:1440px;margin:0 auto;padding:64px 104px 0}
.lq-row{display:grid;grid-template-columns:1.65fr 1fr;gap:10px}
.lq-row+.lq-row{margin-top:10px;grid-template-columns:1fr 1.65fr}
.lq-row.one{grid-template-columns:minmax(0,1fr)}
.lq-card{position:relative;overflow:hidden;min-height:440px;border-radius:12px;padding:40px 40px 34px;display:flex;flex-direction:column;justify-content:space-between;gap:40px;color:var(--ink)}
.lq-card blockquote{max-width:600px;font-size:32px;line-height:1.5;font-weight:500;padding-inline-start:.42em;text-indent:-.42em;text-wrap:pretty}
.lq-row.one .lq-card{min-height:360px}
.lq-row.one blockquote{max-width:900px}
.lq-card figcaption{display:flex;align-items:center;gap:16px}
.lq-lg{height:40px;display:flex;align-items:center;flex:none}
.lq-lg img{max-width:96px;max-height:40px;width:auto;height:auto;filter:brightness(0)}
.lq-card figcaption>i{width:1px;height:34px;background:currentColor;opacity:.16;flex:none}
.lq-card b{display:block;font-size:15px;line-height:1.5;font-weight:600}
.lq-card small{display:block;font-size:14px;line-height:1.5;opacity:.66}
.lq-a{background:linear-gradient(172deg,#D6F2E8 0%,#E3E7FB 100%)}
.lq-a::before{content:"";position:absolute;inset:auto -12% -40% auto;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.75),rgba(255,255,255,0));pointer-events:none}
.lq-b{background:var(--mint)}
.lq-c{background:var(--navy) linear-gradient(242deg,rgba(51,70,186,0) 40%,var(--glow) 100%);color:#fff}
.lq-c .lq-lg img{filter:brightness(0) invert(1)}
.lq-d{background:linear-gradient(172deg,#FBF0DC 0%,#F5E6E4 100%)}
.lq-card>*{position:relative}
.lq-foot{margin-top:40px;display:flex;align-items:center;justify-content:space-between;gap:24px;font-size:16px;line-height:1.6;color:var(--ink70)}
.lq-foot b{font-weight:600;color:var(--ink)}
.lq-foot a{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--ink70);transition:color .2s}
.lq-foot a:hover{color:var(--ink)}
.wrap .lq{padding-inline:0}
@media (min-width:1600px){.rv-head{padding-inline:104px}}
@media (max-width:1240px){.lq{padding-inline:var(--pad)}.rv-head{padding-inline:var(--pad)}}
@media (max-width:1100px){
  .lq-row,.lq-row+.lq-row{grid-template-columns:1fr 1fr}
  .lq-card{min-height:400px;padding:32px 28px 28px}
  .lq-card blockquote{font-size:26px}
}
@media (max-width:900px){.rv-head{flex-direction:column;align-items:flex-start;gap:16px}}
@media (max-width:640px){
  .rv{padding-top:80px}
  .rv-head{padding-inline:20px}
  .rv-sub{font-size:16px}
  .lq{padding:36px 20px 0}
  .lq-row,.lq-row+.lq-row{grid-template-columns:1fr;gap:10px}
  .lq-card{min-height:0;padding:26px 22px 22px;gap:32px}
  .lq-card blockquote{font-size:21px;line-height:1.6}
  .lq-foot{flex-direction:column;align-items:flex-start;gap:6px;margin-top:28px;font-size:15px}
  .lq-foot a{min-height:44px}
}

/* zero risk: the navy panel with four promises on glass tiles */
.zr-band{padding:120px 12px 0}
.zr{max-width:1704px;margin:0 auto;border-radius:20px;background:var(--navy) linear-gradient(242deg,rgba(51,70,186,0) 48.33%,var(--glow) 100%);color:#fff;padding:80px 52px}
.zr-in{max-width:1312px;margin:0 auto}
.zr-eb{font-size:14px;line-height:22px;font-weight:600;color:var(--mint)}
.zr h2{margin-top:12px;font-size:42px;line-height:1.26;font-weight:600;color:#fff;text-wrap:balance}
.zr-grid{list-style:none;margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.zr-grid li{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:24px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05)}
.zr-ic{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;background:linear-gradient(to bottom left,#CDF3E5,#A9E9D3);color:var(--navy)}
.zr-ic svg{width:22px;height:22px}
.zr-grid b{display:block;font-size:20px;line-height:1.4;font-weight:600;color:#fff}
.zr-grid span span{display:block;margin-top:4px;font-size:16px;line-height:1.6;color:rgba(255,255,255,.74)}
.zr-grid li>span>span{text-wrap:balance}
@media (max-width:1100px){.zr{padding:64px 32px}.zr h2{font-size:34px}.zr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .zr-band{padding:72px 12px 0}
  .zr{padding:44px 20px 24px;border-radius:16px}
  .zr h2{font-size:28px;line-height:1.3;margin-top:8px}
  .zr-grid{grid-template-columns:minmax(0,1fr);margin-top:28px;gap:10px}
  .zr-grid li{flex-direction:row;gap:14px;padding:18px}
  .zr-ic{width:40px;height:40px}
  .zr-grid b{font-size:18px}
  .zr-grid span span{font-size:15px}
}

/* closing band: big centred line, stats, one button («ارجع لشغلك. التسويق علينا.») */
.st{padding-block:150px 80px;text-align:center}
.st .h2{max-width:720px;margin-inline:auto}
.st .sub{margin:16px auto 0}
.st-grid{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.st-n{font-size:64px;line-height:1.1;font-weight:700;color:var(--ink)}
.st-l{margin-top:6px;font-size:18px;line-height:1.5;font-weight:600;color:var(--ink)}
.st .btn-dark,.st .btn-row{margin-top:84px}
.st .btn-row{justify-content:center}
.st .btn-row .btn-dark{margin-top:0}
@media (max-width:1100px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}}
@media (max-width:640px){
  .st{padding-block:100px 70px}
  .st-grid{grid-template-columns:1fr;row-gap:36px;margin-top:40px}
  .st-n{font-size:48px}
  .st-l{font-size:17px}
  .st .btn-dark,.st .btn-row{margin-top:48px}
}

/* dark review band (verified reviews carousel; kit.js wires the two arrows) */
.gr{background:var(--dark);color:var(--cream);padding:80px 0 140px}
.gr-head{display:flex;align-items:center;gap:16px}
.gr-badge{width:56px;height:56px;border-radius:50%;background:#3A3936;display:grid;place-items:center;flex:none;color:var(--sand)}
.gr-badge svg{width:26px;height:26px}
.gr-h{font-size:28px;line-height:1.3;font-weight:600;color:var(--cream)}
.gr-s{margin-top:2px;font-size:16px;line-height:1.6;color:var(--c85)}
.gr-arrows{margin-inline-start:auto;display:flex;gap:12px}
.gr .ring{width:48px;height:48px;box-shadow:inset 0 0 0 2px var(--c16);color:#fff}
.gr .ring:hover{box-shadow:inset 0 0 0 2px rgba(250,244,238,.45)}
.gr .ring:disabled{opacity:.35;cursor:default}
.gr-view{margin-top:78px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}
.gr-view::-webkit-scrollbar{display:none}
.gr-track{display:flex;gap:40px}
.gr-card{flex:none;width:calc((100% - 120px)/4);scroll-snap-align:start}
.gr-name{font-size:13px;line-height:20px;font-weight:600;color:var(--c85)}
.gr-stars{margin-top:8px;display:flex;color:#F2CF86}
.gr-stars svg{width:24px;height:24px}
.gr-q{margin-top:18px;font-size:16px;line-height:1.75;color:var(--c85)}
.gr-co{margin-top:14px;font-size:13px;line-height:20px;color:rgba(250,244,238,.5)}
@media (max-width:1240px){.gr-card{width:calc((100% - 80px)/3)}}
@media (max-width:640px){
  .gr{padding:64px 0 150px}
  .gr-head{flex-wrap:wrap;column-gap:14px;row-gap:28px}
  .gr-badge{width:48px;height:48px}
  .gr-h{font-size:20px}
  .gr-s{font-size:14px}
  .gr-arrows{order:3;width:100%;margin:0}
  .gr-view{margin-top:56px;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scroll-padding-inline:var(--pad)}
  .gr-track{gap:34px}
  .gr-card{width:274px}
  .gr-q{font-size:14px;line-height:1.7;margin-top:12px}
}

/* ---------- 10 FAQ, reveal on scroll, active nav ---------- */
.faq{max-width:1088px;margin:52px auto 0;border-top:1px solid var(--line)}
.faq-i{border-bottom:1px solid var(--line)}
.faq-q{font:inherit}
.faq-b{display:flex;width:100%;align-items:center;justify-content:space-between;gap:24px;padding:26px 4px;text-align:start;font-size:20px;line-height:1.5;font-weight:600;color:var(--ink);transition:color .2s}
.faq-b:hover{color:rgba(27,27,27,.72)}
.faq-pm{position:relative;width:32px;height:32px;flex:none;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ink16);color:var(--ink);transition:background .25s,box-shadow .25s}
.faq-pm::before,.faq-pm::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:currentColor;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.faq-pm::after{transform:rotate(90deg)}
.faq-b[aria-expanded="true"] .faq-pm{background:var(--mint);box-shadow:none;color:var(--navy)}
.faq-b[aria-expanded="true"] .faq-pm::after{transform:rotate(0deg)}
.faq-a{overflow:hidden;transition:height .35s cubic-bezier(.2,.8,.2,1)}
.faq-a[hidden]{display:none}
.faq-in{max-width:880px;padding:0 4px 28px;font-size:18px;line-height:1.75;color:var(--ink70)}
.faq-in>*+*{margin-top:10px}
.faq-in a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.faq{margin-top:36px}.faq-b{gap:16px;padding:20px 2px;font-size:17px}.faq-in{padding-bottom:22px;font-size:16px}}

/* reveal: <div data-reveal> fades up once on screen; [data-reveal-stagger] staggers its children */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* the current page in the chrome (kit.js sets aria-current="page" and .is-current) */
.links>a{position:relative}
.links>a::after{content:"";position:absolute;inset-inline:-6px;bottom:-20px;height:3px;background:var(--mint);opacity:0;transition:opacity .18s}
/* no underline for the current page in the top bar (Hussam: it looked like a stray line under the menu) */
.mg-it[aria-current="page"]{background:var(--card)}
.mg-it[aria-current="page"] .mg-ic{background:var(--mint)}
.mn-row[aria-current="page"],.mn-row.is-current,.mn-grp a[aria-current="page"]{color:var(--teal)}
.ft a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px}

/* ---------- 11 header (navy, sticky, hides on scroll down, returns on scroll up) ---------- */
.top{position:sticky;top:0;z-index:60}
.nav{position:relative;z-index:30;height:80px;background:#0C1A3E}
.top .nav{transition:box-shadow .25s}
.top.scrolled .nav{box-shadow:0 1px 0 rgba(27,27,27,.05),0 12px 24px -16px rgba(27,27,27,.22)}
.nav-in{max-width:1440px;height:100%;margin:0 auto;padding:0 64px;display:flex;align-items:center}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand .mark{height:27px}.brand .word{height:21px}
.brand img{filter:brightness(0) invert(1)}
.links{display:flex;align-items:center;gap:28px;margin-inline-start:52px}
.links>a,.dd>button{height:40px;display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:500;color:#fff;transition:opacity .2s}
.links>a:hover,.dd>button:hover{opacity:.62}
.dd{position:relative}
.dd>button{position:relative}
.dd>button svg{width:12px;height:12px;transition:transform .2s}
/* open state: the homepage meant white 60% + a mint bar (its later Deel rules turn them ink); the kit uses the intended values */
.dd>button[aria-expanded="true"]{color:rgba(255,255,255,.6)}
.dd>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd>button::after{content:"";position:absolute;inset-inline:-6px;bottom:-20px;height:3px;background:var(--mint);opacity:0;transition:opacity .18s}
.dd>button[aria-expanded="true"]::after{opacity:1}
.actions{margin-inline-start:auto;display:flex;align-items:center}
.lang{display:inline-flex;align-items:center;gap:8px;height:40px;font-size:14px;font-weight:600;margin-inline-end:20px;transition:opacity .2s}
.lang:hover{opacity:.62}
.lang svg{width:17px;height:17px}
.actions .lang{color:#fff}
.pill{height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:200px;font-size:15px;font-weight:500;white-space:nowrap;transition:background .2s,box-shadow .2s}
.pill-out{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.26)}
.pill-out:hover{box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.pill-dark{margin-inline-start:16px;background:#fff;color:var(--navy)}
.pill-dark:hover{background:#E6EDFF}
.burger{display:none;width:40px;height:40px;place-items:center;margin-inline-start:12px;color:#fff}
.burger svg{width:22px;height:22px}
.burger .bx{display:none}
body.menu-open .burger .bm{display:none}
body.menu-open .burger .bx{display:block}
/* auto-hide */
#top.top{transition:transform .38s cubic-bezier(.2,.7,.2,1)}
#top.top.hdr-hide{transform:translateY(-100%)}
#top.top.hdr-hide .nav{box-shadow:none}
@media (prefers-reduced-motion:reduce){#top.top{transition:none}}
/* narrower desktops and tablets: the header collapses to the burger */
@media (max-width:1240px){
  .links{display:none}
  .burger{display:grid}
  .actions .lang{display:none}
}
@media (max-width:640px){
  .nav{height:64px}
  .nav-in{padding:0 16px}
  .brand .mark{height:24px}.brand .word{height:19px}
  .actions .pill-out{display:none}
  .pill-dark{margin:0;padding:0 16px}
  .burger{margin-inline-start:6px}
  .burger,.pill-dark{position:relative}
  .burger::after,.pill-dark::after{content:"";position:absolute;inset:-2px}
  .brand{min-height:44px}
}

/* ---------- 12 mega menu (click to open, dimmed page, white panel 8px under the header, cream bar) ---------- */
.mega{position:absolute;top:calc(100% + 8px);left:0;right:0;margin-inline:auto;width:min(1240px,calc(100% - 48px));border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 1.2px 19.2px rgba(27,27,27,.05),0 9.6px 19.2px rgba(27,27,27,.16);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mg-in{display:grid;grid-template-columns:minmax(0,1fr) 400px}
.mg-main{padding:40px 64px 30px;display:grid;grid-template-columns:1fr 1fr;gap:26px 48px;align-content:start}
.mg-feat{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;padding-top:24px;border-top:1px solid var(--line)}
.mg-fc{display:flex;align-items:center;gap:16px;min-height:64px;padding:10px 22px;border-radius:12px;background:#FAFAFA;transition:background .15s}
.mg-fc:hover{background:var(--card)}
.mg-fc b{display:block;font-size:14px;line-height:1.5;font-weight:600;color:var(--ink)}
.mg-fc small{display:block;font-size:12px;line-height:1.5;color:var(--ink70)}
.mg-fc .fx{margin-inline-start:auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.mg-fc .fx i{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(27,27,27,.06),0 3px 8px rgba(27,27,27,.06);font-style:normal;font-size:10px;font-weight:600;color:#55534F;white-space:nowrap}
.mg-fc .fx i:nth-child(2){margin-inline-end:14px}
.mg-fc .fx i span{width:8px;height:8px;border-radius:50%;background:var(--c)}
.mg-fc .fx .fbig{height:28px;padding:0 10px;font-size:13px;color:var(--ink)}
.mg-fc .fx .fbig svg{width:12px;height:12px;color:#1F9E7F}
.mg-eb{font-size:13px;line-height:22px;font-weight:600;color:var(--ink70);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:8px}
.mg-it{display:flex;align-items:center;gap:16px;padding:8px;margin-inline:-8px;border-radius:12px;transition:background .15s}
.mg-it:hover{background:var(--card)}
.mg-it b{display:block;font-size:16px;line-height:1.45;font-weight:600;color:var(--ink)}
.mg-it small{display:block;font-size:14px;line-height:1.5;color:var(--ink70)}
.mg-ph{position:relative;display:block;overflow:hidden;color:#fff;text-align:start}
.mg-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.mg-ph:hover img{transform:scale(1.03)}
.mg-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(5,10,26,.72),rgba(5,10,26,0) 52%)}
.mg-cap{position:absolute;z-index:1;inset-inline:34px;bottom:32px}
.mg-cap b{display:flex;align-items:center;gap:8px;font-size:18px;line-height:1.4;font-weight:600}
.mg-cap small{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.86)}
.mg-bar{display:flex;align-items:center;height:52px;padding-inline:64px 40px;background:var(--bar);font-size:13px;font-weight:500}
.mg-bar>a,.mg-bar>button{padding-inline:12px;line-height:20px;border-inline-start:1px solid rgba(27,27,27,.18)}
.mg-bar>:first-child{padding-inline-start:0;border:0}
.mg-bar>a:hover,.mg-bar>button:hover{text-decoration:underline;text-underline-offset:3px}
.mg-bar .mg-x{margin-inline-start:auto;border:0;display:inline-flex;align-items:center;gap:8px}
.mg-x svg{width:11px;height:11px}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(10,10,12,.34);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.scrim.on{opacity:1;visibility:visible}
@media (max-width:1240px){.mega{display:none}}

/* ---------- 13 mobile menu (white sheet, big rows, drill-down for services, cream bar) ---------- */
.mnav{display:none;position:absolute;top:100%;inset-inline:0;background:#fff;max-height:calc(100svh - var(--toph,155px));overflow-y:auto;overscroll-behavior:contain;box-shadow:0 18px 30px -18px rgba(27,27,27,.25)}
body.menu-open .mnav{display:block}
@media (min-width:1241px){body.menu-open .mnav{display:none}}
.mn-pane{padding:12px 24px 24px;max-width:720px;margin:0 auto}
.mn-pane[hidden]{display:none}
.mn-row{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:47px;padding:9px 6px;font-size:20px;line-height:1.4;font-weight:500;color:var(--ink);border-bottom:1px solid #DADADA;text-align:start}
/* the homepage's .mn-row:last-of-type{border-bottom:0} only ever hit the services button (the last <button>), dropping its divider; the kit keeps every divider */
.mn-row svg{width:16px;height:16px;flex:none}
.mn-pill{display:flex;align-items:center;justify-content:center;height:44px;margin-top:16px;border-radius:200px;box-shadow:inset 0 0 0 2px var(--ink16);font-size:16px;font-weight:500}
.mn-back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:600;color:var(--ink70)}
.mn-back svg{width:16px;height:16px}
.mn-grp{margin-top:16px}
.mn-grp p{font-size:13px;font-weight:600;color:var(--ink70);padding-bottom:8px;border-bottom:1px solid var(--line)}
.mn-grp a{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 0;font-size:17px;font-weight:500}
.mn-grp .mg-ic{width:36px;height:36px;border-radius:10px}
.mn-grp .mg-ic svg{width:18px;height:18px}
.mn-bar{background:var(--bar);padding:16px 24px 18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.mn-links{display:flex;flex-wrap:wrap;justify-content:center;row-gap:6px;font-size:13px;font-weight:500}
.mn-links>*{padding-inline:12px;line-height:24px;border-inline-start:1px solid rgba(27,27,27,.18)}
.mn-links>:first-child{border:0}
.mn-bar .lang{margin:0;height:36px}
@media (max-width:640px){
  .mn-links>*{display:inline-flex;align-items:center;min-height:44px}
  .mn-bar{gap:2px;padding-block:10px 12px}
  .mn-bar .lang{height:44px}
}

/* ---------- 14 footer ---------- */
.ft{background:var(--dark);color:var(--cream)}
.ft-top{display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:48px;font-size:14px;font-weight:600}
.ft-top a:hover,.ft-col a:hover,.ft-legal a:hover{text-decoration:underline;text-underline-offset:3px}
.ft hr{border:0;height:1px;background:var(--c16)}
.ft-hr1{margin-top:46px}
.ft-cols{padding-block:48px 46px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.ft-col h3{font-size:16px;line-height:1.4;font-weight:600;color:var(--cream)}
.ft-col ul{list-style:none;margin-top:14px}
.ft-col li a,.ft-col li button{display:inline-block;padding-block:6px;font-size:14px;line-height:24px;color:var(--cream);text-align:start}
.ft-news{padding-block:48px 52px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;align-items:start}
.ft-brand{display:inline-flex;align-items:center;gap:9px;min-height:44px}
.ft-brand .mark{height:27px}.ft-brand .word{height:21px}
.ft-soc{margin-top:22px;display:flex;gap:16px}
.ft-soc a{width:32px;height:32px;border-radius:50%;background:rgba(250,244,238,.16);display:grid;place-items:center;color:#fff;transition:background .2s}
.ft-soc a:hover{background:rgba(250,244,238,.28)}
.ft-soc svg{width:16px;height:16px}
.ft-nl{grid-column:2/4}
.ft-nl h3{font-size:24px;line-height:1.35;font-weight:600;color:var(--cream)}
.ft-nl p{font-size:24px;line-height:1.35;font-weight:600;color:rgba(250,244,238,.55)}
.ft-form{grid-column:4/6}
.ft-field{position:relative}
.ft-in{width:100%;height:60px;border-radius:200px;border:2px solid var(--ink16);background:#fff;padding-inline:24px 58px;font:inherit;font-size:16px;color:#000}
.ft-in::placeholder{color:#8C8C8C}
.ft-in:focus{outline:none;box-shadow:0 0 0 3px rgba(143,227,198,.6)}
.ft-go{position:absolute;inset-inline-end:7px;top:7px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:background .2s}
.ft-go:hover{background:#3A3A3A}
.ft-go svg{width:18px;height:18px}
.ft-fine{margin-top:16px;font-size:12px;line-height:20px;color:#D9D0CA}
.ft-fine a{font-weight:600;color:#fff}
.ft-err{margin-top:10px;font-size:13px;color:#FFB4A8}
.ft-thanks{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 22px;border-radius:20px;background:rgba(143,227,198,.12);box-shadow:inset 0 0 0 1px rgba(143,227,198,.35)}
.ft-thanks span{width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--navy);display:grid;place-items:center;flex:none}
.ft-thanks span svg{width:16px;height:16px}
.ft-thanks b{display:block;font-size:16px;font-weight:600}
.ft-thanks small{display:block;font-size:13px;color:var(--c85)}
.ft-legal{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px 28px;font-size:12px;line-height:20px;color:#D9D0CA}
.ft-legal nav{display:flex;gap:24px;padding-inline-end:64px}
@media (max-width:1240px){
  .ft-cols{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:40px}
  .ft-news{grid-template-columns:1fr 1fr}
  .ft-nl{grid-column:auto}
  .ft-form{grid-column:1/-1}
}
@media (max-width:640px){
  .ft-top{gap:0 24px;padding-top:22px}
  .ft-hr1{margin-top:30px}
  .ft-cols{grid-template-columns:1fr;padding-block:36px 30px;row-gap:34px}
  .ft-col ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;margin-top:8px}
  .ft-news{grid-template-columns:1fr;padding-block:34px 36px;gap:28px}
  .ft-nl h3,.ft-nl p{font-size:20px}
  .ft-legal{flex-direction:column;align-items:flex-start;gap:4px;padding-block:22px 34px}
  .ft-top a,.ft-legal nav a{display:inline-flex;align-items:center;min-height:44px}
  .ft-col li a,.ft-col li button{padding-block:10px}
  .ft-soc a{width:44px;height:44px}
  .ft-legal nav{gap:24px;padding:0}
}

/* ---------- 15 WhatsApp button + floating expert dock ---------- */
.wa{position:fixed;inset-inline-end:24px;bottom:24px;z-index:45;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.35);transition:transform .25s,bottom .35s,opacity .3s,visibility .3s}
.wa.off{opacity:0;visibility:hidden;transform:translateY(14px)}
.wa:hover{transform:scale(1.06)}
.wa svg{width:30px;height:30px}
.dock{position:sticky;bottom:0;z-index:40;height:106px;margin-top:-106px;padding:0 24px 24px;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}
.expert{pointer-events:auto;display:flex;align-items:center;gap:14px;padding:6px 7px;border-radius:999px;background:linear-gradient(251deg,#D6F5EA 28.2%,#98E3C9 100%);box-shadow:0 12px 32px -14px rgba(11,27,63,.45);transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s}
.dock.off .expert{transform:translateY(150%);opacity:0;pointer-events:none}
.ex-ph{width:70px;height:70px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #fff,0 0 0 3.5px #6FD3B0;flex:none}
.ex-t{font-size:20px;line-height:28px;font-weight:600;color:var(--navy);white-space:nowrap}
@media (max-width:640px){
  .wa{inset-inline-end:16px;bottom:16px;width:52px;height:52px}
  body.dock-on .wa{bottom:33px}
  .dock{height:154px;margin-top:-154px;padding:60px 12px 24px;padding-inline-end:76px;background:linear-gradient(rgba(255,255,255,0),#fff 60px);transition:background .3s}
  .dock.on-dark{background:linear-gradient(rgba(27,27,27,0),#1B1B1B 60px)}
  .dock.off,.dock.on-navy{background:none}
  .expert{gap:8px;padding:9px 8px}
  .ex-ph{width:52px;height:52px}
  .ex-t{display:none}
  .ex-b{height:44px;padding:0 16px;font-size:14px}
}

/* ---------- 16 booking modal (white, r20, pill buttons, 2px hairline fields; 3 steps, 2 under $1,000) ---------- */
.md{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:24px}
.md.open,.md:target{display:flex}
.md-bg{position:absolute;inset:0;background:rgba(10,10,12,.5)}
.md-card{position:relative;width:min(560px,100%);max-height:calc(100svh - 48px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:20px;padding:34px 36px 30px;box-shadow:0 30px 80px -20px rgba(0,0,0,.4)}
.md.open .md-card{animation:mdin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes mdin{from{transform:translateY(10px);opacity:.6}to{transform:none;opacity:1}}
.md-x{position:absolute;top:16px;inset-inline-end:16px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .2s}
.md-x:hover{background:var(--card)}
.md-x svg{width:14px;height:14px}
.md-t{font-size:26px;line-height:1.3;font-weight:600;padding-inline-end:40px}
.md-steps{list-style:none;margin-top:18px;display:flex;gap:8px}
.md-steps li{flex:1;font-size:13px;font-weight:600;color:#9A9895}
.md-steps li::before{content:"";display:block;height:4px;border-radius:4px;background:#ECEAE6;margin-bottom:8px;transition:background .3s}
.md-steps li.on{color:var(--ink)}
.md-steps li.on::before{background:var(--navy)}
.md-steps li[hidden]{display:none}
.md-pane{border:0;margin-top:22px}
.md-pane[hidden]{display:none}
.fld{margin-top:14px}
.fld label,.md-lbl{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:6px}
.fld label i,.md-lbl i{font-style:normal;color:#C2382B}
.fld input{width:100%;height:48px;border-radius:12px;border:2px solid var(--ink16);background:#fff;padding-inline:14px;font:inherit;font-size:15px;color:var(--ink);transition:border-color .2s}
.fld input[dir="ltr"]{text-align:left}
.fld input::placeholder{color:#A3A19D}
.fld input:focus{outline:none;border-color:var(--navy)}
.fld input[aria-invalid="true"]{border-color:#D9534F}
.err{margin-top:6px;font-size:13px;color:#C2382B;min-height:0}
.err:empty{display:none}
.md-hint{font-size:13px;color:#8A8A8A;margin:-2px 0 10px}
.md-chips{display:flex;flex-wrap:wrap;gap:8px}
.md-chip{height:40px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--ink16);font-size:14px;font-weight:500;color:var(--ink);transition:all .15s}
.md-chip:hover{box-shadow:inset 0 0 0 2px rgba(27,27,27,.4)}
.md-chip[aria-pressed="true"],.md-chip[aria-checked="true"]{background:linear-gradient(to bottom left,#CDF3E5,#A9E9D3);box-shadow:none;color:var(--navy);font-weight:600}
.md-sec+.md-sec{margin-top:22px}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.days .dn{font-size:11px;font-weight:600;color:#9A9895;text-align:center;padding-bottom:2px}
.day{height:46px;border-radius:12px;box-shadow:inset 0 0 0 2px var(--ink16);font-size:15px;font-weight:600;color:var(--ink);transition:all .15s}
.day:hover:not(:disabled){box-shadow:inset 0 0 0 2px rgba(27,27,27,.4)}
.day:disabled{box-shadow:none;background:#F4F3F1;color:#BDBAB5;cursor:not-allowed}
.day[aria-checked="true"]{background:var(--navy);color:#fff;box-shadow:none}
.times{display:flex;flex-wrap:wrap;gap:8px}
.md-month{font-size:13px;color:#8A8A8A;margin-bottom:8px}
.md-act{margin-top:26px;display:flex;align-items:center;gap:12px}
.md-next{margin-inline-start:auto;height:51px;padding:0 26px;border-radius:200px;background:var(--ink);color:#fff;font-size:16px;font-weight:600;transition:background .2s}
.md-next:hover{background:#3A3A3A}
.md-back{height:51px;padding:0 20px;border-radius:200px;box-shadow:inset 0 0 0 2px var(--ink16);font-size:16px;font-weight:500}
.md-back[hidden]{display:none}
.md-done{padding:26px 0 6px;text-align:center}
.md-done[hidden]{display:none}
.md-ok{width:64px;height:64px;margin:0 auto;border-radius:50%;background:linear-gradient(to bottom left,#CDF3E5,#A9E9D3);color:var(--navy);display:grid;place-items:center}
.md-ok svg{width:28px;height:28px}
.md-done h2{margin-top:18px;font-size:26px;font-weight:600}
.md-done p{margin:8px auto 0;max-width:360px;font-size:16px;line-height:1.7;color:var(--ink70)}
.md-done .btn-dark{margin-top:24px}
body.md-lock{overflow:hidden}
@media (max-width:640px){
  .md{padding:0;align-items:flex-end}
  .md-card{max-height:92svh;border-radius:20px 20px 0 0;padding:28px 20px 24px}
  .md-t{font-size:22px}
  .day{height:44px;font-size:14px}
  .md-chip{height:44px}
  .md-x{width:44px;height:44px;top:12px;inset-inline-end:12px}
}
@media (prefers-reduced-motion:reduce){.md.open .md-card{animation:none}.tl-panel.in .tl-step p{animation:none}}

/* navy heroes: the header floats on the hero's own sky, so header + hero are one surface (the hero's
   gradient now starts at the very top of the page); the bar turns solid navy once the page scrolls */
body:has(main [data-hero].ph-navy) .top:not(.scrolled) .nav{background:transparent}
main [data-hero].ph-navy{margin-top:-80px;border-top:80px solid transparent;background-origin:border-box}
@media (max-width:640px){main [data-hero].ph-navy{margin-top:-64px;border-top-width:64px}}

/* light heroes: the same idea; at the top the header sits on the hero's own light background with ink
   text and a dark logo, so menu and hero are one colour; once scrolled it is the usual solid navy bar */
body:has(main [data-hero].ph-light) .top:not(.scrolled) .nav{background:transparent}
main [data-hero].ph-light{margin-top:-80px;border-top:80px solid transparent;background-origin:border-box}
@media (max-width:640px){main [data-hero].ph-light{margin-top:-64px;border-top-width:64px}}
body:has(main [data-hero].ph-light) .top:not(.scrolled) :is(.links>a,.dd>button,.actions .lang,.burger){color:#1B1B1B}
body:has(main [data-hero].ph-light) .top:not(.scrolled) .dd>button[aria-expanded="true"]{color:#767676}
body:has(main [data-hero].ph-light) .top:not(.scrolled) .brand img{filter:brightness(0)}
body:has(main [data-hero].ph-light) .top:not(.scrolled) .pill-out{color:#1B1B1B;box-shadow:inset 0 0 0 2px #CFCFCF}
body:has(main [data-hero].ph-light) .top:not(.scrolled) .pill-out:hover{box-shadow:inset 0 0 0 2px #1B1B1B}
body:has(main [data-hero].ph-light) .top:not(.scrolled) .pill-dark{background:#1B1B1B;color:#fff}
.top .nav{transition:box-shadow .25s,background-color .25s}

/* page heroes often re-declare their background shorthand (which resets the origin): keep the hero sky under the header */
main [data-hero]:is(.ph-navy,.ph-light){background-origin:border-box!important;background-clip:border-box!important}