.shape-container:nth-child(2) .shape-bg,
.shape-container:nth-child(5) .shape-bg,
.shape-container:nth-child(8) .shape-bg {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
}

/* Layout fixes: make background cover and footer sit at the bottom of the content */
#wrapper {
  height: auto !important;
  /* allow the section to grow with content */
  max-height: none !important;
  min-height: 100vh;
  /* still fill at least the viewport */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
  /* avoid clipping children and footer */
}

.footer-rainbow {
  position: static !important;
  /* place footer after content, not overlayed */
  bottom: auto !important;
  left: auto !important;
  width: 100% !important;
  margin-top: 16px;
  /* small spacing from content above */
  z-index: 1 !important;
  /* below any floating elements */
}

/* Head banner - responsive positioning for all screen sizes */
#head-banner {
  position: absolute !important;
  left: -150px !important;
  bottom: -2.7% !important;
  width: 65% !important;
  max-width: 100% !important;
  height: 100%;
  object-fit: contain !important;
  object-position: left bottom !important;
  z-index: 30 !important;
  /* ABOVE text content so image overlays text */
  pointer-events: none;
}

/* Ensure text content stays at bottom BEHIND the banner image */
#heading-content {
  position: absolute !important;
  bottom: -2.5% !important;
  left: 0 !important;
  width: 100% !important;
  height: 50%;
  padding: 20px 40px 20px !important;
  z-index: 31 !important;
  /* BELOW banner image (z=30) so text appears behind */
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  background: linear-gradient(to top, rgba(29, 143, 79, 0.85) 0%, rgba(29, 143, 79, 0.7) 60%, transparent 100%) !important;
  /* Green overlay background matching the green panel color */
}

#heading-content p {
  color: #fff !important;
  font-size: 1.3em !important;
  line-height: 1.5 !important;
  margin-bottom: 15px !important;
  
  font-weight: 500 !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5) !important;
}

#heading-content p.leading {
  font-size: 1.2em !important;
  font-weight: 600 !important;
}

.texts {
  width: 38%;
  margin-left: 35px;
}


.cta-section {
  border-radius: 0 !important;
  border-top-right-radius: 30px !important;
  border-bottom-left-radius: 30px !important;
  width: 97% !important;
  /* match grid width */
  max-width: 816px !important;
  /* same as grid container */
  margin-left: 18px !important;
  /* align with grid left edge */
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

.cta-button {
  border-radius: 18px !important;
  width: 250px !important;
  text-align: center !important;
  font-size: 22px !important;
}

.footer-rainbow {
  /* Allow full footer colour bar image to display */
  height: auto !important;
  /* no forced crop */
  min-height: 60px !important;
  /* baseline height */
  padding: 6px 12px !important;
  /* inner spacing */
  display: flex !important;
  align-items: center !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  /* stretch image to full area */
  background-position: center center !important;
  box-sizing: border-box !important;
}

.footer-left{
  padding-left: 30px;
}

.footer-right {
  margin-left: auto;
  padding-right: 50px;
  float: right;
  order: 2;
  white-space: nowrap;

}

.shape-container {
  width: 100%;
}


/* ===== Make grids start below the top-right logo ===== */
:root {
  --gems-logo-h: 180px;
  /* reduce perceived vertical footprint of logo */
  /* same as .logo-badge height */
  --gems-logo-gap: 16px;
  /* space under the logo */
}

/* Desktop / large screens */
.navigation_container {
  /* existing styles… */
  padding-top: 60px !important;
  /* bring grid closer */
}

/* Keep the logo above everything visually */
.logo-badge {
  position: relative !important;
  top: 0 !important;
  right: 100px !important;
  display: block !important;
  height: 180px !important;
  /* smaller so gap shrinks */
  width: auto !important;
  margin: 0 0 var(--gems-logo-gap, 16px) auto !important;
  /* align right with gap below */
  z-index: 100 !important;
}





/* === Fix: show all 9 tiles (no clipping) === */

/* The two-column wrapper had max-height + overflow:hidden */
#change-option-2026 {
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
  /* don't pin to bottom */
}

