/* =====================================================================
   XSUNT shared styles: Services dropdown, mobile menu & footer
   Linked from every page AFTER the page's own <style> block.
   ===================================================================== */

.nav-cta{display:flex;align-items:center;gap:18px}

.btn-white{background:#fff;color:var(--xblue)}

/* ---------- Services dropdown ---------- */
.nav-links{align-items:center}
.nav-item{position:relative;display:flex;align-items:center}
.nav-trigger{background:none;border:0;cursor:pointer;font:inherit;color:var(--slate);font-size:.95rem;font-weight:500;
  padding:6px 0;position:relative;display:inline-flex;align-items:center;gap:6px;transition:color .2s}
.nav-trigger:hover,.nav-item.open .nav-trigger,.nav-trigger.active{color:var(--ink)}
.nav-trigger::before{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--teal);transition:right .25s ease}
.nav-trigger:hover::before{right:0}
.nav-trigger.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--teal);border-radius:2px}
.nav-trigger .chev{flex:none;width:14px;height:14px;transform-origin:50% 50%;
  transform:scaleY(1);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.nav-item.open .chev{transform:scaleY(-1)}
.dropdown{position:absolute;top:100%;left:50%;min-width:290px;padding-top:14px;
  transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav-item.open .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
/* Open on hover only for a real mouse/trackpad. Touch screens (iPad) use tap only. */
@media (hover:hover) and (pointer:fine){
  .nav-item:hover .chev{transform:scaleY(-1)}
  .nav-item:hover .dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
}
.dropdown-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  padding:8px;display:flex;flex-direction:column;gap:6px}
.nav-links .dropdown a{display:block;padding:12px 14px;border-radius:10px;color:var(--ink);transition:background .15s ease}
.nav-links .dropdown a::before,.nav-links .dropdown a::after{display:none}
.nav-links .dropdown a:hover,.nav-links .dropdown a:focus-visible{background:var(--tint)}
.nav-links .dropdown a.active{background:var(--teal-soft)}
.nav-links .dropdown a.active .dd-title{color:#149181}
.dd-title{display:block;font-weight:600;font-size:.95rem}
.dd-sub{display:block;font-size:.82rem;color:var(--slate);font-weight:400;line-height:1.4;margin-top:2px}

/* ---------- Mobile menu ---------- */
.menu-toggle{display:none;position:relative;width:44px;height:44px;border:0;border-radius:10px;
  background:transparent;cursor:pointer;flex:none}
.menu-toggle:hover{background:rgba(10,18,48,.06)}
.menu-toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .25s ease,opacity .2s ease}
.menu-toggle span:nth-child(1){top:15px}
.menu-toggle span:nth-child(2){top:21px}
.menu-toggle span:nth-child(3){top:27px}
.nav.menu-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.menu-open .menu-toggle span:nth-child(2){opacity:0}
.nav.menu-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none}
.mobile-menu .wrap{padding-top:12px;padding-bottom:24px}
.mobile-menu .m-link{display:block;padding:12px 0;font-size:1.05rem;font-weight:500;color:var(--ink)}
.mobile-menu .m-link.active{color:#149181}
.m-group{padding:12px 0 6px}
.m-label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.m-group a{display:block;margin-left:2px;padding:9px 0 9px 14px;border-left:2px solid transparent;
  color:var(--ink);font-weight:500}
.m-group a.active{border-left-color:var(--teal);color:#149181}
.mobile-menu .btn{width:100%;justify-content:center;margin-top:16px}

@media (max-width:960px){
  .nav-links{display:none}
  .menu-toggle{display:block}
  .mobile-menu{display:block;position:absolute;top:100%;left:0;right:0;background:var(--white);
    border-bottom:1px solid var(--chrome-line);box-shadow:0 24px 40px -24px rgba(10,18,48,.3);
    max-height:calc(100vh - 74px);overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s}
  .nav.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none}
}
@media (min-width:601px){ .mobile-menu .btn{display:none} }
@media (max-width:600px){ .nav-cta .btn-primary{display:none} }

/* ---------- Shared Footer ---------- */
.footer{background:var(--chrome);color:var(--slate);padding:70px 0 36px;font-size:14px;overflow-x:hidden}
.footer a{font-size:14px;color:inherit;transition:color .2s ease,transform .2s ease}
.footer a:hover{color:var(--xblue)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:10px}
.footer h5{color:var(--ink);font-family:'Inter',sans-serif;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:16px;font-weight:600}
.footer-tagline{margin-top:16px;margin-bottom:0;font-size:14px;color:var(--slate);white-space:nowrap}
.compliance{display:flex;gap:10px;margin-top:20px}
.compliance span{border:1px solid var(--chrome-line);border-radius:8px;padding:5px 12px;
  font-size:.75rem;font-weight:600;letter-spacing:.06em;color:var(--slate)}

/* Column content */
.footer-country{font-family:'Inter',sans-serif;font-weight:600;color:var(--ink);font-size:14px;margin-bottom:8px}
.footer-address{color:var(--slate);font-size:14px;line-height:1.6;white-space:nowrap}
.footer-phone{color:var(--slate);font-size:14px;line-height:1.6;margin-top:14px;white-space:nowrap}

.intl-offices-group + .intl-offices-group{margin-top:22px}
.intl-office{border-left:2px solid rgba(10,18,48,.07);padding-left:12px}
.intl-office + .intl-office{margin-top:14px}
.intl-city{font-family:'Inter',sans-serif;font-weight:400;color:var(--ink);font-size:14px;margin-bottom:2px}

/* Bottom bar */
.footer-base{border-top:1px solid var(--chrome-line);padding-top:26px;display:flex;
  justify-content:space-between;align-items:center;font-size:14px;color:var(--slate)}

/* ---------- Responsive Layouts ---------- */

/* > 1180px: five columns in one row, sized to content, spread evenly across width, at least 32px gap */
@media (min-width:1181px){
  .footer-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:52px}
  .footer-col{flex:0 0 auto}
  .footer-col a:hover{transform:translateX(3px);display:inline-block}
}

