.videocontainer {
	padding-inline: 2rem;
	max-width: calc(1200px - 80px);
	margin: 0 auto;
}
.videocontainer .youtubevideo {
	margin-block: 0 72px;

}
.youtubevideo {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16/9;
}

@media screen and (max-width: 767px) {
  .videocontainer .youtubevideo {
  	margin-block: 0 40px;
  }
}

/* =========================================
   Two-Column Flexible Content (ACF)
   ========================================= */

/* Container override ONLY for this section */
.justcontent.twocol-block > .container.pad-content {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center; /* keep centered until desktop */
}

/* Theme has a legacy @max-width:980px rule — out-rank it here */
@media screen and (max-width: 980px) {
  .justcontent.twocol-block > .container.pad-content {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Block tokens */
.twocol-block {
  --twocol-heading: #003640;
  --twocol-text: #122b36;
  --twocol-accent: #f5c84b;
  --twocol-gap: 3rem;
}

/* ===== Base & Tablet (0–991.98px): stacked + centered ===== */
.twocol-block__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--twocol-gap);
  place-items: center;               /* center cards/content */
}

.twocol-block__item {
  width: min(100%, 46rem);
  margin-inline: auto;
  text-align: center;
}

.twocol-block__ill {
  display: block;
  max-width: 120px;                  /* flexible cap */
  height: auto;
  margin-left: auto;                 /* explicit centering holds on small screens */
  margin-right: auto;
  margin-bottom: 1.5rem;
}

.twocol-block__title {
  color: var(--twocol-heading);
  font-size: clamp(1.4rem, 2vw + 1rem, 2.2rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
  text-align: inherit;               /* follow card alignment */
}

.twocol-block__copy {
  color: var(--twocol-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
  text-align: inherit;
}
/*
.twocol-block__btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border: 2px solid var(--twocol-accent);
  border-radius: 999px;
  font-weight: 400;
  text-decoration: none;
  color: #00A3E0;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  margin-left: auto;
  margin-right: auto;                
}

.twocol-block__btn:hover,
.twocol-block__btn:focus {
  background: var(--twocol-accent);
  color: #00242a;
  box-shadow: 0 3px 12px rgba(0,0,0,.1);
}
*/
.twocol-block__btn {
  display: inline-block;
  border-radius: 30px;

  /* Updated padding & border */
  padding: 14px 28px !important;
  border: 2px solid #aaaaaa !important;

  background-color: transparent;
  text-align: center;
  text-decoration: none;

  /* Colors & typography */
  color: #003b49 !important;
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 1.25;

  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: .3s;
  z-index: 2;

  margin-left: auto;
  margin-right: auto; /* center */
}

/* -------------------------------------------
   :after background highlight block
-------------------------------------------- */
.twocol-block__btn:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 0;
  height: 120%;
  background: #ffd100 !important;
  transform: skewX(15deg);
  transition: .3s;
  z-index: -1;
}

/* -------------------------------------------
   Hover state
-------------------------------------------- */
.twocol-block__btn:hover,
.twocol-block__btn:focus {
  color: #003b49 !important;
}

.twocol-block__btn:hover:after,
.twocol-block__btn:focus:after {
  width: 120%;
}

/* ===== Desktop (≥992px): 2 columns + left aligned ===== */
@media (min-width: 992px) {
  .justcontent.twocol-block > .container.pad-content {
    text-align: initial;
    padding-left: 90px;              /* match site container feel */
    padding-right: 90px;
  }

  .twocol-block__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    place-items: start;
  }

  .twocol-block__item {
    width: 100%;
    margin-inline: 0;
    text-align: left;
  }

  .twocol-block__ill {
    margin-left: 0;                  /* icon aligns left on desktop */
    margin-right: 0;
  }

  .twocol-block__btn {
    margin-left: 0;
    margin-right: 0;
  }
}


/* =========================================
   Three-Column Flexible Content (ACF)
   1 col (0–991.98) → 3 cols (≥992)
   ========================================= */

/* Container override ONLY for this section */
.justcontent.threecol-block > .container.pad-content {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  text-align: center; /* centered while stacked */
}

