/* =========================================================
   RESPONSIVE + OVERFLOW FIXES  — loaded last, overrides all
   ========================================================= */

/* ---- 1. Kill horizontal scroll everywhere ---- */
html,body{max-width:100%;overflow-x:hidden}
*{min-width:0}
img,iframe,video,table{max-width:100%}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}

/* ---- 2. Header / logo ---- */
.header{padding:14px 0}
.header .nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:52px;width:auto;transition:height .35s var(--ease)}
.header.scrolled .brand img{height:44px}

/* ===== HEADER: one fixed colour on every page and every scroll state =====
   White background, navy logo, dark nav text. No colour change on scroll —
   only the shadow deepens slightly so the bar still reads as sticky.        */
.header,
.header.solid,
.header.scrolled{
  background:#ffffff;
  box-shadow:0 1px 0 var(--line);
  transition:box-shadow var(--m-fast,200ms) ease, padding var(--m-normal,300ms) ease;
}
.header.scrolled{box-shadow:0 1px 0 var(--line),0 8px 28px rgba(10,37,64,.09)}

/* Logo: always the navy version in the header (white version is footer-only) */
.brand .logo-white{display:none !important}
.brand .logo-navy{display:block !important}

/* Nav text and burger always dark, since the bar is always white */
.header .mega-trigger,
.header.scrolled .mega-trigger,
.header.solid .mega-trigger{color:var(--ink)}
.header .mega-trigger:hover{background:var(--sky);color:var(--blue)}
.header .mega-trigger.active{color:var(--blue)}
.header .burger span,
.header.scrolled .burger span,
.header.solid .burger span{background:var(--navy)}
.header a:focus-visible,
.header button:focus-visible{outline-color:var(--blue)}

/* ---- 3. Burger ---- */
.burger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  background:none;border:none;cursor:pointer;padding:10px;margin-right:-8px;
  width:44px;height:44px;flex-shrink:0;
}
.burger span{display:block;width:24px;height:2.5px;border-radius:2px;background:#fff;transition:background .3s}
.header.scrolled .burger span,
.header.solid    .burger span{background:var(--navy)}

@media (max-width:1079px){
  .nav-cta{display:none}
  .burger{display:flex}
  .brand img{height:44px}
  .header.scrolled .brand img{height:40px}
}
@media (max-width:480px){
  .brand img,.header.scrolled .brand img{height:38px}
  .container{padding-inline:16px}
}

/* ---- 4. Mobile drawer ---- */
.mnav-backdrop{
  position:fixed;inset:0;background:rgba(7,27,48,.55);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;z-index:998;
}
.mnav-backdrop.open{opacity:1;visibility:visible}

.mnav{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);
  background:var(--navy);z-index:999;display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .38s var(--ease);
  box-shadow:-20px 0 60px rgba(0,0,0,.35);
}
.mnav.open{transform:translateX(0)}

.mnav-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.12);flex-shrink:0;
}
.mnav-head img{height:38px;width:auto}
.mnav-close{
  background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.5rem;line-height:1;
  width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center;
}
.mnav-close:hover{background:rgba(255,255,255,.2)}

.mnav-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 0 20px}

.mnav-link{
  display:block;padding:13px 20px;color:rgba(255,255,255,.9);
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;text-decoration:none;
}
.mnav-link:hover,.mnav-link.active{color:var(--blue-bright);background:rgba(255,255,255,.06)}

.mnav-acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 20px;background:none;border:none;cursor:pointer;text-align:left;
  color:rgba(255,255,255,.9);font-family:var(--f-display);font-weight:600;font-size:1.02rem;
}
.mnav-acc-btn svg{width:17px;height:17px;flex-shrink:0;transition:transform .3s;color:rgba(255,255,255,.6)}
.mnav-acc-btn.open{color:var(--blue-bright)}
.mnav-acc-btn.open svg{transform:rotate(180deg)}

