/* ── Grid Cards ── */

.grid-cards__header {
  text-align: center;
  max-width: 1200px;
  margin: 0 auto 48px;
}
.grid-cards--intro-w-content .grid-cards__header { max-width: 760px; }
.grid-cards--intro-w-medium  .grid-cards__header { max-width: 900px; }
.grid-cards--intro-w-large   .grid-cards__header { max-width: 1000px; }
.grid-cards--intro-w-wide    .grid-cards__header { max-width: 1200px; }
.grid-cards--intro-w-full    .grid-cards__header { max-width: none; }

/* Content width — caps the inner container (header + cards grid). */
.grid-cards--content-w-standard .grid-cards__inner { max-width: 1480px; }
.grid-cards--content-w-medium   .grid-cards__inner { max-width: 1200px; }
.grid-cards--content-w-small    .grid-cards__inner { max-width: 1000px; }

/* Intro alignment — affects header (eyebrow / heading / intro body) */
.grid-cards--intro-left .grid-cards__header {
  text-align: left;
  margin-inline: 0;
}

/* Grid alignment — affects content inside each card.
   Left is the default (no rule needed); center variant: */
.grid-cards--cards-center .grid-cards__card {
  text-align: center;
  align-items: center;
}
.grid-cards--cards-center .grid-cards__card-head {
  justify-content: center;
}
.grid-cards--cards-center .grid-cards__powered-by {
  text-align: center;
}

.grid-cards__icon-logo { margin-bottom: 20px; line-height: 0; }
.grid-cards__icon-logo img {
  max-width: 150px;
  width: auto;
  height: auto;
  display: inline-block;
}
.grid-cards__header .gs-eyebrow  { display: inline-block; margin-bottom: 28px; line-height: 1.2em; }
.grid-cards__header .gs-heading-lg { margin-bottom: 12px; }

.grid-cards__intro p,
.grid-cards__card-desc p { margin: 0 0 8px; }
.grid-cards__intro p:last-child,
.grid-cards__card-desc p:last-child { margin: 0; }

/* ── Sortable cards ──
   When the Sortable toggle is on, subtitles become filter pills above the
   grid. The subtitle inside each card is hidden, and cards are filtered
   client-side by matching data-gs-subtitle to the active pill's value. */
.grid-cards__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 0 0 40px;
}
.grid-cards__filter {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1.5px solid var(--gs-blue);
  background: transparent;
  color: var(--gs-blue);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.grid-cards__filter:hover,
.grid-cards__filter:focus-visible,
.grid-cards__filter.is-active {
  background: var(--gs-blue);
  color: var(--gs-white);
  border-color: var(--gs-blue);
}
.grid-cards__filter:focus-visible {
  outline: 2px solid var(--gs-blue);
  outline-offset: 2px;
}

/* Hide subtitle text on cards when sortable mode is on. */
.grid-cards--sortable .grid-cards__card-subtitle { display: none; }

/* Filtered-out cards drop from the layout entirely. */
.grid-cards__card.is-hidden { display: none !important; }

/* Reload animation — every still-visible card re-fades-in-and-up after a
   filter click so the grid feels like it refreshes. JS toggles the class
   per click with a forced reflow in between to restart the animation. */
@keyframes gs-grid-cards-reload {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: translateY(0); }
}
.grid-cards__card.is-reloading {
  animation: gs-grid-cards-reload .4s ease-out var(--gs-reload-delay, 0s) both;
}

/* Grid — flex layout so the last row centers when partial */
.grid-cards__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gs-gap);
}
.grid-cards__grid > .grid-cards__card {
  flex: 0 1 auto;
}
.grid-cards__grid--cols-2 > .grid-cards__card { width: calc((100% - var(--gs-gap)) / 2); }
.grid-cards__grid--cols-3 > .grid-cards__card { width: calc((100% - 2 * var(--gs-gap)) / 3); }
.grid-cards__grid--cols-4 > .grid-cards__card { width: calc((100% - 3 * var(--gs-gap)) / 4); }

/* Card base */
.grid-cards__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--gs-radius-lg);
  //padding: 24px 28px 28px 28px;
  padding: 24px 28px 0px 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .25s ease, transform .25s ease;
}
.grid-cards__card:hover {
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.12), 0 20px 50px rgba(0, 0, 0, 0.13);
}

