:root {
  --blue: #156cd2;
  --deep: #0c48c1;
  --navy: #0d1d2d;
  --cyan: #60ceff;
  --muted: #4b5563;
  --green: #10b981;
  --yellow: #ffcd4b;
  --orange: #f59e0b;
  --red: #ef4444;
  --container: 1640px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  color: var(--navy);
  background: #f8fcfc;
  font-family: "DB Helvethaica X", "Leelawadee UI", Tahoma, sans-serif;
  font-size: 18px;
  line-height: 1.45
}

a {
  color: inherit;
  text-decoration: none
}

img {
  display: block;
  max-width: 100%
}

button,
input {
  font: inherit
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto
}

.site-header {
  position: relative;
  z-index: 30;
  height: 144px
}

.header-top {
  height: 100px;
  color: #fff;
  background: #0879cf url("../img/eec2026/figma/header-ccf73.png") center 45%/cover
}

.header-top__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px
}

.brand img {
  width: 64px;
  height: 78px;
  object-fit: contain
}

.brand span {
  display: grid
}

.brand b {
  font-size: 24px
}

.brand small {
  font-size: 18px
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 8px
}

.social-dot,
.lang {
  display: grid;
  place-items: center;
  height: 30px;
  min-width: 30px;
  border: 0;
  border-radius: 20px;
  color: #fff;
  background: #0866b3
}

.lang {
  padding: 0 11px;
  font-size: 14px
}

.lang.is-active {
  background: #fff;
  color: var(--blue)
}

.nav-bar {
  height: 44px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 8px rgba(8, 73, 150, .12)
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2px
}

.main-nav a {
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 16px;
  white-space: nowrap
}

.main-nav a.is-active,
.main-nav a:hover {
  color: #fff;
  background: linear-gradient(90deg, #0b50eb, #0292d2)
}

.member-link {
  color: var(--blue);
  font-size: 16px
}

.nav-toggle {
  display: none
}

.map-section {
  position: relative;
  height: 840px;
  overflow: hidden;
  background: #88cfe1
}

.map-picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.map-brand {
  position: absolute;
  top: 20px;
  left: 4%;
  display: flex;
  align-items: center;
  color: #1681c8;
  font-weight: 700
}

.map-brand img {
  width: 45px;
  height: 58px;
  object-fit: contain
}

.station-panel {
  position: absolute;
  top: 76px;
  left: max(24px, 7.3vw);
  width: 520px;
  max-height: 558px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(239, 253, 255, .92);
  box-shadow: 0 8px 28px rgba(21, 108, 210, .18)
}

.station-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 12px
}

.station-tabs button {
  padding: 7px 14px;
  border: 0;
  border-radius: 18px;
  color: #6e86a2;
  background: #fff;
  font-size: 14px
}

.station-tabs .active {
  color: #fff;
  background: var(--blue)
}

.search-box,
.filter-button {
  display: flex;
  width: 100%;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  margin-bottom: 10px;
  border: 1px solid #d8eef6;
  border-radius: 20px;
  color: #79a3b2;
  background: #fff
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent
}

.filter-button {
  justify-content: space-between
}

.station-list {
  display: grid;
  gap: 7px
}

.station-empty {
  padding: 28px 16px;
  margin: 0;
  border-radius: 10px;
  color: #607387;
  background: rgba(255, 255, 255, .72);
  text-align: center
}

.station-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(196, 242, 247, .85)
}

.station-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green)
}

.station-row span {
  display: grid
}

.station-row b {
  font-size: 15px
}

.station-row small {
  font-size: 12px;
  color: #718797
}

.station-row strong {
  color: var(--blue);
  font-size: 20px
}

.layer-select {
  position: absolute;
  top: 76px;
  right: 7.3vw;
  min-width: 220px;
  padding: 14px 18px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #607387
}

.layer-select span {
  float: right
}

.map-pin {
  position: absolute;
  width: 34px;
  height: 38px;
  padding-top: 6px;
  text-align: center;
  border: 3px solid #fff;
  border-radius: 10px 10px 18px 18px;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .18)
}

.pin-a {
  top: 290px;
  left: 72%;
  background: var(--red)
}

.pin-b {
  top: 430px;
  left: 63%;
  background: var(--yellow)
}

.pin-c {
  top: 560px;
  left: 55%;
  background: var(--green)
}

.pin-d {
  top: 630px;
  left: 74%;
  background: var(--orange)
}

.map-legend {
  position: absolute;
  right: 7%;
  bottom: 24px;
  left: 7%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 11px 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  font-size: 14px
}

.map-legend span {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap
}

.map-legend i,
.chart-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px
}

.green {
  background: #10b981
}

.gray {
  background: #9ca3af
}

.yellow {
  background: #ffcd4b
}

.orange {
  background: #f59e0b
}

.red {
  background: #ef4444
}

.darkred {
  background: #be123c
}

.banner-section {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-block: 80px 105px
}

.banner-section article {
  position: relative;
  height: 260px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(21, 108, 210, .12)
}

.banner-section img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.banner-section article:after {
  content: "";
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, rgba(0, 58, 140, .82))
}

.banner-section h2 {
  position: absolute;
  z-index: 2;
  bottom: 25px;
  left: 40px;
  margin: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1.05
}

.banner-section h2 small {
  display: block;
  font-size: 22px
}

.slider-dots {
  position: absolute;
  bottom: 55px;
  left: 50%;
  display: flex;
  gap: 12px;
  transform: translateX(-50%)
}

.slider-dots i,
.slider-dots b {
  width: 12px;
  height: 12px;
  border: 1px solid var(--blue);
  border-radius: 12px
}

.slider-dots b {
  width: 48px;
  background: var(--blue)
}

.forecast-section {
  position: relative;
  min-height: 1109px;
  padding: 58px 0 80px;
  background: #f8fcfc url("../img/eec2026/figma/forecastBg-71c42.png") center/cover
}

.section-title {
  display: flex;
  align-items: flex-start;
  gap: 16px
}

.section-title>i {
  width: 10px;
  min-height: 64px;
  border-radius: 5px;
  background: linear-gradient(#c5edff, #60ceff)
}

.section-title h2 {
  margin: 0;
  color: var(--deep);
  font-size: 56px;
  line-height: 1.1
}

.section-title p {
  margin: 8px 0 0;
  color: var(--muted)
}

.forecast-tools {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: -50px
}

.forecast-tools button {
  min-width: 120px;
  padding: 12px;
  border: 1px solid #e3edf5;
  border-radius: 10px;
  background: #fff
}

.forecast-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  margin-top: 45px
}

.forecast-visual {
  position: relative;
  min-height: 780px
}

.forecast-visual>img {
  position: absolute;
  inset: -20px 0 auto -8%;
  width: 112%;
  height: 650px;
  object-fit: contain
}

.forecast-note {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 78%;
  padding: 28px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 8px 32px rgba(21, 108, 210, .12);
  font-size: 16px
}

.forecast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px
}

.forecast-card {
  height: 425px;
  padding: 22px 28px;
  border-radius: 16px;
  background: linear-gradient(#e7eefe 0, #fff 38%);
  box-shadow: 0 8px 30px rgba(21, 108, 210, .1)
}

.forecast-card h3 {
  margin: 0;
  color: var(--deep);
  font-size: 27px
}

.forecast-card p {
  margin: 5px 0 10px
}

.forecast-card p small {
  display: block;
  color: #657382
}

.warning {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid #ffcb73;
  border-radius: 18px;
  background: #ffe5b8;
  font-size: 14px
}

.warning i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange)
}

.gauge {
  position: relative;
  height: 230px;
  margin-top: 2px;
  text-align: center
}

.gauge img {
  width: 220px;
  height: 160px;
  margin: auto;
  object-fit: contain
}

.gauge strong {
  display: block;
  margin-top: -48px;
  font-size: 48px
}

.gauge small {
  display: block;
  color: #64748b
}

.summary-section {
  padding: 70px 0 95px;
  background: linear-gradient(180deg, rgba(234, 250, 255, .9), rgba(255, 255, 255, .72)), url("../img/eec2026/figma/knowledge-793b4.png") center/cover
}

.chart-card {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 50px;
  align-items: center;
  margin-top: 38px;
  padding: 38px 65px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(21, 108, 210, .12)
}

.chart-area {
  position: relative;
  height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 120px;
  padding: 10px 50px 35px 80px;
  background: repeating-linear-gradient(to bottom, #edf1f5 0 1px, transparent 1px 67px)
}

.bar-labels {
  position: absolute;
  left: 20px;
  inset-block: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #8896a6
}

.bar-group {
  text-align: center
}

.bar {
  display: flex;
  flex-direction: column-reverse;
  width: 56px;
  height: 230px;
  overflow: hidden
}

.bar i {
  height: 52%;
  background: var(--green)
}

.bar b {
  height: 30%;
  background: var(--blue)
}

.bar em {
  height: 12%;
  background: var(--orange)
}

.bar-two i {
  height: 62%
}

.bar-two b {
  height: 20%
}

.bar-group>span {
  display: block;
  margin-top: 10px
}

.chart-legend {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none
}

.chart-legend li {
  display: flex;
  align-items: center;
  gap: 10px
}

.reports-section {
  padding: 70px 0 110px;
  background: #eaf8fe url("../img/eec2026/figma/knowledge-793b4.png") center/cover
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px
}

.view-all {
  display: inline-flex;
  padding: 14px 30px;
  border-radius: 32px;
  color: var(--blue);
  background: #fff
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px
}

.report-card {
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .07)
}

.report-photo {
  position: relative;
  height: 290px
}

.report-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.report-photo:after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, #156cd2)
}

.report-photo span,
.report-photo b {
  position: absolute;
  z-index: 2;
  top: 22px;
  padding: 6px 13px;
  border-radius: 18px;
  background: #fff
}

.report-photo span {
  left: 22px
}

.report-photo b {
  right: 22px;
  color: var(--green)
}

.report-body {
  padding: 24px 30px
}

.report-body h3 {
  margin: 0;
  font-size: 26px
}

.report-body p {
  color: var(--muted)
}

.report-tags {
  display: flex;
  gap: 12px
}

.report-tags span {
  padding: 7px 12px;
  border-radius: 8px;
  background: #eef5ff;
  color: var(--blue)
}

.report-body footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid #e8eef2
}

.report-body footer a {
  padding: 10px 18px;
  border-radius: 24px;
  color: #fff;
  background: var(--blue)
}

.knowledge-wrap {
  padding: 80px 0;
  background: #effaff url("../img/eec2026/figma/knowledge-793b4.png") center/cover
}

.knowledge-section {
  padding: 48px 60px 62px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 10px 30px rgba(21, 108, 210, .1)
}

.knowledge-feature {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 420px;
  min-height: 204px;
  padding: 35px 45px;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 30px;
  color: #fff;
  background: linear-gradient(90deg, #0b50eb, #156cd2);
  box-shadow: 0 8px 24px rgba(0, 56, 181, .3)
}

.knowledge-feature:before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/eec2026/figma/knowledge-793b4.png") center 60%/cover;
  opacity: .18
}

.knowledge-feature>div,
.knowledge-feature img {
  position: relative;
  z-index: 1
}

.knowledge-feature h3,
.knowledge-row h3 {
  margin: 0;
  font-size: 28px
}

.knowledge-feature p {
  max-width: 520px
}

.knowledge-feature a {
  float: right;
  color: #fff
}

.knowledge-feature img {
  position: absolute;
  right: 24px;
  top: 28px;
  width: 380px;
  height: 150px;
  object-fit: cover;
  border: 3px solid #fff;
  border-radius: 20px
}

.knowledge-row {
  display: grid;
  grid-template-columns: 180px 1fr 100px;
  align-items: center;
  gap: 35px;
  padding: 32px 45px;
  border-bottom: 1px solid #dcecf5
}

.knowledge-row>b {
  color: var(--blue)
}

.knowledge-row p {
  margin: 5px 0;
  color: var(--muted)
}

.knowledge-row a {
  color: var(--blue)
}

.alerts-section {
  padding: 190px 0 95px;
  color: #fff;
  background: #0750a2 url("../img/eec2026/figma/alerts-a8382.png") center top/cover
}

.section-heading.light .section-title h2,
.section-heading.light .section-title p {
  color: #fff
}

.alert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px
}

.alert-card {
  padding: 30px;
  border-radius: 20px;
  color: var(--navy);
  background: #fff
}

.alert-status {
  display: flex;
  justify-content: space-between
}

.alert-status span,
.alert-status b {
  padding: 5px 14px;
  border-radius: 18px;
  background: #fff4d7;
  color: #b56e00
}

.alert-status b {
  color: var(--blue);
  background: #eef5ff
}

.alert-card h3 {
  font-size: 28px;
  margin-bottom: 8px
}

.alert-card p {
  max-width: 80%;
  color: var(--muted)
}

.alert-card small {
  color: #728095
}

.alert-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px -30px -30px;
  padding: 20px 30px;
  border-radius: 0 0 20px 20px;
  background: #f7fbff
}

.alert-card footer a {
  padding: 10px 25px;
  border-radius: 26px;
  color: #fff;
  background: var(--blue)
}

.light-dots {
  position: static;
  justify-content: flex-start;
  margin: 28px 0 45px;
  transform: none
}

.light-dots i {
  border: 0;
  background: rgba(255, 255, 255, .3)
}

.light-dots b {
  background: #fff
}

.action-grid {
  display: grid;
  grid-template-columns: 3.2fr 1fr;
  gap: 40px
}

.conservation {
  position: relative;
  height: 313px;
  overflow: hidden;
  border-radius: 20px
}

.conservation img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.conservation h3 {
  position: absolute;
  top: 110px;
  left: 25%;
  margin: 0;
  font-size: 40px;
  line-height: 1.1
}

.conservation a {
  position: absolute;
  right: 5%;
  top: 120px;
  padding: 15px 26px;
  border-radius: 28px;
  color: var(--blue);
  background: #fff
}

.poll {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 20px;
  background: rgba(0, 119, 191, .72)
}

.poll h3 {
  margin: 0;
  font-size: 24px
}

.poll p {
  font-size: 14px
}

.poll label {
  display: block;
  font-size: 14px
}

.poll button {
  float: right;
  padding: 8px 24px;
  border: 0;
  border-radius: 18px;
  color: var(--blue);
  background: #fff
}

.site-footer {
  position: relative;
  padding-top: 75px;
  color: #fff;
  background: #0b4e96 url("../img/eec2026/figma/footer-ccf73.png") center/cover
}

.footer-wave {
  position: absolute;
  inset: 0 0 auto;
  height: 80px;
  background: url("../img/eec2026/figma/footer-2823f.svg") left top/auto 100%
}

.footer-main {
  position: relative;
  padding: 35px 0 45px
}

.footer-brand {
  display: flex;
  gap: 18px;
  align-items: center
}

.footer-brand img {
  width: 100px;
  height: 130px;
  object-fit: contain
}

.footer-brand h2 {
  margin: 0;
  font-size: 28px
}

.footer-brand p {
  margin: 5px 0
}

.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 30px;
  margin-top: 30px
}

.contact-grid article {
  display: flex;
  gap: 14px
}

.contact-grid i {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  color: var(--blue);
  font-style: normal
}

.contact-grid p {
  margin: 0
}

.footer-social {
  display: flex;
  justify-content: flex-end;
  gap: 10px
}

.footer-social span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0866b3
}

.footer-bottom {
  padding: 22px 0;
  background: rgba(7, 55, 111, .75)
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between
}

.footer-bottom nav {
  display: flex;
  gap: 20px;
  font-size: 14px
}

.nav-toggle {
  border: 0;
  background: transparent
}

.nav-toggle i {
  font-style: normal
}

@media(max-width:1100px) {
  .main-nav {
    position: absolute;
    display: none;
    top: 44px;
    right: 24px;
    left: 24px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12)
  }

  .main-nav.is-open {
    display: grid
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    gap: 4px
  }

  .nav-toggle span {
    width: 20px;
    height: 2px;
    background: var(--blue)
  }

  .member-link {
    margin-left: auto
  }

  .station-panel {
    left: 24px;
    width: 420px
  }

  .map-legend {
    overflow: auto;
    justify-content: flex-start
  }

  .forecast-layout,
  .chart-card {
    grid-template-columns: 1fr
  }

  .forecast-visual {
    min-height: 600px
  }

  .report-grid {
    grid-template-columns: 1fr 1fr
  }

  .action-grid {
    grid-template-columns: 1fr
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:700px) {
  body {
    font-size: 16px
  }

  .container {
    width: min(calc(100% - 30px), var(--container))
  }

  .site-header {
    height: 124px
  }

  .header-top {
    height: 80px
  }

  .brand img {
    width: 48px;
    height: 60px
  }

  .brand b {
    font-size: 17px
  }

  .brand small,
  .header-tools .social-dot {
    display: none
  }

  .map-section {
    height: 650px
  }

  .station-panel {
    top: 24px;
    right: 15px;
    left: 15px;
    width: auto
  }

  .map-picture {
    opacity: .55
  }

  .layer-select {
    display: none
  }

  .banner-section,
  .forecast-grid,
  .report-grid,
  .alert-grid {
    grid-template-columns: 1fr
  }

  .banner-section article:not(:first-of-type) {
    display: none
  }

  .section-title h2 {
    font-size: 36px
  }

  .forecast-tools {
    margin: 24px 0 0;
    justify-content: flex-start
  }

  .forecast-layout {
    margin-top: 20px
  }

  .forecast-visual {
    min-height: 440px
  }

  .forecast-visual>img {
    height: 380px
  }

  .forecast-note {
    width: 100%
  }

  .forecast-grid {
    gap: 20px
  }

  .chart-card {
    padding: 25px
  }

  .chart-area {
    gap: 50px;
    padding-left: 55px
  }

  .section-heading {
    align-items: flex-start;
    gap: 20px
  }

  .view-all {
    padding: 10px 16px;
    white-space: nowrap
  }

  .knowledge-section {
    padding: 30px 18px
  }

  .knowledge-feature {
    display: block;
    padding: 24px;
    min-height: 340px
  }

  .knowledge-feature img {
    right: 20px;
    bottom: 20px;
    top: auto;
    width: calc(100% - 40px);
    height: 145px
  }

  .knowledge-row {
    grid-template-columns: 1fr;
    padding: 24px 8px;
    gap: 8px
  }

  .alerts-section {
    padding-top: 100px
  }

  .action-grid {
    display: block
  }

  .poll {
    margin-top: 20px
  }

  .conservation h3 {
    left: 24px;
    font-size: 28px
  }

  .conservation a {
    top: auto;
    right: 24px;
    bottom: 24px
  }

  .contact-grid {
    grid-template-columns: 1fr
  }

  .footer-bottom .container,
  .footer-bottom nav {
    display: grid;
    gap: 12px
  }
}

html,
body {
  overflow-x: hidden
}

.summary-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(225, 247, 255, .32)), url("../img/eec2026/figma/summaryBg-38531.png") center/cover
}

.reports-section {
  background: #f7fcff url("../img/eec2026/figma/reportBg-be73b.png") center/cover
}

@media(max-width:700px) {
  .forecast-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%
  }

  .forecast-tools button {
    min-width: 0;
    padding-inline: 6px
  }

  .map-legend {
    max-width: calc(100% - 30px)
  }
}

/* Interactive Google Map / Coral state — Figma node 2:1512 */
.google-map {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #88cfe1
}

.map-picture {
  position: relative;
  z-index: 1;
  pointer-events: none
}

.map-section.is-google-ready .map-picture,
.map-section.is-google-ready .fallback-markers,
.map-section.is-google-ready .map-brand {
  display: none
}

.station-panel,
.layer-select,
.map-legend {
  z-index: 5
}

.fallback-markers {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none
}

.figma-pin {
  position: absolute;
  width: 36px;
  height: 43px;
  filter: drop-shadow(0 3px 4px rgba(7, 58, 99, .2));
  animation: marker-pop .45s cubic-bezier(.2, .8, .2, 1) both
}

.coral-pin-1 {
  left: 58%;
  top: 44%
}

.coral-pin-2 {
  left: 66%;
  top: 28%
}

.coral-pin-3 {
  left: 72%;
  top: 46%
}

.coral-pin-4 {
  left: 54%;
  top: 63%
}

.coral-pin-5 {
  left: 64%;
  top: 69%
}

.station-tabs button {
  cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease
}

.station-tabs button:hover {
  transform: translateY(-1px)
}

.station-list.is-updating {
  animation: panel-fade .28s ease
}

.station-row.coral-row {
  grid-template-columns: 24px 1fr;
  min-height: 72px;
  background: rgba(255, 255, 255, .95)
}

.station-row.coral-row img {
  width: 20px;
  height: 20px
}

.station-row.coral-row strong {
  grid-column: 2;
  color: #64748b;
  font-size: 14px;
  font-weight: 400
}

.gm-style .gm-style-iw-c {
  border-radius: 14px;
  padding: 8px
}

.dmcr-map-popup {
  min-width: 190px;
  padding: 8px;
  font-family: "DB Helvethaica X", "Leelawadee UI", Tahoma, sans-serif
}

.dmcr-map-popup b {
  display: block;
  color: #0c48c1;
  font-size: 20px
}

.dmcr-map-popup span {
  color: #4b5563
}

@keyframes marker-pop {
  from {
    opacity: 0;
    transform: translateY(-14px) scale(.55)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes panel-fade {
  0% {
    opacity: .35;
    transform: translateY(6px)
  }

  100% {
    opacity: 1;
    transform: none
  }
}

/* Bleaching Analytics — Figma node 2:6617 */
.analytics-page {
  padding: 20px 0 0;
  ;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(239, 250, 255, .28)), url("../img/eec2026/figma/forecastPage-36f29.png") center top/cover fixed
}

.analytics-hero {
  position: relative;
  height: 300px;
  overflow: hidden;
  border-radius: 32px;
  background: #0b50eb
}

.analytics-hero>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.analytics-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 80, 235, .96) 0%, rgba(21, 108, 210, .82) 47%, rgba(21, 108, 210, .18) 100%)
}

.analytics-hero__copy {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 60px;
  color: #fff
}

.analytics-hero__copy small {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: rgba(0, 52, 177, .35);
  letter-spacing: .04em
}

.analytics-hero__copy h1 {
  margin: 18px 0 8px;
  font-size: 52px;
  line-height: 1
}

.analytics-hero__copy p {
  margin: 0;
  font-size: 20px
}

.analytics-hero>a {
  position: absolute;
  z-index: 3;
  top: 55px;
  right: 60px;
  padding: 15px 32px;
  border-radius: 28px;
  color: var(--blue);
  background: #fff
}

.analytics-hero>span {
  position: absolute;
  z-index: 3;
  right: 60px;
  bottom: 23px;
  padding: 15px 32px;
  border-radius: 28px 28px 0 0;
  background: #f8fcfc
}

.analytics-board {
  position: relative;
  margin-top: 60px;
  padding: 60px;
  border: 1px solid rgba(96, 206, 255, .55);
  border-radius: 32px;
  background: rgba(255, 255, 255, .68);
  box-shadow: 0 20px 60px rgba(21, 108, 210, .06)
}

.station-select {
  display: grid;
  width: 211px;
  gap: 10px;
  color: #4b5563
}

.station-select select,
.panel-heading select {
  height: 46px;
  padding: 0 16px;
  border: 1px solid #e6edf5;
  border-radius: 10px;
  color: #4b5563;
  background: #fff
}

.analytics-status-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
  padding: 40px;
  border-radius: 30px;
  background: linear-gradient(180deg, #156cd2, #0878d8);
  box-shadow: 0 16px 32px rgba(0, 86, 196, .22)
}

.analytics-card {
  height: 425px;
  padding: 20px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #e7eefe 0, #fff 38%);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease
}

.analytics-card.is-visible {
  opacity: 1;
  transform: none
}

.analytics-card:nth-child(2) {
  transition-delay: .08s
}

.analytics-card:nth-child(3) {
  transition-delay: .16s
}

.analytics-card:nth-child(4) {
  transition-delay: .24s
}

.analytics-card h2 {
  margin: 0;
  color: #0c48c1;
  font-size: 27px;
  line-height: 1.08
}

.analytics-card p {
  margin: 8px 0 10px
}

.analytics-card p small {
  display: block;
  color: #64748b
}

.analytics-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border: 1px solid #ffcb73;
  border-radius: 20px;
  background: #ffe5b8;
  font-size: 14px
}

.analytics-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b
}

.analytics-gauge {
  position: relative;
  height: 215px;
  margin-top: 7px;
  text-align: center
}

.analytics-gauge img {
  width: 220px;
  height: 154px;
  margin: auto;
  object-fit: contain
}

.analytics-gauge strong {
  display: block;
  margin-top: -45px;
  font-size: 48px;
  line-height: 1
}

.analytics-gauge small {
  display: block;
  margin-top: 8px;
  color: #64748b
}

.analytics-data-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
  gap: 40px;
  margin-top: 40px
}

.sst-panel,
.latest-status,
.density-panel {
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(21, 108, 210, .08)
}

.sst-panel {
  padding: 30px
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.panel-heading h2,
.latest-status h2 {
  margin: 0;
  color: #0c48c1;
  font-size: 30px
}

.panel-heading>div {
  display: flex;
  gap: 12px
}

.panel-heading select {
  width: 150px
}

.interactive-chart {
  position: relative;
  height: 505px;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #eef2f7;
  border-radius: 18px;
  background: #fff
}

.interactive-chart svg,
.density-chart svg {
  display: block;
  width: 100%;
  height: 100%
}

.chart-tooltip {
  position: absolute;
  z-index: 4;
  display: none;
  min-width: 120px;
  padding: 8px 12px;
  border-radius: 8px;
  color: #fff;
  background: rgba(13, 29, 45, .9);
  font-size: 13px;
  pointer-events: none;
  transform: translate(-50%, -120%)
}

.sst-panel details {
  margin-top: 18px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #f8fbfe
}

.sst-panel summary {
  cursor: pointer;
  color: #0d1d2d
}

.sst-panel summary span {
  float: right;
  color: #6b7280
}

.chart-description {
  padding-top: 12px;
  color: #64748b
}

.latest-status {
  padding: 30px
}

.latest-status>p {
  color: #64748b
}

.no-stress {
  display: inline-block;
  margin: 15px 0 22px;
  padding: 5px 15px;
  border-radius: 18px;
  color: #4b5563;
  background: #f2f4f7
}

.latest-status dl {
  margin: 0
}

.latest-status dl div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid #edf1f5
}

.latest-status dt {
  color: #64748b
}

.latest-status dd {
  margin: 0;
  font-weight: 700;
  text-align: right
}

.density-panel {
  margin-top: 40px;
  padding: 30px 35px
}

.density-panel .section-title h2 {
  font-size: 48px
}

.density-chart {
  position: relative;
  height: 330px;
  margin-top: 24px
}

.density-legend {
  display: flex;
  justify-content: center;
  gap: 22px;
  font-size: 14px
}

.density-legend .healthy {
  color: #10b981
}

.density-legend .warning-days {
  color: #f59e0b
}

.density-legend .alert-days {
  color: #ef4444
}

.chart-grid {
  stroke: #e7edf2;
  stroke-width: 1
}

.chart-axis-label {
  fill: #7d8a99;
  font-size: 13px
}

.chart-line {
  fill: none;
  stroke: #ec90a1;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
  animation: draw-line 1.5s ease forwards
}

.chart-area-fill {
  fill: url(#sstFill);
  opacity: .25
}

.chart-threshold {
  fill: none;
  stroke: #2f75ff;
  stroke-width: 2;
  stroke-dasharray: 6 5
}

.chart-point {
  fill: #fff;
  stroke: #ec90a1;
  stroke-width: 2;
  cursor: pointer;
  transition: r .15s ease
}

.chart-point:hover {
  r: 6
}

.density-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: grow-bar .75s cubic-bezier(.2, .75, .25, 1) both
}

.density-bar.warning {
  animation-delay: .1s
}

.density-bar.alert {
  animation-delay: .2s
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0
  }
}

@keyframes grow-bar {
  from {
    transform: scaleY(0)
  }

  to {
    transform: scaleY(1)
  }
}

@media(max-width:1200px) {
  .analytics-status-panel {
    grid-template-columns: 1fr 1fr
  }

  .analytics-data-grid {
    grid-template-columns: 1fr
  }

  .analytics-board {
    padding: 36px
  }

  .analytics-hero__copy h1 {
    font-size: 40px
  }
}

