.concept-image-wrapper {
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 6px solid #f58220;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
/* Make the anchor fill the wrapper so the image can stretch corner‑to‑corner */
.concept-image-wrapper a{
  display: block;
  width: 100%;
  height: 100%;
}

/* Guarantee the nested <img> still covers the full frame when wrapped */
.concept-image-wrapper a > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  
.concept-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px; /* optional: inner rounding */
  }

  ul.no-bullets {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
  }

  html.is-animating .transition-fade {
    transition: transform 0.4s ease, opacity 0.4s ease;
    opacity: 0;
    transform: translateY(50px);
  }
  
  html.is-leaving .transition-fade {
    opacity: 0;
    transform: translateY(-50px);
  }
/* ► Global orange button style (re-used site-wide) */
.btn-orange{
  background-color:#f28b2e;
  color:#ffffff !important;
  border:none;
  font-weight:600;
  padding:.6rem 1.3rem;
  border-radius:.5rem;
  transition:background-color .25s ease;
}
.btn-orange:hover,
.btn-orange:focus{
  background-color:#d97706;
  color:#ffffff !important;
  text-decoration:none;
}
.btn-orange:active{
  background-color:#bd6a04;
  color:#ffffff !important;
}

/* 🔹 Deep navy blue theme for page backgrounds */
.bg-deep-navy {
  background-color: #001f63 !important;
  color: white;
}

.bg-deep-navy .material-symbols-outlined,
.bg-deep-navy .nav-icon .material-symbols-outlined {
  color: white !important;
}

.bg-deep-navy .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 🔸 Dark shadow overrides for dark-background pages */
.bg-deep-navy .btn-orange{
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.45), 0 .125rem .25rem rgba(0,0,0,.35);
}
.bg-deep-navy .btn-orange:hover,
.bg-deep-navy .btn-orange:focus{
  box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.55), 0 .2rem .4rem rgba(0,0,0,.45);
}
/* Ensure any generic Bootstrap `.shadow` used on this page is dark rather than light if overridden elsewhere */
.bg-deep-navy .shadow{
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.45) !important;
}

/* 🔸 Default shadow for orange buttons on light backgrounds */
.btn-orange{
  box-shadow: 0 .375rem .75rem rgba(0,0,0,.18), 0 .125rem .25rem rgba(0,0,0,.12);
}
.btn-orange:hover,
.btn-orange:focus{
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.22), 0 .2rem .4rem rgba(0,0,0,.16);
}

/* 📱 Mobile spacing + centering helpers */
@media (max-width: 576px){
  .mobile-comfy{ padding-left:1rem !important; padding-right:1rem !important; }
  .mobile-comfy .row{ row-gap:1rem !important; }
  .mobile-comfy h1,
  .mobile-comfy h5,
  .mobile-comfy p,
  .mobile-comfy ul,
  .mobile-comfy .lead{ margin-bottom:1rem !important; }
  .mobile-comfy .btn{ margin-top:.5rem; }
  .mobile-comfy img{ display:block; margin-left:auto; margin-right:auto; }
  /* One Water – Slide 2 buttons on phones */
  .city-buttons{ flex-direction: column !important; align-items: stretch !important; gap: .75rem !important; }
  .city-buttons .btn, .city-buttons .btn-orange, .city-buttons .nav-btn{ width: 100% !important; }
}

/* ===================== One Water Houston theme ===================== */

