/* ============================================================
   SKY Company Start Up — pale teal #82B4AA + pastel yellow #E6B45A + charcoal #1A1A1A
   Shared across the Company Startup section and its sub-pages
   ============================================================ */
:root{
  /* brand: pale teal #82B4AA, pastel yellow #E6B45A, charcoal #1A1A1A.
     --gold* keep their names because inline styles reference var(--gold-lt).
     --gold is a deepened teal so accent TEXT stays legible on light surfaces. */
  --teal:#82B4AA; --yellow:#E6B45A; --yellow-dk:#D9A241; --charcoal:#1A1A1A;
  --gold:#3E6E64; --gold-lt:#82B4AA; --gold-dk:#2C5249;
  --navy:#1A1A1A; --ink:#2E2E2E; --muted:#5A5A5A; --line:#DCE8E5;
  --bg:#F6FAF9; --bg2:#E9F2F0; --card:#FFFFFF;
  --font:'Manrope','Segoe UI',system-ui,sans-serif; --disp:'Marcellus',Georgia,serif;
  /* Total height of the sticky top bar, including its 1px bottom border.
     .sec-nav sticks directly underneath it and reads the same value, so the
     two bars always meet flush — change the bar height here and nowhere else. */
  --hdr-h:95px;
}
@media(max-width:940px){ :root{ --hdr-h:80px } }
@media(max-width:720px){ :root{ --hdr-h:72px } }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:min(1180px,92vw);margin:0 auto}
h1,h2,h3{font-family:var(--disp);font-weight:400;color:var(--navy);line-height:1.16}
.kicker{color:var(--gold);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.74rem}
section{padding:64px 0;scroll-margin-top:120px}
.sec-head{text-align:center;max-width:680px;margin:0 auto 40px}
.sec-head h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:10px}
.sec-head p{color:var(--muted);margin-top:10px}
.alt{background:linear-gradient(180deg,#8ABBB1,#82B4AA)}   /* brand pale teal band */
/* Text sitting directly on a pale teal band (inline styles are overridden on purpose) */
.alt > .wrap > .kicker,
.alt > .wrap > .sec-head > .kicker,
.alt > .wrap.two-col > div > .kicker{color:#17403A !important}
.alt > .wrap > h2,
.alt > .wrap > h3,
.alt > .wrap > .sec-head > h2,
.alt > .wrap.two-col > div > h2{color:#1A1A1A !important}
.alt > .wrap > p,
.alt > .wrap > .sec-head > p,
.alt > .wrap.two-col > div > p{color:#2E2E2E !important}
.alt > .wrap > .checks li,
.alt > .wrap.two-col > div > .checks li{color:#2E2E2E}
.alt > .wrap > .checks li::before,
.alt > .wrap.two-col > div > .checks li::before{color:#17403A}

/* Numbered benefit grid (e.g. "Why Outsource VAT?") */
.numgrid{display:grid;grid-template-columns:1fr 1fr;gap:34px 48px}
.numitem{position:relative;padding-top:8px}
.numitem .numbig{display:block;font-family:var(--disp);font-size:4.2rem;line-height:.9;color:rgba(230,180,90,.42);margin-bottom:6px}
.numitem h3{font-size:1.28rem;margin-bottom:8px}
.numitem p{color:var(--muted);font-size:.95rem;max-width:46ch}
@media(max-width:760px){ .numgrid{grid-template-columns:1fr;gap:26px} }

.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:8px;font-weight:700;
  font-size:.82rem;letter-spacing:.04em;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s,color .2s}
.btn-gold{background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));color:var(--charcoal);box-shadow:0 10px 24px rgba(230,180,90,.42)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(230,180,90,.52)}
.btn-ghost{background:var(--card);color:var(--navy);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}

/* ---- Header + dropdown nav ---- */
header.top{position:sticky;top:0;z-index:60;background:#FDFDFF;border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
header.top .wrap{width:min(1400px,97vw);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0;min-height:calc(var(--hdr-h) - 1px)}
header.top img.logo{height:100px;width:auto;flex:none;display:block}
.brandzone{display:flex;align-items:center;gap:8px;flex:none}
@media(max-width:940px){ header.top img.logo{height:82px} }
nav.svc{display:flex;align-items:center}
nav.svc>.item{position:relative}
nav.svc>.item>a{display:inline-block;padding:26px 10px;font-weight:600;font-size:.84rem;color:var(--ink);white-space:nowrap;transition:color .2s}
nav.svc>.item:hover>a{color:var(--gold)}
nav.svc>.item.caret>a::after{content:"▾";margin-left:6px;font-size:1em;color:var(--gold)}
nav.svc .drop{position:absolute;top:100%;left:0;min-width:236px;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 18px 40px rgba(26,26,26,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
nav.svc>.item:hover .drop{opacity:1;visibility:visible;transform:translateY(0)}
nav.svc .drop a{display:block;padding:10px 14px;border-radius:7px;font-size:.9rem;color:var(--ink);transition:background .2s,color .2s}
nav.svc .drop a:hover{background:var(--bg2);color:var(--gold)}
/* nested flyout (Free Zone -> Dubai/Sharjah/Ajman -> zones) */
nav.svc .drop .subitem{position:relative}
nav.svc .drop .subitem>a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:7px;color:var(--ink);font-size:.9rem;font-weight:600;transition:background .2s,color .2s}
nav.svc .drop .subitem>a::after{content:"\203A";color:var(--gold);font-size:1.1em;line-height:1}
nav.svc .drop .subitem>a:hover{background:var(--bg2);color:var(--gold)}
nav.svc .drop .flyout{position:absolute;top:-9px;left:100%;min-width:238px;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 18px 40px rgba(26,26,26,.16);padding:8px;opacity:0;visibility:hidden;transform:translateX(8px);transition:.2s;z-index:5}
nav.svc .drop .subitem:hover > .flyout{opacity:1;visibility:visible;transform:translateX(0)}
nav.svc .drop .flyout a{display:block;padding:10px 14px;border-radius:7px;font-size:.9rem;color:var(--ink);font-weight:500;transition:background .2s,color .2s}
nav.svc .drop .flyout a:hover{background:var(--bg2);color:var(--gold)}
/* third level: Free Zone > emirate > zone */
nav.svc .drop .flyout .subitem>a{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700}
nav.svc .drop .flyout .flyout a{font-weight:500}

.top-cta{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.menu-btn span{width:26px;height:3px;background:var(--navy);border-radius:2px}

/* ---- Hero (image background) ---- */
/* The hero fills exactly one screenful (viewport minus the sticky top bar) so
   the next section's background never bleeds into the first view.
   min-height, not height: if the content is taller than the screen the hero
   grows instead of clipping. 100svh keeps it honest on phones, where the
   browser's URL bar makes 100vh taller than what you can actually see. */
.hero-bg{
  position:relative;color:#fff;overflow:hidden;background:#1A1A1A;
  display:flex;align-items:center;
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h));
}
.hero-bg .hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
.hero-bg .hero-overlay{position:absolute;inset:0;background:linear-gradient(rgba(26,26,26,.54),rgba(26,26,26,.68));z-index:1}
.hero-bg .wrap{padding:96px 0;position:relative;z-index:2}
.hero-bg h1{color:#fff;font-size:clamp(2.2rem,4.8vw,3.5rem);max-width:18ch}
.hero-bg p.sub{color:#E4EBE9;font-size:1.14rem;margin:18px 0 28px;max-width:56ch}
.hero-bg .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-bg .badges{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px}
.hero-bg .badges b{display:block;font-family:var(--disp);font-size:1.7rem;color:var(--gold-lt)}
.hero-bg .badges span{color:#C4D3D0;font-size:.82rem}

/* ---- Hero-lite (sub pages) ---- */
.hero-lite{background:linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:1px solid var(--line)}
.hero-lite .wrap{padding:60px 0}
.hero-lite h1{font-size:clamp(1.9rem,4vw,2.9rem);margin-top:8px}
.hero-lite p.sub{color:var(--muted);font-size:1.1rem;margin:14px 0 24px;max-width:58ch}
.crumb{display:inline-flex;gap:8px;color:var(--muted);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.crumb a:hover{color:var(--gold)}

/* ---- Cards / grids ---- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(26,26,26,.1);border-color:var(--gold)}
.card .ic{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));margin-bottom:16px}
.card .ic svg{width:26px;height:26px;stroke:var(--charcoal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.15rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.92rem}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px}
.step .n{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));color:var(--charcoal);font-family:var(--disp);font-size:1.3rem;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3{font-size:1.15rem;margin-bottom:6px}
.step p{color:var(--muted);font-size:.92rem}

.checks{list-style:none;display:grid;gap:12px}
.checks li{padding-left:30px;position:relative;color:var(--ink)}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:800}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 26px;text-align:center;position:relative}
.plan.feat{border-color:var(--gold);box-shadow:0 0 0 1px rgba(230,180,90,.40),0 20px 44px rgba(26,26,26,.12)}
.plan .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));color:var(--charcoal);font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.plan h3{font-size:1.4rem}
.plan .for{color:var(--muted);font-size:.88rem;margin:4px 0 18px}
.plan ul{list-style:none;display:grid;gap:10px;text-align:left;margin-bottom:22px}
.plan li{padding-left:26px;position:relative;color:var(--ink);font-size:.92rem}
.plan li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:800}

.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0 22px;background:var(--card)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;color:var(--navy);display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:1.4rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:var(--muted);padding:0 0 20px;font-size:.94rem}

/* ---- Contact ---- */
.contact{background:var(--navy);color:#D8E2E0}
.contact h2{color:#fff}
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.contact a{color:#fff;border-bottom:1px dashed rgba(255,255,255,.35)}
.contact .rows{display:grid;gap:14px;margin-top:16px}
.contact .rows b{color:var(--gold-lt)}

footer.f{background:#111111;color:#9FAFAC;text-align:center;padding:26px 0;font-size:.85rem}

.qband{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:linear-gradient(135deg,#FFFFFF,#EAF3F1);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:16px;padding:34px 38px;box-shadow:0 14px 34px rgba(26,26,26,.07)}
.qband h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.qband p{color:var(--muted);margin-top:6px;max-width:52ch}
.qband .btn{white-space:nowrap}

/* --- Hero: single column (the Let's Talk call-back form was removed) --- */
.hero-two{display:grid;grid-template-columns:1fr;gap:0;align-items:center}
.hero-two .hero-copy{max-width:820px}
.hero-form{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.42);color:var(--ink)}
.hero-form .hf-title{text-align:center;color:var(--navy);font-family:var(--disp);font-size:1.7rem;padding:18px 18px 10px}
.hero-form .hf-bar{background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));color:var(--charcoal);text-align:center;padding:11px;font-weight:700;letter-spacing:.02em}
.hero-form .hf-body{padding:24px 26px 26px}
.hero-form input,.hero-form select,.hero-form textarea{width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;padding:12px 2px;margin-bottom:16px;font-family:var(--font);font-size:.95rem;color:var(--ink)}
.hero-form input::placeholder,.hero-form textarea::placeholder{color:#8A9A97}
.hero-form input:focus,.hero-form select:focus,.hero-form textarea:focus{outline:none;border-bottom-color:var(--gold)}
.hero-form select{cursor:pointer}
.hero-form textarea{resize:vertical;min-height:60px}
.hf-phone{display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--line);margin-bottom:16px}
.hf-phone .hf-cc{white-space:nowrap;color:var(--ink);font-weight:600;font-size:.95rem}
.hf-phone input{border:0;margin:0;flex:1}
.hf-note{font-size:.72rem;color:var(--muted);text-align:center;margin:2px 0 16px}
.hf-submit{width:100%;background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));color:var(--charcoal);border:0;padding:15px;border-radius:10px;font-weight:800;font-size:1.02rem;cursor:pointer;box-shadow:0 12px 26px rgba(230,180,90,.45);transition:filter .2s,transform .2s}
.hf-submit:hover{filter:brightness(1.07);transform:translateY(-2px)}
/* Let's Talk form on image-background heroes (home, free zone, mainland):
   clean white panel (glare removed) with a bright edge and strong lift */
.hero-bg .hero-form{background:linear-gradient(180deg,#FFFFFF 0%,#F2F8F6 55%,#E3EDEA 100%);border:1px solid rgba(255,255,255,.95);box-shadow:0 30px 62px rgba(0,0,0,.45),inset 0 1px 0 #ffffff}
.hero-bg .hero-form .hf-title{color:var(--navy)}

/* Let's Talk form on the light sub-page heroes: lighter card shadow to suit the pale background */
.hero-lite .hero-two{align-items:start}
.hero-lite .hero-form{box-shadow:0 18px 44px rgba(26,26,26,.14);border:1px solid var(--line)}
@media(max-width:900px){ .hero-two{grid-template-columns:1fr;gap:32px} }

/* --- Quote pop-up modal --- */
.sky-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
.sky-modal.open{display:flex}
.sky-modal__backdrop{position:fixed;inset:0;background:rgba(26,26,26,.76);backdrop-filter:blur(3px)}
.sky-modal__card{position:relative;z-index:1;width:min(460px,96vw);background:var(--card);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5);animation:skyPop .3s ease}
@keyframes skyPop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.sky-modal__close{position:absolute;top:10px;right:12px;z-index:3;background:rgba(255,255,255,.92);border:0;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;cursor:pointer;color:var(--navy);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.sky-modal__close:hover{background:#fff;color:var(--gold)}
.sky-modal__banner{background:linear-gradient(135deg,#1A1A1A,#2C5249);color:#fff;padding:26px 26px 18px}
.sky-modal__banner .smb-kick{color:var(--gold-lt);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:.72rem}
.sky-modal__banner h3{color:#fff;font-family:var(--disp);font-size:1.5rem;margin:6px 0}
.sky-modal__banner p{color:#D8E2E0;font-size:.9rem}
.sky-modal__badges{display:flex;gap:18px;flex-wrap:wrap;background:#111111;color:#C4D3D0;padding:11px 26px;font-size:.8rem}
.sky-modal .modal-form{background:transparent;box-shadow:none;border-radius:0}
.sky-modal .modal-form .hf-body{padding:22px 26px 26px}

.wa{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;z-index:99;box-shadow:0 12px 28px rgba(37,211,102,.45)}
.wa:hover{background:#128c7e}
.wa svg{width:30px;height:30px;fill:#fff}

@media(max-width:940px){
  /* The mobile panel expands every dropdown inline, so it runs far taller than
     the screen. Cap it to the space under the sticky header and let it scroll
     on its own, otherwise the items past the fold can't be reached. */
  nav.svc{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--card);border-bottom:1px solid var(--line);padding:8px 6vw 16px;box-shadow:0 16px 30px rgba(26,26,26,.12);
    max-height:calc(100vh - var(--hdr-h));max-height:calc(100svh - var(--hdr-h));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  nav.svc.open{display:flex}
  nav.svc>.item>a{padding:12px 6px}
  header.top img.logo{height:78px}
  nav.svc .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:0 0 6px 10px;padding:0 0 0 8px;min-width:0}
  nav.svc .drop .flyout{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-left:2px solid var(--line);border-radius:0;margin:0 0 6px 10px;padding:0 0 0 8px;min-width:0}
  nav.svc .drop .subitem>a::after{display:none}
  .menu-btn{display:flex}
  header.top .wrap{position:relative}
  .hero-bg{background-attachment:scroll}
  .two-col,.contact .wrap{grid-template-columns:1fr}
  .g3,.g4,.steps,.pricing{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .g2,.g3,.g4,.steps,.pricing{grid-template-columns:1fr}
  header.top img.logo{height:62px}
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){*{transition:none!important;scroll-behavior:auto!important}}

/* --- 3-column numbered grid (Why Choose <Free Zone>?) --- */
.numgrid.cols3{grid-template-columns:repeat(3,1fr);gap:30px 40px}
.numgrid.compact .numitem{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:center;padding-top:0}
.numgrid.compact .numitem .numbig{font-size:3.6rem;margin:0;line-height:1}
.numgrid.compact .numitem h3{font-size:1.05rem;margin:0;line-height:1.35;font-family:var(--font);font-weight:700}
.numgrid.compact .numitem p{margin-top:4px;font-size:.9rem}
@media(max-width:980px){ .numgrid.cols3{grid-template-columns:1fr 1fr} }
@media(max-width:700px){ .numgrid.cols3{grid-template-columns:1fr} }

/* --- Table wrapper (horizontal scroll container for wide tables) --- */
.tablewrap{overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:12px;background:var(--card)}

/* --- Ordered process list (numbered steps in body copy) --- */
.proclist{list-style:none;display:grid;gap:18px;margin-top:22px;counter-reset:proc}
.proclist li{position:relative;padding-left:56px;counter-increment:proc}
.proclist li::before{content:counter(proc);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));color:var(--charcoal);font-family:var(--disp);font-size:1.1rem;
  display:flex;align-items:center;justify-content:center}
.proclist li b{display:block;color:var(--navy);font-size:1.04rem;margin-bottom:3px}
.proclist li span{color:var(--muted);font-size:.94rem}
/* on a pale teal band */
.alt .proclist li b{color:#1A1A1A}
.alt .proclist li span{color:#2E2E2E}
.alt .proclist li::before{background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));color:var(--charcoal)}

/* --- Key Features table (2-column label / description, no header row) --- */
table.feattable{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem}
table.feattable th{width:30%;text-align:left;vertical-align:top;padding:20px 22px;color:var(--navy);
  font-weight:800;font-family:var(--font);border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
table.feattable td{padding:20px 22px;vertical-align:top;color:var(--ink);border-bottom:1px solid var(--line)}
table.feattable tr:last-child th,table.feattable tr:last-child td{border-bottom:0}
@media(max-width:620px){
  table.feattable{min-width:0}
  table.feattable th,table.feattable td{display:block;width:100%;border-right:0}
  table.feattable th{padding-bottom:2px;border-bottom:0}
  table.feattable td{padding-top:4px}
}

/* --- Phone number in the header --- */
.top-phone{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:var(--charcoal);
  padding:9px 14px;border:1.5px solid transparent;border-radius:999px;white-space:nowrap;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));box-shadow:0 10px 24px rgba(230,180,90,.42);
  transition:transform .2s,box-shadow .2s,filter .2s}
.top-phone svg{width:17px;height:17px;fill:none;stroke:var(--charcoal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.top-phone:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(230,180,90,.52);filter:brightness(1.03)}
/* "Call Us" is short, so the label survives much further down than the number did */
@media(max-width:820px){ .top-phone span{display:none} .top-phone{padding:9px 11px} }

/* --- "Let's Talk" form slides in from the right --- */
@keyframes skySlideInRight{
  from{opacity:0;transform:translateX(90px)}
  to{opacity:1;transform:translateX(0)}
}
@keyframes skyFadeIn{ from{opacity:0} to{opacity:1} }
/* the class is added by js/sky-anim.js when the form scrolls into view.
   Without JS the form simply shows as normal - it is never left hidden. */
.hero-two .hero-form.sky-slide{animation:skySlideInRight .9s cubic-bezier(.22,.61,.36,1) both}
/* motion-sensitive visitors get a plain fade instead of the travel */
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .hero-two .hero-form.sky-slide{animation:skyFadeIn .45s ease both}
}

/* --- Free Zone licence sections: make the licence-type names bold --- */
section[id*="licens"] .card h3{font-weight:700}

/* --- Onboarding: big, clear, line-by-line bullet list --- */
.stepflow{list-style:none;max-width:900px;margin:6px auto 0;display:grid;gap:20px}
.stepflow li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 30px 26px 66px}
.stepflow li::before{content:"";position:absolute;left:28px;top:34px;width:16px;height:16px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));box-shadow:0 0 0 6px rgba(230,180,90,.22)}
.stepflow li b{display:block;font-family:var(--disp);font-size:1.55rem;color:var(--navy);margin-bottom:6px;line-height:1.2}
.stepflow li span{color:var(--muted);font-size:1.08rem}
@media(max-width:560px){
  .stepflow li{padding:22px 20px 22px 54px}
  .stepflow li::before{left:22px;top:28px}
  .stepflow li b{font-size:1.3rem}
}

/* --- Prominent brand name on the home hero --- */
.hero-bg .brandname{font-family:var(--disp);color:var(--yellow);font-size:clamp(2rem,4.4vw,3.1rem);
  line-height:1.12;letter-spacing:.01em;margin-bottom:12px;text-shadow:0 2px 20px rgba(0,0,0,.55)}

/* --- Home hero: the skyline image fully covers the whole hero area --- */
.hero-bg.hero--home .hero-bg-img{object-fit:cover;object-position:center 28%}

/* --- Thick gold outline on all content boxes, across every band --- */
.card,.step,.plan,.plan.feat,.faq details,.tablewrap,.stepflow li{border:2.5px solid var(--yellow)}
.card:hover,.step:hover{border-color:var(--yellow-dk)}

/* --- Gold footer tagline --- */
footer.f .foot-tag{color:var(--yellow);font-weight:600}

/* ============================================================
   SKY Company Setup home (services/company-startup.html) only
   ============================================================ */
/* Hero type sizes swapped: the company name now leads, and sits a step
   larger than the strapline. Scoped to .hero--home so the other
   services pages keep their original h1 scale. */
.hero-bg.hero--home .brandname{
  font-size:clamp(1.7rem,3.6vw,2.7rem);
  line-height:1.1;
  margin-bottom:14px;
  max-width:none;
  white-space:nowrap;
}
@media(max-width:560px){
  .hero-bg.hero--home .brandname{font-size:clamp(1.35rem,6.6vw,1.9rem)}
}
.hero-bg.hero--home h1{
  font-size:clamp(2rem,4.4vw,3.1rem);
  max-width:22ch;
}

/* "Let's Talk" panel slides in slowly from the right */
@keyframes hfSlideInRight{
  from{ opacity:0; transform:translateX(calc(100% + 80px)); }
  60% { opacity:1; }
  to  { opacity:1; transform:translateX(0); }
}
.hero-bg.hero--home .hero-form{
  animation:hfSlideInRight 1.9s cubic-bezier(.22,.61,.36,1) .3s both;
  will-change:transform,opacity;
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .hero-bg.hero--home .hero-form{ animation:none; opacity:1; transform:none; }
}

/* Logo sits further right on the SKY Company Setup home page, so it reads as
   part of the menu row rather than tucked against the back arrow. */
/* (logo position is now shared by every page — see .brandzone in the brand lockup block) */

/* ============================================================
   MOTION LAYER
   Everything here is additive: each element's resting state is its
   normal, fully-visible one. js/sky-anim.js adds the .sky-in class
   as a block scrolls into view, and only then does the keyframe run
   (starting from hidden and landing on the resting state). If the
   script never runs, the page simply shows with no animation --
   nothing is ever left invisible.
   ============================================================ */

@keyframes skyRise{ from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes skyRiseSm{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes skyFromLeft{ from{opacity:0;transform:translateX(-28px)} to{opacity:1;transform:none} }
@keyframes skyPopIn{ from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} }

/* Below-fold blocks are hidden by JS (js/sky-anim.js) until they scroll in,
   so they slide in cleanly instead of flashing hidden-then-visible. Added by
   script only — with no JS the class is never set and everything stays visible. */
.sky-armed{ opacity:0 }
.sky-in{ animation:skyRise .72s cubic-bezier(.22,.61,.36,1) both; animation-delay:var(--sky-d,0ms) }
.sky-in--sm{ animation-name:skyRiseSm }
.sky-in--left{ animation-name:skyFromLeft }
.sky-in--pop{ animation-name:skyPopIn; animation-duration:.5s }

/* --- Hero entrance: the stack lifts in one beat after another --- */
.hero-bg .kicker,
.hero-bg h1,
.hero-bg .sub,
.hero-bg .cta,
.hero-bg .crumb{ animation:skyRise .8s cubic-bezier(.22,.61,.36,1) both }
.hero-bg .crumb{ animation-delay:.05s }
.hero-bg .kicker{ animation-delay:.16s }
.hero-bg h1{ animation-delay:.28s }
.hero-bg .sub{ animation-delay:.40s }
.hero-bg .cta{ animation-delay:.52s }

/* The hero photograph drifts almost imperceptibly, so the banner never
   feels like a flat still. */
@keyframes skyDrift{ from{transform:scale(1.04)} to{transform:scale(1.11)} }
.hero-bg .hero-bg-img{ animation:skyDrift 26s ease-in-out infinite alternate; will-change:transform }

/* --- Cards --- */
/* The icon tile answers the hover before the card has finished lifting. */
.card .ic{ transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s }
.card:hover .ic{ transform:translateY(-3px) rotate(-6deg) scale(1.06); box-shadow:0 10px 20px rgba(230,180,90,.42) }
.card .ic svg{ transition:transform .3s }
.card:hover .ic svg{ transform:scale(1.08) }

/* A card that is a link earns an arrow -- it slides out of the heading on
   hover, so clickable cards read differently from plain ones. */
a.card h3{ transition:color .25s }
a.card:hover h3{ color:var(--gold) }
a.card h3::after{
  content:"\2192"; display:inline-block; margin-left:.4em;
  opacity:0; transform:translateX(-6px);
  color:var(--gold); font-family:var(--font); font-weight:700;
  transition:opacity .28s, transform .28s cubic-bezier(.22,.61,.36,1);
}
a.card:hover h3::after{ opacity:1; transform:translateX(0) }

/* --- Nav: a gold rule grows out from the middle on hover --- */
nav.svc>.item>a{ position:relative }
nav.svc>.item>a::before{
  content:""; position:absolute; left:50%; right:50%; bottom:18px; height:2px;
  background:var(--gold); border-radius:2px;
  transition:left .28s cubic-bezier(.22,.61,.36,1), right .28s cubic-bezier(.22,.61,.36,1);
}
nav.svc>.item:hover>a::before{ left:10px; right:10px }

/* --- Buttons: a light sweeps across the gold on hover --- */
.btn-gold{ position:relative; overflow:hidden }
.btn-gold::after{
  content:""; position:absolute; top:0; left:-140%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); pointer-events:none;
}
.btn-gold:hover::after{ animation:skySheen .75s ease }
@keyframes skySheen{ to{ left:150% } }

.btn-ghost{ transition:border-color .2s,color .2s,transform .2s,background .2s }
.btn-ghost:hover{ transform:translateY(-2px) }

/* --- Header "Call Us": a slow halo, so the one action in the bar is findable
   without it ever becoming a flashing distraction. --- */
@keyframes skyCallHalo{
  0%,100%{ box-shadow:0 10px 24px rgba(230,180,90,.42), 0 0 0 0 rgba(230,180,90,.5) }
  55%    { box-shadow:0 10px 24px rgba(230,180,90,.42), 0 0 0 12px rgba(230,180,90,0) }
}
.top-phone{ animation:skyCallHalo 4.5s ease-out 1.5s infinite }
.top-phone:hover{ animation-play-state:paused }
/* the handset gives a small ring on hover */
@keyframes skyRing{ 0%,100%{transform:rotate(0)} 20%{transform:rotate(-14deg)} 40%{transform:rotate(12deg)} 60%{transform:rotate(-8deg)} 80%{transform:rotate(5deg)} }
.top-phone:hover svg{ animation:skyRing .6s ease }

/* --- Numbered "why us" column and step flow --- */
.numitem .numbig{ transition:color .3s, transform .3s }
.numitem:hover .numbig{ color:rgba(230,180,90,.85); transform:translateY(-3px) }

.stepflow li{ transition:transform .25s, box-shadow .25s, border-color .25s }
.stepflow li:hover{ transform:translateX(6px); box-shadow:0 14px 30px rgba(26,26,26,.09) }
.stepflow li::before{ transition:transform .25s }
.stepflow li:hover::before{ transform:scale(1.35) }

.step{ transition:transform .25s, box-shadow .25s, border-color .25s }
.step:hover{ transform:translateY(-6px); box-shadow:0 18px 38px rgba(26,26,26,.1) }
.step .n{ transition:transform .3s cubic-bezier(.22,.61,.36,1) }
.step:hover .n{ transform:rotate(-8deg) scale(1.08) }

/* the tick marks draw attention one at a time as the list arrives */
.checks li::before{ transition:transform .25s }
.checks li:hover::before{ transform:scale(1.3) }

/* --- Quote band --- */
.qband{ transition:box-shadow .3s }
.qband:hover{ box-shadow:0 20px 44px rgba(26,26,26,.10) }

/* --- Motion-sensitive visitors: hold everything still. The resting state is
   already the visible one, so nothing is lost by switching it all off. --- */
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .sky-in,
  .hero-bg .kicker, .hero-bg h1, .hero-bg .sub, .hero-bg .cta, .hero-bg .crumb,
  .hero-bg .hero-bg-img, .top-phone, .top-phone:hover svg, .btn-gold:hover::after{
    animation:none!important;
  }
}

/* --- Bold inside display headings ------------------------------------------
   Marcellus ships a single weight (400). Putting <b> around a heading therefore
   changes nothing on its own: the browser has no heavier face to switch to and
   leaves the glyph metrics byte-identical, so "Individual Shareholder(s)" read
   exactly like every other card title. Thickening the strokes is what a reader
   actually perceives as bold, so that is what the display face gets.

   Body copy is Manrope, which does carry a real 700 -- <b> in a list item or a
   paragraph is left alone to use it. */
.card h3 b{
  font-weight:700;
  -webkit-text-stroke:.6px currentColor;
}

/* ============================================================================
   MULTI-YEAR LICENCE DISCOUNT
   A promotional offer that appears in three places: the hero of every Free Zone
   page, the "Let's Talk" enquiry form on those pages, and a band on the
   Company Start Up home page that summarises the offer across all zones.

   The rate is written into the markup per page rather than driven by CSS, so a
   single zone can carry a different number without a special-case rule here.
   ========================================================================== */

/* --- Hero pill: sits above the buttons, on the photographic hero ---------- */
.offer-pill{
  display:inline-flex;align-items:center;gap:12px;
  margin:0 0 20px;padding:8px 20px 8px 8px;border-radius:999px;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));
  color:var(--charcoal);font-size:.95rem;font-weight:700;line-height:1.3;
  box-shadow:0 14px 30px rgba(230,180,90,.45);
  max-width:100%;
}
.offer-pill .op-pct{
  flex:none;display:inline-grid;place-items:center;
  min-width:56px;padding:7px 12px;border-radius:999px;
  background:var(--charcoal);color:var(--yellow);
  font-family:var(--disp);font-size:1.12rem;line-height:1;letter-spacing:.01em;
}
@media(max-width:520px){
  .offer-pill{font-size:.88rem;gap:9px;padding-right:15px}
  .offer-pill .op-pct{min-width:50px;font-size:1rem;padding:6px 10px}
}

/* Qualifier stacked above the rate ("Upto" / "Flat"), so the dark badge
   becomes a true circle holding two lines instead of a one-line pill. */
.offer-pill .op-pct{
  width:62px;height:62px;min-width:0;padding:0;border-radius:50%;
  grid-auto-rows:auto;align-content:center;row-gap:3px;
}
.offer-pill .op-tag{
  display:block;font-family:var(--font);font-size:.58rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;line-height:1;color:#fff;
}
@media(max-width:520px){
  .offer-pill .op-pct{width:56px;height:56px;padding:0;font-size:1rem}
  .offer-pill .op-tag{font-size:.54rem}
}

/* --- Strip inside the "Let's Talk" form ---------------------------------- */
/* The bar directly above it is already gold, so this one goes dark: two gold
   strips stacked would read as one block and the offer would disappear. */
.hero-form .hf-offer{
  background:linear-gradient(135deg,#1450FF,#0B3BD6 45%,#08268F);color:#fff;text-align:center;
  padding:11px 14px;font-size:.88rem;font-weight:600;letter-spacing:.01em;
}
.hero-form .hf-offer b{color:var(--yellow);font-weight:800}

/* --- Band on the Company Start Up home page ------------------------------ */
.offer-band{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3vw,36px);flex-wrap:wrap;text-align:center;
  border-radius:16px;padding:clamp(20px,3vw,28px) clamp(20px,3vw,34px);
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));
  color:var(--charcoal);box-shadow:0 18px 40px rgba(230,180,90,.42);
}
.offer-band .ob-item{display:flex;align-items:center;gap:14px;text-align:left}
.offer-band .ob-pct{
  flex:none;display:inline-grid;place-items:center;
  min-width:74px;padding:10px 14px;border-radius:12px;
  background:var(--charcoal);color:var(--yellow);
  font-family:var(--disp);font-size:1.5rem;line-height:1;
}
.offer-band .ob-text{font-size:.95rem;font-weight:600;line-height:1.45}
.offer-band .ob-text b{display:block;font-family:var(--disp);font-weight:400;font-size:1.15rem;margin-bottom:2px}
.offer-band .ob-sep{width:1px;align-self:stretch;min-height:44px;background:rgba(26,26,26,.24)}
.offer-band .ob-note{flex-basis:100%;font-size:.83rem;opacity:.8}

@media(max-width:760px){
  .offer-band{flex-direction:column;align-items:stretch;gap:16px}
  .offer-band .ob-sep{width:auto;height:1px;min-height:0}
  .offer-band .ob-item{justify-content:flex-start}
}

/* --- Company Setup: top section spacing after hero removed --------------- */
.hubs-top{padding-top:clamp(40px,6vw,72px)}

/* --- Enhanced promotional discount band --------------------------------- */
.offer-band--promo{
  position:relative;overflow:hidden;
  justify-content:space-between;gap:clamp(16px,3vw,30px);
  background:linear-gradient(120deg,#F3C877 0%,var(--yellow) 42%,var(--yellow-dk) 100%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 22px 46px rgba(217,162,65,.45),inset 0 1px 0 rgba(255,255,255,.6);
}
/* soft diagonal sheen sweeping across the band */
.offer-band--promo::before{
  content:"";position:absolute;top:0;left:-30%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:obSheen 5.5s ease-in-out 1.2s infinite;
  pointer-events:none;
}
@keyframes obSheen{0%{left:-40%}55%,100%{left:130%}}
.offer-band--promo .ob-tag{
  position:absolute;top:0;left:0;
  font-family:var(--font);font-weight:800;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--yellow);background:var(--charcoal);
  padding:6px 14px;border-radius:0 0 12px 0;box-shadow:0 6px 14px rgba(26,26,26,.28);
}
.offer-band--promo .ob-item{gap:18px;align-items:center;padding-top:12px}
.offer-band--promo .ob-pct{
  flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:88px;padding:12px 16px;border-radius:14px;line-height:1;
  background:var(--charcoal);color:var(--yellow);
  box-shadow:0 10px 22px rgba(26,26,26,.32),inset 0 1px 0 rgba(255,255,255,.12);
}
.offer-band--promo .ob-pct-num{font-family:var(--disp);font-size:2rem;letter-spacing:.01em}
.offer-band--promo .ob-pct-lbl{font-family:var(--font);font-weight:800;font-size:.72rem;letter-spacing:.22em;margin-top:3px}
.offer-band--promo .ob-text{color:var(--charcoal)}
.offer-band--promo .ob-text b{font-size:1.28rem}
.offer-band--promo .ob-cta{
  position:relative;flex:none;white-space:nowrap;
  font-family:var(--font);font-weight:800;font-size:.92rem;
  color:var(--yellow);background:var(--charcoal);
  padding:13px 22px;border-radius:12px;
  box-shadow:0 12px 26px rgba(26,26,26,.3);
  transition:transform .2s,box-shadow .2s,filter .2s;
}
.offer-band--promo .ob-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(26,26,26,.42);filter:brightness(1.08)}
@media(max-width:760px){
  .offer-band--promo{flex-direction:column;align-items:stretch;text-align:center}
  .offer-band--promo .ob-item{flex-direction:column;text-align:center;padding-top:22px}
  .offer-band--promo .ob-cta{align-self:center}
}

/* --- "See more" free-zones card ----------------------------------------- */
.card--seemore{display:flex !important;flex-direction:column;justify-content:center;
  background:linear-gradient(135deg,var(--gold-dk),var(--gold));border-color:var(--gold-dk)}
.card--seemore h3{color:#fff}
.card--seemore p{color:rgba(255,255,255,.9)}
.card--seemore .seemore-link{display:inline-block;margin-top:14px;font-weight:800;color:#fff;
  font-size:.95rem;transition:transform .2s}
.card--seemore:hover{border-color:var(--yellow) !important}
.card--seemore:hover .seemore-link{transform:translateX(4px)}
.card--seemore:hover h3{color:#fff}

/* --- VAT page closing band (brand deep-teal, two columns) ---------------- */
.vat-band{background:linear-gradient(135deg,#041A63 0%,#0B3BD6 55%,#1450FF 120%);position:relative;overflow:hidden}
.vat-band::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 400px at 15% -20%,rgba(91,140,255,.32),transparent 60%);pointer-events:none}
.vat-band .wrap{position:relative;z-index:1}
.vat-band__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px)}
.vat-band__kicker{color:var(--gold-lt);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.74rem;margin-bottom:10px}
.vat-band__col h2{color:#fff;font-size:clamp(1.5rem,3vw,2.1rem)}
.vat-band__p{color:#DDE9E6;margin-top:16px;line-height:1.7}
.vat-band__checks{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.vat-band__checks li{position:relative;padding-left:34px;color:#EAF3F0;font-weight:600;font-size:1.02rem}
.vat-band__checks li::before{content:"";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));box-shadow:0 4px 10px rgba(230,180,90,.4)}
.vat-band__checks li::after{content:"";position:absolute;left:7px;top:6px;width:6px;height:11px;
  border:solid var(--charcoal);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
@media(max-width:820px){.vat-band__grid{grid-template-columns:1fr;gap:36px}}

/* --- Free Zones directory page (image tiles by emirate) ------------------ */
.fz-group-head{margin:0 0 26px}
.fz-group-head .kicker{color:var(--gold)}
.fz-group-head h2{font-size:clamp(1.6rem,3.2vw,2.3rem);margin-top:8px;color:var(--navy)}
.alt .fz-group-head .kicker{color:var(--blue-bright)}
.alt .fz-group-head h2{color:#fff}
.fz-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.fz-tile{position:relative;display:block;min-height:238px;border-radius:16px;overflow:hidden;
  background-size:cover;background-position:center;border:2.5px solid var(--yellow);
  box-shadow:0 14px 30px rgba(26,26,26,.12);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}
.fz-tile:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(26,26,26,.22);border-color:var(--yellow-dk)}
.fz-tile__scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,26,99,.05) 0%,rgba(4,26,99,.4) 48%,rgba(4,26,99,.92) 100%);
  transition:background .3s}
.fz-tile:hover .fz-tile__scrim{background:linear-gradient(180deg,rgba(4,26,99,.18) 0%,rgba(4,26,99,.56) 48%,rgba(4,26,99,.96) 100%)}
.fz-tile__body{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;display:flex;flex-direction:column;gap:6px;z-index:1}
.fz-tile__name{font-family:var(--disp);font-size:1.3rem;color:#fff;line-height:1.16}
.fz-tile__desc{color:#E4EBE9;font-size:.9rem;line-height:1.48;
  opacity:0;max-height:0;transform:translateY(8px);overflow:hidden;
  transition:opacity .3s,max-height .35s,transform .3s}
.fz-tile:hover .fz-tile__desc,.fz-tile:focus-visible .fz-tile__desc{opacity:1;max-height:130px;transform:translateY(0)}
.fz-tile::after{content:"\2192";position:absolute;top:14px;right:16px;z-index:1;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--yellow),var(--yellow-dk));color:var(--charcoal);
  font-weight:800;font-size:1.05rem;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.fz-tile:hover::after{opacity:1;transform:translateY(0)}
@media(max-width:900px){.fz-tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fz-tiles{grid-template-columns:1fr}
  .fz-tile__desc{opacity:1;max-height:130px;transform:none}
  .fz-tile::after{opacity:1;transform:none}}

/* ============================================================
   Top-bar: grouped free-zone flyout under Company Setup
   ============================================================ */

/* ============================================================
   About Us page — section jump bar, MD's letter, reviews
   ============================================================ */
.sec-nav{
  position:sticky;top:var(--hdr-h);z-index:40;
  background:var(--card);border-bottom:1px solid var(--line);
  box-shadow:0 6px 18px rgba(26,26,26,.05);padding:0;
}
.sec-nav .wrap{
  display:flex;align-items:center;gap:4px;flex-wrap:nowrap;
  overflow-x:auto;scrollbar-width:none;
}
.sec-nav .wrap::-webkit-scrollbar{display:none}
.sec-nav a{
  white-space:nowrap;padding:15px 14px;font-size:.82rem;font-weight:700;
  color:var(--ink);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.sec-nav a:hover{color:var(--gold);border-bottom-color:var(--gold)}

.md-letter{
  max-width:900px;margin:0 auto;position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(28px,4vw,46px) clamp(24px,4vw,52px);
  box-shadow:0 18px 44px rgba(26,26,26,.08);
}
.md-letter::before{
  content:"\201C";position:absolute;top:6px;left:20px;
  font-family:var(--disp);font-size:5.4rem;line-height:1;color:rgba(230,180,90,.42);
}
.md-letter p{color:var(--muted);font-size:1.01rem}
.md-letter p + p{margin-top:16px}
.md-letter .md-sign{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  font-family:var(--disp);font-size:1.25rem;color:var(--navy);
}
.md-letter .md-sign span{
  display:block;font-family:var(--font);font-size:.82rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:4px;
}

.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.review{
  display:flex;flex-direction:column;gap:14px;margin:0;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:28px 24px;transition:transform .25s,box-shadow .25s,border-color .25s;
}
.review:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(26,26,26,.1);border-color:var(--gold)}
.review .stars{color:var(--yellow-dk);letter-spacing:3px;font-size:1rem;line-height:1}
.review blockquote{flex:1;margin:0;color:var(--muted);font-size:.95rem}
.review blockquote::before{content:"\201C"}
.review blockquote::after{content:"\201D"}
.review .who{padding-top:14px;border-top:1px solid var(--line)}
.review .who b{display:block;color:var(--navy);font-size:.96rem}
.review .who span{display:block;color:var(--gold);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}

@media(max-width:940px){
  .sec-nav{position:static}
}
@media(max-width:900px){ .reviews{grid-template-columns:1fr} }
/* anchors on the About page must clear both the sticky header and the jump bar */
.sec-nav ~ section{scroll-margin-top:170px}
@media(max-width:940px){ .sec-nav ~ section{scroll-margin-top:110px} }

/* ============================================================
   Header brand lockup — logo + company name + section label.
   Same position on every page of the Company Set Up section
   (the spacing the home page used is now the shared default).
   ============================================================ */
.brandzone{gap:clamp(14px,3.4vw,48px)}
.brand-lock{display:flex;align-items:center;gap:14px;flex:none}
.brand-lockup{display:flex;flex-direction:column;line-height:1.15}
.brand-lockup .bl-name{
  font-family:var(--disp);font-size:1.16rem;color:var(--navy);
  letter-spacing:.02em;white-space:nowrap;
}
.brand-lockup .bl-sub{
  font-size:.72rem;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--yellow-dk);white-space:nowrap;margin-top:3px;
}
@media(max-width:1240px){
  .brandzone{gap:clamp(10px,2vw,20px)}
  .brand-lockup .bl-name{font-size:1.02rem}
  .brand-lock{gap:10px}
}
@media(max-width:1080px){ .brand-lockup{display:none} }
@media(max-width:940px){
  .brand-lockup{display:flex}
  .brandzone{gap:10px}
}
@media(max-width:520px){ .brand-lockup{display:none} }

/* the Free Zone panel only lists three emirates, so it stays narrow and
   leaves room for the zone list to open to its right */
nav.svc .drop .flyout.fly-groups{min-width:152px}

/* dropdown labels stay on one line; the panel widens to fit the longest one */
nav.svc .drop a,nav.svc .drop .subitem>a{white-space:nowrap}
@media(max-width:940px){ nav.svc .drop a,nav.svc .drop .subitem>a{white-space:normal} }

/* On narrower desktops there is not enough room to the right for the deeper
   panels, so they open to the left instead (they sit above the parent panel). */
@media(min-width:941px) and (max-width:1270px){
  nav.svc .drop .subitem>.flyout{left:auto;right:100%;transform:translateX(-8px);z-index:7}
  nav.svc .drop .subitem:hover>.flyout{transform:translateX(0)}
}

/* ============================================================
   Brand colours lifted straight from the logo artwork
   (sampled: the arc/arrow blue and the dark green of the bars)
   ============================================================ */
:root{ --logo-blue:#002ED9; --logo-green:#275E17; }

/* Top-bar brand name: same scale as the main website's header, in the
   logo's blue. The hero headline is unaffected. */
.brand-lockup .bl-name{
  font-size:clamp(0.95rem,1.75vw,1.55rem);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--logo-blue);
  -webkit-text-stroke:.5px var(--logo-blue);
}
.brand-lockup .bl-sub{ color:var(--logo-green) }
@media(max-width:1240px){ .brand-lockup .bl-name{font-size:clamp(0.95rem,1.6vw,1.2rem)} }

/* ============================================================
   Business Setup home hero: the original photograph, unshaded,
   and only as tall as the content inside it.
   ============================================================ */
.hero-bg.hero--home .hero-overlay{ display:none }
.hero-bg.hero--home .hero-bg-img{ object-position:center 45% }
.hero-bg.hero--home .wrap{ padding:44px 0 48px }
.hero-bg.hero--home .hero-copy{
  /* the photo is a night skyline, so the type still reads without a scrim —
     the shadow keeps it crisp over the brighter light trails */
  text-shadow:0 2px 18px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.7);
}
.hero-bg.hero--home .badges{ margin-top:22px }
@media(max-width:900px){ .hero-bg.hero--home .wrap{ padding:32px 0 38px } }

/* ============================================================
   "Let's Talk" — searchable country-code picker
   ============================================================ */
.hf-phone{ position:relative }
.cc{ position:relative; flex:none }
.cc-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:12px 6px 12px 2px;cursor:pointer;
  font-family:var(--font);font-size:.95rem;font-weight:600;color:var(--ink);
  white-space:nowrap;
}
.cc-btn:hover{ color:var(--gold) }
.cc-btn .cc-flag{ font-size:1.05rem;line-height:1 }
.cc-btn .cc-car{ color:var(--gold);font-size:.8em }
.cc-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:40;
  width:min(310px,78vw);
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 22px 48px rgba(26,26,26,.22);
  padding:8px;
}
.cc-menu[hidden]{ display:none }
.cc-search{
  width:100%;margin:0 0 6px;padding:9px 11px;
  border:1.5px solid var(--line);border-radius:8px;background:var(--bg);
  font-family:var(--font);font-size:.88rem;color:var(--ink);
}
.cc-search:focus{ outline:none;border-color:var(--gold) }
.cc-list{
  list-style:none;margin:0;padding:0;
  max-height:246px;overflow-y:auto;overscroll-behavior:contain;
}
.cc-opt{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:7px;cursor:pointer;
  font-size:.88rem;color:var(--ink);
}
.cc-opt:hover{ background:var(--bg2);color:var(--gold) }
.cc-opt[hidden]{ display:none }
.cc-opt .cc-of{ font-size:1.02rem;line-height:1;flex:none }
.cc-opt .cc-on{ flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.cc-opt .cc-od{ color:var(--muted);font-variant-numeric:tabular-nums;flex:none }
.cc-empty{ padding:10px;text-align:center;color:var(--muted);font-size:.85rem }
.cc-empty[hidden]{ display:none }

/* the service list is long now that it mirrors the menus */
.hero-form select optgroup{ font-weight:800;color:var(--navy) }
.hero-form select option{ font-weight:400 }

/* Home hero only: a tighter enquiry panel so the hero wraps snugly around
   its content instead of running the full height of the screen. */
.hero-bg.hero--home .hero-form .hf-title{padding:14px 18px 6px;font-size:1.45rem}
.hero-bg.hero--home .hero-form .hf-bar{padding:9px;font-size:.92rem}
.hero-bg.hero--home .hero-form .hf-offer{padding:8px 12px;font-size:.8rem;line-height:1.35}
.hero-bg.hero--home .hero-form .hf-body{padding:16px 22px 20px}
.hero-bg.hero--home .hero-form input,
.hero-bg.hero--home .hero-form select,
.hero-bg.hero--home .hero-form textarea{padding:9px 2px;margin-bottom:10px}
.hero-bg.hero--home .hero-form .hf-phone{margin-bottom:10px}
.hero-bg.hero--home .hero-form .hf-phone input{margin:0}
.hero-bg.hero--home .hero-form textarea{min-height:44px}
.hero-bg.hero--home .hero-form .hf-note{margin:0 0 10px}
.hero-bg.hero--home .hero-form .hf-submit{padding:12px;font-size:.98rem}
.hero-bg.hero--home .cc-btn{padding:9px 6px 9px 2px}

/* ============================================================================
   BLUE THEME
   Everywhere the old pale-teal band or accent appeared, the palette is now the
   shining dark blue of the logo. --gold-lt keeps its name because inline
   styles across the pages reference it; only its value changed.
   ========================================================================== */
:root{
  --blue-deep:#041A63;      /* darkest, for the bottom of the band gradient */
  --blue-mid:#08268F;
  --blue:#0B3BD6;           /* the logo's shining blue */
  --blue-bright:#5B8CFF;    /* accents that must read on a dark ground */
  --blue-pale:#D9E4FF;      /* body copy on a dark ground */
  --teal:#0B3BD6;
  --gold-lt:#5B8CFF;
}

/* --- the alternating band ------------------------------------------------- */
.alt{
  background:linear-gradient(160deg,#0F44E4 0%,#0A2FA8 42%,#061C6B 100%);
  color:var(--blue-pale);
}
/* text sitting directly on the band */
.alt > .wrap > .kicker,
.alt > .wrap > .sec-head > .kicker,
.alt > .wrap.two-col > div > .kicker{color:var(--blue-bright) !important}
.alt > .wrap > h2,
.alt > .wrap > h3,
.alt > .wrap > .sec-head > h2,
.alt > .wrap.two-col > div > h2{color:#fff !important}
.alt > .wrap > p,
.alt > .wrap > .sec-head > p,
.alt > .wrap.two-col > div > p{color:var(--blue-pale) !important}
.alt > .wrap > .checks li,
.alt > .wrap.two-col > div > .checks li{color:var(--blue-pale)}
.alt > .wrap > .checks li::before,
.alt > .wrap.two-col > div > .checks li::before{color:var(--blue-bright)}
/* anything else that sits straight on the band rather than inside a card */
.alt .numitem h3{color:#fff}
.alt .numitem p{color:var(--blue-pale)}
.alt .numitem .numbig{color:rgba(255,255,255,.34)}

/* white surfaces keep the light-page palette while they sit on the blue band */
.alt .card,.alt .step,.alt .plan,.alt .faq details,.alt .md-letter,.alt .review,
.alt .qband,.alt .hero-form,.alt .tablewrap,.alt .stepflow li{color:var(--ink)}
.alt .card h2,.alt .card h3,.alt .step h3,.alt .plan h3,.alt .qband h2,
.alt .md-letter h3,.alt .faq summary,.alt .stepflow li b,
.alt .review .who b,.alt .hero-form .hf-title{color:var(--navy)}
.alt .card p,.alt .step p,.alt .plan p,.alt .qband p,.alt .faq p,
.alt .md-letter p,.alt .review blockquote{color:var(--muted)}
.alt .card .kicker,.alt .qband .kicker{color:var(--gold)}
.alt .card .checks li,.alt .md-letter .checks li{color:var(--ink)}
.alt .card .checks li::before{color:var(--gold)}

/* --- accents that used the old teal --------------------------------------- */
.hero-bg .badges b{color:var(--blue-bright)}
.contact .rows b{color:var(--blue-bright)}
.crumb a:hover{color:var(--blue-bright)}

/* ============================================================================
   Quote pop-up — shining dark blue metallic banner
   ========================================================================== */
.sky-modal__banner{
  background:
    linear-gradient(115deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,0) 34%),
    linear-gradient(140deg,#1450FF 0%,#0B3BD6 38%,#08268F 70%,#041A63 100%);
}
.sky-modal__banner .smb-kick{color:#BBD0FF}
.sky-modal__banner p{color:#D9E4FF}
.sky-modal__badges{background:#03123F;color:#BBD0FF}
.sky-modal .modal-form .hf-offer{margin:0 0 18px;border-radius:9px}

/* ============================================================================
   Header brand lockup — a step larger, as asked
   ========================================================================== */
.brand-lockup .bl-name{font-size:clamp(1.08rem,2vw,1.82rem)}
.brand-lockup .bl-sub{font-size:clamp(.72rem,.95vw,.88rem);letter-spacing:.17em}
@media(max-width:1240px){ .brand-lockup .bl-name{font-size:clamp(1.02rem,1.75vw,1.32rem)} }

/* ============================================================================
   Home hero — the buttons and the offer pill carry their own background, so
   they lose the drop shadow. The headline and strapline keep a soft one so
   they stay readable over the bright part of the photograph.
   ========================================================================== */
.hero-bg.hero--home .hero-copy{text-shadow:none}
.hero-bg.hero--home .hero-copy h1,
.hero-bg.hero--home .hero-copy .sub,
.hero-bg.hero--home .hero-copy .badges{text-shadow:0 2px 14px rgba(4,26,99,.72),0 1px 3px rgba(0,0,0,.55)}
.hero-bg.hero--home .offer-pill,
.hero-bg.hero--home .cta .btn{text-shadow:none}
.hero-bg.hero--home .hero-bg-img{object-position:center 62%}

/* ============================================================================
   The visa-type diagram needs the full page width to stay legible
   ========================================================================== */
.wide-figure{width:min(1400px,96vw);margin-left:calc(50% - min(700px,48vw));}
@media(max-width:1180px){ .wide-figure{width:100%;margin-left:0} }

/* ============================================================================
   Site footer — every page, grouped and in order
   ========================================================================== */
.site-foot{background:#03123F;color:#B9C8E8;padding:52px 0 0;font-size:.88rem}
.foot-grid{
  display:grid;gap:30px 34px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding-bottom:40px;
}
.foot-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.foot-col h4{
  font-family:var(--font);font-size:.72rem;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--blue-bright);
  margin-bottom:4px;
}
.foot-col a{color:#B9C8E8;line-height:1.35;transition:color .2s}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-base{border-top:1px solid rgba(255,255,255,.13);padding:18px 0 22px}
.foot-base .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;
}
.foot-base p{color:#8FA3CC;font-size:.82rem;margin:0}
.foot-base .foot-tag{color:var(--yellow);font-weight:600}
.foot-base a{color:#B9C8E8}
.foot-base a:hover{color:#fff}
@media(max-width:620px){
  .site-foot{padding-top:38px}
  .foot-base .wrap{flex-direction:column;align-items:flex-start;text-align:left}
}

/* the "Contact Us" heading above the contact details */
.contact .rows-title{
  font-family:var(--font);font-size:1.02rem;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue-bright);
  margin-bottom:6px;
}

/* the numbered process list sits straight on the band, so it follows the band */
.alt .proclist li b{color:#fff}
.alt .proclist li span{color:var(--blue-pale)}

/* --- the last of the teal: page tints, rules and the quote band ----------- */
:root{
  --bg:#F6F8FD; --bg2:#E9EEFB; --line:#DCE2F2; --card:#FFFFFF;
  --gold:#0B3BD6; --gold-dk:#041A63;
}
.qband{
  background:linear-gradient(135deg,#FFFFFF,#EAF0FF);
  border-left-color:var(--blue);
}

/* The daylight photograph is bright exactly where the headline sits, so the
   copy column gets a soft left-to-right scrim. It fades out well before the
   skyline's focal point, so the picture itself reads unshaded. */
.hero-bg.hero--home .hero-overlay{
  display:block;
  background:linear-gradient(100deg,
    rgba(3,18,63,.80) 0%,
    rgba(3,18,63,.62) 26%,
    rgba(3,18,63,.28) 46%,
    rgba(3,18,63,0) 62%);
}
@media(max-width:900px){
  .hero-bg.hero--home .hero-overlay{
    background:linear-gradient(180deg,rgba(3,18,63,.74) 0%,rgba(3,18,63,.46) 55%,rgba(3,18,63,.30) 100%);
  }
}

/* the offer line reads white on the blue bar; the gold emphasis it inherited
   from the charcoal version would fight the blue */
.hero-form .hf-offer b{color:#fff}

/* the footer tagline sits opposite the copyright line */
.foot-base .foot-tag{
  font-family:var(--disp);font-style:italic;font-size:.92rem;
  color:var(--yellow);font-weight:600;margin-left:auto;text-align:right;
}
@media(max-width:620px){ .foot-base .foot-tag{margin-left:0;text-align:left} }

/* "Why Choose Us" on the VAT page: three cards in a two-up grid, so the last
   one is centred under the pair rather than hanging on the left */
#vat-why-us .grid.g2 > .card:last-child{
  grid-column:1 / -1;
  width:calc(50% - 11px);
  justify-self:center;
}
@media(max-width:940px){ #vat-why-us .grid.g2 > .card:last-child{width:100%} }

/* ============================================================================
   Reviews — a slow, continuous track instead of a static grid
   The markup holds two identical tracks; the second is aria-hidden and exists
   only so the loop has no seam.
   ========================================================================== */
.reviews-viewport{
  display:flex;
  overflow:hidden;
  margin-top:8px;
  padding:10px 0 18px;
  /* the ends fade out rather than being clipped hard */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.reviews-track{
  display:flex;
  flex:none;
  gap:22px;
  padding-right:22px;
  animation:reviewSlide 96s linear infinite;
  will-change:transform;
}
/* left to right: the pair starts shifted one track to the left and travels back */
@keyframes reviewSlide{
  from{ transform:translateX(-100%) }
  to  { transform:translateX(0) }
}
/* Hover no longer pauses the marquee — the reviews keep moving under the cursor.
   Focus (keyboard) still pauses so a focused card can be read. */
.reviews-viewport:focus-within .reviews-track{ animation-play-state:paused }

.reviews-track .review{
  flex:none;
  width:min(360px,78vw);
  margin:0;
}
.rv-head{display:flex;align-items:center;gap:13px}
.rv-pfp{
  flex:none;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--font);font-weight:800;font-size:.94rem;letter-spacing:.04em;
  color:#fff;
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.18),0 4px 12px rgba(26,26,26,.18);
}
.rv-gold {background:linear-gradient(140deg,#F0C070,#D9A241 55%,#A9761C)}
.rv-blue {background:linear-gradient(140deg,#4F82FF,#0B3BD6 55%,#062372)}
.rv-green{background:linear-gradient(140deg,#5FA845,#2F7A21 55%,#1B4A12)}
.review .rv-head .who{padding-top:0;border-top:0}
.review .stars{margin-top:2px}
@media(max-width:900px){
  .reviews-track{animation-duration:62s}
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .reviews-track{animation:none}
  .reviews-viewport{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .reviews-viewport .reviews-track[aria-hidden="true"]{display:none}
}

/* the Managing Director's name under the sign-off */
.md-letter .md-sign .md-name{
  display:block;
  font-family:var(--disp);font-weight:400;
  font-size:1.45rem;letter-spacing:.03em;color:var(--navy);
  margin-top:2px;
}

/* ============================================================================
   IT Services — interactive golden fluid hero
   ========================================================================== */
/* Same rule as .hero-bg: fill exactly one screenful (viewport minus the sticky
   top bar) so the blue section below never bleeds into the first view.
   The fluid canvas is inset:0 / 100%, so it grows with the hero. */
.hero-fluid{
  position:relative;overflow:hidden;isolation:isolate;background:#080A18;
  display:flex;align-items:center;
  /* .hero-lite adds a pale 1px bottom border for a LIGHT hero; on this dark
     one it showed as a thin light line at the fold, so drop it. */
  border-bottom:0;
  min-height:calc(100vh - var(--hdr-h));
  min-height:calc(100svh - var(--hdr-h));
}
.hero-fluid .fluid-wrap{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-fluid .fluid-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  /* the canvas paints the dye; this is the ground it sits on */
  /* the ground the dye sits on: gold banked on one side, blue on the other,
     so the two hues are already present before the cursor arrives */
  background:
    radial-gradient(78% 116% at 84% 88%, rgba(20,52,150,.92) 0%, rgba(9,24,74,.55) 44%, rgba(6,14,42,0) 76%),
    radial-gradient(86% 120% at 16% 12%, rgba(96,62,10,.95) 0%, rgba(40,26,5,.62) 46%, rgba(14,10,2,0) 78%),
    linear-gradient(148deg,#120C02 0%,#0A0A16 52%,#050A1E 100%);
}
.hero-fluid .fluid-tint{
  position:absolute;inset:0;
  background:
    linear-gradient(115deg,rgba(6,10,26,.88) 0%,rgba(8,10,22,.58) 34%,rgba(10,8,14,.14) 62%,rgba(10,8,14,0) 100%);
  mix-blend-mode:multiply;
}
/* a fine grain over the top, the way the reference does it */
.hero-fluid .fluid-grain{
  position:absolute;inset:-50%;
  opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){ .hero-fluid .fluid-grain{animation:none} }

/* the hero's own content sits above the fluid and turns light */
.hero-fluid > .wrap{position:relative;z-index:2}
.hero-fluid .crumb,.hero-fluid .crumb a{color:#E4D6B4}
.hero-fluid .crumb a:hover{color:var(--yellow)}
.hero-fluid .kicker{color:var(--yellow)}
.hero-fluid h1{color:#fff;text-shadow:0 4px 26px rgba(0,0,0,.6)}
.hero-lite.hero-fluid p.sub{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.62)}
.hero-fluid .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.62)}
.hero-fluid .btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.hero-fluid .hero-form{box-shadow:0 30px 62px rgba(0,0,0,.55)}

/* ============================================================================
   The technology strip on the IT Services page
   ========================================================================== */
.tech-strip{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--card);border:2.5px solid var(--yellow);border-radius:14px;
  padding:18px 22px;
}
.tech-strip .ts-label{
  font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);flex:none;
}
.tech-strip .ts-items{display:flex;gap:9px;flex-wrap:wrap}
.tech-strip .ts-items b{
  font-size:.82rem;font-weight:700;color:var(--ink);
  background:var(--bg2);border-radius:999px;padding:6px 13px;
}

/* ============================================================================
   Quick Link — sits where "Talk to us" used to, on the left of the contact
   panel. The groups are <details>, so the carets work without any script.
   ========================================================================== */
.contact .wrap{align-items:start}

.quick-links .ql-title{
  font-family:var(--disp);font-weight:400;
  font-size:clamp(1.6rem,2.6vw,2.1rem);
  color:#fff;letter-spacing:.05em;
  margin-bottom:20px;
}
.quick-links .ql-list{
  display:flex;flex-direction:column;
  gap:2px;
  padding-left:clamp(4px,1.6vw,22px);
}
.quick-links a,
.quick-links summary{
  display:block;
  padding:8px 0;
  font-size:1.02rem;
  line-height:1.35;
  color:#fff;
  border-bottom:0;                 /* the section's dashed link rule is not wanted here */
  transition:color .2s;
}
.quick-links a:hover,
.quick-links summary:hover{color:var(--yellow);border-bottom:0}

.quick-links .ql-group{border:0}
.quick-links .ql-group > summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:9px;
}
.quick-links .ql-group > summary::-webkit-details-marker{display:none}
.quick-links .ql-group > summary::after{
  content:"";
  width:0;height:0;flex:none;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid var(--yellow);
  transition:transform .22s ease;
}
.quick-links .ql-group[open] > summary::after{transform:rotate(180deg)}
.quick-links .ql-group[open] > summary{color:var(--yellow)}

.quick-links .ql-sub{
  display:flex;flex-direction:column;
  gap:0;
  margin:2px 0 8px;
  padding-left:16px;
  border-left:2px solid rgba(255,255,255,.16);
  animation:qlOpen .22s ease both;
}
.quick-links .ql-sub a{
  padding:6px 0;
  font-size:.92rem;
  color:#D8E2E0;
}
.quick-links .ql-sub a:hover{color:var(--yellow)}
@keyframes qlOpen{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce) and (min-width: 999999px){
  .quick-links .ql-sub{animation:none}
  .quick-links .ql-group > summary::after{transition:none}
}

@media(max-width:900px){
  .quick-links{margin-bottom:8px}
  .quick-links .ql-list{padding-left:0}
}

/* with the sitemap gone the base bar carries the footer on its own */
.site-foot{padding-top:0}
.site-foot .foot-base{border-top:0;padding:20px 0 24px}

/* Brand lockup: the type comes down a step so it reads cleanly, and the block
   it sits in gets more room around it rather than being squeezed by the nav. */
.brand-lockup .bl-name{font-size:clamp(1rem,1.62vw,1.5rem);line-height:1.2}
.brand-lockup .bl-sub{font-size:clamp(.66rem,.82vw,.8rem);letter-spacing:.2em;margin-top:5px}
.brand-lockup{gap:0;padding:6px 0}
.brand-lock{gap:clamp(12px,1.4vw,20px)}
@media(max-width:1240px){
  .brand-lockup .bl-name{font-size:clamp(.96rem,1.5vw,1.16rem)}
  .brand-lockup .bl-sub{font-size:clamp(.7rem,.8vw,.76rem);letter-spacing:.16em}
}

/* Brand lockup a step smaller again, and the top-bar links a step larger so
   the menu reads clearly. The space the lockup gives up is what the wider
   menu takes, so the bar stays balanced. */
.brand-lockup .bl-name{font-size:clamp(.92rem,1.42vw,1.3rem)}
.brand-lockup .bl-sub{font-size:clamp(.6rem,.74vw,.72rem);letter-spacing:.18em}
@media(max-width:1240px){
  .brand-lockup .bl-name{font-size:clamp(.9rem,1.32vw,1.04rem)}
  .brand-lockup .bl-sub{font-size:clamp(.62rem,.72vw,.68rem);letter-spacing:.15em}
}
nav.svc>.item>a{font-size:.96rem;padding:26px 13px;letter-spacing:.005em}
/* desktop only — below 940px the stacked menu keeps its own compact padding */
@media(min-width:941px) and (max-width:1240px){ nav.svc>.item>a{font-size:.9rem;padding:26px 10px} }
@media(min-width:941px) and (max-width:1080px){ nav.svc>.item>a{font-size:.86rem;padding:26px 8px} }
@media(max-width:940px){ nav.svc>.item>a{font-size:.98rem;padding:12px 6px} }

/* Phone (tel:) and email (mailto:) links in the contact block read in brand
   gold — the same gold used across the site. The website link wears it too;
   the WhatsApp button and quick-links keep their own styles. */
.contact a[href^="tel:"],
.contact a[href^="mailto:"],
.contact a[href^="https://sky-corporateservices.com"]{ color:var(--yellow); border-bottom-color:rgba(230,180,90,.45) }

/* ============================================================================
   Quote popup offer — the same circle banner as the home page hero, stretched
   to the popup's width. It replaces the old blue text strip (.hf-offer), so the
   offer reads identically wherever a visitor meets it.
   ========================================================================== */
.sky-modal .offer-pill--modal{
  display:flex;width:100%;margin:0 0 18px;padding:7px 16px 7px 7px;
  font-size:.9rem;line-height:1.3;text-shadow:none;
  box-shadow:0 10px 22px rgba(230,180,90,.35);
}
.sky-modal .offer-pill--modal .op-pct{width:56px;height:56px;font-size:1.02rem}
.sky-modal .offer-pill--modal .op-tag{font-size:.54rem}

/* ============================================================================
   25% offer banner — a size down everywhere it appears (page hero + popup).
   ========================================================================== */
.offer-pill{gap:9px;padding:6px 16px 6px 6px;font-size:.82rem;margin-bottom:16px;
  box-shadow:0 10px 22px rgba(230,180,90,.38)}
.offer-pill .op-pct{width:50px;height:50px;font-size:.95rem;row-gap:2px}
.offer-pill .op-tag{font-size:.48rem}
@media(max-width:520px){
  .offer-pill{font-size:.78rem;gap:8px;padding-right:13px}
  .offer-pill .op-pct{width:46px;height:46px;font-size:.9rem}
  .offer-pill .op-tag{font-size:.46rem}
}
.sky-modal .offer-pill--modal{padding:5px 13px 5px 5px;font-size:.8rem;margin-bottom:14px}
.sky-modal .offer-pill--modal .op-pct{width:46px;height:46px;font-size:.9rem}
.sky-modal .offer-pill--modal .op-tag{font-size:.46rem}

/* ============================================================================
   Company Setup home hero — heading and stat labels in bold.
   Marcellus ships one weight, so font-weight alone changes nothing; a thin
   stroke in the text colour thickens it, the same way the top-bar wordmark
   is made bold. The stat labels are Manrope, which has a real 700.
   ========================================================================== */
.hero-bg.hero--home .badges span{font-weight:700}

/* Terms / Privacy Policy links in the band, in place of the tagline */
.foot-legal{display:flex;align-items:center;flex-wrap:wrap;gap:8px clamp(24px,4vw,52px);margin-left:auto}
.foot-legal a{
  position:relative;padding:4px 0;border:0;text-decoration:none;
  color:#FFFFFF;font-size:.92rem;font-weight:500;letter-spacing:.01em;transition:color .2s;
}
.foot-legal a::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1.5px;background:#E6B45A;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.foot-legal a:hover,.foot-legal a:focus-visible,.foot-legal a[aria-current="page"]{color:#F2C879}
.foot-legal a:hover::after,.foot-legal a:focus-visible::after,.foot-legal a[aria-current="page"]::after{transform:scaleX(1)}
@media(max-width:620px){ .foot-legal{margin-left:0} }

/* ============================================================================
   25% offer banner — larger type, same box.
   The banner's width and height are pinned to the sizes it already had, so
   the bigger text reflows inside it (the sentence wraps to two lines on
   desktop, as it already did on phones and in the popup) instead of growing
   the banner. The circles keep their existing diameters.
   ========================================================================== */
.offer-pill{height:62px;font-size:.9rem;line-height:1.25}
.offer-pill:not(.offer-pill--modal){width:466px;max-width:100%}
.offer-pill .op-pct{font-size:1.06rem}
.offer-pill .op-tag{font-size:.54rem}
@media(max-width:520px){
  .offer-pill{height:58px;font-size:.85rem}
  .offer-pill:not(.offer-pill--modal){width:auto}
  .offer-pill .op-pct{font-size:.98rem}
  .offer-pill .op-tag{font-size:.5rem}
}
.sky-modal .offer-pill--modal{height:56px;font-size:.86rem;line-height:1.25}
.sky-modal .offer-pill--modal .op-pct{font-size:.98rem}
.sky-modal .offer-pill--modal .op-tag{font-size:.5rem}


/* Menu labels that are headings only (Free Zone, Mainland, Mainland's
   emirates) no longer link anywhere, so they don't show a link cursor. */
nav.svc a:not([href]){cursor:default}

/* SKY Company Setup home hero heading: the site's plain body font (Manrope)
   in bold, instead of the decorative Marcellus display face. Manrope ships a
   real 700, so no text-stroke is needed. Colour and size are unchanged. */
.hero-bg.hero--home .brandname{font-family:var(--font);font-weight:700;letter-spacing:-.01em;-webkit-text-stroke:0}

/* Company Setup menu: Mainland's Dubai, Sharjah and Ajman in bold, matching
   the weight of Free Zone's emirate labels. The flyout carries its own
   fly-mainland class so the rule does not depend on the links. */
nav.svc .drop .fly-mainland > a{font-weight:700}

/* Two-column block nested one level inside .wrap on a blue band (the Hamriyah
   About section). The existing blue-band text rules only cover .wrap.two-col,
   so this layout kept dark body text on blue. !important is needed on the
   paragraphs because they carry an inline grey colour. */
.alt > .wrap > .two-col > div > h3{color:#fff}
.alt > .wrap > .two-col > div > p{color:var(--blue-pale) !important}
.alt > .wrap > .two-col > div > .checks li{color:var(--blue-pale)}
.alt > .wrap > .two-col > div > .checks li::before{color:var(--blue-bright)}

/* ============================================================================
   Company Setup page: free zone cards carry their zone's photo.
   The photo is set inline on each card; a dark blue tint sits over it so the
   white text stays readable, lifting slightly on hover.
   ========================================================================== */
a.card.card--zone{
  position:relative;isolation:isolate;overflow:hidden;min-height:190px;
  background-color:#061C6B;background-size:cover;background-position:center;background-repeat:no-repeat;
}
a.card.card--zone::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,48,.86) 0%,rgba(4,16,48,.66) 55%,rgba(4,16,48,.5) 100%);
  transition:opacity .3s;
}
a.card.card--zone:hover::before{opacity:.88}
a.card.card--zone h3,
a.card.card--zone:hover h3{color:#fff}
a.card.card--zone p{color:rgba(255,255,255,.9)}

/* ============================================================================
   About Us: Managing Director's photo beside the letter.
   On desktop the photo sits to the left and stretches to the letter's height;
   object-position keeps her (lower right of the original) in frame. Below
   860px it stacks above the letter as a 3:4 portrait.
   ========================================================================== */
.md-feature{
  display:grid;grid-template-columns:minmax(260px,340px) 1fr;
  gap:clamp(24px,3.5vw,44px);align-items:stretch;
  max-width:1140px;margin:0 auto;
}
.md-feature .md-letter{max-width:none;margin:0}
.md-photo{
  margin:0;position:relative;min-height:420px;overflow:hidden;
  border-radius:18px;border:2.5px solid #E6B45A;
  box-shadow:0 18px 44px rgba(26,26,26,.14);background:#061C6B;
}
.md-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 62%}
@media(max-width:860px){
  .md-feature{grid-template-columns:1fr}
  .md-photo{width:100%;max-width:340px;margin:0 auto;aspect-ratio:3/4;min-height:0}
}