.presentation-hero-copy {
  min-height: 440px;
  background: #0b3b4b;
}

.presentation-hero-image {
  display: none;
}

.presentation-hero-copy::before {
  background: rgba(2, 28, 38, 0.2);
}

.presentation-hero-copy::after {
  display: none;
}

.presentation-hero-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: -4px;
}

.presentation-hero-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 6px 11px;
  border: 1px solid rgba(179, 220, 211, 0.62);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(2, 27, 37, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.presentation-hero-partner-logo:hover,
.presentation-hero-partner-logo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(2, 27, 37, 0.28);
  outline: 3px solid rgba(104, 201, 188, 0.8);
  outline-offset: 2px;
}

.presentation-hero-partner-logo img {
  display: block;
  width: 148px;
  height: 42px;
  object-fit: contain;
}

.presentation-hero-nav {
  width: 100%;
  max-width: none;
}

.presentation-quick-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.presentation-quick-nav .quick-nav-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  align-content: start;
  gap: 8px;
  min-height: 286px;
  padding: 12px;
  border-radius: 8px;
}

.presentation-quick-nav .quick-nav-card::after {
  position: absolute;
  top: 17px;
  right: 14px;
  grid-column: auto;
  grid-row: auto;
}

.quick-nav-card-head {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-right: 18px;
}

.quick-nav-card-head strong {
  color: #075f58;
  font-size: 1.02rem;
  line-height: 1.1;
}

.quick-nav-card-head small {
  color: #52656d;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
}

.presentation-quick-nav .quick-nav-graph {
  grid-column: auto;
  grid-row: auto;
  height: 28px;
  margin-top: 24px;
  overflow: visible;
  border-radius: 8px;
}

.presentation-quick-nav .quick-nav-graph::before {
  left: 0;
  right: 0;
  height: 16px;
  border-radius: 6px;
}

.presentation-quick-nav .quick-nav-graph i {
  width: 18px;
  height: 18px;
}

.quick-nav-graph i em {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  min-width: max-content;
  color: #162d3a;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  transform: translateX(-50%);
  white-space: nowrap;
}

.quick-nav-axis {
  display: grid;
  min-width: 0;
  color: #5a6a70;
  font-size: 0.56rem;
  font-weight: 850;
  line-height: 1;
}

.quick-nav-axis-six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.quick-nav-axis-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-nav-card-character .quick-nav-axis-four small:first-child {
  letter-spacing: 0;
}

.quick-nav-axis small {
  min-width: 0;
  text-align: center;
}

.quick-nav-axis small:first-child {
  text-align: left;
}

.quick-nav-axis small:last-child {
  text-align: right;
}

