/* ============================================================
   HMG INTERNATIONAL — SITE STYLESHEET
   Every colour, font and radius lives in :root.
   Change --brand here and the whole site follows.
   ============================================================ */

:root{
  /* brand */
  --brand:#16A34A;        /* action green */
  --brand-2:#22C55E;      /* bright accent */
  --brand-l:#DCFCE7;      /* pale tint */
  --brand-d:#0B3D22;      /* deep green — hero, dark bands */
  --brand-dd:#07260F;     /* near-black green — footer */

  /* extended scale */
  --g-50:#F3FBF6;         /* barely-there wash */
  --g-100:#E3F6EA;        /* soft mint — announcement bar */
  --g-200:#C3E9D3;        /* border on mint */
  --g-300:#8FD3AC;        /* muted sage */
  --g-500:#2E9E5B;        /* nav hover, mid green */
  --g-600:#15803D;        /* pressed / darker action */
  --g-700:#12603A;        /* card accents on dark */
  --g-pill:#0D4B2A;       /* header pill — emerald, sits above the hero */
  --g-cta:#22C55E;        /* call to action — the brightest green on the page */

  /* neutrals */
  --white:#fff;
  --paper:#FBFCFB;
  --line:#E4EBE6;
  --line2:#CFDCD4;
  --ink:#0A1F13;
  --body:#41544A;
  --muted:#7B8D83;

  /* layout */
  --wrap:1240px;
  --r:20px;
  --e:cubic-bezier(.16,1,.3,1);
  --sh:0 1px 3px rgba(10,31,19,.05),0 12px 30px rgba(10,31,19,.07);
  --sh2:0 6px 18px rgba(10,31,19,.09),0 30px 60px rgba(10,31,19,.13);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--white);color:var(--body);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:'Bricolage Grotesque',system-ui,sans-serif;color:var(--ink);
  line-height:1.02;letter-spacing:-.04em;font-weight:700}
h1{font-size:clamp(2.3rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3.1rem)}
h3{font-size:1.14rem;line-height:1.25;letter-spacing:-.028em;font-weight:600}
h4{font-size:1rem;letter-spacing:-.02em;font-weight:600}
p{font-size:1rem}
.lede{font-size:clamp(1rem,2.2vw,1.12rem);max-width:58ch}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

.tag{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brand);margin-bottom:16px}
.tag::before{content:'';width:24px;height:1px;background:var(--brand)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e),transform .8s var(--e)}
.rv.in{opacity:1;transform:none}
.rv[data-d="1"]{transition-delay:.09s}
.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}
.rv[data-d="4"]{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--ink);
  color:#fff;font-size:.9rem;font-weight:600;padding:13px 24px;border-radius:99px;border:0;
  cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background .28s,transform .28s var(--e),box-shadow .28s}
