/* =========================================
   Base tokens (kept)
========================================= */
:root{
  --ms-bg:#fff;
  --ms-text:#000;
  --ms-blue:#35368f;
  --ms-shadow:0 18px 40px rgba(0,0,0,.12);
  --ms-radius:12px;

  --ms-panel-max:1320px;
  --ms-gutter:16px;

  /* compact menu caps used by Company + Resources */
  --ms-compact-min:320px;
  --ms-compact-max:720px;
}

/* =========================================
   Header / Nav (kept as-is, small tidy)
========================================= */
.ms-header{ background:var(--ms-bg); border-bottom:1px solid rgba(0,0,0,.04); position:relative; z-index:1000; }
.ms-header .ms-container{ max-width:1240px; margin:0 auto; padding:18px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ms-logo{ height:auto; display:block; margin-left:-10px }

.ms-nav-right{ display:flex; align-items:center; gap:40px; }
.ms-primary{ display:flex; align-items:center; gap:32px; list-style:none; margin:0; padding:0; }
.ms-primary>li{ position:relative; }

.ms-toplink{ display:inline-flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer; color:var(--ms-text); font:inherit; padding:4px 0; }
.ms-toplink:hover{ opacity:.9; }
.ms-caret svg{ width:16px; height:16px; transition:transform .15s; }
.ms-has-mega[aria-expanded="true"] .ms-caret svg{ transform:rotate(180deg); }

.ms-cta{
  background:#35368f !important; color:#fff !important;
  padding:12px 20px; border-radius:8px; text-decoration:none !important;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:500;
}

/* =========================================
   Mega panel: shared base
========================================= */
.ms-mega-panel{
  position:absolute; top:100%; left:50%;
  margin-top:14px;
  width:min(var(--ms-panel-max), calc(100vw - (var(--ms-gutter)*2)));
  background:#fff; border-radius:var(--ms-radius); box-shadow:var(--ms-shadow);
  opacity:0; visibility:hidden;
  transform:translateX(-50%) translateY(-4px);
  transition:opacity .16s, transform .16s, visibility .16s;
  z-index:1100;
}
.ms-has-mega[aria-expanded="true"] .ms-mega-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

/* Inner grid */
.ms-mega-inner{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:22px 24px; align-items:flex-start; }

/* Columns */
.ms-cols{ display:flex; gap:16px; flex-wrap:nowrap; }
.ms-col{ flex:1 1 auto; min-width:185px; max-width:185px; }

/* Column content */
.ms-col-title{ margin:0 0 8px; font-size:18px; font-weight:600; color:var(--ms-blue); }
.ms-links{ list-style:none; margin:0; padding:0; display:block; row-gap:4px; }
.ms-links li{ margin:0 0 4px; }
.ms-links a{ display:block; padding:6px 0; border-radius:6px; color:inherit; text-decoration:none; transition:background .15s; }
.ms-links a:hover{ background:rgba(0,0,0,.05); text-decoration:none; }
.ms-link-head{ display:block; font-size:14px; font-weight:600; }
.ms-link-sub{ display:block; font-size:12px; opacity:.75; }

/* Side card (standalone card, consistent across menus) */
.ms-side{ display:flex; flex-direction:column; gap:16px; }
.ms-side-card{
  display:flex; flex-direction:column; gap:12px;
  background:var(--ms-blue); color:#fff; border-radius:6px; padding:18px;
  text-decoration:none; transition:transform .15s, background .15s; box-shadow:0 2px 6px rgba(0,0,0,.08);
  max-width:320px;
}
.ms-side-card:hover{ background:#35368f; transform:translateY(-1px); }
.ms-side-card.is-static:hover{ background:var(--ms-blue); transform:none; }
.ms-side-body{ display:flex; flex-direction:column; gap:6px; }
.ms-side-head{ font-size:12px; font-weight:700; opacity:.9; color:#fff; margin:0; }
.ms-side-title{ font-size:20px; font-weight:700; line-height:1.25; margin:0; }
.ms-side-desc{ font-size:14px; line-height:1.45; opacity:.95; margin:0; }
.ms-side-img{ order:-1; align-self:center; }
.ms-side-img img{ max-width:225px; max-height:225px; width:auto; height:auto; object-fit:contain; border-radius:4px; display:block; }
.ms-side-cta{ display:inline-flex; width:auto; max-width:max-content; padding:10px 14px; background:#f0f1f5; color:#f0f1f5; border-radius:5px; text-decoration:none; font-weight:600; }


/* =========================================
   Company + Resources: compact sizing
   (same size), Resources shifted left ~40%
========================================= */
#mega-company,
#mega-resources{
  width: clamp(var(--ms-compact-min), calc(100vw - (var(--ms-gutter)*2)), var(--ms-compact-max)) !important;
}

/* Company centered like Services */
#mega-company{ left:50% !important; transform:translateX(-50%) translateY(-4px) !important; }
.ms-has-mega[aria-expanded="true"] #mega-company{ transform:translateX(-50%) translateY(0) !important; }

/* Resources shifted left ~40% beyond center (-50% -> -90%) */
#mega-resources{ left:50% !important; transform:translateX(-90%) translateY(-4px) !important; }
.ms-has-mega[aria-expanded="true"] #mega-resources{ transform:translateX(-90%) translateY(0) !important; }

/* Company/Resources/Services: align top planes & tidy link block */
#mega-company .ms-mega-inner,
#mega-resources .ms-mega-inner{ align-items:flex-start !important; }

#mega-company .ms-col-title,
#mega-services .ms-col-title,
#mega-resources .ms-col-title{ margin-top:18px !important; } /* nudge title down to match eyebrow */

#mega-company .ms-links,
#mega-services .ms-links,
#mega-resources .ms-links{ margin-top:0 !important; padding-top:0 !important; padding-left:0 !important; }
#mega-company .ms-links li,
#mega-services .ms-links li,
#mega-resources .ms-links li{ margin-bottom:4px; }

/* =========================================
   Services: use the same side card treatment
   (contained card, not full-height rail)
========================================= */
#mega-services .ms-mega-inner{
  padding:22px 24px !important; gap:16px !important;
  grid-template-columns:1fr auto; align-items:stretch!important;
}
#mega-services .ms-side{ background:none !important; padding:0 !important; margin:0 !important; border-radius:0; height:100%; }
#mega-services .ms-side-card{ background:var(--ms-blue) !important; color:#fff !important; border-radius:6px; padding:18px; gap:12px; max-width:320px; flex:1 1 auto !important; height:100% !important; display: flex; flex-direction:column; }
#mega-services .ms-side-img{ order:-1; align-self:center; margin-bottom:12px; }
#mega-services .ms-side-img img{ max-width:225px; max-height:225px; object-fit:contain; }
/* ================================
   1) COMPANY side card content not showing
   (force full card content to render)
================================ */
#mega-company .ms-side-card{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
  background: var(--ms-blue) !important;
  color:#fff !important;
  padding:18px !important;
  border-radius:6px;
  max-width:440px;
}
#mega-company .ms-side-body{ display:flex !important; flex-direction:column; gap:6px; }
#mega-company .ms-side-head,
#mega-company .ms-side-title,
#mega-company .ms-side-desc{ display:block !important; }

/* ================================
   2) Narrow the full Services mega menu
   and re-center it (75% of prior 1320 = 990)
================================ */
:root{ --ms-services-max: 990px; } /* tweak as needed */

#mega-services{
  width: min(var(--ms-services-max), calc(100vw - (var(--ms-gutter,16px)*2))) !important;
  transform: translateX(-1%) translateY(-4px) !important;
}
.ms-has-mega[aria-expanded="true"] #mega-services{
  transform: translateX(-50%) translateY(0) !important; /* stop shifting right */
}

