:root {
  --primary: #00586F; --secondary: #0794B8; --accent: #6ACFF6; --info: #DCF8FF; --focus: #EFFBFF;
  --n60: #1f1f1f; --n50: #3c3c3c; --n40: #5f666d; --n30: #aab0b8; --n20: #eeeeee; --n10: #f9f9f9;
  --radius: 10px; --pill: 50px; --serif: Marcellus, Georgia, serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; color: var(--n50); background: #fff; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: 1920px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 1024px) { .wrap { padding: 0 40px; } }
@media (min-width: 1280px) { .wrap { padding: 0 80px; } }
:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: #fff; color: var(--primary); padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* Header: white bar on inner pages, transparent over the hero on home */
header { background: #fff; border-bottom: 1px solid var(--n20); color: var(--n40); }
header .wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 60px; min-height: 80px; padding-top: 12px; padding-bottom: 12px; }
.logo { font-size: 24px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); }
nav { display: flex; gap: 32px; font-size: 16px; margin-inline-end: auto; }
nav a { padding: 8px 0; border-bottom: 1px solid transparent; }
nav a:hover { color: var(--secondary); text-decoration: underline; }
nav a[aria-current] { color: var(--primary); font-weight: 500; border-bottom-color: var(--primary); }
.right { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 500; }
.pill { border: 1px solid currentColor; border-radius: var(--pill); padding: 8px 16px; color: var(--n50); }
.pill:hover { color: var(--secondary); }
.home header { position: absolute; inset: 0 0 auto 0; z-index: 2; background: none; border-color: transparent; color: #fff; }
.home header .logo, .home header .pill { color: #fff; }
@media (max-width: 1023px) {
  header .wrap { min-height: 0; gap: 4px 16px; padding-top: 14px; padding-bottom: 6px; }
  .logo { margin-inline-end: auto; font-size: 20px; }
  .right span { display: none; }
  nav { order: 3; width: 100%; justify-content: space-between; gap: 16px; font-size: 14px; overflow-x: auto; white-space: nowrap; }
  nav a { padding: 10px 0; }
}

/* Home hero: full-bleed video, title at the bottom left */
.hero { position: relative; height: 80vh; min-height: 460px; color: #fff; display: flex; align-items: flex-end; background: #02222a url(/hero.jpg) center / cover; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgb(0 0 0 / 40%), transparent 170px), linear-gradient(to top, rgb(0 0 0 / 50%), transparent 240px); }
.hero .wrap { position: relative; z-index: 1; width: 100%; padding-bottom: 32px; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.hero h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.05; }
.hero h1 span { display: block; font-family: Poppins, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.4; margin-top: 10px; }
.dots { display: flex; gap: 8px; padding-bottom: 6px; }
.dots i { width: 48px; height: 4px; border-radius: 8px; background: rgb(255 255 255 / 50%); }
.dots i:first-child { background: #fff; }
@media (max-width: 640px) { .hero { height: 72vh; } .hero .wrap { padding-bottom: 24px; } .dots { display: none; } }

/* Sections */
section { padding-top: 80px; }
.head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
h2 { color: var(--primary); font-size: 22px; font-weight: 500; margin-bottom: 24px; }
.head h2 { margin: 0; }
.head a { font-size: 14px; font-weight: 500; text-decoration: underline; color: var(--primary); white-space: nowrap; }
.dark { background: var(--n60); padding-bottom: 80px; }
.dark h2, .dark .head a { color: #fff; }
.last { padding-bottom: 80px; }
@media (max-width: 640px) { section { padding-top: 48px; } h2 { font-size: 18px; margin-bottom: 16px; } .head { margin-bottom: 16px; } .dark, .last { padding-bottom: 48px; } }

/* Image tiles: services and routes */
.svc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .svc { gap: 16px; } }
@media (min-width: 1024px) { .svc { grid-template-columns: repeat(3, 1fr); } .svc.four { grid-template-columns: repeat(4, 1fr); } }
.svc > * { position: relative; height: 200px; border-radius: var(--radius); overflow: hidden; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px; color: #fff; background: var(--primary); }
.svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.svc > *::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(31 31 31 / 0%) 40%, rgb(31 31 31 / 85%) 100%); }
.svc h3, .svc span { position: relative; z-index: 1; }
.svc h3 { font-size: 22px; font-weight: 400; line-height: 1.15; }
.svc small { display: block; font-size: 13px; opacity: .9; margin-top: 6px; }
.svc span { font-size: 20px; transition: transform .7s; }
.svc a:hover span { transform: translateX(8px); }
.svc a:hover img { transform: scale(1.05); }
@media (max-width: 767px) { .svc > * { height: 130px; padding: 12px; } .svc h3 { font-size: 14px; font-weight: 500; } .svc small { font-size: 11px; margin-top: 2px; } .svc span { display: none; } }

/* Yacht cards */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 24px; }
.media { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: linear-gradient(160deg, #b7eaea, #0794B8 60%, #00586F); display: grid; place-items: center; font-size: 64px; }
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover img { transform: scale(1.05); }
.badge { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; background: var(--primary); color: #fff; font-size: 12px; font-weight: 500; line-height: 1; padding: 8px 12px; border-radius: var(--pill); }
.specs { display: flex; justify-content: space-between; gap: 4px 16px; font-size: 12px; color: var(--n40); padding-bottom: 8px; border-bottom: 1px solid var(--n20); }
.specs > span:last-child { white-space: nowrap; }
.star { color: var(--secondary); }
.name { font-size: 15px; font-weight: 500; color: var(--n50); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.price { font-size: 14px; font-weight: 500; color: var(--n50); }
.price small { font-weight: 400; color: var(--n40); font-size: 14px; }
.empty { color: var(--n40); grid-column: 1 / -1; font-size: 14px; padding-bottom: 24px; }
@media (max-width: 640px) { .media { font-size: 44px; } .badge { top: 8px; inset-inline-start: 8px; padding: 6px 10px; font-size: 11px; } .specs { flex-direction: column; font-size: 11px; } .card { margin-bottom: 12px; } }

/* Quick links */
.quick { text-align: center; }
.quick .cols { border: 1px solid var(--n20); border-radius: var(--radius); padding: 24px 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 28px clamp(40px, 12vw, 240px); }
.quick .cols div { display: flex; flex-direction: column; gap: 16px; }
.quick h3 { font-size: 15px; font-weight: 500; color: var(--n50); }
.quick a { font-size: 14px; color: var(--n40); }
.quick a:hover { color: var(--primary); }
@media (max-width: 640px) { .quick { text-align: start; } .quick .cols { justify-content: flex-start; flex-direction: column; } }

/* FAQ */
.faq { max-width: 840px; margin: 0 auto; padding: 60px 20px 100px; }
.faq h2 { text-align: center; }
details { margin-bottom: 8px; }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; border: 1px solid var(--n20); border-radius: var(--radius); padding: 16px 20px; font-size: 15px; font-weight: 500; color: var(--n50); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 400; }
summary:hover { border-color: var(--n30); }
details[open] summary { background: var(--n10); border-color: transparent; }
details[open] summary::after { content: "−"; }
details p { padding: 12px 20px 8px; font-size: 14px; color: var(--n40); line-height: 1.6; }
@media (max-width: 640px) { .faq { padding: 48px 20px 56px; } .faq h2 { text-align: start; } summary { padding: 14px 16px; font-size: 14px; } details p { padding: 10px 16px 6px; } }

/* Help bar and footer */
.help { background: var(--n10); color: var(--n50); text-align: center; padding: 24px 16px; font-size: 18px; font-weight: 500; }
.help a { text-decoration: underline; }
footer { font-size: 14px; color: var(--n40); padding: 60px 0 0; }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 32px; padding-bottom: 60px; }
footer h3 { font-size: 14px; font-weight: 500; color: var(--n50); margin-bottom: 16px; }
footer p { margin-bottom: 12px; line-height: 1.4; overflow-wrap: anywhere; }
footer a:hover { color: var(--primary); }
footer .copy { border-top: 1px solid var(--n20); padding: 20px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 12px; }
@media (max-width: 640px) {
  .help { font-size: 15px; padding: 20px 16px; }
  footer { padding-top: 40px; }
  footer .cols { grid-template-columns: 1fr 1fr; gap: 28px 16px; padding-bottom: 32px; }
  footer .cols > :first-child { grid-column: 1 / -1; }
}

/* Buttons and form controls */
select, input, textarea, .btn { font: inherit; font-size: 14px; }
select, input, textarea { border: 1px solid var(--n20); border-radius: 8px; padding: 10px 12px; background: #fff; color: var(--n50); width: 100%; min-height: 42px; }
.btn { background: linear-gradient(90deg, var(--primary), #067a98); color: #fff; border: 0; border-radius: var(--pill); padding: 12px 24px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-block; text-align: center; }
.btn:hover { filter: brightness(1.1); }
label { font-size: 12px; color: var(--n40); display: grid; gap: 4px; }

/* Inner page intro: tag, serif title, teal lead, optional image on desktop only */
.intro { display: grid; gap: 40px; align-items: center; padding-top: 40px; }
.tag { display: inline-block; background: var(--focus); color: var(--n50); border-radius: var(--pill); padding: 10px 16px; font-size: 14px; margin-bottom: 20px; }
.intro h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.1; color: var(--n60); margin-bottom: 20px; }
.intro p { color: var(--primary); font-size: 16px; line-height: 1.6; max-width: 520px; }
.intro img { display: none; width: 100%; height: 320px; object-fit: cover; border-radius: 16px; }
@media (min-width: 1024px) { .intro:has(img) { grid-template-columns: 1fr 1fr; } .intro img { display: block; } }
@media (min-width: 1024px) { .intro:has(.tall) { grid-template-columns: 1fr auto; } .intro img.tall { width: 290px; height: 430px; border-radius: 24px; } }
@media (max-width: 640px) { .intro { padding-top: 28px; } .tag { font-size: 12px; padding: 8px 14px; margin-bottom: 16px; } .intro h1 { margin-bottom: 12px; } .intro p { font-size: 14px; } }

/* Listing filters */
.filters { display: flex; flex-wrap: wrap; gap: 12px; padding: 40px 0 24px; }
.filters select, .filters input { width: auto; border-radius: var(--pill); padding: 9px 18px; font-size: 13px; font-weight: 500; }
.filters select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 42px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%233c3c3c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 18px center; }
.filters select:hover, .filters input:hover { border-color: var(--n30); }
.filters input { margin-inline-start: auto; min-width: 240px; }
.count { font-size: 15px; color: var(--n50); margin-bottom: 16px; }
@media (max-width: 767px) { .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 28px 0 20px; } .filters select, .filters input { width: 100%; min-width: 0; margin: 0; } .filters input { grid-column: 1 / -1; grid-row: 1; } .filters select[name=sort] { grid-column: 1 / -1; } }

/* Bordered info tiles (about, contact) */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-content: start; }
.tile { border: 1px solid var(--n20); border-radius: var(--radius); padding: 24px; display: block; }
.tile h2, .tile h3 { font-size: 15px; font-weight: 500; color: var(--n50); margin-bottom: 8px; }
.tile p { font-size: 14px; color: var(--n40); line-height: 1.6; }
.tile b { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 500; color: var(--primary); overflow-wrap: anywhere; }
a.tile:hover { border-color: var(--n30); }
.prose p { color: var(--n40); line-height: 1.8; font-size: 15px; max-width: 800px; margin-bottom: 16px; }
@media (max-width: 640px) { .tile { padding: 18px; } }

/* Yacht detail */
.crumbs { font-size: 12px; color: var(--n40); padding-top: 20px; }
.crumbs a { text-decoration: underline; padding: 6px 0; display: inline-block; }
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 20px; align-items: start; } /* minmax(0): wide children (thumbnail strip) must not stretch the column */
@media (min-width: 1024px) { .detail { grid-template-columns: minmax(0, 1fr) 320px; } }
.detail .media { aspect-ratio: 16 / 8; font-size: 96px; }
.title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin: 24px 0 12px; }
.title h1 { font-size: 22px; font-weight: 500; color: var(--n60); }
.title span { font-size: 13px; font-weight: 500; color: var(--n40); white-space: nowrap; }
.title i { color: #b7791f; font-style: normal; font-size: 16px; letter-spacing: 2px; }
.desc { font-size: 14px; color: var(--n40); line-height: 1.7; }
.feat { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; padding: 0; list-style: none; }
.feat li { border: 1px solid var(--n20); border-radius: var(--radius); padding: 14px 24px; font-size: 13px; color: var(--n40); }
.info { border: 1px solid var(--n20); border-radius: var(--radius); overflow: hidden; }
.info > h2 { background: var(--n10); color: var(--n50); font-size: 20px; padding: 20px 28px; margin: 0; }
.info > div { padding: 20px; display: grid; gap: 16px; }
.info h3 { background: var(--n10); border-radius: 8px; padding: 8px 20px; font-size: 14px; font-weight: 500; color: var(--n50); }
.info ul { display: flex; flex-wrap: wrap; gap: 10px 36px; margin: 0; padding: 0 20px 8px; list-style: none; font-size: 13px; color: var(--n40); line-height: 1.5; }
.info ul.rows { display: grid; }
.policy { background: #fffbc7; border-radius: 8px; padding: 16px; }
.policy h3 { background: none; padding: 0 0 12px; }
.policy ul { display: grid; padding: 0; color: var(--n50); }
.box { border: 1px solid var(--n20); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 16px; }
@media (min-width: 1024px) { .box { position: sticky; top: 20px; } }
.box-head { background: var(--n10); padding: 16px 20px; }
.box-head b { display: block; font-size: 20px; font-weight: 500; color: var(--n60); }
.box-head small { font-size: 12px; font-weight: 500; color: var(--n50); }
.box .body { padding: 20px; display: grid; gap: 12px; }
.box .price { font-size: 20px; text-align: center; padding: 8px 0 12px; border-bottom: 1px solid var(--n20); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.total { display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; }
.note { font-size: 12px; color: var(--n40); }
/* Phone-only booking bar pinned to the bottom of the yacht page */
.bookbar { display: none; }
@media (max-width: 1023px) {
  .bookbar { display: flex; position: fixed; inset: auto 0 0 0; z-index: 5; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-top: 1px solid var(--n20); padding: 10px 20px calc(10px + env(safe-area-inset-bottom)); }
  body:has(.bookbar) footer { padding-bottom: 72px; }
  .detail .media { aspect-ratio: 4 / 3; font-size: 72px; }
  .feat li { padding: 10px 14px; font-size: 12px; }
  .info > h2 { font-size: 17px; padding: 14px 16px; }
  .info > div { padding: 12px; }
  .info h3 { padding: 8px 12px; }
  .info ul { padding: 0 12px 4px; gap: 8px 20px; }
}

/* Blog */
.narrow { max-width: 1180px; margin: 0 auto; }
.blog-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 40px; padding-top: 40px; }
.blog-head h1 { font-size: 30px; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.blog-head p { font-size: 15px; color: var(--n40); }
.blog-head input { width: min(100%, 420px); border-radius: var(--pill); padding: 10px 18px; }
.chips { display: flex; gap: 10px; overflow-x: auto; padding: 24px 0 16px; }
.chips button { font: inherit; font-size: 12px; font-weight: 500; white-space: nowrap; background: #fff; color: var(--n50); border: 1px solid var(--n20); border-radius: var(--pill); padding: 9px 18px; cursor: pointer; }
.chips button:hover { border-color: var(--n30); }
.chips button[aria-pressed=true] { background: var(--primary); border-color: var(--primary); color: #fff; }
.posts { display: grid; gap: 28px 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; flex-direction: column; gap: 14px; min-width: 0; position: relative; }
.pimg { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--n20); }
.pimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post:hover img { transform: scale(1.04); }
.label { position: absolute; top: 12px; inset-inline-start: 12px; background: #fff; color: var(--n50); font-size: 11px; font-weight: 500; padding: 5px 12px; border-radius: var(--pill); }
.ptxt { display: grid; gap: 6px; }
.ptxt small { font-size: 13px; color: var(--n40); }
.ptxt i, .meta i { color: var(--secondary); font-style: normal; padding: 0 4px; }
.ptxt h3 { font-size: 15px; font-weight: 500; color: var(--n50); line-height: 1.4; }
/* Featured mosaic: the first four posts become overlay tiles (desktop, no filter active) */
@media (min-width: 1024px) {
  .mosaic { grid-template-columns: repeat(12, 1fr); gap: 16px; }
  .mosaic > .post { grid-column: span 4; margin-top: 12px; }
  .mosaic > .post:nth-child(-n+4) { margin: 0; height: 232px; border-radius: var(--radius); overflow: hidden; }
  .mosaic > .post:nth-child(1) { grid-column: span 6; grid-row: span 2; height: 480px; }
  .mosaic > .post:nth-child(2) { grid-column: span 6; }
  .mosaic > .post:nth-child(3), .mosaic > .post:nth-child(4) { grid-column: span 3; }
  .mosaic > .post:nth-child(-n+4) .pimg { position: absolute; inset: 0; aspect-ratio: auto; }
  .mosaic > .post:nth-child(-n+4) .pimg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0%) 35%, rgb(0 0 0 / 78%) 100%); }
  .mosaic > .post:nth-child(-n+4) .ptxt { position: absolute; inset: auto 0 0 0; padding: 20px; color: #fff; }
  .mosaic > .post:nth-child(-n+4) .ptxt small { color: #fff; }
  .mosaic > .post:nth-child(-n+4) .ptxt small:last-child { display: none; }
  .mosaic > .post:nth-child(-n+4) .ptxt i { color: #fff; }
  .mosaic > .post:nth-child(-n+4) h3 { color: #fff; font-size: 18px; }
  .mosaic > .post:nth-child(n+3):nth-child(-n+4) h3 { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Blog article */
.post-head { display: grid; gap: 28px; align-items: center; padding-top: 32px; }
@media (min-width: 900px) { .post-head { grid-template-columns: 2fr 3fr; gap: 48px; } }
.post-head h1 { font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; line-height: 1.2; color: #2b4a5c; margin: 14px 0; }
.meta { font-size: 14px; color: var(--n40); }
.post-head img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
@media (max-width: 899px) { .post-head img { aspect-ratio: 16 / 10; } }
.post-body { display: grid; gap: 40px; padding-top: 48px; align-items: start; }
@media (min-width: 1024px) { .post-body { grid-template-columns: minmax(0, 1fr) 340px; } }
.article { font-size: 15px; line-height: 1.75; color: var(--n50); max-width: 720px; }
.article p { margin-bottom: 20px; }
.article .lead { font-weight: 500; }
.article h2 { font-size: 19px; font-weight: 600; color: #2b4a5c; margin: 32px 0 14px; }
.article ul { margin: 0 0 20px; padding-inline-start: 22px; color: #2b4a5c; }
.article li { margin-bottom: 6px; }
.article a { color: var(--secondary); text-decoration: underline; }
aside { display: grid; gap: 20px; }
.cta-card { background: var(--n10); border-radius: var(--radius); padding: 24px; display: grid; gap: 12px; justify-items: start; }
.cta-card h2 { font-size: 18px; margin: 0; }
.cta-card p { font-size: 14px; color: var(--n40); line-height: 1.6; }
.side-title { font-size: 16px; margin: 8px 0 0; }
.side-posts { display: grid; gap: 16px; }
.side-posts .post { border: 1px solid var(--n20); border-radius: var(--radius); padding: 10px 10px 16px; gap: 12px; }
.side-posts .pimg { aspect-ratio: 16 / 7; }

/* Yacht photo gallery: big photo with a strip of thumbnails */
.thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 8px 0 4px; scroll-snap-type: x proximity; }
.thumbs a { flex: none; width: 104px; height: 78px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; scroll-snap-align: start; opacity: .75; }
.thumbs a:hover, .thumbs a[aria-current] { opacity: 1; }
.thumbs a[aria-current] { border-color: var(--primary); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.detail .media:has(img) { background: var(--n10); }
@media (max-width: 640px) { .thumbs a { width: 80px; height: 60px; } }
.detail .media { aspect-ratio: 16 / 10; }
.detail .media img { object-fit: contain; }
/* Phones and tablets: booking card comes right after the yacht summary, before the long details */
@media (max-width: 1023px) {
  .detail:has(#book) { gap: 0; }
  .detail:has(#book) > div:first-child { display: contents; }
  .detail #book { order: 1; margin: 4px 0 20px; }
  .detail .info { order: 2; }
}
/* Desktop: compact gallery, main photo on the left and a scrolling grid of thumbnails on the right */
@media (min-width: 1024px) {
  .gallery { height: 360px; }
  .gallery .media { height: 100%; aspect-ratio: auto; }
  .gallery:has(.thumbs) { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 8px; }
  .gallery .thumbs { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 114px; gap: 8px; align-content: start; overflow-y: auto; padding: 0; scroll-snap-type: none; }
  .gallery .thumbs a { width: auto; height: auto; }
}

/* Yacht cards: wide landscape photo so the whole yacht shows; 3 per row on desktop, 2 on tablets, 1 on phones */
.card .media { aspect-ratio: 3 / 2; }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } .card { margin-bottom: 20px; } .card .specs { flex-direction: row; font-size: 12px; } }

/* Booking box: price and one button, like the reference */
.box .price { border-bottom: 0; padding: 16px 0 8px; }
.box .btn { padding: 14px 24px; font-size: 14px; }

/* Card footer: price on the left, WhatsApp booking button on the right */
.card > a { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.buy .price { font-size: 15px; }
.buy .btn { padding: 9px 20px; font-size: 12px; white-space: nowrap; }

/* Language switcher */
.lang { position: relative; font-size: 13px; font-weight: 500; }
.lang summary { list-style: none; cursor: pointer; padding: 8px 4px; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: " ▾"; font-size: 10px; }
.lang div { position: absolute; inset-inline-end: 0; top: 100%; z-index: 20; min-width: 150px; background: #fff; color: var(--n50); border: 1px solid var(--n20); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); padding: 6px; display: grid; }
.lang a { padding: 8px 12px; border-radius: 6px; }
.lang a:hover { background: var(--focus); }
.lang a[aria-current] { color: var(--primary); font-weight: 600; }
/* Right-to-left languages (Arabic, Persian) */
[dir=rtl] body { font-family: system-ui, "Segoe UI", Tahoma, sans-serif; }
[dir=rtl] .logo { letter-spacing: 3px; font-family: Poppins, sans-serif; }
[dir=rtl] .hero h1, [dir=rtl] .intro h1 { font-family: inherit; font-weight: 600; }
[dir=rtl] .filters select { background-position: left 18px center; }
[dir=rtl] .svc a span { transform: scaleX(-1); }
[dir=rtl] .article ul { padding-inline-start: 22px; }
.lang { margin: 0; }
.lang summary, .lang[open] summary { display: block; border: 0; border-radius: 0; background: none; color: inherit; font-size: 13px; font-weight: 500; padding: 8px 4px; }
.lang summary::after, .lang[open] summary::after { content: " ▾"; font-size: 10px; }
[dir=rtl] .skip { left: auto; right: -9999px; } /* an off-screen element on the left would make RTL pages scroll sideways */
[dir=rtl] .skip:focus { right: 8px; }

/* Extras on the yacht page */
.extras .lead { font-size: 14px; color: var(--n40); margin: -8px 0 20px; max-width: 720px; line-height: 1.6; }
.extras ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.extras li { border: 1px solid var(--n20); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 4px; }
.extras b { font-size: 14px; font-weight: 500; color: var(--n50); }
.extras span { font-size: 12px; color: var(--n40); }
.article h2:first-child { margin-top: 0; }

/* Photo strip on yacht cards: swipe on touch, arrows on hover */
.card .slides { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.card .slides::-webkit-scrollbar { display: none; }
.card .slides a, .card .noimg { position: relative; flex: 0 0 100%; scroll-snap-align: start; display: grid; place-items: center; }
.card .noimg { position: absolute; inset: 0; }
.card .nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 1; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 92%); color: var(--n60); font-size: 22px; line-height: 1; padding: 0 0 3px; cursor: pointer; opacity: 0; transition: opacity .2s; box-shadow: 0 2px 8px rgb(0 0 0 / 20%); }
.card .prev { inset-inline-start: 10px; }
.card .next { inset-inline-end: 10px; }
.card .media:hover .nav, .card .nav:focus-visible { opacity: 1; }
[dir=rtl] .card .nav { scale: -1 1; }
.card .count { position: absolute; bottom: 10px; inset-inline-end: 10px; z-index: 1; background: rgb(0 0 0 / 55%); color: #fff; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--pill); pointer-events: none; }
@media (hover: none) { .card .nav { display: none; } }

/* Yacht page gallery: always-visible scrollbar on the thumbnail grid */
@media (min-width: 1024px) {
  .gallery .thumbs { padding-inline-end: 8px; }
  .gallery .thumbs::-webkit-scrollbar { width: 10px; }
  .gallery .thumbs::-webkit-scrollbar-track { background: var(--n20); border-radius: 10px; }
  .gallery .thumbs::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; }
  .gallery .thumbs::-webkit-scrollbar-thumb:hover { background: var(--secondary); }
}

/* ---- Motion. With the device's "reduce motion" setting on, movement is dropped and only soft fades remain (--shift: 0). ---- */
@media (prefers-reduced-motion: reduce) { :root { --shift: 0px; } .hero video { animation: none !important; } }
@media all {
  @view-transition { navigation: auto; } /* soft cross-fade between pages where the browser supports it */

  @keyframes rise { from { opacity: 0; translate: 0 var(--shift, 28px); } }
  @keyframes drop { from { opacity: 0; translate: 0 calc(var(--shift, 16px) * -1); } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes zoom-out { from { scale: 1.08; } }
  @keyframes fill { from { scale: 0 1; } }

  /* Page entrance */
  header { animation: drop .6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero video { animation: zoom-out 2.4s cubic-bezier(.2, .7, .2, 1) both; }
  .hero h1 { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .2s both; }
  .hero h1 span { animation: rise .9s cubic-bezier(.2, .7, .2, 1) .45s both; }
  .dots { animation: fade .8s .9s both; }
  .dots i:first-child { position: relative; overflow: hidden; background: rgb(255 255 255 / 50%); }
  .dots i:first-child::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: fill 6s linear infinite; }
  [dir=rtl] .dots i:first-child::after { transform-origin: right; }
  .intro > div > *, .blog-head > *, .post-head > div > *, .crumbs { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .intro > div > :nth-child(2), .post-head > div > :nth-child(2) { animation-delay: .1s; }
  .intro > div > :nth-child(3), .post-head > div > :nth-child(3) { animation-delay: .2s; }
  .intro > div > :nth-child(4) { animation-delay: .3s; }
  .intro > img, .post-head > img, .gallery, .chips { animation: fade .9s .15s both; }
  .detail > .box, .title, .desc { animation: rise .7s cubic-bezier(.2, .7, .2, 1) .15s both; }

  /* Scroll reveal: these start hidden only when scripts run (html.js) and site.js adds .in as they enter the screen */
  .js :is(main h2, .head, .svc > *, .grid > .card, .posts > .post, .tile, .quick .cols, .faq details, .extras li, .extras .lead, .info, .feat, .prose p, .article > *, .cta-card, .side-posts, .help, footer .cols > *) {
    opacity: 0; translate: 0 var(--shift, 26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), translate .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s);
  }
  .js :is(main h2, .head, .svc > *, .grid > .card, .posts > .post, .tile, .quick .cols, .faq details, .extras li, .extras .lead, .info, .feat, .prose p, .article > *, .cta-card, .side-posts, .help, footer .cols > *).in { opacity: 1; translate: 0 0; }

  /* Hover and press feedback */
  .card .media, .tile, .extras li, .post .pimg { transition: box-shadow .35s, translate .35s cubic-bezier(.2, .7, .2, 1), border-color .35s; }
  .card:hover .media, .post:hover .pimg { translate: 0 -4px; box-shadow: 0 14px 30px rgb(0 88 111 / 18%); }
  a.tile:hover, .extras li:hover { translate: 0 -3px; box-shadow: 0 10px 24px rgb(0 88 111 / 10%); }
  .btn, .pill { transition: translate .2s, box-shadow .2s, filter .2s, background-color .2s, color .2s; }
  .btn:hover { translate: 0 -2px; box-shadow: 0 8px 18px rgb(0 88 111 / 28%); }
  .btn:active, .pill:active { translate: 0 0; scale: .97; }
  nav a { transition: color .2s; }
  .lang div { animation: rise .25s both; }
  details[open] p { animation: rise .35s both; }
  #main-photo img { transition: opacity .25s; }
  #main-photo img.swap { opacity: 0; }
}

/* Services on the home page: uneven "bento" grid on desktop, swipeable row on phones */
.sub { color: var(--n40); font-size: 15px; line-height: 1.6; max-width: 620px; margin: -12px 0 24px; }
.svc a > div { position: relative; z-index: 1; display: grid; gap: 4px; }
.svc a small { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.svc a > span { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgb(255 255 255 / 18%); backdrop-filter: blur(6px); border: 1px solid rgb(255 255 255 / 35%); transition: background-color .3s, color .3s, transform .5s; }
.svc a:hover > span { background: #fff; color: var(--primary); transform: translateX(4px); }
[dir=rtl] .svc a:hover > span { transform: scaleX(-1) translateX(4px); }
.svc.bento > * { border-radius: 16px; padding: 24px; }
.svc.bento > *::after { background: linear-gradient(180deg, rgb(1 44 56 / 0%) 35%, rgb(1 44 56 / 88%) 100%); }
@media (min-width: 1024px) {
  .svc.bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 270px; gap: 16px; }
  .svc.bento > * { height: auto; }
  .svc.bento > :nth-child(1), .svc.bento > :nth-child(6) { grid-column: span 2; }
  .svc.bento > :nth-child(1) h3, .svc.bento > :nth-child(6) h3 { font-size: 28px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .svc.bento { grid-auto-rows: 230px; } .svc.bento > * { height: auto; } }
@media (max-width: 767px) {
  .svc.bento { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .svc.bento::-webkit-scrollbar { display: none; }
  .svc.bento > * { flex: 0 0 78%; height: 300px; scroll-snap-align: start; padding: 20px; }
  .svc.bento h3 { font-size: 20px; font-weight: 500; }
  .svc.bento a > span { display: grid; }
  .sub { font-size: 14px; }
}

/* ---- Phone and tablet menu: a full-screen panel that drops down from the top ---- */
.burger, .menu { display: none; }
@media (max-width: 1023px) {
  .js header nav, .js header .lang { display: none; }
  .js .burger { display: grid; gap: 7px; align-content: center; justify-items: end; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; margin-inline-end: -6px; }
  .burger i { display: block; height: 1.5px; width: 26px; background: currentColor; border-radius: 2px; transition: width .3s; }
  .burger i:last-child { width: 17px; }
  .burger:hover i:last-child { width: 26px; }
  header { color: var(--n60); }
  .js header .wrap { flex-wrap: nowrap; padding-bottom: 12px; padding-top: 12px; }

  .js .menu { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 60; overflow-y: auto; color: #fff; padding: 0 24px calc(24px + env(safe-area-inset-bottom));
    background: linear-gradient(170deg, rgb(1 24 32 / 96%) 0%, rgb(1 44 56 / 95%) 50%, rgb(0 72 92 / 94%) 100%), url(/hero.jpg) center / cover;
    visibility: hidden; transform: translateY(-100%); transition: transform .65s cubic-bezier(.76, 0, .24, 1), visibility 0s .65s; }
  .menu-open .menu { visibility: visible; transform: none; transition: transform .65s cubic-bezier(.76, 0, .24, 1), visibility 0s; }
  body.menu-open { overflow: hidden; }
  .menu-top { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
  .menu .logo { color: #fff; }
  .menu-close { position: relative; width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; background: none; color: #fff; cursor: pointer; padding: 0; }
  .menu-close i { position: absolute; top: 50%; left: 50%; width: 18px; height: 1.5px; margin: -1px 0 0 -9px; background: currentColor; rotate: 45deg; }
  .menu-close i:last-child { rotate: -45deg; }
  .menu-links { display: grid; margin: auto 0; padding: 24px 0; }
  .menu-links a { display: flex; align-items: baseline; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgb(255 255 255 / 13%); font-family: var(--serif); font-size: clamp(26px, 7.4vw, 34px); line-height: 1.15;
    opacity: 0; translate: 0 var(--shift, 22px); transition: opacity .5s, translate .6s cubic-bezier(.2, .7, .2, 1), color .2s; }
  .menu-open .menu-links a { opacity: 1; translate: 0 0; transition-delay: calc(.28s + var(--i) * .07s), calc(.28s + var(--i) * .07s), 0s; }
  .menu-links small { font-family: Poppins, system-ui, sans-serif; font-size: 11px; letter-spacing: .14em; color: var(--accent); min-width: 22px; }
  .menu-links a[aria-current], .menu-links a:active { color: var(--accent); }
  [dir=rtl] .menu-links a { font-family: inherit; font-weight: 600; }
  .menu-foot { display: grid; gap: 18px; opacity: 0; transition: opacity .6s; }
  .menu-open .menu-foot { opacity: 1; transition-delay: .75s; }
  .menu-langs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: -24px; padding-inline: 24px; }
  .menu-langs::-webkit-scrollbar { display: none; }
  .menu-langs a { flex: none; font-size: 13px; padding: 8px 14px; border: 1px solid rgb(255 255 255 / 22%); border-radius: var(--pill); white-space: nowrap; }
  .menu-langs a[aria-current] { background: #fff; color: var(--primary); border-color: #fff; font-weight: 500; }
  .menu .btn { background: #fff; color: var(--primary); padding: 15px 24px; font-size: 14px; }
  .menu-foot p { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; font-size: 13px; opacity: .75; }
}
.home header { color: #fff; }