/* Card style variants */
.grid-cards__card--outlined {
  border: 1.5px solid var(--gs-border);
  background: var(--gs-white);
}

.grid-cards__card--light {
  background: var(--gs-blue);
  border: none;
}
.grid-cards__card--light .grid-cards__card-title { color: var(--gs-white); }
.grid-cards__card--light .grid-cards__card-desc  { color: var(--gs-white); }
.grid-cards__card--light .grid-cards__card-desc h1,
.grid-cards__card--light .grid-cards__card-desc h2,
.grid-cards__card--light .grid-cards__card-desc h3,
.grid-cards__card--light .grid-cards__card-desc h4,
.grid-cards__card--light .grid-cards__card-desc h5,
.grid-cards__card--light .grid-cards__card-desc h6 { color: var(--gs-white); }
.grid-cards__card--light .grid-cards__powered-by         { border-top-color: rgba(255, 255, 255, .2); }
.grid-cards__card--light .grid-cards__powered-by-text    { color: rgba(255, 255, 255, .7); }
.grid-cards__card--light .grid-cards__powered-by-link    { color: var(--gs-white); }

.grid-cards__card--slate {
  background: var(--gs-slate-gray);
  border: none;
}
.grid-cards__card--slate .grid-cards__card-title { color: var(--gs-white); }
.grid-cards__card--slate .grid-cards__card-desc  { color: var(--gs-white); }
.grid-cards__card--slate .grid-cards__card-desc h1,
.grid-cards__card--slate .grid-cards__card-desc h2,
.grid-cards__card--slate .grid-cards__card-desc h3,
.grid-cards__card--slate .grid-cards__card-desc h4,
.grid-cards__card--slate .grid-cards__card-desc h5,
.grid-cards__card--slate .grid-cards__card-desc h6 { color: var(--gs-white); }
.grid-cards__card--slate .grid-cards__powered-by         { border-top-color: rgba(255, 255, 255, .2); }
.grid-cards__card--slate .grid-cards__powered-by-text    { color: rgba(255, 255, 255, .7); }
.grid-cards__card--slate .grid-cards__powered-by-link    { color: var(--gs-white); }

.grid-cards__card--shadow {
  background: var(--gs-white);
  border: none;
  box-shadow: var(--gs-shadow);
}

/* Card image — extends to card edges, with the icon overlay positioned per .grid-cards--icon-{location} */
.grid-cards__card-img {
  position: relative;
  margin: -24px -28px 28px;
  overflow: hidden;
}
.grid-cards__card-img > img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.grid-cards--ratio-16-9 .grid-cards__card-img > img { aspect-ratio: 16 / 9; }
.grid-cards--ratio-5-4  .grid-cards__card-img > img { aspect-ratio: 5 / 4; }
.grid-cards--ratio-7-5  .grid-cards__card-img > img { aspect-ratio: 7 / 5; }
.grid-cards--ratio-6-7  .grid-cards__card-img > img { aspect-ratio: 6 / 7; }
.grid-cards--ratio-4-3  .grid-cards__card-img > img { aspect-ratio: 4 / 3; }

/* Mobile-only aspect ratio override (under 640px). Emitted only when the
   editor picks a value other than "Same as desktop". */
@media (max-width: 639.98px) {
  .grid-cards--ratio-mobile-16-9 .grid-cards__card-img > img { aspect-ratio: 16 / 9; }
  .grid-cards--ratio-mobile-5-4  .grid-cards__card-img > img { aspect-ratio: 5 / 4; }
  .grid-cards--ratio-mobile-7-5  .grid-cards__card-img > img { aspect-ratio: 7 / 5; }
  .grid-cards--ratio-mobile-6-7  .grid-cards__card-img > img { aspect-ratio: 6 / 7; }
  .grid-cards--ratio-mobile-4-3  .grid-cards__card-img > img { aspect-ratio: 4 / 3; }
}

.grid-cards__card-img .grid-cards__icon {
  position: absolute;
  z-index: 1;
}
.grid-cards--icon-top-left     .grid-cards__card-img .grid-cards__icon { top: 12px;    left: 12px;  }
.grid-cards--icon-top-right    .grid-cards__card-img .grid-cards__icon { top: 12px;    right: 12px; }
.grid-cards--icon-bottom-left  .grid-cards__card-img .grid-cards__icon { bottom: 12px; left: 12px;  }
.grid-cards--icon-bottom-right .grid-cards__card-img .grid-cards__icon { bottom: 12px; right: 12px; }

