/* Photo Ferry product: independent page, shared lab identity */
.ferry-page {--ferry-ink:#2c423f;--ferry-sage:#8dae9c;--ferry-water:#8bbdcc;}
.ferry-page .site-header{padding:32px 0}
.ferry-page .product-nav{display:flex;align-items:center;gap:24px}
.ferry-page .product-nav .nav-back{font-size:12px;color:#6d8679;font-weight:650}
.ferry-hero{display:grid;grid-template-columns:1.13fr .87fr;align-items:center;gap:5vw;min-height:570px;padding:86px 0 110px}
.ferry-hero h1{font-size:clamp(43px,5.5vw,74px);letter-spacing:-.06em;line-height:1.25;margin:25px 0}
.ferry-hero h1 em{font-style:normal;color:#729887}
.ferry-hero p{line-height:1.95;color:#62766c;font-size:clamp(15px,1.45vw,18px);word-break:keep-all;max-width:570px}
.ferry-hero .hero-small{font-size:14px;color:#688d82;font-weight:650;letter-spacing:-.02em;margin-top:18px}
.ferry-hero .eyebrow{font-size:10px}
.ferry-visual{background:linear-gradient(152deg,#e5f1ed 0%,#dfe9e5 54%,#d4e5ed 100%);border:1px solid #d4e1d9;border-radius:38px;min-height:425px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 25px 55px #617d7415}
.ferry-visual::before{content:'';width:360px;height:360px;position:absolute;border:1px solid #ffffffa8;border-radius:50%;left:-115px;bottom:-160px}
.ferry-visual::after{content:'';width:270px;height:270px;position:absolute;border:1px solid #ffffff9e;border-radius:50%;right:-85px;top:-110px}
.ferry-visual img{display:block;width:min(66%,275px);height:auto;filter:drop-shadow(0 17px 22px #24506b2a);z-index:1;border-radius:25%}
.ferry-visual .visual-label{position:absolute;bottom:27px;left:28px;z-index:2;color:#5a877c;font-size:10px;letter-spacing:.2em;font-weight:750}
.ferry-section{padding:84px 0;border-top:1px solid var(--line)}
.ferry-section .section-kicker{letter-spacing:.19em}
.ferry-section h2{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.055em;margin:14px 0 16px;line-height:1.3;word-break:keep-all}
.ferry-section .section-intro{max-width:760px;line-height:1.9;color:#718277;margin-bottom:35px}
.ferry-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.ferry-step{background:#eaf0e9;border:1px solid #dce6dc;border-radius:22px;padding:29px 27px 35px;min-height:245px}
.ferry-step .step-num{font-size:11px;font-weight:800;letter-spacing:.14em;color:#7a9b8c}
.ferry-step h3{font-size:22px;margin:29px 0 12px;letter-spacing:-.04em}
.ferry-step p{font-size:14px;color:#697a70;line-height:1.85;word-break:keep-all;margin:0}
.ferry-flow{display:flex;align-items:center;gap:15px;justify-content:space-between;margin-top:30px}
.ferry-node{flex:1;text-align:center;border-radius:19px;border:1px solid #d6e2da;padding:25px 15px;background:#f2f5ef;min-width:0}
.ferry-node.middle{background:#e1eff0;border-color:#cbdfe2}
.ferry-node strong{display:block;font-size:16px;margin-bottom:9px}
.ferry-node small{color:#70857a;font-size:12px;line-height:1.5}
.ferry-arrow{color:#91a99a;font-size:22px;flex:none}
.ferry-dest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:15px}
.ferry-dest>div{background:#eaf0ea;border-radius:18px;padding:27px 28px}
.ferry-dest strong{font-size:18px;display:block;margin-bottom:10px}
.ferry-dest small{font-size:13px;color:#6a7d70}
.ferry-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:27px}
.ferry-feature{padding:29px;border:1px solid #e0e8dc;border-radius:20px;background:#f8f9f4}
.ferry-feature h3{font-size:19px;margin:0 0 12px}
.ferry-feature p{font-size:14px;line-height:1.9;color:#6d7a71;margin:0;word-break:keep-all}
.ferry-notice{background:#eaf0e9;border-radius:24px;padding:35px;margin:35px 0 0}
.ferry-notice h3{font-size:17px;margin:0 0 12px}
.ferry-notice p{color:#697b70;font-size:13px;line-height:1.9;margin:0}
.ferry-final{text-align:center;padding:90px 0 110px}
.ferry-final h2{font-size:clamp(28px,3.7vw,49px);letter-spacing:-.06em;line-height:1.45;margin:0 0 18px}
.ferry-final p{color:#84978b;font-size:13px;letter-spacing:.03em;margin-bottom:30px}
.ferry-final a{display:inline-flex;border-radius:40px;background:#365d54;color:white;padding:14px 25px;font-weight:650;font-size:13px}
@media(max-width:850px){.ferry-hero{grid-template-columns:1fr;gap:20px;min-height:0;padding:68px 0}.ferry-visual{min-height:330px}.ferry-steps{grid-template-columns:1fr}.ferry-step{min-height:0}.ferry-flow{flex-direction:column}.ferry-arrow{transform:rotate(90deg)}.ferry-node{width:100%}.ferry-dest{grid-template-columns:1fr}.ferry-section{padding:62px 0}}
@media(max-width:540px){.ferry-page .site-header{gap:10px}.ferry-page .product-nav{gap:9px}.ferry-page .product-nav .nav-back{display:none}.ferry-visual{min-height:290px}.ferry-features{grid-template-columns:1fr}.ferry-hero h1{font-size:clamp(36px,10vw,52px)}}

/* Photo Ferry 2.0 · Original icon boat animates independently of the sea. */
.ferry-visual{isolation:isolate}
.ferry-sailing-scene{position:relative;width:100%;height:425px;overflow:hidden;display:block;isolation:isolate;z-index:1;
 background:radial-gradient(ellipse at 58% 18%,#f1faff 0%,#d1e9f8 42%,#b4d8f0 83%,#9dcde9 100%);}
.ferry-sky-halo{position:absolute;inset:0;background:radial-gradient(circle at 66% 29%,#ffffff6f,transparent 51%);z-index:0}
.ferry-animated-boat{position:absolute;width:min(80%,420px);height:auto;max-width:none;left:50%;bottom:63px;
 transform:translateX(-50%);z-index:2;filter:drop-shadow(0 16px 13px #3a718a38);
 animation:ferry-gentle-bob 4.6s ease-in-out infinite;transform-origin:center 82%;will-change:transform}
.ferry-sea{position:absolute;left:-20%;width:140%;height:130px;border-radius:48% 52% 0 0 / 28% 36% 0 0;z-index:3;pointer-events:none;will-change:transform}
.ferry-sea-back{bottom:-56px;background:linear-gradient(180deg,#92c6e9e0 0%,#5ea9dbea 100%);animation:ferry-wave-back 7s ease-in-out infinite alternate}
.ferry-sea-front{bottom:-89px;background:linear-gradient(180deg,#a1d4f1e5 0%,#7bbce3f6 100%);border-top:3px solid #eafaffbf;animation:ferry-wave-front 8.5s ease-in-out infinite alternate-reverse}
@keyframes ferry-gentle-bob{0%,100%{transform:translate(-50%,1px) rotate(-1.05deg)}50%{transform:translate(-50%,-7px) rotate(1.05deg)}}
@keyframes ferry-wave-back{0%{transform:translateX(-2%) rotate(-1deg)}100%{transform:translateX(2%) rotate(1deg)}}
@keyframes ferry-wave-front{0%{transform:translateX(2%) rotate(.6deg)}100%{transform:translateX(-2%) rotate(-.6deg)}}
@media(max-width:850px){.ferry-sailing-scene{height:330px}.ferry-animated-boat{width:min(78%,360px);bottom:52px}}
@media(max-width:540px){.ferry-sailing-scene{height:290px}.ferry-animated-boat{width:min(82%,340px);bottom:50px}}
@media(prefers-reduced-motion:reduce){.ferry-animated-boat,.ferry-sea{animation:none!important;will-change:auto}.ferry-animated-boat{transform:translateX(-50%)}}

/* v2.1 — purpose-drawn ferry SVG, livelier travel rhythm and distinct wakes */
.ferry-visual .ferry-animated-boat {
  width:min(86%,450px);max-width:none;bottom:53px;border-radius:0;
  transform-origin:center 78%;filter:drop-shadow(0 11px 10px #285b8826);
  animation:ferry-sail-21 3.65s cubic-bezier(.43,0,.57,1) infinite;
}
.ferry-sailing-scene {background:radial-gradient(ellipse at 58% 24%,#f8fcff 0%,#d8effa 44%,#a9d6ed 100%)}
.ferry-sea-back {height:124px;bottom:-42px;animation:ferry-wave-back-21 4.9s ease-in-out infinite alternate}
.ferry-sea-front {height:137px;bottom:-84px;animation:ferry-wave-front-21 5.6s ease-in-out infinite alternate-reverse}
.ferry-wake {position:absolute;left:12%;bottom:75px;width:78%;height:16px;z-index:4;opacity:.75;
  background:repeating-linear-gradient(90deg,transparent 0 17px,#ffffffa8 18px 31px,transparent 32px 67px);
  border-radius:50%;filter:blur(2px);animation:ferry-wake-21 2.4s ease-in-out infinite alternate;pointer-events:none;}
@keyframes ferry-sail-21 {
  0%,100% {transform:translate(-51%,5px) rotate(-2.2deg)}
  28% {transform:translate(-49%,-5px) rotate(.55deg)}
  57% {transform:translate(-48%,-13px) rotate(2.4deg)}
  79% {transform:translate(-50%,-4px) rotate(-.4deg)}
}
@keyframes ferry-wave-back-21 {from{transform:translateX(-4%) rotate(-1.6deg)}to{transform:translateX(4%) rotate(1.1deg)}}
@keyframes ferry-wave-front-21 {from{transform:translateX(4%) rotate(1.2deg)}to{transform:translateX(-4%) rotate(-1.1deg)}}
@keyframes ferry-wake-21 {from{transform:translateX(12px) scaleX(.9);opacity:.35}to{transform:translateX(-12px) scaleX(1.08);opacity:.75}}
@media(max-width:850px){.ferry-visual .ferry-animated-boat{width:min(85%,410px);bottom:43px}}
@media(max-width:540px){.ferry-visual .ferry-animated-boat{width:min(89%,370px);bottom:40px}.ferry-wake{bottom:66px}}
@media(prefers-reduced-motion:reduce){
 .ferry-visual .ferry-animated-boat,.ferry-sea,.ferry-wake {animation:none!important;will-change:auto}
 .ferry-visual .ferry-animated-boat {transform:translateX(-50%)}
}

/* v2.2 — smoothly interpolated sailing and water flowing aft */
.ferry-visual .ferry-animated-boat { animation:ferry-sail-fluid 3.9s linear infinite;backface-visibility:hidden }
@keyframes ferry-sail-fluid {
0%,100%{transform:translate3d(-51%,3px,0) rotate(-1.7deg)}
12.5%{transform:translate3d(-50.65%,0px,0) rotate(-1.1deg)}
25%{transform:translate3d(-50.1%,-6px,0) rotate(.1deg)}
37.5%{transform:translate3d(-49.3%,-11px,0) rotate(1.3deg)}
50%{transform:translate3d(-48.8%,-13px,0) rotate(2deg)}
62.5%{transform:translate3d(-49%,-11px,0) rotate(1.3deg)}
75%{transform:translate3d(-49.7%,-5px,0) rotate(0deg)}
87.5%{transform:translate3d(-50.5%,1px,0) rotate(-1.2deg)}
}
.ferry-sea {overflow:hidden}
.ferry-sea-back {animation:ferry-sea-swell-back 5.4s ease-in-out infinite alternate}
.ferry-sea-front {animation:ferry-sea-swell-front 4.8s ease-in-out infinite alternate-reverse}
.ferry-sea::before {content:"";position:absolute;inset:0;pointer-events:none;background-repeat:repeat-x;animation:ferry-water-flow 6s linear infinite;will-change:background-position}
.ferry-sea-back::before {background-image:radial-gradient(ellipse 45px 5px at 65px 10px,rgba(244,253,255,.55) 0 47%,transparent 55%);background-size:160px 45px;opacity:.72;animation-duration:7.5s}
.ferry-sea-front::before {background-image:radial-gradient(ellipse 39px 4px at 55px 14px,rgba(247,254,255,.68) 0 50%,transparent 57%);background-size:150px 42px;animation-duration:5.4s}
@keyframes ferry-water-flow {from{background-position-x:0}to{background-position-x:-600px}}
@keyframes ferry-sea-swell-back {from{transform:translate3d(-1.2%,0,0) rotate(-.65deg)}to{transform:translate3d(1.2%,4px,0) rotate(.65deg)}}
@keyframes ferry-sea-swell-front {from{transform:translate3d(-1.2%,2px,0) rotate(.4deg)}to{transform:translate3d(1.2%,-2px,0) rotate(-.4deg)}}
.ferry-wake {background:repeating-linear-gradient(90deg,transparent 0 16px,#ffffffe0 18px 32px,transparent 35px 72px);background-size:144px 100%;animation:ferry-wake-flow 3.5s linear infinite}
@keyframes ferry-wake-flow {0%{background-position-x:0;opacity:.4;transform:scaleX(.96)}50%{opacity:.72;transform:scaleX(1.05)}100%{background-position-x:-432px;opacity:.4;transform:scaleX(.96)}}
@media(prefers-reduced-motion:reduce) {.ferry-sea::before{animation:none!important;will-change:auto}.ferry-visual .ferry-animated-boat{animation:none!important;transform:translateX(-50%)}.ferry-sea,.ferry-wake{animation:none!important}}

/* v2.3 — Port-facing ferry: bow on the LEFT, water passing RIGHT.
   The original illustration and accessible reduced-motion mode remain intact. */
.ferry-visual .ferry-animated-boat {
  animation: ferry-port-sail 3.9s linear infinite;
}
@keyframes ferry-port-sail {
  0%,100% { transform:translate3d(-50%,3px,0) rotate(-1.7deg) }
  12.5% { transform:translate3d(-50.45%,0,0) rotate(-1.1deg) }
  25% { transform:translate3d(-50.9%,-6px,0) rotate(.1deg) }
  37.5% { transform:translate3d(-51.4%,-11px,0) rotate(1.3deg) }
  50% { transform:translate3d(-51.8%,-13px,0) rotate(2deg) }
  62.5% { transform:translate3d(-51.4%,-11px,0) rotate(1.3deg) }
  75% { transform:translate3d(-50.9%,-5px,0) rotate(0deg) }
  87.5% { transform:translate3d(-50.45%,1px,0) rotate(-1.2deg) }
}
/* Foam streaks drift right as the ferry travels left. Matching tile multiples
   keep the transition seamless at loop boundaries. */
.ferry-sea-back::before { animation:ferry-water-right-back 7.5s linear infinite }
.ferry-sea-front::before { animation:ferry-water-right-front 5.4s linear infinite }
@keyframes ferry-water-right-back { from{background-position-x:0} to{background-position-x:800px} }
@keyframes ferry-water-right-front { from{background-position-x:0} to{background-position-x:750px} }
/* The wake trails the right-hand stern rather than the left-hand bow. */
.ferry-wake {
  left:49%;width:45%;
  animation:ferry-wake-right 3.5s linear infinite;
}
@keyframes ferry-wake-right {
  0% {background-position-x:0;opacity:.4;transform:scaleX(.96)}
  50% {opacity:.72;transform:scaleX(1.05)}
  100% {background-position-x:432px;opacity:.4;transform:scaleX(.96)}
}
@media (prefers-reduced-motion:reduce) {
  .ferry-visual .ferry-animated-boat,
  .ferry-sea::before,
  .ferry-wake {animation:none!important}
  .ferry-visual .ferry-animated-boat {transform:translateX(-50%)}
}