/* Beat legacy .justcontent .container rule at <=980px */
@media screen and (max-width: 980px) {
  .justcontent.threecol-block > .container.pad-content {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Tokens */
.threecol-block {
  --threecol-heading: #003640;
  --threecol-text: #122b36;
  --threecol-accent: #f5c84b;
  --threecol-gap: 2.5rem;
}

/* ===== Base (0–991.98): 1 column, centered ===== */
.threecol-block__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--threecol-gap);
  place-items: center; /* centers cards + contents */
}

.threecol-block__item {
  width: min(100%, 40rem);
  margin-inline: auto;
  text-align: center;
}

.threecol-block__ill {
  display: block;
  max-width: 110px;
  height: auto;
  margin-left: auto;   /* center icon while stacked */
  margin-right: auto;
  margin-bottom: 1.25rem;
}

.threecol-block__title {
  color: var(--threecol-heading);
  font-size: clamp(1.3rem, 1.8vw + 1rem, 1.9rem);
  line-height: 1.2;
  margin: 0 0 .6rem;
  text-align: inherit;
}

.threecol-block__copy {
  color: var(--threecol-text);
  font-size: 1.015rem;
  line-height: 1.6;
  margin: 0 0 1.1rem;
  text-align: inherit;
}
/*
.threecol-block__btn {
  display: inline-block;
  padding: .7rem 1.4rem;
  border: 2px solid var(--threecol-accent);
  border-radius: 999px;
  font-weight: 400;
  text-decoration: none;
  color: #00A3E0;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  margin-left: auto;
  margin-right: auto;
}
.threecol-block__btn:hover,
.threecol-block__btn:focus {
  background: var(--threecol-accent);
  color: #00242a;
  box-shadow: 0 3px 12px rgba(0,0,0,.1);
}*/

.threecol-block__btn {
  display: inline-block;
  border-radius: 30px;

  /* Updated padding & border */
  padding: 14px 28px !important;
  border: 2px solid #aaaaaa !important;

  background-color: transparent;
  text-align: center;
  text-decoration: none;

  /* Colors & typography */
  color: #003b49 !important;
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 1.25;

  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: .3s;
  z-index: 2;

  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------
   :after highlight block
-------------------------------------------- */
.threecol-block__btn:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 0;
  height: 120%;
  background: #ffd100 !important;
  transform: skewX(15deg);
  transition: .3s;
  z-index: -1;
}

/* -------------------------------------------
   Hover
-------------------------------------------- */
.threecol-block__btn:hover,
.threecol-block__btn:focus {
  color: #003b49 !important;
}

/* Animate the :after block */
.threecol-block__btn:hover:after,
.threecol-block__btn:focus:after {
  width: 120%;
}


/* ===== Desktop (≥992px): 3 columns, left aligned ===== */
@media (min-width: 992px) {
  .justcontent.threecol-block > .container.pad-content {
    text-align: initial;
    padding-left: 90px;
    padding-right: 90px;
  }

  .threecol-block__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    place-items: start;
    gap: calc(var(--threecol-gap) + .5rem);
  }

  .threecol-block__item {
    width: 100%;
    margin-inline: 0;
    text-align: left;
  }

  .threecol-block__ill {
    margin-left: 0;  /* icon aligns left on desktop */
    margin-right: 0;
  }

  .threecol-block__btn {
    margin-left: 0;
    margin-right: 0;
  }
}

/* =========================================================
   Keep text left-aligned on mobile (ACF toggle)
   ========================================================= */
@media (max-width: 991.98px) {
  /* stop centering the grid cells when toggle is on */
  .twocol-block.keep-left-mobile .twocol-block__row,
  .threecol-block.keep-left-mobile .threecol-block__row {
    justify-items: start;   /* overrides place-items: center */
  }

  /* text alignment */
  .twocol-block.keep-left-mobile .twocol-block__item,
  .threecol-block.keep-left-mobile .threecol-block__item {
    text-align: left;
  }

  /* icon/image & button alignment */
  .twocol-block.keep-left-mobile .twocol-block__ill,
  .threecol-block.keep-left-mobile .threecol-block__ill,
  .twocol-block.keep-left-mobile .twocol-block__btn,
  .threecol-block.keep-left-mobile .threecol-block__btn {
    margin-left: 0;
    margin-right: 0;
  }
}

/* =========================================
   Careers Hero (scoped)
   ========================================= */
