/* ============ Sail With Us — scoped ocean-gateway styles (this page only) ============ */
#swu{position:relative;--ink:#2A3B33;--teal:#0B6E66;--coral:#B8431F;--coral2:#E8623F;--gold:#E4B93B;--cream:#FCF6EC;--paper:#FFFDF7;font-family:'Nunito Sans',system-ui,sans-serif}
#swu .swu-scene-font{font-family:var(--font-display)}

/* ---- HERO OCEAN SCENE ---- */
#swu .swu-hero{position:relative;height:clamp(560px,74vh,740px);min-height:560px;overflow:hidden;background:linear-gradient(180deg,#8FC3D8 0%,#B9D9DC 20%,#EBE1C0 40%,#FBE0A6 52%,#F9C97F 60%,#F4B06A 63%,#2FA0B8 63%,#1C88A6 78%,#0E6C8E 100%)}
#swu .swu-layer{position:absolute;inset:0;pointer-events:none}
#swu .swu-sun{position:absolute;left:58%;top:20%;width:118px;height:118px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#FFF6D8,#FFE49B 46%,#FDCB6E 78%);box-shadow:0 0 60px 30px rgba(255,215,130,.55),0 0 130px 70px rgba(255,200,110,.35);animation:swuSun 8s ease-in-out infinite}
#swu .swu-cloud{position:absolute;left:0}
#swu .swu-gull{position:absolute;left:0}
#swu .swu-sea{position:absolute;left:0;right:0;top:60%;bottom:0;background:linear-gradient(180deg,#5FC3D2 0%,#37A7BE 26%,#1E8AA8 58%,#0E6C8E 100%);overflow:hidden}
#swu .swu-glitter{position:absolute;left:50%;top:0;width:150px;height:150px;transform:translateX(-42px);opacity:.8}
#swu .swu-glitter>div{width:100%;height:100%;background:repeating-linear-gradient(180deg,rgba(255,240,190,.9) 0 3px,transparent 3px 9px);-webkit-mask-image:radial-gradient(60% 100% at 50% 0,#000,transparent 72%);mask-image:radial-gradient(60% 100% at 50% 0,#000,transparent 72%);animation:swuGlitter 6s ease-in-out infinite}
#swu .swu-spark{position:absolute;border-radius:50%;background:#FFF3CE;animation:swuSparkle 3.6s ease-in-out infinite}
#swu .swu-wave{position:absolute;left:-5%;right:-5%}
#swu .swu-wave svg{display:block;width:110%}
#swu .swu-boat2{position:absolute;left:14%;top:57.4%}
#swu .swu-boat{position:absolute;left:29%;top:50%;z-index:6}
#swu .swu-fore{position:absolute;left:0;right:0;bottom:-6px;z-index:4}
#swu .swu-fore svg{display:block;width:112%;margin-left:-6%}
#swu .swu-bubble{position:absolute;border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.92),rgba(255,255,255,.12) 62%,transparent);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
/* the fishing line's top anchor: a static marker inside .swu-boat at the leader's rest end
   (the rod + leader are drawn inside the boat SVG so they bob/rock with the boat) */
#swu .swu-thread-top{position:absolute;width:0;height:0}
/* the full-page fishing line: one SVG spanning #swu, drawn down the right gutter */
#swu .swu-thread{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}

