/* === TABS: make every .tabs__izometric a clean grid === */
.tabs__content .tabs__izometric{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important; /* 3 across on desktop */
  gap: 32px !important;
  align-items: start !important;
}

/* Each direct child (img, a, div) acts like a normal grid item */
.tabs__content .tabs__izometric > a,
.tabs__content .tabs__izometric > div,
.tabs__content .tabs__izometric > img{
  display: block !important;
  position: static !important;
  float: none !important;
  inset: auto !important;
  transform: none !important;
  z-index: auto !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  text-decoration: none; /* for linked tiles */
}

/* Screenshot image normalization (nested or not) */
.tabs__content .tabs__izometric img.tabs__screenshot{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  position: static !important;
  float: none !important;
  transform: none !important;
  max-width: none !important;
}

/* Hide an empty .tabs__regular when a panel uses .tabs__izometric */
.tabs__content:has(.tabs__izometric) .tabs__regular{
  display: none !important;
}

/* === RESPONSIVE === */
@media (max-width: 1199px){
  .tabs__content .tabs__izometric{
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
}
@media (max-width: 575px){
  .tabs__content .tabs__izometric{
    grid-template-columns: 1fr !important;
  }
}

/* === SPACING BELOW TABS (remove big gap) === */
.tabs.js-tabs{
  margin-bottom: 24px !important;  /* normal section gap */
  padding-bottom: 0 !important;
}
.tabs.js-tabs::before,
.tabs.js-tabs::after,
.tabs.js-tabs .tabs__content::before,
.tabs.js-tabs .tabs__content::after{
  content: none !important;
  display: none !important;        /* kill spacer pseudos */
}
/* If the next element had an inline margin-bottom (e.g., 200px), kill it */
.tabs.js-tabs + .row[style*="margin-bottom"]{ margin-bottom: 0 !important; }
/* Also zero any top spacing on the immediate next section */
.tabs.js-tabs + .row,
.tabs.js-tabs + section,
.tabs.js-tabs + div{
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* No extra bottom spacing inside panels */
.tabs.js-tabs .tabs__content{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Scenarios row: equal-height cards, CTA pinned, tiny nudge for first card */
#scenariosRow > [class*="col-"]{ display:flex !important; }

#scenariosRow > [class*="col-"] > .member{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
}

#scenariosRow > [class*="col-"] > .member .button{
  margin-top:auto !important;   /* push the CTA to the bottom */
}

/* keep buttons aligned even if one card has fewer text lines */
#scenariosRow .member__position{
  line-height:1.4;
  min-height:calc(1.4em * 3);
}

/* final micro-adjust: only the FIRST card */
#scenariosRow > [class*="col-"]:first-child .member__position{
  padding-bottom:23px !important;   /* tweak 2–5px if needed */
}
/* Logo: same aspect, smaller size */
.logo__image,
.js-logo__image{
  width: auto !important;
  height: auto !important;
  max-height: 36px !important;   /* ← try 36px; use 32–40px to taste */
  max-width: 160px !important;    /* optional cap if the file is very wide */
  object-fit: contain;
}

/* Optional: different sizes per breakpoint */
@media (max-width: 991px){
  .logo__image, .js-logo__image{ max-height: 32px !important; }
}
@media (min-width: 1400px){
  .logo__image, .js-logo__image{ max-height: 40px !important; }
}
/* Make the three columns equal-height and pin CTAs to the bottom */
#scenariosRow > [class*="col-"] { display:flex !important; }
#scenariosRow > [class*="col-"] > .member{
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
}
#scenariosRow > [class*="col-"] > .member .button{
  margin-top:auto !important; /* CTA at the bottom of each card */
}

/* Normalize title height across cards (FR titles wrap differently) */
#scenariosRow .member__name{
  line-height:1.25;
  min-height: calc(1.25em * 2) !important; /* reserve ~2 lines; bump to 3 if needed */
}

/* Reserve space for the short description block so buttons align */
#scenariosRow .member__position{
  line-height:1.4;
  min-height: calc(1.4em * 3) !important; /* try *4 if FR text wraps more */
}

/* Tiny per-card trim if one button is still off by a pixel or two */
#scenariosRow > [class*="col-"]:nth-of-type(1) .member__position{
  padding-bottom: 2px !important;  /* tweak 0–4px until perfect */
}
.hero--skin-1{

  background-image: url("../../assets/img/common/backgrounds/hero-5.jpg") !important; 
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}