.shipping-section{padding:124px 0 34px;background:#e5f1f5;color:#123b4a;overflow:hidden}
.shipping-heading{margin-bottom:48px}
.shipping-section .section-kicker{color:#3187a2}
.shipping-section .section-heading h2 em{color:#3187a2}
.shipping-section .section-heading>p{color:#557581}
.shipping-flow{display:grid;grid-template-columns:minmax(0,1.58fr) minmax(320px,.82fr);gap:42px;align-items:stretch}
.shipping-gallery{min-width:0}
.shipping-gallery__viewport{position:relative;overflow:hidden;background:#123b4a;box-shadow:0 22px 52px rgba(22,77,95,.14);touch-action:pan-y;cursor:grab}
.shipping-gallery__viewport.is-dragging{cursor:grabbing}
.shipping-gallery__track{display:flex;transition:transform .7s cubic-bezier(.19,1,.22,1);will-change:transform}
.shipping-gallery__slide{position:relative;flex:0 0 100%;height:clamp(470px,43vw,610px);margin:0;overflow:hidden;background:#123b4a}
.shipping-gallery__slide img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.88) contrast(1.03);transform:scale(1.035);transition:transform 1s cubic-bezier(.19,1,.22,1),filter .7s ease}
.shipping-gallery__slide.is-active img{transform:scale(1);filter:saturate(1) contrast(1.03)}
.shipping-gallery__slide:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,33,45,.02) 38%,rgba(8,33,45,.78) 100%);pointer-events:none}
.shipping-gallery__slide figcaption{position:absolute;z-index:1;left:29px;right:29px;bottom:25px;color:#fff}
.shipping-gallery__slide figcaption span{display:block;margin-bottom:8px;color:#8fd0df;font-size:10px;font-weight:800;letter-spacing:.16em}
.shipping-gallery__slide figcaption strong{display:block;font-size:clamp(24px,2.6vw,38px);line-height:1;letter-spacing:-.045em}
.shipping-gallery__controls{display:flex;align-items:center;gap:14px;margin-top:15px}
.shipping-gallery__arrow{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(18,59,74,.25);background:#f7fbfc;color:#123b4a;font-size:20px;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.shipping-gallery__arrow:hover{background:#123b4a;color:#fff;border-color:#123b4a}
.shipping-gallery__dots{display:flex;align-items:center;gap:7px;flex:1}
.shipping-gallery__dot{width:30px;height:3px;border:0;padding:0;background:#a8cbd5;opacity:.65;cursor:pointer;transition:width .25s ease,background .25s ease,opacity .25s ease}
.shipping-gallery__dot.is-active{width:52px;background:#3187a2;opacity:1}
.shipping-gallery__meta{display:flex;justify-content:space-between;gap:15px;margin-top:12px;color:#5e7d87;font-size:10px;font-weight:800;letter-spacing:.14em}
.shipping-brief{padding:31px 29px 27px;background:#123b4a;color:#fff;box-shadow:0 22px 52px rgba(22,77,95,.14)}
.shipping-brief__eyebrow{margin:0 0 23px;color:#8fd0df;font-size:10px;font-weight:800;letter-spacing:.16em}
.shipping-brief h3{margin:0 0 22px;font-size:clamp(34px,3.1vw,52px);line-height:.95;letter-spacing:-.055em}
.shipping-brief h3 em{color:#b8e1e8;font-family:Georgia,serif;font-weight:400}
.shipping-brief__lead{margin:0 0 25px;color:#c6dce2;font-size:13px;line-height:1.75}
.shipping-steps{border-top:1px solid rgba(255,255,255,.2)}
.shipping-steps article{display:grid;grid-template-columns:29px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.2)}
.shipping-steps b{color:#8fd0df;font-size:10px;letter-spacing:.08em}
.shipping-steps h4{margin:0 0 4px;font-size:14px;line-height:1.2}
.shipping-steps p{margin:0;color:#b2d0d8;font-size:11px;line-height:1.55}
.button--sky{margin-top:24px;background:#7dc4d2;color:#123b4a}
.button--sky:hover{background:#b8e1e8}
.shipping-route{display:flex;align-items:center;gap:12px;margin-top:29px;color:#4c7280;font-size:9px;font-weight:800;letter-spacing:.14em}
.shipping-route i{display:block;flex:1;height:1px;background:#a6ccd6}
.shipping-credit{margin-top:19px;color:#76939d;font-size:9px;line-height:1.5}
@media (max-width:1000px){.shipping-flow{grid-template-columns:1fr;gap:35px}.shipping-brief{max-width:none}.shipping-gallery__slide{height:clamp(430px,58vw,580px)}}
@media (max-width:560px){.shipping-section{padding:82px 0 28px}.shipping-gallery__slide{height:390px}.shipping-gallery__slide figcaption{left:18px;bottom:18px}.shipping-gallery__slide figcaption strong{font-size:25px}.shipping-gallery__arrow{width:36px;height:36px}.shipping-gallery__dot{width:20px}.shipping-gallery__dot.is-active{width:35px}.shipping-gallery__meta{font-size:8px}.shipping-route{gap:7px;font-size:7px}.shipping-brief{padding:25px 21px}.shipping-brief h3{font-size:36px}}
@media (prefers-reduced-motion:reduce){.shipping-gallery__track,.shipping-gallery__slide img,.shipping-gallery__dot{transition:none}}

/* Clean gallery controls: arrows live on the image and appear only on hover. */
.shipping-gallery__controls,
.shipping-gallery__meta { display: none !important; }
.shipping-gallery__viewport > .shipping-gallery__arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.62);
  background: rgba(18,59,74,.64);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  cursor: pointer;
  transition: opacity .22s ease, background .22s ease, transform .22s ease;
}
.shipping-gallery__viewport > .shipping-gallery__arrow--prev { left: 18px; }
.shipping-gallery__viewport > .shipping-gallery__arrow--next { right: 18px; }
.shipping-gallery__viewport:hover > .shipping-gallery__arrow,
.shipping-gallery__viewport:focus-within > .shipping-gallery__arrow {
  opacity: 1;
  pointer-events: auto;
}
.shipping-gallery__viewport > .shipping-gallery__arrow:hover {
  background: #123b4a;
  transform: translateY(-50%) scale(1.06);
}

/* Subtle white controls: visible enough to discover, quiet enough not to compete with the image. */
.shipping-gallery__viewport > .shipping-gallery__arrow {
  border-color: rgba(255,255,255,.36);
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
  opacity: .56;
  backdrop-filter: blur(2px);
}
.shipping-gallery__viewport:hover > .shipping-gallery__arrow,
.shipping-gallery__viewport:focus-within > .shipping-gallery__arrow { opacity: .56; }
.shipping-gallery__viewport > .shipping-gallery__arrow:hover {
  background: rgba(255,255,255,.28);
  color: #fff;
  opacity: .82;
}
.gallery-side-hit {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: 35%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.gallery-side-hit--prev { left: 0; }
.gallery-side-hit--next { right: 0; }
.shipping-gallery.is-loop-resetting .shipping-gallery__slide img { transition: none !important; }
.shipping-gallery__slide img,
.shipping-gallery__slide.is-active img {
  transform: scale(1);
  filter: saturate(.94) contrast(1.03);
  transition: none;
}
.shipping-gallery__port-note {
  margin-top: 28px;
  padding: 27px 28px 25px;
  border-top: 1px solid rgba(49,135,162,.34);
  background: rgba(255,255,255,.46);
}
.shipping-gallery__port-kicker {
  margin: 0 0 12px;
  color: #3187a2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}
.shipping-gallery__port-note h3 {
  max-width: 620px;
  margin: 0 0 12px;
  color: #123b4a;
  font-size: clamp(28px, 3vw, 42px);
  line-height: .98;
  letter-spacing: -.045em;
}
.shipping-gallery__port-note > p:not(.shipping-gallery__port-kicker) {
  max-width: 680px;
  margin: 0;
  color: #557581;
  font-size: 13px;
  line-height: 1.72;
}
.shipping-gallery__port-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(18,59,74,.16);
}
.shipping-gallery__port-facts > div {
  display: grid;
  grid-template-columns: 25px 1fr;
  gap: 6px 8px;
}
.shipping-gallery__port-facts b { color: #3187a2; font-size: 10px; }
.shipping-gallery__port-facts strong { color: #123b4a; font-size: 12px; line-height: 1.2; }
.shipping-gallery__port-facts span { grid-column: 2; color: #6b8790; font-size: 10px; line-height: 1.55; }
@media (max-width: 700px) {
  .shipping-gallery__port-note { padding: 23px 20px 21px; }
  .shipping-gallery__port-facts { grid-template-columns: 1fr; gap: 13px; }
}

/* Shipping chapter: make the route, not the card grid, the visual lead. */
.shipping-section {
  position: relative;
  background:
    radial-gradient(circle at 76% 18%, rgba(143,208,223,.28), transparent 26%),
    linear-gradient(126deg, #d6e9ee 0%, #e8f2f4 52%, #c8e1e7 100%);
}

.shipping-section::after {
  background:
    repeating-linear-gradient(90deg, rgba(18,59,74,.035) 0 1px, transparent 1px 82px),
    linear-gradient(132deg, transparent 0 55%, rgba(49,135,162,.12) 55.2%, transparent 55.6%);
  opacity: .75;
}

.shipping-gallery__viewport {
  border: 1px solid rgba(18,59,74,.28);
  box-shadow: 0 32px 72px rgba(22,77,95,.2), 0 0 0 1px rgba(255,255,255,.25) inset;
}

.shipping-gallery__slide::after {
  background:
    linear-gradient(180deg, rgba(8,33,45,.04) 28%, rgba(8,33,45,.86) 100%),
    linear-gradient(90deg, rgba(8,33,45,.18), transparent 42%);
}

.shipping-brief {
  background: rgba(12,55,68,.88);
  border: 1px solid rgba(255,255,255,.22);
  border-top: 4px solid #8fd0df;
  box-shadow: 0 30px 72px rgba(22,77,95,.22), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(9px);
}

.shipping-route {
  position: relative;
  z-index: 2;
  margin-top: 34px;
  padding: 14px 16px;
  border-top: 1px solid rgba(18,59,74,.24);
  border-bottom: 1px solid rgba(18,59,74,.14);
  background: rgba(255,255,255,.3);
}

.shipping-route span {
  position: relative;
  z-index: 1;
  padding: 4px 5px;
  color: rgba(76,114,128,.68);
  transition: color .3s ease, background .3s ease, transform .3s ease;
}

.shipping-route span.is-active {
  color: #123b4a;
  background: rgba(255,255,255,.64);
  transform: translateY(-2px);
}

.shipping-route i {
  height: 2px;
  background: #9fc8d2;
  transform-origin: left center;
  transition: background .35s ease, transform .72s cubic-bezier(.19,1,.22,1);
}

.shipping-route i.is-complete { background: #3187a2; }

html.editorial-motion #shipping .shipping-route {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease .32s, transform .72s cubic-bezier(.19,1,.22,1) .32s;
}

html.editorial-motion #shipping.is-chapter-visible .shipping-route { opacity: 1; transform: none; }

html.editorial-motion #shipping .shipping-route i { transform: scaleX(0); }
html.editorial-motion #shipping.is-chapter-visible .shipping-route i { transform: scaleX(1); }

@media (max-width: 700px) {
  .shipping-route { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto; justify-content: flex-start; }
  .shipping-route span { flex: 0 0 auto; white-space: nowrap; }
  .shipping-route i { flex: 0 0 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .shipping-route,
  .shipping-route i,
  .shipping-route span { opacity: 1; transform: none; transition: none; }
}
