/* ============================================================
   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;
}
*{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}
header.top img.logo{height:100px;width:auto;flex:none;display:block}
.brandzone{display:flex;align-items:center;gap:8px;flex:none}
.back-main{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;
  margin-left:-11px;border:2px solid var(--gold);color:var(--gold);font-size:2.1rem;font-weight:800;line-height:1;flex:none;
  transition:border-color .2s,color .2s,background .2s,transform .2s}
.back-main:hover{background:var(--gold);color:#fff;transform:translateX(-2px)}
@media(max-width:940px){ .back-main{width:42px;height:42px;font-size:1.7rem;margin-left:-10px} 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) ---- */
.hero-bg{position:relative;color:#fff;overflow:hidden;background:#1A1A1A}
.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 two-column + Let's Talk call-back form --- */
.hero-two{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
/* Nudge the Let's Talk form further to the right (desktop only) */
@media(min-width:901px){
  .hero-two{grid-template-columns:1.3fr .7fr;gap:60px}
  .hero-two .hero-form{justify-self:end;width:min(100%,440px)}
  /* push the form past the container edge, toward the viewport edge.
     clamp() keeps the shift at 0 until there is real gutter to spend, so it never overflows */
  .hero-two .hero-form{margin-right:calc(-1 * clamp(0px, (100vw - 1180px) / 2 - 20px, 72px))}
}
.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){
  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)}
  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){*{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){
  .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){
  .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} }

.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){
  .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}
}

/* --- 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}
}

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

/* ============================================================
   About Us page — section jump bar, MD's letter, reviews
   ============================================================ */
.sec-nav{
  position:sticky;top:100px;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) }
}
.reviews-viewport:hover .reviews-track,
.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){
  .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
   ========================================================================== */
.hero-fluid{position:relative;overflow:hidden;isolation:isolate;background:#080A18}
.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){ .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){
  .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} }