/* Boat sites v2 (2026-11-07): quiet luxury, shared by YOYITA II and ALISSA.
   Same family as villapereztravel.com v3: ivory paper, ink type, one accent used only as a hairline. */

@font-face { font-family:"Cormorant"; src:url("fonts/CormorantGaramond.woff2") format("woff2"); font-weight:300 700; font-display:swap; }
@font-face { font-family:"Cormorant"; src:url("fonts/CormorantGaramond-Italic.woff2") format("woff2"); font-weight:300 700; font-style:italic; font-display:swap; }
@font-face { font-family:"Jost"; src:url("fonts/Jost.woff2") format("woff2"); font-weight:300 600; font-display:swap; }

:root {
  --paper:#f6f2eb; --ivory:#efe9df; --sand:#e4dbcc; --ink:#14232b; --muted:#6b6a64;
  --accent:#2a9fa1; --accent-deep:#1d6f73; --night:#0b2a33;
  --line:rgba(20,35,43,.14);
  --serif:"Cormorant","Cormorant Garamond",Georgia,serif; --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --g:clamp(20px,5.5vw,96px); --ease:cubic-bezier(.22,.61,.18,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:300 16px/1.8 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
h1,h2,h3 { font-family:var(--serif); font-weight:300; margin:0; letter-spacing:-.005em; }
em { font-style:italic; }
p { margin:0; }
button { font:inherit; color:inherit; }
:focus-visible { outline:1px solid var(--accent); outline-offset:4px; }

.eyebrow { font:400 10.5px/1.4 var(--sans); letter-spacing:.34em; text-transform:uppercase; color:var(--accent-deep); }
.link { display:inline-flex; gap:12px; align-items:center; padding:0 0 6px; border:0; border-bottom:1px solid currentColor; background:none; font:400 10.5px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; cursor:pointer; transition:gap .5s var(--ease); }
.link:hover { gap:20px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:0 40px; border:1px solid currentColor; background:transparent; font:400 10.5px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase; cursor:pointer; transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease); }
.btn:hover { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.ph { overflow:hidden; background:var(--sand); position:relative; }
.ph img { width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.ph:hover img { transform:scale(1.025); }
button.ph { display:block; width:100%; padding:0; border:0; cursor:zoom-in; }

/* Header */
.hdr { position:fixed; z-index:50; inset:0 0 auto; height:92px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 var(--g); color:#fff; transition:background .6s var(--ease),color .6s var(--ease),height .6s var(--ease),box-shadow .6s var(--ease); }
.hdr::before { content:""; position:absolute; inset:0 0 -60px; z-index:-1; pointer-events:none; background:linear-gradient(180deg,rgba(6,16,20,.5),rgba(6,16,20,0)); transition:opacity .6s var(--ease); }
.hdr.solid { height:72px; background:rgba(246,242,235,.97); color:var(--ink); box-shadow:0 1px 0 var(--line); }
.hdr.solid::before,.hdr.open::before { opacity:0; }
.hdr.open { color:var(--ink); background:transparent; box-shadow:none; }
.hdr-btn { white-space:nowrap; display:flex; align-items:center; gap:14px; min-height:44px; padding:0; border:0; background:none; font:400 10.5px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; cursor:pointer; }
.hdr-btn.menu { justify-self:start; }
.hdr-btn .short { display:none; }
.hdr-btn.inq { justify-self:end; min-height:0; padding-bottom:5px; border-bottom:1px solid currentColor; }
.lines { position:relative; width:24px; height:9px; } .lines i { position:absolute; left:0; right:0; top:0; height:1px; background:currentColor; transition:transform .5s var(--ease),top .5s var(--ease); } .lines i:last-child { top:8px; }
.hdr.open .lines i:first-child { top:4px; transform:rotate(45deg); } .hdr.open .lines i:last-child { top:4px; transform:rotate(-45deg); }
.mark { display:flex; flex-direction:column; align-items:center; gap:8px; }
.mark .word { font:400 15px/1 var(--serif); letter-spacing:.5em; padding-left:.5em; text-transform:uppercase; white-space:nowrap; }
.mark small { font:400 8.5px/1 var(--sans); letter-spacing:.4em; padding-left:.4em; text-transform:uppercase; opacity:.8; }
.mark { min-width:0; }
.mark img { height:34px; width:auto; transition:height .6s var(--ease); }
.hdr.solid .mark img { height:28px; }
.logo-light { display:block; } .logo-dark { display:none; }
.hdr.solid .logo-light,.hdr.open .logo-light { display:none; } .hdr.solid .logo-dark,.hdr.open .logo-dark { display:block; }

/* Menu */
.menu-panel { position:fixed; inset:0; z-index:-1; display:grid; grid-template-columns:1.1fr 1fr; background:var(--paper); color:var(--ink); opacity:0; visibility:hidden; transition:opacity .6s var(--ease),visibility 0s .6s; }
.hdr.open .menu-panel { opacity:1; visibility:visible; transition:opacity .6s var(--ease); }
.menu-nav { display:flex; flex-direction:column; justify-content:center; gap:2px; padding:120px var(--g) 60px; overflow-y:auto; }
.menu-nav a { font:300 clamp(30px,min(4vw,5.4vh),58px)/1.22 var(--serif); letter-spacing:normal; text-transform:none; transition:color .4s,padding .5s var(--ease); }
.menu-nav a:hover { color:var(--accent-deep); padding-left:12px; }
.menu-small { margin-top:36px; display:flex; flex-direction:column; gap:10px; font:400 10.5px/1.6 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.menu-small a:hover { color:var(--ink); }
.menu-side { display:flex; flex-direction:column; justify-content:flex-end; gap:28px; padding:120px var(--g) 60px; background:var(--ivory); }
.menu-side .ph { aspect-ratio:4/3; }
.menu-side p { font:300 italic 22px/1.4 var(--serif); color:var(--muted); }

/* Hero */
.hero { position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:var(--night); color:#fff; }
.slide { position:absolute; inset:0; opacity:0; transition:opacity 2.4s var(--ease); }
.slide.on { opacity:1; }
.slide.first { transition:none; } .slide.first img { transform:none; transition:none; }
.qa .hero-mark { animation:none !important; }
.qa .rv { opacity:1 !important; transform:none !important; transition:none !important; }
.slide img { width:100%; height:100%; object-fit:cover; transform:scale(1.07); transition:transform 10s linear; }
.slide.on img { transform:scale(1); }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 48% 36% at 50% 50%,rgba(6,16,20,.42),rgba(6,16,20,0)),linear-gradient(180deg,rgba(6,16,20,.4),rgba(6,16,20,0) 24%,rgba(6,16,20,0) 60%,rgba(6,16,20,.55)); }
.hero-mark { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; width:min(92vw,900px); animation:fadein 2.6s .3s var(--ease) both; }
.hero-mark img { width:min(340px,62vw); height:auto; filter:drop-shadow(0 2px 22px rgba(0,0,0,.35)); }
.hero-mark h1 { font:300 clamp(34px,4.4vw,64px)/1 var(--serif); letter-spacing:.42em; padding-left:.42em; text-transform:uppercase; text-shadow:0 2px 30px rgba(0,0,0,.35); }
.hero-mark p { font:400 10.5px/1.6 var(--sans); letter-spacing:.42em; padding-left:.42em; text-transform:uppercase; opacity:.92; }
.hero-foot { position:absolute; z-index:2; left:var(--g); right:var(--g); bottom:30px; display:flex; justify-content:space-between; align-items:center; gap:24px; font:400 10px/1.4 var(--sans); letter-spacing:.3em; text-transform:uppercase; }
.dots { display:flex; gap:6px; } .dots button { width:34px; height:24px; padding:0; border:0; background:none; cursor:pointer; position:relative; } .dots button::after { content:""; position:absolute; left:3px; right:3px; top:50%; height:1px; background:rgba(255,255,255,.4); transition:background .5s; } .dots button[aria-current="true"]::after { background:#fff; }
.cue { position:absolute; z-index:2; left:50%; bottom:0; width:1px; height:56px; background:linear-gradient(#fff,transparent); animation:cue 2.4s var(--ease) infinite; transform-origin:top; }
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@keyframes cue { 0% { transform:scaleY(0); } 50% { transform:scaleY(1); } 100% { transform:scaleY(1); opacity:0; } }

/* Sections */
.sec { padding:clamp(90px,13vw,190px) var(--g); }
.sec.tight { padding-top:clamp(60px,8vw,110px); padding-bottom:clamp(60px,8vw,110px); }
.ivory { background:var(--ivory); }
.dark { background:var(--night); color:#eef1ef; }
.dark .eyebrow { color:#8fd3d4; }
.intro { max-width:1040px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:34px; }
.intro h2 { font-size:clamp(30px,3.7vw,54px); line-height:1.22; }
.intro h2 em { color:var(--accent-deep); }
.intro .lede { max-width:620px; color:var(--muted); }
.rule { width:1px; height:70px; background:var(--accent); opacity:.7; }
.specs { display:grid; grid-template-columns:repeat(var(--n,5),1fr); width:100%; max-width:1000px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.specs div { padding:26px 10px; text-align:center; border-left:1px solid var(--line); }
.specs div:first-child { border-left:0; }
.specs b { display:block; font:300 clamp(28px,3vw,42px)/1 var(--serif); }
.specs span { display:block; margin-top:10px; font:400 9.5px/1.4 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }

.head { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:clamp(36px,5vw,70px); }
.head h2 { font-size:clamp(34px,4.2vw,62px); line-height:1.08; margin-top:18px; }
.head p { max-width:420px; color:var(--muted); }
.dark .head p { color:#b8c4c4; }

.split { display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(30px,6vw,110px); align-items:center; }
.split.rev { grid-template-columns:1fr 1.25fr; }
.split.rev > .ph { order:2; }
.split .ph { aspect-ratio:4/3; }
.split .ph.tall { aspect-ratio:4/5; }
.copy { display:flex; flex-direction:column; gap:24px; max-width:480px; }
.copy h2 { font-size:clamp(32px,3.6vw,54px); line-height:1.1; }
.copy p { color:var(--muted); }
.dark .copy p { color:#b8c4c4; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pair .ph { aspect-ratio:1/1; }

/* Day strip */
.strip { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,22vw); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:18px; margin:0 calc(var(--g) * -1); padding-left:var(--g); padding-right:var(--g); scrollbar-width:none; }
.strip::-webkit-scrollbar { display:none; }
.strip figure { margin:0; scroll-snap-align:start; display:flex; flex-direction:column; gap:18px; }
.strip .ph { aspect-ratio:3/4; }
.strip figcaption b { display:block; font:400 10px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:10px; }
.strip figcaption span { font:300 20px/1.35 var(--serif); }
.arrows { display:flex; gap:10px; }
.arrows button { width:52px; height:52px; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; transition:border-color .4s,background .4s; }
.arrows button:hover { border-color:var(--ink); }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(var(--c,3),1fr); gap:clamp(14px,1.6vw,24px); }
.card { display:flex; flex-direction:column; gap:16px; }
.card .ph { aspect-ratio:4/3; }
.card h3 { font-size:26px; line-height:1.2; }
.card p { color:var(--muted); font-size:15px; }
.dark .card p { color:#b8c4c4; }
.feature-grid { display:grid; grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; gap:clamp(14px,1.6vw,24px); height:min(78vh,760px); }
.feature-grid .ph:first-child { grid-row:span 2; }

.band { height:min(86vh,900px); }
.band img { width:100%; height:100%; object-fit:cover; }
.caption { display:flex; justify-content:space-between; gap:20px; padding:18px var(--g) 0; font:400 10px/1.5 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }

/* Mosaic */
.mosaic { display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(120px,14vw,230px); gap:clamp(10px,1.2vw,18px); }
.mosaic .ph:nth-child(1) { grid-column:span 4; grid-row:span 2; }
.mosaic .ph:nth-child(2) { grid-column:span 2; grid-row:span 1; }
.mosaic .ph:nth-child(3) { grid-column:span 2; grid-row:span 1; }
.mosaic .ph:nth-child(4) { grid-column:span 3; grid-row:span 2; }
.mosaic .ph:nth-child(5) { grid-column:span 3; grid-row:span 2; }

/* Map */
.map-wrap { display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(30px,6vw,100px); align-items:center; }
.map svg { width:100%; height:auto; display:block; }
.stops { list-style:none; margin:0; padding:0; border-top:1px solid rgba(255,255,255,.14); }
.stops li { display:grid; grid-template-columns:110px 1fr; gap:16px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.14); }
.stops b { font:400 10px/1.9 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:#8fd3d4; }
.stops span { font:300 19px/1.4 var(--serif); }
.note { font:400 10px/1.6 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
.dark .note { color:#8a9a9a; }

/* Rates */
.rates { display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,30px); }
.rate { border:1px solid var(--line); padding:clamp(28px,4vw,56px); display:flex; flex-direction:column; gap:20px; background:var(--paper); }
.rate .price { font:300 clamp(44px,5vw,72px)/1 var(--serif); }
.rate .price small { font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-left:10px; }
.rate ul { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.rate li { padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:15px; }

/* Inquiry */
.inq-wrap { display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(40px,7vw,120px); align-items:start; }
.inq-wrap .copy { position:sticky; top:120px; }
form.form { display:grid; grid-template-columns:1fr 1fr; gap:34px 28px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1/-1; }
.field label { font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea { width:100%; padding:10px 0 12px; border:0; border-bottom:1px solid rgba(20,35,43,.3); border-radius:0; background:transparent; color:var(--ink); font:300 18px/1.4 var(--serif); -webkit-appearance:none; appearance:none; }
.field textarea { resize:vertical; min-height:96px; }
.field input:focus,.field select:focus,.field textarea:focus { outline:0; border-bottom-color:var(--accent-deep); }
.field .hint { font-size:13px; color:var(--muted); }
.form .actions { grid-column:1/-1; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.form .msg { font-size:14px; color:var(--accent-deep); }
.form .err { color:#9a3b2a; }

/* Footer */
.foot { padding:80px var(--g) 50px; background:var(--night); color:#cfd8d7; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.foot .word { font:400 18px/1 var(--serif); letter-spacing:.5em; text-transform:uppercase; color:#fff; }
.foot p,.foot a { font-size:14px; color:#9fb0b0; }
.foot a:hover { color:#fff; }
.foot h4 { margin:0 0 14px; font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:#8fd3d4; }
.foot .legal { grid-column:1/-1; padding-top:30px; border-top:1px solid rgba(255,255,255,.12); font:400 10px/1.6 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:#6f8282; }

/* Lightbox */
.lb { position:fixed; inset:0; z-index:100; background:rgba(8,14,17,.97); display:none; flex-direction:column; color:#fff; }
.lb.on { display:flex; }
.lb-top { display:flex; justify-content:space-between; align-items:center; padding:22px var(--g); font:400 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; }
.lb-top button { border:0; background:none; cursor:pointer; font:inherit; letter-spacing:inherit; padding:10px 0; }
.lb-stage { flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:0 clamp(10px,7vw,120px) 30px; position:relative; }
.lb-stage img { max-width:100%; max-height:100%; object-fit:contain; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(0,0,0,.2); color:#fff; cursor:pointer; }
.lb-prev { left:clamp(8px,2vw,30px); } .lb-next { right:clamp(8px,2vw,30px); }

/* Reveal: content is visible by default; JS adds a gentle rise only when motion is OK */
.js .rv { opacity:0; transform:translateY(24px); transition:opacity 1.1s var(--ease),transform 1.1s var(--ease); }
.js .rv.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .js .rv { opacity:1; transform:none; transition:none; } .slide img { transition:none; transform:none; } html { scroll-behavior:auto; } }

/* Tablet and phone */
@media (max-width:980px) {
  .split,.split.rev,.map-wrap,.inq-wrap { grid-template-columns:1fr; }
  .split.rev > .ph { order:0; }
  .inq-wrap .copy { position:static; }
  .cards { --c:2 !important; }
  .feature-grid { grid-template-columns:1fr 1fr; grid-template-rows:auto; height:auto; }
  .feature-grid .ph { aspect-ratio:4/3; }
  .feature-grid .ph:first-child { grid-column:1/-1; grid-row:auto; }
  .menu-panel { grid-template-columns:1fr; } .menu-side { display:none; }
  .foot { grid-template-columns:1fr 1fr; } .foot > div:first-child { grid-column:1/-1; }
}
@media (max-width:640px) {
  body { font-size:15px; }
  .hdr { height:72px; } .hdr.solid { height:64px; }
  .hdr-btn.menu .label { display:none; }
  .hdr-btn.inq .label { display:none; } .hdr-btn.inq .short { display:inline; }
  .hdr-btn.inq .arrow { display:none; }
  .mark .word { font-size:13px; letter-spacing:.4em; }
  .mark small { display:none; }
  .hero-mark h1 { letter-spacing:.28em; padding-left:.28em; }
  .hero-foot .where { display:none; }
  .specs { grid-template-columns:repeat(2,1fr); }
  .specs div { border-left:0; border-top:1px solid var(--line); }
  .specs div:nth-child(-n+2) { border-top:0; }
  .specs div:nth-child(even) { border-left:1px solid var(--line); }
  .specs div:last-child:nth-child(odd) { grid-column:1/-1; }
  .head { flex-direction:column; align-items:flex-start; }
  .cards { --c:1 !important; }
  .strip { grid-auto-columns:78vw; }
  .rates,form.form { grid-template-columns:1fr; }
  .mosaic { grid-template-columns:1fr 1fr; grid-auto-rows:42vw; }
  .mosaic .ph:nth-child(n) { grid-column:span 1; grid-row:span 1; }
  .mosaic .ph:nth-child(1) { grid-column:1/-1; grid-row:span 1; }
  .mosaic .ph:nth-child(4) { grid-column:1/-1; }
  .band { height:62vh; }
  .stops li { grid-template-columns:90px 1fr; }
  .foot { grid-template-columns:1fr; }
}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ===== Pass 3 (2026-11-08): independent review fixes ===== */
/* Readability: practical text at 400, delicate type only for big headings */
body { font-weight:400; color:#1b2a31; }
.lede, .copy p, .head > p, .card p, .note, .stops span, figcaption span, .rate li, .foot p { font-weight:400; }
:root { --muted:#5b5a55; }
.eyebrow, .link, .btn, .hdr-btn { font-size:11.5px; letter-spacing:.24em; }
.field label { font:500 12px/1.3 var(--sans); letter-spacing:.12em; color:#2c3a40; }
.field label .opt { font-weight:400; letter-spacing:.04em; text-transform:none; color:var(--muted); margin-left:6px; }
.field input,.field select,.field textarea { font:400 18px/1.4 var(--sans); color:var(--ink); border-bottom-color:rgba(20,35,43,.42); }
.field textarea::placeholder { color:#8a8984; }
.msg { font-weight:400; }

/* Text never waits for an animation; only a small lift */
.js .rv { opacity:1; transform:translateY(14px); transition:transform .9s var(--ease); }
.js .rv.in { transform:none; }

/* Hero: copy block with the promise, location and inquiry button */
.hero-copy { position:absolute; z-index:2; left:var(--g); bottom:92px; max-width:min(720px,80vw); color:#fff; animation:fadein .9s var(--ease) both; }
.hero-copy .kicker { font:500 11.5px/1.5 var(--sans); letter-spacing:.24em; text-transform:uppercase; opacity:.95; text-shadow:0 1px 14px rgba(0,0,0,.45); }
.hero-copy h1 { margin:14px 0 0; font:300 clamp(40px,5.4vw,82px)/1.02 var(--serif); letter-spacing:-.01em; text-shadow:0 2px 30px rgba(0,0,0,.35); text-wrap:balance; }
.hero-copy h1 em { font-style:italic; }
.hero-copy .actions { margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; }
.btn.solid { background:#fff; color:var(--ink); border-color:#fff; min-height:54px; padding:0 34px; }
.btn.solid:hover { background:var(--accent-deep); color:#fff; border-color:var(--accent-deep); }
.hero-copy .link { color:#fff; }
.hero::after { background:linear-gradient(180deg,rgba(6,16,20,.42),rgba(6,16,20,0) 22%,rgba(6,16,20,0) 45%,rgba(6,16,20,.7)); }
.hero-foot .where { opacity:.95; }
.hero-ctrl { display:flex; align-items:center; gap:10px; }
.pause { min-width:44px; min-height:44px; padding:0 6px; border:0; background:none; color:#fff; font:500 10.5px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
.dots button { min-height:44px; }
.cue { display:none; }

/* Phone: photo on top (boat stays whole), promise and button on a dark panel below */
@media (max-width:640px) {
  .hero { height:auto; min-height:0; display:flex; flex-direction:column; }
  .hero .stage { position:relative; height:58svh; min-height:330px; overflow:hidden; }
  .hero::after { inset:0 0 auto 0; height:58svh; min-height:330px; background:linear-gradient(180deg,rgba(6,16,20,.5),rgba(6,16,20,0) 30%); }
  .slide img { object-position:var(--pm,50% 50%); }
  .hero-copy { position:relative; left:auto; bottom:auto; max-width:none; padding:26px var(--g) 8px; background:var(--night); animation:none; }
  .hero-copy h1 { font-size:38px; text-shadow:none; }
  .hero-copy .kicker { text-shadow:none; }
  .hero-copy .actions { margin-top:22px; gap:16px 24px; }
  .hero-copy .btn.solid { width:100%; }
  .hero-foot { position:relative; left:auto; right:auto; bottom:auto; padding:6px var(--g) 18px; background:var(--night); }
  .hero-foot .where { display:block; font-size:10.5px; letter-spacing:.18em; }
}
@media (min-width:641px) { .hero .stage { position:absolute; inset:0; } }

/* Service story */
.points { display:grid; gap:22px; margin-top:26px; }
.points div { padding-top:18px; border-top:1px solid var(--line); }
.points b { display:block; font:500 12px/1.3 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--accent-deep); margin-bottom:6px; }
.dark .points div { border-color:rgba(255,255,255,.16); }
.cta-line { margin-top:30px; }

/* Cabin arrangement */
.berths { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:clamp(20px,3vw,34px); }
.berths div { padding:18px 16px; border-left:1px solid var(--line); }
.berths div:first-child { border-left:0; padding-left:0; }
.berths b { display:block; font:300 34px/1 var(--serif); }
.berths span { display:block; margin-top:8px; font:500 11px/1.4 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
@media (max-width:640px) { .berths { grid-template-columns:1fr 1fr; } .berths div:nth-child(3) { border-left:0; padding-left:0; } .berths div:nth-child(n+3) { border-top:1px solid var(--line); } }

/* Gallery captions */
.gal figure { margin:0; }
.gal figcaption { margin-top:8px; font:500 11px/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

/* Contact identity beside the form */
.contact { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:grid; gap:12px; }
.contact a { border-bottom:1px solid currentColor; }
.contact .who { font:400 16px/1.6 var(--sans); }
.contact small { font-size:14px; color:var(--muted); }
.lb-close:focus-visible,.lb-nav:focus-visible,.pause:focus-visible,.dots button:focus-visible { outline:1px solid #fff; outline-offset:2px; }
.qa .hero-copy { animation:none; }
/* Desktop: soft scrim behind the headline */
@media (min-width:641px) { .hero .stage::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg,rgba(6,16,20,.5),rgba(6,16,20,.15) 45%,rgba(6,16,20,0) 65%); } }
.qa .hdr, .qa .hdr::before { transition:none !important; }
.rate h3 { line-height:1.18; }
.logo-dark { mix-blend-mode:multiply; }
@media (max-width:640px) { .rate .btn { width:100%; padding:0 16px; letter-spacing:.16em; text-align:center; } }