.btn:hover{background:var(--brand);transform:translateY(-2px);box-shadow:0 12px 28px rgba(22,163,74,.3)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .3s var(--e)}
.btn:hover svg{transform:translateX(4px)}
.btn-green{background:var(--g-cta);color:#06240F}
.btn-green:hover{background:#4ADE80;color:#06240F;box-shadow:0 12px 30px rgba(34,197,94,.4)}
.btn-l{background:var(--brand-l);color:var(--brand-d)}
.btn-l:hover{background:var(--brand);color:#fff}
.btn-w{background:#fff;color:var(--ink)}
.btn-w:hover{background:var(--brand);color:#fff}
.btn-g{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26)}
.btn-g:hover{background:rgba(255,255,255,.24);box-shadow:none}

/* ============================================================
   ANNOUNCEMENT + GREEN HEADER
   ============================================================ */
.ann{background:var(--g-100);color:var(--brand-d);font-size:.82rem;overflow:hidden;
  border-bottom:1px solid var(--g-200)}
.ann .wrap{display:flex;align-items:center;gap:12px;height:40px}
.ann .lbl{background:var(--g-600);color:#fff;font-size:.64rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;flex-shrink:0}
.ann .slot{position:relative;flex:1;height:22px;overflow:hidden;min-width:0}
.ann .slot i{position:absolute;inset:0;font-style:normal;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;opacity:0;transform:translateY(100%);
  transition:opacity .5s var(--e),transform .5s var(--e)}
.ann .slot i.on{opacity:1;transform:none}
.ann a{color:var(--g-600);font-weight:600;flex-shrink:0;font-size:.8rem;transition:color .25s}
.ann a:hover{color:var(--brand-d)}

.site-head{position:sticky;top:14px;z-index:95;background:transparent;padding:0 24px;
  margin:14px 0 -96px}
.site-head .wrap.nr{display:flex;align-items:center;justify-content:space-between;gap:18px;
  height:68px;padding:0 10px 0 26px;border-radius:999px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--g-200);
  box-shadow:0 12px 34px rgba(3,18,9,.28);
  transition:background .35s,border-color .35s,box-shadow .35s,border-radius .35s}
.site-head.stuck .wrap.nr{background:#fff;border-color:var(--g-200);
  box-shadow:0 14px 40px rgba(3,18,9,.16)}
.site-head.open .wrap.nr{border-radius:26px 26px 0 0;background:#fff}
.brand{display:flex;align-items:center;flex-shrink:0}
.brand img{height:38px;width:auto}
.nl{display:flex;gap:2px;list-style:none;align-items:center}
.nl>li{position:relative}
.nl>li>a{display:flex;align-items:center;gap:6px;font-size:.92rem;font-weight:500;color:var(--body);
  padding:10px 16px;border-radius:99px;transition:background .25s,color .25s}
.nl>li>a:hover,.nl>li.current>a{background:var(--g-100);color:var(--brand-d)}
.nl .caret{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .25s}
.nl>li:hover .caret{transform:rotate(180deg)}

/* mega dropdown */
.mega{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%) translateY(10px);
  width:min(1120px,94vw);background:#fff;border:1px solid var(--line);border-radius:26px;
  box-shadow:0 24px 70px rgba(3,18,9,.26);padding:0;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .3s var(--e),transform .3s var(--e),visibility .3s}
.nl>li:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.mega-inner{display:grid;grid-template-columns:236px 1fr}

/* left panel */
.mega-aside{background:var(--brand-d);padding:26px 24px;display:flex;flex-direction:column;
  justify-content:space-between;position:relative;overflow:hidden}
.mega-aside::before{content:'';position:absolute;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.22),transparent 62%);top:-140px;right:-120px}
.mega-aside > *{position:relative;z-index:2}
.mega-aside b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:2.1rem;
  font-weight:800;color:#fff;line-height:1;letter-spacing:-.045em}
.mega-aside span{display:block;font-size:.84rem;color:#A9CFB8;margin-top:8px;line-height:1.6}
.mega-aside .mega-cta{margin-top:22px}

/* country columns */
.mega-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:22px 24px 20px}
.mega-col{padding-right:14px}
.mega-col + .mega-col{border-left:1px solid var(--line);padding-left:14px}
.mega-col > b{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.mega-col > b i{font-style:normal;font-size:.66rem;font-weight:600;color:var(--brand);
  background:var(--g-100);padding:2px 7px;border-radius:99px}

.mega-col a{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:10px;
  font-size:.87rem;color:var(--ink);line-height:1.25;
  transition:background .22s,transform .22s var(--e)}
.mega-col a:hover{background:var(--g-100);transform:translateX(3px)}
.mega-col a[aria-current]{background:var(--brand-d);color:#fff}
.mega-flag{flex:0 0 24px;width:24px;height:24px;min-width:24px;max-width:24px;
  min-height:24px;max-height:24px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  align-self:center;box-shadow:0 0 0 1px rgba(3,18,9,.14)}
.mega-flag img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.mega-col a span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mega-col a em{font-style:normal;font-size:.63rem;font-weight:700;letter-spacing:.03em;
  color:var(--muted);flex-shrink:0}
.mega-col a:hover em{color:var(--brand)}
.mega-col a[aria-current] em{color:var(--g-300)}

.mega-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:14px 24px;background:var(--g-50);border-top:1px solid var(--line);
  font-size:.82rem;color:var(--muted)}

/* mega menu at narrower desktop widths */
@media(max-width:1240px){
  .mega{width:min(96vw,1060px)}
  .mega-inner{grid-template-columns:200px 1fr}
  .mega-cols{grid-template-columns:repeat(2,1fr);gap:0 4px}
  .mega-col:nth-child(3){border-left:0;padding-left:0}
  .mega-col{padding-bottom:14px}
}

/* mobile destinations accordion */
.mob-dest{border-bottom:1px solid var(--line)}
.mob-dest summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;
  align-items:center;padding:13px 0;font-size:1rem;font-weight:500;color:var(--body)}
.mob-dest summary::-webkit-details-marker{display:none}
.mob-dest summary::after{content:'+';font-size:1.3rem;font-weight:300;color:var(--brand);
  transition:transform .3s var(--e)}
.mob-dest[open] summary::after{transform:rotate(45deg)}
.mob-list{max-height:46vh;overflow-y:auto;padding:4px 0 14px;-webkit-overflow-scrolling:touch}
.mob-list b{display:block;font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:12px 0 6px}
.mob-list a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;
  border-bottom:0;font-size:.92rem;background:var(--g-50);margin-bottom:6px}
.mob-list .mega-flag{flex:0 0 26px;width:26px;height:26px;min-width:26px;max-width:26px;
  min-height:26px;max-height:26px}
.mob-list a img{max-width:100%;height:auto}
.mob-list a em{font-style:normal;font-size:.68rem;color:var(--muted);margin-left:auto}

.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;
  transition:transform .3s var(--e),opacity .3s}
.site-head.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-head.open .burger span:nth-child(2){opacity:0}
.site-head.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mob{display:none;max-width:var(--wrap);margin:0 auto;background:#fff;
  border-top:1px solid var(--g-200);border-radius:0 0 26px 26px;
  box-shadow:0 14px 40px rgba(3,18,9,.16);overflow:hidden}
.site-head.open .mob{display:block}
.mob>.wrap{padding:6px 26px 20px}
.mob ul{list-style:none;padding:8px 0}
.mob a{display:block;padding:13px 0;font-size:1rem;font-weight:500;color:var(--body);
  border-bottom:1px solid var(--line)}
