/*====================================================
  DESIGN SYSTEM
====================================================*/

:root {

  /* Page backgrounds */
  --gdi-blue: #ABC4ED;
  --gdi-skyblue: #6399DF;
  --slr-bg: #00AAE9;
  --gdi-gray: #BEBEBE;
  --resilience-bg: #E6D5AA;
  --erosion-yellow: #fff200;
  --erosion-green: #0C7A4F;

  /* Text */
  --text-color: #1a1a1a;
  --label-yellow: #ffff00;
  --surge-orange: #f7941d;
  --surge-yellow: #d7ef3f;
  --surge-red: #ed1c24;

  /* Neutrals */
  --white: #ffffff;
  --black: #1a1a1a;

  /* Page layout */
  --page-max-width: 900px;
  --content-gutter: 28px;
}

/*====================================================
  FOUNDATION
====================================================*/

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato', Arial, sans-serif;
  color: var(--text-color);
}

/* Text color options */

.white-text {
  color: var(--white);
}

.white-text h1,
.white-text p {
  color: inherit;
}

.visually-hidden {
  position: absolute;
  left: -9999px;
}

/*====================================================
  PAGE SECTION COLOR SCHEMES
====================================================*/

.middle-section {
  background-color: var(--section-bg);
}

.bottom-section {
  background-color: var(--section-bg);
}

/*====================================================
  PAGE LAYOUT
====================================================*/

.white-page {
  width: 100%;
  background-color: var(--white);
  min-height: 100vh;
}

.content {
  padding: 40px var(--content-gutter) 20px;
  max-width: var(--page-max-width);
  margin: 0 auto;
}

.content.after-interactive {
  padding-top: 0;
}

.content > :first-child {
  margin-top: 0;
}

.section-divider {
    width: auto;
    height: 2px;
    background: var(--black);
    margin: 55px 0 45px;
}

/*====================================================
  TYPOGRAPHY
====================================================*/

h1 {
  font-size: clamp(34px, 5vw, 40px);
  line-height: 1;
  font-weight: 900;
  margin: 0 0 15px;
  text-transform: uppercase;
}

.image-header {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

p {
  font-size: clamp(26px, 2.8vw, 30px);
  line-height: 1.45;
  margin: 36px 0;
}

/* Paragraph immediately following an h1 */
h1 + p {
  margin-top: 0;
}

strong {
  font-weight: 700;
}

/*====================================================
  5. GRAPHICS, MEDIA and RESOURCES
====================================================*/

.hero-container {
  position: relative;
}

/* Standard hero image */

.hero-image {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 35px;
}

/* Hero video */

.hero-video {
  width: 100%;
  height: auto;
  display: block;
  margin-top: 65px;
  z-index: 1;
}

/* Gradient used with video heroes */

.hero-container.video-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;

  background: linear-gradient(
    to bottom,
    rgba(99,153,223,1) 0%,
    rgba(99,153,223,.96) 10%,
    rgba(99,153,223,.86) 25%,
    rgba(99,153,223,.68) 42%,
    rgba(99,153,223,.45) 60%,
    rgba(99,153,223,.20) 80%,
    rgba(99,153,223,0) 100%
  );

  pointer-events: none;
  z-index: 2;
}

.media-placeholder {
  margin: 18px calc(-1 * var(--content-gutter));
}

.media-placeholder video {
  width: 100%;
  height: auto;
  display: block;
}

/*RESOURCE BLOCKS*/

.resources p {
  margin-bottom: 10px;
}

.resources-photo,
.resources-photo-wide {
  float: left;
  margin: 10px 16px 10px 0;
  display: block;
}

.resources-photo {
  width: 86px;
}

.resources-photo-wide {
  width: 200px;
}

/* Smartphone layout */
@media (max-width: 600px) {
  .resources-photo,
  .resources-photo-wide {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 10px 0 10px;
  }
}

/*slider before and after*/

.slider-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  cursor: ew-resize;
  touch-action: none;

  -webkit-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.slider-container img {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
}

.slider-after {
  position: absolute;
  inset: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.slider-after img {
  width: auto;
  height: 100%;
  display: block;
}

.slider-divider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 99%;
  background: #ffffff;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
}

.slider-arrows {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 18px;
  z-index: 5;
  pointer-events: none;
}

.slider-arrow-left,
.slider-arrow-right {
  width: 0;
  height: 0;
}

.slider-arrow-left {
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-right: 18px solid #ffffff;
}

.slider-arrow-right {
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 18px solid #ffffff;
}

/*shoreline interactive with hotspots*/