/* Icon + text row — icon sits next to (or above) the eyebrow/title/subtitle stack */
.grid-cards__card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.grid-cards--head-stacked .grid-cards__card-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.grid-cards--cards-center.grid-cards--head-stacked .grid-cards__card-head {
  align-items: center;
}

/* Text stack inside the card head: Eyebrow → Title → Subtitle */
.grid-cards__card-head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.grid-cards--cards-center .grid-cards__card-head-text {
  align-items: center;
  text-align: center;
}

/* Eyebrow & Subtitle — share the same small uppercase label style.
   Colour follows the icon's --bg- choice when one is set. */
.grid-cards__card-eyebrow,
.grid-cards__card-subtitle {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.grid-cards__card .grid-cards__card-eyebrow--blue,
.grid-cards__card .grid-cards__card-subtitle--blue   { color: var(--gs-blue); }
.grid-cards__card .grid-cards__card-eyebrow--orange,
.grid-cards__card .grid-cards__card-subtitle--orange { color: var(--gs-orange); }
.grid-cards__card .grid-cards__card-eyebrow--gray,
.grid-cards__card .grid-cards__card-subtitle--gray   { color: var(--gs-slate-gray); }

/* Subtitle size variants — Medium (13px) is the default above. */
.grid-cards--card-subtitle-size-sm .grid-cards__card-subtitle { font-size: 11px; }
.grid-cards--card-subtitle-size-lg .grid-cards__card-subtitle { font-size: 15px; }

#leadership {
  .grid-cards__card-subtitle {
    text-transform: none;
    color: #111;
    font-weight: 400;
    letter-spacing: -0.02em;
    font-size: 14px;
    strong {
      color: var(--gs-blue);
      font-weight: 800;
      font-size: 18px;
    }
  }
}
/* Icon — fixed 48×48 box for library/SVG variants. Image-upload variant
   gets its own tile treatment below. */
.grid-cards__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--gs-orange);
  display: flex;
  align-items: center;
  justify-content: center;
}

.grid-cards__icon svg,
.grid-cards__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Image-upload variant — white tile with soft shadow, mirrors
   .gs-carousel__card-logo from the carousel module. Free-sized so logos
   keep their natural aspect ratio; image caps at 36px tall. */
.grid-cards__icon--img {
  width: auto;
  height: auto;
  background: var(--gs-white);
  border-radius: 12px;
  padding: 12px 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  max-width: 60%;
}
.grid-cards__icon--img img {
  display: block;
  width: auto;
  height: 36px;
  max-width: 100%;
  object-fit: contain;
}

/* SVG variant — coloured tile, white SVG stroke */
.grid-cards__icon--svg {
  background-color: var(--gs-blue);
  border-radius: 5px;
  padding: 8px;
  color: var(--gs-white);
}
.grid-cards__icon--svg.grid-cards__icon--bg-orange {
  background-color: var(--gs-orange);
}
.grid-cards__icon--svg.grid-cards__icon--bg-gray {
  background-color: var(--gs-gray-soft);
  color: var(--gs-blue);
}
.grid-cards__icon--svg svg,
.grid-cards__icon--svg svg path,
.grid-cards__icon--svg svg circle,
.grid-cards__icon--svg svg rect,
.grid-cards__icon--svg svg polyline,
.grid-cards__icon--svg svg line {
  fill: none;
  stroke: var(--gs-white);
}
.grid-cards__icon--bg-gray svg,
.grid-cards__icon--bg-gray svg path,
.grid-cards__icon--bg-gray svg circle,
.grid-cards__icon--bg-gray svg rect,
.grid-cards__icon--bg-gray svg polyline,
.grid-cards__icon--bg-gray svg line {
  stroke: var(--gs-blue);
}

/* Filled icon variant — switches the rules above to use fill instead of stroke.
   Add the "is_filled" toggle to an icon-library entry to opt in. */
.grid-cards__icon--svg.grid-cards__icon--filled svg,
.grid-cards__icon--svg.grid-cards__icon--filled svg path,
.grid-cards__icon--svg.grid-cards__icon--filled svg circle,
.grid-cards__icon--svg.grid-cards__icon--filled svg rect,
.grid-cards__icon--svg.grid-cards__icon--filled svg polyline,
.grid-cards__icon--svg.grid-cards__icon--filled svg line {
  fill: currentColor;
  stroke: none;
}