/* If you want Company & Resources to use the same 75% width too, uncomment:
#mega-company, #mega-resources{
  width: min(var(--ms-services-max), calc(100vw - (var(--ms-gutter,16px)*2))) !important;
}
*/

/* ================================
   3) Side card image = same width as copy
   (all menus)
================================ */
.ms-side-card{
  align-items: stretch;     /* let children fill card width */
}
.ms-side-img{ 
  order:-1; 
  align-self: stretch;      /* image container same width as text */
}
.ms-side-img img{
  width: 100% !important;   /* match text block width */
  height: auto;
  max-height: none;        /* safety so tall images don’t dominate */
  object-fit: contain;
  border-radius: 4px;
}
.ms-side-body{
  width: 100%;
}
/* Side card image should match copy width */
.ms-side-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* let children fill the card width */
}

.ms-side-img{
  order: -1;
  align-self: stretch;    /* image container fills full width */
  width: 100%;
  margin-bottom: 12px;
}

.ms-side-img img{
  width: 100% !important;   /* stretch to same width as text block */
  height: auto;
  max-height: none;         /* remove fixed height cap */
  object-fit: cover;        /* fills horizontally, keeps ratio */
  border-radius: 4px;
}

.ms-side-body{
  width: 100%;              /* ensure text spans the same width */
}
/* Make side-card image the same width as the copy (all menus) */
#mega-services .ms-side-card,
#mega-company  .ms-side-card,
#mega-resources .ms-side-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;            /* children fill card width */
}