.mnav-acc{max-height:0;overflow:hidden;transition:max-height .38s var(--ease);background:rgba(0,0,0,.18)}
.mnav-acc.open{max-height:1600px}
.mnav-cat{
  font-size:.66rem;text-transform:uppercase;letter-spacing:.15em;
  color:rgba(255,255,255,.42);padding:14px 20px 5px;font-weight:700;
}
.mnav-sub{
  display:block;padding:9px 20px 9px 26px;color:rgba(255,255,255,.78);
  font-size:.9rem;text-decoration:none;
}
.mnav-sub:hover{color:#fff;background:rgba(255,255,255,.07)}
.mnav-sub-all{color:var(--blue-bright);font-weight:600;padding-top:14px;padding-bottom:16px}

.mnav-foot{
  padding:16px 18px;border-top:1px solid rgba(255,255,255,.12);flex-shrink:0;
  display:grid;gap:10px;text-align:center;
}
.mnav-tel{color:rgba(255,255,255,.7);font-size:.88rem;text-decoration:none}
.mnav-tel:hover{color:#fff}
body.nav-lock{overflow:hidden}

@media (min-width:1080px){ .mnav,.mnav-backdrop{display:none} }

/* ---- 5. Hero ---- */
.hero{padding:150px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.hero-visual{position:relative}
.hero-float-stat{z-index:3}

@media (max-width:960px){
  .hero{padding:120px 0 64px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero p.lead{max-width:100%}
  .hero-actions .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:700px){
  .hero-float-stat{display:none !important}   /* were overlapping the form */
  .hero h1{font-size:clamp(1.9rem,8vw,2.6rem)}
}

/* ---- 6. Universal grid responsiveness ---- */
.struct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:36px}

/* generic 3-col inline grids used on services / about / free-zones pages */
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}

@media (max-width:960px){
  .split{grid-template-columns:1fr;gap:36px}
  .step:not(:last-child)::after{display:none}
  .pad{padding:64px 0}
  .pad-sm{padding:48px 0}
  .section-head{margin-bottom:40px}
  .cta-band{padding:38px 22px}
}
@media (max-width:560px){
  .pad{padding:52px 0}
  .cta-band{padding:32px 18px}
  .cta-band .btn{width:100%}
}

/* ---- 7. Sticky category sub-nav (services / free-zones) ---- */
.subnav-sticky{position:sticky;top:64px;z-index:80;background:#fff;border-bottom:1px solid var(--line)}
.subnav-scroll{display:flex;gap:6px;overflow-x:auto;padding:12px 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.subnav-scroll::-webkit-scrollbar{display:none}
.subnav-scroll > *{flex-shrink:0}
@media (max-width:1079px){ .subnav-sticky{top:72px} }
@media (max-width:480px){ .subnav-sticky{top:66px} }

/* ---- 8. Tables scroll instead of overflowing ---- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff}
.table-scroll table{border-collapse:collapse;min-width:720px;width:100%}
.table-hint{display:none;font-size:.78rem;color:var(--slate);text-align:center;margin-top:10px}
@media (max-width:820px){ .table-hint{display:block} }

/* ---- 9. Forms — no zoom-on-focus on iOS ---- */
input,select,textarea,button{font-family:inherit;max-width:100%}
@media (max-width:640px){
  input,select,textarea{font-size:16px !important}
}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){ .form-row-2{grid-template-columns:1fr} }

/* ---- 10. Service hero ---- */
@media (max-width:960px){
  .svc-hero-inner{grid-template-columns:1fr !important;gap:32px}
  .svc-meta-row{flex-wrap:wrap}
  .svc-hero-actions{flex-wrap:wrap}
  .svc-hero-actions .btn{flex:1 1 auto;justify-content:center}
}

/* ---- 11. WhatsApp float above content ---- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:120}
@media (max-width:560px){ .wa-float{right:14px;bottom:14px} }

/* ---- 12. Misc polish ---- */
.section-head p{margin-left:auto;margin-right:auto}
.eyebrow{flex-wrap:wrap}
h1,h2,h3,h4{overflow-wrap:break-word}
a,button{-webkit-tap-highlight-color:rgba(26,111,212,.15)}

/* ===== LONG-FORM CONTENT (reference-site pattern) ===== */
.longform{max-width:820px;margin:0 auto}
.longform h2{font-size:clamp(1.45rem,3.4vw,2rem);color:var(--navy);margin:10px 0 20px;line-height:1.25}
.longform p{font-size:1.02rem;line-height:1.85;color:var(--slate);margin-bottom:18px}
.longform p:last-child{margin-bottom:0}
.longform p strong{color:var(--navy)}
@media (max-width:640px){ .longform p{font-size:.97rem;line-height:1.78} }

/* ===== WHY-CHOOSE numbered rows ===== */
.why-list{max-width:880px;margin:0 auto;display:grid;gap:8px}
.why-row{
  display:flex;gap:22px;align-items:flex-start;
  padding:26px 26px 26px 22px;border-radius:16px;
  border:1px solid transparent;transition:background .3s,border-color .3s,transform .3s;
}
.why-row:hover{background:#fff;border-color:var(--line);transform:translateX(4px);box-shadow:var(--shadow-sm)}
.why-row-num{
  flex-shrink:0;width:48px;height:48px;border-radius:13px;
  display:grid;place-items:center;
  background:linear-gradient(140deg,var(--sky),#d5e8fb);
  color:var(--blue);font-family:var(--f-display);font-weight:800;font-size:1.05rem;
}
.why-row-body{flex:1;min-width:0}
.why-row-body h3{font-size:1.08rem;color:var(--navy);margin:0 0 8px;line-height:1.35}
.why-row-body p{font-size:.95rem;line-height:1.75;color:var(--slate);margin:0}
@media (max-width:640px){
  .why-row{gap:16px;padding:20px 14px}
  .why-row-num{width:40px;height:40px;font-size:.92rem;border-radius:11px}
  .why-row-body h3{font-size:1rem}
  .why-row-body p{font-size:.92rem}
}

/* ===== Footer socials ===== */
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.09);color:rgba(226,236,247,.85);
  transition:background .28s,color .28s,transform .28s;
}
.socials a svg{width:19px;height:19px}
.socials a:hover{background:var(--blue);color:#fff;transform:translateY(-3px)}
.socials a.ig:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.socials a.fb:hover{background:#1877f2}
.socials a.wa:hover{background:#25d366}

/* ===== SERVICE PAGE — about + image ===== */
.about-split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;max-width:1120px;margin:0 auto}
.about-copy h2{font-size:clamp(1.45rem,3.4vw,2rem);color:var(--navy);margin:10px 0 20px;line-height:1.25}
.about-copy p{font-size:1.01rem;line-height:1.85;color:var(--slate);margin-bottom:18px}
.about-meta{display:flex;gap:16px;flex-wrap:wrap;margin:26px 0 24px}
.about-meta > div{flex:1 1 160px;background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;padding:15px 18px}
.about-meta span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin-bottom:5px;font-weight:700}
.about-meta strong{font-family:var(--f-display);font-size:1.08rem;color:var(--navy)}
.about-figure{margin:0;position:relative;border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(10,37,64,.20)}
.about-figure img{display:block;width:100%;height:460px;object-fit:cover}
.about-figure figcaption{
  position:absolute;left:18px;bottom:18px;right:18px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  border-radius:13px;padding:13px 17px;
}
.about-figure figcaption strong{display:block;font-family:var(--f-display);color:var(--navy);font-size:.95rem}
.about-figure figcaption span{font-size:.8rem;color:var(--slate)}

/* ===== SERVICE PAGE — documents ===== */
.docs-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center;max-width:1120px;margin:0 auto}
.docs-figure{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 22px 52px rgba(10,37,64,.16)}
.docs-figure img{display:block;width:100%;height:420px;object-fit:cover}
.docs-copy h2{font-size:clamp(1.4rem,3.2vw,1.9rem);color:var(--navy);margin:10px 0 14px}
.docs-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.docs-list li{display:flex;gap:13px;align-items:flex-start;font-size:.96rem;line-height:1.6;color:var(--slate)}
.docs-list li svg{
  width:22px;height:22px;flex-shrink:0;margin-top:2px;padding:4px;border-radius:50%;
  background:var(--green);color:#fff;box-sizing:border-box;
}

@media (max-width:960px){
  .about-split,.docs-split{grid-template-columns:1fr;gap:32px}
  .docs-figure{order:2}
  .about-figure img{height:300px}
  .docs-figure img{height:260px}
}
@media (max-width:640px){
  .about-copy p,.docs-list li{font-size:.94rem}
  .about-figure img{height:230px}
  .docs-figure img{height:210px}
  .about-figure{border-radius:16px}
  .docs-figure{border-radius:16px}
}

/* =========================================================
   ACCESSIBILITY + MOTION  (WCAG 2.2 AA)
   NOTE: the visual theme stays exactly as designed in
   style.css — navy #0a2540, blue #1a6fd4, soft #f6f9fc.
   Semantic tokens below MAP to those existing values; they
   do not replace them.
   ========================================================= */
:root{
  /* Semantic aliases -> existing brand values (no visual change) */
  --t-primary:var(--ink);
  --t-secondary:var(--slate);
  --t-inverse:#ffffff;
  --s-base:var(--bg);
  --s-muted:var(--bg-soft);
  --s-strong:var(--blue);
  --s-strong-hover:var(--navy);

  /* Radii -> existing scale */
  --r-xs:10px;
  --r-sm:var(--radius);        /* 16px */
  --r-md:var(--radius-lg);     /* 24px */
  --r-pill:999px;

  /* Motion */
  --m-instant:150ms;
  --m-fast:200ms;
  --m-normal:300ms;
  --m-slow:700ms;
}

/* Focus visible on every interactive element */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}
.header a:focus-visible,
.header button:focus-visible,
.mnav a:focus-visible,
.mnav button:focus-visible,
.footer a:focus-visible{outline-color:#ffffff}

/* Skip link */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:1000;
  background:#fff;color:var(--navy);
  padding:12px 20px;border-radius:0 0 10px 0;font-weight:600;
  box-shadow:var(--shadow);
}
.skip-link:focus{left:0}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important;transform:none !important}
}