/* ---- headline plate ---- */
#swu .swu-plate{position:absolute;left:clamp(20px,5vw,60px);top:clamp(78px,12vh,120px);z-index:20;max-width:min(460px,86vw)}
#swu .swu-kicker{display:inline-block;background:var(--coral);color:var(--cream);font:800 11px/1 'Nunito Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;border-radius:4px;transform:rotate(-1.5deg);box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
#swu .swu-plate-card{margin-top:14px;background:rgba(252,246,236,.94);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 22px 44px -22px rgba(10,50,60,.7);padding:24px 28px 26px;transform:rotate(-1deg)}
#swu h1.swu-h1{font:800 clamp(38px,5.4vw,60px)/.94 var(--font-display);color:var(--teal);margin:0 0 12px;text-wrap:balance;text-shadow:2px 3px 0 rgba(11,110,102,.12)}
#swu .swu-plate-card p{font:600 16.5px/1.55 'Nunito Sans',sans-serif;color:var(--ink);margin:0 0 20px;text-wrap:pretty}
#swu .swu-plate-card em{font-style:normal;font-weight:800;color:var(--coral)}
#swu .swu-cta{display:inline-block;font:800 13px/1 'Nunito Sans',sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--cream);background:var(--coral);padding:14px 22px;border:2.5px solid var(--ink);border-radius:9px;box-shadow:4px 4px 0 var(--ink);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
#swu .swu-cta:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
#swu .swu-cta.ghost{color:var(--teal);background:var(--cream);border-color:var(--teal);box-shadow:4px 4px 0 var(--teal)}
#swu .swu-cta.ghost:hover{box-shadow:5px 5px 0 var(--teal)}
#swu .swu-peek{display:inline-block;font:700 13.5px/1 'Nunito Sans',sans-serif;color:var(--teal);padding:14px 6px;border-bottom:2px solid var(--teal);text-decoration:none}

/* ---- the trailing fishing line + the catch on the seabed ---- */
#swu .swu-thread-line{fill:none;stroke:#EAF4EF;stroke-width:1.6;stroke-linecap:round;opacity:.92}
/* sandy seabed at the very bottom of the page, below the closing CTA */
#swu .swu-seafloor{position:relative;z-index:1;height:320px;overflow:hidden;background:linear-gradient(180deg,#0B506C 0%,#0A4256 34%,#083b4f 52%)}
#swu .swu-seafloor .sand{position:absolute;left:0;right:0;bottom:0;height:190px}
#swu .swu-seafloor .sand svg{position:absolute;inset:0;width:100%;height:100%}
#swu .swu-seafloor .amb{position:absolute;left:0;right:0;bottom:0;height:250px;pointer-events:none}
/* the resting scroll — a working link to booking; a stationary hit-box (.swu-scroll-hit)
   takes the hover so lifting the visual never moves the target (no shake) */
#swu .swu-scroll{position:absolute;bottom:56px;right:12%;width:230px;height:156px;z-index:5;cursor:pointer;text-decoration:none}
#swu .swu-scroll-hit{position:absolute;inset:-6px;z-index:2}
#swu .swu-scroll-vis{position:absolute;inset:0;pointer-events:none;transform-origin:bottom center;transition:transform .28s ease-out;animation:swuSettle 6.5s ease-in-out infinite}
#swu .swu-scroll-vis svg{display:block;width:100%;height:100%;overflow:visible}
#swu .swu-scroll:hover .swu-scroll-vis,#swu .swu-scroll:focus-visible .swu-scroll-vis{transform:translateY(-7px) rotate(-1.6deg)}
#swu .swu-scroll:focus-visible{outline:none}
#swu .swu-scroll:focus-visible .swu-scroll-hit{outline:3px solid var(--gold);outline-offset:2px;border-radius:8px}

/* ---- on-the-water body ---- */
#swu .swu-body{position:relative;background:linear-gradient(180deg,#0E6C8E 0%,#0F6484 40%,#0B506C 100%);padding:clamp(40px,5vw,72px) clamp(20px,4vw,56px) clamp(52px,6vw,84px);overflow:hidden}
#swu .swu-body .swu-spark{background:#CFEFF5}
#swu .swu-card{position:relative;max-width:1000px;margin:0 auto 38px;background:var(--paper);border:2px solid #EBDCC0;border-radius:18px;box-shadow:0 30px 60px -30px rgba(10,50,60,.6);padding:clamp(26px,3.5vw,42px)}
#swu .swu-eyebrow{font:700 12px/1 'Nunito Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);margin-bottom:12px}
#swu .swu-card h2{font:800 clamp(26px,3.4vw,38px)/1.05 var(--font-display);color:var(--teal);margin:0 0 16px;text-wrap:balance}
#swu .swu-card p{font:400 16.5px/1.7 'Nunito Sans',sans-serif;color:var(--ink);margin:0 0 14px;max-width:560px;text-wrap:pretty}
#swu .swu-card p em{font-style:normal;font-weight:700;color:var(--teal)}
#swu .swu-invite{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(24px,3vw,42px);align-items:center}
#swu .swu-photo{position:relative;transform:rotate(1.4deg)}
#swu .swu-photo .tape{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-3deg);width:110px;height:26px;background:rgba(228,185,59,.6);box-shadow:0 2px 5px rgba(0,0,0,.1);z-index:3}
#swu .swu-photo .frame{background:#fff;padding:12px 12px 16px;box-shadow:0 18px 34px -18px rgba(10,50,60,.5)}
#swu .swu-photo img{display:block;width:100%;height:230px;object-fit:cover}
#swu .swu-photo .cap{font:600 19px/1 'Caveat',cursive;color:#8B5E3C;margin-top:9px;padding-left:2px}