@media(max-width:700px) {
  .analytics-page {
    padding-top: 12px
  }

  .analytics-hero {
    height: 390px;
    border-radius: 18px
  }

  .analytics-hero__copy {
    top: 50px;
    left: 24px;
    right: 24px
  }

  .analytics-hero__copy h1 {
    font-size: 34px
  }

  .analytics-hero__copy p {
    font-size: 16px
  }

  .analytics-hero>a {
    top: auto;
    right: 24px;
    bottom: 55px
  }

  .analytics-hero>span {
    right: 24px;
    bottom: 0;
    padding: 10px 18px
  }

  .analytics-board {
    margin-top: 24px;
    padding: 18px;
    border-radius: 18px
  }

  .analytics-status-panel {
    grid-template-columns: 1fr;
    padding: 18px
  }

  .analytics-card {
    height: 400px
  }

  .panel-heading {
    display: grid;
    gap: 15px
  }

  .panel-heading>div {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .panel-heading select {
    width: 100%
  }

  .interactive-chart {
    height: 360px
  }

  .density-panel {
    padding: 24px 16px
  }

  .density-panel .section-title h2 {
    font-size: 34px
  }

  .density-chart {
    height: 300px
  }

  .station-row.coral-row strong {
    font-size: 12px
  }

  .figma-pin {
    width: 30px
  }

  .map-section.is-google-ready .map-legend {
    bottom: 12px
  }
}

/* Figma Header 02 — node 2:2705 */
.site-header {
  height: 144px;
  background: #fff
}

.header-top {
  height: 100px;
  background-color: #156bd2;
  background-image: linear-gradient(rgba(21, 107, 210, .87), rgba(21, 107, 210, .87)), url("../img/eec2026/figma/header-ccf73.png");
  background-position: center 47%;
  background-size: cover
}

.header-top__inner {
  padding-bottom: 10px
}

.brand {
  height: 64px;
  align-items: flex-start;
  gap: 10px
}

.brand img {
  width: 91px;
  height: 119px;
  margin-top: 0;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px rgba(13, 29, 45, .04))
}

.brand span {
  font-family: "DB Helvethaica X", "Leelawadee UI", Tahoma, sans-serif;
  font-weight: 700;
  line-height: 1.02;
  white-space: nowrap
}

.brand b {
  font-size: 36px
}

.brand small {
  font-size: 28px
}

.header-tools {
  gap: 10px
}

.header-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent
}

.header-icon img {
  width: 40px;
  height: 40px
}

.language-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 40px;
  color: #fff;
  background: #0f55a9;
  font-size: 18px
}

.language-switch img {
  width: 20px;
  height: 20px
}

.language-switch b {
  font-weight: 400
}

.language-switch span {
  opacity: .4
}

.language-switch i {
  width: 1px;
  height: 10px;
  background: rgba(255, 255, 255, .6)
}

.nav-bar {
  height: 44px;
  border-top: 1px solid rgba(240, 244, 249, .5);
  background: rgba(255, 255, 255, .92);
  box-shadow: none;
  backdrop-filter: blur(8px)
}

.nav-inner {
  padding-left: 10px
}

.main-nav {
  height: 44px
}

.main-nav a {
  height: 32px;
  padding: 3px 16px;
  border-radius: 30px;
  font-size: 20px;
  line-height: 26px
}

.member-link {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #156bd2;
  font-size: 20px
}

.member-link img {
  width: 16px;
  height: 20px
}

/* Header 02 (2:4889): the crest overlaps the translucent menu. */
.site-header {
  background: transparent
}

.header-top {
  position: relative;
  z-index: 2
}

.nav-bar {
  position: static;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(8px)
}

.nav-inner {
  padding-left: 103px
}

.main-nav {
  gap: 0
}

.nav-dropdown {
  position: relative;
  display: flex;
  height: 44px;
  align-items: center
}

.nav-dropdown__menu {
  position: absolute;
  z-index: 40;
  top: 100%;
  left: 50%;
  display: grid;
  width: 121px;
  padding: 10px 26px;
  visibility: hidden;
  opacity: 0;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(13, 29, 45, .2);
  transform: translate(-50%, -6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events: none
}

.main-nav .nav-dropdown__menu a {
  display: grid;
  width: 68px;
  height: 32px;
  padding: 0;
  place-items: center;
  border-radius: 6px;
  color: #0068e8;
  background: transparent;
  font-size: 20px;
  line-height: 24px;
  text-align: center
}

.main-nav .nav-dropdown__menu a:hover,
.main-nav .nav-dropdown__menu a:focus-visible {
  color: #0059cf;
  background: #eef6ff;
  outline: 0
}

.nav-dropdown--knowledge .nav-dropdown__menu {
  width: 150px;
  padding-inline: 12px
}

.main-nav .nav-dropdown--knowledge .nav-dropdown__menu a {
  width: 126px;
  color: var(--navy)
}

.main-nav .nav-dropdown--knowledge .nav-dropdown__menu a:hover,
.main-nav .nav-dropdown--knowledge .nav-dropdown__menu a:focus-visible {
  color: #0059cf
}

.nav-dropdown--bleaching-report .nav-dropdown__menu {
  width: 140px;
  padding-inline: 12px
}

.main-nav .nav-dropdown--bleaching-report .nav-dropdown__menu a {
  width: 116px;
  color: var(--navy)
}

.main-nav .nav-dropdown--bleaching-report .nav-dropdown__menu a:hover,
.main-nav .nav-dropdown--bleaching-report .nav-dropdown__menu a:focus-visible {
  color: #0059cf
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto
}

.language-switch {
  backdrop-filter: blur(2px)
}

.language-switch .language-divider {
  width: 10px;
  height: 1px;
  margin-inline: -4.5px;
  transform: rotate(90deg)
}

@media(max-width:1200px) {
  .nav-inner {
    padding-left: 10px
  }
}

@media(max-width:1100px) {
  .nav-dropdown {
    display: block;
    height: auto
  }

  .nav-dropdown__trigger {
    display: block
  }

  .nav-dropdown__menu,
  .nav-dropdown--knowledge .nav-dropdown__menu,
  .nav-dropdown--bleaching-report .nav-dropdown__menu {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: auto;
    padding: 8px 12px;
    margin: 4px 0 8px;
    visibility: visible;
    opacity: 1;
    border: 1px solid #e4edf6;
    border-radius: 10px;
    box-shadow: none;
    transform: none;
    pointer-events: auto
  }

  .main-nav .nav-dropdown__menu a,
  .main-nav .nav-dropdown--knowledge .nav-dropdown__menu a,
  .main-nav .nav-dropdown--bleaching-report .nav-dropdown__menu a {
    width: auto;
    font-size: 16px
  }

  .nav-dropdown:hover .nav-dropdown__menu,
  .nav-dropdown:focus-within .nav-dropdown__menu {
    transform: none
  }
}

/* Live Google map fallback when no JavaScript API key is configured. */
.google-map-embed-stage {
  position: absolute;
  z-index: 1;
  inset: -15%;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  transform: translate3d(var(--map-pan-x, 0), var(--map-pan-y, 0), 0) scale(var(--map-scale, 1));
  transform-origin: center;
  will-change: transform
}

.google-map-embed-stage.is-dragging {
  cursor: grabbing
}

.google-map-embed {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: #88cfe1;
  opacity: 1;
  transition: opacity .28s ease;
  pointer-events: none !important
}

.google-map-embed.is-map-buffer {
  z-index: 2;
  opacity: 0
}

.google-map-embed.is-map-buffer.is-map-current {
  opacity: 1
}

.google-map-embed.is-map-outgoing {
  opacity: 0
}

.map-section.is-google-embed .map-picture,
.map-section.is-google-embed .map-brand {
  display: none
}

.map-section.is-google-ready .google-map-embed-stage {
  display: none
}

.map-section.is-google-ready .google-map {
  z-index: 2
}

.map-section.is-google-embed .fallback-markers {
  z-index: 4
}

/* Figma Footer - 02 — node 2:2534 */
.site-footer {
  height: 564px;
  padding: 76px 0 0;
  overflow: hidden;
  color: #fff;
  background-color: #0b4e96;
  background-image: linear-gradient(rgba(11, 78, 150, .7), rgba(11, 78, 150, .7)), url("../img/eec2026/figma/footer-ccf73.png");
  background-position: center 45%;
  background-size: cover
}

.site-footer:after {
  content: "";
  position: absolute;
  inset: 36px 0 64px;
  background: url("../img/eec2026/figma/footer-f1f10.svg") center/100% 100% no-repeat;
  opacity: .3;
  pointer-events: none
}

.footer-wave {
  z-index: 2;
  height: 126px;
  background: url("../img/eec2026/figma/footer-2823f.svg") left top/100% 126px no-repeat
}

.footer-main {
  z-index: 3;
  height: 424px;
  padding: 2px 0 0
}

.footer-brand {
  height: 130px;
  gap: 10px;
  align-items: flex-start
}

.footer-brand img {
  width: 100px;
  height: 130px
}

.footer-brand>div {
  padding-top: 10px;
  line-height: 1.15
}

.footer-brand h2 {
  font-size: 26px;
  font-weight: 400
}

.footer-brand p {
  font-size: 18px
}

.footer-brand small {
  font-size: 18px
}

.contact-grid {
  grid-template-columns: 2.35fr 1.15fr 1fr 1.1fr 1fr;
  gap: 28px;
  margin-top: 34px;
  align-items: center
}

.contact-grid article {
  align-items: flex-start;
  gap: 16px;
  font-size: 20px;
  line-height: 1.2
}

.contact-grid article>img,
.contact-grid article>span {
  display: grid;
  place-items: center;
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  border-radius: 16px;
  background: #156cd2
}

.contact-grid article>img {
  background: transparent
}

.contact-grid article>span img {
  max-width: 30px;
  max-height: 24px
}

.contact-grid p {
  padding-top: 4px
}

.contact-grid strong {
  font-size: 28px
}

.visit-icon {
  font-size: 24px;
  color: #fff
}

.footer-rule {
  height: 1px;
  margin-top: 26px;
  background: rgba(255, 255, 255, .35)
}

.footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  font-size: 20px
}

.footer-meta small {
  font-size: 20px
}

.footer-badges {
  display: flex;
  gap: 4px
}

.footer-badges img {
  width: 88px;
  height: 31px
}

.footer-social {
  gap: 10px
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(21, 108, 210, .6);
  backdrop-filter: blur(2px)
}

.footer-social img {
  max-width: 20px;
  max-height: 20px
}

.footer-bottom {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  height: 64px;
  padding: 0;
  background: #0b4e96
}

.footer-bottom nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 64px;
  font-size: 20px
}

.footer-bottom nav i {
  font-style: normal;
  opacity: .55
}

@media(max-width:1200px) {
  .brand b {
    font-size: 28px
  }

  .brand small {
    font-size: 22px
  }

  .main-nav a {
    padding-inline: 10px;
    font-size: 17px
  }

  .member-link {
    font-size: 17px
  }

  .site-footer {
    height: auto;
    min-height: 564px
  }

  .contact-grid {
    grid-template-columns: 2fr 1fr 1fr
  }

  .footer-main {
    height: auto;
    padding-bottom: 92px
  }

  .footer-meta {
    height: auto;
    min-height: 80px;
    gap: 20px
  }

  .footer-bottom {
    height: auto;
    min-height: 64px
  }

  .footer-bottom nav {
    flex-wrap: wrap;
    height: auto;
    min-height: 64px;
    padding: 12px 24px
  }
}

@media(max-width:700px) {
  .site-header {
    height: 124px
  }

  .header-top {
    height: 80px
  }

  .header-top__inner {
    padding-bottom: 0
  }

  .brand {
    height: 54px
  }

  .brand img {
    width: 50px;
    height: 65px
  }

  .brand b {
    font-size: 18px
  }

  .brand small {
    font-size: 16px
  }

  .header-icon {
    display: none
  }

  .language-switch {
    height: 36px;
    padding: 0 10px;
    font-size: 14px
  }

  .nav-bar {
    height: 44px
  }

  .member-link {
    display: none
  }

  .main-nav a {
    font-size: 16px
  }

  .google-map-embed {
    pointer-events: auto
  }

  .site-footer {
    padding-top: 60px;
    background-position: center
  }

  .footer-wave {
    height: 75px;
    background-size: auto 75px
  }

  .footer-brand {
    height: auto
  }

  .footer-brand h2 {
    font-size: 22px
  }

  .contact-grid {
    grid-template-columns: 1fr
  }

  .footer-meta {
    display: grid;
    padding-block: 24px
  }

  .footer-bottom {
    position: relative
  }

  .footer-bottom nav {
    justify-content: flex-start
  }

  .footer-bottom nav i {
    display: none
  }
}

/* Map marker detail cards — Figma nodes 2:6451 / 2:3842 */
.google-map-embed {
  pointer-events: none
}

.map-section.is-google-embed .google-map-embed-stage {
  pointer-events: auto
}

.station-row[data-station-index] {
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease
}

.station-row[data-station-index]:hover,
.station-row[data-station-index]:focus-visible {
  border-color: rgba(21, 108, 210, .3);
  outline: 0
}

.station-row[data-station-index].is-selected {
  border-color: #156cd2;
  background: #eff8ff;
  box-shadow: inset 4px 0 #156cd2
}

.fallback-markers {
  pointer-events: none
}

.fallback-pin {
  position: absolute;
  z-index: 2;
  width: 40px;
  height: 43px;
  padding: 0;
  border: 0;
  background: transparent;
  filter: drop-shadow(0 3px 4px rgba(7, 58, 99, .2));
  transform: scale(var(--marker-inverse-scale, 1)) translate(-50%, -100%);
  transform-origin: 0 0;
  pointer-events: auto;
  cursor: pointer;
  animation: fallback-marker-pop .45s cubic-bezier(.2, .8, .2, 1) both;
  transition: left .24s ease, top .24s ease, filter .2s ease, transform .2s ease
}

.fallback-pin.is-selected {
  z-index: 6;
  filter: drop-shadow(0 7px 8px rgba(7, 58, 99, .38));
  transform: scale(var(--marker-inverse-scale, 1)) translate(-50%, -100%);
  animation: none
}

@keyframes fallback-marker-pop {
  from {
    opacity: 0;
    transform: scale(var(--marker-inverse-scale, 1)) translate(-50%, -100%) translateY(-14px) scale(.55)
  }

  to {
    opacity: 1;
    transform: scale(var(--marker-inverse-scale, 1)) translate(-50%, -100%)
  }
}

.fallback-pin img {
  display: block;
  width: 40px;
  height: 43px
}

.fixed-map-popup {
  position: absolute;
  z-index: 8;
  top: 74px;
  right: max(24px, calc((100% - 1640px)/2));
  pointer-events: auto;
  filter: drop-shadow(0 16px 32px rgba(13, 29, 45, .18))
}

.fixed-map-popup.is-showing .map-detail-content {
  animation: popup-content-in .32s cubic-bezier(.2, .75, .25, 1) both
}

.gm-style .gm-style-iw-c {
  max-height: none !important;
  padding: 0 !important;
  border-radius: 24px !important;
  background: transparent !important;
  box-shadow: none !important
}

.gm-style .gm-style-iw-d {
  max-height: none !important;
  overflow: visible !important
}

.gm-style .gm-style-iw-chr,
.gm-style .gm-style-iw-tc {
  display: none !important
}

.map-detail-card {
  position: relative;
  box-sizing: border-box;
  color: #0d1d2d;
  font-family: "DB Helvethaica X", "Leelawadee UI", Tahoma, sans-serif;
  line-height: 1.1
}

.map-detail-card * {
  box-sizing: border-box
}

.map-detail-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none
}

.map-detail-content {
  position: relative;
  width: 100%;
  height: 100%
}

.map-detail-close {
  position: absolute;
  z-index: 3;
  top: 16px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(172, 236, 230, .35);
  border-radius: 50%;
  color: #0095d6;
  background: rgba(255, 255, 255, .45);
  font: 300 28px/1 Arial, sans-serif;
  cursor: pointer
}

.coral-detail-link {
  position: absolute;
  z-index: 3;
  right: auto;
  bottom: 14px;
  left: 50%;
  padding: 6px 12px;
  border: 1px solid rgba(0, 146, 210, .22);
  border-radius: 20px;
  color: #0077b6;
  background: rgba(255, 255, 255, .72);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transform: translateX(-50%);
  white-space: nowrap
}

.coral-detail-link:hover,
.coral-detail-link:focus-visible {
  color: #fff;
  background: #0077b6
}

.detail-status {
  position: absolute;
  top: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 33px;
  padding: 4px 14px;
  border-radius: 30px;
  font-size: 20px;
  transform: translateX(-50%);
  white-space: nowrap
}

.coral-detail .detail-status {
  right: 72px;
  left: auto;
  transform: none
}

.detail-status i,
.qartod i {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%
}

.detail-status--online,
.detail-status--healthy {
  color: #10b981;
  background: #f0fdf4;
  border: 1px solid #dcfce7
}

.detail-status--online i,
.detail-status--healthy i {
  background: #10b981
}

.detail-status--watch {
  color: #c98300;
  background: #fff9e8;
  border: 1px solid #fde7a6
}

.detail-status--watch i {
  background: #f59e0b
}

.detail-status--stressed,
.detail-status--warning {
  color: #d97706;
  background: #fff7ed;
  border: 1px solid #fed7aa
}

.detail-status--stressed i,
.detail-status--warning i {
  background: #f59e0b
}

.detail-status--danger {
  color: #dc2626;
  background: #fef2f2;
  border: 1px solid #fecaca
}

.detail-status--danger i {
  background: #ef4444
}

.coral-detail {
  width: 527px;
  height: 564px
}

.coral-detail>.map-detail-bg {
  transform: scaleX(-1)
}

.coral-detail .map-detail-content>header {
  position: absolute;
  top: 82px;
  left: 24px
}

.coral-detail h2 {
  margin: 0;
  font-size: 32px
}

.coral-detail header p {
  margin: 4px 0 0;
  color: #4b5563;
  font-size: 20px
}

.coral-detail h3 {
  position: relative;
  margin: 0;
  font-size: 24px
}

.coral-detail .coral-photos-title {
  position: absolute;
  top: 165px;
  left: 24px
}

.coral-detail .coral-results-title {
  position: absolute;
  top: 303px;
  left: 24px
}

.coral-detail.has-no-photos {
  height: 440px
}

.coral-detail.has-no-photos .coral-results-title {
  top: 175px
}

.coral-detail.has-no-photos .coral-metrics {
  top: 205px
}

.coral-photos {
  position: absolute;
  top: 196px;
  left: 24px;
  display: grid;
  width: 479px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px
}

.coral-photos[data-photo-count="1"] {
  grid-template-columns: 120px
}

.coral-photos[data-photo-count="2"] {
  grid-template-columns: repeat(2, 120px)
}

.coral-photos[data-photo-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.coral-photos[data-photo-count="4"] {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.coral-photo {
  position: relative;
  display: block;
  overflow: hidden;
  height: 90px;
  border-radius: 9px;
  background: #d9eef5;
  box-shadow: 0 1px 3px rgba(13, 29, 45, .12)
}

.coral-photos img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: cover;
  transition: transform .25s ease, filter .25s ease
}

.coral-photo>span {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(0, 117, 201, .82);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease
}

.coral-photo>span::before,
.coral-photo>span::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 6px;
  width: 11px;
  height: 2px;
  background: #fff
}

.coral-photo>span::after {
  transform: rotate(90deg)
}

.coral-photo:hover img,
.coral-photo:focus-visible img {
  filter: brightness(.78);
  transform: scale(1.06)
}

.coral-photo:hover>span,
.coral-photo:focus-visible>span {
  opacity: 1;
  transform: none
}

.fixed-map-popup.is-showing .coral-photo {
  opacity: 0;
  animation: survey-photo-in .38s cubic-bezier(.2, .75, .25, 1) forwards;
  animation-delay: calc(.06s * var(--item-index))
}

.coral-metrics {
  position: absolute;
  top: 333px;
  left: 24px;
  display: grid;
  width: 479px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 15px
}

.coral-metric {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  height: 84px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid #fff;
  border-radius: 8px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 8px 24px rgba(0, 25, 82, .08);
  backdrop-filter: blur(8px)
}

.fixed-map-popup.is-showing .coral-metric {
  opacity: 0;
  animation: survey-value-in .34s cubic-bezier(.2, .75, .25, 1) forwards
}

.fixed-map-popup.is-showing .coral-metric:nth-child(1) {
  animation-delay: .10s
}

.fixed-map-popup.is-showing .coral-metric:nth-child(2) {
  animation-delay: .14s
}

.fixed-map-popup.is-showing .coral-metric:nth-child(3) {
  animation-delay: .18s
}

.fixed-map-popup.is-showing .coral-metric:nth-child(4) {
  animation-delay: .22s
}

.fixed-map-popup.is-showing .coral-metric:nth-child(5) {
  animation-delay: .26s
}

.fixed-map-popup.is-showing .coral-metric:nth-child(6) {
  animation-delay: .30s
}

.coral-metric div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4b5563;
  font-size: 20px
}

.coral-metric div span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.coral-metric img {
  width: 18px;
  height: 18px;
  object-fit: contain
}

.coral-metric strong {
  display: -webkit-box;
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.15;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}

.buoy-detail {
  width: 519px;
  height: 610px
}

.buoy-detail>.map-detail-bg {
  transform: scaleX(-1)
}

.buoy-detail .map-detail-content>header {
  position: absolute;
  top: 78px;
  left: 19px
}

.buoy-detail h2 {
  margin: 0;
  font-size: 32px
}

.qartod {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 4px;
  color: #4b5563;
  font-size: 20px
}

.qartod b {
  font-weight: 700
}

.qartod span {
  display: flex;
  align-items: center;
  gap: 6px
}

.qartod .pass {
  background: #4ac884
}

.qartod .suspect {
  background: #fe9167
}

.qartod .fail {
  background: #ef4444
}

.buoy-metrics {
  position: absolute;
  top: 161px;
  left: 19px;
  width: 479px;
  height: 428px;
  overflow: hidden;
  border-radius: 16px
}

.buoy-metric {
  height: 194px;
  margin-bottom: 8px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(17px)
}

.buoy-metric:first-child {
  height: 226px;
  background: rgba(255, 255, 255, .6)
}

.buoy-metric header {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.buoy-metric h3 {
  margin: 0;
  font-size: 24px
}

.buoy-metric header strong {
  font-size: 32px
}

.buoy-metric .temp {
  color: #ef4444
}

.buoy-metric .ph {
  color: #8774ff
}

.buoy-metric .o2 {
  color: #4ac884
}

.buoy-metric>p {
  margin: 7px 0 0;
  color: #4b5563;
  font-size: 20px
}

.buoy-chart {
  position: relative;
  height: 128px;
  margin-top: 8px;
  padding-left: 49px
}

.buoy-axis {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  height: 96px;
  flex-direction: column;
  justify-content: space-between;
  color: #4b5563;
  font-size: 20px
}

.buoy-live-chart {
  position: absolute;
  top: 14px;
  left: 59px;
  width: 398px;
  height: 79px;
  overflow: visible
}

.buoy-chart-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: buoy-line-draw 1s cubic-bezier(.2, .75, .25, 1) forwards
}

.buoy-chart-point {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: buoy-point-pop .28s ease-out forwards;
  animation-delay: var(--point-delay)
}

.buoy-dates {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 45px;
  display: flex;
  justify-content: space-between;
  color: #4b5563;
  font-size: 20px
}

.coral-detail>.map-detail-bg {
  top: 2px;
  left: 3px;
  width: 521px;
  height: 560px
}

.coral-detail.has-no-photos>.map-detail-bg {
  height: 436px
}

.map-section.has-map-popup .layer-select {
  visibility: hidden;
  pointer-events: none
}

.buoy-detail>.map-detail-bg {
  top: -1px;
  left: -1px;
  width: 521px;
  height: 611px
}

.buoy-chart>img {
  width: auto;
  height: auto
}

@keyframes buoy-line-draw {
  to {
    stroke-dashoffset: 0
  }
}

@keyframes buoy-point-pop {
  from {
    opacity: 0;
    transform: scale(0)
  }

  to {
    opacity: 1;
    transform: scale(1)
  }
}

@keyframes popup-content-in {
  from {
    opacity: .65
  }

  to {
    opacity: 1
  }
}