/* Right column was capped to 100vh and scrolled inside itself */
.navigation_container {
  max-height: none !important;
  overflow: visible !important;
  align-items: flex-start !important;
  z-index: 32;
  /* let content stack from top */
  width: 45%;
  margin-right: 0;
  padding-top: calc(var(120px) + var(--gems-logo-gap, 16px)) !important;
}

/* Ensure the grid can grow to as many rows as needed */
.grid-container {
  grid-auto-flow: row !important;
  grid-auto-rows: 120px !important;
  height: auto !important;
  overflow: visible !important;
}

/* Keep CTA below the full grid */
.cta-section {
  margin-top: 12px !important;
}

#green-shape-layer {
  width: 85% !important;
  top: -155px !important;
}

.shape-content {
  text-align: center !important;
}

.shape-container:nth-child(1) .shape-content h3,
.shape-container:nth-child(4) .shape-content h3,
.shape-container:nth-child(7) .shape-content h3,
.shape-container:nth-child(9) .shape-content h3,
.shape-container:nth-child(10) .shape-content h3 {
  text-align: left;
}

.shape-container:nth-child(11) .shape-content h3 {
   text-align: left;
}

.shape-container:nth-child(5) .shape-content h3,
.shape-container:nth-child(8) .shape-content h3,
.shape-container:nth-child(3) .shape-content h3,
.shape-container:nth-child(6) .shape-content h3,
.shape-container:nth-child(12) .shape-content h3 {
   text-align: left;
}