.quick-nav-segments,
.quick-nav-character-labels {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quick-nav-segments-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quick-nav-segments-ph {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-nav-segments small,
.quick-nav-character-labels span {
  display: grid;
  min-width: 0;
  min-height: 35px;
  place-items: center;
  padding: 4px 2px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: #42575f;
  background: #edf3f3;
  font-size: 0.52rem;
  font-weight: 850;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
}

.quick-nav-segments .is-current,
.quick-nav-character-labels .is-current {
  border-color: #0a655e;
  color: #fff;
  background: #0a655e;
  box-shadow: 0 5px 10px rgba(10, 101, 94, 0.16);
}

.quick-nav-segments-tds small:nth-child(1) { background: #fff; }
.quick-nav-segments-tds small:nth-child(2) { background: #dff3ff; }
.quick-nav-segments-tds small:nth-child(3) { color: #fff; background: #4d96ca; }
.quick-nav-segments-tds small:nth-child(4) { color: #fff; background: #21649c; }
.quick-nav-segments-tds small:nth-child(5) { color: #fff; background: #0a356a; }

.quick-nav-card-hardness .quick-nav-segments {
  gap: 0;
}

.quick-nav-card-hardness .quick-nav-segments small {
  min-height: 33px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.quick-nav-card-hardness .quick-nav-segments small:nth-child(1) { color: #278aa7; }
.quick-nav-card-hardness .quick-nav-segments small:nth-child(2) { color: #348c69; }
.quick-nav-card-hardness .quick-nav-segments small:nth-child(3) { color: #9a7216; }
.quick-nav-card-hardness .quick-nav-segments small:nth-child(4) { color: #c06425; }
.quick-nav-card-hardness .quick-nav-segments small:nth-child(5) { color: #bb4b42; }

.quick-nav-card-hardness .quick-nav-segments .is-current {
  color: #073f5d;
  background: transparent;
  box-shadow: inset 0 -3px 0 #0c776d;
}

.quick-nav-segments-tds .is-current {
  border-color: #0a655e;
  color: #fff;
  background: #0a655e;
}

.quick-nav-segments-ph small {
  min-height: 29px;
}

.quick-nav-segments-ph .quick-ph-range-1 { color: #fff; background: #d93645; }
.quick-nav-segments-ph .quick-ph-range-2 { background: #f28c32; }
.quick-nav-segments-ph .quick-ph-range-3 { background: #b9dd8e; }
.quick-nav-segments-ph .quick-ph-range-4 { background: #73c987; }
.quick-nav-segments-ph .quick-ph-range-5 { color: #fff; background: #388f5c; }
.quick-nav-segments-ph .quick-ph-range-6 { color: #fff; background: #0f6846; }
.quick-nav-segments-ph .quick-ph-range-7 { background: #e6812c; }
.quick-nav-segments-ph .quick-ph-range-8 { color: #fff; background: #a53b18; }

.quick-nav-segments-ph .is-current {
  border-color: #fff;
  box-shadow: 0 0 0 2px #0a3152;
}

.quick-nav-character-labels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quick-nav-result {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding: 8px;
  border-radius: 6px;
  color: #1e3c48;
  background: #f0f7f6;
  text-align: center;
}

.quick-nav-result strong {
  color: #0a5f58;
  font-size: 0.72rem;
  line-height: 1.2;
}

.quick-nav-result small {
  color: #52656d;
  font-size: 0.6rem;
  font-weight: 750;
  line-height: 1.2;
}

.quick-nav-graph-tds::before {
  background: linear-gradient(90deg, #fff 0 19%, #dff3ff 23%, #91caec 44%, #3e86bd 67%, #0a356a 100%);
}

.quick-nav-graph-hardness::before {
  background: linear-gradient(90deg, #9edcf3 0%, #75c995 20%, #bdd66b 40%, #f0ca55 55%, #ef9c45 72%, #dc5547 100%);
}

/* A continuous scale makes the progression from very soft to very hard easier to read. */
.hardness-track {
  background: linear-gradient(90deg, #9edcf3 0%, #75c995 20%, #bdd66b 40%, #f0ca55 55%, #ef9c45 72%, #dc5547 100%);
}

.comparison-unified-map-mode-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.comparison-unified-map-modes .comparison-unified-map-mode-copy small {
  color: #587078;
  font-size: 0.58rem;
  font-weight: 750;
  line-height: 1.1;
}

.comparison-unified-map-modes button[aria-selected="true"] .comparison-unified-map-mode-copy small {
  color: rgba(255, 255, 255, 0.9);
}

.quick-nav-graph-ph::before {
  background: linear-gradient(90deg, #d93645 0 18%, #f28c32 22% 28%, #a8d672 32% 45%, #56b86d 48% 50%, #288b55 53% 59%, #0f6846 62% 68%, #e6812c 72% 78%, #a53b18 84% 100%);
}

.ph-range-table {
  display: grid;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid #d8e5e3;
  border-radius: 8px;
  background: #fff;
}

.ph-range-table-head,
.ph-range-table-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.24fr) minmax(0, 1fr);
}

.ph-range-table-head {
  color: #29424c;
  background: #edf5f3;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.ph-range-table-head span,
.ph-range-table-row > span {
  min-width: 0;
  padding: 9px 11px;
}

.ph-range-table-head span + span,
.ph-range-table-row > span + span {
  border-left: 1px solid #d8e5e3;
}

.ph-range-table-row {
  color: #3e525b;
  font-size: 0.84rem;
  line-height: 1.3;
}

.ph-range-table-row + .ph-range-table-row {
  border-top: 1px solid #e0e9e7;
}

.ph-range-table-row > span:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #174652;
}

.ph-range-table-row i {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--ph-row-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ph-row-color) 18%, transparent);
}

.ph-range-table-row-1 { --ph-row-color: #d93645; }
.ph-range-table-row-2 { --ph-row-color: #f28c32; }
.ph-range-table-row-3 { --ph-row-color: #a8d672; }
.ph-range-table-row-4 { --ph-row-color: #56b86d; }
.ph-range-table-row-5 { --ph-row-color: #288b55; }
.ph-range-table-row-6 { --ph-row-color: #0f6846; }
.ph-range-table-row-7 { --ph-row-color: #e6812c; }
.ph-range-table-row-8 { --ph-row-color: #a53b18; }

.ph-range-table-current {
  position: relative;
  color: #0a3152;
  background: #eef7ff;
  box-shadow: inset 4px 0 0 var(--ph-row-color);
}

.ph-range-table-current strong {
  color: #0a3152;
}

.public-video-panel {
  width: min(100%, 680px);
  margin: 0 auto 24px;
}

.public-video-card-poster {
  grid-template-columns: minmax(210px, 0.52fr) minmax(220px, 0.48fr);
}

.public-video-card-poster .public-video-copy {
  padding: 20px;
}

.public-video-card-poster .public-video-copy strong {
  font-size: 1.45rem;
}

.public-video-card-poster .public-video-player {
  padding: 12px;
}

.public-video-card-poster .public-video-player video {
  width: min(100%, 215px);
  max-height: 390px;
}

.source-address-lookup {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.source-address-form {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #cfe3df;
  border-radius: 8px;
  background: #f5fbfa;
}

.source-address-form label {
  color: #0a3152;
  font-size: 1rem;
  font-weight: 900;
}

.source-address-form > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.source-address-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #bcd4d0;
  border-radius: 7px;
  color: #102b38;
  background: #fff;
  font: inherit;
}

.source-address-form input:focus {
  border-color: #16867b;
  outline: 3px solid rgba(22, 134, 123, 0.14);
}

.source-address-form button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 7px;
  color: #fff;
  background: #0d7e73;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.source-address-form small {
  color: #5b6e73;
  line-height: 1.35;
}

.source-address-result {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border: 1px solid #cfe3df;
  border-radius: 8px;
  color: #24414b;
  background: #fff;
}

.source-address-result span,
.source-address-result small {
  color: #5a6c73;
}

.source-address-result strong {
  color: #075f58;
  font-size: 1rem;
}

.source-address-source-list {
  display: grid;
  gap: 7px;
  margin: 4px 0 3px;
  padding: 0;
  list-style: none;
}

.source-address-source-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.source-address-source-list span {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0d7e73;
  font-size: 0.75rem;
  font-weight: 900;
}

.source-address-source-list strong {
  min-width: 0;
  color: #075f58;
  font-size: 1rem;
  line-height: 1.25;
}

.source-address-source-list li > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.source-address-source-list small {
  color: #6a7d80;
  font-size: 0.71rem;
  line-height: 1.25;
}

.source-address-source-link {
  color: #075f58;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
}

.source-address-source-link:hover,
.source-address-source-link:focus-visible {
  color: #0b8074;
  text-decoration: underline;
}

.source-address-result.is-success {
  border-color: #a9d8c0;
  background: #eff9f3;
}

.source-address-result.is-warning,
.source-address-result.is-error {
  border-color: #e7c57a;
  background: #fff8e8;
}

.source-coverage-interactive-map {
  width: 100%;
  min-height: 520px;
  overflow: hidden;
  border: 1px solid #cfe3df;
  border-radius: 8px;
  background: #e7f0ee;
}

.source-coverage-interactive-map[hidden],
.source-coverage-map-fallback[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .presentation-quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .presentation-quick-nav .quick-nav-card {
    min-height: 268px;
  }

  .public-video-card-poster {
    grid-template-columns: 1fr;
  }

  .public-video-card-poster .public-video-copy {
    padding-bottom: 10px;
  }

  .source-coverage-interactive-map {
    min-height: 440px;
  }
}

@media (max-width: 640px) {
  .presentation-hero-copy {
    min-height: auto;
  }

  .presentation-hero-copy h1 {
    font-size: clamp(2.35rem, 13vw, 3.45rem);
  }

  .presentation-hero-partner-logo {
    min-height: 48px;
    padding: 5px 8px;
  }

  .presentation-hero-partner-logo img {
    width: 120px;
    height: 34px;
  }

  .presentation-quick-nav {
    grid-template-columns: 1fr;
  }

  .presentation-quick-nav .quick-nav-card {
    min-height: 248px;
    padding: 11px;
  }

  .presentation-quick-nav .quick-nav-graph {
    margin-top: 22px;
  }

  .quick-nav-segments small,
  .quick-nav-character-labels span {
    min-height: 31px;
    font-size: 0.53rem;
  }

  .quick-nav-result {
    padding: 7px;
  }

  .quick-nav-result strong {
    font-size: 0.7rem;
  }

  .quick-nav-result small {
    font-size: 0.58rem;
  }

  .ph-range-table-head,
  .ph-range-table-row {
    grid-template-columns: 94px minmax(0, 1fr);
  }

  .ph-range-table-head span,
  .ph-range-table-row > span {
    padding: 8px;
  }

  .source-address-form > div {
    grid-template-columns: 1fr;
  }

  .source-address-form button {
    width: 100%;
  }

  .source-coverage-interactive-map {
    min-height: 390px;
  }

  .public-video-card-poster .public-video-player video {
    width: min(100%, 190px);
    max-height: 340px;
  }
}
.comparison-results-note {
  margin-top: 10px;
}

.comparison-results-note[open] {
  max-width: 920px;
}

.comparison-results-note p {
  max-width: 96ch;
}

@media (min-width: 760px) {
  .presentation-card-story p,
  .presentation-details p,
  .tds-methods-note li,
  .tds-explanation-panel li,
  .tds-classification-panel li,
  .safety-treatment-panel p,
  .pairing-explanation > p,
  .pairing-contact-copy p,
  .water-rights-copy > p {
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
  }
}

.water-character-axis {
  display: block;
  min-height: 23px;
}

.water-character-axis-short {
  display: none;
}

.water-character-current-value {
  top: -20px;
}

.water-character-axis-start,
.water-character-axis-end,
.water-character-axis-boundary {
  position: absolute;
  top: 0;
  color: #0b3154;
  font-size: 0.72rem;
  line-height: 1.15;
}

.water-character-axis-start {
  left: 0;
  text-align: left;
}

.water-character-axis-end {
  right: 0;
  color: #742177;
  text-align: right;
}

.water-character-axis-boundary {
  transform: translateX(-50%);
  white-space: nowrap;
}

.water-character-axis-boundary-mild {
  left: 33.333%;
}

.water-character-axis-boundary-intense {
  left: 66.667%;
}

.water-character-sectors {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.comparison-unified-map-explorer {
  order: 5;
  display: block;
}

.comparison-unified-map-explorer:has(.comparison-unified-tds-results:not([hidden])) {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(300px, 0.85fr);
  align-items: stretch;
  gap: 0;
  border-top: 1px solid #d3e1df;
  background: #fff;
}

.comparison-unified-map-explorer:has(.comparison-unified-tds-results:not([hidden])) .comparison-unified-map-frame {
  min-width: 0;
}

.comparison-unified-map-explorer:has(.comparison-unified-tds-results:not([hidden])) .comparison-unified-map-title {
  border-top: 0;
}

.comparison-unified-map-explorer:has(.comparison-unified-tds-results:not([hidden])) .comparison-unified-tds-results {
  min-width: 0;
  margin: 0;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: none;
}

.comparison-unified-map-explorer:has(.comparison-unified-tds-results:not([hidden])) .comparison-unified-tds-results ol {
  max-height: min(510px, 58vw);
}

@media (max-width: 820px) {
  .water-character-axis-start,
  .water-character-axis-end,
  .water-character-axis-boundary {
    font-size: 0.58rem;
  }

  .water-character-axis {
    min-height: 28px;
  }

  .water-character-axis-full {
    display: none;
  }

  .water-character-axis-short {
    display: inline;
  }

  .water-character-current-value {
    top: -22px;
    font-size: 0.58rem;
  }

  .comparison-unified-map-explorer:has(.comparison-unified-tds-results:not([hidden])) {
    grid-template-columns: 1fr;
  }

  .comparison-unified-map-explorer:has(.comparison-unified-tds-results:not([hidden])) .comparison-unified-map-frame {
    grid-row: 1;
  }

  .comparison-unified-map-explorer:has(.comparison-unified-tds-results:not([hidden])) .comparison-unified-tds-results {
    grid-row: 2;
    border-top: 3px solid var(--tds-category-color, #087667);
    border-left: 0;
  }
}

.presentation-slovenia-flag {
  width: 24px;
  height: 16px;
  object-fit: cover;
  border: 1px solid rgba(10, 49, 64, 0.18);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(8, 35, 48, 0.16);
}