@keyframes survey-photo-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.94)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes survey-value-in {
  from {
    opacity: 0;
    transform: translateY(10px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media(prefers-reduced-motion:reduce) {

  .fixed-map-popup.is-showing .map-detail-content,
  .fixed-map-popup.is-showing .coral-photo,
  .fixed-map-popup.is-showing .coral-metric {
    opacity: 1;
    animation: none
  }
}

.uses-fallback-font .detail-status {
  font-size: 14px
}

.uses-fallback-font .coral-detail h2,
.uses-fallback-font .buoy-detail h2 {
  font-size: 24px
}

.uses-fallback-font .coral-detail header p {
  font-size: 14px
}

.uses-fallback-font .coral-detail h3,
.uses-fallback-font .buoy-metric h3 {
  font-size: 18px
}

.uses-fallback-font .coral-metric div {
  font-size: 14px
}

.uses-fallback-font .coral-metric strong {
  font-size: 20px
}

.uses-fallback-font .buoy-metric header strong {
  font-size: 24px
}

.uses-fallback-font .qartod,
.uses-fallback-font .buoy-metric>p {
  font-size: 15px
}

.uses-fallback-font .buoy-axis,
.uses-fallback-font .buoy-dates {
  font-size: 14px
}

@media(max-width:1100px) and (min-width:701px) {
  .fixed-map-popup {
    top: 76px;
    right: 18px;
    transform: scale(.78);
    transform-origin: right top
  }
}

@media(max-width:700px) {
  .fixed-map-popup {
    position: absolute;
    top: 120px;
    right: 50%;
    z-index: 20;
    transform: translateX(50%) scale(.66);
    transform-origin: center top
  }

  .map-detail-card {
    filter: drop-shadow(0 16px 32px rgba(13, 29, 45, .18))
  }

  .gm-style .gm-style-iw-c {
    transform: scale(.68);
    transform-origin: center bottom
  }
}

/* Full-page 1920px Figma geometry and typography audit — frame 2:1512. */
body,
button,
input,
select,
textarea {
  font-family: "DB Helvethaica X", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif
}

h1,
h2,
h3,
h4,
b,
strong {
  font-family: "DB Helvethaica X", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  font-weight: 700
}

@media(min-width:1501px) {
  body {
    font-size: 24px;
    line-height: 1.2
  }

  .map-section {
    height: 840px;
    margin-top: -44px
  }

  .station-panel {
    top: 76px;
    left: max(24px, calc((100% - 1640px)/2));
    width: 519px;
    height: 558px;
    max-height: none;
    padding: 20px;
    border-radius: 16px
  }

  .station-tabs {
    height: 44px;
    gap: 8px;
    margin-bottom: 16px
  }

  .station-tabs button {
    height: 44px;
    padding: 0 25px;
    font-size: 18px
  }

  .search-box,
  .filter-button {
    height: 44px;
    margin-bottom: 10px;
    padding-inline: 20px;
    font-size: 20px
  }

  .station-list {
    max-height: 340px;
    gap: 4px;
    overflow: auto
  }

  .station-row.coral-row {
    min-height: 76px;
    padding: 10px;
    background: rgba(255, 255, 255, .95)
  }

  .station-row.coral-row img {
    width: 28px;
    height: 28px
  }

  .station-row b {
    font-size: 24px
  }

  .station-row small,
  .station-row.coral-row strong {
    font-size: 18px
  }

  .layer-select {
    top: 76px;
    right: max(24px, calc((100% - 1640px)/2));
    width: 220px;
    height: 56px;
    padding: 0 20px;
    font-size: 20px
  }

  .map-legend {
    right: max(24px, calc((100% - 1640px)/2));
    bottom: 42px;
    left: max(24px, calc((100% - 1640px)/2));
    height: 56px;
    padding: 8px 34px;
    gap: 20px;
    font-size: 18px
  }

  .banner-section {
    height: 309px;
    margin-top: 67px;
    padding: 13px 0 0;
    gap: 40px
  }

  .banner-section article {
    height: 260px
  }

  .banner-section h2 {
    bottom: 28px;
    left: 40px;
    font-size: 40px;
    line-height: .88
  }

  .banner-section h2 small {
    font-size: 30px
  }

  .slider-dots {
    bottom: 0
  }

  .forecast-section {
    height: 1109px;
    min-height: 1109px;
    margin-top: 58px;
    padding: 62px 0 0
  }

  .section-title {
    gap: 16px
  }

  .section-title>i {
    height: 64px;
    min-height: 64px
  }

  .section-title h2 {
    font-size: 64px;
    line-height: 64px
  }

  .section-title p {
    font-size: 24px
  }

  .forecast-tools {
    height: 58px;
    margin-top: -64px;
    gap: 16px
  }

  .forecast-tools button {
    height: 58px;
    padding: 0 20px;
    font-size: 24px
  }

  .forecast-layout {
    grid-template-columns: 800px 800px;
    gap: 40px;
    margin-top: 40px
  }

  .forecast-visual {
    min-height: 890px
  }

  .forecast-note {
    top: 554px;
    bottom: auto;
    width: 659px;
    min-height: 338px;
    padding: 58px 41px;
    font-size: 24px;
    line-height: 1.4
  }

  .forecast-grid {
    grid-template-columns: 380px 380px;
    grid-auto-rows: 425px;
    gap: 40px
  }

  .forecast-card {
    width: 380px;
    height: 425px;
    padding: 12px 16px
  }

  .forecast-card h3 {
    font-size: 32px
  }

  .forecast-card p {
    font-size: 24px
  }

  .forecast-card p small {
    font-size: 18px
  }

  .warning {
    font-size: 18px
  }

  .gauge strong {
    font-size: 64px
  }

  .gauge small {
    font-size: 18px
  }

  .summary-section {
    height: 783px;
    padding: 70px 0 0
  }

  .chart-card {
    height: 570px;
    margin-top: 38px;
    padding: 38px 65px
  }

  .chart-area {
    height: 430px
  }

  .chart-legend {
    font-size: 24px
  }

  .reports-section {
    height: 872px;
    padding: 0
  }

  .reports-section .section-heading {
    height: 105px;
    margin-bottom: 48px
  }

  .view-all {
    width: 160px;
    height: 60px;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 24px
  }

  .report-grid {
    gap: 40px
  }

  .report-card {
    height: 674px
  }

  .report-card:first-child {
    color: #fff;
    background: #156cd2
  }

  .report-card:first-child .report-body p {
    color: #fff
  }

  .report-card:first-child .report-tags span {
    color: #fff;
    background: rgba(243, 244, 246, .1)
  }

  .report-card:first-child .report-body footer {
    border-color: #f3f4f6
  }

  .report-card:first-child .report-body footer a {
    color: #156cd2;
    background: #fff
  }

  .report-photo {
    height: 321px
  }

  .report-photo span,
  .report-photo b {
    font-size: 20px
  }

  .report-body {
    height: 353px;
    padding: 30px
  }

  .report-body h3 {
    font-size: 32px
  }

  .report-body p {
    font-size: 24px;
    line-height: 1.2
  }

  .report-tags span {
    font-size: 18px
  }

  .report-body footer {
    font-size: 24px
  }

  .report-body footer a {
    height: 48px;
    padding: 8px 32px
  }

  .knowledge-wrap {
    height: 1042px;
    padding: 195px 0 0
  }

  .knowledge-section.container {
    width: min(calc(100% - 48px), 1760px);
    height: 847px;
    padding: 30px 60px 0
  }

  .knowledge-section .section-heading {
    height: 105px;
    margin-bottom: 40px
  }

  .knowledge-feature {
    grid-template-columns: 1fr 420px;
    height: 204px;
    min-height: 204px;
    padding: 20px 280px;
    margin: 0
  }

  .knowledge-copy h3 {
    font-size: 32px
  }

  .knowledge-copy p {
    font-size: 24px
  }

  .knowledge-feature img {
    right: 40px;
    top: 50px;
    width: 420px;
    height: 315px
  }

  .knowledge-copy a {
    font-size: 27px
  }

  .knowledge-row {
    height: 204px;
    grid-template-columns: 180px 1fr 100px;
    padding: 28px 45px
  }

  .knowledge-row>b {
    font-size: 28px
  }

  .alerts-section {
    height: 1307px;
    padding: 240px 0 0
  }

  .alerts-section .section-heading {
    height: 105px;
    margin-bottom: 48px
  }

  .alert-grid {
    gap: 40px
  }

  .alert-card {
    height: 374px;
    padding: 30px
  }

  .alert-status span,
  .alert-status b {
    font-size: 18px
  }

  .alert-card h3 {
    font-size: 32px
  }

  .alert-card p {
    font-size: 24px;
    line-height: 1.2
  }

  .alert-card small {
    font-size: 18px
  }

  .alert-card footer {
    height: 76px;
    font-size: 20px
  }

  .light-dots {
    height: 12px;
    margin: 24px 0 40px
  }

  .action-grid {
    height: 313px
  }

  .conservation {
    height: 313px
  }

  .conservation h3 {
    font-size: 40px
  }

  .conservation a {
    font-size: 24px
  }

  .poll {
    height: 313px;
    padding: 24px
  }

  .poll h3 {
    font-size: 28px
  }

  .poll p {
    font-size: 18px
  }

  .poll label {
    font-size: 18px
  }

  .poll button {
    font-size: 20px
  }

  .site-footer {
    height: 564px
  }

  .footer-brand h2 {
    font-size: 26px
  }

  .footer-brand p,
  .footer-brand small {
    font-size: 18px
  }

  .contact-grid article {
    font-size: 20px
  }

  .footer-meta small,
  .footer-bottom nav {
    font-size: 20px
  }
}

/* DB Helvethaica X has compact Thai metrics. Keep the same visual size while the
   licensed webfont is absent, then automatically restore Figma's native sizes. */
@media(min-width:1201px) {
  .uses-fallback-font body {
    font-size: 17px;
    line-height: 1.35
  }

  .uses-fallback-font .brand span {
    transform: translateY(6px);
    row-gap: 6px
  }

  .uses-fallback-font .brand b {
    font-size: 26px;
    line-height: 1.05
  }

  .uses-fallback-font .brand small {
    font-size: 19px;
    line-height: 1.15
  }

  .uses-fallback-font .language-switch {
    font-size: 13px
  }

  .uses-fallback-font .main-nav a,
  .uses-fallback-font .member-link {
    font-size: 14px
  }

  .uses-fallback-font .station-tabs button {
    font-size: 13px
  }

  .uses-fallback-font .search-box,
  .uses-fallback-font .filter-button,
  .uses-fallback-font .layer-select {
    font-size: 15px
  }

  .uses-fallback-font .station-row b {
    font-size: 17px
  }

  .uses-fallback-font .station-row small,
  .uses-fallback-font .station-row.coral-row strong {
    font-size: 13px
  }

  .uses-fallback-font .map-legend {
    font-size: 13px
  }

  .uses-fallback-font .banner-section h2 {
    font-size: 29px
  }

  .uses-fallback-font .banner-section h2 small {
    font-size: 21px
  }

  .uses-fallback-font .section-title h2 {
    font-size: 46px;
    line-height: 64px
  }

  .uses-fallback-font .section-title p {
    font-size: 17px
  }

  .uses-fallback-font .view-all,
  .uses-fallback-font .forecast-tools button {
    font-size: 17px
  }

  .uses-fallback-font .forecast-note {
    font-size: 17px;
    line-height: 1.55
  }

  .uses-fallback-font .forecast-card h3 {
    font-size: 23px
  }

  .uses-fallback-font .forecast-card p {
    font-size: 17px
  }

  .uses-fallback-font .forecast-card p small,
  .uses-fallback-font .warning,
  .uses-fallback-font .gauge small {
    font-size: 13px
  }

  .uses-fallback-font .gauge strong {
    font-size: 46px
  }

  .uses-fallback-font .chart-legend {
    font-size: 17px
  }

  .uses-fallback-font .report-photo span,
  .uses-fallback-font .report-photo b {
    font-size: 14px
  }

  .uses-fallback-font .report-body h3 {
    font-size: 23px
  }

  .uses-fallback-font .report-body p {
    font-size: 17px;
    line-height: 1.45
  }

  .uses-fallback-font .report-tags span {
    font-size: 13px
  }

  .uses-fallback-font .report-body footer {
    font-size: 17px
  }

  .uses-fallback-font .knowledge-copy h3 {
    font-size: 23px
  }

  .uses-fallback-font .knowledge-copy p {
    font-size: 17px
  }

  .uses-fallback-font .knowledge-meta {
    font-size: 17px;
    line-height: 21px
  }

  .uses-fallback-font .knowledge-copy a {
    font-size: 19px
  }

  .uses-fallback-font .knowledge-row>b {
    font-size: 20px
  }

  .uses-fallback-font .alert-status span,
  .uses-fallback-font .alert-status b {
    font-size: 13px
  }

  .uses-fallback-font .alert-card h3 {
    font-size: 23px
  }

  .uses-fallback-font .alert-card p {
    font-size: 17px;
    line-height: 1.45
  }

  .uses-fallback-font .alert-card small {
    font-size: 13px
  }

  .uses-fallback-font .alert-card footer {
    font-size: 14px
  }

  .uses-fallback-font .conservation h3 {
    /* font-size: 29px */
  }

  .uses-fallback-font .conservation a {
    font-size: 17px
  }

  .uses-fallback-font .poll h3 {
    font-size: 20px
  }

  .uses-fallback-font .poll p,
  .uses-fallback-font .poll label {
    font-size: 13px
  }

  .uses-fallback-font .poll button {
    font-size: 14px
  }

  .uses-fallback-font .footer-brand h2 {
    font-size: 19px
  }

  .uses-fallback-font .footer-brand p,
  .uses-fallback-font .footer-brand small {
    font-size: 13px
  }

  .uses-fallback-font .contact-grid article {
    font-size: 14px;
    line-height: 1.35
  }

  .uses-fallback-font .contact-grid strong {
    font-size: 20px
  }

  .uses-fallback-font .footer-meta small,
  .uses-fallback-font .footer-bottom nav {
    font-size: 14px
  }
}

/* Interactive header controls shown in the Figma accessibility state. */
.header-top__inner {
  position: relative
}

.header-icon {
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease
}

.header-icon:hover,
.header-icon[aria-expanded="true"] {
  transform: translateY(-1px);
  filter: brightness(1.14)
}

.language-switch button {
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, .42);
  background: transparent;
  cursor: pointer;
  font: inherit
}

.language-switch button.is-active {
  color: #fff
}

.accessibility-panel,
.header-search-panel {
  position: absolute;
  z-index: 90;
  top: 78px;
  color: #0d1d2d;
  border: 1px solid rgba(21, 108, 210, .08);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(13, 29, 45, .2)
}

.accessibility-panel {
  right: 180px;
  width: 334px;
  padding: 22px 20px 18px
}

.accessibility-panel h2 {
  margin: 0 0 16px;
  color: #0b50eb;
  font-size: 16px;
  font-weight: 400
}

.accessibility-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  margin-bottom: 10px;
  font-size: 14px
}

.accessibility-row>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border-radius: 9px;
  background: #f3f4f6
}

.accessibility-row button {
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 7px;
  color: #9ca3af;
  background: transparent;
  cursor: pointer;
  font-size: 13px
}

.accessibility-row button.is-selected {
  color: #0d1d2d;
  background: #fff;
  box-shadow: 0 1px 4px rgba(13, 29, 45, .08)
}

.accessibility-panel footer {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 10px
}

.accessibility-panel footer button {
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px
}

.accessibility-panel footer .access-apply {
  color: #fff;
  background: #0b50eb
}

.header-search-panel {
  right: 0;
  width: 360px;
  padding: 18px
}

.header-search-panel label {
  display: block;
  margin-bottom: 8px;
  color: #0b50eb;
  font-size: 15px
}

.header-search-panel>div {
  display: flex
}

.header-search-panel input {
  min-width: 0;
  flex: 1;
  height: 40px;
  padding: 0 14px;
  border: 1px solid #d7e5f1;
  border-radius: 9px 0 0 9px;
  outline: 0;
  font-size: 14px
}

.header-search-panel input:focus {
  border-color: #156cd2
}

.header-search-panel button {
  width: 72px;
  border: 0;
  border-radius: 0 9px 9px 0;
  color: #fff;
  background: #156cd2;
  cursor: pointer;
  font-size: 14px
}

.header-search-panel p {
  min-height: 18px;
  margin: 7px 0 0;
  color: #64748b;
  font-size: 12px
}

.access-color-mono body {
  filter: grayscale(1)
}

.access-color-contrast body {
  filter: contrast(1.15) saturate(.55)
}

@media(max-width:1200px) {
  .accessibility-panel {
    right: 0
  }

  .header-search-panel {
    right: 0
  }
}

@media(max-width:700px) {
  .brand span {
    display: none
  }

  .header-icon {
    display: grid
  }

  .accessibility-panel,
  .header-search-panel {
    position: fixed;
    top: 88px;
    right: 15px;
    left: 15px;
    width: auto
  }

  .language-switch img,
  .language-switch i {
    display: none
  }

  .language-switch {
    gap: 6px;
    padding-inline: 9px
  }
}

/* Mainpage Banner Section — Figma node 2:1427. */
.banner-section {
  display: block;
  height: 309px;
  margin-top: 67px;
  padding: 13px 0 0
}

.banner-viewport {
  width: 100%;
  height: 273px;
  margin-top: -13px;
  padding-top: 13px;
  overflow: hidden;
  touch-action: pan-y
}

.banner-track {
  display: flex;
  width: 100%;
  gap: 40px;
  transition: transform .48s ease;
  will-change: transform
}

.banner-track .banner-card {
  position: relative;
  flex: 0 0 calc((100% - 80px)/3);
  height: 260px;
  overflow: visible;
  border-radius: 16px;
  box-shadow: none
}

.banner-track .banner-card::after {
  display: none
}

.banner-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px
}

.banner-art img {
  position: absolute;
  max-width: none;
  object-fit: fill
}

.banner-art::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none
}

.banner-card--one .banner-art img {
  top: 0;
  left: -147.69%;
  width: 262.5%;
  height: 100%
}

.banner-card--one .banner-art::after {
  background: linear-gradient(36.31deg, #0b50eb 20.94%, transparent 50.8%), linear-gradient(90deg, rgba(11, 80, 235, .1), rgba(11, 80, 235, .5))
}

.banner-card--two .banner-art {
  transform: scaleX(-1)
}

.banner-card--two .banner-art img {
  top: 0;
  left: -5.38%;
  width: 131.92%;
  height: 122.32%
}

.banner-card--two .banner-art::after {
  background: linear-gradient(-57.32deg, #43ccfd 27.88%, transparent 51.1%)
}

.banner-card--three .banner-art img {
  top: -8.45%;
  left: 0;
  width: 110.21%;
  height: 128.84%
}

.banner-card--three .banner-art::after {
  background: linear-gradient(74.41deg, #7ccffb 5.68%, transparent 57.52%)
}

.banner-overhang {
  position: absolute;
  z-index: 3;
  top: -13px;
  left: 60.96%;
  width: 38.26px;
  height: 48.99px;
  mask: url("../img/eec2026/figma/banners-082b7.svg") center/100% 100% no-repeat;
  pointer-events: none
}

.banner-overhang img {
  position: absolute;
  top: -9px;
  left: -317px;
  width: 573px;
  height: 335px;
  max-width: none
}

.banner-section .banner-card h2 {
  position: absolute;
  z-index: 2;
  top: 160px;
  bottom: auto;
  left: 40px;
  margin: 0;
  color: #fff;
  font-size: 40px;
  line-height: .88;
  white-space: nowrap
}

.banner-section .banner-card h2 small {
  display: block;
  font-size: 30px;
  line-height: .88
}

.uses-fallback-font .banner-section .banner-card h2 {
  font-size: 29px
}

.uses-fallback-font .banner-section .banner-card h2 small {
  font-size: 21px
}

.banner-section .banner-pagination {
  bottom: 0;
  left: 50%;
  gap: 12px;
  align-items: center
}

.banner-pagination button {
  display: block;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 1px solid #156cd2;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  transition: width .25s ease, background-color .25s ease
}

.banner-pagination button.is-active {
  width: 48px;
  background: #156cd2
}

.banner-pagination button:focus-visible {
  outline: 3px solid #0b50eb;
  outline-offset: 3px
}

@media(max-width:1200px) {
  .banner-section {
    height: 340px;
    margin-top: 24px
  }

  .banner-track {
    gap: 16px
  }

  .banner-track .banner-card {
    flex-basis: 100%
  }

  .banner-track .banner-card:not(:first-of-type) {
    display: block
  }

  .banner-track .banner-card::before {
    position: absolute;
    z-index: 1;
    inset: 42% 0 0;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(transparent, rgba(0, 45, 110, .62));
    content: "";
    pointer-events: none
  }

  .banner-section .banner-card h2,
  .uses-fallback-font .banner-section .banner-card h2 {
    top: auto;
    right: 24px;
    bottom: 28px;
    left: 24px;
    font-size: 25px;
    line-height: 1.04;
    white-space: normal;
    text-shadow: 0 1px 4px rgba(0, 24, 72, .28)
  }

  .banner-section .banner-card h2 small,
  .uses-fallback-font .banner-section .banner-card h2 small {
    font-size: 19px;
    line-height: 1.08
  }
}

@media(prefers-reduced-motion:reduce) {

  .banner-track,
  .banner-pagination button {
    transition: none
  }
}

/* Figma's section art is masked and faded, not a full-bleed cover image. */
.forecast-section {
  overflow: hidden;
  background: #f8fcfc
}

.forecast-background {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mask: url("../img/eec2026/figma/forecastBg-adaf1.svg") center/100% 100% no-repeat
}

.forecast-background>img {
  position: absolute;
  top: -31.7%;
  left: -11.51%;
  width: 129.15%;
  height: 136.94%;
  max-width: none
}

.forecast-background::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(to bottom, #f8fcfc 9.423%, rgba(248, 252, 252, 0) 26.555%), linear-gradient(247.395deg, #f8fcfc 8.9189%, rgba(248, 252, 252, 0) 48.971%), linear-gradient(45.436deg, #f8fcfc 0%, rgba(248, 252, 252, 0) 15.151%)
}

.forecast-section>.container {
  position: relative;
  z-index: 1
}

.forecast-note {
  padding-top: 64px;
  background: url("../img/eec2026/figma/forecastInfo-a20fe.svg") center/100% 100% no-repeat;
  box-shadow: none
}

.forecast-note p {
  margin: 0
}

.forecast-note ul {
  margin: 0;
  padding-left: 35px
}

.forecast-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(231, 238, 254, .9) 11.294%, rgba(255, 255, 255, 0) 33.765%), rgba(255, 255, 255, .4);
  backdrop-filter: blur(8px);
  box-shadow: none
}

.forecast-card::before {
  position: absolute;
  inset: 113px 2px 2px;
  z-index: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .6);
  content: "";
  pointer-events: none
}

.forecast-card>* {
  position: relative;
  z-index: 1
}

.forecast-card:nth-child(n+2) .warning {
  background: #fef4dc
}

.forecast-card:nth-child(n+2) .warning i {
  background: #ffcd4b
}

.forecast-card .gauge {
  position: absolute;
  top: 196px;
  right: 0;
  left: 0;
  display: flex;
  height: 200px;
  align-items: center;
  flex-direction: column;
  margin: 0
}

.forecast-card .gauge .gauge-arc {
  order: 0;
  width: 226px;
  height: 113px;
  margin: 0;
  object-fit: fill
}

.forecast-card .gauge .gauge-needle {
  position: absolute;
  z-index: 2;
  top: 51px;
  left: calc(50% - 73px);
  width: 80px;
  height: 70px;
  max-width: none;
  margin: 0;
  object-fit: fill;
  transform-origin: 73px 62px
}

.forecast-card:first-child .gauge-needle {
  transform: rotate(50.38deg)
}

.forecast-card:nth-child(2) .gauge-needle {
  top: 105.5px;
  left: calc(50% - 95px);
  width: 102px;
  height: 15px;
  transform-origin: 95px 7.5px;
  transform: rotate(50.38deg)
}

.forecast-card .gauge small {
  order: 1;
  margin-top: 14px
}

.forecast-card .gauge strong {
  order: 2;
  margin-top: 0;
  line-height: 1
}

.summary-section,
.reports-section,
.knowledge-wrap {
  position: relative;
  isolation: isolate;
  background: #f8fcfc
}

.summary-section::before,
.reports-section::before,
.knowledge-wrap::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover
}

.summary-section::before {
  background-image: url("../img/eec2026/figma/summaryBg-38531.png");
  opacity: .64;
  mask: url("../img/eec2026/figma/summaryBg-8add9.svg") center/100% 100% no-repeat
}

.reports-section::before {
  background-image: url("../img/eec2026/figma/reportBg-be73b.png");
  mask: url("../img/eec2026/figma/reportBg-8add9.svg") center/100% 100% no-repeat
}

.knowledge-wrap::before {
  background-image: url("../img/eec2026/figma/forecastPage-36f29.png");
  mask: url("../img/eec2026/figma/forecastPage-4ebe1.svg") center/100% 100% no-repeat
}

.summary-boat {
  position: absolute;
  z-index: 2;
  top: -251px;
  left: calc(50% + 361px);
  width: 642px;
  height: 753px;
  overflow: hidden;
  pointer-events: none;
  mask: url("../img/eec2026/figma/summary-ff833.svg") center/100% 100% no-repeat
}

.summary-boat img {
  position: absolute;
  top: -305px;
  left: -4px;
  width: 629px;
  height: 1118px;
  max-width: none
}

.summary-glass {
  position: absolute;
  z-index: 1;
  top: 47px;
  left: 50%;
  width: 1760px;
  height: 656px;
  background: url("../img/eec2026/figma/summary-da9fe.svg") center/100% 100% no-repeat;
  transform: translateX(-50%);
  pointer-events: none
}

.summary-section>.container {
  position: relative;
  z-index: 3
}

/* Knowledge Section — Figma node 2:1255. */
.knowledge-section {
  box-shadow: none;
  backdrop-filter: blur(8px)
}

.knowledge-section .section-heading {
  align-items: flex-end
}

.knowledge-feature {
  display: grid;
  grid-template-columns: 238px 42px 800px 1fr;
  padding: 0;
  overflow: visible;
  background: #0b50eb
}

.knowledge-feature::before {
  z-index: 0;
  border-radius: 30px;
  background-image: linear-gradient(90deg, rgba(21, 108, 210, .76) 10.335%, #156cd2 100%), url("../img/eec2026/figma/knowledge-793b4.png");
  background-position: center, center 28%;
  background-size: cover;
  opacity: 1
}

.knowledge-category {
  position: relative;
  z-index: 2;
  align-self: start;
  color: var(--blue);
  font-size: 28px;
  font-weight: 400;
  text-align: center;
  text-transform: uppercase
}

.knowledge-feature>.knowledge-category {
  grid-column: 1;
  grid-row: 1;
  margin-top: 50px;
  color: #fff
}

.knowledge-copy {
  position: relative;
  z-index: 2;
  width: 800px
}

.knowledge-feature>.knowledge-copy {
  grid-column: 3;
  grid-row: 1;
  margin-top: 28px
}

.knowledge-copy h3 {
  line-height: normal
}

.knowledge-copy p {
  margin: 0;
  color: var(--muted);
  line-height: normal
}

.knowledge-feature .knowledge-copy h3 {
  color: #f59e0b
}

.knowledge-feature .knowledge-copy p {
  color: #fff
}

.knowledge-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: #9ca3af;
  font-size: 24px;
  line-height: 29px
}

.knowledge-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap
}

.knowledge-meta img,
.knowledge-more img {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important
}

.knowledge-meta img {
  width: 16px !important;
  height: 16px !important
}

.knowledge-meta span+span img {
  height: 11px !important
}

.knowledge-feature .knowledge-meta {
  color: #fff;
  opacity: .5
}

.knowledge-more {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 27px;
  line-height: 32px;
  text-transform: uppercase
}

.knowledge-more img {
  width: 10px !important;
  height: 10px !important;
  max-width: none
}

.knowledge-photo {
  position: absolute !important;
  z-index: 3 !important;
  top: 50px !important;
  right: 40px !important;
  width: 420px !important;
  height: 315px !important;
  border: 3px solid #fff !important;
  border-radius: 24px !important;
  box-shadow: 24px 24px 40px rgba(32, 86, 160, .16);
  object-fit: cover !important;
  object-position: center 46%
}

.knowledge-row {
  display: grid;
  grid-template-columns: 238px 42px 800px 1fr;
  height: 204px;
  padding: 0;
  border-bottom: 2px solid #e7eefe
}

.knowledge-row>.knowledge-category {
  grid-column: 1;
  grid-row: 1;
  margin-top: 80px
}

.knowledge-row>.knowledge-copy {
  grid-column: 3;
  grid-row: 1;
  margin-top: 28px
}

.knowledge-row .knowledge-more {
  color: var(--blue)
}

.knowledge-row h3 {
  line-height: normal
}

@media(min-width:1201px) {
  .summary-section {
    padding-top: 107px
  }

  .summary-section .chart-card {
    width: 1220px;
    height: 395px;
    grid-template-columns: 760px 340px;
    gap: 40px;
    margin-top: 46px;
    padding: 24px 40px
  }

  .summary-section .chart-area {
    height: 264px;
    padding: 10px 0 53px
  }

  .summary-section .chart-area::before {
    position: absolute;
    top: -40px;
    left: 0;
    color: #94a3b8;
    font-size: 18px;
    content: "สัดส่วนสถานี(ร้อยละ)"
  }

  .summary-section .bar-group {
    position: absolute;
    top: 15px
  }

  .summary-section .bar-group:nth-of-type(2) {
    left: 209px
  }

  .summary-section .bar-group:nth-of-type(3) {
    left: 534px
  }

  .summary-section .bar {
    width: 64px;
    height: 196px
  }

  .summary-section .chart-legend {
    align-self: start;
    margin-top: 41px
  }
}

@media(max-width:1200px) {
  .forecast-section {
    min-height: 0
  }

  .forecast-background>img {
    top: -10%;
    left: -18%;
    width: 150%;
    height: 125%
  }

  .forecast-note {
    padding: 28px
  }

  .forecast-note ul {
    padding-left: 24px
  }

  .knowledge-feature {
    display: block;
    padding: 24px
  }

  .knowledge-feature>.knowledge-category {
    display: block;
    margin: 0 0 8px;
    text-align: left
  }

  .knowledge-feature>.knowledge-copy {
    width: auto;
    margin: 0
  }

  .knowledge-photo {
    top: auto !important;
    right: 20px !important;
    bottom: 20px !important;
    width: calc(100% - 40px) !important;
    height: 145px !important
  }

  .knowledge-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    height: auto;
    min-height: 180px;
    padding: 24px 18px;
    gap: 20px
  }

  .knowledge-row>.knowledge-category {
    margin: 0;
    align-self: center
  }

  .knowledge-row>.knowledge-copy {
    grid-column: 2;
    width: 100%;
    margin: 0
  }

  .knowledge-more {
    right: 0
  }

  .knowledge-copy p br {
    display: none
  }
}

@media(max-width:1200px) {
  .summary-boat {
    top: -18vw;
    left: auto;
    right: -12vw;
    width: 40vw;
    height: 47vw
  }

  .summary-boat img {
    top: -40%;
    left: -1%;
    width: 98%;
    height: 148%
  }

  .summary-glass {
    top: 24px;
    width: calc(100% - 30px);
    height: calc(100% - 48px)
  }

  .summary-section .chart-card {
    position: relative;
    max-width: 100%
  }
}

/* Interactive knowledge list: dimensions and layers from Figma node 2:1255. */
.knowledge-item {
  position: relative;
  cursor: pointer;
  isolation: isolate;
  transition: background-color .22s ease, box-shadow .22s ease, color .22s ease
}

.knowledge-item:focus-visible {
  outline: 3px solid #60ceff;
  outline-offset: 3px
}

.knowledge-item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 30px;
  background-image: linear-gradient(90deg, rgba(21, 108, 210, .76) 10.335%, #156cd2 100%), url("../img/eec2026/figma/knowledge-793b4.png");
  background-size: 100% 100%, 100% auto;
  background-position: center, center 28%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease
}

.knowledge-item.is-active {
  border-bottom-color: transparent;
  border-radius: 30px;
  background: #0b50eb;
  box-shadow: 0 8px 24px rgba(0, 56, 181, .3);
  color: #fff
}

.knowledge-item.is-active::before {
  opacity: 1
}

.knowledge-item:not(.is-active) {
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--navy)
}

.knowledge-item .knowledge-category {
  color: var(--blue)
}

.knowledge-item.is-active .knowledge-category {
  color: #fff
}

.knowledge-item .knowledge-copy h3 {
  color: var(--navy)
}

.knowledge-item.is-active .knowledge-copy h3 {
  color: #f59e0b
}

.knowledge-item .knowledge-copy p {
  color: var(--muted)
}

.knowledge-item.is-active .knowledge-copy p {
  color: #fff
}

.knowledge-item .knowledge-meta {
  color: #9ca3af;
  opacity: 1
}

.knowledge-item.is-active .knowledge-meta {
  color: #fff;
  opacity: .5
}

.knowledge-item .knowledge-more {
  color: var(--blue)
}

.knowledge-item.is-active .knowledge-more {
  color: #fff
}

.knowledge-item .knowledge-meta img,
.knowledge-item .knowledge-more img {
  filter: none
}

.knowledge-item.is-active .knowledge-meta img,
.knowledge-item.is-active .knowledge-more img {
  filter: brightness(0) invert(1)
}

.knowledge-item .knowledge-more:hover {
  text-decoration: underline;
  text-underline-offset: 4px
}

.knowledge-section {
  position: relative
}

.knowledge-photo {
  display: block;
  pointer-events: none;
  transition: opacity .18s ease
}