/* Card content */
.grid-cards__card-title {
  font-size: clamp(1.375rem, 1.25vw + 0.875rem, 2rem);
  font-weight: 700;
  color: var(--gs-text-dark);
  margin: 0;
}

/* Card title size variants — Large is the default above */
.grid-cards--card-title-size-sm .grid-cards__card-title { font-size: clamp(1rem, 0.5vw + 0.85rem, 1.25rem); }
.grid-cards--card-title-size-md .grid-cards__card-title { font-size: clamp(1.125rem, 0.75vw + 0.9rem, 1.5rem); }

.grid-cards__card-desc {
  font-size: var(--gs-body-size);
  font-weight: 400;
  color: var(--gs-text-dark);
  line-height: 1.4em;
  flex: 1;
  margin-bottom: 18px;
}

/* Headings in the WYSIWYG scale relative to the description font-size,
   so size variants below pull them along automatically. */
.grid-cards__card-desc h1 { font-size: 1.75em; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.grid-cards__card-desc h2 { font-size: 1.5em;  font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.grid-cards__card-desc h3 { font-size: 1.25em; font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
.grid-cards__card-desc h4 { font-size: 1.125em; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.grid-cards__card-desc h5 { font-size: 1em; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
.grid-cards__card-desc h6 { font-size: 0.875em; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }

/* Body-size variants — only Small and Medium override; Large is the default above. */
.grid-cards--desc-sm .grid-cards__card-desc { font-size: clamp(0.875rem, 0.25vw + 0.8rem, 1rem); }
.grid-cards--desc-md .grid-cards__card-desc { font-size: clamp(0.9375rem, 0.4vw + 0.825rem, 1.125rem); }

/* Paragraph spacing scales with body size; :last-child reset above keeps trailing gap clean. */
.grid-cards--desc-sm .grid-cards__card-desc p { margin-bottom: 12px; }
.grid-cards--desc-md .grid-cards__card-desc p { margin-bottom: 15px; }
.grid-cards--desc-lg .grid-cards__card-desc p { margin-bottom: 18px; }

/* Custom bullets — orange triangle (matches gs-carousel__card-features). */
.grid-cards__card-desc ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grid-cards__card-desc ul li {
  position: relative;
  padding-left: 18px;
  line-height: 1.5em;
}
.grid-cards__card-desc ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 12px;
  height: 12px;
  background-image: url("../../../assets/images/orange-triangle-logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Blue check mark variant */
.grid-cards__card--marker-check .grid-cards__card-desc ul li::before {
  width: 14px;
  height: 14px;
  top: 0.3em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.grid-cards__card--marker-check .grid-cards__card-desc ul li {
  padding-left: 22px;
}

/* Orange check mark variant */
.grid-cards__card--marker-check-orange .grid-cards__card-desc ul li::before {
  width: 14px;
  height: 14px;
  top: 0.3em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E87624' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.grid-cards__card--marker-check-orange .grid-cards__card-desc ul li {
  padding-left: 22px;
}

/* White check mark variant */
.grid-cards__card--marker-check-white .grid-cards__card-desc ul li::before {
  width: 14px;
  height: 14px;
  top: 0.3em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.grid-cards__card--marker-check-white .grid-cards__card-desc ul li {
  padding-left: 22px;
}

.grid-cards__powered-by {
  margin-top: 0;
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--gs-border);
}

/* Card fade-in — slightly slower than the global default with ease-out settle.
   Stagger delay (--gs-fade-delay) is set inline per card; applying it only to
   opacity/transform so hover transitions on box-shadow stay snappy. */
.grid-cards__card[data-gs-fade-up] {
  transition:
    opacity 1s ease-out var(--gs-fade-delay, 0s),
    transform 1s ease-out var(--gs-fade-delay, 0s),
    box-shadow .25s ease;
}
.grid-cards__powered-by-text {
  font-size: 12px;
  font-weight: 600;
  color: #99A1AF;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 6px;
}
.grid-cards__powered-by-text--sentence {
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
}

/* Outcome / Outcome Result — appears below the Powered By block. */
.grid-cards__outcome-block {
  margin: 15px 0 15px;
  width: 100%;
  padding-top: 20px;
  border-top: 1px solid var(--gs-border);
}
.grid-cards__outcome {
  font-size: clamp(1.375rem, 1.25vw + 0.875rem, 2rem);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--gs-orange);
  letter-spacing: 0;
  line-height: 1.15;
  margin: 0 0 4px;
}
.grid-cards__outcome-result {
  font-size: clamp(1.125rem, 1vw + 0.75rem, 1.625rem);
  font-weight: 600;
  color: var(--gs-text, #111);
  line-height: 1.25;
  margin: 0;
}
/* Black variant — doubled selector to beat the dark-card overrides above */
.grid-cards__powered-by-text.grid-cards__powered-by-text--black {
  color: var(--gs-text, #111);
}
.grid-cards__powered-by-images {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 30px;
  margin: 0 0 8px;
}
.grid-cards--cards-center .grid-cards__powered-by-images { justify-content: center; }
.grid-cards__powered-by-image {
  line-height: 0;
}
.grid-cards__powered-by-image img {
  width: auto;
  height: 40px;
  display: block;
}
.grid-cards__powered-by-image a img {
  transition: transform .2s ease;
  transform-origin: left center;
}
.grid-cards--cards-center .grid-cards__powered-by-image a img { transform-origin: center; }
.grid-cards__powered-by-image a:hover img,
.grid-cards__powered-by-image a:focus img { transform: scale(1.06); }
.grid-cards__powered-by-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.grid-cards__powered-by-link {
  display: inline-block;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  color: var(--gs-blue);
  text-decoration: none;
  transition: color .15s ease;
}
.grid-cards__powered-by-link::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  color: var(--gs-orange);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .2s ease, transform .2s ease;
}
.grid-cards__powered-by-link:hover,
.grid-cards__powered-by-link:focus {
  color: var(--gs-blue-dark);
}
.grid-cards__powered-by-link:hover::after,
.grid-cards__powered-by-link:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

/* ── Reveal overlay ──
   When a card has back content, a triangle-corner "+" button sits in the
   top-right. Clicking it fades in a solid blue/orange overlay and then
   slides the back title + content up into view. The original card content
   underneath isn't touched. */
.grid-cards__card--revealable { /* container — no transform needed */ }

.grid-cards__card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center; /* middle is the default; overridden by --back-align-* */
  padding: 32px 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 4; /* above card-link (1), inner anchors (2), reveal-btn (3) */
}
.grid-cards__card--back-bg-blue   .grid-cards__card-back { background: var(--gs-blue); }
.grid-cards__card--back-bg-orange .grid-cards__card-back { background: var(--gs-orange); }

/* Vertical alignment of the title + content block inside the overlay. */
.grid-cards__card--back-align-top    .grid-cards__card-back { justify-content: flex-start; }
.grid-cards__card--back-align-middle .grid-cards__card-back { justify-content: center; }
.grid-cards__card--back-align-bottom .grid-cards__card-back { justify-content: flex-end; }

.grid-cards__card.is-revealed .grid-cards__card-back {
  opacity: 1;
  pointer-events: auto;
}

/* Back title — reuses .grid-cards__card-title so size variants apply,
   forced white on the colored overlay, with clearance for the close button. */
.grid-cards__card-back-title {
  margin: 0 0 14px;
  padding-right: 80px;
  color: var(--gs-white);
}

/* Back content typography — same as the description WYSIWYG but white-on-color.
   No flex-grow so vertical alignment works; min-height:0 + overflow:auto keep
   long content scrollable inside the overlay. */
.grid-cards__card-back-content {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  font-size: var(--gs-body-size);
  font-weight: 400;
  color: var(--gs-white);
  line-height: 1.4em;
}
.grid-cards__card-back-content p { margin: 0 0 8px; }
.grid-cards__card-back-content p:last-child { margin: 0; }
.grid-cards__card-back-content h1,
.grid-cards__card-back-content h2,
.grid-cards__card-back-content h3,
.grid-cards__card-back-content h4,
.grid-cards__card-back-content h5,
.grid-cards__card-back-content h6 {
  margin: 0 0 8px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gs-white);
}
.grid-cards__card-back-content h2 { font-size: 1.5em; }
.grid-cards__card-back-content h3 { font-size: 1.25em; }
.grid-cards__card-back-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}
.grid-cards__card-back-content ol {
  margin: 0 0 8px;
  padding-left: 20px;
}
.grid-cards__card-back-content a {
  color: var(--gs-white);
  text-decoration: underline;
}

/* Title + content reveal — fade and slide up after the bg fades in.
   Resting state offsets them below + invisible; revealed state animates
   them with a 200ms delay so they trail the background. */
.grid-cards__card--revealable .grid-cards__card-back-title,
.grid-cards__card--revealable .grid-cards__card-back-content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .4s ease, transform .4s ease;
}
.grid-cards__card.is-revealed .grid-cards__card-back-title,
.grid-cards__card.is-revealed .grid-cards__card-back-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s ease .2s, transform .4s ease .2s;
}

/* Custom bullets on the back content — matches the description list-marker
   styles, but driven by the separate card_back_list_marker field. */
.grid-cards__card-back-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.grid-cards__card-back-content ul li {
  position: relative;
  padding-left: 18px;
  line-height: 1.5em;
}
.grid-cards__card-back-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 12px;
  height: 12px;
  background-image: url("../../../assets/images/orange-triangle-logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Blue check mark variant */
.grid-cards__card--back-marker-check .grid-cards__card-back-content ul li::before {
  width: 14px;
  height: 14px;
  top: 0.3em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300569e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.grid-cards__card--back-marker-check .grid-cards__card-back-content ul li {
  padding-left: 22px;
}

/* Orange check mark variant */
.grid-cards__card--back-marker-check-orange .grid-cards__card-back-content ul li::before {
  width: 14px;
  height: 14px;
  top: 0.3em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E87624' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.grid-cards__card--back-marker-check-orange .grid-cards__card-back-content ul li {
  padding-left: 22px;
}

/* White check mark variant */
.grid-cards__card--back-marker-check-white .grid-cards__card-back-content ul li::before {
  width: 14px;
  height: 14px;
  top: 0.3em;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.grid-cards__card--back-marker-check-white .grid-cards__card-back-content ul li {
  padding-left: 22px;
}

/* Dark-fill variants — keep back content readable on dark cards. */
.grid-cards__card--light .grid-cards__card-back-content,
.grid-cards__card--slate .grid-cards__card-back-content { color: var(--gs-white); }
.grid-cards__card--light .grid-cards__card-back-content a,
.grid-cards__card--slate .grid-cards__card-back-content a { color: var(--gs-white); }

/* Reveal toggle — triangle-corner button in the top-right of the card.
   Gray triangle bg via clip-path, oversized "+" icon roughly centered in
   the visible triangle area. Hover scales the icon and rotates it 45deg. */
.grid-cards__reveal-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 5; /* above the back overlay so the button stays clickable while revealed */
}
.grid-cards__reveal-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gs-light);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%);
  transition: background .2s ease;
}
.grid-cards__reveal-btn:hover::before,
.grid-cards__reveal-btn:focus-visible::before {
  background: var(--gs-border);
}
.grid-cards__reveal-btn svg {
  position: absolute;
  top: 14px;
  right: 12px;
  width: 30px;
  height: 30px;
  color: var(--gs-text-dark);
  transition: transform .2s ease;
  transform-origin: center;
  pointer-events: none;
}
.grid-cards__reveal-btn:hover svg,
.grid-cards__reveal-btn:focus-visible svg {
  transform: scale(1.15) rotate(45deg);
}
.grid-cards__reveal-btn:focus-visible {
  outline: 2px solid var(--gs-blue);
  outline-offset: -2px;
}

/* Revealed state — the same button stays in place; the "+" stays rotated to
   look like an X until the user clicks again to close. Hover keeps the 45°
   rotation and just adds the scale pop. */
.grid-cards__card.is-revealed .grid-cards__reveal-btn svg {
  transform: rotate(45deg);
}
.grid-cards__card.is-revealed .grid-cards__reveal-btn:hover svg,
.grid-cards__card.is-revealed .grid-cards__reveal-btn:focus-visible svg {
  transform: scale(1.15) rotate(45deg);
}

/* Card link — invisible overlay that makes the entire card clickable. */
.grid-cards__card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
}
.grid-cards__card--linked { cursor: pointer; }

