/* Illustrated river journey */
.hero-content {
  max-width: 760px;
}

.hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.hero .eyebrow::before {
  content: "";
  width: 32px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--lime);
}

.hero h1 {
  max-width: 720px;
  font-family: "Bebas Neue", "Arial Narrow", sans-serif;
  font-size: clamp(3.6rem, 7vw, 6.8rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: .012em;
}

.hero-copy {
  max-width: 540px;
  margin: 23px 0 27px;
  font-size: clamp(1rem, 1.55vw, 1.2rem);
}

.journey {
  min-height: 3000px;
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 11%, rgba(255, 250, 220, .95) 0 7%, transparent 18%),
    radial-gradient(circle at 90% 62%, rgba(219, 230, 185, .55) 0 6%, transparent 19%),
    linear-gradient(90deg, #efe9ce, #f8f3df 48%, #eee8ce);
}

.journey::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .32;
  background-image:
    radial-gradient(circle, #75866d 0 1px, transparent 1.4px),
    radial-gradient(circle, #b5a77a 0 1px, transparent 1.4px);
  background-position: 0 0, 19px 23px;
  background-size: 42px 42px, 47px 47px;
  mask-image: linear-gradient(90deg, #000, transparent 31%, transparent 69%, #000);
}

.river {
  z-index: -1;
  overflow: hidden;
  clip-path: polygon(
    42% 0, 45% 3%, 49% 6%, 53% 9%, 55% 12%, 55% 15%, 53% 18%, 50% 21%, 46% 24%,
    42% 26%, 38% 28%, 34% 31%, 31% 34%, 29% 37%, 29% 40%, 31% 43%, 34% 46%,
    38% 48%, 42% 50%, 46% 52%, 50% 55%, 53% 58%, 55% 61%, 55% 64%, 53% 67%,
    50% 70%, 46% 73%, 42% 75%, 38% 77%, 34% 80%, 31% 83%, 29% 86%, 29% 90%,
    31% 93%, 34% 96%, 38% 98%, 42% 100%,
    58% 100%, 54% 98%, 50% 96%, 47% 93%, 45% 90%, 45% 86%, 47% 83%, 50% 80%,
    54% 77%, 58% 75%, 62% 73%, 66% 70%, 69% 67%, 72% 64%, 72% 61%, 70% 58%,
    66% 55%, 62% 52%, 58% 50%, 54% 48%, 50% 46%, 47% 43%, 45% 40%, 45% 37%,
    47% 34%, 50% 31%, 54% 28%, 58% 26%, 62% 24%, 66% 21%, 69% 18%, 72% 15%,
    72% 12%, 70% 9%, 67% 6%, 62% 3%, 58% 0
  );
  background:
    radial-gradient(ellipse at 57% 8%, rgba(225,244,231,.34) 0 1.4%, transparent 1.8%),
    radial-gradient(ellipse at 37% 31%, rgba(232,244,224,.22) 0 1.1%, transparent 1.5%),
    radial-gradient(ellipse at 63% 58%, rgba(255,255,255,.2) 0 1.2%, transparent 1.6%),
    radial-gradient(ellipse at 35% 86%, rgba(217,239,226,.24) 0 1.4%, transparent 1.8%),
    linear-gradient(96deg, rgba(15,70,74,.55), transparent 12%, rgba(112,174,171,.18) 44%, transparent 78%, rgba(11,65,72,.58)),
    linear-gradient(90deg, #255e67, #4e9294 22%, #72aaa4 48%, #4b8b8d 76%, #225963);
  filter:
    drop-shadow(5px 0 0 rgba(104, 93, 59, .5))
    drop-shadow(-5px 0 0 rgba(81, 89, 55, .52))
    drop-shadow(0 0 7px rgba(33, 60, 43, .35))
    drop-shadow(0 0 30px rgba(25, 79, 78, .22));
}

.river::before {
  content: "";
  position: absolute;
  inset: -5% -25%;
  opacity: .48;
  background:
    repeating-radial-gradient(ellipse at 22% 20%, transparent 0 31px, rgba(220,240,226,.22) 32px 33px, transparent 35px 72px),
    repeating-radial-gradient(ellipse at 70% 64%, transparent 0 48px, rgba(226,242,230,.15) 49px 51px, transparent 53px 102px);
  background-size: 250px 170px, 330px 225px;
  transform: rotate(-5deg);
  animation: water-drift 18s linear infinite;
}

.river::after {
  background:
    linear-gradient(104deg, transparent 8%, rgba(255,255,255,.11) 14%, transparent 22% 48%, rgba(232,245,230,.1) 56%, transparent 64%),
    repeating-linear-gradient(174deg, transparent 0 105px, rgba(224,240,226,.13) 108px 109px, transparent 111px 205px),
    linear-gradient(90deg, rgba(8,55,61,.35), transparent 14% 83%, rgba(6,48,57,.38));
}

@keyframes water-drift {
  to { transform: translateY(220px) rotate(-5deg); }
}

.surface-ripple {
  --ripple-angle: 0deg;
  position: absolute;
  display: block;
  width: 92px;
  height: 24px;
  border: 1px solid rgba(229, 242, 226, .44);
  border-width: 1px 0 0;
  border-radius: 50%;
  opacity: .72;
  filter: blur(.15px);
  animation: ripple-breathe 4.8s ease-in-out infinite;
}

.surface-ripple::after {
  content: "";
  position: absolute;
  inset: 7px 14px auto;
  height: 13px;
  border-top: 1px solid rgba(231, 244, 228, .34);
  border-radius: 50%;
}

.ripple-1 { left: 53%; top: 9%; --ripple-angle: -7deg; }
.ripple-2 { left: 32%; top: 35%; width: 72px; animation-delay: -1.2s; }
.ripple-3 { left: 54%; top: 58%; width: 105px; --ripple-angle: 4deg; animation-delay: -2.5s; }
.ripple-4 { left: 35%; top: 86%; width: 82px; --ripple-angle: -5deg; animation-delay: -.7s; }
.ripple-5 { left: 43%; top: 49%; width: 64px; animation-delay: -3.4s; }
.ripple-6 { left: 46%; top: 75%; width: 76px; animation-delay: -1.8s; }

@keyframes ripple-breathe {
  0%, 100% { opacity: .38; margin-left: -4px; transform: rotate(var(--ripple-angle)) scaleX(.88); }
  50% { opacity: .78; margin-left: 4px; transform: rotate(var(--ripple-angle)) scaleX(1.12); }
}

.scene-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.mangrove-cluster {
  position: absolute;
  width: 260px;
  height: 190px;
  filter: drop-shadow(0 14px 14px rgba(37, 67, 45, .16));
}

.mangrove-a { top: 15%; left: 28%; transform: rotate(-5deg) scale(.92); }
.mangrove-b { top: 72%; right: 25%; transform: rotate(5deg) scale(1.08); }
.mangrove-c { top: 87%; left: 27%; transform: rotate(-8deg) scale(.72); }

.mud-bank {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 12px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 30%, #d7c66d 0 3px, transparent 4px),
    radial-gradient(circle at 72% 62%, #806943 0 2px, transparent 3px),
    linear-gradient(#a98e53, #72593b);
  box-shadow: 0 8px 0 rgba(34, 114, 112, .32);
}

.mangrove-tree {
  position: absolute;
  bottom: 42px;
  width: 9px;
  height: 70px;
  border-radius: 8px;
  transform-origin: bottom;
  background: linear-gradient(90deg, #65462c, #98704a 52%, #563b27);
}

.mangrove-tree::before,
.mangrove-tree::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -22px;
  width: 4px;
  height: 31px;
  border-radius: 50%;
  border-left: 3px solid #694b31;
  transform: rotate(37deg);
}

.mangrove-tree::after {
  left: 1px;
  transform: rotate(-42deg);
}

.mangrove-tree i {
  position: absolute;
  left: 50%;
  top: -16px;
  width: 42px;
  height: 35px;
  border-radius: 55% 45% 52% 48%;
  transform: translateX(-50%);
  background: #264f36;
  box-shadow:
    -22px 8px 0 -3px #376844,
    22px 8px 0 -2px #41774b,
    -10px -11px 0 -5px #4c8152,
    11px -8px 0 -4px #315f3d,
    0 16px 0 -6px #1c4932;
}

.tree-1 { left: 38px; height: 78px; transform: rotate(-7deg); }
.tree-2 { left: 82px; height: 97px; transform: rotate(3deg) scale(1.08); }
.tree-3 { left: 132px; height: 83px; transform: rotate(-2deg); }
.tree-4 { left: 180px; height: 105px; transform: rotate(8deg) scale(1.12); }
.tree-5 { left: 222px; height: 72px; transform: rotate(4deg) scale(.88); }

.coconut-grove {
  position: absolute;
  width: 210px;
  height: 240px;
  transform-origin: bottom center;
  filter: drop-shadow(0 15px 13px rgba(31, 57, 38, .18));
}

.grove-a { top: 5%; right: 11%; transform: rotate(2deg) scale(.92); }
.grove-b { top: 31%; left: 8%; transform: rotate(-3deg) scale(.8); }
.grove-c { top: 58%; right: 6%; transform: rotate(4deg) scale(.84); }
.grove-d { top: 84%; left: 7%; transform: rotate(-2deg) scale(.72); }

.coconut-grove::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 4px;
  bottom: 1px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 45%, #596d39 0 5px, transparent 6px),
    radial-gradient(circle at 77% 32%, #63783e 0 4px, transparent 5px),
    linear-gradient(#879052, #63623d 45%, #8b7046);
  box-shadow: 0 6px 0 rgba(53, 93, 64, .16);
}

.coconut-palm {
  position: absolute;
  z-index: 1;
  bottom: 20px;
  display: block;
  width: 13px;
  height: 162px;
  border-radius: 70% 35% 24% 48%;
  transform-origin: bottom center;
  background:
    repeating-linear-gradient(176deg, transparent 0 13px, rgba(65,43,25,.34) 14px 16px),
    linear-gradient(90deg, #5c3e27, #ad7b49 45%, #785034 72%, #493322);
  box-shadow: inset -2px 0 rgba(50,35,24,.22);
}

.coconut-palm::before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 50%;
  top: -7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #405f31;
}

.coconut-palm::after {
  content: "";
  position: absolute;
  z-index: 5;
  left: -6px;
  top: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #68512d;
  box-shadow: 10px 3px 0 #765c31, 5px 12px 0 -1px #584428;
}

.coconut-palm i {
  --frond-angle: 0deg;
  position: absolute;
  z-index: 3;
  left: 6px;
  top: -1px;
  display: block;
  width: 78px;
  height: 19px;
  border-radius: 95% 8% 80% 12%;
  transform-origin: 0 50%;
  transform: rotate(var(--frond-angle));
  background:
    repeating-linear-gradient(92deg, transparent 0 10px, rgba(13,59,36,.28) 11px 12px),
    linear-gradient(180deg, #4f8c4c, #235d3c 58%, #194b33);
  box-shadow: inset 0 -3px rgba(12,61,38,.25);
  animation: palm-frond 5.5s ease-in-out infinite;
}

.coconut-palm i:nth-child(1) { --frond-angle: -82deg; width: 67px; }
.coconut-palm i:nth-child(2) { --frond-angle: -42deg; width: 83px; animation-delay: -.8s; }
.coconut-palm i:nth-child(3) { --frond-angle: -8deg; width: 92px; animation-delay: -1.7s; }
.coconut-palm i:nth-child(4) { --frond-angle: 31deg; width: 86px; animation-delay: -2.4s; }
.coconut-palm i:nth-child(5) { --frond-angle: 70deg; width: 72px; animation-delay: -3.2s; }
.coconut-palm i:nth-child(6) { --frond-angle: 152deg; width: 68px; animation-delay: -4.1s; }

.palm-tall { left: 58px; transform: rotate(-7deg); }
.palm-small { right: 48px; height: 125px; transform: rotate(11deg) scale(.86); }

@keyframes palm-frond {
  0%, 100% { transform: rotate(var(--frond-angle)) scaleX(.98); }
  50% { transform: rotate(calc(var(--frond-angle) + 3deg)) scaleX(1.03); }
}

.river-island {
  position: absolute;
  z-index: 4;
  top: 65%;
  left: 44%;
  width: 170px;
  height: 128px;
  transform: rotate(-3deg);
  transform-origin: center bottom;
  filter: drop-shadow(0 13px 9px rgba(20, 59, 57, .25));
}

.island-ground {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 12px;
  width: 170px;
  height: 48px;
  border-radius: 52% 48% 46% 54%;
  background:
    radial-gradient(circle at 26% 32%, #57733e 0 8px, transparent 9px),
    radial-gradient(circle at 67% 22%, #688348 0 11px, transparent 12px),
    radial-gradient(circle at 82% 46%, #486537 0 7px, transparent 8px),
    linear-gradient(#708a4c 0 38%, #aa9257 40% 67%, #6d593f 69%);
  box-shadow: 0 7px 0 -2px rgba(19, 77, 77, .48);
}

.island-ground::before,
.island-ground::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 13px;
  height: 9px;
  border-radius: 50%;
  background: #76644b;
}

.island-ground::before { left: 24px; box-shadow: 19px 5px 0 -3px #927a55; }
.island-ground::after { right: 22px; box-shadow: -17px 4px 0 -2px #876f4e; }

.island-ripple {
  position: absolute;
  z-index: 0;
  left: -13px;
  bottom: 2px;
  width: 195px;
  height: 38px;
  border: 2px solid rgba(233, 244, 228, .52);
  border-width: 2px 0 0;
  border-radius: 50%;
  animation: island-water 4.5s ease-in-out infinite;
}

.island-palm {
  z-index: 2;
  bottom: 44px;
  height: 150px;
}

.island-palm-a { left: 58px; transform: rotate(-8deg) scale(.4); }
.island-palm-b { left: 104px; transform: rotate(12deg) scale(.31); }

@keyframes island-water {
  0%, 100% { opacity: .42; transform: scaleX(.94); }
  50% { opacity: .78; transform: scaleX(1.06); }
}

.fishing-cove {
  position: absolute;
  top: 46%;
  right: 10%;
  width: 390px;
  height: 285px;
  transform: rotate(1deg);
  filter: drop-shadow(0 16px 14px rgba(35, 54, 42, .18));
}

.fishing-cove::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(48, 91, 85, .42) 18% 82%, transparent);
}

.cove-sun {
  position: absolute;
  left: 21px;
  top: 107px;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  opacity: .33;
  background: #dca950;
}

.fishing-net {
  position: absolute;
  inset: 0;
}

.net-mast,
.net-boom,
.net-back-beam,
.net-rope {
  position: absolute;
  display: block;
  transform-origin: left center;
}

.net-mast {
  left: 235px;
  top: 208px;
  width: 190px;
  height: 6px;
  border-radius: 999px;
  transform: rotate(-112deg);
  background: linear-gradient(#75563a, #2d2119 66%);
}

.net-boom {
  left: 164px;
  top: 34px;
  width: 160px;
  height: 5px;
  border-radius: 999px;
  transform: rotate(151deg);
  background: linear-gradient(#826342, #30241b);
}

.net-back-beam {
  left: 164px;
  top: 34px;
  width: 184px;
  height: 5px;
  border-radius: 999px;
  transform: rotate(23deg);
  background: linear-gradient(#3a2b21, #7a5b3d 48%, #32251c);
}

.net-rope {
  left: 165px;
  top: 36px;
  height: 1px;
  background: rgba(49, 42, 34, .78);
}

.rope-a { width: 153px; transform: rotate(164deg); }
.rope-b { width: 190px; transform: rotate(37deg); }
.rope-c { left: 235px; top: 205px; width: 202px; transform: rotate(-34deg); }
.rope-d { width: 218px; transform: rotate(30deg); opacity: .72; }

.net-pivot {
  position: absolute;
  z-index: 4;
  left: 225px;
  top: 194px;
  width: 17px;
  height: 17px;
  border: 4px solid #30241c;
  border-radius: 48% 52% 45% 55%;
  background: #6f5137;
  box-shadow: 6px 6px 0 -5px #1f1915;
}

.net-cloth {
  position: absolute;
  left: 11px;
  top: 75px;
  width: 178px;
  height: 122px;
  display: block;
  opacity: .72;
  transform: rotate(1deg);
  transform-origin: top center;
  clip-path: polygon(0 0, 100% 0, 91% 29%, 80% 59%, 67% 100%, 49% 79%, 31% 65%, 16% 48%);
  background:
    repeating-linear-gradient(28deg, transparent 0 11px, rgba(67,75,61,.35) 12px 13px),
    repeating-linear-gradient(151deg, transparent 0 11px, rgba(67,75,61,.29) 12px 13px),
    rgba(214, 219, 193, .68);
  box-shadow: inset 0 2px rgba(48, 52, 43, .52);
}

.net-cloth::after {
  content: "";
  position: absolute;
  left: 48%;
  top: 69%;
  width: 45%;
  height: 2px;
  transform: rotate(29deg);
  background: rgba(53, 55, 45, .55);
}

.net-weight {
  position: absolute;
  left: 302px;
  top: 157px;
  width: 13px;
  height: 17px;
  border-radius: 45% 45% 56% 54%;
  background: #665849;
  box-shadow: 18px 12px 0 -2px #7a6b5a, 36px 23px 0 -3px #554a3f;
}

.jetty {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 42px;
  width: 175px;
  height: 22px;
  transform: rotate(-1deg);
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #422f23 0 12px, #79583a 13px 18px);
  box-shadow: 4px 7px 0 -4px rgba(32, 69, 63, .52);
}

.jetty::before,
.jetty::after {
  content: "";
  position: absolute;
  bottom: -28px;
  width: 7px;
  height: 48px;
  border-radius: 4px;
  background: #35271f;
}

.jetty::before { left: 13px; box-shadow: 47px 5px 0 #4a3527, 96px 2px 0 #392a21, 149px 4px 0 #503a2b; }
.jetty::after { right: 14px; }

.jetty i {
  position: absolute;
  left: 15px;
  right: 8px;
  top: -18px;
  height: 18px;
  border: 3px solid #3a2a21;
  border-width: 3px 3px 0;
  transform: skewX(-13deg);
  opacity: .9;
}

.water-ring {
  position: absolute;
  left: 82px;
  bottom: 14px;
  width: 294px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.58);
  border-width: 1px 0 0;
  border-radius: 50%;
  transform: rotate(-1deg);
}

.bird {
  position: absolute;
  width: 15px;
  height: 7px;
  border-top: 2px solid #46604f;
  border-radius: 50%;
  opacity: .7;
}

.bird::after {
  content: "";
  position: absolute;
  left: 13px;
  top: -2px;
  width: 15px;
  height: 7px;
  border-top: 2px solid #46604f;
  border-radius: 50%;
  transform: scaleX(-1);
}

.bird-a { top: 32%; right: 27%; transform: rotate(7deg); }
.bird-b { top: 67%; left: 18%; transform: rotate(-8deg) scale(.8); }
.bird-c { top: 82%; right: 12%; transform: rotate(10deg) scale(.7); }

.kayak {
  z-index: 5;
  width: clamp(84px, 9vw, 132px);
  --heading: 45deg;
  --bob: 0px;
  transition: top .07s linear, left .07s linear;
}

.kayak::before,
.kayak::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 62%;
  width: 92%;
  height: 38%;
  border: 2px solid rgba(255,255,255,.7);
  border-width: 0 0 2px;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--heading));
  opacity: .72;
}

.kayak::after {
  width: 125%;
  height: 64%;
  opacity: .38;
}

.kayak img {
  transform: translateY(var(--bob)) rotate(var(--heading));
  transition: transform .08s linear;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 10px 7px rgba(8, 48, 53, .28));
}

.animated-paddle {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: block;
  width: clamp(105px, 11.36vw, 168px);
  height: 5px;
  border-radius: 999px;
  transform-origin: center;
  background: linear-gradient(180deg, #6d5b4d, #251f1c 55%, #0f0d0c);
  box-shadow: 0 2px 3px rgba(8, 30, 31, .28);
  animation: paddle-stroke 1.15s ease-in-out infinite;
}

.animated-paddle::before,
.animated-paddle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 24%;
  height: 16px;
  border: 2px solid #3b251b;
  background: linear-gradient(135deg, #ffc347, #eb8f25 58%, #c65722);
  box-shadow: inset 0 2px rgba(255,255,255,.4);
}

.river-footer {
  position: absolute;
  z-index: 6;
  left: 7vw;
  right: 7vw;
  bottom: 34px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(16, 42, 35, .24);
  color: #173a31;
}

.footer-brand {
  justify-self: start;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.footer-brand span { color: #718719; }

.river-footer > p {
  margin: 0;
  width: auto;
  max-width: none;
  color: #52675e;
  font-size: .78rem;
  letter-spacing: .08em;
}

.footer-meta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  color: #53675e;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.footer-meta a {
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(23, 58, 49, .45);
  color: #173a31;
}

.animated-paddle::before {
  left: -20%;
  border-radius: 80% 20% 28% 72%;
  transform: translateY(-50%) skewX(-18deg);
}

.animated-paddle::after {
  right: -20%;
  border-radius: 20% 80% 72% 28%;
  transform: translateY(-50%) skewX(18deg);
}

@keyframes paddle-stroke {
  0%, 100% {
    transform: translate(-50%, -50%) translateY(var(--bob)) rotate(calc(var(--heading) - 57deg)) scaleY(.94);
  }
  50% {
    transform: translate(-50%, -50%) translateY(var(--bob)) rotate(calc(var(--heading) - 33deg)) scaleY(1.06);
  }
}

@media (max-width: 980px) {
  .mangrove-a { left: 36%; transform: rotate(-5deg) scale(.72); }
  .mangrove-b { right: 14%; transform: rotate(5deg) scale(.82); }
  .mangrove-c { left: 37%; transform: rotate(-8deg) scale(.58); }
  .fishing-cove { right: 3%; transform: rotate(2deg) scale(.78); transform-origin: right center; }
  .grove-a { right: 2%; transform: rotate(2deg) scale(.7); }
  .grove-b { left: 1%; transform: rotate(-3deg) scale(.64); }
  .grove-c { right: -1%; transform: rotate(4deg) scale(.66); }
  .grove-d { left: 0; transform: rotate(-2deg) scale(.58); }
  .river-island { left: 41%; transform: rotate(-3deg) scale(.86); }
}

@media (max-width: 760px) {
  .hero h1 {
    max-width: 350px;
    font-size: clamp(3.1rem, 14vw, 4.8rem);
    line-height: .92;
  }
  .hero-copy {
    max-width: 330px;
    margin: 20px 0 25px;
    font-size: 1rem;
  }
  .journey { min-height: 2800px; }
  .journey::before { mask-image: linear-gradient(90deg, #000, transparent 52%, transparent 68%, #000); }
  .stop.stop-right {
    width: min(74%, 310px);
    margin: 15vh 0 0 auto;
    align-items: flex-end;
  }
  .stop-right .stop-number,
  .stop-right h2 {
    text-align: right;
    text-shadow: 0 1px 0 #f4f0df, 0 0 15px rgba(244, 240, 223, .95);
  }
  .stop-right .location-grid {
    width: 100%;
    text-align: left;
  }
  .river {
    clip-path: polygon(
      60.1% 0%, 67.1% 4%, 70.8% 8%, 70.8% 12%, 67.1% 16%, 60.1% 20%, 50.7% 24%,
      39.9% 28%, 29.2% 32%, 20.1% 36%, 14% 40%, 11.9% 44%, 14.2% 48%, 20.8% 52%,
      30.8% 56%, 42.5% 60%, 54.2% 64%, 64.2% 68%, 70.8% 72%, 73.1% 76%, 71% 80%,
      64.9% 84%, 55.8% 88%, 45.1% 92%, 34.3% 96%, 24.9% 100%,
      39.9% 100%, 50.7% 96%, 62.4% 92%, 73.1% 88%, 81.3% 84%, 86% 80%, 86.7% 76%,
      83.5% 72%, 76.9% 68%, 67.8% 64%, 57.5% 60%, 47.2% 56%, 38.1% 52%, 31.5% 48%,
      28.3% 44%, 29% 40%, 33.7% 36%, 41.9% 32%, 52.6% 28%, 64.3% 24%, 75.1% 20%,
      83.5% 16%, 88.1% 12%, 88.1% 8%, 83.5% 4%, 75.1% 0%
    );
  }
  .ripple-1 { left: 68%; }
  .ripple-2 { left: 14%; }
  .ripple-3 { left: 31%; }
  .ripple-4 { left: 54%; }
  .ripple-5 { left: 17%; }
  .ripple-6 { left: 70%; }
  .mangrove-a { top: 16%; left: 57%; transform: rotate(-4deg) scale(.56); }
  .mangrove-b { top: 72%; right: -7%; transform: rotate(4deg) scale(.64); }
  .mangrove-c { top: 89%; left: 59%; transform: rotate(-5deg) scale(.46); }
  .fishing-cove { top: 46%; right: auto; left: -12%; transform: rotate(2deg) scale(.58); }
  .grove-a { top: 6%; right: -17%; transform: rotate(2deg) scale(.48); }
  .grove-b { top: 33%; left: -18%; transform: rotate(-3deg) scale(.45); }
  .grove-c { top: 60%; right: -18%; transform: rotate(4deg) scale(.46); }
  .grove-d { top: 85%; left: -17%; transform: rotate(-2deg) scale(.43); }
  .river-island { top: 65%; left: 45%; transform: rotate(-3deg) scale(.58); }
  .bird-a { right: 12%; }
  .bird-b { left: 65%; }
  .kayak::before { width: 105%; }
  .kayak::after { width: 145%; }
  .animated-paddle { width: 99px; }
  .river-footer {
    left: 22px;
    right: 22px;
    bottom: 22px;
    grid-template-columns: 1fr auto;
    gap: 12px 18px;
    padding-top: 17px;
  }
  .river-footer > p {
    grid-column: 1 / -1;
    grid-row: 2;
    text-align: left;
  }
  .footer-meta { gap: 0; }
  .footer-meta > span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .river::before { animation: none; }
  .surface-ripple { animation: none; }
  .coconut-palm i { animation: none; }
  .island-ripple { animation: none; }
  .animated-paddle { animation: none; transform: translate(-50%, -50%) rotate(calc(var(--heading) - 45deg)); }
}