/* ============================================================
   THE CANAL THREAD — signature spine for community pages
   Palette: paper #FAFBFC · mist #EEF3F7 · ink #16283E
            channel #2E6FA3 · steel #64798C · signal #0FA3B1
   ============================================================ */

:root {
  --ct-paper: #FAFBFC;
  --ct-mist: #EEF3F7;
  --ct-ink: #16283E;
  --ct-channel: #2E6FA3;
  --ct-steel: #64798C;
  --ct-signal: #0FA3B1;
}

/* the full-page wrapper the thread measures against (holds every
   [data-ct-stop] section from Living Here through the Lead band) */
.ct-page-wrap { position: relative; width: 100%; }

/* --- the thread itself: a fixed-position SVG rail in the left gutter --- */
.ct-thread {
  position: absolute;
  top: 0;
  left: max(16px, calc((100vw - 1180px) / 2 - 56px));
  width: 40px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
.ct-thread svg { width: 100%; height: 100%; overflow: visible; }
.ct-thread .ct-path {
  fill: none;
  stroke: var(--ct-channel);
  stroke-width: 2;
  opacity: .45;
}
.ct-thread .ct-flow {
  fill: none;
  stroke: var(--ct-signal);
  stroke-width: 2;
  stroke-dasharray: 6 90;
  opacity: .8;
  animation: ct-flow 9s linear infinite;
}
@keyframes ct-flow { to { stroke-dashoffset: -96; } }

/* bridge markers: one per section, sits on the thread */
.ct-marker {
  fill: var(--ct-paper);
  stroke: var(--ct-channel);
  stroke-width: 2;
}
.ct-marker.is-passed { fill: var(--ct-channel); }

/* the Gulf terminus chip */
.ct-gulf-chip {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font: 600 11px/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-channel);
  border: 1px solid var(--ct-channel);
  border-radius: 999px;
  padding: 8px 16px;
  background: var(--ct-paper);
}