.careers-hero {
  /* Theme tokens */
  --ch-bg: #e6f5fb;
  --ch-heading: #003640;
  --ch-text: #0c2f33;
  --ch-accent: #1fb1d7;

  /* Background image var (set inline from PHP when present) */
  --ch-bgimg: none;

  /* Top bars proportions (desktop defaults) */
  --bar-h: 24px;
  --bar-1: 52%;
  --bar-2: 28%;
  --bar-3: 20%;

  background: var(--ch-bg);
  position: relative;
  overflow: hidden;
  margin-bottom: 40px;
}

/* Background image + gradient overlay (only when bg exists) */
.careers-hero.careers-hero--has-bg {
  background-image:
    linear-gradient(
      90deg,
      rgba(230, 245, 251, 0.98) 0%,
      rgba(230, 245, 251, 0.96) 42%,
      rgba(230, 245, 251, 0.78) 58%,
      rgba(230, 245, 251, 0.35) 72%,
      rgba(230, 245, 251, 0.08) 86%,
      rgba(230, 245, 251, 0.00) 100%
    ),
    var(--ch-bgimg);
 /* NEW: gradient only covers 75% of the width, image still full */
  background-size: 75% 100%, cover;
  background-position: left center, right center;
  background-repeat: no-repeat;
}