/* Revealable cards (without an explicit link) hint at click-to-flip. */
.grid-cards__card--revealable:not(.grid-cards__card--linked) { cursor: pointer; }

/* Bottom flip CTA — pill button centered in the card, pinned to the card's
   bottom edge. Background mirrors the card's Icon Tile background so the
   button visually ties to the card's accent. Sits above the
   .grid-cards__card-link overlay so the click registers; the
   .grid-cards__card-back overlay covers it once the card is revealed. */
.grid-cards__card-flip-cta {
  position: relative;
  z-index: 2;
  margin-top: auto;
  align-self: center;
  justify-content: center;
  text-transform: uppercase;
  padding: 16px 24px 16px 40px;
  gap: 12px;
  font-size: 16px;
  margin-bottom: 24px;
}
.grid-cards__card-flip-cta::after {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 5 16 12 9 19'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 5 16 12 9 19'/></svg>") no-repeat center / contain;
  transition: transform .2s ease;
}
.grid-cards__card-flip-cta:hover::after,
.grid-cards__card-flip-cta:focus-visible::after { transform: translateX(4px); }
.grid-cards__card-flip-cta:focus-visible { outline: none; }

/* Color variants — mirror the .grid-cards__icon--bg-* swatches. */
.grid-cards__card-flip-cta--bg-blue {
  background: var(--gs-blue);
  color: var(--gs-white);
  border-color: var(--gs-blue);
}
.grid-cards__card-flip-cta--bg-blue:hover,
.grid-cards__card-flip-cta--bg-blue:focus-visible {
  background: var(--gs-blue-dark);
  color: var(--gs-white);
  border-color: var(--gs-blue-dark);
}
.grid-cards__card-flip-cta--bg-orange {
  background: var(--gs-orange);
  color: var(--gs-white);
  border-color: var(--gs-orange);
}
.grid-cards__card-flip-cta--bg-orange:hover,
.grid-cards__card-flip-cta--bg-orange:focus-visible {
  background: var(--gs-orange-dark);
  color: var(--gs-white);
  border-color: var(--gs-orange-dark);
}
.grid-cards__card-flip-cta--bg-gray {
  background: var(--gs-gray-soft);
  color: var(--gs-blue);
  border-color: var(--gs-gray-soft);
}
.grid-cards__card-flip-cta--bg-gray:hover,
.grid-cards__card-flip-cta--bg-gray:focus-visible {
  background: rgba(0, 86, 158, 0.2);
  color: var(--gs-blue-dark);
  border-color: rgba(0, 86, 158, 0.2);
}