.knowledge-photo.is-changing {
  opacity: .35
}

@media(min-width:1201px) {
  .knowledge-item {
    display: grid;
    grid-template-columns: 238px 42px 800px 1fr;
    height: 204px;
    min-height: 204px;
    padding: 0;
    margin: 0
  }

  .knowledge-item>.knowledge-category {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin-top: 80px
  }

  .knowledge-item:first-of-type>.knowledge-category {
    margin-top: 50px
  }

  .knowledge-item>.knowledge-copy {
    grid-column: 3;
    grid-row: 1;
    width: 800px;
    margin-top: 28px
  }

  .knowledge-item .knowledge-copy p {
    margin: 0
  }

  .knowledge-item .knowledge-more {
    right: 0;
    bottom: 0
  }

  .knowledge-section>.knowledge-photo {
    top: 225px !important;
    right: 100px !important;
    width: 420px !important;
    height: 315px !important;
    object-position: center 46%
  }

  .knowledge-section>.knowledge-photo[data-knowledge-content="2"] {
    object-position: 68% center
  }

  .knowledge-section>.knowledge-photo[data-knowledge-content="3"] {
    object-position: 20% center
  }
}

/* Assessment library and report detail — Figma nodes 2:7148 and 2:7470. */
.assessment-page {
  position: relative;
  overflow: hidden;
  background: #f8fcfc;
  isolation: isolate
}

.assessment-page::before,
.assessment-page::after {
  position: absolute;
  z-index: -1;
  right: 0;
  left: 0;
  content: "";
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover
}

.assessment-page::before {
  top: 320px;
  height: 1080px;
  background-image: url("../img/eec2026/figma/assessment-download/detail-03.png");
  background-position: center top;
  opacity: .72
}

.assessment-page::after {
  top: 894px;
  height: 1280px;
  background-image: url("../img/eec2026/figma/assessment-download/list-01.png");
  background-position: center bottom;
  opacity: .75
}

.assessment-page--listing {
  min-height: 1962px;
  padding-top: 20px
}

.assessment-page--detail {
  min-height: 1822px;
  padding-top: 20px
}

.assessment-hero {
  position: relative;
  height: 300px;
  overflow: visible;
  border-radius: 24px;
  background: #0b50eb url("../img/eec2026/figma/assessment-download/list-04.jpg") center/cover no-repeat;
  color: #fff
}

.assessment-hero::after {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: linear-gradient(90deg, rgba(11, 80, 235, .97) 0%, rgba(21, 108, 210, .82) 42%, rgba(11, 80, 235, .25) 68%, rgba(21, 108, 210, .9) 100%);
  content: ""
}

.assessment-hero__content {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 60px
}

.assessment-hero__content>span {
  display: inline-flex;
  height: 41px;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  color: #68d1ff;
  background: rgba(0, 46, 151, .3);
  font-size: 24px;
  text-transform: uppercase
}

.assessment-hero h1 {
  margin: 2px 0 0;
  font-size: 56px;
  line-height: 1.18;
  text-transform: uppercase
}

.assessment-hero p {
  margin: 0;
  font-size: 24px;
  line-height: 1.2
}

.assessment-hero__home {
  position: absolute;
  z-index: 3;
  top: 60px;
  right: 60px;
  display: flex;
  width: 184px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 40px;
  color: #156cd2;
  background: #fff;
  font-size: 24px;
  transition: transform .2s ease, box-shadow .2s ease
}

.assessment-hero__home:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(0, 35, 100, .2)
}

.assessment-crumb {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: -56px;
  display: flex;
  height: 56px;
  align-items: center;
  gap: 20px;
  padding: 0 30px;
  border-radius: 60px;
  background: rgba(255, 255, 255, .8);
  color: #0d1d2d;
  font-size: 24px;
  backdrop-filter: blur(2px)
}

.assessment-crumb>span {
  color: #156cd2;
  font-size: 22px
}

.assessment-crumb i {
  color: #cbd5e1;
  font-style: normal
}

.assessment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 60px
}

.assessment-card {
  height: 670px;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .05)
}

.assessment-card__image {
  position: relative;
  height: 321px;
  overflow: hidden
}

.assessment-card__image::after {
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(transparent, #fff);
  content: ""
}

.assessment-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.assessment-card__body {
  height: 349px;
  padding: 30px;
  color: #0d1d2d
}

.assessment-card__meta {
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px
}

.assessment-place {
  color: #156cd2;
  font-size: 20px
}

.assessment-place::first-letter {
  font-size: 16px
}

.assessment-status {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1.5px solid;
  border-radius: 30px;
  font-size: 20px
}

.assessment-status i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor
}

.assessment-status--green {
  color: #10b981;
  border-color: #dcfce7;
  background: #f0fdf4
}

.assessment-status--amber {
  color: #f59e0b;
  border-color: #fdecc8;
  background: #fff8e8
}

.assessment-status--red {
  color: #ef4444;
  border-color: #fee2e2;
  background: #fff1f2
}

.assessment-card h2 {
  margin: 0 0 12px;
  font-size: 32px;
  line-height: 1.18
}

.assessment-card p {
  height: 58px;
  margin: 0 0 16px;
  color: #4b5563;
  font-size: 24px;
  line-height: 1.2;
  overflow: hidden
}

.assessment-tags {
  display: flex;
  height: 36px;
  gap: 12px;
  margin-bottom: 16px
}

.assessment-tags span,
.assessment-report__tags span {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 26px;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 18px;
  white-space: nowrap
}

.assessment-card footer {
  display: flex;
  height: 66px;
  align-items: center;
  justify-content: space-between;
  border-top: 1.5px solid #f3f4f6
}

.assessment-card time {
  color: #9ca3af;
  font-size: 24px
}

.assessment-card footer a {
  display: flex;
  height: 48px;
  align-items: center;
  padding: 0 32px;
  border-radius: 40px;
  color: #fff;
  background: #156cd2;
  font-size: 24px;
  transition: filter .18s ease, transform .18s ease
}

.assessment-card footer a:hover {
  filter: brightness(.94);
  transform: translateY(-1px)
}

.assessment-card--featured {
  background: #156cd2;
  color: #fff
}

.assessment-card--featured .assessment-card__image::after {
  inset: 0 0 -353px;
  background: linear-gradient(transparent 0%, #156cd2 45%)
}

.assessment-card--featured .assessment-card__body {
  position: relative;
  color: #fff;
  background: #156cd2
}

.assessment-card--featured .assessment-card__body::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 180px;
  background: linear-gradient(transparent, #156cd2);
  content: ""
}

.assessment-card--featured .assessment-place,
.assessment-card--featured p,
.assessment-card--featured time {
  color: #fff
}

.assessment-card--featured .assessment-tags {
  opacity: .5
}

.assessment-card--featured .assessment-tags span {
  color: #fff;
  background: rgba(243, 244, 246, .1)
}

.assessment-card--featured footer a {
  color: #156cd2;
  background: #fff
}

.assessment-pagination {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  margin-top: 56px;
  padding: 0 20px;
  background: rgba(255, 255, 255, .55);
  font-size: 24px;
  backdrop-filter: blur(2px)
}

.assessment-pagination p {
  margin: 0
}

.assessment-pagination p strong {
  color: #156cd2
}

.assessment-pagination>div {
  display: flex;
  align-items: center;
  gap: 2px
}

.assessment-pagination button,
.assessment-pagination span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #0d1d2d;
  cursor: pointer
}

.assessment-pagination button.is-active {
  color: #fff;
  background: #156cd2
}

.assessment-pagination button:focus-visible {
  outline: 3px solid #60ceff;
  outline-offset: 2px
}

.assessment-detail-tools {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 60px
}

.assessment-detail-tools span,
.assessment-detail-tools a {
  display: flex;
  height: 48px;
  align-items: center;
  padding: 0 24px;
  border-radius: 40px;
  color: #156cd2;
  background: rgba(255, 255, 255, .9);
  font-size: 24px;
  white-space: nowrap
}

.assessment-detail-tools a {
  color: #fff;
  background: #156cd2
}

.assessment-report {
  position: relative;
  margin-top: -48px;
  padding: 102px 60px 60px;
  border: 2px solid #b9efff;
  border-right: 0;
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(4px)
}

.assessment-report>h2 {
  display: flex;
  height: 64px;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  color: #0c48c1;
  font-size: 48px;
  line-height: 1
}

.assessment-report>h2 i {
  width: 10px;
  height: 64px;
  border-radius: 6px;
  background: linear-gradient(#c5edff, #60ceff)
}

.assessment-report__cover {
  width: 100%;
  height: 360px;
  border-radius: 24px;
  object-fit: cover;
  object-position: center 55%
}

.assessment-report__columns {
  display: grid;
  grid-template-columns: 880px 600px;
  gap: 40px;
  margin-top: 34px
}

.assessment-report__story,
.assessment-summary,
.assessment-files {
  border-radius: 24px;
  background: #fff
}

.assessment-report__story {
  min-height: 703px;
  padding: 30px
}

.assessment-report__tags {
  display: flex;
  gap: 12px;
  height: 36px
}

.assessment-report__story h3 {
  margin: 24px 0 0;
  color: #156cd2;
  font-size: 32px;
  line-height: 1.2
}

.assessment-report__story>p {
  margin: 4px 0;
  color: #4b5563;
  font-size: 18px;
  line-height: 1.35
}

.assessment-report__story h4 {
  margin: 14px 0 3px;
  font-size: 24px
}

.assessment-report__story .assessment-gallery {
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid #f3f4f6
}

.assessment-gallery h4 {
  margin: 0 0 8px
}

.assessment-gallery>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.assessment-gallery button {
  height: 190px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  background: #edf8fc;
  cursor: zoom-in
}

.assessment-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease
}

.assessment-gallery button:hover img {
  transform: scale(1.04)
}

.assessment-report__aside {
  display: grid;
  align-content: start;
  gap: 40px
}

.assessment-summary {
  height: 374px;
  padding: 30px
}

.assessment-summary h3,
.assessment-files h3 {
  margin: 0;
  font-size: 24px
}

.assessment-summary dl {
  margin: 16px 0 0
}

.assessment-summary dl>div {
  display: flex;
  min-height: 57px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f3f4f6;
  font-size: 18px
}

.assessment-summary dl>div:last-child {
  margin: 0;
  border: 0
}

.assessment-summary dt {
  color: #64748b
}

.assessment-summary dd {
  max-width: 68%;
  margin: 0;
  font-weight: 700;
  text-align: right
}

.assessment-files {
  height: 289px;
  padding: 30px
}

.assessment-files>a {
  display: grid;
  grid-template-columns: 36px 1fr 24px;
  gap: 16px;
  align-items: center;
  height: 85px;
  border-bottom: 1px solid #f3f4f6
}

.assessment-files>a:last-child {
  border-bottom: 0
}

.assessment-files a>span {
  font-size: 20px
}

.assessment-files small {
  display: block;
  color: #94a3b8;
  font-size: 16px
}

.assessment-files a>i {
  color: #156cd2;
  font-size: 28px;
  font-style: normal
}

.file-type {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 5px;
  color: #fff;
  font-size: 10px
}

.file-type--pdf {
  background: #ef3340
}

.file-type--doc {
  background: #5667e8
}

.assessment-lightbox {
  width: min(960px, 90vw);
  padding: 12px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 90px rgba(3, 22, 54, .45)
}

.assessment-lightbox::backdrop {
  background: rgba(3, 22, 54, .72)
}

.assessment-lightbox img {
  width: 100%;
  max-height: 78vh;
  border-radius: 12px;
  object-fit: contain
}

.assessment-lightbox button {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .65);
  font-size: 28px;
  cursor: pointer
}

@media(max-width:1500px) {
  .assessment-hero h1 {
    font-size: 46px
  }

  .assessment-hero p {
    font-size: 20px
  }

  .assessment-grid {
    gap: 24px
  }

  .assessment-card h2 {
    font-size: 28px
  }

  .assessment-card p {
    font-size: 20px
  }

  .assessment-report__columns {
    grid-template-columns: minmax(0, 1.47fr) minmax(360px, 1fr)
  }

  .assessment-report__story {
    min-width: 0
  }
}

@media(max-width:1100px) {

  .assessment-page--listing,
  .assessment-page--detail {
    min-height: 0;
    padding-bottom: 100px
  }

  .assessment-hero {
    height: 330px
  }

  .assessment-hero__content {
    right: 32px;
    left: 32px
  }

  .assessment-hero__home {
    top: 24px;
    right: 24px
  }

  .assessment-hero__content>span {
    margin-top: 40px
  }

  .assessment-hero h1 {
    font-size: 38px
  }

  .assessment-hero p br {
    display: none
  }

  .assessment-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .assessment-report__columns {
    grid-template-columns: 1fr
  }

  .assessment-report__aside {
    grid-template-columns: 1fr 1fr
  }

  .assessment-summary,
  .assessment-files {
    height: auto
  }

  .assessment-report {
    padding-inline: 35px
  }

  .assessment-report__cover {
    height: 300px
  }
}

@media(max-width:700px) {
  .assessment-page {
    padding-top: 12px
  }

  .assessment-page::before,
  .assessment-page::after {
    opacity: .45
  }

  .assessment-hero {
    height: 390px;
    border-radius: 18px
  }

  .assessment-hero__content {
    top: 72px;
    right: 20px;
    left: 20px
  }

  .assessment-hero__content>span {
    height: 34px;
    margin-top: 10px;
    font-size: 16px
  }

  .assessment-hero h1 {
    margin-top: 10px;
    font-size: 34px;
    line-height: 1.05
  }

  .assessment-hero p {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.45
  }

  .assessment-hero__home {
    top: 18px;
    right: 18px;
    width: auto;
    height: 40px;
    padding: 0 18px;
    font-size: 18px
  }

  .assessment-crumb {
    right: 12px;
    bottom: -48px;
    height: 48px;
    font-size: 18px
  }

  .assessment-grid {
    grid-template-columns: 1fr;
    margin-top: 72px
  }

  .assessment-card {
    height: auto
  }

  .assessment-card__image {
    height: 250px
  }

  .assessment-card__body {
    height: auto
  }

  .assessment-card p {
    height: auto
  }

  .assessment-pagination {
    height: auto;
    flex-direction: column;
    gap: 18px;
    padding-block: 20px;
    text-align: center
  }

  .assessment-detail-tools {
    flex-wrap: wrap;
    margin-top: 70px
  }

  .assessment-detail-tools span,
  .assessment-detail-tools a {
    height: 42px;
    padding: 0 15px;
    font-size: 17px
  }

  .assessment-report {
    margin-top: 20px;
    padding: 28px 18px
  }

  .assessment-report>h2 {
    height: auto;
    margin-bottom: 24px;
    font-size: 34px
  }

  .assessment-report>h2 i {
    height: 46px
  }

  .assessment-report__cover {
    height: 220px
  }

  .assessment-report__columns {
    margin-top: 20px
  }

  .assessment-report__story {
    padding: 22px
  }

  .assessment-report__tags {
    height: auto;
    flex-wrap: wrap
  }

  .assessment-report__story h3 {
    margin-top: 18px
  }

  .assessment-gallery>div {
    grid-template-columns: 1fr
  }

  .assessment-gallery button {
    height: 220px
  }

  .assessment-report__aside {
    grid-template-columns: 1fr
  }

  .assessment-summary,
  .assessment-files {
    padding: 22px
  }

  .assessment-summary dd {
    max-width: 62%
  }
}

@media(min-width:1501px) {

  /* Align the featured copy with the text column used by the rows below. */
  .knowledge-feature>.knowledge-copy {
    transform: translateX(70px)
  }
}

@media(max-width:1500px) {
  .knowledge-wrap {
    height: auto;
    padding: 70px 0 90px
  }

  .knowledge-section.container {
    height: auto;
    padding: 30px 24px 32px
  }

  .knowledge-section .section-heading {
    height: auto;
    margin-bottom: 25px
  }

  .knowledge-item,
  .knowledge-feature,
  .knowledge-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    height: auto;
    min-height: 175px;
    padding: 24px 18px;
    gap: 20px
  }

  .knowledge-item>.knowledge-category,
  .knowledge-item:first-of-type>.knowledge-category {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
    text-align: left
  }

  .knowledge-item>.knowledge-copy,
  .knowledge-feature>.knowledge-copy,
  .knowledge-row>.knowledge-copy {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0
  }

  .knowledge-item .knowledge-more {
    position: static;
    margin-top: 10px
  }

  .knowledge-section>.knowledge-photo {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100%, 420px) !important;
    height: 315px !important;
    margin: 20px 0 0 auto
  }
}

@media(max-width:700px) {

  .knowledge-item,
  .knowledge-feature,
  .knowledge-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 22px;
    min-height: 0
  }

  .knowledge-item>.knowledge-category,
  .knowledge-item:first-of-type>.knowledge-category {
    grid-column: 1;
    grid-row: 1
  }

  .knowledge-item>.knowledge-copy,
  .knowledge-feature>.knowledge-copy,
  .knowledge-row>.knowledge-copy {
    grid-column: 1;
    grid-row: 2
  }

  .knowledge-section>.knowledge-photo {
    height: 235px !important
  }
}

/* Figma BG - 4 / BG - 5: let the masked reef fade continue behind the
   transparent crest of the next section instead of cutting at a solid color. */
.knowledge-wrap::before {
  inset: 0 auto auto 0;
  width: 100%;
  height: calc(100% + 308px);
  background-position: center top;
  background-size: 100% 100%;
  mask: url("../img/eec2026/figma/forecastPage-4ebe1.svg") center top/100% 100% no-repeat;
}

.alerts-section {
  position: relative;
  z-index: 1;
  background-color: transparent;
  background-image: url("../img/eec2026/figma/alerts-a8382.png"), url("../img/eec2026/figma/alerts-9ab5a.svg");
  background-position: center top, center top;
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
}

@media(min-width:1501px) {
  .knowledge-wrap {
    height: 972px
  }

  .knowledge-wrap::before {
    height: 1280px
  }

  .alerts-section {
    height: 1307px
  }
}

/* Vote & Poll — Figma node 2:687. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.poll {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  height: 313px;
  min-width: 0;
  padding: 20px;
  border: 1px solid #fff;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(222.58deg, rgba(0, 130, 188, .6) 2.87%, rgba(0, 158, 228, .6) 51.94%, rgba(0, 130, 188, .6) 98.88%);
  backdrop-filter: blur(4px)
}

.poll-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px
}

.poll-icon {
  position: relative;
  display: block;
  flex: none;
  width: 44px;
  height: 44px
}

.poll-icon-circle {
  width: 44px;
  height: 44px;
  max-width: none
}

.poll-icon-bars {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 24px;
  height: 24px
}

.poll-icon-bars img {
  display: block;
  flex: none;
  max-width: none
}

.poll-title,
.poll h3 {
  margin: 0;
  font-size: 32px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap
}

.poll-question,
.poll p {
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 20px
}

.poll-options {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0
}

.poll-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 18px;
  line-height: 20px
}

.poll-options input {
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent url("../img/eec2026/figma/alerts-4ab5d.svg") center/16px 16px no-repeat;
  cursor: pointer
}

.poll-options input:checked {
  background-image: url("../img/eec2026/figma/alerts-341b8.svg")
}

.poll-options input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 50%
}

.poll-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: auto
}

.poll-actions button {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 40px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1
}

.poll-actions button[hidden] {
  display: none
}

.poll-actions .poll-submit {
  color: #fff;
  background: #0292d2
}

.poll-actions .poll-show-results {
  color: #156cd2;
  background: #fff
}

.poll-actions button:hover {
  filter: brightness(1.08)
}

.poll-actions button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px
}

.poll-results {
  width: 100%;
  min-height: 116px;
  overflow: auto;
  font-size: 18px
}

.poll-results[hidden],
.poll-options[hidden] {
  display: none !important
}

.poll-results p {
  margin-bottom: 8px;
  font-weight: 700
}

.poll-results div {
  line-height: 1.25
}

.uses-fallback-font .poll .poll-title {
  font-size: 22px
}

.uses-fallback-font .poll .poll-question {
  font-size: 13px;
  line-height: 20px
}

.uses-fallback-font .poll .poll-options label {
  font-size: 13px;
  line-height: 20px
}

.uses-fallback-font .poll .poll-actions button {
  font-size: 14px
}

@media(min-width:1101px) {
  .action-grid {
    grid-template-columns: minmax(0, 1fr) 380px
  }
}

@media(max-width:1100px) {
  .poll {
    width: min(100%, 380px);
    margin-inline: auto
  }
}

/* Situation reports / Surveys — Figma frame 2:6941. */
.surveys-page {
  position: relative;
  min-height: 2068px;
  overflow: hidden;
  padding-top: 20px;
  background-color: #f7fcff;
  background-image: url("../img/eec2026/figma/forecastPage-25388.png"), url("../img/eec2026/figma/forecastPage-36f29.png");
  background-position: center 320px, center 824px;
  background-repeat: no-repeat;
  background-size: 1920px 1080px, 1920px 1280px
}

.surveys-page::before {
  position: absolute;
  z-index: 0;
  top: 380px;
  left: 50%;
  width: min(calc(100% - 48px), var(--container));
  height: 1405px;
  background: url("../img/eec2026/figma/reportsPage-cff23.svg") center/100% 100% no-repeat;
  content: "";
  transform: translateX(-50%);
  pointer-events: none
}

.surveys-hero {
  position: relative;
  z-index: 2;
  height: 300px;
  overflow: hidden;
  border-radius: 30px;
  background: #156cd2 url("../img/eec2026/figma/reportsPage-f4136.png") center/100% 100% no-repeat;
  color: #fff
}

.surveys-hero__copy {
  position: absolute;
  top: 60px;
  left: 60px
}

.surveys-kicker {
  display: flex;
  width: 111px;
  height: 41px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(0, 80, 190, .55);
  font-size: 20px;
  line-height: 1
}

.surveys-hero h1 {
  margin: 6px 0 0;
  font-size: 40px;
  line-height: 48px
}

.surveys-hero p {
  margin: 0;
  font-size: 24px;
  line-height: 29px
}

.surveys-back {
  position: absolute;
  top: 60px;
  right: 60px;
  display: flex;
  width: 184px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 24px;
  transition: transform .18s ease, box-shadow .18s ease
}

.surveys-back:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 40, 110, .2)
}

.surveys-back:focus-visible,
.survey-years button:focus-visible,
.content-pagination button:focus-visible,
.survey-card__content footer a:focus-visible {
  outline: 3px solid #60ceff;
  outline-offset: 3px
}

.surveys-breadcrumb {
  position: absolute;
  right: 59.9px;
  bottom: 8px;
  display: flex;
  width: 206px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 24px
}

.surveys-shell {
  position: relative;
  z-index: 1;
  margin-top: 100px
}

@media(min-width:1051px) {
  .surveys-shell {
    padding-inline: 30px
  }
}

.survey-years {
  display: flex;
  height: 58px;
  align-items: center;
  gap: 16px
}

.survey-years button {
  height: 48px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(21, 108, 210, .05);
  transition: color .18s ease, background-color .18s ease, transform .18s ease
}

.survey-years button:hover {
  transform: translateY(-1px)
}

.survey-years button.is-active {
  height: 58px;
  color: #fff;
  background: #156cd2;
  box-shadow: none
}

.survey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 31px 40px;
  margin-top: 40px
}

.survey-card {
  display: grid;
  width: 100%;
  height: 381px;
  grid-template-columns: 350px minmax(0, 1fr);
  gap: 40px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 12px 32px rgba(33, 105, 169, .08);
  backdrop-filter: blur(8px)
}

.survey-card[hidden] {
  display: none
}

.survey-card__image {
  width: 350px;
  height: 321px;
  border-radius: 16px;
  object-fit: cover
}

.survey-card__content {
  display: flex;
  min-width: 0;
  height: 321px;
  flex-direction: column
}

.survey-card__content h2 {
  margin: 0;
  color: #0d1d2d;
  font-size: 32px;
  line-height: 38px
}

.survey-card__content p {
  margin: 8px 0 0;
  color: #4b5563;
  font-size: 24px;
  line-height: 29px
}

.survey-card__content time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 17px;
  color: #9ca3af;
  font-size: 20px;
  line-height: 24px
}

.survey-card__content time img {
  width: 16px;
  height: 16px
}

.survey-card__content footer {
  display: flex;
  height: 108px;
  align-items: center;
  justify-content: flex-end;
  margin: 0 -30px -30px;
  margin-top: auto;
  padding: 0 30px;
  border-radius: 0 0 24px;
  background: rgba(255, 255, 255, .62)
}

.survey-card__content footer a {
  display: flex;
  width: 160px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  background: #156cd2;
  font-size: 24px;
  transition: background-color .18s ease, transform .18s ease
}

.survey-card__content footer a:hover {
  background: #0b50eb;
  transform: translateY(-1px)
}

.survey-empty {
  margin-top: 40px;
  padding: 70px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .75);
  color: #4b5563;
  text-align: center
}

.content-pagination {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: space-between;
  margin-top: 85px;
  padding: 0 40px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  background: rgba(255, 255, 255, .62);
  font-size: 20px;
  backdrop-filter: blur(8px)
}

.content-pagination p {
  margin: 0;
  color: #4b5563;
  font-size: 20px
}

.content-pagination>div {
  display: flex;
  align-items: center;
  gap: 8px
}

.content-pagination button {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #4b5563;
  background: transparent;
  cursor: pointer;
  font-size: 20px
}

.content-pagination button:hover,
.content-pagination button.is-active {
  color: #fff;
  background: #156cd2
}

.content-pagination button.is-active {
  font-weight: 700
}

.content-pagination .content-pagination__arrow {
  background: #fff;
  box-shadow: 0 2px 8px rgba(21, 108, 210, .08)
}

.content-pagination .content-pagination__arrow:hover {
  background: #eef7ff
}

.content-pagination .content-pagination__arrow img {
  width: 20px;
  height: 20px
}

.content-pagination span {
  width: 24px;
  text-align: center;
  color: #9ca3af
}

.assessment-pagination {
  margin-top: 56px
}

.uses-fallback-font .surveys-kicker,
.uses-fallback-font .content-pagination p,
.uses-fallback-font .content-pagination button {
  font-size: 14px
}

.uses-fallback-font .surveys-hero h1 {
  font-size: 29px
}

.uses-fallback-font .surveys-hero p,
.uses-fallback-font .surveys-back,
.uses-fallback-font .surveys-breadcrumb,
.uses-fallback-font .survey-years button,
.uses-fallback-font .survey-card__content p,
.uses-fallback-font .survey-card__content footer a {
  font-size: 17px
}

.uses-fallback-font .survey-card__content h2 {
  font-size: 23px
}

.uses-fallback-font .survey-card__content time {
  font-size: 14px
}

@media(max-width:1500px) {
  .surveys-page {
    min-height: 0;
    padding-bottom: 110px;
    background-size: auto 1080px, auto 1280px
  }

  .surveys-page::before {
    width: min(calc(100% - 48px), var(--container))
  }

  .surveys-hero {
    width: min(calc(100% - 48px), var(--container))
  }

  .survey-card {
    grid-template-columns: 42% minmax(0, 1fr);
    gap: 24px
  }

  .survey-card__image {
    width: 100%
  }

  .survey-card__content footer {
    margin-right: -30px
  }

  .survey-pagination {
    margin-top: 60px
  }
}

@media(max-width:1050px) {
  .surveys-hero__copy {
    right: 40px;
    left: 40px
  }

  .surveys-hero p {
    max-width: 62%
  }

  .surveys-back {
    top: 32px;
    right: 32px
  }

  .surveys-breadcrumb {
    right: 32px
  }

  .survey-grid {
    grid-template-columns: 1fr
  }

  .survey-card {
    max-width: 800px;
    margin-inline: auto
  }

  .survey-years {
    height: auto;
    flex-wrap: wrap
  }

  .surveys-shell {
    margin-top: 70px
  }

  .surveys-page::before {
    display: none
  }
}

@media(max-width:700px) {
  .surveys-page {
    padding-top: 14px
  }

  .surveys-hero {
    height: 330px;
    border-radius: 20px;
    background-position: 62% center;
    background-size: auto 100%
  }

  .surveys-hero::before {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(21, 108, 210, .96) 0, rgba(21, 108, 210, .75) 60%, rgba(21, 108, 210, .3));
    content: ""
  }

  .surveys-hero__copy {
    top: 34px;
    right: 24px;
    left: 24px
  }

  .surveys-hero p {
    max-width: 100%
  }

  .surveys-back {
    top: auto;
    right: auto;
    bottom: 24px;
    left: 24px
  }

  .surveys-breadcrumb {
    right: 24px;
    bottom: 20px;
    width: 145px;
    height: 48px
  }

  .surveys-shell {
    margin-top: 45px
  }

  .survey-years {
    gap: 10px
  }

  .survey-years button,
  .survey-years button.is-active {
    height: 44px;
    padding: 0 18px
  }

  .survey-grid {
    gap: 22px;
    margin-top: 30px
  }

  .survey-card {
    height: auto;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px
  }

  .survey-card__image {
    height: 280px
  }

  .survey-card__content {
    height: 255px
  }

  .survey-card__content footer {
    height: 82px;
    margin: 0 -20px -20px;
    margin-top: auto;
    padding: 0 20px
  }

  .content-pagination {
    height: auto;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
    margin-top: 40px
  }

  .content-pagination>div {
    width: 100%;
    justify-content: center;
    gap: 2px
  }

  .content-pagination button {
    width: 34px;
    height: 34px
  }
}

