:root {
  --navy: #014184;
  --navy-deep: #01284f;
  --paper: #ffffff;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--sans); color: var(--navy); background: var(--paper); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
main { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }

/* Photo */
.hero { position: relative; flex: 1 1 auto; min-height: 280px; overflow: hidden; background: var(--navy-deep); }
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 45%; }
@media (max-width: 760px) { .hero-img { object-position: 38% 50%; } }

/* Logo + coming soon */
.placeholder { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: clamp(36px, 6vh, 64px) 16px clamp(40px, 7vh, 72px); text-align: center; }
.logo { margin: 0; }
.logo img { width: min(380px, 80vw); height: auto; }
.soon { margin: 0; font-weight: 500; font-size: 0.85rem; letter-spacing: 0.32em; text-transform: uppercase; padding-left: 0.32em; }

/* The Boat panel: floats over the right of the photo on wide screens */
.boat {
  position: relative; z-index: 1;
  width: min(400px, 40vw);
  padding: 24px 26px 20px;
  background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: 10px; box-shadow: 0 12px 40px rgba(1,30,62,.28);
  color: #3d4f63; font-size: 0.9rem; line-height: 1.55;
}
@media (min-width: 901px) {
  /* The panel sits in flow so the photo grows to fit it on short screens. */
  .hero { display: flex; align-items: center; justify-content: flex-end; padding: 24px clamp(16px, 3vw, 40px); }
}
.boat h2 { margin: 0; color: var(--navy); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.boat-sub { margin: 6px 0 16px; color: var(--navy); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.boat p { margin: 0 0 .85em; }
.boat blockquote { margin: 14px 0; padding-left: 14px; border-left: 3px solid #f2c94c; }
.boat blockquote p { margin: 0 0 4px; color: var(--navy); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.boat cite { font-style: normal; font-size: .78rem; }
.boat-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid #d7e1ec; }
.boat-specs dt { font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.boat-specs dd { margin: 0; color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; }
.boat-src { margin: 0 !important; font-size: .72rem; color: #6b7c8f; }

@media (max-width: 900px) {
  .hero { display: flex; flex-direction: column; overflow: visible; background: none; flex: 0 0 auto; }
  .hero picture { position: relative; height: 58vh; min-height: 280px; }
  .boat { width: auto; margin: -40px 16px 0; }
}