/* Inner anchors must sit above the overlay so they remain clickable on their own URLs. */
.grid-cards__card .grid-cards__powered-by-image a,
.grid-cards__card .grid-cards__powered-by-link {
  position: relative;
  z-index: 2;
}

/* Footer CTA */
.grid-cards__footer {
  text-align: center;
  margin-top: 48px;
}
.grid-cards__after-content {
  max-width: 900px;
  margin: 0 auto 24px;
  font-size: 14px;
  font-weight: 400;
  color: var(--gs-text-dark);
  line-height: 1.6em;
}
.grid-cards__after-content p { margin: 0 0 8px; }
.grid-cards__after-content p:last-child { margin: 0; }
.grid-cards__after-content + .gs-btn { margin-top: 8px; }

/* Dark bg override */
.gs-bg--blue .grid-cards__card--outlined,
.gs-bg--navy .grid-cards__card--outlined,
.gs-bg--dark .grid-cards__card--outlined {
  border-color: rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
}

.gs-bg--blue .grid-cards__card-title,
.gs-bg--navy .grid-cards__card-title,
.gs-bg--dark .grid-cards__card-title { color: var(--gs-white); }

/* Intro body white when bg is blue/navy/dark */
.gs-bg--blue .grid-cards__intro,
.gs-bg--blue .grid-cards__intro p,
.gs-bg--navy .grid-cards__intro,
.gs-bg--navy .grid-cards__intro p,
.gs-bg--dark .grid-cards__intro,
.gs-bg--dark .grid-cards__intro p { color: var(--gs-white); }

