/* Crafto element-3d-parallax-hover: original Atropos wrappers and -8/+3 layers.
   Adaptation: a desktop monitor replaces the phone; Sailsocean copy sits beside it.
   Original images are unchanged. Palette changes are presentation-only filters. */
#banner .yf-poster { filter: grayscale(1) sepia(.15) hue-rotate(155deg) saturate(.65) brightness(1.02); }
#banner .yf-poster, #banner .yf-canvas { z-index: 0; }
#banner .yf-overlay { z-index: 3; }
#banner .yf-crafto-opening {
  position: absolute; z-index: 2; inset: 0; pointer-events: none;
}
#banner .yf-crafto-parallax {
  position: absolute; right: 3.5%; top: 50%;
  width: min(59vw, 1200px); height: min(82vh, 920px);
  transform: translate3d(0, -47%, 100px); pointer-events: auto;
}
/* Retain the source transform hierarchy. The wider replacement hardware needs
   visible overflow so the stand and rear contour remain intact while rotating. */
#banner .yf-crafto-parallax .atropos-inner { overflow: visible; }
#banner .yf-crafto-back {
  position: absolute; left: 0; right: 0; top: 0;
  width: 93%; margin: 0 auto;
}
#banner .yf-crafto-back img {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) sepia(.55) hue-rotate(150deg) saturate(1.5);
  opacity: .5; pointer-events: none;
}
#banner .yf-crafto-front {
  position: relative; z-index: 9; width: 92%; margin: 0 auto;
  padding-top: min(8vh, 88px);
}
#banner .yf-monitor { position: relative; width: 100%; padding-bottom: 16%; }
#banner .yf-monitor-panel {
  position: relative; z-index: 2; padding: 1.25% 1.25% 1.85%;
  border: 1px solid #9aa8b1; border-radius: clamp(10px, 1.25vw, 24px);
  background: linear-gradient(145deg, #29343c, #090f15 60%, #24313b);
  box-shadow: inset 0 1px 1px #d5e0e6b3, 0 2px 1px #1023374d,
    0 24px 40px -18px #18334e59;
}
#banner .yf-monitor-screen {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: clamp(3px, .38vw, 7px);
  background: #e5eff3; pointer-events: none; user-select: none;
}
#banner .yf-monitor-panel::after {
  content: ''; position: absolute; width: 4px; height: 2px;
  right: 3%; bottom: .9%; border-radius: 100%; background: #9dafb4;
}
#banner .yf-monitor-neck {
  position: absolute; z-index: 1; left: 42%; bottom: 3.3%;
  width: 16%; height: 22%;
  clip-path: polygon(23% 0, 77% 0, 85% 83%, 100% 100%, 0 100%, 15% 83%);
  background: linear-gradient(90deg, #8d9ba5, #dfe7ec 25%, #bdccd6 66%, #8095a4);
  box-shadow: inset 0 20px 25px #20374866;
}
#banner .yf-monitor-base {
  position: absolute; z-index: 3; left: 30%; bottom: 2%; width: 40%; height: 3.5%;
  border-radius: 50% 50% 28% 28% / 60% 60% 35% 35%;
  background: linear-gradient(#dce5eb, #9faeb9 70%, #647887);
  box-shadow: 0 2px 1px #eef5f9, 0 16px 18px -6px #1e39524d;
}
#banner .yf-scene-one { padding-left: clamp(48px, 6.65vw, 150px); }
#banner .yf-scene-one .yf-brand-copy { width: 32%; transform: translateY(-3%); }
#banner .yf-scene-one .yf-subtitle-tail { display: block; }
#banner .yf-scene-one h1 { font-size: clamp(80px, 7.4vw, 142px); }
#banner .yf-scene-one .yf-subtitle { font-size: clamp(24px, 2.1vw, 36px); }
#banner .yf-scene-one .yf-description { max-width: 360px; text-wrap: balance; }
#banner .yf-scene-one .yf-first-cta { position: relative; top: auto; margin-top: 32px; }
#banner .yf-scene-one .yf-circle { background: #1d3045; color: white; }
@media (min-width: 1921px) {
  #banner .yf-crafto-parallax { right: max(3.5%, calc((100vw - 2200px) / 2)); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  #banner .yf-crafto-parallax { right: 0; width: 59vw; height: auto; aspect-ratio: 1.12; transform: translate3d(0, -44%, 0); }
  #banner .yf-crafto-front { padding-top: 8%; }
  #banner .yf-scene-one { padding-left: 5%; }
  #banner .yf-scene-one .yf-brand-copy { width: 38%; }
  #banner .yf-scene-one h1 { font-size: clamp(70px, 9vw, 100px); }
  #banner .yf-scene-one .yf-subtitle { font-size: 25px; }
  #banner .yf-scene-one .yf-description { font-size: 12px; }
}
@media (max-width: 767px) {
  #banner .yf-scene-one { align-items: flex-start; padding: clamp(88px, 13vh, 124px) 26px 0; }
  #banner .yf-scene-one .yf-brand-copy { width: 100%; transform: none; }
  #banner .yf-scene-one .yf-brand-kicker { font-size: 10px; margin-bottom: 10px; }
  #banner .yf-scene-one h1 { font-size: clamp(64px, 18vw, 92px); line-height: 1.06; }
  #banner .yf-scene-one .yf-subtitle { font-size: clamp(20px, 5.4vw, 28px); margin-top: 14px; line-height: 1.5; }
  #banner .yf-scene-one .yf-description { margin-top: 12px; font-size: 11px; }
  #banner .yf-mobile-break { display: none; }
  #banner .yf-scene-one .yf-first-cta { margin-top: 18px; }
  #banner .yf-scene-one .yf-booking-label { font-size: 12px; }
  #banner .yf-scene-one .yf-booking .yf-circle { width: 34px; height: 34px; }
  #banner .yf-crafto-parallax {
    width: min(96vw, 540px); height: auto; aspect-ratio: 1.2;
    top: auto; bottom: 7vh; left: 50%; right: auto;
    transform: translate3d(-50%, 0, 0); pointer-events: none;
  }
  #banner .yf-crafto-back { top: -3%; width: 94%; }
  #banner .yf-crafto-front { width: 91%; padding-top: 5%; }
}
@media (max-width: 767px) and (max-height: 740px) {
  #banner .yf-scene-one { padding-top: 77px; }
  #banner .yf-scene-one h1 { font-size: 60px; }
  #banner .yf-scene-one .yf-subtitle { font-size: 20px; margin-top: 10px; }
  #banner .yf-scene-one .yf-subtitle-tail { display: inline; }
  #banner .yf-scene-one .yf-description { margin-top: 8px; }
  #banner .yf-crafto-parallax { width: min(85vw, 430px); bottom: 0; }
}
@media (max-height: 550px) and (min-width: 768px) {
  #banner .yf-crafto-parallax { width: min(52vw, 75vh); right: 8%; height: 85vh; }
  #banner .yf-crafto-front { padding-top: 7%; }
  #banner .yf-scene-one .yf-brand-copy { transform: translateY(8%); width: 45%; }
  #banner .yf-scene-one h1 { font-size: 56px; }
  #banner .yf-scene-one .yf-brand-kicker { display: none; }
  #banner .yf-scene-one .yf-subtitle { font-size: 20px; margin-top: 12px; }
  #banner .yf-scene-one .yf-subtitle-tail { display: inline; }
  #banner .yf-scene-one .yf-description { margin-top: 10px; }
  #banner .yf-scene-one .yf-first-cta { margin-top: 16px; }
}