/* Minimum 44px touch targets */
.mnav-link,.mnav-acc-btn,.mnav-sub,.mega-trigger,.btn,.fz-tab{min-height:44px}
.mnav-sub{display:flex;align-items:center}

/* ===== FREE ZONES PAGE (moved out of the page so it loads with the rest) ===== */
.fz-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.fz-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.fz-tag{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:20px;margin-bottom:12px}
.fz-card h3{font-size:1.05rem;color:var(--navy);margin-bottom:5px}
.fz-specs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;padding:12px;background:var(--bg-soft);border-radius:10px}
.fz-spec{font-size:.8rem}
.fz-sl{display:block;color:var(--slate);font-size:.72rem;margin-bottom:2px}
.fz-spec strong{color:var(--navy);font-size:.84rem}
.fz-card-btn{display:inline-block;margin-top:14px;font-size:.84rem;font-weight:600;color:var(--blue);text-decoration:none;padding:8px 0}
.fz-card-btn:hover{color:var(--navy)}

/* Emirate filter tabs — styled before first paint, no flash of unstyled buttons */
.fz-tab{
  padding:10px 20px;border-radius:999px;font-size:.86rem;font-weight:600;cursor:pointer;
  border:1.5px solid transparent;font-family:var(--f-body);
  background:var(--bg-soft);color:var(--ink);white-space:nowrap;
  transition:background .25s,color .25s,border-color .25s;
}
.fz-tab:hover{background:var(--sky);color:var(--blue)}
.fz-tab.active{background:var(--blue);color:#fff}

.fz-lbl{display:block;font-size:.8rem;font-weight:600;color:var(--navy);margin-bottom:6px}
.fz-inp{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);font-family:inherit;font-size:.92rem;transition:border-color .25s;box-sizing:border-box}
.fz-inp:focus{outline:none;border-color:var(--blue)}