/* Card title color variants — explicit color wins over default and dark-bg auto-white */

.gs-bg--blue .grid-cards__card-desc,
.gs-bg--navy .grid-cards__card-desc,
.gs-bg--dark .grid-cards__card-desc { color: rgba(255,255,255,.65); }

/* After-content text white on dark sections */
.gs-bg--blue .grid-cards__after-content,
.gs-bg--blue .grid-cards__after-content p,
.gs-bg--navy .grid-cards__after-content,
.gs-bg--navy .grid-cards__after-content p,
.gs-bg--dark .grid-cards__after-content,
.gs-bg--dark .grid-cards__after-content p { color: var(--gs-white); }

/* Shadow card style keeps its white background even on dark sections,
   so the text inside must stay dark for legibility. */
.gs-bg--blue .grid-cards__card--shadow .grid-cards__card-title,
.gs-bg--navy .grid-cards__card--shadow .grid-cards__card-title,
.gs-bg--dark .grid-cards__card--shadow .grid-cards__card-title { color: var(--gs-text-dark); }
.gs-bg--blue .grid-cards__card--shadow .grid-cards__card-desc,
.gs-bg--navy .grid-cards__card--shadow .grid-cards__card-desc,
.gs-bg--dark .grid-cards__card--shadow .grid-cards__card-desc { color: var(--gs-text); }