.mob img{max-width:100%;height:auto}
.mob li:last-child a{border-bottom:0}
.mob .btn{width:100%;margin-top:14px}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.phero{background:var(--brand-d);padding:150px 0 84px;position:relative;overflow:hidden}
.phero::before{content:'';position:absolute;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,197,94,.16),transparent 62%);top:-320px;right:-200px}
.phero .wrap{position:relative;z-index:2}
.crumb{font-size:.8rem;color:#7FB795;margin-bottom:16px}
.crumb a:hover{color:#fff}
.phero h1{color:#fff;max-width:18ch}
.phero .lede{color:#A9CFB8;margin-top:18px}
.phero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.pill{font-size:.74rem;font-weight:600;padding:6px 14px;border-radius:99px;
  background:rgba(255,255,255,.1);color:#C8E6D4;border:1px solid rgba(255,255,255,.14)}
.pill.live{background:var(--brand);color:#fff;border-color:transparent}

section{padding:84px 0}
.sec-tint{background:var(--brand-l)}
.sec-paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-dark{background:var(--brand-d)}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark p,.sec-dark .lede{color:#A9CFB8}
.head{max-width:58ch;margin-bottom:42px}
.head p{margin-top:16px}
.head.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;
  gap:26px;flex-wrap:wrap}

/* ---------- generic cards ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;
  transition:transform .38s var(--e),box-shadow .38s}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.card .num{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;
  color:var(--muted);letter-spacing:.1em;margin-bottom:16px}
.card .ic{width:48px;height:48px;border-radius:14px;background:var(--brand-l);display:flex;
  align-items:center;justify-content:center;margin-bottom:18px;
  transition:background .35s,transform .35s var(--e)}
.card:hover .ic{background:var(--brand);transform:rotate(-7deg)}
.card .ic svg{width:22px;height:22px;stroke:var(--brand);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.card:hover .ic svg{stroke:#fff}
.card h3{margin-bottom:9px}
.card p{font-size:.9rem}

.cgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.cc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;
  transition:transform .35s var(--e),box-shadow .35s}
.cc:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--brand)}
.cc{display:block;position:relative}
a.cc::after{content:'→';position:absolute;top:20px;right:20px;color:var(--brand);opacity:0;
  transform:translateX(-6px);transition:opacity .28s,transform .28s var(--e)}
a.cc:hover::after{opacity:1;transform:none}
/* footer certificate list runs in two columns when it gets long */
.fg ul.certs{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
.cc b{font-family:'Bricolage Grotesque',sans-serif;font-size:1.55rem;font-weight:800;
  color:var(--brand);display:block;margin-bottom:7px;letter-spacing:-.045em}
.cc p{font-size:.9rem}

/* ---------- stats ---------- */
.stats{display:flex;flex-wrap:wrap;gap:30px;padding-top:28px;border-top:1px solid var(--line)}
.stats div b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.9rem;
  font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.05em}
.stats div span{font-size:.8rem;color:var(--muted);margin-top:5px;display:block}
.sec-dark .stats{border-color:rgba(255,255,255,.14)}
.sec-dark .stats div b{color:#fff}
.sec-dark .stats div span{color:#7FB795}

/* ---------- timeline ---------- */
.tline{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--line2);margin-bottom:36px}
.tl{padding:22px 22px 0 0;position:relative}
.tl::before{content:'';position:absolute;top:-7px;left:0;width:12px;height:12px;border-radius:50%;
  background:var(--line2);border:2px solid var(--brand-l)}
.tl.on::before{background:var(--brand);box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.ty{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.78rem;
  color:var(--brand);letter-spacing:.06em;margin-bottom:8px}
.tl b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1rem;font-weight:700;
  color:var(--ink);letter-spacing:-.025em;margin-bottom:6px;line-height:1.25}
.tl p{font-size:.85rem;margin:0}

/* ---------- FAQ ---------- */
.faq{max-width:880px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:18px;margin-bottom:11px;
  transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:var(--sh);border-color:var(--line2)}
.faq summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;justify-content:space-between;
  gap:20px;align-items:center;font-family:'Bricolage Grotesque',sans-serif;font-size:1.06rem;
  font-weight:600;color:var(--ink);letter-spacing:-.025em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:Inter,sans-serif;font-weight:400;font-size:1.45rem;
  color:var(--brand);transition:transform .34s var(--e);flex-shrink:0}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .a{padding:0 24px 22px;font-size:.95rem}

/* ---------- order slot ---------- */
.ordercard{background:#fff;border:1px solid var(--line);border-radius:26px;padding:34px;box-shadow:var(--sh)}
.orderhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  margin-bottom:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.orderhead h2{margin-bottom:8px}
.orderhead p{font-size:.98rem;max-width:46ch;margin:0}
.formslot{border:1.5px dashed var(--line2);border-radius:18px;background:var(--brand-l);padding:26px;
  text-align:center}
.formslot b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1rem;
  color:var(--brand-d);margin-bottom:8px}
.formslot span{font-size:.88rem;color:var(--muted)}

/* ---------- CTA ---------- */
.ctabox{background:var(--ink);border-radius:34px;padding:60px 32px;text-align:center;
  position:relative;overflow:hidden}
.ctabox::before{content:'';position:absolute;width:540px;height:540px;border-radius:50%;
  background:rgba(22,163,74,.26);top:-250px;left:50%;transform:translateX(-50%);filter:blur(18px)}
.ctabox>*{position:relative;z-index:2}
.ctabox h2{color:#fff}
.ctabox h2 .hl{background:var(--brand);padding:0 .16em;border-radius:14px;display:inline-block;
  transform:rotate(-1.4deg)}
.ctabox p{color:#9EB3A6;margin:20px auto 30px;max-width:46ch}
.crow{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--brand-dd);color:#93AF9F;padding:66px 0 0}
.fg{display:grid;grid-template-columns:1.9fr 1fr 1fr 1.5fr;gap:44px;padding-bottom:46px}
.fg h4{font-size:.68rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#6E8C7B;margin-bottom:17px;font-family:Inter,sans-serif}
.fg ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.fg a,.fg li{font-size:.9rem;color:#93AF9F;transition:color .25s}
.fg a:hover{color:var(--brand-2)}
.fbrand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.flogo{height:38px;width:auto;margin:0}
.fname{font-family:'Bricolage Grotesque',sans-serif;font-size:1.05rem;font-weight:700;
  color:#fff;letter-spacing:-.03em;line-height:1.1}
@media(max-width:660px){.fbrand{gap:10px}.fname{font-size:.98rem}}
.fcontact{display:flex;flex-direction:column;gap:13px}
.fcontact a,.fcontact div{display:flex;align-items:flex-start;gap:10px;font-size:.9rem}
.fcontact svg{width:15px;height:15px;stroke:var(--brand-2);fill:none;stroke-width:1.9;
  flex-shrink:0;margin-top:5px}
address{font-style:normal;font-size:.88rem;line-height:1.8}
.fb{border-top:1px solid rgba(255,255,255,.09);padding:26px 0 30px;display:flex;
  flex-direction:column;justify-content:center;align-items:center;gap:12px;font-size:.83rem;
  color:#6E8C7B;text-align:center}
.credit{display:inline-flex;align-items:center;gap:9px;font-size:.82rem;color:#8AA697;
  transition:color .25s}
.credit:hover{color:#fff}

/* the logo is a JPEG on white, so it sits in its own light chip
   rather than showing a hard white rectangle on the dark footer */
.credit-mark{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);transition:transform .28s var(--e)}
.credit:hover .credit-mark{transform:scale(1.08)}
.credit-mark img{width:100%;height:100%;object-fit:cover;display:block}
.credit-text{white-space:nowrap}
@media(max-width:660px){
  .fb{padding-bottom:88px}
  .wa{right:16px;bottom:16px;width:52px;height:52px}
}
.socials{display:flex;gap:10px;margin-top:20px}
.socials a{width:40px;height:40px;border-radius:50%;background:var(--brand);display:flex;
  align-items:center;justify-content:center;flex-shrink:0;
  transition:background .28s,transform .28s var(--e),box-shadow .28s}
.socials a:hover{background:var(--g-cta);transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(34,197,94,.35)}
.socials svg{width:17px;height:17px;fill:#fff;transition:fill .28s}

/* small set in the announcement bar */
.ann .socials{margin:0;gap:6px}
.ann .socials a{width:26px;height:26px;background:rgba(18,96,58,.12)}
.ann .socials a:hover{background:var(--brand)}
.ann .socials svg{width:13px;height:13px;fill:var(--g-600)}
.ann .socials a:hover svg{fill:#fff}

/* ---------- floating WhatsApp ---------- */
.wa{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,.42);transition:transform .35s var(--e),opacity .3s}
.wa::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:wa-ring 2.6s ease-out infinite}
@keyframes wa-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.wa::after{animation:none;opacity:0}}
.wa:hover{transform:scale(1.1)}
.wa.tuck{opacity:0;transform:scale(.5);pointer-events:none}
.wa svg{width:27px;height:27px;fill:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1020px){
  .cards,.cgrid{grid-template-columns:1fr 1fr}
  .nl,.mega{display:none}
  .mob-dest{display:block}
  .burger{display:block}
  .nr .btn{display:none}
  .tline{grid-template-columns:1fr 1fr}
  .fg{grid-template-columns:1fr 1fr;gap:34px}
  section{padding:60px 0}
  .phero{padding:124px 0 62px}
}
@media(max-width:660px){
  .wrap{padding:0 18px}
  .ann a{display:none}
  .cards,.cgrid{grid-template-columns:1fr}
  .tline{grid-template-columns:1fr}
  .fg{grid-template-columns:1fr}
  .ordercard{padding:22px;border-radius:20px}
  .ctabox{padding:44px 22px;border-radius:26px}
  .site-head{top:8px;padding:0 14px;margin:10px 0 -80px}
  .phero{padding:108px 0 56px}
  .site-head .wrap.nr{height:58px;padding:0 8px 0 18px}
  .mob>.wrap{padding:6px 18px 16px}
  .brand img{height:30px}
  .socials{margin-right:70px}
}

/* ============================================================
   NEWS, SINGLE POST, SEARCH
   ============================================================ */
.narts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.art{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transition:transform .38s var(--e),box-shadow .38s}
.art:hover{transform:translateY(-7px);box-shadow:var(--sh2)}
.art .th{aspect-ratio:16/10;background:var(--brand-l);overflow:hidden}
.art .th img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--e)}
.art:hover .th img{transform:scale(1.07)}
.art .bd{padding:22px}
.art .mt{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.art .c{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  background:var(--brand-l);color:var(--brand-d);padding:5px 11px;border-radius:99px}
.art .d{font-size:.78rem;color:var(--muted)}
.art h3{margin-bottom:8px;font-size:1.02rem;line-height:1.3}
.art p{font-size:.88rem}

.pager{display:flex;justify-content:center;gap:8px;margin-top:36px}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;
  height:40px;padding:0 12px;border:1px solid var(--line2);border-radius:99px;font-size:.9rem;
  transition:all .25s}
.pager .page-numbers:hover{border-color:var(--brand);background:var(--brand-l)}
.pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}

.hmg-post{font-size:1.04rem;line-height:1.85;max-width:70ch}
.hmg-post .post-hero{margin:0 0 30px;border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.hmg-post h2{font-size:1.8rem;margin:38px 0 14px}
.hmg-post h3{font-size:1.24rem;margin:30px 0 10px}
.hmg-post p{margin-bottom:18px}
.hmg-post ul,.hmg-post ol{margin:0 0 20px 22px}
.hmg-post li{margin-bottom:8px}
.hmg-post a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.hmg-post img{border-radius:16px;margin:24px 0}
.hmg-post blockquote{border-left:3px solid var(--brand);padding:4px 0 4px 22px;margin:26px 0;
  font-size:1.1rem;color:var(--ink)}

.search-form{display:flex;gap:10px;max-width:520px}
.search-form label{flex:1}
.search-form input[type=search]{width:100%;font-family:inherit;font-size:1rem;padding:14px 16px;
  border:1px solid var(--line2);border-radius:12px;outline:none;transition:border-color .25s,box-shadow .25s}
.search-form input[type=search]:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(22,163,74,.13)}
.search-form input[type=submit]{background:var(--ink);color:#fff;border:0;border-radius:99px;
  padding:14px 26px;font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
  transition:background .25s}
.search-form input[type=submit]:hover{background:var(--brand)}

/* plain destination grid, used on news, 404 and search */
.creg-label{font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);
  margin:0 0 9px}
.creg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:7px;margin-bottom:20px}
.creg-grid a{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:11px 14px;font-size:.9rem;color:var(--ink);
  transition:transform .3s var(--e),border-color .3s}
.creg-grid a:hover{transform:translateY(-3px);border-color:var(--brand)}
.creg-grid a[aria-current]{background:var(--brand-d);color:#fff;border-color:var(--brand-d)}
.creg-grid em{font-style:normal;font-size:.72rem;color:var(--muted)}
.creg-grid a[aria-current] em{color:#7FB795}

@media(max-width:1020px){
  .narts{grid-template-columns:1fr 1fr}
  .hmg-post + aside,section .wrap>aside{grid-column:1/-1}
}
@media(max-width:660px){
  .narts{grid-template-columns:1fr}
  .search-form{flex-direction:column}
}

/* ============================================================
   COUNTRY PAGE
   ============================================================ */
.cstats{background:transparent;position:relative;z-index:4;margin-top:-34px}
.cstats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.cstat{position:relative;background:var(--paper);border:1px solid var(--g-200);border-radius:20px;
  padding:26px 20px;text-align:center;overflow:hidden;
  box-shadow:0 2px 6px rgba(3,18,9,.06),0 18px 40px rgba(3,18,9,.14);
  transition:transform .35s var(--e),box-shadow .35s,border-color .35s}
.cstat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--brand);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--e)}
.cstat:hover{transform:translateY(-6px);border-color:var(--g-300);
  box-shadow:0 4px 10px rgba(3,18,9,.08),0 26px 56px rgba(3,18,9,.2)}
.cstat:hover::before{transform:scaleX(1)}
.cstat b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-size:1.7rem;font-weight:800;
  color:var(--brand-d);line-height:1;letter-spacing:-.045em}
.cstat span{display:block;font-size:.74rem;font-weight:500;letter-spacing:.04em;color:var(--muted);
  margin-top:9px}

.cwrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:52px;align-items:start}
.cside{position:sticky;top:100px;display:flex;flex-direction:column;gap:14px}

.cbox{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.cbox h3{margin-bottom:4px}
.cbox .sub{font-size:.84rem;color:var(--muted);margin-bottom:16px}
.cbox .btn{width:100%}
.cbox .btn + .btn{margin-top:9px}

.cfacts{background:var(--g-50);border:1px solid var(--g-200);border-radius:20px;padding:22px}
.cfacts .lbl{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.cfact{padding:11px 0;border-bottom:1px dashed rgba(11,61,34,.16)}
.cfact:last-child{border-bottom:0}
.cfact span{display:block;font-size:.72rem;color:var(--muted)}
.cfact b{display:block;font-size:.95rem;font-weight:600;color:var(--brand-d);margin-top:2px}

.cnear{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.cnear .lbl{font-size:.66rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.cnear a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;
  border:1px solid var(--line);border-radius:11px;margin-bottom:6px;font-size:.88rem;color:var(--ink);
  transition:transform .28s var(--e),border-color .28s}
.cnear a:hover{transform:translateX(4px);border-color:var(--brand)}
.cnear em{font-style:normal;font-size:.72rem;color:var(--muted)}

.cflag{width:100%;border-radius:16px;border:1px solid var(--line);overflow:hidden}
.cflag img{width:100%;display:block}

.cdocs{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cdoc{border:1px solid var(--line);border-radius:16px;padding:18px;background:#fff;
  transition:transform .35s var(--e),box-shadow .35s,border-color .35s;
  opacity:0;transform:translateY(16px)}
.cdoc.in{opacity:1;transform:none}
.cdoc:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--brand)}
.cdoc svg{width:24px;height:24px;stroke:var(--brand);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.cdoc b{display:block;font-size:.98rem;font-weight:600;color:var(--ink);margin:10px 0 4px}
.cdoc p{font-size:.85rem;margin:0}
.cdoc.extra{border-style:dashed;border-color:var(--g-300);background:var(--g-50)}
.cdoc .xtag{display:inline-block;font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);background:#fff;padding:3px 9px;border-radius:99px;
  margin-top:9px}

.cnote{background:var(--g-50);border:1px solid var(--g-200);border-left:4px solid var(--g-500);
  border-radius:14px;padding:15px 18px;font-size:.92rem;color:var(--brand-d);
  line-height:1.75;margin-top:14px}

.crail{position:relative;padding-left:52px;margin-top:8px}
.crail::before{content:'';position:absolute;left:17px;top:10px;bottom:10px;width:2px;background:var(--line)}
.crail-fill{position:absolute;left:17px;top:10px;width:2px;background:var(--brand);height:0;
  transition:height 1.4s var(--e)}
.cstep{position:relative;padding-bottom:34px}
.cstep:last-child{padding-bottom:0}
.cstep .dot{position:absolute;left:-52px;top:-2px;width:36px;height:36px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.8rem;font-weight:700;background:#fff;border:1px solid var(--line2);color:var(--brand);
  transition:all .4s var(--e)}
.cstep.in .dot{background:var(--brand);border-color:var(--brand);color:#fff;transform:rotate(-6deg)}
.cstep.fin.in .dot{background:var(--ink);border-color:var(--ink)}
.cstep .who{display:inline-block;font-size:.62rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:4px 10px;border-radius:6px;background:var(--brand-l);
  color:var(--brand);margin-bottom:8px}
.cstep .sh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:5px}
.cstep .when{font-size:.76rem;color:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace;
  white-space:nowrap}
.cstep p{font-size:.94rem;margin:0;max-width:58ch}

@media(max-width:1020px){
  .cwrap{grid-template-columns:1fr;gap:32px}
  .cside{position:static}
  .cstats .wrap{grid-template-columns:repeat(4,1fr);gap:10px}
  .cstat{padding:20px 12px}
  .cstat b{font-size:1.3rem}
}
@media(max-width:600px){
  .cdocs{grid-template-columns:1fr}
  .cstats .wrap{grid-template-columns:1fr 1fr;gap:10px}
  .cstat{padding:18px 12px;border-radius:16px}
  .cstat b{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){
  .cdoc{opacity:1;transform:none}
  .crail-fill{transition:none}
}

/* ============================================================
   MOTION LAYER
   Applied automatically by hmg.js — no template edits needed.
   Everything here is disabled under prefers-reduced-motion.
   ============================================================ */

/* scroll progress bar */
.hmg-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);
  transform-origin:0 50%;background:var(--brand-2);z-index:120;pointer-events:none;
  transition:transform .1s linear}

/* headline reveal, word by word */
.hmg-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hmg-word i{display:inline-block;font-style:inherit;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.16,1,.3,1);transition-delay:var(--wd)}
.hmg-lit .hmg-word i{transform:none}

/* generic stagger — children animate in sequence */
.stg > *{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--e),transform .7s var(--e);transition-delay:var(--sd)}
.stg.in > *{opacity:1;transform:none}

/* heading underline draw */
.hmg-uline{position:relative;display:inline-block}
.hmg-uline::after{content:'';position:absolute;left:0;bottom:-6px;height:3px;width:100%;
  background:var(--brand);border-radius:2px;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .9s var(--e) .25s}
.in .hmg-uline::after,.hmg-uline.in::after{transform:scaleX(1)}

/* subtle card tilt */
.hmg-tilt{transform-style:preserve-3d;will-change:transform}
.hmg-tilt > *{transform:translateZ(18px)}

/* button shine */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:'';position:absolute;inset:0;z-index:-1;transform:translateX(-120%) skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:transform .7s var(--e)}
.btn:hover::after{transform:translateX(120%) skewX(-18deg)}

/* nav underline sweep */
.nl>li>a::before{content:'';position:absolute;left:16px;right:16px;bottom:6px;height:1.5px;
  background:var(--brand);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .35s var(--e);border-radius:2px}
.nl>li>a:hover::before{transform:scaleX(1)}

/* image wipe reveal */
.hmg-wipe{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--e)}
.hmg-wipe.in{clip-path:inset(0 0 0 0)}