/* rates + availability */
#swu .swu-rates-row{display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:stretch;max-width:1000px;margin:0 auto 38px}
#swu .swu-rates{position:relative;overflow:hidden;margin:0}
#swu .swu-tbc{position:absolute;top:16px;right:-30px;transform:rotate(9deg);background:var(--gold);color:#3a2e22;font:800 10px/1 'Nunito Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:6px 34px}
#swu .swu-rate-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#swu .swu-rate{border:2px dashed #d8c7ad;border-radius:14px;padding:20px 18px;background:#FBF4E6}
#swu .swu-rate .amt{font:800 40px/1 var(--font-display);color:var(--teal)}
#swu .swu-rate .per{font:700 13px/1.3 'Nunito Sans',sans-serif;color:#3a2e22;margin-top:4px}
#swu .swu-rate .note{font:400 13.5px/1.5 'Nunito Sans',sans-serif;color:#6b5942;margin-top:8px}
#swu .swu-rate-fine{font:600 14px/1.55 'Nunito Sans',sans-serif;color:var(--ink);margin:18px 0 0;text-wrap:pretty}
#swu .swu-avail{background:#0B4A50;border-radius:18px;box-shadow:0 30px 60px -30px rgba(10,50,60,.7);padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;justify-content:center;color:var(--cream)}
#swu .swu-avail .eyebrow{font:700 12px/1 'Nunito Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#7FD6C6;margin-bottom:14px}
#swu .swu-avail-btn{display:inline-flex;align-items:center;gap:11px;align-self:flex-start;background:#0B6E66;color:var(--cream);border:none;border-radius:999px;padding:12px 20px 12px 16px;font:800 15px/1 'Nunito Sans',sans-serif;box-shadow:0 6px 16px -6px rgba(0,0,0,.5);font-family:'Nunito Sans',sans-serif}
#swu .swu-avail-btn[data-state="off"]{background:#7a3b2c}
#swu .swu-dot{width:12px;height:12px;border-radius:50%;background:#8BE0B0;box-shadow:0 0 0 4px rgba(139,224,176,.28)}
#swu .swu-avail-btn[data-state="off"] .swu-dot{background:#F0A98A;box-shadow:0 0 0 4px rgba(240,169,138,.28)}
#swu .swu-avail p{font:400 14.5px/1.6 'Nunito Sans',sans-serif;color:#cfe6e2;margin:16px 0 0}

