/* The opening is a live WebGL scene, with a single scroll-controlled camera. */
/* Short native-scroll journey: roughly two comfortable viewport gestures,
   without wheel interception, snapping or a change to the camera path. */
.maritime-intro { position: relative; height: 240svh; background: #040b13; }
.maritime-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; color: #fff; background: #040b13; }
.maritime-viewport { position: absolute; inset: 0; z-index: 1; }
.maritime-viewport canvas { display: block; width: 100%; height: 100%; }
.maritime-poster .maritime-viewport {
  overflow: hidden;
}
.maritime-poster .maritime-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 30%, rgba(241,142,66,.2), transparent 30%),
    linear-gradient(180deg, #291d2c 0%, #7e4d45 37%, #101e2c 38%, #040b13 100%);
  transition: opacity .35s ease;
}
.maritime-poster .maritime-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 12, 25, .38), transparent 45%, rgba(3, 12, 25, .18));
  transition: opacity .75s ease;
}
.maritime-poster .maritime-viewport canvas { opacity: 0; transition: opacity .35s ease; }
.maritime-poster.maritime-live .maritime-viewport::before,
.maritime-poster.maritime-live .maritime-viewport::after { opacity: 0; }
.maritime-poster.maritime-live .maritime-viewport canvas { opacity: 1; }
.maritime-shade { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(3,11,20,.2), transparent 30%, transparent 49%, rgba(2,8,16,.18) 61%, rgba(2,8,16,.88) 100%); }
.maritime-copy { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.maritime-message { position: absolute; left: 50%; bottom: 15.5%; width: min(950px, 82vw); text-align: center; opacity: 0; visibility: hidden; transform: translate(-50%, 24px); will-change: transform, opacity; }
.maritime-message.is-active { visibility: visible; opacity: 1; }
.maritime-message h1, .maritime-message h2 { font-family: inherit; color: #fff; font-size: clamp(44px, 5.8vw, 88px); font-weight: 400; line-height: 1.04; letter-spacing: -.055em; margin: 0; text-wrap: balance; text-shadow: 0 3px 32px rgba(1,8,18,.45); animation: none; }
.maritime-message em { font-style: normal; color: #afddf0; }
.maritime-eyebrow { color: rgba(239,248,255,.77); margin: 0 0 18px; font-size: 10px; font-weight: 600; line-height: 1.4; letter-spacing: .22em; }
.maritime-progress { position: absolute; bottom: 0; left: 0; z-index: 6; width: 100%; height: 2px; background: rgba(255,255,255,.07); }
.maritime-progress span { display: block; width: var(--maritime-progress, 0%); height: 100%; background: linear-gradient(90deg, #003a8f, #74c6ed 65%, #ffa670); box-shadow: 0 0 12px rgba(91,178,220,.5); }
.maritime-endcap { position: absolute; z-index: 7; bottom: -1px; height: 25px; width: 100%; background: #f8faf9; clip-path: polygon(0 0, 12% 0, 15% 95%, 85% 95%, 88% 0, 100% 0, 100% 100%, 0 100%); opacity: var(--maritime-end,0); }
.maritime-power { position: relative; isolation: isolate; overflow: hidden; padding: 100px 6vw 80px; background: #f8faf9; color: #071c32; text-align: center; }
.maritime-power-backdrop { display: block; position: absolute; z-index: -2; inset: -8px; overflow: hidden; pointer-events: none; }
.maritime-power-backdrop img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; filter: blur(2.5px) saturate(.65); }
/* Keep the readability wash on the photo's own overscan box, not a separate
   section-sized layer: blur edges and the bottom always stay covered. */
.maritime-power-backdrop::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(248,250,249,.84), rgba(242,247,252,.72) 45%, rgba(248,250,249,.9)), linear-gradient(110deg, rgba(0,58,143,.1), rgba(166,197,222,.08)); }
.maritime-power > :not(.maritime-power-backdrop) { position: relative; }
.maritime-power-eyebrow { margin: 0 0 24px; font-size: 10px; font-weight: 600; letter-spacing: .19em; color: #617382; }
.maritime-power h2 { max-width: 1060px; margin: 0 auto 56px; font-size: clamp(40px,5.2vw,82px); font-weight: 400; line-height: 1.06; letter-spacing: -.055em; text-wrap: balance; }
.maritime-power h2 em { font-style: normal; color: #003a8f; }
.maritime-power-copy { max-width: 660px; margin: 30px auto 56px; font-size: 16px; color: #536776; line-height: 1.65; }
.maritime-capabilities { display: grid; grid-template-columns: repeat(4,1fr); max-width: 1340px; margin: 0 auto; border-block: 1px solid #dae1e5; background: rgba(248,250,249,.76); text-align: left; }
.maritime-capabilities > div { position: relative; padding: 30px 24px 34px; border-right: 1px solid #dae1e5; }
.maritime-capabilities > div:first-child { border-left: 1px solid #dae1e5; }
.maritime-capabilities > div::before { content: '+'; position: absolute; top: -9px; left: -5px; color: #8fa3ae; font-size: 15px; font-weight: 300; }
.maritime-capabilities span { display: block; font-size: 10px; letter-spacing: .08em; color: #405f73; }
.maritime-capabilities strong { display: block; margin: 0 0 18px; font-size: clamp(20px,1.9vw,28px); line-height: 1.15; font-weight: 400; letter-spacing: -.035em; }
.maritime-capabilities small { font-size: 12px; line-height: 1.6; color: #526672; }
.maritime-process-link { margin: 42px auto 0; display: inline-flex; gap: 28px; align-items: center; padding: 13px 0; font-size: 14px; }
.maritime-process-link span { color: #f57625; font-size: 21px; transition: transform .3s; }
.maritime-process-link:hover span { transform: translate(4px,4px); }
.maritime-power.is-revealed .maritime-capabilities > div { animation: maritimeReveal .8s both; }
.maritime-power.is-revealed .maritime-capabilities > div:nth-child(2) { animation-delay: .09s; }
.maritime-power.is-revealed .maritime-capabilities > div:nth-child(3) { animation-delay: .18s; }
.maritime-power.is-revealed .maritime-capabilities > div:nth-child(4) { animation-delay: .27s; }
@keyframes maritimeReveal { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.maritime-fallback { position: absolute; z-index: 0; inset: 0; background: linear-gradient(#6f5367 0%, #bd825c 29%, #efa349 39%, #263041 40%, #101f30 68%, #030b14 100%); }
.fallback-sea { position: absolute; inset: 40% -30% 0; background: repeating-radial-gradient(ellipse at 30% 0%, transparent 0 10px, rgba(145,202,225,.08) 11px 12px, transparent 13px 26px); animation: maritimeFallbackSea 12s linear infinite; }
.fallback-vessel { position: absolute; top: 37%; left: 8%; width: 84%; height: 12%; background: linear-gradient(180deg,#465865,#051a2d 70%,#2f151d); clip-path: polygon(0 15%,83% 15%,100% 0,94% 75%,5% 100%); box-shadow: 0 20px 60px #020a13; }
@keyframes maritimeFallbackSea { to { transform: translate(4%,3%); } }
.journey { height: 1320svh; }
@media (max-width:980px) {
  /* Keep the pinned opening stable while mobile browser chrome expands or
     collapses. Dynamic viewport units resize mid-scroll and create a gap/jump. */
  .maritime-intro { height: 240svh; height: 240lvh; }
  .maritime-stage { height: 100svh; height: 100lvh; }
  .maritime-message { bottom: 17%; width: min(670px,87vw); }
  .maritime-message h1, .maritime-message h2 { font-size: clamp(36px,5.8vw,62px); }
  .maritime-power { padding: 76px 24px 64px; }
  .maritime-capabilities { grid-template-columns: repeat(2,1fr); }
  .maritime-capabilities > div:nth-child(3) { border-left: 1px solid #dae1e5; }
  .maritime-capabilities > div:nth-child(n+3) { border-top: 1px solid #dae1e5; }
}
@media (max-width:620px) {
  .maritime-message { bottom: 19%; width: 89vw; }
  .maritime-message h1, .maritime-message h2 { font-size: clamp(31px,8.5vw,46px); line-height: 1.08; letter-spacing: -.05em; }
  .maritime-eyebrow { font-size: 8px; letter-spacing: .15em; margin-bottom: 16px; }
  .maritime-power { padding: 70px 20px 54px; }
  .maritime-power-backdrop img { object-position: 54% 34%; filter: blur(2px) saturate(.65); }
  .maritime-power h2 { margin-bottom: 38px; font-size: clamp(35px,9.5vw,50px); }
  .maritime-power-copy { font-size: 14px; margin: 24px auto 38px; }
  .maritime-capabilities > div { padding: 24px 14px 26px; }
  .maritime-capabilities strong { font-size: 22px; margin: 0 0 13px; }
  .maritime-capabilities small { font-size: 11px; }
  .maritime-capabilities span { font-size: 8px; letter-spacing: .04em; }
}
@media (prefers-reduced-motion:reduce) { .maritime-power.is-revealed .maritime-capabilities > div { animation: none; } .fallback-sea { animation: none; } }