/* floating drift for the sidebar flag */
@keyframes hmg-drift{50%{transform:translateY(-7px)}}
.cflag{animation:hmg-drift 7s ease-in-out infinite}

/* pill pop */
.phero-badges .pill{opacity:0;transform:scale(.85);
  animation:hmg-pop .55s var(--e) forwards;animation-delay:calc(var(--pi,0) * 110ms + 150ms)}
@keyframes hmg-pop{to{opacity:1;transform:none}}

/* link arrow nudge already on .btn svg; add to sidebar rows */
.cnear a::after{content:'→';margin-left:6px;opacity:0;transform:translateX(-6px);
  transition:opacity .28s,transform .28s var(--e);color:var(--brand)}
.cnear a:hover::after{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  .hmg-progress{display:none}
  .hmg-word i{transform:none;transition:none}
  .stg > *{opacity:1;transform:none;transition:none}
  .hmg-uline::after{transform:scaleX(1);transition:none}
  .hmg-wipe{clip-path:none;transition:none}
  .cflag{animation:none}
  .phero-badges .pill{opacity:1;transform:none;animation:none}
  .btn::after{display:none}
}


/* homepage hero also runs behind the floating pill */
.hero{padding-top:150px}
@media(max-width:1020px){.hero{padding-top:124px}}
@media(max-width:660px){.hero{padding-top:108px}}