/* Services page card hover (was also inline) */
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.svc-card:hover .svc-card-bar{transform:scaleX(1)}

/* ===== Phone field with country code ===== */
.phone-field{display:flex;gap:8px;align-items:stretch}
.phone-cc{
  flex:0 0 auto;width:132px;padding:12px 10px;border-radius:11px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:inherit;font-size:.88rem;cursor:pointer;box-sizing:border-box;
}
.phone-cc:focus{outline:none;border-color:var(--blue)}
.phone-num{
  flex:1;min-width:0;padding:13px 15px;border-radius:11px;
  border:1px solid var(--line);font-family:inherit;font-size:.95rem;box-sizing:border-box;
}
.phone-num:focus{outline:none;border-color:var(--blue)}
/* Dark cards (hero / service hero forms) */
.orbit-card .phone-cc,.orbit-card .phone-num{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
}
.orbit-card .phone-cc option{background:var(--navy);color:#fff}
.orbit-card .phone-cc:focus,.orbit-card .phone-num:focus{border-color:var(--blue-bright)}
.orbit-card .phone-num::placeholder{color:rgba(226,236,247,.45)}
@media (max-width:420px){
  .phone-field{flex-direction:column}
  .phone-cc{width:100%}
}

/* =========================================================
   COST CALCULATOR — three-panel layout, brand colours
   ========================================================= */
.calc-shell{
  display:grid;grid-template-columns:1fr 1.05fr .95fr;gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);
}

/* --- Left: pitch --- */
.calc-intro{padding:38px 32px}
.calc-intro h2{font-size:clamp(1.5rem,3vw,2rem);line-height:1.2;margin:10px 0 16px;color:var(--navy)}
.calc-intro h2 em{font-style:italic;color:var(--blue);font-weight:700}
.calc-intro > p{font-size:.95rem;line-height:1.7;color:var(--slate);margin-bottom:22px}
.calc-points{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px}
.calc-points li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--ink);line-height:1.5}
.cp-ic{
  flex-shrink:0;width:21px;height:21px;border-radius:50%;padding:4px;box-sizing:border-box;
  background:var(--sky);color:var(--blue);display:grid;place-items:center;margin-top:1px;
}
.cp-ic svg{width:100%;height:100%}
.calc-rating{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;
  border:1px solid var(--line);border-radius:999px;font-size:.85rem;color:var(--slate);
}
.calc-rating .stars{color:var(--gold);letter-spacing:1px}
.calc-rating strong{color:var(--navy)}
.calc-note{font-size:.82rem;color:var(--slate);margin-top:14px}

