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

  /* Panel sizing */
  --ms-panel-min:820px;
  --ms-panel-max:1320px;

  /* Grid sizing */
  --ms-cols-min:150px;   /* min width for a content column */
  --ms-cols-max:150px;
  --ms-side-min:400px;   /* min width for sidebar */
  --ms-gap:14px;
}

/* ============ HEADER ============ */
.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:1400px;
  margin:0 auto;
  padding:18px 48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.ms-logo{ height:auto; display:block; }

/* ============ NAV ============ */
.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); }

/* CTA (main nav) */
.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 PANELS ============ */
.ms-mega-panel{
  position:absolute;
  top:100%;
  left:50%;
  margin-top:14px;
  width:clamp(var(--ms-panel-min),95vw,var(--ms-panel-max));
  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);
}

/* ============ GRID (columns + sidebar) ============ */
.ms-mega-inner {
  display: grid;
  grid-template-columns: 1fr auto; /* left = columns, right = side card */
  gap: 10px; /* gap between columns and side card */
  padding: 26px;
  align-items: flex-start;
}

/* Columns container */
.ms-cols {
  display: flex;
  gap: 20px;         /* space between columns */
  flex-wrap: nowrap; /* don’t wrap unless needed */
}
.ms-col {
  flex: 1 1 auto;
  min-width:200px;
  max-width:250px;
}

/* Sidebar card wrapper */
.ms-side {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: auto;
  max-width: auto;
  min-height: auto;
  max-height: auto;
}

/* ============ COLUMN CONTENT ============ */
.ms-col-title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:600;
  color:var(--ms-blue);
}
.ms-links{ list-style:none; margin:0; padding:0; }
.ms-links li{ margin:0; }
.ms-links a{
  display:block;
  padding:8px 12px;
  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; }