/* announcement bar keeps its own dark band above the pill */
.ann{position:relative;z-index:96}


/* ============================================================
   DESTINATION SLIDER — used on the homepage, services and
   every country page, so it lives in the shared sheet.
   ============================================================ */
.sl-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.tabs{display:flex;gap:7px;flex-wrap:wrap}
.tab{font-size:.85rem;font-weight:600;padding:9px 18px;border-radius:99px;border:1px solid var(--line2);background:#fff;color:var(--body);cursor:pointer;font-family:inherit;transition:all .28s var(--e)}
.tab:hover{border-color:var(--brand);color:var(--brand-d)}
.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.sl-view{overflow:hidden}
.sl-track{display:flex;transition:transform .6s var(--e)}
.sl-page{flex-shrink:0;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:auto;gap:12px}
.dt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px;transition:transform .35s var(--e),box-shadow .35s,border-color .35s;position:relative}
.dt:hover{transform:translateY(-6px);box-shadow:var(--sh2);border-color:var(--brand)}
.dt .fw{width:100%;aspect-ratio:3/2;border-radius:10px;overflow:hidden;margin-bottom:11px;background:var(--brand-l);box-shadow:0 0 0 1px var(--line),0 2px 8px rgba(10,31,19,.12)}
.dt .fw img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e)}
.dt:hover .fw img{transform:scale(1.09)}
.dt b{display:block;font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.25}
.dt span{display:block;font-size:.7rem;color:var(--muted);margin-top:1px}
.dt .more{display:inline;font-size:.62rem;font-weight:700;color:var(--brand);background:var(--brand-l);padding:1px 5px;border-radius:99px;margin-left:3px}
.dt em{font-style:normal;font-size:.65rem;font-weight:700;color:var(--brand);background:var(--brand-l);padding:3px 8px;border-radius:99px;margin-top:8px;display:inline-block}
.sl-foot{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line2)}
.dots{display:flex;gap:5px}
.dot{width:9px;height:3px;background:var(--line2);border-radius:2px;transition:all .35s}
.dot.on{width:26px;background:var(--brand)}
.snav{display:flex;gap:8px;align-items:center}
.scount{font-size:.8rem;color:var(--muted);margin-right:8px}
.sbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:all .25s}
.sbtn:hover:not(:disabled){border-color:var(--brand);background:var(--brand-l)}
.sbtn:disabled{opacity:.32;cursor:default}
.sbtn svg{width:16px;height:16px;stroke:var(--body);fill:none;stroke-width:2.2}
@media(max-width:1100px){
 .sl-page{grid-template-columns:repeat(5,1fr)}
}
@media(max-width:400px){.sl-page{grid-template-columns:1fr}}