/* --- Middle: picker --- */
.calc-picker{padding:32px 28px;border-left:1px solid var(--line);border-right:1px solid var(--line);background:var(--bg-soft)}
.calc-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.calc-picker-head h3{font-size:1.15rem;color:var(--navy);margin:0}
.calc-live{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blue);background:var(--sky);padding:5px 11px;border-radius:999px;
}
.calc-step-label{
  font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);margin:0 0 11px;
}
.calc-zones{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.calc-zone{
  position:relative;text-align:left;padding:14px 13px;border-radius:13px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);font-family:var(--f-body);
  transition:border-color .22s,box-shadow .22s,transform .22s;
}
.calc-zone:hover{border-color:var(--blue-bright)}
.calc-zone.selected{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,111,212,.13)}
.cz-name{display:block;font-weight:700;color:var(--navy);font-size:.92rem;margin-bottom:2px}
.cz-emirate{display:block;font-size:.76rem;color:var(--slate)}
.cz-tag{
  position:absolute;top:11px;right:11px;font-size:.62rem;font-weight:700;
  letter-spacing:.05em;padding:3px 8px;border-radius:999px;
  background:var(--sky);color:var(--blue);
}
.calc-zone.selected .cz-tag{background:var(--blue);color:#fff}
.calc-visas{display:flex;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.calc-visa{
  flex:1;min-width:52px;padding:13px 0;border-radius:12px;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);font-family:var(--f-display);
  font-weight:700;font-size:1rem;color:var(--navy);transition:.22s;
}
.calc-visa:hover{border-color:var(--blue-bright)}
.calc-visa.selected{background:var(--blue);border-color:var(--blue);color:#fff}
.calc-visa-note{font-size:.79rem;color:var(--slate);margin:0 0 18px}
.calc-included{display:flex;gap:16px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--line)}
.calc-included span{font-size:.79rem;color:var(--slate);display:flex;align-items:center;gap:5px}
.calc-included span::before{content:"✓";color:var(--green);font-weight:700}

/* --- Right: quote panel --- */
.calc-quote{
  padding:32px 28px;color:#fff;
  background:radial-gradient(520px 380px at 80% 0%,rgba(26,111,212,.28),transparent),
             linear-gradient(165deg,#071b30,#0a2540 60%,#123a63);
}
.calc-quote-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.cq-label{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(226,236,247,.72)}
.cq-chip{font-size:.72rem;font-weight:600;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;white-space:nowrap}
.cq-lock{font-size:.92rem;color:rgba(226,236,247,.86);margin:0 0 18px;display:flex;align-items:center;gap:8px}
.cq-lock::before{content:"🔒";font-size:.95rem}
.cq-input{
  width:100%;padding:13px 15px;margin-bottom:11px;border-radius:12px;box-sizing:border-box;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-family:inherit;font-size:.95rem;
}
.cq-input::placeholder{color:rgba(226,236,247,.5)}
.cq-input:focus{outline:none;border-color:var(--blue-bright);background:rgba(255,255,255,.12)}
.calc-quote .phone-field{margin-bottom:11px}
.calc-quote .phone-cc,.calc-quote .phone-num{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;
}
.calc-quote .phone-cc option{background:var(--navy);color:#fff}
.calc-quote .phone-num::placeholder{color:rgba(226,236,247,.5)}
.cq-submit{
  width:100%;padding:15px;border:none;border-radius:12px;cursor:pointer;
  background:var(--blue);color:#fff;font-family:var(--f-display);font-weight:700;font-size:1rem;
  transition:background .25s,transform .25s;
}
.cq-submit:hover{background:var(--blue-bright);transform:translateY(-2px)}
.cq-private{font-size:.76rem;color:rgba(226,236,247,.6);text-align:center;margin-top:11px}
.cq-success{text-align:center;padding:22px 0}
.cq-success h3{color:#fff;margin-bottom:8px}
.cq-success p{color:rgba(226,236,247,.8);font-size:.92rem}

@media (max-width:1080px){
  .calc-shell{grid-template-columns:1fr 1fr}
  .calc-intro{grid-column:1 / -1;border-bottom:1px solid var(--line)}
  .calc-picker{border-left:none}
}
@media (max-width:760px){
  .calc-shell{grid-template-columns:1fr}
  .calc-picker{border-left:none;border-right:none;border-bottom:1px solid var(--line)}
  .calc-intro,.calc-picker,.calc-quote{padding:26px 20px}
  .calc-zones{grid-template-columns:1fr}
}