/* four doors */
#swu .swu-doors-wrap{position:relative;max-width:1040px;margin:0 auto}
#swu .swu-doors-head{text-align:center;margin-bottom:30px}
#swu .swu-doors-head h2{font:800 clamp(26px,3.2vw,38px)/1.05 var(--font-display);color:var(--cream);margin:0 0 8px;text-shadow:0 2px 12px rgba(10,50,60,.5)}
#swu .swu-doors-head p{font:600 15.5px/1.5 'Nunito Sans',sans-serif;color:#dff1f4;margin:0}
#swu .swu-doors{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
#swu .swu-door{text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .4s cubic-bezier(.34,1.1,.5,1)}
#swu .swu-door:hover{transform:translateY(-8px)}
#swu .swu-porthole{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#F3DFAE,#D9A94E 60%,#B07E2E);box-shadow:0 16px 30px -14px rgba(10,50,60,.7),inset 0 0 0 8px rgba(255,255,255,.18),inset 0 0 0 10px rgba(58,46,34,.25);position:relative;animation:swuBobSm 6s ease-in-out infinite}
#swu .swu-porthole .glass{position:absolute;inset:14px;border-radius:50%;background:linear-gradient(180deg,#EAF6F3,#CFEAE6);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 4px 10px rgba(10,50,60,.25)}
#swu .swu-door .t{font:800 18px/1.1 var(--font-display);color:var(--cream);margin:16px 0 5px}
#swu .swu-door .d{font:500 13px/1.5 'Nunito Sans',sans-serif;color:#dff1f4;max-width:200px}
#swu .swu-door .go{margin-top:10px;font:800 11.5px/1 'Nunito Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}

/* closing cta */
#swu .swu-close{position:relative;max-width:760px;margin:clamp(44px,6vw,72px) auto 0;text-align:center}
#swu .swu-close-card{background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;box-shadow:0 34px 64px -30px rgba(10,50,60,.75);padding:clamp(38px,5vw,56px) clamp(24px,4vw,44px)}
#swu .swu-close-card h2{font:800 clamp(28px,4vw,44px)/1.02 var(--font-display);color:var(--teal);margin:0 0 12px;text-wrap:balance}
#swu .swu-close-card p{font:400 16.5px/1.65 'Nunito Sans',sans-serif;color:var(--ink);max-width:520px;margin:0 auto 24px;text-wrap:pretty}
#swu .swu-close-btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:20px}
#swu .swu-emails{font:600 15px/1.6 'Nunito Sans',sans-serif;color:#6b5942}
#swu .swu-emails a{font-weight:800;color:var(--coral);text-decoration:none}
#swu .swu-emails a:hover{text-decoration:underline}

/* ---- keyframes (ambient loops — CSS so the scene lives even if GSAP fails) ---- */
@keyframes swuBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes swuBobSm{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes swuRock{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.9deg)}}
@keyframes swuWaveA{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}}
@keyframes swuWaveB{0%,100%{transform:translateX(2.4%)}50%{transform:translateX(-2.4%)}}
@keyframes swuCloud{from{transform:translateX(-16vw)}to{transform:translateX(120vw)}}
@keyframes swuGull{0%{transform:translate(-8vw,14px)}100%{transform:translate(118vw,-26px)}}
@keyframes swuWing{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.52)}}
@keyframes swuSparkle{0%,100%{opacity:.3}50%{opacity:.9}}
@keyframes swuGlitter{0%,100%{opacity:.45;transform:translateX(0) scaleY(1)}50%{opacity:.8;transform:translateX(-9px) scaleY(1.05)}}
@keyframes swuSun{0%,100%{transform:scale(1);opacity:.96}50%{transform:scale(1.045);opacity:1}}
@keyframes swuBoat2{0%{transform:translateX(0)}50%{transform:translateX(90px)}100%{transform:translateX(180px)}}
@keyframes swuFlag{0%,100%{transform:skewX(-7deg) scaleX(1)}50%{transform:skewX(7deg) scaleX(.9)}}
@keyframes swuFin{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@keyframes swuKelp{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes swuBubble{0%{transform:translateY(0);opacity:0}14%{opacity:.85}100%{transform:translateY(-118px);opacity:0}}
@keyframes swuSway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.6deg)}}
@keyframes swuSettle{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1.4deg)}}

@media (max-width:920px){
  #swu .swu-invite{grid-template-columns:1fr}
  #swu .swu-rates-row{grid-template-columns:1fr}
  #swu .swu-doors{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:560px){
  #swu .swu-rate-grid{grid-template-columns:1fr}
  #swu .swu-doors{grid-template-columns:1fr}
  #swu .swu-boat{left:16%}
  #swu .swu-scroll{right:6%;bottom:44px;width:188px;height:128px}
  #swu .swu-seafloor{height:280px}
}
@media (prefers-reduced-motion:reduce){
  #swu *{animation:none !important}
}