#mega-services .ms-side-img,
#mega-company  .ms-side-img,
#mega-resources .ms-side-img{
  order:-1;
  align-self:stretch;             /* image block full width */
  width:100%;
  margin:0 0 12px;
}

#mega-services .ms-side-img img,
#mega-company  .ms-side-img img,
#mega-resources .ms-side-img img{
  display:block;
  width:100% !important;          /* match text width */
  max-width:none !important;      /* override old 225/300px caps */
  height:auto;
  max-height:none !important;
  object-fit:contain;             /* no cropping; switch to 'cover' if you prefer */
  border-radius:4px;
}

#mega-services .ms-side-body,
#mega-company  .ms-side-body,
#mega-resources .ms-side-body{
  width:100%;
}
/* ==============================
   2) Reduce Resources mega menu width by 30%
   ============================== */
#mega-resources{
  /* take existing compact width and shrink to 70% */
  width: calc(
    clamp(var(--ms-compact-min),
          calc(100vw - (var(--ms-gutter,16px) * 2)),
          var(--ms-compact-max)
    ) * 0.8
  ) !important;

  /* keep same alignment */
  left: 50% !important;
  transform: translateX(-90%) translateY(-4px) !important;
}

.ms-has-mega[aria-expanded="true"] #mega-resources{
  transform: translateX(-90%) translateY(0) !important;
}
/* ==============================
   2) Reduce Company mega menu width by 30%
   ============================== */
#mega-company{
  /* take existing compact width and shrink to 70% */
  width: calc(
    clamp(var(--ms-compact-min),
          calc(100vw - (var(--ms-gutter,16px) * 2)),
          var(--ms-compact-max)
    ) * 0.8
  ) !important;

  /* keep same alignment */
  left: 50% !important;
  transform: translateX(-90%) translateY(-4px) !important;
}

.ms-has-mega[aria-expanded="true"] #mega-company{
  transform: translateX(-90%) translateY(0) !important;
}
/* ===== Company + Services: side-card image on top, left, with a min width ===== */
:root { --ms-side-img-min: 180px; } /* tweak 140–220px as you like */

#mega-company .ms-side-card,
#mega-services .ms-side-card{
  display:flex !important;
  flex-direction:column !important;     /* image above copy */
  align-items:flex-start !important;    /* left-align everything */
}

#mega-company .ms-side-card .ms-side-img,
#mega-services .ms-side-card .ms-side-img{
  order:-1 !important;                  /* put image first */
  align-self:flex-start !important;     /* left-justify image block */
  width:auto !important;
  margin:0 0 2px !important;
}

#mega-company .ms-side-card .ms-side-img img,
#mega-services .ms-side-card .ms-side-img img{
  display:block !important;
  width:auto !important;                /* don't stretch to 100% */
  min-width:none !important;
  max-width:75px!important;            /* never overflow the card */
  height:auto !important;
  object-fit:contain !important;
  border-radius:4px !important;
}
/* ==============================
   Center the Services mega menu
   ============================== */
