:root {
  --pink: #f00088;
  --pink-dark: #c90070;
  --teal: #09aaa7;
  --teal-dark: #067f83;
  --ink: #090a0b;
  --navy: #082c3b;
  --cream: #fffaf3;
  --sand: #f6eadb;
  --white: #ffffff;
  --line: rgba(8,44,59,.12);
  --shadow: 0 22px 55px rgba(8,44,59,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.container { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }

.top-strip {
  background: var(--ink);
  color: white;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.top-strip-inner { display:flex; justify-content:space-between; padding: 8px 0; }
.top-strip a { color: #fff; opacity: .85; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,250,243,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { min-height: 84px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand img { width: 184px; height:auto; }
.nav-links { display:flex; align-items:center; gap:28px; font-size: 13px; font-weight:700; }
.nav-links a:not(.nav-cta) { position:relative; }
.nav-links a:not(.nav-cta)::after { content:""; position:absolute; left:0; bottom:-7px; width:0; height:2px; background:var(--pink); transition:.2s; }
.nav-links a:not(.nav-cta):hover::after { width:100%; }
.nav-cta { background:var(--ink); color:#fff; padding:12px 17px; border-radius:999px; }
.nav-cta span { color:var(--pink); }
.menu-toggle { display:none; border:0; background:none; font-size:25px; }

.hero {
  position:relative; overflow:hidden; min-height:690px;
  background: linear-gradient(145deg, #fffaf3 0%, #fff6ec 58%, #dff5f2 100%);
}
.hero::after {
  content:""; position:absolute; inset:auto -10% -160px; height:300px;
  background:var(--teal); border-radius:50% 50% 0 0 / 35% 35% 0 0;
  opacity:.14;
}
.hero-sun {
  position:absolute; width:460px; height:460px; border-radius:50%;
  right:-130px; top:-100px;
  background:radial-gradient(circle at 50% 50%, rgba(240,0,136,.24), rgba(240,0,136,0) 70%);
}
.wave { position:absolute; width:80vw; height:140px; right:-20vw; border-radius:50%; transform:rotate(-8deg); opacity:.25; }
.wave-one { bottom:35px; background:var(--teal); }
.wave-two { bottom:0; background:var(--pink); opacity:.11; }

.hero-grid { position:relative; z-index:2; min-height:690px; display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:50px; padding:70px 0 90px; }
.eyebrow { display:flex; align-items:center; gap:10px; color:var(--pink-dark); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.eyebrow span { width:28px; height:3px; background:var(--pink); display:inline-block; }
.eyebrow.teal { color:var(--teal-dark); }
.eyebrow.teal span { background:var(--teal); }
.eyebrow.light { color:#fff; }
.eyebrow.light span { background:var(--pink); }

h1,h2,h3 { margin:0; font-family:"Barlow Condensed", sans-serif; text-transform:uppercase; line-height:.92; letter-spacing:-.035em; }
h1 { font-size:clamp(58px, 7vw, 96px); max-width:700px; margin:24px 0 25px; }
h1 em,h2 em { font-style:normal; color:var(--pink); }
.hero-lead { max-width:600px; font-size:17px; color:#3f5158; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:16px; border-radius:999px; padding:15px 23px; font-size:13px; font-weight:800; border:2px solid transparent; cursor:pointer; }
.button-primary { background:var(--pink); color:#fff; box-shadow:0 12px 28px rgba(240,0,136,.22); }
.button-primary:hover { background:var(--pink-dark); transform:translateY(-1px); }
.button-ghost { border-color:var(--ink); }
.button-light { background:#fff; color:var(--ink); width:100%; }
.hero-note { display:flex; gap:9px; align-items:center; margin-top:25px; font-size:11px; color:#52636a; flex-wrap:wrap; }
.hero-note a { color:var(--teal-dark); font-weight:800; }
.mini-icon { color:var(--pink); }

.hero-art { position:relative; min-height:470px; display:flex; align-items:center; justify-content:center; }
.trailer-card {
  position:relative; width:min(530px, 100%); height:330px;
  border-radius:35px; overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.95), rgba(221,244,241,.8));
  border:1px solid rgba(8,44,59,.08);
  box-shadow:var(--shadow);
  transform:rotate(-4deg);
}
.trailer-card::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 78% 22%, rgba(240,0,136,.17), transparent 24%), radial-gradient(circle at 25% 75%, rgba(9,170,167,.25), transparent 30%); }
.badge {
  position:absolute; z-index:4; top:5px; right:18px; width:86px; height:86px; border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; text-align:center;
  font-family:"Barlow Condensed"; font-weight:800; font-size:27px; line-height:.72;
  transform:rotate(7deg); box-shadow:0 12px 25px rgba(0,0,0,.18);
}
.badge small { font-family:Inter; font-size:7px; letter-spacing:.2em; color:#fff; }
.boat-shape { position:absolute; left:52px; top:55px; width:350px; height:120px; }
.boat-deck { position:absolute; left:30px; top:30px; width:250px; height:18px; background:var(--ink); transform:skewX(-25deg); border-radius:10px 18px 2px 2px; }
.boat-cabin { position:absolute; left:100px; top:0; width:115px; height:52px; background:#fff; border:7px solid var(--ink); border-bottom:0; border-radius:45px 45px 0 0; transform:skewX(-16deg); }
.boat-hull { position:absolute; left:0; top:65px; width:335px; height:55px; background:var(--pink); clip-path:polygon(0 0, 100% 0, 88% 80%, 67% 100%, 22% 100%, 5% 65%); }
.boat-hull::after { content:""; position:absolute; left:22px; right:55px; bottom:12px; height:7px; background:#fff; opacity:.9; }
.trailer-frame { position:absolute; left:70px; right:45px; bottom:52px; height:88px; }
.rail { position:absolute; height:9px; background:var(--ink); border-radius:8px; transform:rotate(-4deg); }
.rail-a { left:0; right:35px; top:22px; }
.rail-b { left:32px; right:0; top:55px; }
.cross { position:absolute; width:9px; height:70px; background:var(--ink); transform:rotate(17deg); border-radius:8px; }
.cross-a { left:95px; top:8px; } .cross-b { left:230px; top:0; }
.tongue { position:absolute; width:115px; height:8px; background:var(--ink); right:-70px; top:62px; transform:rotate(-8deg); border-radius:8px; }
.wheel { position:absolute; width:67px; height:67px; border-radius:50%; background:#fff; border:11px solid var(--ink); bottom:-16px; }
.wheel span { position:absolute; inset:14px; border-radius:50%; background:var(--teal); }
.wheel-a { left:72px; } .wheel-b { right:70px; }
.water-lines { position:absolute; left:30px; right:30px; bottom:20px; display:flex; gap:18px; }
.water-lines i { height:3px; background:var(--teal); border-radius:10px; flex:1; opacity:.45; }

.ticker { overflow:hidden; background:var(--teal); color:#fff; border-block:5px solid var(--ink); }
.ticker-track { width:max-content; display:flex; align-items:center; gap:32px; padding:13px 0; font-family:"Barlow Condensed"; font-size:20px; letter-spacing:.1em; animation: ticker 25s linear infinite; }
.ticker b { color:var(--pink); }
@keyframes ticker { to { transform:translateX(-50%); } }

.section { padding:115px 0; }
.section-heading, .gallery-head { display:grid; grid-template-columns:1fr .75fr; gap:60px; align-items:end; margin-bottom:50px; }
.section-heading h2, .gallery-head h2 { font-size:clamp(48px, 6vw, 74px); margin-top:18px; }
.section-heading > p, .gallery-head > p { color:#607178; margin:0; font-size:15px; }

.product-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.product-card { background:#fff; border:1px solid var(--line); box-shadow:0 16px 50px rgba(8,44,59,.07); border-radius:28px; overflow:hidden; }
.product-visual { height:310px; position:relative; overflow:hidden; background:linear-gradient(145deg,#dff7f4,#fff4fb); }
.parts-product .product-visual { background:linear-gradient(145deg,#fff0f8,#dff7f4); }
.product-tag { position:absolute; z-index:3; top:20px; left:22px; font-size:10px; letter-spacing:.15em; font-weight:800; color:var(--navy); }
.visual-label { position:absolute; right:22px; bottom:20px; font-family:"Barlow Condensed"; font-weight:800; line-height:.8; font-size:38px; color:rgba(8,44,59,.15); text-align:right; }
.visual-trailer { position:absolute; inset:50px 45px 45px; transform:rotate(-4deg); }
.v-boat { position:absolute; left:15%; top:15%; width:58%; height:72px; background:var(--pink); clip-path:polygon(0 0,100% 0,90% 80%,68% 100%,20% 100%,5% 55%); }
.v-boat::after { content:""; position:absolute; left:12%; right:20%; bottom:12px; height:7px; background:#fff; }
.v-frame { position:absolute; left:15%; right:7%; bottom:28%; height:10px; background:var(--ink); transform:rotate(-5deg); border-radius:10px; box-shadow:0 34px 0 var(--ink); }
.v-wheel { position:absolute; width:60px; height:60px; border:10px solid var(--ink); background:var(--teal); border-radius:50%; bottom:0; }
.v-wheel.one { left:25%; } .v-wheel.two { right:15%; }
.parts-orbit { position:absolute; width:240px; height:240px; border:2px dashed rgba(9,170,167,.35); border-radius:50%; left:50%; top:50%; transform:translate(-50%,-50%); }
.orbit-two { width:170px; height:170px; border-color:rgba(240,0,136,.3); }
.part-hub { position:absolute; left:50%; top:50%; width:115px; height:115px; transform:translate(-50%,-50%); background:var(--ink); border-radius:50%; box-shadow:0 15px 30px rgba(0,0,0,.18); }
.hub-center { position:absolute; width:28px; height:28px; left:43px; top:43px; background:var(--teal); border:6px solid #fff; border-radius:50%; }
.spoke { position:absolute; left:53px; top:8px; width:9px; height:100px; background:#fff; border-radius:10px; }
.s2 { transform:rotate(45deg); } .s3 { transform:rotate(90deg); } .s4 { transform:rotate(135deg); }
.part-pill { position:absolute; right:28px; bottom:24px; background:var(--pink); color:#fff; padding:10px 14px; border-radius:10px; font-family:"Barlow Condensed"; font-weight:800; font-size:20px; line-height:.8; transform:rotate(-5deg); }
.product-info { padding:28px 30px 31px; }
.product-info h3 { font-size:36px; }
.product-info p { color:#65767c; font-size:14px; margin:13px 0 20px; max-width:480px; }
.product-info a { font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:var(--teal-dark); }
.product-info a span { color:var(--pink); margin-left:7px; }

.split-section { display:grid; grid-template-columns:1fr 1fr; background:var(--navy); color:#fff; }
.split-image { min-height:640px; position:relative; overflow:hidden; background:linear-gradient(#ffcfbc 0 44%, #08aaa7 44% 100%); }
.sun-disc { position:absolute; width:210px; height:210px; border-radius:50%; background:var(--pink); left:16%; top:15%; opacity:.92; }
.horizon { position:absolute; left:0; right:0; top:43%; height:16px; background:rgba(255,255,255,.5); }
.water { position:absolute; inset:45% 0 0; background:linear-gradient(180deg,#08aaa7,#075e6b); }
.water-streak { position:absolute; height:4px; background:#fff; opacity:.5; border-radius:10px; }
.water-streak.s1 { width:180px; top:57%; left:10%; } .water-streak.s2 { width:300px; top:67%; right:8%; } .water-streak.s3 { width:130px; top:77%; left:28%; }
.palm { position:absolute; z-index:2; width:25px; height:270px; background:var(--ink); bottom:34%; transform-origin:bottom; border-radius:20px; }
.palm::before { content:""; position:absolute; width:180px; height:130px; left:-70px; top:-55px; background:var(--ink); clip-path:polygon(50% 50%, 0 15%, 10% 0, 55% 35%, 35% 0, 48% 0, 62% 35%, 82% 4%, 95% 14%, 68% 48%, 100% 42%, 100% 57%, 68% 58%, 86% 90%, 72% 96%, 55% 65%, 44% 100%, 35% 98%, 40% 63%, 7% 86%, 0 74%); }
.palm-a { left:8%; transform:rotate(-10deg); } .palm-b { right:12%; height:190px; transform:rotate(9deg); bottom:40%; }
.dock-trailer { position:absolute; z-index:4; left:16%; right:12%; bottom:15%; height:95px; }
.dt-frame { position:absolute; left:0; right:0; top:35px; height:13px; background:var(--ink); transform:rotate(-4deg); }
.dt-wheel { position:absolute; left:25%; bottom:0; width:58px; height:58px; border:10px solid var(--ink); border-radius:50%; background:#fff; }
.dt-wheel.two { left:auto; right:17%; }
.stamp { position:absolute; z-index:5; left:7%; bottom:7%; width:100px; height:100px; border-radius:50%; display:grid; place-items:center; text-align:center; background:var(--ink); font:800 34px/.7 "Barlow Condensed"; transform:rotate(-8deg); }
.stamp small { font:800 7px/1 Inter; letter-spacing:.2em; }
.split-copy { padding:110px clamp(35px,8vw,110px); display:flex; flex-direction:column; justify-content:center; }
.split-copy h2 { font-size:clamp(52px, 6vw, 78px); margin:22px 0; }
.split-copy p { max-width:520px; color:#bfd0d4; font-size:15px; }
.feature-list { margin:35px 0; border-top:1px solid rgba(255,255,255,.16); }
.feature-list div { display:flex; gap:25px; padding:17px 0; border-bottom:1px solid rgba(255,255,255,.16); align-items:center; }
.feature-list strong { color:var(--pink); font-family:"Barlow Condensed"; font-size:20px; }
.feature-list span { font-size:13px; font-weight:700; }
.text-link { color:#fff; text-transform:uppercase; font-size:12px; letter-spacing:.1em; font-weight:800; }
.text-link span { color:var(--pink); margin-left:8px; }

.gallery { background:#fff; }
.gallery-head { margin-bottom:38px; }
.gallery-head h2 { font-size:clamp(48px,6vw,68px); }
.gallery-head h2 em { color:var(--teal); }
.gallery-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:15px; }
.gallery-card { min-height:330px; border-radius:22px; overflow:hidden; position:relative; padding:25px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; isolation:isolate; }
.gallery-card::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(135deg,#ff77bd,#f00088 55%,#067f83); }
.gallery-card::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.4),transparent 18%), linear-gradient(180deg,transparent 35%,rgba(0,0,0,.45)); }
.g2::before { background:linear-gradient(135deg,#bceeea,#08aaa7 55%,#082c3b); }
.g3::before { background:linear-gradient(135deg,#ffceb8,#f00088 55%,#082c3b); }
.gallery-card span { font-size:10px; letter-spacing:.18em; font-weight:800; }
.gallery-card strong { font:700 42px/.9 "Barlow Condensed"; text-transform:uppercase; margin-top:8px; }

.quote-section { background:linear-gradient(135deg,var(--pink) 0%, #d80078 48%, var(--teal) 100%); color:#fff; position:relative; overflow:hidden; }
.quote-section::before { content:"305"; position:absolute; font:800 420px/.7 "Barlow Condensed"; opacity:.07; right:-40px; top:30px; }
.quote-wrap { position:relative; z-index:2; display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; padding:105px 0; align-items:center; }
.quote-copy h2 { font-size:clamp(58px,7vw,88px); margin:20px 0; }
.quote-copy h2 em { color:#fff; text-decoration:underline; text-decoration-color:var(--teal); text-underline-offset:8px; }
.quote-copy p { max-width:480px; color:rgba(255,255,255,.9); }
.direct-email { margin-top:35px; display:flex; flex-direction:column; gap:4px; }
.direct-email span { font-size:9px; letter-spacing:.18em; font-weight:800; opacity:.7; }
.direct-email a { font-size:18px; font-weight:800; }
.quote-form { background:rgba(255,255,255,.96); color:var(--ink); padding:30px; border-radius:25px; box-shadow:0 25px 70px rgba(0,0,0,.2); display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.quote-form label { display:flex; flex-direction:column; gap:7px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.quote-form label:nth-of-type(1), .quote-form label:nth-of-type(4), .quote-form button, .quote-form small { grid-column:1 / -1; }
.quote-form input, .quote-form select, .quote-form textarea { width:100%; border:1px solid #d4dee0; border-radius:10px; padding:13px 14px; font:14px Inter; color:var(--ink); background:#fff; text-transform:none; letter-spacing:0; outline:none; }
.quote-form textarea { resize:vertical; }
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(9,170,167,.12); }
.quote-form small { font-size:9px; color:#718087; text-transform:none; letter-spacing:0; text-align:center; }

footer { background:var(--ink); color:#fff; }
.footer-main { display:flex; justify-content:space-between; gap:50px; padding:65px 0; }
.footer-brand img { width:205px; filter:brightness(0) invert(1); }
.footer-brand p { color:#9aa9ad; font-size:13px; margin-top:18px; }
.footer-links { display:flex; gap:90px; }
.footer-links div { display:flex; flex-direction:column; gap:8px; min-width:120px; }
.footer-links span { color:var(--pink); font-size:9px; font-weight:800; letter-spacing:.18em; margin-bottom:8px; }
.footer-links a { color:#c4ced0; font-size:12px; }
.footer-links a:hover { color:#fff; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding:16px 0; display:flex; justify-content:space-between; color:#68777b; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width: 900px) {
  .nav-links { display:none; position:absolute; left:20px; right:20px; top:76px; background:#fffaf3; padding:20px; border:1px solid var(--line); border-radius:18px; flex-direction:column; align-items:stretch; box-shadow:var(--shadow); }
  .nav-links.open { display:flex; }
  .menu-toggle { display:block; }
  .hero-grid, .split-section, .quote-wrap { grid-template-columns:1fr; }
  .hero { min-height:auto; }
  .hero-grid { padding-top:65px; }
  .hero-art { min-height:390px; }
  .section-heading, .gallery-head { grid-template-columns:1fr; gap:20px; }
  .product-grid, .gallery-grid { grid-template-columns:1fr; }
  .gallery-card { min-height:280px; }
  .split-image { min-height:500px; }
  .split-copy { padding:75px 30px; }
  .quote-wrap { gap:45px; }
}

@media (max-width: 560px) {
  .container { width:min(100% - 28px, 1160px); }
  .top-strip-inner { font-size:8px; }
  .brand img { width:145px; }
  h1 { font-size:57px; }
  .hero-art { min-height:330px; }
  .trailer-card { height:255px; }
  .boat-shape { transform:scale(.72); transform-origin:left top; }
  .trailer-frame { transform:scale(.75); transform-origin:left bottom; }
  .quote-form { grid-template-columns:1fr; padding:22px; }
  .quote-form label:nth-of-type(1), .quote-form label:nth-of-type(4), .quote-form button, .quote-form small { grid-column:1; }
  .footer-main { flex-direction:column; }
  .footer-links { gap:45px; }
  .footer-bottom { flex-direction:column; gap:7px; }
}