/* ============================================================
   MENU MOTION
   ============================================================ */

/* mega panel — columns then rows cascade in */
.mega-col{opacity:0;transform:translateY(10px);
  transition:opacity .4s var(--e),transform .4s var(--e)}
.nl>li:hover .mega-col{opacity:1;transform:none}
.mega-col:nth-child(1){transition-delay:.02s}
.mega-col:nth-child(2){transition-delay:.08s}
.mega-col:nth-child(3){transition-delay:.14s}
.mega-col:nth-child(4){transition-delay:.20s}

.mega-col a{opacity:0;transform:translateY(6px);
  transition:opacity .32s var(--e),transform .32s var(--e),background .22s}
.nl>li:hover .mega-col a{opacity:1;transform:none}
.mega-col a:nth-child(2){transition-delay:92ms}
.mega-col a:nth-child(3){transition-delay:118ms}
.mega-col a:nth-child(4){transition-delay:144ms}
.mega-col a:nth-child(5){transition-delay:170ms}
.mega-col a:nth-child(6){transition-delay:196ms}
.mega-col a:nth-child(7){transition-delay:222ms}
.mega-col a:nth-child(8){transition-delay:248ms}
.mega-col a:nth-child(9){transition-delay:274ms}
.mega-col a:nth-child(10){transition-delay:300ms}
.mega-col a:nth-child(11){transition-delay:326ms}
.mega-col a:nth-child(12){transition-delay:352ms}
.mega-col a:nth-child(13){transition-delay:378ms}
.mega-col a:nth-child(14){transition-delay:404ms}
.mega-col a:nth-child(15){transition-delay:430ms}