/* Shared Forecast / Surveys hero treatment. */
.analytics-hero,
.surveys-hero {
  height: 300px;
  border-radius: 30px;
  background-color: #156cd2;
  color: #fff
}

.analytics-hero::after,
.surveys-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgba(11, 80, 235, .94) 0%, rgba(21, 108, 210, .78) 52%, rgba(21, 108, 210, .2) 100%);
  content: "";
  pointer-events: none
}

.analytics-hero__copy,
.surveys-hero__copy {
  z-index: 2;
  top: 60px;
  left: 60px
}

.analytics-hero__copy small,
.surveys-kicker {
  display: flex;
  width: max-content;
  min-width: 111px;
  height: 41px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(0, 80, 190, .55);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0
}

.analytics-hero__copy h1,
.surveys-hero h1 {
  margin: 6px 0 0;
  font-size: 40px;
  line-height: 48px
}

.analytics-hero__copy p,
.surveys-hero p {
  margin: 0;
  font-size: 24px;
  line-height: 29px
}

.analytics-hero>a,
.surveys-back {
  z-index: 3;
  top: 60px;
  right: 60px;
  display: flex;
  width: 184px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 24px;
  line-height: 1
}

.analytics-hero>span,
.surveys-breadcrumb {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: flex;
  width: 460px;
  height: 88px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 60px 0 170px;
  overflow: hidden;
  border-radius: 0;
  color: #156cd2;
  background: #fff;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap
}

.analytics-hero>span::before,
.surveys-breadcrumb::before {
  position: absolute;
  right: 60px;
  width: 230px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(21, 108, 210, .08);
  content: ""
}

.analytics-hero>span>*,
.surveys-breadcrumb>* {
  position: relative;
  z-index: 1
}

.analytics-hero>span>span,
.surveys-breadcrumb>span {
  color: #156cd2;
  font-size: 20px
}

.analytics-hero>span>i,
.surveys-breadcrumb>i {
  color: #cbd5e1;
  font-style: normal
}

.analytics-hero>span>b,
.surveys-breadcrumb>b {
  color: #0d1d2d;
  font-weight: 400
}

.uses-fallback-font .analytics-hero__copy small,
.uses-fallback-font .surveys-kicker {
  font-size: 14px
}

.uses-fallback-font .analytics-hero__copy h1,
.uses-fallback-font .surveys-hero h1 {
  font-size: 29px
}

.uses-fallback-font .analytics-hero__copy p,
.uses-fallback-font .surveys-hero p,
.uses-fallback-font .analytics-hero>a,
.uses-fallback-font .surveys-back,
.uses-fallback-font .analytics-hero>span,
.uses-fallback-font .surveys-breadcrumb {
  font-size: 17px
}

@media(max-width:1050px) {

  .analytics-hero__copy,
  .surveys-hero__copy {
    right: 40px;
    left: 40px
  }

  .analytics-hero>a,
  .surveys-back {
    top: 32px;
    right: 32px
  }

  .analytics-hero__copy p,
  .surveys-hero p {
    max-width: 62%
  }
}

@media(max-width:700px) {

  .analytics-hero,
  .surveys-hero {
    height: 330px;
    border-radius: 20px
  }

  .analytics-hero__copy,
  .surveys-hero__copy {
    top: 34px;
    right: 24px;
    left: 24px
  }

  .analytics-hero__copy h1,
  .surveys-hero h1 {
    font-size: 32px;
    line-height: 38px
  }

  .analytics-hero__copy p,
  .surveys-hero p {
    max-width: 100%;
    font-size: 18px;
    line-height: 23px
  }

  .analytics-hero>a,
  .surveys-back {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 18px;
    width: 140px;
    height: 44px;
    font-size: 16px
  }

  .analytics-hero>span,
  .surveys-breadcrumb {
    right: 0;
    bottom: 0;
    width: 210px;
    height: 72px;
    padding: 0 16px 0 64px;
    font-size: 16px
  }

  .analytics-hero>span::before,
  .surveys-breadcrumb::before {
    right: 16px;
    width: 145px;
    height: 44px
  }

  .uses-fallback-font .analytics-hero__copy h1,
  .uses-fallback-font .surveys-hero h1 {
    font-size: 27px
  }

  .uses-fallback-font .analytics-hero__copy p,
  .uses-fallback-font .surveys-hero p {
    font-size: 15px
  }

  .uses-fallback-font .analytics-hero>a,
  .uses-fallback-font .surveys-back,
  .uses-fallback-font .analytics-hero>span,
  .uses-fallback-font .surveys-breadcrumb {
    font-size: 13px
  }
}

/* Keep the assessment screens on the same typography and hero system as Forecast. */
.assessment-hero {
  height: 300px;
  border-radius: 30px
}

.assessment-hero__content {
  top: 60px;
  left: 60px
}

.assessment-hero__content>span {
  width: max-content;
  min-width: 111px;
  height: 41px;
  justify-content: center;
  padding: 0 16px;
  color: #68d1ff;
  background: rgba(0, 80, 190, .55);
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0
}

.assessment-hero h1 {
  margin: 6px 0 0;
  color: #fff;
  font-size: 40px;
  line-height: 48px
}

.assessment-hero p {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 29px
}

.assessment-hero__home {
  top: 60px;
  right: 60px;
  width: 184px;
  height: 48px;
  padding: 0;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 24px;
  line-height: 1
}

.assessment-crumb {
  right: 0;
  bottom: 0;
  width: 460px;
  height: 88px;
  justify-content: center;
  gap: 20px;
  padding: 0 60px 0 170px;
  overflow: hidden;
  border-radius: 0;
  color: #0d1d2d;
  background: #fff;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: none
}

.assessment-crumb::before {
  position: absolute;
  right: 60px;
  width: 230px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(21, 108, 210, .08);
  content: ""
}

.assessment-crumb>* {
  position: relative;
  z-index: 1
}

.assessment-crumb>span {
  color: #156cd2;
  font-size: 20px
}

.assessment-crumb i {
  color: #cbd5e1
}

.assessment-crumb b {
  color: #0d1d2d;
  font-weight: 400
}

.uses-fallback-font .assessment-hero__content>span {
  font-size: 14px
}

.uses-fallback-font .assessment-hero h1 {
  font-size: 29px;
  line-height: 38px
}

.uses-fallback-font .assessment-hero p,
.uses-fallback-font .assessment-hero__home,
.uses-fallback-font .assessment-crumb {
  font-size: 17px
}

.uses-fallback-font .assessment-place,
.uses-fallback-font .assessment-status {
  font-size: 14px
}

.uses-fallback-font .assessment-card h2 {
  font-size: 23px
}

.uses-fallback-font .assessment-card p,
.uses-fallback-font .assessment-card footer a,
.uses-fallback-font .assessment-card time {
  font-size: 17px
}

.uses-fallback-font .assessment-tags span,
.uses-fallback-font .assessment-report__tags span {
  font-size: 13px
}

.uses-fallback-font .assessment-pagination {
  font-size: 14px
}

.uses-fallback-font .assessment-detail-tools span,
.uses-fallback-font .assessment-detail-tools a {
  font-size: 17px
}

.uses-fallback-font .assessment-report>h2 {
  font-size: 34px
}

.uses-fallback-font .assessment-report__story h3 {
  font-size: 23px
}

.uses-fallback-font .assessment-report__story>p {
  font-size: 14px;
  line-height: 1.5
}

.uses-fallback-font .assessment-report__story h4,
.uses-fallback-font .assessment-summary h3,
.uses-fallback-font .assessment-files h3 {
  font-size: 17px
}

.uses-fallback-font .assessment-summary dl>div {
  font-size: 14px
}

.uses-fallback-font .assessment-files a>span {
  font-size: 14px
}

.uses-fallback-font .assessment-files small {
  font-size: 12px
}

@media(max-width:1050px) {
  .assessment-hero__content {
    right: 40px;
    left: 40px
  }

  .assessment-hero__home {
    top: 32px;
    right: 32px
  }

  .assessment-hero p {
    max-width: 62%
  }
}

@media(max-width:700px) {
  .assessment-hero {
    height: 330px;
    border-radius: 20px
  }

  .assessment-hero__content {
    top: 34px;
    right: 24px;
    left: 24px
  }

  .assessment-hero__content>span {
    height: 41px;
    margin-top: 0
  }

  .assessment-hero h1 {
    margin-top: 6px;
    font-size: 32px;
    line-height: 38px
  }

  .assessment-hero p {
    max-width: 100%;
    margin-top: 0;
    font-size: 18px;
    line-height: 23px
  }

  .assessment-hero__home {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 18px;
    width: 140px;
    height: 44px;
    padding: 0;
    font-size: 16px
  }

  .assessment-crumb {
    right: 0;
    bottom: 0;
    width: 210px;
    height: 72px;
    padding: 0 16px 0 64px;
    font-size: 16px
  }

  .assessment-crumb::before {
    right: 16px;
    width: 145px;
    height: 44px
  }

  .uses-fallback-font .assessment-hero h1 {
    font-size: 27px
  }

  .uses-fallback-font .assessment-hero p {
    font-size: 15px
  }

  .uses-fallback-font .assessment-hero__home,
  .uses-fallback-font .assessment-crumb {
    font-size: 13px
  }
}

/* Shared page spacing: keep the listing and analytics screens visually balanced. */
.assessment-page--listing {
  min-height: 0;
  padding-bottom: 80px
}

.assessment-page--detail {
  min-height: 0;
  padding-bottom: 80px
}

.assessment-grid {
  margin-top: 48px
}

.assessment-pagination {
  margin-top: 48px
}

.assessment-detail-tools {
  margin-top: 48px
}

.assessment-report {
  margin-top: -32px
}

.analytics-page {
  padding-bottom: 80px
}

.analytics-board {
  margin-top: 48px;
  padding: 48px
}

.analytics-status-panel {
  margin-top: 20px;
  padding: 28px
}

.analytics-data-grid {
  gap: 32px;
  margin-top: 32px
}

.density-panel {
  margin-top: 32px
}

@media(max-width:1100px) {

  .assessment-page--listing,
  .assessment-page--detail {
    padding-bottom: 80px
  }

  .assessment-report {
    margin-top: -24px
  }

  .analytics-board {
    padding: 36px
  }
}

@media(max-width:700px) {

  .assessment-page--listing,
  .assessment-page--detail {
    padding-bottom: 56px
  }

  .assessment-grid {
    margin-top: 64px
  }

  .assessment-pagination {
    margin-top: 40px
  }

  .assessment-detail-tools {
    margin-top: 56px
  }

  .assessment-report {
    margin-top: 20px
  }

  .analytics-page {
    padding-bottom: 56px
  }

  .analytics-board {
    margin-top: 24px;
    padding: 18px
  }

  .analytics-status-panel {
    margin-top: 18px;
    padding: 18px
  }

  .analytics-data-grid {
    gap: 24px;
    margin-top: 24px
  }

  .density-panel {
    margin-top: 24px
  }
}

/* Knowledge library — Figma frames 2:7597 and 2:8022. */
.library-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 110px;
  background: #f8fcfc;
  color: #0d1d2d
}

.library-page::before,
.library-page::after {
  position: absolute;
  z-index: -2;
  right: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1920px auto;
  content: "";
  pointer-events: none
}

.library-page::before {
  top: 320px;
  height: 1080px;
  background-image: url("../img/eec2026/figma/forecastPage-25388.png");
  opacity: .9
}

.library-page::after {
  bottom: 0px;
  height: 1280px;
  background-image: url("../img/eec2026/figma/forecastPage-36f29.png");
  opacity: .78
}

.library-page--listing {
  min-height: 3210px
}

.library-page--detail {
  min-height: 2220px
}

.library-hero {
  position: relative;
  height: 300px;
  overflow: visible;
  border-radius: 30px;
  color: #fff;
  background: #156cd2 url("../img/eec2026/figma/knowledgePage-53c24.png") center/cover no-repeat
}

.library-hero::after {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(11, 80, 235, .97) 0%, rgba(21, 108, 210, .78) 52%, rgba(21, 108, 210, .15) 77%, rgba(21, 108, 210, .88) 100%);
  content: ""
}

.library-hero__copy {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 60px
}

.library-hero__copy>span {
  display: flex;
  width: max-content;
  min-width: 111px;
  height: 41px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #68d1ff;
  background: rgba(0, 80, 190, .55);
  font-size: 20px;
  text-transform: uppercase
}

.library-hero h1 {
  margin: 6px 0 0;
  font-size: 40px;
  line-height: 48px
}

.library-hero p {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 29px
}

.library-hero__home {
  position: absolute;
  z-index: 3;
  top: 60px;
  right: 60px;
  display: flex;
  width: 184px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 24px;
  transition: transform .18s ease, box-shadow .18s ease
}

.library-hero__home:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 40, 110, .2)
}

.library-crumb {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: flex;
  width: 460px;
  height: 88px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 60px 0 170px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  background: #fff;
  color: #0d1d2d;
  font-size: 24px;
  white-space: nowrap
}

.library-crumb::before {
  position: absolute;
  right: 60px;
  width: 230px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(21, 108, 210, .08);
  content: ""
}

.library-crumb>* {
  position: relative;
  z-index: 1
}

.library-crumb>span {
  color: #156cd2;
  font-size: 20px
}

.library-crumb i {
  color: #cbd5e1;
  font-style: normal
}

.library-crumb b {
  font-weight: 400
}

.library-shell {
  position: relative;
  width: min(calc(100% - 48px), 1760px);
  margin-top: 40px;
  padding: 60px 60px 124px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 32px;
  background: rgba(255, 255, 255, .62);
  box-shadow: 0 10px 35px rgba(21, 108, 210, .06);
  backdrop-filter: blur(8px)
}

.library-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 41px
}

.library-categories {
  display: flex;
  height: 58px;
  align-items: center;
  gap: 16px
}

.library-categories a {
  display: inline-flex;
  height: 58px;
  padding: 0 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 217, 217, .4);
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  cursor: pointer;
  font-size: 24px;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease
}

.library-categories a:hover {
  transform: translateY(-1px)
}

.library-categories a.is-active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(90deg, #0292d2, #0b50eb)
}

.library-search {
  display: flex;
  width: 479px;
  height: 58px;
  align-items: center;
  padding: 0 20px;
  border: 1px solid #e7eefe;
  border-radius: 16px;
  background: rgba(255, 255, 255, .3);
  color: #9ca3af
}

.library-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: #0d1d2d;
  background: transparent;
  font-size: 20px
}

.library-search b {
  font-size: 24px;
  font-weight: 400
}

.library-feature-list {
  position: relative
}

.library-feature-row {
  position: relative;
  display: grid;
  height: 204px;
  grid-template-columns: 238px minmax(0, 800px) 1fr;
  align-items: center;
  border-bottom: 2px solid #e7eefe
}

.library-feature-row__category {
  color: #156cd2;
  font-size: 28px;
  text-align: center
}

.library-feature-row__copy h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.16
}

.library-feature-row__copy p {
  margin: 6px 0 0;
  color: #4b5563;
  font-size: 24px;
  line-height: 1.2
}

.library-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  color: #9ca3af;
  font-size: 20px
}

.library-feature-row>a {
  align-self: end;
  justify-self: end;
  margin-bottom: 34px;
  color: #156cd2;
  font-size: 24px
}

.library-feature-row.is-featured {
  margin-inline: -1px;
  border: 0;
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(90deg, rgba(11, 80, 235, .96), rgba(21, 108, 210, .88)), url("../img/eec2026/figma/knowledge-793b4.png") center/cover;
  box-shadow: 0 8px 24px rgba(0, 56, 181, .3)
}

.library-feature-row.is-featured .library-feature-row__category,
.library-feature-row.is-featured p,
.library-feature-row.is-featured .library-meta,
.library-feature-row.is-featured>a {
  color: #fff
}

.library-feature-row.is-featured h2 {
  color: #f59e0b
}

.library-feature-row.is-featured .library-meta {
  opacity: .55
}

.library-feature-row__image {
  position: absolute;
  right: 30px;
  width: 420px;
  height: 315px;
  border: 3px solid #fff;
  border-radius: 24px;
  object-fit: cover;
  box-shadow: 24px 24px 40px rgba(32, 86, 160, .16)
}

.library-feature-row.is-featured .library-feature-row__copy {
  padding-right: 20px
}

.library-feature-row.is-featured>a {
  margin-right: 470px
}

.library-empty {
  padding: 50px;
  color: #4b5563;
  text-align: center
}

.library-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 40px;
  margin-top: 119px
}

.library-card {
  height: 590px;
  overflow: hidden;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .05);
  transition: transform .18s ease, box-shadow .18s ease
}

.library-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(21, 108, 210, .13)
}

.library-card>img {
  width: 100%;
  height: 321px;
  object-fit: cover
}

.library-card__body {
  position: relative;
  height: 269px;
  padding: 24px 30px
}

.library-card__body>span {
  color: #156cd2;
  font-size: 18px
}

.library-card h2 {
  margin: 6px 0 4px;
  font-size: 28px;
  line-height: 1.15
}

.library-card p {
  height: 52px;
  margin: 0;
  color: #4b5563;
  font-size: 20px;
  line-height: 1.25;
  overflow: hidden
}

.library-card .library-meta {
  font-size: 18px
}

.library-card a {
  position: absolute;
  right: 30px;
  bottom: 22px;
  color: #156cd2;
  font-size: 21px
}

.library-card[hidden],
.library-feature-row[hidden] {
  display: none
}

.library-pagination {
  margin-top: 56px;
  border-radius: 16px
}

.library-pagination .pagination-block {
  padding: 18px 24px;
  border: 1px solid rgba(21, 108, 210, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .82)
}

.library-pagination .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.library-pagination .pagination-label {
  color: #526477;
  font-size: 16px
}

.library-pagination .pagination-label .color {
  color: #156cd2;
  font-weight: 700
}

.library-pagination .pagination ul {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 8px;
  list-style: none
}

.library-pagination .pagination a {
  display: inline-flex;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(21, 108, 210, .18);
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  text-decoration: none
}

.library-pagination .pagination li.active a,
.library-pagination .pagination a:hover {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(90deg, #0292d2, #0b50eb)
}

.library-conservation {
  position: relative;
  height: 313px;
  margin-top: 64px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff
}

.library-conservation>img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.library-conservation>div {
  position: absolute;
  top: 105px;
  left: 36%;
  display: grid;
  line-height: .9
}

.library-conservation small {
  font-size: 38px
}

.library-conservation strong {
  font-size: 48px
}

.library-conservation>a {
  position: absolute;
  top: 121px;
  right: 11%;
  display: flex;
  width: 240px;
  height: 72px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 28px
}

.library-detail-frame {
  position: relative;
  margin-top: 60px;
  padding: 100px 60px 60px;
  background: url("../img/eec2026/figma/knowledgePage-75045.svg") center/100% 100% no-repeat
}

.library-detail-tools {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 16px
}

.library-detail-tools span,
.library-detail-tools a {
  display: flex;
  height: 48px;
  align-items: center;
  padding: 0 24px;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 20px
}

.library-detail-tools a {
  padding-inline: 32px;
  color: #fff;
  background: #156cd2
}

.library-article>h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 40px;
  color: #0c48c1;
  font-size: 64px;
  line-height: 1
}

.library-article>h2 i {
  width: 10px;
  height: 64px;
  border-radius: 5px;
  background: linear-gradient(#c5edff, #60ceff)
}

.library-article__cover {
  width: 100%;
  height: 645px;
  border-radius: 24px;
  object-fit: cover
}

.library-article__columns {
  display: grid;
  height: 410px;
  grid-template-columns: minmax(0, 1.47fr) minmax(360px, 1fr);
  gap: 40px;
  margin-top: 40px
}

.library-article__story,
.library-related {
  overflow: hidden;
  padding: 30px;
  border-radius: 24px;
  background: #fff
}

.library-article__story h3,
.library-related>h3 {
  margin: 0 0 8px;
  font-size: 32px
}

.library-article__story h3:not(:first-child) {
  margin-top: 18px
}

.library-article__story p {
  margin: 0 0 10px;
  color: #4b5563;
  font-size: 20px;
  line-height: 1.38
}

.library-related>h3 {
  color: #156cd2
}

.library-related>a {
  display: grid;
  gap: 6px;
  padding: 16px;
  margin-top: 16px;
  border-radius: 16px;
  background: #f8fcfc
}

.library-related b {
  font-size: 24px
}

.library-related span {
  color: #4b5563;
  font-size: 20px;
  line-height: 1.25
}

.library-page--detail .library-conservation {
  margin-top: 60px
}

.uses-fallback-font .library-hero__copy>span,
.uses-fallback-font .library-categories a,
.uses-fallback-font .library-meta,
.uses-fallback-font .library-detail-tools span,
.uses-fallback-font .library-detail-tools a {
  font-size: 14px
}

.uses-fallback-font .library-hero h1 {
  font-size: 29px
}

.uses-fallback-font .library-hero p,
.uses-fallback-font .library-hero__home,
.uses-fallback-font .library-crumb,
.uses-fallback-font .library-feature-row__copy p {
  font-size: 17px
}

.uses-fallback-font .library-feature-row h2,
.uses-fallback-font .library-card h2 {
  font-size: 23px
}

.uses-fallback-font .library-article>h2 {
  font-size: 46px
}

.uses-fallback-font .library-article__story h3,
.uses-fallback-font .library-related>h3 {
  font-size: 23px
}

.uses-fallback-font .library-article__story p,
.uses-fallback-font .library-related span {
  font-size: 14px;
  line-height: 1.5
}

.uses-fallback-font .library-related b {
  font-size: 17px
}

@media(max-width:1500px) {

  .library-page--listing,
  .library-page--detail {
    min-height: 0
  }

  .library-feature-row {
    grid-template-columns: 170px minmax(0, 1fr)
  }

  .library-feature-row__image {
    right: 22px;
    width: 330px;
    height: 250px
  }

  .library-feature-row.is-featured .library-feature-row__copy {
    padding-right: 360px
  }

  .library-feature-row.is-featured>a {
    margin-right: 350px
  }

  .library-card-grid {
    gap: 24px
  }

  .library-card {
    height: 560px
  }

  .library-card>img {
    height: 285px
  }

  .library-card__body {
    height: 275px
  }

  .library-conservation>div {
    left: 32%
  }
}

@media(max-width:1050px) {
  .library-hero__copy {
    right: 40px;
    left: 40px
  }

  .library-hero__home {
    top: 32px;
    right: 32px
  }

  .library-hero p {
    max-width: 62%
  }

  .library-shell {
    padding: 40px 30px 60px
  }

  .library-controls {
    align-items: flex-start;
    flex-direction: column
  }

  .library-categories {
    flex-wrap: wrap
  }

  .library-search {
    width: 100%
  }

  .library-feature-row,
  .library-feature-row.is-featured {
    height: auto;
    min-height: 190px;
    grid-template-columns: 140px minmax(0, 1fr);
    padding: 24px
  }

  .library-feature-row__image {
    display: none
  }

  .library-feature-row.is-featured .library-feature-row__copy {
    padding-right: 0
  }

  .library-feature-row>a,
  .library-feature-row.is-featured>a {
    grid-column: 2;
    align-self: auto;
    justify-self: start;
    margin: 10px 0 0
  }

  .library-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 60px
  }

  .library-conservation {
    height: 250px
  }

  .library-conservation>div {
    left: 24%
  }

  .library-conservation small {
    font-size: 28px
  }

  .library-conservation strong {
    font-size: 36px
  }

  .library-conservation>a {
    top: 96px;
    right: 5%;
    width: 190px;
    height: 58px;
    font-size: 22px
  }

  .library-detail-frame {
    padding: 90px 34px 40px
  }

  .library-article>h2 {
    font-size: 46px
  }

  .library-article__cover {
    height: 430px
  }

  .library-article__columns {
    grid-template-columns: 1fr
  }
}

@media(max-width:1050px) {
  .library-categories {
    height: auto
  }
}

@media(max-width:1050px) {
  .library-article__columns {
    height: auto
  }

  .library-article__story,
  .library-related {
    overflow: visible
  }
}

@media(max-width:700px) {
  .library-page {
    padding-top: 14px
  }

  .library-hero {
    height: 390px;
    border-radius: 20px;
    background-position: 62% center
  }

  .library-hero__copy {
    top: 34px;
    right: 24px;
    left: 24px
  }

  .library-hero h1 {
    font-size: 32px;
    line-height: 38px
  }

  .library-hero p {
    max-width: 100%;
    font-size: 18px;
    line-height: 23px
  }

  .library-hero p br {
    display: none
  }

  .library-hero__home {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 18px;
    width: 140px;
    height: 44px;
    font-size: 16px
  }

  .library-crumb {
    right: 0;
    bottom: 0;
    width: 210px;
    height: 72px;
    padding: 0 16px 0 64px;
    font-size: 16px
  }

  .library-crumb::before {
    right: 16px;
    width: 145px;
    height: 44px
  }

  .library-shell {
    margin-top: 42px;
    padding: 20px
  }

  .library-categories {
    gap: 8px
  }

  .library-categories a {
    height: 42px;
    padding: 0 16px;
    font-size: 17px
  }

  .library-feature-row,
  .library-feature-row.is-featured {
    grid-template-columns: 1fr;
    padding: 22px
  }

  .library-feature-row__category {
    text-align: left
  }

  .library-feature-row>a,
  .library-feature-row.is-featured>a {
    grid-column: 1
  }

  .library-card-grid {
    grid-template-columns: 1fr;
    margin-top: 32px
  }

  .library-card {
    height: auto
  }

  .library-card__body {
    height: 280px
  }

  .library-card>img {
    height: 260px
  }

  .library-conservation {
    height: 210px;
    margin-top: 40px
  }

  .library-conservation>div {
    top: 30px;
    right: 18px;
    left: 18px;
    text-align: center
  }

  .library-conservation small {
    font-size: 24px
  }

  .library-conservation strong {
    font-size: 30px
  }

  .library-conservation>a {
    top: auto;
    right: 50%;
    bottom: 22px;
    width: 180px;
    height: 48px;
    font-size: 19px;
    transform: translateX(50%)
  }

  .library-detail-frame {
    margin-top: 70px;
    padding: 82px 18px 24px
  }

  .library-detail-tools {
    right: 0;
    left: 0;
    overflow: auto
  }

  .library-detail-tools span,
  .library-detail-tools a {
    height: 42px;
    padding: 0 14px;
    font-size: 15px;
    white-space: nowrap
  }

  .library-article>h2 {
    align-items: flex-start;
    font-size: 34px
  }

  .library-article>h2 i {
    height: 46px
  }

  .library-article__cover {
    height: 230px
  }

  .library-article__columns {
    gap: 20px;
    margin-top: 20px
  }

  .library-article__story,
  .library-related {
    padding: 22px
  }

  .library-article__story h3,
  .library-related>h3 {
    font-size: 27px
  }

  .library-article__story p,
  .library-related span {
    font-size: 17px
  }
}

@media(min-width:1501px) {
  .library-controls {
    width: calc(100% + 2px);
    transform: translate(-1px, -1px)
  }

  .library-feature-row__image {
    top: 50px;
    right: 40px
  }
}

/* Knowledge list interaction and aligned actions. */
.library-feature-row {
  transition: background-color .22s ease, box-shadow .22s ease, color .22s ease
}

.library-feature-row:hover,
.library-feature-row.is-active {
  margin-inline: -1px;
  border: 0;
  border-radius: 32px;
  color: #fff;
  background: linear-gradient(90deg, rgba(11, 80, 235, .96), rgba(21, 108, 210, .88)), url("../img/eec2026/figma/knowledge-793b4.png") center/cover;
  box-shadow: 0 8px 24px rgba(0, 56, 181, .3)
}

.library-feature-row:hover .library-feature-row__category,
.library-feature-row:hover p,
.library-feature-row:hover .library-meta,
.library-feature-row:hover>a,
.library-feature-row.is-active .library-feature-row__category,
.library-feature-row.is-active p,
.library-feature-row.is-active .library-meta,
.library-feature-row.is-active>a {
  color: #fff
}

.library-feature-row:hover h2,
.library-feature-row.is-active h2 {
  color: #f59e0b
}

.library-feature-row:hover .library-meta,
.library-feature-row.is-active .library-meta {
  opacity: .55
}