/* hide under full-bleed sections + mobile behavior */
@media (max-width: 1023px) {
  .ct-thread { left: 10px; width: 20px; }
  .ct-thread .ct-path, .ct-thread .ct-flow { stroke-width: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-thread .ct-flow { animation: none; display: none; }
}

/* ============================================================
   QUADRANT SELECTOR — hover/tap a quadrant of the Cape outline,
   the description panel swaps. Replaces the six identical cards.
   ============================================================ */
.ct-quadrants {
  display: grid;
  grid-template-columns: minmax(300px, 5fr) minmax(280px, 4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) { .ct-quadrants { grid-template-columns: 1fr; } }

/* Scoped to the FALLBACK svg only: the unscoped `.ct-quad-map svg` legacy
   rule also matched Leaflet's overlay SVG and forced it to 100% of its
   zero-sized pane -> 0x0 -> the quadrant polygons rendered invisible. */
.ct-quad-map .ct-quad-fallback svg { width: 100%; height: auto; display: block; }
.ct-quad-map path.ct-quad {
  fill: var(--ct-mist);
  stroke: var(--ct-paper);
  stroke-width: 3;
  cursor: pointer;
  transition: fill .25s ease;
}
.ct-quad-map path.ct-quad:hover,
.ct-quad-map path.ct-quad:focus-visible,
.ct-quad-map path.ct-quad.is-active {
  fill: var(--ct-channel);
  outline: none;
}
.ct-quad-map text {
  font: 600 13px/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .1em;
  fill: var(--ct-steel);
  pointer-events: none;
}
.ct-quad-map path.ct-quad.is-active + text,
.ct-quad-map path.ct-quad:hover + text { fill: #fff; }

.ct-quad-panel { min-height: 240px; }
.ct-quad-panel .ct-quad-name {
  font: 700 clamp(24px, 3vw, 34px)/1.15 var(--font-display, "Playfair Display", serif);
  color: var(--ct-ink);
  margin: 0 0 6px;
}
.ct-quad-panel .ct-quad-water {
  font: 600 11px/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ct-signal);
  margin: 0 0 14px;
}
.ct-quad-panel .ct-quad-desc {
  font: 400 17px/1.65 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
  margin: 0 0 18px;
}
.ct-quad-panel .ct-quad-link {
  font: 600 15px/1 var(--font-body, Inter, sans-serif);
  color: var(--ct-channel);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ct-quad-panel .ct-quad-link:hover { color: var(--ct-ink); }

/* swap animation */
.ct-quad-panel.is-swapping .ct-quad-body { opacity: 0; transform: translateY(6px); }
.ct-quad-panel .ct-quad-body { transition: opacity .2s ease, transform .2s ease; }
@media (prefers-reduced-motion: reduce) {
  .ct-quad-panel .ct-quad-body { transition: none; }
}

/* inline stat chips woven into prose (Living Here section) */
.ct-chip {
  display: inline-block;
  font: 600 .88em/1.3 var(--font-body, Inter, sans-serif);
  color: var(--ct-channel);
  background: var(--ct-mist);
  border-radius: 6px;
  padding: 1px 8px 2px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   PAGE SCOPE + COLOR LAW OVERRIDE
   This page uses ONLY paper/mist/ink/channel/steel/signal. Any
   global --msx-gold* hairline/accent that would otherwise bleed
   onto this template (service-band-card::before, gold text, etc.)
   is neutralized here to the channel/steel family instead.
   ============================================================ */
.page-template-page-cape-coral,
body.page-template-page-cape-coral-php {
  position: relative;
  --msx-gold: var(--ct-channel);
  --msx-gold-bright: var(--ct-signal);
  --msx-gold-deep: var(--ct-channel);
  --msx-gold-ink: var(--ct-ink);
  --msx-gold-soft: rgba(46, 111, 163, 0.10);
  --msx-gold-line: rgba(46, 111, 163, 0.35);
  --msx-gold-metal: linear-gradient(140deg, var(--ct-signal) 0%, var(--ct-channel) 60%, var(--ct-ink) 100%);
  background: var(--ct-paper);
}
.page-template-page-cape-coral .service-band-card::before,
body.page-template-page-cape-coral-php .service-band-card::before {
  background: var(--ct-channel) !important;
}
.page-template-page-cape-coral .cc-faq-item,
body.page-template-page-cape-coral-php .cc-faq-item {
  border-bottom-color: rgba(100, 121, 140, 0.28);
}
.page-template-page-cape-coral .cc-faq-marker,
body.page-template-page-cape-coral-php .cc-faq-marker {
  color: var(--ct-channel);
}

/* ============================================================
   S2 — LIVING HERE: editorial 2-col split (photo | prose)
   ============================================================ */
.ct-living {
  display: grid;
  grid-template-columns: minmax(280px, 4fr) minmax(320px, 6fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .ct-living { grid-template-columns: 1fr; } }
.ct-living__photo {
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ct-mist);
}
.ct-living__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-living__prose p {
  font: 400 clamp(16px, 1.4vw, 18px)/1.75 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
  margin: 0 0 1.1em;
}
.ct-living__prose p:first-of-type::first-letter {
  font-family: var(--font-display, "Playfair Display", serif);
  font-size: 3.4em;
  float: left;
  line-height: .82;
  padding: .04em .07em 0 0;
  color: var(--ct-channel);
}
.ct-living__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 1.4em 0 0;
}
.ct-living__chips .ct-chip--live {
  background: transparent;
  border: 1px solid var(--ct-signal);
  color: var(--ct-signal);
}

/* ============================================================
   S3 — THE ROUTE TO THE GULF: real Leaflet instrument
   ============================================================ */
.ct-route {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 960px) { .ct-route { grid-template-columns: 1fr; } }
.ct-route__map-wrap {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: var(--ct-mist);
  border: 1px solid rgba(100, 121, 140, 0.25);
}
.ct-route__map { position: absolute; inset: 0; }
.ct-route__map .leaflet-tile-pane { filter: saturate(0.35) brightness(1.04) sepia(0.15) hue-rotate(165deg); }
.ct-route__fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: .6em;
  padding: 2em;
  text-align: center;
  color: var(--ct-steel);
  font: 500 15px/1.5 var(--font-body, Inter, sans-serif);
}
.ct-route__legend {
  position: absolute;
  left: 12px; bottom: 12px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(250, 251, 252, 0.92);
  border: 1px solid rgba(100, 121, 140, 0.25);
  border-radius: 4px;
  padding: 8px 12px;
  font: 600 11px/1.4 var(--font-body, Inter, sans-serif);
  color: var(--ct-ink);
}
.ct-route__legend span { display: flex; align-items: center; gap: 6px; }
.ct-route__legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.ct-route__rail {
  border-left: 2px solid var(--ct-mist);
  padding-left: clamp(16px, 2vw, 24px);
}
.ct-route__rail h3 {
  font: 700 clamp(20px, 2.2vw, 26px)/1.2 var(--font-display, "Playfair Display", serif);
  color: var(--ct-ink);
  margin: 0 0 .6em;
}
.ct-route__facts { list-style: none; margin: 0 0 1.4em; padding: 0; }
.ct-route__facts li {
  display: flex; align-items: baseline; gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ct-mist);
  font: 400 14.5px/1.5 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
}
.ct-route__facts li:last-child { border-bottom: none; }
.ct-route__facts b {
  font-variant-numeric: tabular-nums;
  color: var(--ct-channel);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 2.4em;
}
.ct-route__cta {
  font: 600 15px/1 var(--font-body, Inter, sans-serif);
  color: var(--ct-channel);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ct-route__cta:hover { color: var(--ct-ink); }
.ct-route-path {
  animation: ct-route-draw 1.6s ease forwards;
}
@keyframes ct-route-draw { from { stroke-dashoffset: var(--ct-len, 1000); } to { stroke-dashoffset: 0; } }
.ct-route-label {
  font: 600 10px/1 var(--font-body, Inter, sans-serif);
  fill: var(--ct-ink);
  paint-order: stroke;
  stroke: var(--ct-paper);
  stroke-width: 3px;
}

/* ============================================================
   S4B — ZIP EXPLORER: Leaflet map + flood-zone toggle layer
   ============================================================ */
.ct-zip-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 0 0 clamp(20px, 3vw, 32px);
  padding: 14px 18px;
  background: var(--ct-paper);
  border: 1px solid rgba(100, 121, 140, 0.25);
  border-radius: 6px;
}
.ct-flood-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font: 600 14px/1 var(--font-body, Inter, sans-serif);
  color: var(--ct-ink);
  user-select: none;
  flex-shrink: 0;
}
.ct-flood-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-flood-toggle__track {
  position: relative;
  width: 40px; height: 22px;
  border-radius: 999px;
  background: var(--ct-mist);
  border: 1px solid rgba(100, 121, 140, 0.35);
  transition: background .2s ease;
  flex-shrink: 0;
}
.ct-flood-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ct-paper);
  box-shadow: 0 1px 2px rgba(22,40,62,.3);
  transition: transform .2s ease;
}
.ct-flood-toggle input:checked + .ct-flood-toggle__track {
  background: var(--ct-channel);
  border-color: var(--ct-channel);
}
.ct-flood-toggle input:checked + .ct-flood-toggle__track::after { transform: translateX(18px); }
.ct-flood-toggle input:focus-visible + .ct-flood-toggle__track { outline: 2px solid var(--ct-signal); outline-offset: 2px; }
.ct-flood-toggle__copy {
  margin: 0;
  font: 400 13.5px/1.5 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
  flex: 1 1 320px;
  min-width: 220px;
}
.ct-flood-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  flex-shrink: 0;
}
.ct-flood-legend span {
  display: flex; align-items: center; gap: 6px;
  font: 600 11px/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .04em;
  color: var(--ct-ink);
  white-space: nowrap;
}
.ct-flood-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }

.ct-zips {
  display: grid;
  grid-template-columns: minmax(300px, 6fr) minmax(280px, 4fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
@media (max-width: 900px) { .ct-zips { grid-template-columns: 1fr; } }

.ct-zip-map {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ct-mist);
  border: 1px solid rgba(100, 121, 140, 0.25);
}
.ct-zip-leaflet { position: absolute; inset: 0; }
/* (illustrated mode: ZIP map has no tile layer; filter removed) */
.ct-zip-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 1em;
  padding: 2em;
  text-align: center;
  color: var(--ct-steel);
  font: 500 15px/1.5 var(--font-body, Inter, sans-serif);
}
.ct-zip-fallback__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ct-zip-btn {
  font: 600 13px/1 var(--font-body, Inter, sans-serif);
  color: var(--ct-channel);
  background: var(--ct-paper);
  border: 1px solid var(--ct-channel);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}
.ct-zip-btn.is-active, .ct-zip-btn:hover { background: var(--ct-channel); color: #fff; }

.ct-zip-maplabel {
  /* illustrated mode: centre the pill ON its representative point (matches
     .ct-quad-maplabel; top-left anchoring drifted pill centres ~25px east,
     off small polygons at mobile zooms) */
  display: inline-block;
  transform: translate(-50%, -50%);
  font: 700 12px/1 var(--font-body, Inter, sans-serif);
  color: var(--ct-ink);
  background: rgba(250, 251, 252, 0.92);
  border: 1px solid rgba(46, 111, 163, 0.4);
  border-radius: 3px;
  padding: 2px 6px;
  white-space: nowrap;
  pointer-events: none;
}
.ct-zip-maplabel.is-active { background: var(--ct-channel); color: #fff; border-color: var(--ct-channel); }

.ct-zip-panel { min-height: 260px; }
.ct-zip-panel .ct-zip-name {
  font: 700 clamp(24px, 3vw, 32px)/1.15 var(--font-display, "Playfair Display", serif);
  color: var(--ct-ink);
  margin: 0 0 4px;
}
.ct-zip-panel .ct-zip-quad {
  font: 600 11px/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-channel);
  margin: 0 0 10px;
}
.ct-zip-panel .ct-zip-water {
  font: 600 11px/1.4 var(--font-body, Inter, sans-serif);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ct-signal);
  margin: 0 0 14px;
}
.ct-zip-panel .ct-zip-desc,
.ct-zip-panel .ct-zip-areas {
  font: 400 15px/1.65 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
  margin: 0 0 14px;
}
.ct-zip-panel .ct-zip-link {
  font: 600 15px/1 var(--font-body, Inter, sans-serif);
  color: var(--ct-channel);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.ct-zip-panel .ct-zip-link:hover { color: var(--ct-ink); }
.ct-zip-panel .ct-zip-body { transition: opacity .2s ease, transform .2s ease; }
.ct-zip-panel.is-swapping .ct-zip-body { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) {
  .ct-zip-panel .ct-zip-body { transition: none; }
}

/* ============================================================
   S6 — KNOWLEDGE ROWS: "Go deeper" editorial index list
   ============================================================ */
.ct-rows {
  columns: 2;
  column-gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 780px) { .ct-rows { columns: 1; } }
.ct-row {
  display: block;
  break-inside: avoid;
  padding: 16px 0;
  border-bottom: 1px solid var(--ct-mist);
  text-decoration: none;
}
.ct-row__title {
  display: inline-block;
  font: 600 16.5px/1.4 var(--font-body, Inter, sans-serif);
  color: var(--ct-ink);
  background-image: linear-gradient(var(--ct-channel), var(--ct-channel));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease;
}
.ct-row:hover .ct-row__title { background-size: 100% 1px; color: var(--ct-channel); }
.ct-row__desc {
  display: block;
  margin-top: 3px;
  font: 400 14px/1.5 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
}

/* ============================================================
   S7 — FLOOD & WATER FACTS: definition ledger
   ============================================================ */
.ct-ledger { width: 100%; border-collapse: collapse; }
.ct-ledger tr { border-bottom: 1px solid var(--ct-mist); }
.ct-ledger tr:last-child { border-bottom: none; }
.ct-ledger th, .ct-ledger td {
  text-align: left;
  vertical-align: top;
  padding: 16px 14px 16px 0;
  font: 400 15px/1.6 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
}
.ct-ledger th {
  width: 15%;
  white-space: nowrap;
  font: 700 15px/1.4 var(--font-display, "Playfair Display", serif);
  color: var(--ct-ink);
}
.ct-ledger td.ct-ledger__note {
  font-variant-numeric: tabular-nums;
  color: var(--ct-channel);
  font-weight: 600;
}
.ct-ledger-wrap { overflow-x: auto; }
.ct-ledger-caption {
  font: 400 13.5px/1.6 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
  margin-top: 1.2em;
}

/* ============================================================
   S8 — SCHOOLS + SPOTS: asymmetric ledger split
   ============================================================ */
.ct-split8 {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(260px, 4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .ct-split8 { grid-template-columns: 1fr; } }
.ct-split8 h3 {
  font: 700 clamp(18px, 2vw, 22px)/1.3 var(--font-display, "Playfair Display", serif);
  color: var(--ct-ink);
  margin: 0 0 .8em;
}
.ct-mini-ledger { list-style: none; margin: 0; padding: 0; }
.ct-mini-ledger li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ct-mist);
  font: 400 14.5px/1.5 var(--font-body, Inter, sans-serif);
  color: var(--ct-steel);
}
.ct-mini-ledger li:last-child { border-bottom: none; }
.ct-mini-ledger .ct-ml-name { color: var(--ct-ink); font-weight: 600; }
.ct-mini-ledger .ct-ml-meta { text-align: right; flex-shrink: 0; white-space: nowrap; color: var(--ct-channel); font-variant-numeric: tabular-nums; }
.ct-mini-ledger .ct-ml-blurb { display: block; font-weight: 400; color: var(--ct-steel); margin-top: 2px; }