/* ============ SIDEBAR CARD ============ */
.ms-side-card{
  display:flex;
  justify-content:space-between;
  align-items: center; /*centers content + image vertically */
  gap:16px;
  background:var(--ms-blue);
  color:#fff;
  border-radius:6px;
  padding:14px;
  text-decoration:none;
  transition:transform .15s, background .15s;
}
.ms-side-card:hover{ background:#35368f; transform:translateY(-1px); }
.ms-side-card.is-static:hover{ background:var(--ms-blue); transform:none; }

.ms-side-body{ flex:1 1 auto; min-width:150px; }
.ms-side-head{ font-size:12px; font-weight:700; opacity:.9; color:#fff; }
.ms-side-title{ font-size:16px; font-weight:700; }
.ms-side-desc{ font-size:12px; opacity:.85; margin-top:2px; }

.ms-side-img img{
  max-width:250px;
  max-height:250px;
  width:auto;
  height:auto;
  object-fit:contain; /* keeps proportions, no crop */
  border-radius:4px;
  display:block;
}
.ms-side-cta{
  margin-top:8px;
  display:inline-flex;
  padding:7px 10px;
  background:#f0f1f5;
  color:#f0f1f5;
  border-radius:5px;
  font-weight:600;
  font-size: 14px;
  text-decoration:none;
}
.ms-side-cta:hover{ filter:brightness(.9); }

/* ============ RESPONSIVE SAFETIES ============ */
@media (max-width: 1024px){
  .ms-mega-panel{
    left:0;
    transform:translateX(0) translateY(-4px);
    width:95vw;
  }
  .ms-has-mega[aria-expanded="true"] .ms-mega-panel{
    transform:translateX(0) translateY(0);
  }
}

@media (max-width:768px){
  .ms-mega-inner{ grid-template-columns:1fr; }
  .ms-cols{ flex-wrap:wrap; }
  .ms-side{
    order:2; /* push below columns */
    max-width:100%;
  }
}
/* Keep panels inside the viewport with a small gutter */
:root { --ms-gutter: 16px; } /* tweak to 20–24px if you like */

.ms-mega-panel{
  /* center on trigger */
  left:50%;
  transform:translateX(-50%) translateY(-4px);

  /* instead of clamp(...), use max width bounded by viewport minus gutters */
  width: min(var(--ms-panel-max), calc(100vw - (var(--ms-gutter) * 2)));
}

/* When open */
.ms-has-mega[aria-expanded="true"] .ms-mega-panel{
  transform:translateX(-55%) translateY(0);
}
/* Optional: no hard minimum */
:root { --ms-panel-min: 0px; }
/* Remove left indent on the column block */
.ms-col { margin-left: 0 !important; }

/* Make sure the column title isn't indented */
.ms-col-title { margin-left: 0 !important; }

/* Lists sometimes carry browser UL padding — remove it */
.ms-links {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important; /* cross-browser */
}

/* Make each link row flush-left (keep vertical padding only) */
.ms-links a {
  padding-left: 0 !important;
  padding-right: 0 !important;  /* remove right indent too, if any */
  /* keep some vertical breathing room */
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  text-align: left;
}

/* Subheading lines should not add their own indent */
.ms-link-head, .ms-link-sub {
  margin-left: 0 !important;
  text-align: left;
}

/* If the indent you see is actually the panel’s inner gutter, uncomment this: */
/*
.ms-mega-inner { 
  padding-left: 0 !important;   // removes the panel's left gutter (default was ~26px)
}
*/
/* Vertically center the side card */
.ms-side {
  align-self: center; /* center this grid item vertically */
}
/* Let ONLY the sidebar grid item stretch to the full row height */
.ms-side {
  align-self: stretch;   /* fills the full height of the mega menu row */
}

/* Make the card fill the stretched sidebar area */
.ms-side-card {
  height: 100%;
  /* keep your layout (text left, image right) */
  display: flex;
  justify-content: space-between;
  align-items: center;   /* keeps image vertically centered while card grows */
}

/* Allow the text block to take remaining vertical space elegantly */
.ms-side-body {
  flex: 1 1 auto;        /* expands with the card */
  min-height: 0;         /* prevents overflow issues */
}

/* Optional: if your image should never exceed card height */
.ms-side-img img {
  max-height: 100%;
  height: auto;          /* or keep your fixed 96px if you prefer */
}
/* Make link lists break into multiple equal-width columns */
.ms-links {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-rows: repeat(4, auto);          /* 4 items tall */
  grid-auto-flow: column;                       /* overflow into new columns */
  grid-auto-columns: minmax(var(--ms-cols-min), 1fr); /* match column width */
  column-gap: 10px;                             /* spacing between columns */
}
/* ---- Mega panel spacing tweaks ---- */
.ms-mega-inner{
  gap: 16px;                     /* a bit tighter than before */
  padding: 22px 24px;            /* consistent inner padding */
}
.ms-cols{ gap: 16px; }           /* space between service columns */

.ms-col-title{ margin: 0 0 8px; }
.ms-links a{ padding: 6px 0; }   /* tighter vertical rhythm */
.ms-links{ row-gap: 4px; }       /* small gap between items when using grid */


/* ---- Side card: image ABOVE copy, better spacing ---- */
/* we keep the card filling the right rail, but stack content vertically */
.ms-side-card{
  display: flex;
  flex-direction: column;        /* stack image then text */
  align-items: flex-start;       /* keep left aligned */
  gap: 12px;                     /* space between image and text block */
  padding: 18px;                 /* a little more breathing room */
  border-radius: 6px;            /* squarer corners; use 0 for square */
}

/* move image above the text without editing HTML */
.ms-side-img{ order: -1; align-self: center; }  /* puts image first & centers it */
.ms-side-img img{
  max-width: 120px;              /* allow variations, cap size */
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;           /* keep logos uncropped */
  border-radius: 4px;            /* slightly rounded; set 0 for square */
}

/* text block spacing */
.ms-side-body{ gap: 6px; display:flex; flex-direction:column; }
.ms-side-head{ margin-bottom: 2px; }
.ms-side-title{ line-height: 1.25; }
.ms-side-desc{ margin-top: 2px; line-height: 1.35; }

/* keep the card vertically centered OR stretched, pick ONE of these: */

/* Option A: vertically center the card in the rail */
.ms-side{ align-self: center; }

/* Option B (alternative): make the card grow to match column height */
/* .ms-side{ align-self: stretch; }       */
/* .ms-side-card{ height: 100%; }         */
/* ---- size of the right rail (keep consistent across tabs) ---- */
:root{
  --ms-side-rail: 360px;     /* pick 320–380px; this is the whole purple rail */
}

/* grid: columns on the left, fixed rail on the right */
.ms-mega-inner{
  display:grid;
  grid-template-columns: 1fr var(--ms-side-rail); /* no more visual “overlap” */
  gap: 16px;                                      /* space between cols & rail */
  padding: 22px 24px;
  align-items:flex-start;
}

/* columns: keep consistent widths */
.ms-cols{
  display:flex;
  gap:16px;
  flex-wrap:nowrap;
}
.ms-col{
  flex:1 1 auto;
  min-width: 185px;   /* e.g. 180–220px */
  max-width: 185px;                /* optional: prevents super-wide columns */
}

/* ===== RIGHT RAIL becomes the purple panel ===== */
.ms-side{
  grid-column: 2;
  align-self: stretch;             /* stretch full height of the menu */
  background: var(--ms-blue);
  color:#fff;
  padding: 24px;                   /* inner padding for the rail */
  border-top-right-radius: var(--ms-radius);
  border-bottom-right-radius: var(--ms-radius);
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* make the inner “card” transparent so the rail’s purple shows edge-to-edge */
.ms-side-card{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  height: 100%;                    /* allows the content to grow with menu */
  display:flex;
  flex-direction:column;
  gap:14px;
}

/* IMAGE ABOVE COPY */
.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;              /* set 0 for square */
}

/* tidy type spacing in rail */
.ms-side-body{ display:flex; flex-direction:column; gap:6px; }
.ms-side-head{ font-weight:700; font-size:13px; opacity:.9; margin:0; }
.ms-side-title{ font-weight:700; font-size:20px; line-height:1.25; margin:0; }
.ms-side-desc{ font-size:14px; line-height:1.45; opacity:.95; }

/* CTA keeps natural width (no stretching) */
.ms-side-cta{
  display:inline-flex !important;
  width:auto !important;
  max-width: max-content;
  padding:10px 14px;
  background:#f0f1f5;
  color:#f0f1f5;
  border-radius:5px;
  text-decoration:none;
  font-weight:600;
}

/* ensure list links in columns don’t inherit rail button styles */
.ms-links a{ display:block; padding:6px 0; border-radius:6px; }

/* ----- Multi-column lists (optional): 4 items per column, equal widths ----- */
.ms-links{
  display:grid;
  grid-template-rows: repeat(4, auto);   /* 4 deep, then wrap to next column */
  grid-auto-flow: column;
  grid-auto-columns:185px;
  column-gap: 8px;
  row-gap: 8px;
}

/* RESPONSIVE safety: stack rail under columns on narrow screens */
@media (max-width: 768px){
  .ms-mega-inner{
    grid-template-columns: 1fr;
  }
  .ms-side{
    border-radius: var(--ms-radius);
  }

}
}
/* Make the 3rd service column wide enough to host internal overflow columns */
.ms-cols > .ms-col:nth-child(3){
  flex: 0 0 calc(160px * 3 + 12px * 2);
  max-width: calc(160px * 3 + 12px * 2);
}

/* Inner grid tuning inside that wider column */
.ms-cols > .ms-col:nth-child(3) .ms-links{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  grid-auto-columns: 185px;
  column-gap: 8px;
  row-gap: 8px;
}

/* optional vertical nudge for the first item in each overflow column */
.ms-cols > .ms-col:nth-child(3) .ms-links li:nth-child(4n+1):not(:first-child){
  margin-top: 6px;
}