.mega-col > b{opacity:0;transform:translateY(6px);
  transition:opacity .3s var(--e),transform .3s var(--e)}
.nl>li:hover .mega-col > b{opacity:1;transform:none}

.mega-foot{opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--e) .3s,transform .4s var(--e) .3s}
.nl>li:hover .mega-foot{opacity:1;transform:none}

/* flag lifts on row hover */
.mega-col a .mega-flag{transition:transform .3s var(--e),box-shadow .3s}
.mega-col a:hover .mega-flag{transform:scale(1.12) rotate(-3deg);
  box-shadow:0 3px 10px rgba(3,18,9,.22)}

/* certificate code slides in on hover */
.mega-col a em{opacity:.65;transition:opacity .25s,transform .25s var(--e)}
.mega-col a:hover em{opacity:1;transform:translateX(-2px);color:var(--brand)}

/* caret */
.nl .caret{transition:transform .3s var(--e)}

/* mobile drawer — items cascade down */
.mob ul li,.mob-dest{opacity:0;transform:translateY(-8px);
  transition:opacity .35s var(--e),transform .35s var(--e)}
.site-head.open .mob ul li,.site-head.open .mob-dest{opacity:1;transform:none}
.site-head.open .mob-dest{transition-delay:.04s}
.site-head.open .mob ul li:nth-child(1){transition-delay:.10s}
.site-head.open .mob ul li:nth-child(2){transition-delay:.16s}
.site-head.open .mob ul li:nth-child(3){transition-delay:.22s}
.site-head.open .mob .btn{transition-delay:.28s}

/* mobile accordion body */
.mob-dest .mob-list{animation:hmg-drop .38s var(--e) both}
@keyframes hmg-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .mega-col,.mega-col a,.mega-col > b,.mega-foot,
  .mob ul li,.mob-dest{opacity:1;transform:none;transition:none}
  .mob-dest .mob-list{animation:none}
}

/* ============================================================
   PARENT THEME RESET
   Jupiter X wraps page output in a container that caps the width
   and adds padding. These sections are full-bleed by design.

   Margins stay auto — setting them to 0 left-aligns the whole
   page if any max-width survives elsewhere.
   ============================================================ */
body.hmg-themed .jupiterx-site,
body.hmg-themed .jupiterx-site-inner,
body.hmg-themed .jupiterx-main,
body.hmg-themed .jupiterx-main-content,
body.hmg-themed .jupiterx-site-content,
body.hmg-themed .jupiterx-content,
body.hmg-themed .jupiterx-primary,
body.hmg-themed #jupiterx-main,
body.hmg-themed #jupiterx-primary,
body.hmg-themed .jupiterx-container,
body.hmg-themed .jupiterx-container-fluid,
body.hmg-themed .jupiterx-row,
body.hmg-themed .jupiterx-col,
body.hmg-themed .jupiterx-col-12,
body.hmg-themed .jupiterx-boxed{
  max-width:none!important;
  width:100%!important;
  padding-left:0!important;
  padding-right:0!important;
  margin-left:auto!important;
  margin-right:auto!important;
  flex:0 0 100%!important;
  float:none!important;
  box-shadow:none!important;
}

body.hmg-themed .jupiterx-main-content,
body.hmg-themed .jupiterx-site-content{
  padding-top:0!important;
  padding-bottom:0!important;
}

/* belt and braces: any block-level wrapper directly inside main */
body.hmg-themed #jupiterx-main > div,
body.hmg-themed #jupiterx-main > article{
  max-width:none!important;
  width:100%!important;
  margin:0 auto!important;
  padding:0!important;
}