.library-feature-row>a {
  position: relative;
  z-index: 4;
  margin-right: 470px
}

.library-feature-row__image {
  pointer-events: none
}

.library-feature-list>.library-feature-row__image {
  top: 50px;
  right: 40px
}

/* The first row is only the initial layout; active styling follows the hovered row. */
.library-feature-row.is-featured:not(.is-active) {
  margin-inline: 0;
  border: 0;
  border-bottom: 2px solid #e7eefe;
  border-radius: 0;
  color: var(--navy);
  background: transparent;
  box-shadow: none
}

.library-feature-row.is-featured:not(.is-active) .library-feature-row__category {
  color: #156cd2
}

.library-feature-row.is-featured:not(.is-active) h2 {
  color: var(--navy)
}

.library-feature-row.is-featured:not(.is-active) p {
  color: #4b5563
}

.library-feature-row.is-featured:not(.is-active) .library-meta {
  color: #9ca3af;
  opacity: 1
}

.library-feature-row.is-featured:not(.is-active)>a {
  color: #156cd2
}

/* Coral bleaching reports — Figma frames 2:8205, 2:8676 and 2:8561. */
.bleaching-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 0 110px;
  background: #f8fcfc;
  color: #0d1d2d
}

.bleaching-page::before,
.bleaching-page::after {
  position: absolute;
  z-index: -2;
  right: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 1920px auto;
  content: "";
  pointer-events: none
}

.bleaching-page::before {
  top: 320px;
  height: 1080px;
  background-image: url("../img/eec2026/figma/report-bleaching-raw-02.png");
  opacity: .9
}

.bleaching-page::after {
  top: 1180px;
  height: calc(100% - 1180px);
  background-image: url("../img/eec2026/figma/report-bleaching-raw-12.png");
  background-size: 1920px auto;
  background-repeat: repeat-y;
  opacity: .88
}

.bleaching-page--list {}

.bleaching-page--create {}

.bleaching-page--detail {
  min-height: 2080px
}

.bleaching-hero {
  position: relative;
  height: 300px;
  overflow: visible;
  border-radius: 30px;
  color: #fff;
  background: #156cd2
}

.bleaching-hero::before {
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background: linear-gradient(90deg, rgba(11, 80, 235, .98), rgba(21, 108, 210, .82) 51%, rgba(21, 108, 210, .12) 77%, rgba(21, 108, 210, .9)), url("../img/eec2026/figma/report-bleaching-raw-03.jpg") center 59%/cover;
  content: ""
}

.bleaching-hero__copy {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 60px
}

.bleaching-hero__copy>span {
  display: flex;
  width: max-content;
  height: 41px;
  align-items: center;
  padding: 0 18px;
  border-radius: 999px;
  color: #68d1ff;
  background: rgba(0, 46, 151, .3);
  font-size: 20px
}

.bleaching-hero h1 {
  margin: 6px 0 0;
  font-size: 40px;
  line-height: 48px
}

.bleaching-hero p {
  margin: 0;
  font-size: 24px;
  line-height: 29px
}

.bleaching-hero__home {
  position: absolute;
  z-index: 3;
  top: 60px;
  right: 60px;
  display: flex;
  width: 184px;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 24px;
  transition: transform .18s ease, box-shadow .18s ease
}

.bleaching-hero__home:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 40, 110, .2)
}

.bleaching-crumb {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: flex;
  width: 490px;
  height: 88px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 60px 0 180px;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  background: #fff;
  color: #0d1d2d;
  font-size: 24px;
  white-space: nowrap
}

.bleaching-crumb::before {
  position: absolute;
  right: 60px;
  width: 260px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(21, 108, 210, .08);
  content: ""
}

.bleaching-crumb>* {
  position: relative;
  z-index: 1
}

.bleaching-crumb>span {
  color: #156cd2
}

.bleaching-crumb i {
  color: #cbd5e1;
  font-style: normal
}

.bleaching-crumb b {
  font-weight: 400
}

.bleaching-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 40px
}

.bleaching-stats article {
  display: flex;
  height: 190px;
  align-items: flex-start;
  gap: 20px;
  padding: 30px;
  border: 1px solid #e3effd;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 18px rgba(11, 80, 235, .08)
}

.bleaching-stats i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 12px;
  color: #156cd2;
  background: #eef7ff;
  font-style: normal
}

.bleaching-stats span {
  display: grid;
  font-size: 24px
}

.bleaching-stats strong {
  margin-top: 18px;
  color: #156cd2;
  font-size: 36px
}

.bleaching-stats article:nth-child(2) i,
.bleaching-stats article:nth-child(2) strong {
  color: #ff765e
}

.bleaching-stats article:nth-child(3) i,
.bleaching-stats article:nth-child(3) strong {
  color: #10b981
}

.bleaching-stats article:nth-child(4) i,
.bleaching-stats article:nth-child(4) strong {
  color: #f2b400
}

.bleaching-list-shell {
  margin-top: 40px;
  padding: 40px 60px 76px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 32px;
  background: rgba(255, 255, 255, .7);
  box-shadow: 0 10px 35px rgba(21, 108, 210, .06);
  backdrop-filter: blur(8px)
}

.bleaching-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.bleaching-list-heading h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #0c48c1;
  font-size: 48px;
  line-height: 1
}

.bleaching-list-heading h2 i,
.bleaching-form-title h2 i {
  width: 9px;
  height: 64px;
  border-radius: 6px;
  background: linear-gradient(#c5edff, #60ceff)
}

.bleaching-list-heading p {
  margin: 8px 0 0;
  color: #4b5563;
  font-size: 20px
}

.bleaching-list-heading>a {
  display: flex;
  height: 48px;
  align-items: center;
  padding: 0 28px;
  border-radius: 999px;
  color: #fff;
  background: #156cd2;
  font-size: 22px
}

.bleaching-filters {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  gap: 16px;
  margin-top: 36px
}

.bleaching-filters label,
.bleaching-report-form>label,
.bleaching-form-grid>label {
  display: grid;
  gap: 8px;
  font-size: 18px
}

.bleaching-filters input,
.bleaching-filters select,
.bleaching-report-form input:not([type=radio]):not([type=checkbox]):not([type=file]),
.bleaching-report-form select,
.bleaching-report-form textarea {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid #e7eefe;
  border-radius: 12px;
  outline: 0;
  background: #fff;
  color: #4b5563
}

.bleaching-report-form textarea {
  height: auto;
  padding-block: 12px;
  resize: vertical
}

.bleaching-filters input:focus,
.bleaching-filters select:focus,
.bleaching-report-form input:focus,
.bleaching-report-form select:focus,
.bleaching-report-form textarea:focus {
  border-color: #60ceff;
  box-shadow: 0 0 0 3px rgba(96, 206, 255, .2)
}

.bleaching-filters button {
  grid-column: 5;
  justify-self: end;
  width: 154px;
  height: 48px;
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #156cd2;
  cursor: pointer;
  font-size: 22px
}

.bleaching-results {
  margin-top: 28px
}

.bleaching-results__count {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 700
}

.bleaching-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px
}

.bleaching-card {
  height: 320px;
  overflow: hidden;
  padding: 30px 30px 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(21, 108, 210, .06)
}

.bleaching-card__badges {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.bleaching-card__badges span,
.bleaching-card__badges b,
.bleaching-detail-badges span {
  display: flex;
  height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 400
}

.bleaching-card__badges span i,
.bleaching-detail-badges i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor
}

.bleaching-card__badges .is-watch {
  color: #d59200;
  background: #fff7df
}

.bleaching-card__badges .is-severe,
.bleaching-detail-badges .is-severe {
  color: #ef4444;
  background: #fff0f0
}

.bleaching-card__badges .is-normal {
  color: #10b981;
  background: #eafff7
}

.bleaching-card__badges .is-received {
  color: #156cd2;
  background: #f2f7ff
}

.bleaching-card__badges .is-checking,
.bleaching-detail-badges .is-checking {
  color: #e5a900;
  background: #fffbef
}

.bleaching-card__badges .is-done {
  color: #10b981;
  background: #effdf7
}

.bleaching-card h3 {
  margin: 20px 0 8px;
  color: #156cd2;
  font-size: 28px
}

.bleaching-card p {
  height: 54px;
  margin: 0;
  color: #4b5563;
  font-size: 18px;
  line-height: 1.35
}

.bleaching-card small {
  color: #9ca3af;
  font-size: 16px
}

.bleaching-card footer {
  display: flex;
  height: 68px;
  align-items: center;
  justify-content: space-between;
  margin: 24px -30px 0;
  padding: 0 30px;
  border-top: 1px solid #f3f4f6
}

.bleaching-card footer>a:first-child {
  color: #156cd2;
  font-size: 16px;
  font-weight: 700
}

.bleaching-card__detail {
  display: flex;
  height: 40px;
  align-items: center;
  padding: 0 24px;
  border-radius: 999px;
  color: #fff;
  background: #156cd2
}

.bleaching-empty {
  padding: 70px;
  text-align: center
}

.bleaching-pagination {
  display: flex;
  height: 66px;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  padding: 0 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .66);
  font-size: 16px
}

.bleaching-pagination nav {
  display: flex;
  align-items: center;
  gap: 8px
}

.bleaching-pagination button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer
}

.bleaching-pagination button.is-active {
  color: #fff;
  background: #156cd2
}

.bleaching-pagination i {
  font-style: normal
}

.bleaching-form-shell {
  margin-top: 40px;
  padding: 60px;
  border: 1px solid rgba(96, 206, 255, .8);
  border-radius: 32px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 10px 35px rgba(21, 108, 210, .06);
  backdrop-filter: blur(5px)
}

.bleaching-form-title h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  color: #0c48c1;
  font-size: 38px;
  line-height: 1.25
}

.bleaching-guide {
  width: 100%;
  height: auto;
  margin: 38px 0 40px;
  border-radius: 22px
}

.bleaching-scale {
  padding: 0 30px 16px;
  margin: 0 0 40px;
  border: 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(21, 108, 210, .08)
}

.bleaching-scale legend {
  display: flex;
  width: calc(100% + 60px);
  height: 64px;
  align-items: center;
  padding: 0 30px;
  margin-left: -30px;
  border-radius: 24px 24px 0 0;
  color: #fff;
  background: #156cd2;
  font-size: 24px
}

.bleaching-scale__head,
.bleaching-scale__row {
  display: grid;
  grid-template-columns: 120px 360px 1fr;
  gap: 24px;
  align-items: center;
  min-height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid #e5edf4
}

.bleaching-scale__head {
  color: #156cd2;
  font-weight: 700
}

.bleaching-scale__row {
  cursor: pointer
}

.bleaching-scale__row:last-child {
  border: 0
}

.bleaching-scale__row>b {
  justify-self: start;
  min-width: 42px;
  padding: 5px 10px;
  border-radius: 6px;
  background: #eef5f7;
  text-align: center
}

.bleaching-scale__row .level-1 {
  color: #10b981;
  background: #ddfaee
}

.bleaching-scale__row .level-2,
.bleaching-scale__row .level-3 {
  color: #f59e0b;
  background: #fff4d4
}

.bleaching-scale__row .level-4 {
  color: #ef4444;
  background: #ffe3e3
}

.bleaching-scale__row span:last-child {
  display: flex;
  align-items: center;
  gap: 8px
}

.bleaching-report-form {
  padding: 40px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(21, 108, 210, .08)
}

.bleaching-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 24px
}

.bleaching-form-grid--two {
  margin-top: 28px
}

.bleaching-form-grid--four {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 30px
}

.bleaching-form-grid .is-wide {
  grid-column: 1/-1
}

.bleaching-form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.bleaching-form-fields .is-wide {
  grid-column: 1/-1
}

.bleaching-report-form label>em {
  color: #ef4444;
  font-size: 14px;
  font-style: normal
}

.bleaching-map {
  position: relative;
  height: 360px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px
}

.bleaching-map img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.bleaching-map figcaption {
  position: absolute;
  top: 80px;
  left: 50%;
  padding: 10px 18px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .2)
}

.inline-choice {
  display: flex !important;
  align-items: center;
  gap: 16px
}

.inline-choice input,
.bleaching-consent input {
  width: auto !important;
  height: auto !important
}

.bleaching-survey-method {
  display: grid;
  gap: 10px;
  padding: 24px;
  margin: 30px 0;
  border: 1px solid #e7eefe;
  border-radius: 16px
}

.bleaching-survey-method legend {
  padding: 0 8px;
  font-weight: 700
}

.bleaching-report-form>label {
  margin-top: 24px
}

.bleaching-report-form input[type=file] {
  width: max-content;
  margin-top: 5px
}

.bleaching-report-form label>small {
  color: #64748b
}

.bleaching-consent {
  display: flex !important;
  grid-template-columns: auto 1fr;
  align-items: center !important;
  gap: 8px !important
}

.bleaching-consent a {
  color: #156cd2
}

.bleaching-captcha {
  width: 305px;
  height: 82px;
  margin-top: 26px
}

.bleaching-form-message {
  min-height: 24px;
  color: #ef4444;
  text-align: center
}

.bleaching-form-message.is-success {
  color: #10b981
}

.bleaching-form-actions {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 24px
}

.bleaching-form-actions button,
.bleaching-form-actions a {
  display: flex;
  width: 160px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid #10b981;
  border-radius: 999px;
  color: #10b981;
  background: #fff;
  cursor: pointer
}

.bleaching-form-actions a {
  border-color: #ef4444;
  color: #ef4444
}

.bleaching-detail-shell {
  position: relative;
  margin-top: 60px;
  padding: 100px 60px 60px;
  border: 1px solid rgba(96, 206, 255, .5);
  border-radius: 32px;
  background: rgba(255, 255, 255, .52);
  backdrop-filter: blur(4px)
}

.bleaching-detail-tools {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 16px
}

.bleaching-detail-tools span,
.bleaching-detail-tools a {
  display: flex;
  height: 48px;
  align-items: center;
  padding: 0 24px;
  border-radius: 999px;
  color: #156cd2;
  background: #fff;
  font-size: 20px
}

.bleaching-detail-tools a {
  padding-inline: 32px;
  color: #fff;
  background: #156cd2
}

.bleaching-detail-grid {
  display: grid;
  grid-template-columns: 880px 600px;
  gap: 40px
}

.bleaching-detail-cover {
  width: 100%;
  height: 360px;
  border-radius: 24px;
  object-fit: cover
}

.bleaching-detail-story,
.bleaching-detail-aside section {
  margin-top: 34px;
  padding: 30px;
  border-radius: 24px;
  background: #fff
}

.bleaching-detail-badges {
  display: flex;
  gap: 12px
}

.bleaching-detail-badges span {
  color: #64748b;
  background: #f3f4f6
}

.bleaching-detail-story h2 {
  margin: 24px 0 0;
  color: #156cd2;
  font-size: 32px
}

.bleaching-detail-story>p {
  margin: 5px 0;
  color: #4b5563
}

.bleaching-detail-story h3 {
  margin: 24px 0 5px;
  font-size: 24px
}

.bleaching-gallery {
  padding-top: 18px;
  margin-top: 20px;
  border-top: 1px solid #f3f4f6
}

.bleaching-gallery h3 {
  margin: 0 0 10px
}

.bleaching-gallery>div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.bleaching-gallery button {
  height: 190px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  cursor: zoom-in
}

.bleaching-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .2s
}

.bleaching-gallery button:hover img {
  transform: scale(1.04)
}

.bleaching-detail-aside {
  display: grid;
  align-content: start;
  gap: 40px
}

.bleaching-detail-aside section {
  margin: 0
}

.bleaching-detail-aside h2 {
  margin: 0;
  font-size: 24px
}

.bleaching-detail-aside dl {
  margin: 16px 0 0
}

.bleaching-detail-aside dl>div {
  display: flex;
  min-height: 57px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f3f4f6
}

.bleaching-detail-aside dl>div:last-child {
  margin: 0;
  border: 0
}

.bleaching-detail-aside dt {
  color: #64748b
}

.bleaching-detail-aside dd {
  max-width: 65%;
  margin: 0;
  font-weight: 700;
  text-align: right
}

.bleaching-detail-aside .is-danger {
  color: #ef4444
}

.bleaching-detail-aside .is-warning {
  color: #e5a900
}

.bleaching-lightbox {
  max-width: min(1000px, 90vw);
  padding: 12px;
  border: 0;
  border-radius: 20px;
  background: #fff
}

.bleaching-lightbox::backdrop {
  background: rgba(4, 25, 50, .8)
}

.bleaching-lightbox img {
  max-height: 82vh;
  border-radius: 12px
}

.bleaching-lightbox button {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, .65);
  cursor: pointer;
  font-size: 28px
}

.bleaching-page,
.bleaching-page button,
.bleaching-page input,
.bleaching-page select,
.bleaching-page textarea {
  font-family: "DB Helvethaica X", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif
}

.uses-fallback-font .bleaching-hero__copy>span,
.uses-fallback-font .bleaching-card__badges span,
.uses-fallback-font .bleaching-card__badges b,
.uses-fallback-font .bleaching-detail-badges span,
.uses-fallback-font .bleaching-detail-tools span,
.uses-fallback-font .bleaching-detail-tools a {
  font-size: 14px
}

.uses-fallback-font .bleaching-hero h1 {
  font-size: 29px
}

.uses-fallback-font .bleaching-hero p,
.uses-fallback-font .bleaching-hero__home,
.uses-fallback-font .bleaching-crumb {
  font-size: 17px
}

.uses-fallback-font .bleaching-stats span,
.uses-fallback-font .bleaching-list-heading>a,
.uses-fallback-font .bleaching-filters button,
.uses-fallback-font .bleaching-scale legend {
  font-size: 16px
}

.uses-fallback-font .bleaching-stats strong {
  font-size: 45px
}

.uses-fallback-font .bleaching-list-heading h2 {
  font-size: 34px
}

.uses-fallback-font .bleaching-list-heading p,
.uses-fallback-font .bleaching-filters label,
.uses-fallback-font .bleaching-results__count,
.uses-fallback-font .bleaching-card p,
.uses-fallback-font .bleaching-report-form,
.uses-fallback-font .bleaching-scale,
.uses-fallback-font .bleaching-detail-story>p,
.uses-fallback-font .bleaching-detail-aside {
  font-size: 14px;
  line-height: 1.5
}

.uses-fallback-font .bleaching-card h3,
.uses-fallback-font .bleaching-detail-story h2 {
  font-size: 23px
}

.uses-fallback-font .bleaching-card small,
.uses-fallback-font .bleaching-card footer,
.uses-fallback-font .bleaching-pagination {
  font-size: 13px
}

.uses-fallback-font .bleaching-form-title h2 {
  font-size: 27px
}

.uses-fallback-font .bleaching-detail-story h3,
.uses-fallback-font .bleaching-detail-aside h2 {
  font-size: 17px
}

@media(max-width:1500px) {
  .bleaching-detail-grid {
    grid-template-columns: minmax(0, 1.47fr) minmax(360px, 1fr)
  }

  .bleaching-stats,
  .bleaching-card-grid {
    gap: 24px
  }

  .bleaching-list-heading h2 {
    font-size: 40px
  }

  .uses-fallback-font .bleaching-list-heading h2 {
    font-size: 34px
  }

  .bleaching-form-grid--four {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:1100px) {

  .bleaching-page--list,
  .bleaching-page--create,
  .bleaching-page--detail {
    min-height: 0
  }

  .bleaching-hero {
    height: 330px
  }

  .bleaching-hero__copy {
    right: 32px;
    left: 32px
  }

  .bleaching-hero__home {
    top: 24px;
    right: 24px
  }

  .bleaching-stats {
    grid-template-columns: repeat(2, 1fr)
  }

  .bleaching-list-shell,
  .bleaching-form-shell,
  .bleaching-detail-shell {
    padding-inline: 34px
  }

  .bleaching-filters {
    grid-template-columns: repeat(2, 1fr)
  }

  .bleaching-filters button {
    grid-column: auto
  }

  .bleaching-detail-grid {
    grid-template-columns: 1fr
  }

  .bleaching-detail-aside {
    grid-template-columns: 1fr 1fr
  }

  .bleaching-scale__head,
  .bleaching-scale__row {
    grid-template-columns: 80px 240px 1fr
  }

  .bleaching-form-grid {
    grid-template-columns: 1fr
  }

  .bleaching-form-fields {
    order: 2
  }

  .bleaching-map {
    order: 1
  }

  .bleaching-guide {
    margin-top: 28px
  }
}

@media(max-width:700px) {
  .bleaching-page {
    padding-top: 12px
  }

  .bleaching-page::before,
  .bleaching-page::after {
    opacity: .4
  }

  .bleaching-hero {
    height: 390px;
    border-radius: 18px
  }

  .bleaching-hero__copy {
    top: 80px;
    right: 20px;
    left: 20px
  }

  .bleaching-hero__copy>span {
    height: 34px;
    font-size: 16px
  }

  .bleaching-hero h1 {
    font-size: 34px
  }

  .bleaching-hero p {
    font-size: 17px;
    line-height: 1.45
  }

  .bleaching-hero p br {
    display: none
  }

  .bleaching-hero__home {
    top: 18px;
    right: 18px;
    width: auto;
    height: 40px;
    padding: 0 18px;
    font-size: 18px
  }

  .bleaching-crumb {
    right: 0;
    bottom: -48px;
    width: auto;
    height: 48px;
    padding: 0 20px;
    clip-path: none;
    border-radius: 999px;
    font-size: 16px
  }

  .bleaching-crumb::before {
    display: none
  }

  .bleaching-stats {
    grid-template-columns: 1fr;
    margin-top: 76px
  }

  .bleaching-stats article {
    height: auto
  }

  .bleaching-list-shell {
    margin-top: 24px;
    padding: 24px 18px
  }

  .bleaching-list-heading {
    display: grid;
    gap: 18px
  }

  .bleaching-list-heading h2 {
    font-size: 31px
  }

  .bleaching-list-heading h2 i {
    height: 48px
  }

  .bleaching-list-heading p {
    font-size: 17px
  }

  .bleaching-list-heading>a {
    width: max-content;
    font-size: 18px
  }

  .bleaching-filters,
  .bleaching-card-grid {
    grid-template-columns: 1fr
  }

  .bleaching-filters button {
    grid-column: 1;
    width: 100%
  }

  .bleaching-card {
    height: auto
  }

  .bleaching-card p {
    height: auto
  }

  .bleaching-pagination {
    height: auto;
    flex-direction: column;
    gap: 18px;
    padding-block: 18px
  }

  .bleaching-form-shell {
    margin-top: 76px;
    padding: 25px 16px
  }

  .bleaching-form-title h2 {
    font-size: 29px
  }

  .bleaching-form-title h2 i {
    flex: 0 0 8px;
    height: 70px
  }

  .bleaching-guide {
    border-radius: 10px
  }

  .bleaching-scale {
    padding-inline: 12px;
    overflow: auto
  }

  .bleaching-scale legend {
    width: calc(100% + 24px);
    margin-left: -12px;
    padding-inline: 15px
  }

  .bleaching-scale__head,
  .bleaching-scale__row {
    width: 760px;
    grid-template-columns: 70px 220px 1fr;
    padding-inline: 8px
  }

  .bleaching-report-form {
    padding: 22px 16px
  }

  .bleaching-form-fields,
  .bleaching-form-grid--four {
    grid-template-columns: 1fr
  }

  .bleaching-map {
    height: 230px
  }

  .bleaching-captcha {
    max-width: 100%;
    height: auto
  }

  .bleaching-detail-shell {
    margin-top: 75px;
    padding: 65px 18px 24px
  }

  .bleaching-detail-tools {
    left: 0;
    flex-wrap: wrap
  }

  .bleaching-detail-tools span,
  .bleaching-detail-tools a {
    height: 40px;
    padding-inline: 14px;
    font-size: 15px
  }

  .bleaching-detail-cover {
    height: 220px
  }

  .bleaching-detail-story {
    padding: 22px
  }

  .bleaching-detail-badges {
    flex-wrap: wrap
  }

  .bleaching-gallery>div {
    grid-template-columns: 1fr
  }

  .bleaching-detail-aside {
    grid-template-columns: 1fr
  }

  .bleaching-detail-aside section {
    padding: 22px
  }
}

@media(max-width:700px) {
  .uses-fallback-font .bleaching-hero__copy>span {
    font-size: 14px
  }

  .uses-fallback-font .bleaching-hero h1 {
    font-size: 32px;
    line-height: 38px
  }

  .uses-fallback-font .bleaching-hero p {
    font-size: 18px;
    line-height: 23px
  }

  .uses-fallback-font .bleaching-hero__home,
  .uses-fallback-font .bleaching-crumb {
    font-size: 16px
  }

  .uses-fallback-font .bleaching-list-heading h2 {
    font-size: 31px
  }

  .uses-fallback-font .bleaching-list-heading p {
    font-size: 17px
  }

  .uses-fallback-font .bleaching-list-heading>a {
    font-size: 16px
  }

  .uses-fallback-font .bleaching-form-title h2 {
    font-size: 27px
  }

  .uses-fallback-font .bleaching-detail-story h2 {
    font-size: 23px
  }

  .uses-fallback-font .bleaching-detail-story h3,
  .uses-fallback-font .bleaching-detail-aside h2 {
    font-size: 17px
  }
}

/* About and contact */
.about-shell {
  position: relative;
  overflow: hidden;
  background: #f8fcfc;
  color: #0d1d2d
}

.about-shell:before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 520px 0 0;
  background: url("../img/eec2026/figma/about-36f29.png") center top/cover no-repeat;
  opacity: .72;
  pointer-events: none
}

.about-shell>.container,
.about-content {
  position: relative;
  z-index: 1
}

.about-hero {
  height: 300px;
  margin-top: 40px;
  padding: 62px 72px;
  color: #fff;
  background: url("../img/eec2026/figma/about-9b20d.png") center/100% 100% no-repeat
}

.about-hero__copy small {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 16px;
  color: #60ceff;
  background: rgba(13, 86, 171, .46);
  font-size: 14px
}

.about-hero__copy h1 {
  margin: 6px 0 0;
  font-size: 48px;
  line-height: 1
}

.about-hero__copy p {
  margin: 10px 0 0;
  font-size: 20px;
  line-height: 1.3
}

.about-hero__actions {
  position: absolute;
  top: 42px;
  right: 70px;
  display: flex;
  gap: 14px
}

.about-hero__actions a {
  min-width: 158px;
  padding: 10px 22px;
  border-radius: 24px;
  color: #156cd2;
  background: #fff;
  text-align: center;
  font-size: 17px
}

.about-hero__actions .is-primary {
  color: #fff;
  background: #0b4eaf
}

.about-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: 330px;
  margin-top: 34px;
  margin-bottom: 38px;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 14px 40px rgba(7, 73, 145, .08)
}

.about-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 35px 22px;
  text-align: center;
  color: #4b5563
}

.about-tab:not(:last-child):after {
  content: "";
  position: absolute;
  right: 0;
  top: 17%;
  height: 66%;
  width: 1px;
  background: #e5eef5
}

.about-tab img {
  width: 100px;
  height: 100px
}

.about-tab strong {
  font-size: 26px;
  line-height: 1.22
}

.about-tab span {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #156cd2;
  background: #fff;
  box-shadow: 0 4px 15px rgba(21, 108, 210, .12)
}

.about-tab.is-active {
  color: #fff;
  background: #1977dc url("../img/eec2026/figma/about-ccf73.png") center/cover
}

.about-tab.is-active:after {
  display: none
}

.about-content {
  padding: 0 0 110px
}

.about-panel>h2 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 42px;
  color: #0b50c7;
  font-size: 44px;
  line-height: 1.1
}

.about-panel>h2 img {
  width: 60px;
  height: 60px
}

.importance-intro {
  display: grid;
  grid-template-columns: .8fr 1.3fr;
  align-items: center;
  gap: 80px;
  margin-bottom: 46px
}

.importance-intro h3 {
  margin: 0 0 15px;
  color: #0b50c7;
  font-size: 30px;
  line-height: 1.22
}

.importance-intro p {
  font-size: 20px
}

.importance-intro>img {
  width: 100%;
  border-radius: 30px;
  box-shadow: 0 16px 35px rgba(10, 87, 161, .13)
}

.reef-stat-card {
  display: grid;
  grid-template-columns: 40% 60%;
  padding: 38px;
  border-radius: 35px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 18px 44px rgba(10, 87, 161, .08)
}

.reef-stat-image {
  position: relative;
  overflow: hidden;
  border-radius: 28px
}

.reef-stat-image>img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.reef-stat-image strong {
  position: absolute;
  right: 28px;
  top: 50%;
  max-width: 250px;
  transform: translateY(-50%);
  color: #fff;
  text-align: right;
  font-size: 26px;
  line-height: 1.18;
  text-shadow: 0 2px 8px rgba(0, 40, 80, .5)
}

.reef-stat-image b {
  font-size: 38px
}

.reef-table-wrap {
  padding: 30px 0 30px 40px
}