.shoreline-image,
.barge-bottom {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.shoreline-interactive {
  position: relative;
  width: 100%;
}

.shoreline-interactive > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hotspot positions — barge-image.jpg, 1472 × 800px */

.hotspot-1 {
  left: 42.19%;
  top: 77.25%;
}

.hotspot-2 {
  left: 55.57%;
  top: 84.63%;
}

.hotspot-3 {
  left: 64.88%;
  top: 86.63%;
}

.hotspot-4 {
  left: 78.19%;
  top: 89.63%;
}

/*pulsing hotspot animations*/

.shoreline-hotspot {
  position: absolute;
  z-index: 2;

  width: 32px;
  height: 32px;
  box-sizing: border-box;

  padding: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;

  background: rgba(255,255,255,.35);

  transform: translate(-50%, -50%);
  cursor: pointer;
}

.shoreline-hotspot::after {
  content: "";
  position: absolute;
  inset: -8px;

  border: 2px solid #ffffff;
  border-radius: 50%;

  animation: hotspot-pulse 2s infinite;
}

@keyframes hotspot-pulse {

  0% {
    transform: scale(.65);
    opacity: 1;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.shoreline-hotspot.is-active::after {
  animation: none;
  opacity: 0;
}

.shoreline-hotspot.is-active {
  background: var(--erosion-yellow);;
  border-color: var(--erosion-yellow);
}

/*====================================================
  UPLAND INTERACTIVE
====================================================*/

.upland-section {
  width: 100%;
  margin-top: 5px;
  padding: 0;
}

.upland-interactive {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.upland-image {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/*====================================================
  UPLAND HOTSPOTS
====================================================*/

.upland-hotspot {
  position: absolute;
  z-index: 20;

  width: 32px;
  height: 32px;
  box-sizing: border-box;

  padding: 0;
  margin: 0;

  border: 3px solid #ffffff;
  border-radius: 50%;

  background: rgba(255,255,255,.35);

  transform: translate(-50%, -50%);
  cursor: pointer;
}

.upland-hotspot::after {
  content: "";
  position: absolute;
  inset: -8px;

  border: 2px solid #ffffff;
  border-radius: 50%;

  animation: hotspot-pulse 2s infinite;
}

.upland-hotspot.is-active::after {
  animation: none;
  opacity: 0;
}

.upland-hotspot.is-active {
  background: var(--erosion-yellow);;
  border-color: var(--erosion-yellow);  
}


/*====================================================
  UPLAND HOTSPOT POSITIONS
====================================================*/

.upland-hotspot-3 {
  left: 87.2%;
  top: 25.2%;
}

.upland-hotspot-2 {
  left: 79.2%;
  top: 45.7%;
}

.upland-hotspot-1 {
  left: 72.6%;
  top: 61.2%;
}

/*====================================================
  UPLAND POPUP
====================================================*/

.upland-popup {
  display: none;
  width: 100%;
  height: auto;

  margin: 0 !important;
  padding: 0;

  vertical-align: top;
}

.upland-popup.is-visible {
  display: block;
}

/*====================================================
  RIPRAP EVOLUTION INTERACTIVE
====================================================*/

.riprap-evolution {
  width: 100%;
  background: #138259;
  color: var(--white);
  overflow: hidden;
}

/* Image */

.riprap-image-wrap {
  position: relative;
  width: 100%;
}

.riprap-image {
  display: block;
  width: 100%;
  height: auto;

  opacity: 1;
}

.riprap-image.is-changing {
  opacity: 0;
}


/*====================================================
  RIPRAP HOTSPOT NAVIGATION
====================================================*/

.riprap-nav {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.riprap-copy {
  display: none;
  margin-top: 0;
}

.riprap-copy.is-active {
  display: block;
}

/* Each button gets a generous touch target */
.riprap-dot {
  position: absolute;

  left: 8.1%;

  width: 8%;
  aspect-ratio: 1 / 1;

  transform: translate(-50%, -50%);

  padding: 0;
  border: 0;
  background: transparent;

  cursor: pointer;
  pointer-events: auto;
}


/* Exact vertical positions from your artwork */

.riprap-dot[data-stage="1"] {
  top: 54.7%;
}

.riprap-dot[data-stage="2"] {
  top: 65%;
}

.riprap-dot[data-stage="3"] {
  top: 76.1%;
}


/* Visible dot */

.riprap-dot::before {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 78%;
  aspect-ratio: 1 / 1;

  transform: translate(-50%, -50%);

  box-sizing: border-box;

  border: 3px solid #ffffff;
  border-radius: 50%;

  background: rgba(255,255,255,.35);
}


/* Pulse ring */

.riprap-dot::after {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 78%;
  aspect-ratio: 1 / 1;

  transform: translate(-50%, -50%) scale(1);

  border: 2px solid #ffffff;
  border-radius: 50%;

  animation: riprap-hotspot-pulse 2s ease-out infinite;

  pointer-events: none;
}


/* Active state */

.riprap-dot.is-active::before {
  background: var(--erosion-yellow);
  border-color: var(--erosion-yellow);
}

.riprap-dot.is-active::after {
  animation: none;
  opacity: 0;
}


/* Riprap-specific pulse keeps ring centered */

@keyframes riprap-hotspot-pulse {

  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.9;
  }

  70% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/*====================================================
  4. TEXT UTILITIES AND LINKS
====================================================*/

.highlight-red {
  color: var(--fleet-red);
}

.label {
  color: var(--label-yellow);
}

.label-link {
  color: var(--fleet-blue);
  text-decoration: none;
}

.label-link:hover,
.label-link:focus {
  color: var(--fleet-red);
  text-decoration: none;
}

.surge-key {
  margin: -30px 0 -30px;
}

.surge-row {
  display: flex;
  align-items: center;
  gap: 8px;

  font-size: clamp(24px, 2.8vw, 30px);
  line-height: 1.45;
}

.surge-color {
  display: inline-block;
  width: 58px;
  height: 24px;

  flex-shrink: 0;
}

.surge-orange {
  background: var(--surge-orange);
}

.surge-yellow {
  background: var(--surge-yellow);
}

.surge-red {
  background: var(--surge-red);
}

/*====================================================
  PAGE NAVIGATION
====================================================*/

.menu-button {
    position: fixed;
    top: 10px;
    left: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    isolation: isolate;
    z-index: 1001;
}

/* Both SVG versions */
.menu-icon {
    position: absolute;
    display: block;
    width: 40px;
    height: auto;
    z-index: 2;
    transition:
        opacity .25s ease,
        transform .2s ease;
}

/* Hero state */
.menu-white {
    opacity: 1;
}

.menu-black {
    opacity: 0;
}

/* Black icon when scrolled or menu is open */
.menu-button.scrolled .menu-white,
.menu-button.menu-open .menu-white {
    opacity: 0;
}

.menu-button.scrolled .menu-black,
.menu-button.menu-open .menu-black {
    opacity: 1;
}

/* Frosted background */
.menu-button::before {
    content: "";
    position: absolute;
    inset: -4px;
    background: rgba(255,255,255,.88);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 1;
}

.menu-button.scrolled:not(.menu-open)::before {
    opacity: 1;
}

.site-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: fit-content;
    height: auto;
    padding:
        75px 22px 22px 22px;
    background: #ffffff;
    backdrop-filter: blur(6px);
    transform: translateX(-100%);
    transition: transform .30s ease;
    z-index: 1000;
}

.site-menu.open {
    transform: translateX(0);
}

.site-menu a {
    display: block;
    margin-bottom: 10px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .03em;
    transition: color .2s ease;
}

.site-menu a:hover {
    color: #b2b5b7;
}

/*====================================================
  PAGE BUTTONS
====================================================*/

/*MEDIA LINK BARS*/

.media-link-bar {
  display: block;
  width: 100%;
  background: var(--black);
  text-align: center;
  font-size: 20px;
  line-height: 1.2;
  padding: 14px 10px;
  box-sizing: border-box;
  margin-bottom: 40px;
}


/* MEDIA LINK Yellow link text */

.media-link-bar,
.media-link-bar a {
  color: var(--label-yellow);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease;
}

/* MEDIAL LINK Hover — text only */

.media-link-bar a:hover {
  opacity: 0.8;
}

/* SVG BUTTONS*/

.button-group{
display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;

  margin-bottom: 36px;
}

.button-image {
  width: 420px;
  max-width: 100%;
  height: auto;
  display: block;
}

@media (hover: hover) {
  .button-image:hover {
    opacity: .8;
  }
}

/*====================================================
  FOOTER
====================================================*/

.site-footer {
  margin: 0;
  padding: 0 24px 28px;
  font-size: 20px;
  line-height: 1;
  color: var(--black);
  text-align: center;
}

.site-footer.footer-white {
  color: var(--white);
}

.site-footer p {
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.25;
}

.footer-divider {
  border-top: 2px dotted currentColor;
  width: calc(100% - 40px);
  margin: 0 auto 20px;
}

.footer-website {
  display: inline-block;
  margin-top: 10px;
  font-weight: 900;
  color: currentColor;
  text-decoration: none;
}

.footer-instagram {
  display: block;
  margin-top: 20px;
  margin-bottom: 60px;
}

.footer-instagram img {
  width: 30px;
  height: auto;
  display: block;
  margin: 0 auto;
}