/* ==== Mobile card grid: stack with rounded gradient tiles (<=660px) ==== */
@media screen and (max-width: 660px) {

  /* Prevent any accidental horizontal scroll that can force pinch-zoom */
  html,
  body {
    overflow-x: hidden !important;
  }

  /* Ensure single column and consistent spacing */
  .grid-container {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    /* slightly larger vertical rhythm */
    padding: 0 20px !important;
    /* align with panel horizontal gutter */
    width: 100% !important;
    max-width: 100% !important;
  }

  .shape-container:nth-child(1) .shape-content h3,
  .shape-container:nth-child(3) .shape-content h3,
  .shape-container:nth-child(4) .shape-content h3,
  .shape-container:nth-child(6) .shape-content h3,
  .shape-container:nth-child(7) .shape-content h3,
  .shape-container:nth-child(9) .shape-content h3 {
    margin-left: 0px !important;
    text-align: left !important;
  }

  .shape-container:nth-child(5) .shape-content h3,
  .shape-container:nth-child(8) .shape-content h3 {
    margin-left: 0px !important;
    text-align: left !important;
  }

  /* Card container with rounded edges and subtle elevation */
  .shape-container {
    height: 115px !important;
    /* taller like reference screenshot */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
  }

  /* Override any asymmetric radius rules from base CSS and nth-child tweaks */
  .shape-container .shape-bg {
    border-radius: 12px !important;
  }

  /* Tighten text for compact mobile cards */
  .shape-content {
    padding: 22px 22px 18px !important;
    /* slight top emphasis, tighter bottom */
  }

  /* ----- Mobile heading + green panel layout to match reference ----- */
  .heading.text-center.text-dark {
    display: block !important;
    font-weight: 800 !important;
    font-size: 26px !important;
    /* a bit larger */
    line-height: 1.15 !important;
    color: #2e2e2e !important;
    margin: 4px auto 14px !important;
    /* tighter gap under logo */
    padding: 0 12px !important;
    text-align: center !important;
  }

  /* Green panel spans most of viewport with straight top-right corner */
  #green-shape-layer {
    top: 10px !important;
    width: calc(100% - 24px) !important;
    margin: 10px 12px 0 !important;
    /* sit below the heading */
    height: 70vh !important;
    /* taller hero */
    border-top-right-radius: 0 !important;
    position: relative !important;
    padding-bottom: 130px !important;
    /* allow room for bottom image */
    background-image: url("-/media/EB0A74F61E8F4849B41E0E3ACC836A45.ashx"), linear-gradient(135deg, #2d8f4f 0%, #1f6e3c 100%) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center bottom, center center !important;
    background-size: 88% auto, cover !important;
  }

  /* Hide duplicate heading inside the green panel on mobile */
  #green-shape-layer>h1.heading {
    display: none !important;
  }

  /* Text block sits toward the top of the green panel */
  #heading-content {
    top: 40px !important;
    bottom: auto !important;
    height: auto !important;
    background: transparent !important;
    padding: 16px !important;
    z-index: 31 !important;
    /* above the family image */
    left: 12px !important;
    /* align with green panel's left gutter */
    right: 12px !important;
    /* align with green panel's right gutter */
    width: auto !important;
    /* derive from left/right so it never extends outside */
    box-sizing: border-box !important;
  }

  /* Fix narrow text column on mobile */
  #heading-content .texts {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Readable paragraph sizing and alignment on mobile */
  #heading-content p {
    font-size: 1.5rem !important;
    line-height: 1.45 !important;
    text-align: left !important;
    margin: 0 0 10px 0 !important;
  }

  #heading p {
    margin: 0 0 12px 0 !important;
    font-size: 0.98rem !important;
    text-align: left !important;
  }

  #heading p.leading {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
  }

  /* Family/banner image anchored to bottom center inside the green panel */
  #head-banner {
    display: none !important;
    /* use background on #green-shape-layer instead */
  }

  /* Center the top GEMS logo and put it above the heading */
  .logo-badge {
    position: relative !important;
    display: block !important;
    margin: 6px auto 10px !important;
    /* centered above heading */
    left: auto !important;
    right: auto !important;
    top: -10px !important;
    height: 110px !important;
    width: auto !important;
    z-index: 101 !important;
  }

  /* Navigation container should span full width so cards are centered */
  .navigation_container {
    width: 100% !important;
    margin: 10px 0 0 !important;
    /* small gap below green panel */
    padding: 0 0 40px !important;
    /* breathing room below cards */
    align-items: stretch !important;
  }

  .shape-content h3 {
    line-height: 1.25 !important;
  }

  /* Make CTA bar the same width and corner radius as the cards/grid */
  .cta-section {
    width: auto !important;
    margin: 12px 20px 24px !important;
    /* match grid side padding */
    padding: 20px 20px !important;
    border-radius: 12px !important;
    /* same as cards */
    max-width: none !important;
  }
}

/* Grid color styling to match reference image */

/* Row 1 */
.how-to-switch-shape .shape-bg {
  background: linear-gradient(135deg, #0e8f50 0%, #0a6b3a 100%) !important;
}

.contributions-shape .shape-bg {
  background: linear-gradient(135deg, #ff9900 0%, #e68a00 100%) !important;
}

.changes-shape .shape-bg {
  background: linear-gradient(135deg, #17a2a2 0%, #128585 100%) !important;
}

/* Row 2 */
.care-coordination-shape .shape-bg {
  background: linear-gradient(135deg, #1565a8 0%, #0f4d7d 100%) !important;
}

.gp-nomination-shape .shape-bg {
  background: linear-gradient(135deg, #e62e2e 0%, #c92424 100%) !important;
}

.teal-shape .shape-bg {
  background: linear-gradient(#d47a28 100%);
}

/* New grid items styling */
.cdl-shape .shape-bg {
  background: linear-gradient(135deg, #1a8f5e 0%, #0f6b42 100%) !important;
}

.download-form-shape .shape-bg {
  background: linear-gradient(135deg, #1a8f8f 0%, #0f6b6b 100%) !important;
}

.how-to-change-shape .shape-bg {
  background: linear-gradient(135deg, #f5a623 0%, #d48a0f 100%) !important;
}

.evo-brochure-shape .shape-bg {
  background: linear-gradient(135deg, #1b8989 0%, #146666 100%) !important;
}