/* Responsive */
@media (max-width: 1024px) {
  .grid-cards__grid--cols-4 > .grid-cards__card { width: calc((100% - var(--gs-gap)) / 2); }
}

@media (max-width: 980px) {
  .grid-cards__grid--cols-3 > .grid-cards__card { width: calc((100% - var(--gs-gap)) / 2); }
}

@media (max-width: 768px) {
  .grid-cards__grid--cols-2 > .grid-cards__card { width: 100%; }
  .grid-cards__grid--cols-3 > .grid-cards__card,
  .grid-cards__grid--cols-4 > .grid-cards__card { width: calc((100% - var(--gs-gap)) / 2); }
}

@media (max-width: 640px) {
  .grid-cards__grid--cols-3 > .grid-cards__card { width: 100%; }
}

@media (max-width: 580px) {
  .grid-cards__grid--cols-4 > .grid-cards__card { width: 100%; }
}

@media (max-width: 480px) {
  .grid-cards__grid--cols-2 > .grid-cards__card,
  .grid-cards__grid--cols-3 > .grid-cards__card { width: 100%; }
}

/* ── "Show as Carousel" mode (≤640px) ── */
.grid-cards__controls { display: none; }

@media (max-width: 639px) {
  /* Static parent does the clipping; the grid itself is the sliding track. */
  .grid-cards--carousel .grid-cards__inner { overflow: hidden; }
  .grid-cards--carousel .grid-cards__grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
    cursor: grab;
    -webkit-user-select: none;
            user-select: none;
  }
  .grid-cards--carousel .grid-cards__grid:active { cursor: grabbing; }
  .grid-cards--carousel .grid-cards__grid > .grid-cards__card {
    flex: 0 0 100%;
    width: 100% !important;
  }
  .grid-cards--carousel .grid-cards__controls { display: flex; }
}

.grid-cards__controls {
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}
.grid-cards__nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--gs-border);
  background: var(--gs-white);
  color: var(--gs-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: border-color .18s, background .18s;
}
.grid-cards__nav:hover {
  border-color: var(--gs-navy);
  background: var(--gs-light);
}
.grid-cards__dots { display: flex; gap: 8px; }
.grid-cards__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.grid-cards__dot.is-active {
  background: var(--gs-navy);
  transform: scale(1.3);
}
/* Dark-bg variants — mirror carousel module */
.gs-bg--navy .grid-cards__nav,
.gs-bg--dark .grid-cards__nav,
.gs-bg--blue .grid-cards__nav {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .08);
  color: var(--gs-white);
}
.gs-bg--navy .grid-cards__nav:hover,
.gs-bg--dark .grid-cards__nav:hover,
.gs-bg--blue .grid-cards__nav:hover {
  background: rgba(255, 255, 255, .18);
}
.gs-bg--navy .grid-cards__dot,
.gs-bg--dark .grid-cards__dot,
.gs-bg--blue .grid-cards__dot { background: rgba(255, 255, 255, .3); }
.gs-bg--navy .grid-cards__dot.is-active,
.gs-bg--dark .grid-cards__dot.is-active,
.gs-bg--blue .grid-cards__dot.is-active { background: var(--gs-white); }

@media (min-width: 1025px) {
  .grid-cards__card-desc,
  .grid-cards__after-content { font-weight: 300; }
  .grid-cards__header { margin: 0 auto 60px; }
}