/* the parent theme's own chrome stays hidden */
body.hmg-themed header.jupiterx-header,
body.hmg-themed footer.jupiterx-footer,
body.hmg-themed .jupiterx-header,
body.hmg-themed .jupiterx-footer,
body.hmg-themed .jupiterx-subheader,
body.hmg-themed .jupiterx-subheader-inner,
body.hmg-themed .jupiterx-subheader-title,
body.hmg-themed .jupiterx-breadcrumbs,
body.hmg-themed .jupiterx-page-title,
body.hmg-themed .jupiterx-post-title,
body.hmg-themed .jupiterx-sidebar,
body.hmg-themed .jupiterx-scroll-top,
body.hmg-themed .jupiterx-scroll-to-top,
body.hmg-themed #jupiterx-scroll-top,
body.hmg-themed [class*="scroll-top"],
body.hmg-themed [class*="scroll-to-top"],
body.hmg-themed [id*="scroll-top"],
body.hmg-themed .back-to-top,
body.hmg-themed .jupiterx-title-wrapper,
body.hmg-themed .jupiterx-main-header,
body.hmg-themed .jupiterx-main-header-post-title,
body.hmg-themed .jupiterx-main-header .container,
body.hmg-themed .jupiterx-main-header .breadcrumb,
body.hmg-themed [class*="jupiterx-main-header"],
body.hmg-themed [class*="jupiterx-subheader"],
body.hmg-themed [class*="jupiterx-breadcrumb"]{ display:none!important; }

/* sticky header needs visible overflow on its ancestors */
body.hmg-themed .jupiterx-site,
body.hmg-themed .jupiterx-main,
body.hmg-themed .jupiterx-main-content,
body.hmg-themed #jupiterx-main{ overflow:visible!important }

/* the order form plugin styles itself — keep our typography out of it */
body.hmg-themed .hmg-order-form,
body.hmg-themed .hmg-order-form *{ box-sizing:border-box }
body.hmg-themed .formslot > *{ max-width:none }

/* hide flag images until the script sets a source, so no broken icon flashes */
.ctry-flag img:not([src]),
.ctry-flag img[src=""],
.bflag img:not([src]),
.bflag img[src=""]{visibility:hidden}

/* ============================================================
   FULL-BLEED FALLBACK
   If the parent theme's wrapper still caps the width, these
   top-level blocks break out of it using the viewport. Works
   whatever the wrapper is called, so it does not depend on
   matching Jupiter X's markup.
   ============================================================ */
body.hmg-themed{ overflow-x:hidden }

body.hmg-themed .ann,
body.hmg-themed .site-head,
body.hmg-themed .phero,
body.hmg-themed .hero,
body.hmg-themed .cstats,
body.hmg-themed section,
body.hmg-themed .site-foot{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* the sticky header must not be clipped by the breakout */
body.hmg-themed .site-head{ position:sticky }

/* inner content stays within the normal reading width */
body.hmg-themed .ann > .wrap,
body.hmg-themed .site-head > .wrap,
body.hmg-themed .phero > .wrap,
body.hmg-themed .hero > .wrap,
body.hmg-themed .cstats > .wrap,
body.hmg-themed section > .wrap,
body.hmg-themed .site-foot > .wrap{
  max-width:var(--wrap);
  margin-left:auto;
  margin-right:auto;
}


/* certificate page — country tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}
.tiles .dt{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px}
.tiles .dt .fw{width:100%;aspect-ratio:3/2;border-radius:10px;overflow:hidden;margin-bottom:12px;
  background:var(--brand-l);box-shadow:0 0 0 1px var(--line)}
.tiles .dt .fw img{width:100%;height:100%;object-fit:cover;display:block}
.tiles .dt b{display:block;font-size:.95rem;font-weight:600;color:var(--ink)}
.tiles .dt span{display:block;font-size:.78rem;color:var(--muted);margin-top:2px}
.tiles .dt em{font-style:normal;font-size:.66rem;font-weight:700;color:var(--brand);
  background:var(--brand-l);padding:3px 9px;border-radius:99px;margin-top:9px;display:inline-block}

/* ============================================================
   MOBILE DESTINATIONS LIST
   The generic ".mob a { display:block }" rule sits later in this
   file and was overriding the list layout, which stretched the
   flags to full width. These rules are more specific so order
   no longer matters.
   ============================================================ */
.mob .mob-list{max-height:52vh;overflow-y:auto;padding:6px 0 14px;-webkit-overflow-scrolling:touch}

.mob .mob-list b{display:block;font-size:.6rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:14px 0 8px;padding:0;border:0}

.mob .mob-list a{display:flex!important;align-items:center;gap:11px;
  padding:9px 12px;margin-bottom:6px;border-radius:12px;border-bottom:0;
  background:var(--g-50);font-size:.92rem;font-weight:500;color:var(--ink);line-height:1.3}

.mob .mob-list a .mega-flag{flex:0 0 26px!important;width:26px!important;height:26px!important;
  min-width:26px;max-width:26px;min-height:26px;max-height:26px;
  aspect-ratio:1;border-radius:50%;overflow:hidden;align-self:center;
  box-shadow:0 0 0 1px rgba(3,18,9,.12)}

.mob .mob-list a .mega-flag img{width:100%!important;height:100%!important;
  object-fit:cover;display:block;border-radius:50%;max-width:none}

.mob .mob-list a > span:not(.mega-flag){flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.mob .mob-list a em{font-style:normal;font-size:.68rem;font-weight:700;
  color:var(--muted);flex-shrink:0;margin-left:auto}


/* ============================================================
   COMPONENT SVG GUARD
   The board, slider and documents panel are styled in home.css.
   If that sheet ever fails to load, these caps stop the inline
   SVGs rendering at their natural size as huge black shapes.
   ============================================================ */
.xform svg,.xarrow svg,.xdisc svg,.cert svg,.brow svg,.sl svg,.docstack svg{
  max-width:100%;max-height:100%;width:1em;height:1em;flex-shrink:0}
.xdisc svg,.cert-seal svg{width:18px;height:18px}
.xform{overflow:hidden}