/* ============================================================
   S9 — MARKET PULSE: CTA row under the live stats card
   ============================================================ */
.ct-market-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 1.8em;
}

/* ============================================================
   S10 — BRAYDEN'S TAKE ink reskin (channel accents, no gold)
   ============================================================ */
.ct-brayden.section-lux--ink {
  background: var(--ct-ink);
}
.ct-brayden .eyebrow-lux--light::before { background: var(--ct-signal); }
.ct-brayden .brayden-quote p:first-child::before { color: var(--ct-channel); }
.ct-brayden .brayden-signoff { color: var(--ct-signal); }

/* ============================================================
   Section rhythm helpers
   ============================================================ */
[data-ct-stop] { position: relative; }
.ct-eyebrow-signal { color: var(--ct-signal) !important; }
.ct-eyebrow-signal::before { background: var(--ct-signal) !important; }


/* === RESTORED quadmap rules (dropped by stale-copy zipflood build; recovered from .bak_zipflood) === */
.ct-quad-leaflet { position: absolute; inset: 0; display: none; }
/* (illustrated mode: quadrant map has no tile layer; filter removed) */
.ct-quad-leaflet .leaflet-interactive { cursor: pointer; transition: fill .25s ease, fill-opacity .25s ease; }
/* accessible overlay labels — always present, always keyboard-reachable,
   sit above whichever visual (map or fallback SVG) is underneath */