.reef-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 17px
}

.reef-table-wrap th,
.reef-table-wrap td {
  padding: 10px 18px;
  border-bottom: 1px solid #e6eef5;
  text-align: left
}

.reef-table-wrap thead {
  color: #fff;
  background: #156cd2
}

.reef-table-wrap tfoot th {
  color: #0b50c7
}

.importance-quote {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  align-items: center;
  margin-top: 40px;
  padding: 48px 55px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .7)
}

.importance-quote p {
  color: #0c48c1;
  font-size: 28px;
  line-height: 1.35
}

.importance-quote img {
  width: 100%;
  max-height: 360px;
  object-fit: contain
}

.threat-card {
  display: grid;
  grid-template-columns: 45% 55%;
  padding: 32px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .82)
}

.threat-globe {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: 28px
}

.threat-globe>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center
}

.threat-legend {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 20px;
  padding: 14px 18px;
  border-radius: 14px;
  background: #fff;
  font-size: 15px
}

.threat-legend b,
.threat-legend span {
  display: block
}

.threat-copy {
  align-self: center;
  margin-left: -15px;
  padding: 40px 55px;
  border-radius: 25px;
  color: #fff;
  background: #246fd1
}

.threat-copy h3 {
  margin: 12px 0 0;
  font-size: 29px
}

.threat-copy p {
  margin: 2px 0 20px;
  font-size: 20px
}

.rli-section {
  margin: 70px calc((100vw - min(calc(100vw - 48px), var(--container)))/-2) -110px;
  padding: 55px max(24px, calc((100vw - var(--container))/2)) 100px;
  color: #fff;
  background: #063f8d url("../img/eec2026/figma/about-793b4.png") center/cover
}

.rli-section>img {
  width: min(1180px, 100%);
  max-height: 560px;
  margin: auto;
  border-radius: 38px;
  object-fit: cover
}

.rli-section>div {
  display: grid;
  grid-template-columns: 34% 1fr;
  gap: 55px;
  width: min(1180px, 100%);
  margin: 28px auto 0
}

.rli-section h3 {
  font-size: 29px
}

.rli-section p {
  font-size: 18px
}

.about-shell .about-bleaching-hero {
  position: relative;
  min-height: 570px;
  overflow: hidden;
  border-radius: 32px
}

.about-shell .about-bleaching-hero>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.about-shell .about-bleaching-hero>div {
  position: absolute;
  right: 7%;
  top: 20%;
  width: 45%;
  color: #fff
}

.about-shell .about-bleaching-hero h3 {
  font-size: 30px
}

.about-shell .about-bleaching-hero p {
  font-size: 19px
}

.about-shell .about-bleaching-levels {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 28px 0
}

.about-shell .about-bleaching-levels div {
  display: flex;
  align-items: center;
  gap: 14px
}

.about-shell .about-bleaching-levels img {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover
}

.about-shell .about-bleaching-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px
}

.about-shell .about-bleaching-gallery article {
  position: relative;
  overflow: hidden;
  border-radius: 28px
}

.about-shell .about-bleaching-gallery img {
  width: 100%;
  height: 330px;
  object-fit: cover
}

.about-shell .about-bleaching-gallery b {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 7px 18px;
  border-radius: 18px;
  color: #fff;
  background: rgba(9, 92, 167, .8);
  white-space: nowrap
}

.about-shell .about-bleaching-map {
  text-align: center;
  margin-top: 58px
}

.about-shell .about-bleaching-map h3 {
  color: #0879cf;
  font-size: 24px
}

.about-shell .about-bleaching-map img {
  width: min(1120px, 100%);
  max-height: 480px;
  margin: auto;
  border-radius: 24px;
  object-fit: cover
}

.about-shell .about-bleaching-research {
  display: grid;
  grid-template-columns: 42% 1fr;
  align-items: center;
  gap: 45px;
  margin-top: 50px;
  padding: 35px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .78)
}

.about-shell .about-bleaching-research img {
  width: 100%;
  border-radius: 20px
}

.about-shell .about-bleaching-research h3 {
  color: #0d1d2d;
  font-size: 27px
}

.objective-copy {
  display: grid;
  grid-template-columns: 1fr .55fr 1fr;
  align-items: center;
  gap: 38px
}

.objective-copy p {
  padding: 35px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .82);
  font-size: 20px
}

.objective-copy img {
  width: 100%;
  height: 430px;
  object-fit: contain
}

.objective-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 55px;
  padding: 35px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .84)
}

.objective-gallery img {
  width: 100%;
  height: 390px;
  border-radius: 18px;
  object-fit: cover
}

.about-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px
}

.about-dots>* {
  width: 10px;
  height: 10px;
  border: 1px solid #156cd2;
  border-radius: 50%
}

.about-dots b {
  width: 48px;
  border-radius: 10px;
  background: #156cd2
}

.contact-page:before {
  top: 480px
}

.contact-hero {
  background-image: url("../img/eec2026/figma/about-44856.png")
}

.contact-content {
  padding: 50px 0 110px
}

.contact-content>h1 {
  margin: 0 0 45px 55px;
  color: #0b50c7;
  font-size: 44px;
  line-height: 1.35
}

.contact-panel {
  display: grid;
  grid-template-columns: 46% 54%;
  gap: 38px;
  padding: 55px;
  border-radius: 38px;
  background: #116bcf url("../img/eec2026/figma/about-d7ba7.png") center/cover;
  box-shadow: 0 20px 45px rgba(10, 87, 161, .12)
}

.contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px
}

.contact-card {
  min-height: 195px;
  padding: 28px;
  border-radius: 24px;
  background: #fff
}

.contact-card--wide {
  grid-column: 1/-1;
  min-height: 205px
}

.contact-card span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border-radius: 12px;
  color: #fff;
  background: #156cd2;
  font-size: 28px
}

.contact-card p {
  margin: 0;
  font-size: 18px
}

.contact-map {
  width: 100%;
  height: 100%;
  min-height: 590px;
  border-radius: 28px;
  object-fit: cover
}

.site-footer {
  position: relative;
  z-index: 2
}

@media (max-width:1100px) {
  .about-hero {
    height: 245px;
    padding: 45px 40px;
    background-size: auto 100%
  }

  .about-hero__actions {
    right: 36px
  }

  .about-tabs {
    min-height: 250px
  }

  .about-tab {
    padding: 24px 12px
  }

  .about-tab img {
    width: 70px;
    height: 70px
  }

  .about-tab strong {
    font-size: 21px
  }

  .importance-intro {
    gap: 32px
  }

  .reef-stat-card {
    grid-template-columns: 1fr
  }

  .reef-table-wrap {
    padding: 30px 0 0
  }

  .threat-card {
    grid-template-columns: 1fr
  }

  .threat-copy {
    margin: 24px 0 0
  }

  .objective-copy {
    grid-template-columns: 1fr
  }

  .objective-copy img {
    height: 300px
  }

  .contact-panel {
    grid-template-columns: 1fr
  }

  .contact-map {
    min-height: 440px
  }
}

@media (max-width:720px) {
  .about-hero {
    margin-top: 18px;
    padding: 30px 24px;
    height: 240px;
    background-position: 61% center
  }

  .about-hero__copy h1 {
    font-size: 38px
  }

  .about-hero__copy p {
    font-size: 16px;
    max-width: 60%
  }

  .about-hero__actions {
    top: auto;
    right: 20px;
    bottom: 20px
  }

  .about-hero__actions a {
    min-width: 0;
    padding: 8px 12px;
    font-size: 14px
  }

  .about-tabs {
    grid-template-columns: 1fr 1fr;
    border-radius: 24px
  }

  .about-tab {
    min-height: 210px
  }

  .about-tab:nth-child(2):after {
    display: none
  }

  .about-panel>h2 {
    font-size: 30px
  }

  .about-panel>h2 img {
    width: 46px;
    height: 46px
  }

  .importance-intro,
  .importance-quote,
  .about-shell .about-bleaching-research {
    grid-template-columns: 1fr
  }

  .reef-stat-card {
    padding: 18px
  }

  .reef-stat-image {
    min-height: 330px
  }

  .reef-table-wrap {
    overflow: auto
  }

  .reef-table-wrap table {
    min-width: 650px
  }

  .importance-quote {
    padding: 28px
  }

  .threat-globe {
    min-height: 330px
  }

  .threat-copy {
    padding: 28px
  }

  .rli-section>div {
    grid-template-columns: 1fr
  }

  .about-shell .about-bleaching-hero {
    min-height: 700px
  }

  .about-shell .about-bleaching-hero>div {
    top: auto;
    right: 24px;
    bottom: 24px;
    left: 24px;
    width: auto;
    padding: 18px;
    border-radius: 18px;
    background: rgba(0, 70, 120, .75)
  }

  .about-shell .about-bleaching-levels {
    gap: 14px
  }

  .about-shell .about-bleaching-levels img {
    width: 46px;
    height: 46px
  }

  .about-shell .about-bleaching-gallery,
  .objective-gallery {
    grid-template-columns: 1fr
  }

  .objective-gallery img {
    height: auto
  }

  .contact-content>h1 {
    margin-left: 0;
    font-size: 32px
  }

  .contact-panel {
    padding: 20px
  }

  .contact-cards {
    grid-template-columns: 1fr
  }

  .contact-card--wide {
    grid-column: auto
  }

  .contact-map {
    min-height: 310px
  }
}

/* Keep the About hero consistent with the solid, rounded heroes used on other pages. */
.about-panel[hidden] {
  display: none !important
}

.about-panel.is-entering {
  animation: about-panel-enter .42s cubic-bezier(.22, 1, .36, 1)
}

@keyframes about-panel-enter {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

@media (prefers-reduced-motion:reduce) {
  .about-panel.is-entering {
    animation: none
  }
}

.about-hero {
  overflow: hidden;
  border-radius: 30px;
  background-color: #156cd2
}

.about-crumb {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  display: flex;
  width: 460px;
  height: 88px;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 60px 0 170px;
  color: #0d1d2d;
  background: #fff;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap
}

.about-crumb::before {
  position: absolute;
  right: 60px;
  width: 230px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(21, 108, 210, .08);
  content: ""
}

.about-crumb>* {
  position: relative;
  z-index: 1
}

.about-crumb>span {
  color: #156cd2;
  font-size: 20px
}

.about-crumb>i {
  color: #cbd5e1;
  font-style: normal
}

.about-crumb>b {
  font-weight: 400
}

@media(max-width:700px) {
  .about-hero {
    border-radius: 20px
  }
}

@media(max-width:1100px) {
  .about-crumb {
    width: 360px;
    height: 72px;
    padding: 0 35px 0 110px;
    font-size: 20px
  }

  .about-crumb::before {
    right: 28px;
    width: 215px;
    height: 44px
  }
}

@media(max-width:720px) {
  .about-crumb {
    display: none
  }
}

/* Align the About hero with the shared inner-page hero proportions. */
.about-hero {
  margin-top: 20px;
  padding: 0
}

.about-hero__copy {
  position: absolute;
  z-index: 2;
  top: 60px;
  left: 60px
}

.about-hero__copy small {
  display: flex;
  width: max-content;
  min-width: 111px;
  height: 41px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #68d1ff;
  background: rgba(0, 80, 190, .55);
  font-size: 20px;
  line-height: 1
}

.about-hero__copy h1 {
  margin: 6px 0 0;
  font-size: 40px;
  line-height: 48px
}

.about-hero__copy p {
  margin: 0;
  font-size: 24px;
  line-height: 29px
}

.about-hero__actions {
  top: 60px;
  right: 60px
}

.about-hero__actions a {
  display: flex;
  width: 184px;
  height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1
}

.uses-fallback-font .about-hero__copy small {
  font-size: 14px
}

.uses-fallback-font .about-hero__copy h1 {
  font-size: 29px;
  line-height: 38px
}

.uses-fallback-font .about-hero__copy p,
.uses-fallback-font .about-hero__actions a,
.uses-fallback-font .about-crumb {
  font-size: 17px
}

@media(max-width:1100px) {
  .about-hero {
    height: 300px
  }

  .about-hero__copy {
    top: 45px;
    right: 40px;
    left: 40px
  }

  .about-hero__actions {
    top: 32px;
    right: 32px
  }
}

@media(max-width:720px) {
  .about-hero {
    height: 330px;
    margin-top: 14px
  }

  .about-hero__copy {
    top: 34px;
    right: 24px;
    left: 24px
  }

  .about-hero__copy h1 {
    font-size: 32px;
    line-height: 38px
  }

  .about-hero__copy p {
    max-width: 100%;
    font-size: 18px;
    line-height: 23px
  }

  .about-hero__actions {
    top: auto;
    right: auto;
    bottom: 20px;
    left: 18px
  }

  .about-hero__actions a {
    width: 140px;
    height: 44px;
    padding: 0 10px;
    font-size: 16px
  }

  .about-hero__actions .is-primary {
    width: 170px
  }

  .uses-fallback-font .about-hero__copy h1 {
    font-size: 27px
  }

  .uses-fallback-font .about-hero__copy p {
    font-size: 15px
  }

  .uses-fallback-font .about-hero__actions a {
    font-size: 13px
  }
}

/* Member access */
.member-page {
  position: relative;
  min-height: 1415px;
  padding: 40px 0 96px;
  background: #f8fcfc url("../img/eec2026/figma/forecastPage-36f29.png") center bottom/cover no-repeat;
  overflow: hidden
}

.member-page--register {
  min-height: 1779px;
  background-image: url("../img/eec2026/figma/forecastPage-25388.png")
}

.member-hero {
  position: relative;
  height: 300px;
  border-radius: 24px;
  overflow: visible;
  color: #fff;
  background: #087bd9 url("../img/eec2026/figma/member-hero.png") center/cover no-repeat
}

.member-hero:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 31%;
  height: 33%;
  background: #f8fcfc;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none
}

.member-hero__copy {
  position: absolute;
  z-index: 1;
  top: 60px;
  left: 60px
}

.member-hero__copy span {
  display: inline-block;
  padding: 6px 18px;
  border-radius: 100px;
  color: #68d1ff;
  background: rgba(0, 46, 151, .3);
  font-size: 18px
}

.member-hero__copy h1 {
  margin: 12px 0 3px;
  font-size: 48px;
  line-height: 1
}

.member-hero__copy p {
  margin: 0;
  font-size: 21px
}

.member-hero__actions {
  position: absolute;
  z-index: 2;
  top: 60px;
  right: 60px;
  display: flex;
  gap: 14px
}

.member-pill {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 8px 30px;
  border-radius: 40px;
  font-size: 20px
}

.member-pill--light {
  color: #156cd2;
  background: #fff
}

.member-pill--blue {
  color: #fff;
  background: #0b50c8
}

.member-breadcrumb {
  position: absolute;
  z-index: 2;
  right: 60px;
  bottom: 10px;
  display: flex;
  height: 56px;
  align-items: center;
  gap: 20px;
  padding: 0 30px;
  border-radius: 60px;
  color: #0d1d2d;
  background: #fff;
  font-size: 20px
}

.member-breadcrumb>span:first-child {
  color: #156cd2;
  font-size: 24px
}

.member-breadcrumb i {
  color: #9ca3af;
  font-style: normal
}

.member-login-layout {
  display: grid;
  grid-template-columns: 660px 1fr;
  gap: 40px;
  width: min(calc(100% - 280px), 1360px);
  padding-top: 60px
}

.member-login-card,
.member-forgot-card {
  position: relative;
  display: flex;
  min-height: 822px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 40px;
  border: 2px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(237, 248, 253, .94) 52%), url("../img/eec2026/figma/member-form-bg.png") center bottom/100% auto no-repeat;
  box-shadow: 0 14px 32px rgba(75, 85, 99, .08);
  overflow: hidden
}

.member-login-card:after,
.member-forgot-card:after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40%;
  background: url("../img/eec2026/figma/member-form-bg.png") center bottom/cover no-repeat;
  opacity: .88
}

.member-login-card>*,
.member-forgot-card>* {
  position: relative;
  z-index: 1
}

.member-login-card__logo {
  width: 153px;
  height: 200px;
  object-fit: contain
}

.member-card-heading {
  text-align: center
}

.member-card-heading h2 {
  margin: 0;
  color: #0c48c1;
  font-size: 48px;
  line-height: 1.1
}

.member-card-heading p {
  margin: 4px 0;
  color: #156cd2;
  font-size: 19px
}

.member-round-input {
  display: flex;
  width: 100%;
  height: 64px;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border: 1px solid rgba(197, 198, 208, .45);
  border-radius: 32px;
  background: rgba(255, 255, 255, .58)
}

.member-round-input>img {
  width: 20px;
  height: 20px;
  object-fit: contain
}

.member-round-input input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: #0d1d2d;
  background: transparent
}

.member-round-input button {
  display: grid;
  width: 30px;
  height: 30px;
  padding: 5px;
  border: 0;
  background: transparent;
  cursor: pointer
}

.member-round-input button img {
  width: 20px;
  height: 20px
}

.member-primary-button {
  display: flex;
  width: 100%;
  height: 64px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 40px;
  color: #fff;
  background: linear-gradient(90deg, #0292d2, #156cd2);
  cursor: pointer
}

.member-primary-button img {
  width: 24px;
  height: 24px
}

.member-form-status {
  min-height: 25px;
  margin: 0;
  color: #0c48c1;
  text-align: center
}

.member-side-cards {
  display: grid;
  gap: 40px
}

.member-side-card {
  position: relative;
  min-height: 388px;
  padding: 74px 60px;
  border: 2px solid rgba(255, 255, 255, .65);
  border-radius: 24px;
  color: #fff;
  background-size: cover;
  background-position: center;
  overflow: hidden
}

.member-side-card:before {
  content: "";
  position: absolute;
  inset: 0
}

.member-side-card>div {
  position: relative
}

.member-side-card--signup {
  background-image: url("../img/eec2026/figma/member-signup-card.png")
}

.member-side-card--signup:before {
  background: linear-gradient(105deg, #156cd2 30%, rgba(21, 108, 210, .15))
}

.member-side-card--forgot {
  background-image: url("../img/eec2026/figma/member-forgot-card.png")
}

.member-side-card--forgot:before {
  background: linear-gradient(105deg, #9c72f9 18%, rgba(156, 114, 249, .28))
}

.member-side-card h2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 16px;
  font-size: 38px
}

.member-side-card h2 img {
  width: 36px;
  height: 44px
}

.member-side-card p {
  margin: 0 0 36px;
  font-size: 20px
}

.member-side-card a {
  display: inline-flex;
  height: 60px;
  align-items: center;
  padding: 0 32px;
  border-radius: 40px;
  background: #fff;
  font-size: 20px
}

.member-side-card--signup a {
  color: #156cd2
}

.member-side-card--forgot a {
  color: #a177fb
}

.member-page--forgot {
  min-height: 1050px
}

.member-forgot-wrap {
  display: flex;
  justify-content: center;
  padding-top: 64px
}

.member-forgot-card {
  width: 660px;
  min-height: 542px;
  align-items: stretch
}

.member-forgot-card .member-card-heading {
  margin-bottom: 12px
}

.member-field-label {
  font-size: 22px
}

.member-field-label b,
.member-register-grid b {
  color: #ef4444
}

.member-register-shell {
  position: relative;
  margin-top: 40px;
  padding: 90px 55px 58px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  background: rgba(248, 252, 252, .66);
  box-shadow: 0 14px 32px rgba(75, 85, 99, .04)
}

.member-steps {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 55px;
  left: 55px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateY(-1px)
}

.member-steps button {
  display: flex;
  width: 100%;
  height: 155px;
  flex-direction: column;
  gap: 4px;
  padding: 25px 30px;
  border: 1px solid #e3effd;
  border-radius: 24px;
  color: #9ca3af;
  background: #fff;
  box-shadow: 0 16px 18px rgba(11, 80, 235, .08);
  text-align: left;
  cursor: pointer
}

.member-steps button span {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.member-steps button b {
  font-size: 34px
}

.member-steps button img {
  width: 36px;
  height: 36px
}

.member-steps button strong {
  font-size: 25px
}

.member-steps button.is-complete {
  border-color: #156cd2;
  color: #156cd2
}

.member-steps button.is-active {
  border-color: #fff;
  color: #fff;
  background: linear-gradient(90deg, #0292d2, #0b50eb)
}

.member-steps button:disabled {
  cursor: default
}

.member-register-panel {
  margin-top: 95px;
  padding: 40px;
  border: 2px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(75, 85, 99, .08)
}

.member-register-panel[hidden] {
  display: none
}

.member-terms {
  height: 350px;
  overflow: auto;
  color: #4b5563;
  font-size: 18px
}

.member-terms p {
  margin-top: 0
}

.member-terms ol {
  margin: 0;
  padding-left: 24px
}

.member-outline-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 34px
}

.member-outline-actions button,
.member-outline-actions a {
  display: flex;
  width: 160px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border: 1px solid #ef4444;
  border-radius: 40px;
  color: #ef4444;
  background: #fff;
  cursor: pointer
}

.member-outline-actions .is-accept {
  border-color: #10b981;
  color: #10b981
}

.member-register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px
}

.member-register-grid label {
  display: grid;
  gap: 8px;
  font-weight: 700
}

.member-register-grid input,
.member-register-grid select,
.member-register-grid textarea {
  width: 100%;
  height: 48px;
  padding: 8px 20px;
  border: 1px solid rgba(197, 198, 208, .45);
  border-radius: 16px;
  outline: 0;
  background: #fff;
  font-weight: 400
}

.member-register-grid textarea {
  height: 98px;
  resize: vertical
}

.member-register-grid .span-half {
  width: calc(50% - 16px)
}

.member-register-grid .span-full {
  grid-column: 1/-1
}

.member-password-hint {
  margin: 18px 0;
  color: #156cd2
}

.member-recaptcha {
  display: flex;
  width: 304px;
  height: 82px;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid #ddd;
  background: #fafafa
}

.member-recaptcha input {
  width: 24px;
  height: 24px
}

.member-recaptcha img {
  width: 252px;
  height: auto
}

.member-register-panel .member-form-status {
  margin-top: 18px
}

@media(max-width:1100px) {
  .member-hero__copy {
    left: 36px
  }

  .member-hero__actions {
    right: 36px
  }

  .member-login-layout {
    grid-template-columns: 1fr;
    width: min(calc(100% - 48px), 760px)
  }

  .member-login-card {
    min-height: 760px
  }

  .member-side-cards {
    grid-template-columns: 1fr 1fr
  }

  .member-side-card {
    min-height: 330px;
    padding: 45px 32px
  }

  .member-steps {
    right: 24px;
    left: 24px
  }

  .member-steps button {
    padding: 20px 18px
  }

  .member-steps button strong {
    font-size: 20px
  }

  .member-register-shell {
    padding-inline: 24px
  }
}

@media(max-width:760px) {
  .member-page {
    min-height: auto;
    padding-top: 24px
  }

  .member-hero {
    height: 350px
  }

  .member-hero:after {
    display: none
  }

  .member-hero__copy {
    top: 35px;
    right: 24px;
    left: 24px
  }

  .member-hero__copy h1 {
    font-size: 39px
  }

  .member-hero__actions {
    top: auto;
    right: 24px;
    bottom: 84px;
    left: 24px;
    flex-wrap: wrap
  }

  .member-breadcrumb {
    right: 24px;
    bottom: 16px;
    height: 48px
  }

  .member-login-layout {
    width: min(calc(100% - 32px), 660px);
    padding-top: 32px
  }

  .member-login-card {
    min-height: 710px;
    padding: 28px 20px
  }

  .member-login-card__logo {
    width: 115px;
    height: 150px
  }

  .member-card-heading h2 {
    font-size: 40px
  }

  .member-side-cards {
    grid-template-columns: 1fr
  }

  .member-side-card {
    min-height: 320px
  }

  .member-forgot-card {
    width: calc(100% - 32px);
    padding: 30px 20px
  }

  .member-register-shell {
    width: calc(100% - 24px);
    margin-top: 24px;
    padding: 0 10px 24px
  }

  .member-steps {
    position: relative;
    right: auto;
    left: auto;
    grid-template-columns: 1fr 1fr;
    padding-top: 12px
  }

  .member-steps button {
    height: 122px;
    padding: 14px
  }

  .member-steps button b {
    font-size: 27px
  }

  .member-steps button strong {
    font-size: 17px;
    line-height: 1.2
  }

  .member-steps button img {
    width: 28px;
    height: 28px
  }

  .member-register-panel {
    margin-top: 14px;
    padding: 22px 16px
  }

  .member-terms {
    height: 420px
  }

  .member-register-grid {
    grid-template-columns: 1fr
  }

  .member-register-grid .span-half {
    width: 100%
  }

  .member-register-grid .span-full {
    grid-column: auto
  }

  .member-recaptcha {
    max-width: 100%
  }

  .member-outline-actions button,
  .member-outline-actions a {
    width: 130px
  }

  .member-page--register {
    min-height: auto
  }
}

.member-register-grid .span-half {
  grid-column: 1/-1
}

@media(max-width:760px) {
  .member-register-grid .span-half {
    grid-column: auto
  }
}

/* Align member authentication heroes with the shared inner-page hero system. */
.member-page {
  padding-top: 20px
}

.member-hero {
  height: 300px;
  overflow: hidden;
  border-radius: 30px
}

.member-hero::after {
  display: none
}

.member-hero__copy {
  top: 60px;
  left: 60px
}

.member-hero__copy span {
  display: flex;
  width: max-content;
  min-width: 111px;
  height: 41px;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 999px;
  color: #68d1ff;
  background: rgba(0, 80, 190, .55);
  font-size: 20px;
  line-height: 1
}

.member-hero__copy h1 {
  margin: 6px 0 0;
  font-size: 40px;
  line-height: 48px
}

.member-hero__copy p {
  margin: 0;
  font-size: 24px;
  line-height: 29px
}

.member-hero__actions {
  top: 60px;
  right: 60px
}

.member-pill {
  width: 184px;
  height: 48px;
  min-height: 0;
  padding: 0;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1
}

.member-hero__actions .member-pill--blue {
  width: auto;
  min-width: 184px;
  padding-inline: 24px
}

.member-breadcrumb {
  right: 0;
  bottom: 0;
  width: 460px;
  height: 88px;
  justify-content: center;
  gap: 20px;
  padding: 0 60px 0 170px;
  border-radius: 0;
  background: #fff;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  font-size: 24px;
  line-height: 1;
  white-space: nowrap
}

.member-breadcrumb::before {
  position: absolute;
  right: 60px;
  width: 230px;
  height: 48px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(21, 108, 210, .08);
  content: ""
}

.member-breadcrumb>* {
  position: relative;
  z-index: 1
}

.member-breadcrumb>span:first-child {
  font-size: 20px
}

.member-breadcrumb>span:last-child {
  font-weight: 400
}

.uses-fallback-font .member-hero__copy span {
  font-size: 14px
}

.uses-fallback-font .member-hero__copy h1 {
  font-size: 29px;
  line-height: 38px
}

.uses-fallback-font .member-hero__copy p,
.uses-fallback-font .member-pill,
.uses-fallback-font .member-breadcrumb {
  font-size: 17px
}

@media(max-width:1100px) {
  .member-hero {
    height: 300px
  }

  .member-hero__copy {
    top: 45px;
    right: 40px;
    left: 40px
  }

  .member-hero__actions {
    top: 32px;
    right: 32px
  }

  .member-breadcrumb {
    width: 360px;
    height: 72px;
    padding: 0 35px 0 110px;
    font-size: 20px
  }

  .member-breadcrumb::before {
    right: 28px;
    width: 215px;
    height: 44px
  }
}

@media(max-width:760px) {
  .member-page {
    padding-top: 14px
  }

  .member-hero {
    height: 350px;
    border-radius: 20px
  }

  .member-hero__copy {
    top: 34px;
    right: 24px;
    left: 24px
  }

  .member-hero__copy h1 {
    font-size: 32px;
    line-height: 38px
  }

  .member-hero__copy p {
    font-size: 18px;
    line-height: 23px
  }

  .member-hero__actions {
    top: auto;
    right: auto;
    bottom: 80px;
    left: 18px
  }

  .member-pill {
    width: 140px;
    height: 44px;
    padding: 0 10px;
    font-size: 16px
  }

  .member-hero__actions .member-pill--blue {
    width: auto;
    min-width: 170px;
    padding-inline: 14px
  }

  .member-breadcrumb {
    right: 16px;
    bottom: 16px;
    width: auto;
    height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    clip-path: none;
    font-size: 16px
  }

  .member-breadcrumb::before {
    display: none
  }

  .uses-fallback-font .member-hero__copy h1 {
    font-size: 27px
  }

  .uses-fallback-font .member-hero__copy p {
    font-size: 15px
  }

  .uses-fallback-font .member-pill,
  .uses-fallback-font .member-breadcrumb {
    font-size: 13px
  }
}

/* Shared typography for every inner-page hero title and description. */
:root {
  --page-hero-title-size: 40px;
  --page-hero-title-line-height: 48px;
  --page-hero-description-size: 24px;
  --page-hero-description-line-height: 29px;
}

.analytics-hero__copy h1,
.surveys-hero h1,
.assessment-hero h1,
.library-hero h1,
.bleaching-hero h1,
.about-hero__copy h1,
.member-hero__copy h1 {
  font-size: var(--page-hero-title-size);
  line-height: var(--page-hero-title-line-height);
}

.analytics-hero__copy p,
.surveys-hero p,
.assessment-hero p,
.library-hero p,
.bleaching-hero p,
.about-hero__copy p,
.member-hero__copy p {
  font-size: var(--page-hero-description-size);
  line-height: var(--page-hero-description-line-height);
}

.uses-fallback-font {
  --page-hero-title-size: 29px;
  --page-hero-title-line-height: 38px;
  --page-hero-description-size: 17px;
  --page-hero-description-line-height: 23px;
}

@media(max-width:760px) {
  :root {
    --page-hero-title-size: 32px;
    --page-hero-title-line-height: 38px;
    --page-hero-description-size: 18px;
    --page-hero-description-line-height: 23px;
  }

  .uses-fallback-font {
    --page-hero-title-size: 27px;
    --page-hero-title-line-height: 38px;
    --page-hero-description-size: 15px;
    --page-hero-description-line-height: 23px;
  }
}

/* Keep a consistent visual gap between every page's final section and footer. */
main#top {
  /* margin-bottom:80px; */
}

main#top.page-main--home {
  margin-bottom: 0;
}