#mega-services {
  left: 10% !important;
  transform: translateX(-10%) translateY(-4px) !important;
  min-width: auto;
  max-width: 1000px;
}
/* =========================================
   MOBILE OPTIMIZATIONS
   Trigger at/under panel min (tweak as needed)
========================================= */
@media (max-width: 820px){

  /* Safe container + typography tweaks */
  .ms-header .ms-container{
    padding:14px 16px;
    gap:16px;
  }
  .ms-primary{ gap:16px; }

  /* Mega panel: full-bleed within gutters, no side overflow */
  .ms-mega-panel{
    left: 50% !important;
    width: calc(100vw - (var(--ms-gutter)*2)) !important;
    transform: translateX(-50%) translateY(-4px) !important;
    margin-top:10px;
    border-radius:10px;
    overflow: hidden; /* prevent horizontal scroll from inner content */
  }
  .ms-has-mega[aria-expanded="true"] .ms-mega-panel{
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Kill desktop-specific offsets on mobile */
  #mega-company,
  #mega-resources,
  #mega-services{
    left: 50% !important;
    transform: translateX(-50%) translateY(-4px) !important;
    width: calc(100vw - (var(--ms-gutter)*2)) !important;
  }
  .ms-has-mega[aria-expanded="true"] #mega-company,
  .ms-has-mega[aria-expanded="true"] #mega-resources,
  .ms-has-mega[aria-expanded="true"] #mega-services{
    transform: translateX(-50%) translateY(0) !important;
  }

  /* Inner: single column layout */
  .ms-mega-inner{
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 16px !important;
    align-items: start !important;
  }

  /* Link columns: full width, wrap, no fixed widths */
  .ms-cols{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .ms-col{
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .ms-col-title{ margin: 8px 0 4px !important; font-size:16px; }
  .ms-links a{
    padding: 10px 0;          /* bigger tap target */
    border-radius: 6px;
  }
  .ms-link-head{ font-size:15px; }
  .ms-link-sub{ font-size:12px; }

  /* Side card: sits BELOW columns on mobile */
  /* Services first, same rule applies to Company/Resources */
  #mega-services .ms-side,
  #mega-company  .ms-side,
  #mega-resources .ms-side{
    order: 2 !important;      /* after the link columns */
  }

  /* Make sure the columns block is first */
  #mega-services .ms-cols,
  #mega-company  .ms-cols,
  #mega-resources .ms-cols{
    order: 1 !important;
  }

  /* Side card visuals */
  .ms-side{ display:block; }
  .ms-side-card{
    max-width: 100% !important;
    padding: 16px !important;
    gap: 10px !important;
    border-radius: 8px !important;
  }

  /* Side card image full width above text */
  .ms-side-img{
    order: -1;
    align-self: stretch !important;
    width: 100% !important;
    margin: 0 0 10px !important;
  }
  .ms-side-img img{
    display:block;
    width: 100% !important;
    height: auto;
    max-height: none !important;
    object-fit: contain; /* switch to 'cover' if you prefer */
    border-radius: 6px;
  }
  .ms-side-body{ width:100%; }

  /* Compact widths: ignore desktop clamps; keep consistent gutters */
  #mega-company,
  #mega-resources{
    width: calc(100vw - (var(--ms-gutter)*2)) !important;
  }

  /* Remove any stray right/left white space from fixed 185px cards */
  .ms-col{ max-width:none !important; }
  .ms-links{ padding-left:0 !important; }

  /* CTA button tap target */
  .ms-cta{
    padding: 12px 16px;
    font-size: 15px;
  }

  /* Misc spacing trims */
  .ms-mega-inner > * { margin: 0; }
  #mega-company .ms-col-title,
  #mega-resources .ms-col-title{
    margin-top: 4px !important;
  }

  /* Ensure panel sits over page on small screens */
  .ms-mega-panel{ z-index: 1100; }

  /* Optional: reduce header logo offset on small screens */
  .ms-logo{ margin-left: 0; }
}
/* Tablet and Mobile: narrow columns, smaller side card, reduced white panel */
@media (max-width: 1024px){   /* tablet */
  .ms-mega-panel{
    MAX-width: 500PX !important;   /* reduce overall background width */
  }
  .ms-col{
    flex: 1 1 AUTO !important;
    max-width: auto !important;
  }
  .ms-side-card{
    max-width: auto !important; /* smaller side card */
  }
}

@media (max-width: 820px){   /* mobile */
  .ms-mega-panel{
    MAX-width: 350PX  !important;   /* a bit wider than tablet but still reduced */
  }
  .ms-col{
    flex: 1 1 AUTO% !important;
    max-width: AUTO !important;
  }
  .ms-side-card{
    max-width: auto !important; /* smallest side card */
  }
}
/* Mobile: Resources menu shifted left 40% */
@media (max-width: 820px){

  #mega-services{
    Left:20%
    transform: translateX(-25%) translateY(-4px) !important; /* shift ~40% more left */
    width: calc(100vw - (var(--ms-gutter,16px)*2)) !important;
  }

  .ms-has-mega[aria-expanded="true"] #mega-services{
    transform: translateX(-25%) translateY(0) !important;
  }
  #mega-resources{
    Left:0%
    transform: translateX(-60%) translateY(-4px) !important; /* shift ~40% more left */
    width: calc(100vw - (var(--ms-gutter,16px)*2)) !important;
  }

  .ms-has-mega[aria-expanded="true"] #mega-resources{
    transform: translateX(-60%) translateY(0) !important;
  }
}
/* Mobile: shrink logo, menu text, and CTA so everything fits */
@media (max-width: 820px){

  /* Logo smaller */
  .ms-logo{
    max-width: 60px !important;   /* tweak down from original */
    margin-left: 0 !important;
  }

  /* Primary nav font size smaller */
  .ms-toplink{
    font-size: 10px !important;    /* was ~16px */
    padding: 2px 0 !important;
  }

  /* CTA button smaller */
  .ms-cta{
    font-size: 10px !important;    /* was 16px */
    padding: 8px 14px !important;  /* reduce padding */
    border-radius: 6px !important;
  }

  /* Tighten gaps so more items fit */
  .ms-nav-right{ gap: 20px !important; }
  .ms-primary{ gap: 16px !important; }
}