/* 961–1180px: logo & tagline on their own row, four columns below */
@media (min-width:961px) and (max-width:1180px){
  .footer-grid{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:40px 32px;margin-bottom:52px}
  .footer-col-brand{grid-column:1 / -1;margin-bottom:8px}
  .footer-col a:hover{transform:translateX(3px);display:inline-block}
}

/* 601–960px: logo row, then two columns: Company & Get in touch, then Headquarters & International offices */
@media (min-width:601px) and (max-width:960px){
  .footer-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:40px 48px;margin-bottom:52px}
  .footer-col-brand{grid-column:1 / -1;margin-bottom:4px}
  .footer-col-company{grid-column:1;grid-row:2}
  .footer-col-touch{grid-column:2;grid-row:2}
  .footer-col-hq{grid-column:1;grid-row:3}
  .footer-col-intl{grid-column:2;grid-row:3}
  .footer-col a:hover{transform:translateX(3px);display:inline-block}
}

/* 600px and below: logo row, Company & Get in touch side by side, then Headquarters full width, then International offices full width */
@media (max-width:600px){
  .footer{padding:56px 0 36px}
  .footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px 20px;margin-bottom:44px}
  .footer-col-brand{grid-column:1 / -1}
  .footer-col-company{grid-column:1}
  .footer-col-touch{grid-column:2}
  .footer-col-hq{grid-column:1 / -1}
  .footer-col-intl{grid-column:1 / -1}
  .footer-base{flex-direction:column;gap:8px;text-align:center}
}

/* 320px–380px: ensure zero sideways scrolling and address lines stay strictly on one line */
@media (max-width:380px){
  .footer .wrap{padding:0 12px}
}
@media (max-width:340px){
  .footer .wrap{padding:0 6px}
  .footer-address{letter-spacing:-0.015em}
}