@media(max-width:700px) {
  main#top {
    margin-bottom: 48px;
  }
}

/* Footer: ocean artwork, stepped top edge, contact row and policy bar. */
.site-footer .footer-main,
.site-footer .footer-bottom {
  position: relative;
}

.site-footer .contact-grid article {
  min-width: 0;
}

.site-footer .contact-grid a {
  overflow-wrap: anywhere;
}

.site-footer .visit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.site-footer .visit-icon i {
  display: block;
  width: 5px;
  height: 22px;
  border-radius: 1px;
  background: #fff;
}

.site-footer .visit-icon i:nth-child(2) {
  height: 16px;
}

.site-footer .visit-icon i:nth-child(3) {
  height: 20px;
}

.site-footer a {
  transition: opacity .18s ease, background-color .18s ease;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  opacity: .78;
}

.site-footer a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Match the fixed 1920px footer composition from the supplied reference. */
@media(min-width:1201px) {
  .site-footer {
    height: 564px;
    padding: 0;
  }

  .site-footer .footer-wave {
    top: 0;
  }

  .site-footer .footer-main {
    height: 500px;
    padding: 0;
  }

  .site-footer .footer-brand {
    position: absolute;
    top: 76px;
    right: 0;
    left: 0;
    height: 130px;
  }

  .site-footer .contact-grid {
    position: absolute;
    top: 242px;
    right: 0;
    left: 0;
    height: 68px;
    margin: 0;
  }

  .site-footer .contact-grid article {
    height: 68px;
  }

  .site-footer .footer-rule {
    position: absolute;
    top: 335px;
    right: 0;
    left: 0;
    margin: 0;
  }

  .site-footer .footer-meta {
    position: absolute;
    top: 336px;
    right: 0;
    left: 0;
    height: 80px;
  }
}

@media(max-width:1200px) {
  .site-footer .contact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .site-footer .contact-grid article:first-child {
    grid-column: 1/-1;
  }

  .site-footer .footer-meta {
    padding-block: 22px;
  }
}

@media(max-width:700px) {
  .site-footer {
    min-height: 0;
    padding-top: 48px;
  }

  .site-footer .footer-wave {
    height: 64px;
    background-size: auto 64px;
  }

  .site-footer .footer-main {
    padding-top: 12px;
    padding-bottom: 28px;
  }

  .site-footer .footer-brand {
    align-items: center;
    gap: 12px;
  }

  .site-footer .footer-brand img {
    width: 72px;
    height: 94px;
  }

  .site-footer .footer-brand>div {
    padding-top: 0;
  }

  .site-footer .footer-brand h2 {
    font-size: 20px;
    line-height: 1.15;
  }

  .site-footer .footer-brand p,
  .site-footer .footer-brand small {
    font-size: 14px;
  }

  .site-footer .contact-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 26px;
  }

  .site-footer .contact-grid article:first-child {
    grid-column: auto;
  }

  .site-footer .contact-grid article {
    font-size: 16px;
  }

  .site-footer .contact-grid article>img,
  .site-footer .contact-grid article>span {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }

  .site-footer .footer-rule {
    margin-top: 24px;
  }

  .site-footer .footer-meta {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-block: 24px 0;
  }

  .site-footer .footer-meta small {
    font-size: 15px;
  }

  .site-footer .footer-social {
    justify-content: flex-start;
  }

  .site-footer .footer-social a {
    width: 46px;
    height: 46px;
    border-radius: 13px;
  }

  .site-footer .footer-bottom nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 15px;
    font-size: 15px;
  }
}

/* Coral bleaching report detail ------------------------------------------ */
.coral-profile {
  --detail-blue: #0b62c4;
  --detail-navy: #123458;
  --detail-border: #dceaf3;
  --detail-surface: #fff;
  background:
    radial-gradient(circle at 92% 3%, rgba(52, 184, 220, .13), transparent 24rem),
    linear-gradient(180deg, #f5fbfd 0, #fff 38rem);
}

/* `.coral-detail` is also used by the fixed-size map popup. Reset those
   dimensions for this full report page so the following sections never
   overlap the report tables. */
.coral-profile .report-coral-detail {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
}

.coral-profile .breadcrumb-block {
  border-bottom: 1px solid #d9eaf3;
  background: linear-gradient(90deg, #f8fcff, #eef9fd 55%, #f8fcff);
}

.coral-profile .breadcrumb-block>.container {
  width: min(calc(100% - 48px), 1240px);
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.coral-profile .breadcrumb,
.coral-profile .breadcrumb-item {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.coral-profile .breadcrumb {
  min-width: 0;
  gap: 8px;
  font-size: 16px;
  color: #557086;
}

.coral-profile .breadcrumb-item {
  min-width: 0;
}

.coral-profile .breadcrumb-item+.breadcrumb-item::before {
  content: "›";
  margin-right: 8px;
  color: #8eb2c7;
  font-size: 22px;
  line-height: 1;
}

.coral-profile .breadcrumb-item a,
.coral-profile .breadcrumb-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coral-profile .breadcrumb-item.active {
  color: #0b4f91;
  font-weight: 700;
}

.coral-profile .breadcrumb-item:first-child a {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #c7e2f1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 9px rgba(24, 99, 145, .08);
}

.coral-profile .breadcrumb-item img {
  width: 19px;
  height: 19px;
  object-fit: contain;
}

.coral-profile .x-back {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  color: var(--detail-blue);
  cursor: pointer;
  font-weight: 600;
}

.coral-profile .breadcrumb-block .x-back {
  min-height: 36px;
  padding: 5px 13px;
  border: 1px solid #c5dfed;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(24, 99, 145, .06);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.coral-profile .breadcrumb-block .x-back::before {
  content: "←";
  font-size: 19px;
  line-height: 1;
}

.coral-profile .breadcrumb-block .x-back:hover {
  color: #fff;
  border-color: var(--detail-blue);
  background: var(--detail-blue);
}

.coral-profile .breadcrumb-block .x-back svg {
  display: none;
}

.coral-profile .x-back svg {
  width: 19px;
  height: 19px;
}

.coral-profile .bg-inner {
  height: 3px;
  background: linear-gradient(90deg, #0c4bc4, #00a2d5 62%, #38c3b4);
}

.coral-profile .bg-home {
  padding: 44px 0 80px;
}

.coral-profile .sc-coral-detail,
.coral-profile .coral-rate-detail-page>.container {
  width: min(100%, 1240px);
  margin-inline: auto;
}

.coral-profile .report-coral-detail>.head-title,
.coral-profile .coral-rate-detail .head-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 16px;
}

.coral-profile .report-coral-detail>.head-title:first-child {
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0 0 22px;
  padding: 0 0 20px;
  border-bottom: 1px solid #dceaf3;
}

.coral-profile .head-title h2 {
  margin: 0;
  color: var(--detail-navy);
  font-size: clamp(24px, 2vw, 32px);
  line-height: 1.2;
}

.coral-profile .report-coral-detail>.head-title:first-child h2:first-child {
  color: var(--detail-blue);
  font-size: clamp(30px, 2.8vw, 44px);
  letter-spacing: -.02em;
}

.coral-profile .report-coral-detail>.head-title:first-child h2+h2 {
  padding-left: 14px;
  border-left: 1px solid #bdd4e2;
  color: #6b8090;
  font-size: 20px;
  font-weight: 500;
}

.coral-profile .profile-box,
.coral-profile .coral-rate-detail {
  overflow: hidden;
  border: 1px solid var(--detail-border);
  border-radius: 20px;
  background: var(--detail-surface);
  box-shadow: 0 12px 34px rgba(24, 78, 112, .08);
}

.coral-profile .profile-box-addon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 26px 30px;
  border-color: #cfe5f1;
  background:
    linear-gradient(105deg, rgba(236, 248, 253, .9), rgba(255, 255, 255, .96) 50%),
    var(--detail-surface);
}

.coral-profile .profile-box-addon .content {
  display: grid;
  gap: 14px;
}

.coral-profile .profile-box-addon .group-text {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.coral-profile .profile-box-addon .text a,
.coral-profile .profile-box-addon .date {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.coral-profile .profile-box-addon .text a {
  color: var(--detail-blue);
  font-weight: 600;
}

.coral-profile .profile-box-addon .icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.coral-profile .profile-box-addon .status-2,
.coral-profile .profile-box-addon .btn-status {
  display: flex;
  align-items: center;
}

.coral-profile .profile-box-addon .btn-status {
  gap: 10px;
  padding: 11px 18px;
  border: 1px solid #c6e1ef;
  border-radius: 999px;
  background: linear-gradient(90deg, #f1f9fd, #eaf6fc);
  box-shadow: 0 5px 15px rgba(24, 99, 145, .08);
}

.coral-profile .profile-box-addon .btn-status img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.coral-profile .profile-box-addon .btn-status .status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  color: var(--detail-navy);
  background: transparent;
  font-weight: 700;
  white-space: nowrap;
}

.coral-profile .profile-box-addon .btn-status .status::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.coral-profile .report-coral-detail>.head-title.tx-2 {
  gap: 11px;
  margin-top: 38px;
}

.coral-profile .report-coral-detail>.head-title.tx-2::before {
  content: "";
  width: 7px;
  height: 28px;
  flex: 0 0 auto;
  border-radius: 99px;
  background: linear-gradient(180deg, #0b63c8, #18b8c4);
  box-shadow: 0 4px 10px rgba(11, 99, 200, .18);
}

.coral-profile .btn-status .green,
.coral-profile .btn-status .yellow,
.coral-profile .btn-status .red {
  color: var(--detail-navy);
  background: transparent;
}

.coral-profile .btn-status .green::before { background: #10b981; }
.coral-profile .btn-status .yellow::before {
  background: #f3b51b;
  box-shadow: 0 0 0 4px rgba(243, 181, 27, .15);
}
.coral-profile .btn-status .red::before {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .13);
}

.coral-profile .profile-box .table {
  width: 100%;
}

.coral-profile .profile-box .tr {
  display: grid;
  align-items: stretch;
}

.coral-profile .part-1 .tr {
  grid-template-columns: 100px 1.05fr .8fr 1.8fr;
}

.coral-profile .part-2 .tr {
  grid-template-columns: 1fr 1fr 1.8fr;
}

.coral-profile .profile-box .thead .tr {
  color: #fff;
  background: linear-gradient(100deg, #0a55b8, #078ed0);
  font-weight: 700;
}

.coral-profile .profile-box .tbody .tr:nth-child(even) {
  background: #f5fafc;
}

.coral-profile .profile-box .tbody .tr {
  transition: background-color .18s ease;
}

.coral-profile .profile-box .tbody .tr:hover {
  background: #eff8fc;
}

.coral-profile .profile-box .td {
  min-width: 0;
  padding: 15px 18px;
  border-right: 1px solid var(--detail-border);
}

.coral-profile .profile-box .td:last-child {
  border-right: 0;
}

.coral-profile .profile-box .tbody .tr+.tr {
  border-top: 1px solid var(--detail-border);
}

.coral-profile .profile-box .title.xs {
  display: none;
}

.coral-profile .part-3 {
  margin-top: 30px;
  padding: 26px 28px;
}

.coral-profile .survey-meta-title+.part-3 {
  margin-top: 0;
}

.coral-profile .part-3 .row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.coral-profile .part-3 .row>div {
  min-width: 0;
  padding: 15px 17px;
  border: 1px solid #e4eef4;
  border-radius: 12px;
  background: #f8fbfd;
}

.coral-profile .part-3 .row>.col-md-12 {
  grid-column: 1 / -1;
}

.coral-profile .part-3 .title {
  display: block;
  margin-bottom: 3px;
  color: #557086;
  font-size: 15px;
}

.coral-profile .part-3 .desc {
  color: var(--detail-navy);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.coral-profile .coral-rate-detail-page {
  margin-top: 42px;
}

.coral-profile .coral-rate-detail {
  padding: 34px;
  border-color: #cfe5f1;
}

.coral-profile .coral-rate-detail>.detail-all>.head-title:first-child {
  margin-top: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--detail-border);
}

.coral-profile .coral-rate-detail .head-title img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  padding: 7px;
  border-radius: 12px;
  background: #edf7ff;
}

.coral-profile .ck-editor {
  color: #304b60;
  font-size: 18px;
  line-height: 1.75;
}

.coral-profile .ck-editor img {
  height: auto;
  margin: 20px auto;
  border-radius: 14px;
}

.coral-profile .ck-editor table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.coral-profile .coral-rate-detail iframe {
  width: 100%;
  max-width: 760px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin-top: 22px;
  border-radius: 14px;
}

.coral-profile .slide-img,
.coral-profile .slide-news {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.coral-profile .slide-img .item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

.coral-profile .slide-img .link {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #e9f5fa;
}

.coral-profile .slide-img .link img {
  transition: transform .25s ease, filter .25s ease;
}

.coral-profile .slide-img a.link:hover img,
.coral-profile .slide-img a.link:focus-visible img {
  transform: scale(1.035);
  filter: brightness(.78);
}

.coral-profile .gallery-zoom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  background: rgba(5, 112, 201, .85);
  opacity: 0;
  transform: translate(-50%, -45%);
  transition: opacity .2s ease, transform .2s ease;
}

.coral-profile .gallery-zoom::before,
.coral-profile .gallery-zoom::after {
  content: "";
  position: absolute;
  background: #fff;
}

.coral-profile .gallery-zoom::before {
  top: 13px;
  left: 20px;
  width: 2px;
  height: 16px;
}

.coral-profile .gallery-zoom::after {
  top: 20px;
  left: 13px;
  width: 16px;
  height: 2px;
}

.coral-profile .slide-img a.link:hover .gallery-zoom,
.coral-profile .slide-img a.link:focus-visible .gallery-zoom {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.coral-profile .download-box {
  display: flex;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--detail-border);
  border-radius: 14px;
}

.coral-profile .download-box>.img {
  flex: 0 0 52px;
}

.coral-profile .download-box .head {
  color: var(--detail-navy);
  font-weight: 700;
}

.coral-profile .download-box p {
  margin: 4px 0;
}

.coral-profile .download-box .download a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--detail-blue);
  font-weight: 700;
}

.coral-profile .download-box .download img {
  width: 18px;
}

.coral-profile .botton-nav {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--detail-border);
}

.coral-profile .botton-nav>a,
.coral-profile .detail-actions-end>.next {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 8px 17px;
  border: 1px solid #b9d7e9;
  border-radius: 999px;
  color: var(--detail-blue);
  font-weight: 700;
  cursor: pointer;
}

.coral-profile .botton-nav img {
  width: 18px;
}

.coral-profile .botton-nav .back img {
  transform: rotate(180deg);
}

.coral-profile .detail-actions-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.coral-profile .share {
  display: flex;
  align-items: center;
  gap: 8px;
}

.coral-profile .share-label {
  margin-right: 2px;
  color: #5e7281;
  font-size: 14px;
  font-weight: 700;
}

.coral-profile .share-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #c7dce9;
  border-radius: 50%;
  background: #fff;
  color: var(--detail-blue);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}

.coral-profile .share-button svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.coral-profile .share-button:hover,
.coral-profile .share-button:focus-visible {
  border-color: var(--detail-blue);
  background: var(--detail-blue);
  color: #fff;
  transform: translateY(-1px);
}

.coral-profile .slide-news .item-box {
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--detail-border);
  border-radius: 14px;
  background: #fff;
}

.coral-profile .slide-news .item-box>img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.coral-profile .slide-news .item-content {
  padding: 15px;
}

.coral-profile .slide-news .date {
  color: #668096;
  font-size: 14px;
}

.coral-profile .slide-news .subject {
  margin-top: 4px;
  color: var(--detail-blue);
  font-weight: 700;
}

.coral-profile .slide-news .title {
  margin-top: 3px;
  color: var(--detail-navy);
}

@media(max-width:900px) {
  .coral-profile .bg-home {
    padding-top: 30px;
  }

  .coral-profile .profile-box-addon {
    grid-template-columns: 1fr;
  }

  .coral-profile .profile-box-addon>.status {
    justify-self: start;
  }

  .coral-profile .part-3 .row,
  .coral-profile .slide-img,
  .coral-profile .slide-news {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .coral-profile .part-3 .row>.col-md-12 {
    grid-column: 1 / -1;
  }
}

@media(max-width:700px) {
  .coral-profile .breadcrumb-block>.container {
    min-height: 56px;
    gap: 10px;
  }

  .coral-profile .breadcrumb {
    font-size: 14px;
  }

  .coral-profile .breadcrumb-item:nth-child(2) {
    display: none;
  }

  .coral-profile .breadcrumb-item:nth-child(3)::before {
    display: none;
  }

  .coral-profile .x-back span {
    display: none;
  }

  .coral-profile .profile-box-addon,
  .coral-profile .part-3,
  .coral-profile .coral-rate-detail {
    padding: 19px;
    border-radius: 15px;
  }

  .coral-profile .profile-box .thead {
    display: none;
  }

  .coral-profile .part-1 .tr,
  .coral-profile .part-2 .tr {
    grid-template-columns: 1fr;
    gap: 10px;
    margin: 12px;
    padding: 14px;
    border: 1px solid var(--detail-border);
    border-radius: 12px;
    background: #f8fbfd;
  }

  .coral-profile .profile-box .tbody .tr+.tr {
    border-top: 1px solid var(--detail-border);
  }

  .coral-profile .profile-box .td {
    display: grid;
    grid-template-columns: minmax(105px, .75fr) 1.25fr;
    gap: 12px;
    padding: 0;
    border: 0;
  }

  .coral-profile .profile-box .title.xs {
    display: block;
    color: #60798c;
    font-size: 14px;
  }

  .coral-profile .part-3 .row,
  .coral-profile .slide-img,
  .coral-profile .slide-news {
    grid-template-columns: 1fr;
  }

  .coral-profile .part-3 .row>.col-md-12 {
    grid-column: auto;
  }

  .coral-profile .botton-nav {
    align-items: stretch;
  }

  .coral-profile .botton-nav>a,
  .coral-profile .detail-actions-end>.next {
    justify-content: center;
    min-width: 44px;
  }

  .coral-profile .detail-actions-end {
    gap: 8px;
  }

  .coral-profile .share-label {
    display: none;
  }

  .coral-profile .share-button {
    width: 38px;
    height: 38px;
  }
}



/* Coral map page — legacy markup adapted to the EEC 2026 shell */
.coral-map-page {
  color: #17324d;
  background: #eef8fb
}

.coral-map-page .sc-map-wrapper {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #b8e4ee
}

.coral-map-page .sc-gg-map,
.coral-map-page .iframe-container {
  width: 100%;
  height: calc(100vh - 124px);
  min-height: 720px
}

.coral-map-page .iframe-container {
  position: relative
}

.coral-map-page .responsive-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.coral-map-page .sc-map-bar {
  position: absolute;
  z-index: 8;
  top: 24px;
  left: max(24px, calc((100% - 1640px) / 2));
  display: flex;
  align-items: center
}

.coral-map-page .map-bar-card {
  display: flex;
  flex-direction: column;
  width: 460px;
  max-height: calc(100vh - 190px);
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(137, 207, 227, .65);
  border-radius: 20px;
  background: rgba(247, 254, 255, .96);
  box-shadow: 0 18px 45px rgba(21, 108, 210, .2);
  backdrop-filter: blur(14px)
}

.coral-map-page .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -6px;
  margin-left: -6px
}

.coral-map-page .row>[class*=col] {
  min-width: 0;
  padding-right: 6px;
  padding-left: 6px
}

.coral-map-page .col {
  flex: 1 1 0
}

.coral-map-page .col-auto {
  flex: 0 0 auto
}

.coral-map-page .col-6 {
  flex: 0 0 50%;
  max-width: 50%
}

.coral-map-page .align-items-center {
  align-items: center
}

.coral-map-page .form-default {
  flex: 0 0 auto
}

.coral-map-page .form-default .header>.row {
  flex-wrap: nowrap
}

.coral-map-page .form-group {
  position: relative;
  margin: 0
}

.coral-map-page .form-control,
.coral-map-page .select-control {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe4ed;
  border-radius: 12px;
  outline: 0;
  color: #17324d;
  background: #fff;
  font: inherit;
  font-size: 16px;
  transition: border-color .2s ease, box-shadow .2s ease
}

.coral-map-page .form-control:focus,
.coral-map-page .select-control:focus {
  border-color: #168bd1;
  box-shadow: 0 0 0 3px rgba(22, 139, 209, .12)
}

.coral-map-page .form-search .form-control {
  height: 48px;
  padding-right: 52px;
  border-radius: 24px;
  box-shadow: 0 5px 16px rgba(21, 108, 210, .1)
}

.coral-map-page .btn-search {
  position: absolute;
  top: 0;
  right: 2px;
  display: grid;
  width: 46px;
  height: 48px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer
}

.coral-map-page .visuallyhidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0
}

.coral-map-page .collapse-filter {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #0b50eb, #0292d2);
  box-shadow: 0 5px 16px rgba(11, 80, 235, .22)
}

.coral-map-page .collapse-filter .close {
  display: none
}

.coral-map-page .collapse-filter.active .more {
  display: none
}

.coral-map-page .collapse-filter.active .close {
  display: block
}

.coral-map-page .form-default .body {
  display: block;
  padding-top: 14px
}

.coral-map-page .sc-card-filter {
  padding: 14px;
  border-radius: 16px;
  background: #eaf7fb
}

.coral-map-page .sc-card-filter>.row {
  row-gap: 12px
}

.coral-map-page .input-group {
  display: flex;
  flex-direction: column-reverse;
  gap: 5px
}

.coral-map-page .input-group .control-label {
  padding-left: 3px;
  color: #527087;
  font-size: 14px
}

.coral-map-page .sc-card-filter .action {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px
}

.coral-map-page .sc-card-filter .action .btn {
  padding: 7px 16px;
  border: 1px solid #b8d9e7;
  border-radius: 18px;
  color: #416174;
  background: #fff;
  font: inherit;
  font-size: 14px;
  cursor: pointer
}

.coral-map-page .action-announce {
  flex: 0 0 auto;
  padding: 14px 0
}

.coral-map-page .btn-announce {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(90deg, #0b50eb, #0292d2);
  box-shadow: 0 7px 18px rgba(11, 80, 235, .2);
  font-size: 18px;
  font-weight: 700
}

.coral-map-page .btn-announce:hover {
  color: #fff;
  transform: translateY(-1px)
}

.coral-map-page .btn-announce .icon {
  display: flex
}

.coral-map-page .btn-announce svg {
  width: 21px;
  height: 21px
}

.coral-map-page .map-coral-list {
  min-height: 130px;
  padding-right: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #9dcfe0 transparent
}

.coral-map-page .item-list {
  padding: 0;
  margin: 0;
  list-style: none
}

.coral-map-page .map-coral-list .item-list {
  display: grid;
  gap: 8px
}

.coral-map-page .map-coral-list li {
  min-width: 0
}

.coral-map-page .map-coral-list .link {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #d8eaf1;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(21, 108, 210, .07);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease
}

.coral-map-page .map-coral-list .link:before {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  content: '';
  background: #10b981
}

.coral-map-page .map-coral-list .link.coral-result-02:before {
  background: #9ca3af
}

.coral-map-page .map-coral-list .link.coral-result-03:before {
  background: #168bd1
}

.coral-map-page .map-coral-list .link.coral-result-04:before {
  background: #ffcd4b
}

.coral-map-page .map-coral-list .link.coral-result-05:before {
  background: #ef4444
}

.coral-map-page .map-coral-list .link.coral-result-06:before {
  background: #be123c
}

.coral-map-page .map-coral-list .link:hover {
  border-color: #8ed0e5;
  box-shadow: 0 7px 18px rgba(21, 108, 210, .13);
  transform: translateY(-1px)
}

.coral-map-page .map-coral-list .link>span {
  display: none
}

.coral-map-page .coral-card-wrapper {
  padding: 12px 15px 11px 18px
}

.coral-map-page .coral-title {
  margin-bottom: 7px;
  overflow: hidden;
  color: #17324d;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap
}

.coral-map-page .coral-group {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px
}

.coral-map-page .coral-group .icon {
  flex: 0 0 22px
}

.coral-map-page .coral-group .icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain
}

.coral-map-page .coral-text {
  overflow: hidden;
  color: #607387;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap
}

.coral-map-page .chevron {
  display: flex;
  padding-left: 10px
}

.coral-map-page .chevron svg {
  width: 7px
}

.coral-map-page .coral-no-content {
  display: grid;
  min-height: 130px;
  place-items: center;
  color: #607387
}

.coral-map-page .map-button-toggle,
.coral-map-page .tootips {
  display: none
}

.coral-map-page .sc-note {
  padding: 14px max(24px, calc((100% - 1640px) / 2));
  color: #31586d;
  background: #dff3f8;
  text-align: center
}

.coral-map-page .sc-note p {
  margin: 0
}

.coral-map-page .sc-info {
  padding: 18px max(24px, calc((100% - 1640px) / 2));
  background: #fff
}

.coral-map-page .sc-info>.row {
  align-items: center;
  justify-content: center;
  gap: 18px 28px
}

.coral-map-page .info-update-txt {
  margin: 0;
  color: #0b50eb;
  font-weight: 700
}

.coral-map-page .sc-info .item-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px
}

.coral-map-page .sc-info .item-list a {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer
}

.coral-map-page .sc-info .icon {
  width: 24px;
  height: 24px;
  object-fit: contain
}

.coral-map-page .sc-info .txt {
  margin: 0;
  font-size: 15px
}

.coral-map-page .map-content .gm-style .gm-style-iw-c {
  padding: 0;
  overflow: hidden;
  border-radius: 16px
}

.coral-map-page .map-card-wrapper {
  min-width: 300px;
  padding: 18px;
  background: #fff
}

.coral-map-page .map-card-wrapper .h-title {
  margin: 0 0 12px;
  color: #0b50eb;
  font-size: 24px
}

.coral-map-page .map-card-wrapper .title {
  margin: 0;
  color: #607387;
  font-size: 14px
}

.coral-map-page .map-card-wrapper p {
  margin: 0 0 8px
}

.coral-map-page .map-card-wrapper .cover {
  width: 92px;
  height: 76px;
  margin: 0;
  overflow: hidden;
  border-radius: 10px
}

.coral-map-page .map-card-wrapper .cover img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

@media(max-width:1100px) {
  .coral-map-page .map-bar-card {
    width: 410px
  }

  .coral-map-page .sc-map-bar {
    left: 18px
  }
}

@media(max-width:700px) {
  .coral-map-page .sc-map-wrapper {
    min-height: 0;
    overflow: visible
  }

  .coral-map-page .sc-gg-map,
  .coral-map-page .iframe-container {
    height: 430px;
    min-height: 430px
  }

  .coral-map-page .sc-map-bar {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    padding: 15px;
    background: #eef8fb
  }

  .coral-map-page .map-bar-card {
    width: 100%;
    max-height: none;
    padding: 15px;
    border-radius: 16px
  }

  .coral-map-page .col-6 {
    flex-basis: 100%;
    max-width: 100%
  }

  .coral-map-page .map-coral-list {
    max-height: 420px
  }

  .coral-map-page .sc-info {
    padding: 16px 15px
  }

  .coral-map-page .sc-info .item-list {
    justify-content: flex-start
  }

  .coral-map-page .map-card-wrapper {
    min-width: 260px
  }
}