/* Top bars */
.careers-hero__bars {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--bar-1) var(--bar-2) var(--bar-3);
  height: var(--bar-h);
  transition: grid-template-columns 400ms ease, height 300ms ease;
}
.careers-hero__bars span:nth-child(1) { background: #007fa6; } /* teal */
.careers-hero__bars span:nth-child(2) { background: #22a7d3; } /* cyan */
.careers-hero__bars span:nth-child(3) { background: #ffd328; } /* gold */

@media (prefers-reduced-motion: reduce) {
  .careers-hero__bars { transition: none; }
}

/* Below 992px: bar height + proportions */
@media (max-width: 991.98px) {
  .careers-hero {
    --bar-h: 16px;
    --bar-1: 50%;
    --bar-2: 30%;
    --bar-3: 20%;
  }
}

/* Container override ONLY in this hero (beats .justcontent .container) */
.careers-hero > .container.pad-content {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Inner layout */
.careers-hero__inner {
  min-height: clamp(420px, 58vh, 640px);
  display: grid;
  grid-template-columns: 1fr; /* single column */
  align-items: center;
  gap: 2rem;
  padding-top: calc(var(--bar-h) + 28px);
  padding-bottom: 42px;
  text-align: center;
  position: relative;
  z-index: 2; /* keep text above bg */
}

/* Content */
.careers-hero__title {
  color: var(--ch-heading);
  font-size: clamp(2rem, 4.2vw + 1rem, 3.6rem);
  line-height: 1.1;
  margin: 0 0 .5rem;
}
.careers-hero__subtitle {
  margin: .25rem 0 1.25rem;
  color: var(--ch-heading);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(1rem, .6vw + .9rem, 1.25rem);
}
.careers-hero__copy {
  color: var(--ch-text);
  font-size: clamp(1rem, .35vw + .95rem, 1.125rem);
  line-height: 1.7;
  margin: 0 auto 1.25rem;
  max-width: 62ch;
}

/* Actions / Buttons */
.careers-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.careers-hero__btn {
  display: inline-block;
  padding: .95rem 1.6rem;
  border: 2px solid var(--ch-accent);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  background: #fff;
  color: var(--ch-accent);
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.careers-hero__btn:hover,
.careers-hero__btn:focus {
  background: var(--ch-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* Secondary button: same behavior */
.careers-hero__btn--secondary {
  background: #fff;
  color: var(--ch-accent);
  border-color: var(--ch-accent);
}
.careers-hero__btn--secondary:hover,
.careers-hero__btn--secondary:focus {
  background: var(--ch-accent);
  color: #fff;
}

/* Desktop: left-align content & actions */
@media (min-width: 992px) {
  .careers-hero__inner {
    text-align: left;
    padding-top: calc(var(--bar-h) + 48px);
    padding-bottom: 60px;
  }
  .careers-hero__copy {
    margin-left: 0;
    margin-right: 0;
    max-width: 55ch;
  }
  .careers-hero__actions { justify-content: flex-start; }
}

/* =========================================
   Mobile polish: left align + smaller type
   ========================================= */
@media (max-width: 991.98px) {
  .careers-hero__inner {
    text-align: left;
    align-items: flex-start;
    padding-top: calc(var(--bar-h) + 24px);
    padding-bottom: 40px;
    min-height: auto;
  }

  .careers-hero__actions {
    justify-content: flex-start;
  }

  .careers-hero__title {
    font-size: clamp(1.65rem, 5.2vw, 2.2rem);
    line-height: 1.15;
  }

  .careers-hero__subtitle {
    font-size: 0.95rem;
    letter-spacing: 0.06em;
  }

  .careers-hero__copy {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 46ch;
    margin-left: 0;
    margin-right: 0;
  }
}

.careers-hero__media--mobile {
  display: none;
}


/* =========================================
   Mobile gradient tweak: stronger right (~20%)
   ========================================= */
/* Mobile: lighten overlay & shift gradient to content panel */
@media (max-width: 991.98px) {

  /* Solid blue background, no gradient, no bg image */
  .careers-hero {
    background: #e6f5fb;
  }

  .careers-hero.careers-hero--has-bg {
    background-image: none;
  }

  /* Show the mobile image block and stack it */
  .careers-hero__media--mobile {
    display: block;
    margin: 0rem 0 0;
  }

  .careers-hero__media--mobile img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Inner stays below image, text left on mobile */
  .careers-hero__inner {
    padding-top: 1.5rem;
    padding-bottom: 40px;
    text-align: left;
    min-height: auto;
  }
    .careers-hero__copy {
    max-width: none;
    width: 100%;
  }

  .careers-hero__content {
    width: 100%;
  }
    .careers-hero__copy {
    max-width: none;
    width: 100%;
  }

  .careers-hero__content {
    width: 100%;
  }
    /* Center all hero text on mobile */
  .careers-hero__inner,
  .careers-hero__content {
    text-align: center;
  }

  /* Headline + copy full width, centered */
  .careers-hero__title,
  .careers-hero__subtitle,
  .careers-hero__copy {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center buttons */
  .careers-hero__actions {
    justify-content: center;
  }


}

/* Beat the legacy container rule (<=980px) ONLY in this hero */
@media screen and (max-width: 980px) {
  .careers-hero > .container.pad-content {
    max-width: 100% !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
@media (max-width: 991.98px) {

  .careers-hero__btn {
    padding: 0.7rem 1.25rem;   /* tighter pill */
    font-size: 0.95rem;        /* smaller text */
    border-width: 2px;         /* keep visual weight */
  }

}



/* ================================
   Blue Spacer Block
   ================================ */
.blue-spacer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0; /* vertical spacing */
}

.blue-spacer__line {
  width: 80px;              /* adjust as needed */
  height: 4px;              /* line thickness */
  background-color: #1fb1d7; /* same blue as site accent */
  border-radius: 2px;
}


/* =========================================
   Icon + Text Columns (scoped)
   ========================================= */
.icontext-block {
  --itx-heading: #003640;
  --itx-text: #122b36;
  --itx-accent: #1fb1d7;
  --itx-bg: #e6f5fb;            /* light blue like careers hero */
  --itx-gap-x: 2.25rem;         /* space between icon and text */
  --itx-gap-y: 2.25rem;         /* vertical gap between items */
  --itx-col-gap: 3rem;          /* gap between columns */
  padding: 2.5rem 0;
}
.icontext-block.has-lightbg {
  background: var(--itx-bg);
}
/* Apply side padding on desktop */
@media (min-width: 992px) {
  .icontext-block.has-lightbg > .container.pad-content {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

/* Reset back to default when viewport shrinks ≤ 778px */
@media (max-width: 778px) {
  .icontext-block.has-lightbg > .container.pad-content {
    padding-left: 4rem;   /* same as your base spacing */
    padding-right: 4rem;
  }
}
.icontext-block > .container.pad-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.icontext-block__heading {
  color: var(--itx-heading);
  font-size: clamp(1.5rem, 1.4vw + 1.2rem, 2rem);
  text-align: center;
  margin: 0 0 1.5rem;
}

/* Grid that holds items */
.icontext-block__grid {
  display: grid;
  grid-template-columns: 1fr;          /* mobile first */
  gap: var(--itx-gap-y) var(--itx-col-gap);
}

/* 2-up modifier for desktop */
@media (min-width: 992px) {
  .icontext-block.is-2up .icontext-block__grid {
    grid-template-columns: 1fr 1fr;
  }
  .icontext-block.is-1up .icontext-block__grid {
    grid-template-columns: 1fr;
  }
}

/* Item: icon left, text right */
.icontext-block__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--itx-gap-x);
}

.icontext-block__icon {
  width: clamp(128px, 8vw, 96px);
  height: auto;
  display: block;
}

.icontext-block__body { min-width: 0; }

.icontext-block__title {
  color: var(--itx-heading);
  font-size: clamp(1.2rem, 0.8vw + 1rem, 1.6rem);
  line-height: 1.25;
  margin: 0 0 .5rem;
}

.icontext-block__copy {
  color: var(--itx-text);
  font-size: 1.0625rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

/* Button matches your white > blue hover style */
.icontext-block__btn {
  display: inline-block;
  padding: .85rem 1.4rem;
  border: 2px solid var(--itx-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--itx-accent);
  text-decoration: none;
  font-weight: 600;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.icontext-block__btn:hover,
.icontext-block__btn:focus {
  background: var(--itx-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

/* Spacing tune-up on smaller screens */
@media (max-width: 767.98px) {
  .icontext-block { padding: 2rem 0; }
  .icontext-block__item { column-gap: 1rem; }
  .icontext-block__icon { width: clamp(70px, 14vw, 76px); }
}

.icontext-block--stack-xs .icontext-block__item {
  grid-template-columns: 1fr;
  row-gap: .75rem;
}
.icontext-block--stack-xs .icontext-block__icon {
  width: 72px;
  margin-bottom: .25rem;
}

/* =========================================
   Standalone Pill Button (Global Utility)
   ========================================= */
/*.btn-pill {
  display: inline-block;
  padding: .95rem 2.6rem .95rem 2.6rem !important;
  border: 2px solid #FFD100;   
  border-radius: 999px;
  text-decoration: none;
  font-weight: 400;
  background: #fff;           
  color: #1fb1d7;            
  transition: background .25s ease, color .25s ease,
              box-shadow .25s ease, border-color .25s ease;
  cursor: pointer;
}

.btn-pill:hover,
.btn-pill:focus {
  background: #1fb1d7;        
  color: #fff;                
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  outline: none;
}

.btn-pill--sm { padding: .7rem 1.2rem; font-size: .95rem; }
.btn-pill--lg { padding: 1.1rem 2rem; font-size: 1.1rem; }

@media (max-width: 480px) {
  .btn-pill--block {
    display: block;
    width: 100%;
    text-align: center;
  }
}
*/
/* =========================================
   Standalone Pill Button (Global Utility)
   ========================================= */
.btn-pill {
  display: inline-block;
  border-radius: 30px;

  /* Updated padding & border */
  padding: 14px 28px !important;
  border: 2px solid #aaaaaa !important;

  background-color: transparent;
  text-decoration: none;
  text-align: center;

  /* Typography */
  color: #003b49 !important;
  font-size: 14px;
  font-weight: 500 !important;
  line-height: 1.25;

  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: .3s;
  z-index: 2;
}

/* -------------------------------------------
   :after skewed fill block
-------------------------------------------- */
.btn-pill:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 0;
  height: 120%;
  background: #ffd100 !important;
  transform: skewX(15deg);
  transition: .3s;
  z-index: -1;
}

/* -------------------------------------------
   Hover
-------------------------------------------- */
.btn-pill:hover,
.btn-pill:focus {
  color: #003b49 !important;
}

.btn-pill:hover:after,
.btn-pill:focus:after {
  width: 120%;
}

/* -------------------------------------------
   Optional size helpers
-------------------------------------------- */
.btn-pill--sm {
  padding: 8px 20px !important;
  font-size: 13px;
}

.btn-pill--lg {
  padding: 18px 34px !important;
  font-size: 16px;
}

/* -------------------------------------------
   Optional full-width on small screens
-------------------------------------------- */
@media (max-width: 480px) {
  .btn-pill--block {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* =========================================
   Inline List Block
   ========================================= */
.inline-list-block {
  --il-accent: #1fb1d7;   /* blue rule + bullets */
  --il-heading: #003640;
  --il-text: #0c2f33;
  padding: 10px 0 20px;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.inline-list-block > .container.pad-content {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Blue rule above the title */
.inline-list-block__rule {
  width: 72px;
  height: 4px;
  margin: 0 auto 14px;
  background: var(--il-accent);
  border-radius: 2px;
}

/* Title */
.inline-list-block__title {
  color: var(--il-heading);
  text-align: center;
  font-size: clamp(1.4rem, 1.5vw + 1rem, 2.2rem);
  line-height: 1.2;
  margin: 0 0 14px;
}

/* The list wraps inline with separators */
.inline-list-block__list {
  --gap-x: 1.5rem;              /* horizontal spacing between items */
  --gap-y: .6rem;               /* vertical spacing between wrapped rows */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  row-gap: var(--gap-y);
  column-gap: var(--gap-x);
  text-align: center;
}

.inline-list-block__item {
  position: relative;
  color: var(--il-text);
  font-size: clamp(.98rem, .35vw + .95rem, 1.125rem);
  line-height: 1.6;
  /* padding left is handled by the bullet separator pseudo */
}

/* Add the blue dot separator before every item except the first visually in the row.
   Using flex & ::before guarantees a consistent separator without editors typing dots. */
.inline-list-block__item + .inline-list-block__item {
  padding-left: .9rem;                  /* space after the dot */
}

.inline-list-block__item + .inline-list-block__item::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--il-accent);
  line-height: 1.6;
  transform: translateX(-.25rem);
}

/* Tighten small screens */
@media (max-width: 480px) {
  .inline-list-block__list {
    --gap-x: 1rem;
    --gap-y: .5rem;
  }
}

/* =========================================
   Practices Block (3-column list)
   ========================================= */
.practices-block {
  --pb-heading: #003640;
  --pb-text: #122b36;
  --pb-accent: #1fb1d7;
  --pb-gap: 2.5rem;
  padding: 1rem 0 0 0;
}

/* Left-aligned title */
.practices-block__title {
  color: var(--pb-heading);
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  text-align: left;
  margin: 1rem 0 2rem 0;
}

.practices-block__intro {
  color: var(--pb-text);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 2rem;
  text-align: left;
}

.practices-block__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pb-gap);
  place-items: center;
}

.practices-block__col {
  width: min(100%, 36rem);
  margin-inline: auto;
  text-align: center;
}

/* State headings: not bold, ~20% larger */
.practices-block__state {
  font-weight: 400;
  font-size: clamp(1.2rem, 1.1vw + 1rem, 1.56rem);
  margin: 0 0 .75rem;
  color: var(--pb-heading);
}

.practices-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.practices-block__list li { margin: 0 0 .4rem; }

.practices-block__list a {
  color: var(--pb-accent);
  text-decoration: none;
  transition: color .2s ease;
}
.practices-block__list a:hover { color: #00242a; }

/* Desktop (≥992px): 3 columns */
@media (min-width: 992px) {
  .practices-block__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    place-items: start;
    gap: calc(var(--pb-gap) + 1rem);
  }
  .practices-block__col {
    text-align: left;
    margin-inline: 0;
  }
}

/* Left-align on mobile if toggle */
@media (max-width: 991.98px) {
  .practices-block.keep-left-mobile .practices-block__row { justify-items: start; }
  .practices-block.keep-left-mobile .practices-block__col,
  .practices-block.keep-left-mobile .practices-block__intro,
  .practices-block.keep-left-mobile .practices-block__title { text-align: left; }
}

/* =========================================
   Block-local spacer (ABOVE title)
   Does NOT conflict with site-wide .blue-spacer
   ========================================= */
.pb-spacer {
  display: flex;
  justify-content: flex-start;   /* align with left title */
  align-items: center;
  padding: 0 0 1rem;             /* visual gap above title */
}
.pb-spacer__line {
  width: 80px;
  height: 4px;
  background-color: #1fb1d7;
  border-radius: 2px;
}

.halfblock .img img {aspect-ratio: initial !important;}