/* Houston thumbnails: thicker orange border and larger corner radius to match the slide */
.houston-thumb{
  display:block;
  width:100%;
  height:auto;
  box-sizing:border-box;
  border: 12px solid #f28b2e;   /* closer to slide’s orange */
  border-radius: 32px;          /* rounder corners like the original */
}
/* Pale sky page background like the reference slide */
.bg-sky { background-color: #dce7f3 !important; }
/* One Water mini-cities: ensure body text matches heading navy */
.bg-sky .text-dark, 
.bg-sky .text-body { color: #0b2a55 !important; }
/* Deep navy text utility for headings on light backgrounds */
.text-navy { color: #0b2a55 !important; }
/* Ensure links inside navy text containers match the heading color */
.text-navy a { color: #0b2a55 !important; }
.text-navy a:hover { color: #082040 !important; }
/* Navy tile background used by the two lower tiles */
.bg-navy { background-color: #3e5687 !important; color:#ffffff !important; }
/* Teal tile background used by the Phase 1 tile */
.bg-teal { background-color: #6ed0dd !important; }
/* Rounded, slightly elevated tile style to match the mock */
.card-owh {
  border-radius: 1.1rem;                    /* closer to the slide’s rounded boxes */
  padding: 1rem 1.25rem;            /* a bit more breathing room */
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.18), 0 .125rem .25rem rgba(0,0,0,.12);
  border: 3px solid rgba(11,42,85,.18);     /* subtle navy outline like the mock */
}
.card-owh h6{ font-weight:700; margin-bottom:.25rem; }
.card-owh p{ margin-bottom:0; }

/* ✅ Enforce tile backgrounds on One Water Houston */
.card-owh.bg-teal{
  background:#49c7d1 !important;          /* more cyan like the slide */
  background-color:#49c7d1 !important;
  color:#0b2a55 !important;               /* dark navy text per slide */
  border-color:#0b2a55 !important;        /* darker teal/navy outline */
}
.card-owh.bg-navy{
  background:#5b77a8 !important;          /* lighter blue like the slide tiles */
  background-color:#5b77a8 !important;
  color:#ffffff !important;
  border-color:#2f4f85 !important;        /* slightly darker blue outline */
}
.card-owh.bg-navy h6,
.card-owh.bg-navy p,
.card-owh.bg-teal h6,
.card-owh.bg-teal p{ color:inherit !important; }
/* === Global responsive image fixes (site‑wide) ======================= */

/* Make all images/videos shrink to their container on small screens */
img, svg, video { max-width: 100%; height: auto; }

/* Keep hero images full‑width without distortion if you want to apply it */
.hero-img-safe { width: 100% !important; height: auto !important; }

/* 1×1 circular wrapper so rounded-circle style stays a perfect circle */
.circle-img-wrap{
  width: 100%;
  max-width: 600px;           /* cap for large screens; safe to adjust */
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.circle-img-wrap > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Opt-in: make something 100% width on phones (use alongside w-75 etc.) */
@media (max-width: 576px){
  .w-100-mobile { width: 100% !important; }
  /* Override mobile-comfy image centering for specific images */
  .img-left-mobile { margin-left: 0 !important; margin-right: 0 !important; display:block; }
  /* iOS/mobile fix: avoid jitter with fixed backgrounds */
  .thankyou-bg { background-attachment: scroll; }
  /* One Water – Slide 2 buttons on phones */
  .city-buttons{ flex-direction: column !important; align-items: stretch !important; gap: .75rem !important; }
  .city-buttons .btn, .city-buttons .btn-orange, .city-buttons .nav-btn{ width: 100% !important; }
}

/* Interconnected Water Systems: responsive magnifying glass overlay */
.overlay-lens{
  position: absolute;
  width: clamp(56px, 14vw, 90px); /* scales with viewport */
  left: 15%;
  bottom: -1rem;
  pointer-events: none;
}

/* === Water Equity: utilities for aspect ratio and mobile widths ====== */
/* 3:4 frame that cleanly crops inner media */
.ratio-3x4-wrap{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}
.ratio-3x4-wrap > img,
.ratio-3x4-wrap > picture,
.ratio-3x4-wrap > video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Mobile-only width helpers */
@media (max-width: 576px){
  .w-85-mobile { width: 85% !important; }
  .w-75-mobile { width: 75% !important; }
  .w-65-mobile { width: 65% !important; }
  .w-60-mobile { width: 60% !important; }
  .w-36-mobile { width: 36% !important; }
}
/* ====================== TYPOGRAPHY UTILITIES (scoped) ====================== */
/* Removed global body/heading overrides so pages keep the original typography
   defined in css/styles.css. These utilities are safe and non-invasive. */

:root{
  --lh-body: 1.6;
  --lh-heading: 1.2;
}

/* Deep-navy pages: readable link colors */
.bg-deep-navy a{ color:#9bd3ff; }
.bg-deep-navy a:hover{ color:#cfe9ff; }

/* Utilities only (no global font overrides) */
.text-balance{ text-wrap: balance; }
.text-measure{ max-width: 65ch; }

/* Restart icon: white, flipped to opposite direction, slightly thicker stroke */
.icon-restart{
  width: 1.35em;
  height: 1.35em;
  color: #ffffff;                 /* arrow stays white via currentColor stroke */
  transform: scaleX(-1);          /* flip direction */
  transform-origin: 50% 50%;
  /* no background here; the BUTTON supplies the orange disc */
  border-radius: 0;
  padding: 0;
}
/* Nudge stroke width for all child paths/shapes inside the SVG */
.icon-restart, .icon-restart *{ stroke-width: 2px !important; }

/* Flat outline nav button with DARK shadow on dark pages */
.btn-outline-light.nav-btn{
  color: #ffffff !important;
  border: none;
  background-color: #f28b2e !important;   /* solid orange disc */
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* slightly softened shadow */
  box-shadow: 0 .45rem .9rem rgba(0,0,0,.22), 0 .1rem .2rem rgba(0,0,0,.18) !important;
}
.btn-outline-light.nav-btn:hover,
.btn-outline-light.nav-btn:focus{
  background-color:#d97706 !important;
  /* slightly stronger than rest state, still lighter than before */
  box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.30), 0 .2rem .4rem rgba(0,0,0,.22) !important;
}

/* Hide the inner SVG circle so we don't get an orange dot inside a white ring.
   The orange disc now comes from the svg's background set above. */
.icon-restart circle{
  display: none !important;
}

.icon-restart path{
  stroke: #ffffff !important;      /* white arrow stroke */
  fill: none !important;           /* ensure arrow is not filled */
}

/* Arrow icons inside buttons: consistent sizing and alignment */
.btn .material-symbols-outlined{ font-size:1.25em; line-height:1; vertical-align:-0.15em; }

/* --- FIX: Do not crop the One Water droplet overlay inside 3:4 wrappers --- */
.ratio-3x4-wrap .overlay-icon{
  /* override the generic 3:4 media rule that sets inset:0; width/height:100% */
  inset: auto;
  width: auto;
  height: auto;
  max-width: 58%;
  max-height: 58%;
  object-fit: contain;
  pointer-events: none; /* keep clicks on the image beneath */
}