.ct-quad-labels {
  position: absolute;
  inset: 0;
  z-index: 500;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none;
}
.ct-quad-btn {
  pointer-events: auto;
  align-self: center;
  justify-self: center;
  font: 600 12px/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ct-ink);
  background: rgba(250, 251, 252, 0.88);
  border: 1px solid rgba(100, 121, 140, 0.35);
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.ct-quad-btn:hover,
.ct-quad-btn:focus-visible,
.ct-quad-btn.is-active {
  background: var(--ct-channel);
  color: #fff;
  border-color: var(--ct-channel);
  outline: none;
}
/* fallback SVG (no-JS / geojson-fetch-failure path) */
.ct-quad-fallback { position: absolute; inset: 0; display: none; }
.ct-quad-fallback svg { width: 100%; height: 100%; display: block; }
.ct-quad-fallback path.ct-quad {
  fill: var(--ct-mist);
  stroke: var(--ct-paper);
  stroke-width: 3;
  cursor: pointer;
  transition: fill .25s ease;
}
.ct-quad-fallback path.ct-quad:hover,
.ct-quad-fallback path.ct-quad:focus-visible,
.ct-quad-fallback path.ct-quad.is-active {
  fill: var(--ct-channel);
  outline: none;
}
.ct-quad-fallback text {
  font: 600 13px/1 var(--font-body, Inter, sans-serif);
  letter-spacing: .1em;
  fill: var(--ct-steel);
  pointer-events: none;
}
.ct-quad-fallback path.ct-quad.is-active + text,
.ct-quad-fallback path.ct-quad:hover + text { fill: #fff; }
/* on-polygon quadrant labels (owner fix) */
.ct-quad-anchor { background: none; border: none; }
.ct-quad-maplabel { display: inline-block; transform: translate(-50%, -50%); font: 700 12px/1 var(--font-body, Inter, sans-serif); letter-spacing: .12em; color: var(--ct-ink); background: rgba(250,251,252,.92); border: 1px solid var(--ct-channel); border-radius: 999px; padding: 7px 12px; cursor: pointer; white-space: nowrap; box-shadow: 0 1px 4px rgba(22,40,62,.12); transition: background .2s ease, color .2s ease; }
.ct-quad-maplabel.is-active { background: var(--ct-channel); color: #fff; }
/* corner overlay buttons become screen-reader-only once the real map is live */
.ct-map-live .ct-quad-labels { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* RESTORED: the portrait wrapper that sizes the quadrant Leaflet map (v2 quadmap fix) */
.ct-quad-map {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 448px;
  margin: 0 auto;
  background: var(--ct-mist);
  border: 1px solid rgba(100, 121, 140, 0.25);
}


/* ============================================================
   ILLUSTRATED MAP MODE (tile-less quadrant + ZIP instruments)
   Water = light paper + 8%-steel wave lines; land-context mist
   sits slightly darker/cooler (#E3EAF1) so land carries weight.
   NOTE: Leaflet adds .leaflet-container to the SAME element the
   map is created on, so compound selectors are required — a
   descendant selector matches nothing and leaflet.css's #ddd
   grey would paint the water flat grey.
   ============================================================ */
.ct-quad-leaflet.leaflet-container,
.ct-zip-leaflet.leaflet-container {
  background-color: var(--ct-paper) !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0 8Q6 4 12 8T24 8' fill='none' stroke='%2364798C' stroke-width='1' opacity='0.08'/%3E%3Cpath d='M0 16Q6 12 12 16T24 16' fill='none' stroke='%2364798C' stroke-width='1' opacity='0.08'/%3E%3C/svg%3E");
}

/* quiet water/channel name labels (module waterLabels) */
.milner-water-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.milner-water-text {
  display: inline-block; /* required for the per-label rotate() */
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ct-steel);
  opacity: 0.55;
  white-space: nowrap;
}

/* module serif area labels + icons (unused while areaLabels:false on this
   page, shipped for the hub/rollout pages that will use them) */
.milner-area-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
  white-space: nowrap;
}
.milner-label-text {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  pointer-events: auto;
  cursor: pointer;
}
.milner-area-label .milner-label-text[data-tone="dark"] {
  color: var(--ct-paper);
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.milner-area-label .milner-label-text[data-tone="light"] {
  color: var(--ct-ink);
  text-shadow:
    -2px 0 2px var(--ct-paper), 2px 0 2px var(--ct-paper),
    0 -2px 2px var(--ct-paper), 0 2px 2px var(--ct-paper);
}
.milner-area-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: none;
}
.milner-area-icon .milner-icon-svg svg {
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}
.milner-icon-white svg { color: var(--ct-paper); }
.milner-icon-ink   svg { color: var(--ct-ink); }