/* ==========================================================================
   NIMARA YACHTS — v2 stylesheet
   Light, photograph-led, commercial. All comments in English.
   ========================================================================== */

:root {
  --white:   #FFFFFF;
  --sand:    #F8F6F2;   /* warm off-white section ground */
  --sand-2:  #EFEBE3;
  --line:    #E2DCD1;
  --ink:     #10202B;   /* body text */
  --ink-2:   #4A5A65;   /* secondary text */
  --ink-3:   #8A959C;   /* labels */
  --deep:    #0B2B3A;   /* footer + dark bands only */
  --teal:    #0E7C86;   /* primary action */
  --teal-d:  #0A5C63;
  --gold:    #B98A34;   /* price + rating */

  --shadow-s: 0 1px 2px rgba(16,32,43,.05), 0 6px 18px rgba(16,32,43,.06);
  --shadow-m: 0 2px 6px rgba(16,32,43,.06), 0 18px 44px rgba(16,32,43,.10);

  --r: 3px;
  --gut: clamp(1.15rem, 4vw, 4rem);
  --stack: clamp(3.5rem, 7vw, 7rem);
  --max: 1380px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,h4,h5{margin:0;font-weight:400}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ---------------- Type ---------------- */
.d1,.d2,.d3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.d1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem); }
.d2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); }
.d3 { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.85rem); }

.eyebrow { font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); font-weight:600; }
.lede { font-size:1.06rem; color:var(--ink-2); max-width:62ch; line-height:1.7; }
.small { font-size:.875rem; color:var(--ink-2); }
.tiny { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

/* ---------------- Layout ---------------- */
.wrap { width: min(100% - (var(--gut)*2), var(--max)); margin-inline:auto; }
.sec { padding-block: var(--stack); }
.sec--sand { background: var(--sand); }
.sec--deep { background: var(--deep); color:#E8EEF1; }
.sec--deep .lede,.sec--deep .small { color:rgba(232,238,241,.72); }
.sec--deep .tiny { color:rgba(232,238,241,.5); }

.sechead { margin-bottom: clamp(2rem,4vw,3.25rem); max-width:70ch; }
.sechead .d2 { margin:.55rem 0 .9rem; }
.sechead.center { margin-inline:auto; text-align:center; }

/* ---------------- Buttons ---------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.95rem 1.9rem; border-radius:var(--r);
  font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition: background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease);
  white-space:nowrap;
}
.btn--primary { background:var(--teal); color:#fff; }
.btn--primary:hover { background:var(--teal-d); }
.btn--outline { border-color:var(--ink); color:var(--ink); }
.btn--outline:hover { background:var(--ink); color:#fff; }
.btn--light { background:rgba(255,255,255,.94); color:var(--ink); }
.btn--light:hover { background:#fff; }
.btn--ghostlight { border-color:rgba(255,255,255,.6); color:#fff; }
.btn--ghostlight:hover { background:#fff; color:var(--ink); }
.btn--sm { padding:.65rem 1.15rem; font-size:.72rem; }

.textlink {
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:2px;
}
.textlink:hover { color:var(--teal-d); }

/* ---------------- Photo frames ----------------
   Every photograph sits on a light Aegean wash, so a slow or missing image
   still reads as designed rather than as a hole in the page. */
.ph {
  position:relative; overflow:hidden; border-radius:var(--r);
  background:
    radial-gradient(60% 42% at 74% 26%, rgba(255,244,214,.85) 0%, rgba(255,244,214,0) 62%),
    linear-gradient(to bottom,
      #CFE6EE 0%, #BBDDE9 38%, #A6D3E0 47%,
      #4FA9B8 48%, #2E8FA2 68%, #1C6F82 100%);
}
.ph::after {
  content:""; position:absolute; inset:48% 0 0 0; z-index:1;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.13) 0 1px, transparent 1px 9px);
}
.ph > img { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; }
.ph--tall { aspect-ratio:3/4; }
.ph--wide { aspect-ratio:16/9; }
.ph--photo { aspect-ratio:3/2; }
.ph--sq { aspect-ratio:1/1; }

/* ---------------- Topbar + header ---------------- */
.topbar { background:var(--deep); color:rgba(232,238,241,.85); font-size:.78rem; }
.topbar .wrap { display:flex; align-items:center; gap:1.25rem; padding-block:.55rem; flex-wrap:wrap; }
.topbar a { text-decoration:none; }
.topbar a:hover { color:#fff; }
.topbar .spacer { margin-left:auto; }
.stars { color:var(--gold); letter-spacing:.06em; }

.head { position:sticky; top:0; z-index:80; background:rgba(255,255,255,.93);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.head .wrap { display:flex; align-items:center; gap:1.5rem; padding-block:.8rem; }
.logo { display:flex; align-items:center; text-decoration:none; color:var(--deep); flex:0 0 auto; }
.logo svg { width:152px; height:auto; }
.mainnav { display:flex; gap:1.75rem; margin-left:auto; }
.mainnav a { font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; color:var(--ink); padding-block:.4rem; border-bottom:2px solid transparent; }
.mainnav a:hover { color:var(--teal); border-bottom-color:var(--teal); }
.headtools { display:flex; align-items:center; gap:.65rem; }

.lang { position:relative; }
.lang > button { display:flex; align-items:center; gap:.4rem; background:none;
  border:1px solid var(--line); border-radius:var(--r); padding:.55rem .7rem;
  font-size:.75rem; font-weight:600; letter-spacing:.1em; cursor:pointer; }
.lang > button:hover { border-color:var(--teal); color:var(--teal); }
.lang ul { position:absolute; right:0; top:calc(100% + .4rem); min-width:10rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-m);
  padding:.35rem; display:none; z-index:90; }
.lang.open ul { display:block; }
.lang li button { width:100%; border:0; background:none; cursor:pointer; display:flex;
  justify-content:flex-start; padding:.55rem .7rem; font-size:.85rem; border-radius:var(--r); }
.lang li button:hover { background:var(--sand); }
.lang li button[aria-current="true"] { color:var(--teal); font-weight:700; }

.burger { display:none; background:none; border:1px solid var(--line); border-radius:var(--r); padding:.6rem .65rem; cursor:pointer; }
.burger span { display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; }

/* ---------------- Hero ---------------- */
.hero { position:relative; min-height:min(74svh,660px); display:flex; align-items:center; }
.hero .ph { position:absolute; inset:0; border-radius:0; }
.hero .ph::after { display:none; }
.hero .scrim { position:absolute; inset:0; z-index:3;
  background:linear-gradient(to top, rgba(6,26,36,.84) 0%, rgba(6,26,36,.36) 44%, rgba(6,26,36,.18) 100%); }
.hero-in { position:relative; z-index:4; color:#fff; padding-block:clamp(1.5rem,4vh,3rem) clamp(4rem,9vh,6.5rem); }
.hero .d1 { max-width:17ch; }
.hero .lede { color:rgba(255,255,255,.9); margin-top:1.1rem; max-width:52ch; }
.hero-cta { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.9rem; }
.hero-proof { display:flex; gap:2.25rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.hero-proof div strong { display:block; font-family:"Cormorant Garamond",serif; font-size:1.75rem; line-height:1; }
.hero-proof div span { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.75); }

/* ---------------- Search bar ---------------- */
.searchbar { position:relative; z-index:20; margin-top:-3.4rem; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-m);
  display:grid; grid-template-columns:repeat(4,1fr) auto; }
.searchbar .cell { padding:1.05rem 1.25rem; border-right:1px solid var(--line); }
.searchbar .cell:nth-child(4) { border-right:0; }
.searchbar label { display:block; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem; }
.searchbar select,.searchbar input { width:100%; border:0; background:none; padding:0; font-size:.95rem; font-weight:600; }
.searchbar select:focus,.searchbar input:focus { outline:none; color:var(--teal); }
.searchbar .go { display:flex; align-items:stretch; }
.searchbar .go .btn { border-radius:0; padding-inline:2.2rem; }

/* ---------------- Cards ---------------- */
.grid { display:grid; gap:clamp(1rem,2vw,1.6rem); }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }

.card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease); }
.card:hover { box-shadow:var(--shadow-m); transform:translateY(-3px); }
.card .ph { border-radius:0; }
.card .cbody { padding:1.35rem 1.35rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.card .kicker { font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.card h3 { font-family:"Cormorant Garamond",serif; font-size:1.6rem; line-height:1.15; margin:.4rem 0 .5rem; }
.card p { font-size:.9rem; color:var(--ink-2); line-height:1.6; }
.card .cfoot { margin-top:auto; padding-top:1.1rem; display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem; }
.price { font-family:"Cormorant Garamond",serif; font-size:1.5rem; }
.price small { font-family:Manrope,sans-serif; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; }

.specrow { display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
.specrow div { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.specrow div b { display:block; font-size:.95rem; color:var(--ink); font-weight:600; letter-spacing:0; text-transform:none; }

/* ---------------- Image tiles ---------------- */
.tile { position:relative; display:block; overflow:hidden; border-radius:var(--r); text-decoration:none; color:#fff; }
.tile .ph { border-radius:0; }
.tile img { transition:transform .7s var(--ease); }
.tile:hover img { transform:scale(1.05); }
.tile .tscrim { position:absolute; inset:0; z-index:3;
  background:linear-gradient(to top, rgba(6,26,36,.88) 0%, rgba(6,26,36,.22) 58%, rgba(6,26,36,.06) 100%); }
.tile .tcap { position:absolute; z-index:4; inset:auto 0 0 0; padding:1.15rem 1.25rem 1.2rem; }
.tile h4 { font-family:"Cormorant Garamond",serif; font-size:1.4rem; }
.tile p { font-size:.82rem; color:rgba(255,255,255,.84); margin-top:.25rem; line-height:1.5; }
.tile .meta { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); }

/* ---------------- Routes ---------------- */
.route { background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; }
.route .rhead { position:relative; }
.route .rbadge { position:absolute; z-index:5; top:.85rem; left:.85rem; background:rgba(255,255,255,.95);
  color:var(--ink); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .7rem; border-radius:var(--r); }
.route .rbody { padding:1.4rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.route h3 { font-family:"Cormorant Garamond",serif; font-size:1.6rem; line-height:1.15; }
.route .where { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:700; margin-bottom:.4rem; }
.days { margin-top:1rem; border-left:2px solid var(--sand-2); padding-left:1rem; }
.days li { position:relative; font-size:.86rem; color:var(--ink-2); padding:.34rem 0; }
.days li::before { content:""; position:absolute; left:-1.32rem; top:.82rem; width:8px; height:8px; border-radius:50%; background:#fff; border:2px solid var(--teal); }
.days li b { color:var(--ink); font-weight:600; }
.route .rfoot { margin-top:auto; padding-top:1.3rem; display:flex; align-items:center; justify-content:space-between; gap:.8rem; flex-wrap:wrap; }

/* ---------------- Departures ---------------- */
.dep { display:grid; grid-template-columns:8rem 1.6fr 1fr .9fr auto; gap:1.25rem; align-items:center;
  padding:1.05rem 1.1rem; border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-bottom:.65rem; }
.dep .date { font-family:"Cormorant Garamond",serif; font-size:1.35rem; }
.dep .date small { display:block; font-family:Manrope,sans-serif; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.dep .boat b { font-weight:600; }
.dep .boat span { display:block; font-size:.8rem; color:var(--ink-2); }
.dep .left { font-size:.82rem; color:var(--ink-2); }
.dep .left b { color:var(--teal); }
.dep .pp { font-family:"Cormorant Garamond",serif; font-size:1.4rem; }
.dep .pp small { display:block; font-family:Manrope,sans-serif; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }

/* ---------------- Split ---------------- */
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.75rem,4vw,4rem); align-items:center; }
.ticks { margin-top:1.6rem; display:grid; gap:.85rem; }
.ticks li { display:grid; grid-template-columns:auto 1fr; gap:.8rem; font-size:.95rem; color:var(--ink-2); }
.ticks li svg { width:20px; height:20px; color:var(--teal); margin-top:.22rem; flex:0 0 auto; }
.sec--deep .ticks li { color:rgba(232,238,241,.82); }
.sec--deep .ticks li svg { color:#6BC5CE; }

/* ---------------- Reviews ---------------- */
.quote { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.6rem 1.5rem; }
.quote p { font-family:"Cormorant Garamond",serif; font-size:1.25rem; line-height:1.45; margin:.7rem 0 1rem; }
.quote cite { font-style:normal; font-size:.8rem; color:var(--ink-3); }

/* ---------------- FAQ ---------------- */
.faq details { border-bottom:1px solid var(--line); }
.faq summary { cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0; position:relative; font-size:1.02rem; font-weight:600; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:.35rem; top:.95rem; font-size:1.5rem; color:var(--teal); font-weight:300; }
.faq details[open] summary::after { content:"–"; }
.faq .a { padding:0 2.5rem 1.3rem 0; color:var(--ink-2); font-size:.95rem; }

/* ---------------- CTA band ---------------- */
.cta { position:relative; }
.cta .ph { position:absolute; inset:0; border-radius:0; }
.cta .ph::after { display:none; }
.cta .scrim { position:absolute; inset:0; z-index:3; background:rgba(6,26,36,.64); }
.cta .wrap { position:relative; z-index:4; text-align:center; color:#fff; padding-block:clamp(3.5rem,7vw,6rem); }
.cta .lede { color:rgba(255,255,255,.86); margin-inline:auto; }
.cta .btns { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1.9rem; }

/* ---------------- Forms ---------------- */
.form { display:grid; gap:1rem; }
.frow { display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
.form label { display:block; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:.4rem; }
.form input,.form select,.form textarea { width:100%; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:.8rem .9rem; font-size:.95rem; }
.form input:focus,.form select:focus,.form textarea:focus { outline:none; border-color:var(--teal); }
.form textarea { min-height:6.5rem; resize:vertical; }
.status { font-size:.88rem; color:var(--teal); min-height:1.3rem; }
.officecard { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1.35rem; margin-bottom:1rem; }
.officecard h4 { font-family:"Cormorant Garamond",serif; font-size:1.3rem; margin-bottom:.35rem; }
.officecard p { font-size:.9rem; color:var(--ink-2); }

/* ---------------- Footer ---------------- */
.foot { background:var(--deep); color:rgba(232,238,241,.72); padding-block:3.5rem 2rem; }
.foot h5 { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#fff; margin-bottom:.9rem; font-weight:700; }
.foot a { text-decoration:none; font-size:.875rem; }
.foot a:hover { color:#fff; }
.foot li { margin-bottom:.5rem; }
.footgrid { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:2rem; }
.colophon { margin-top:2.75rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.78rem; }

/* ---------------- WhatsApp ---------------- */
.wa { position:fixed; right:1.1rem; bottom:1.1rem; z-index:90; width:3.25rem; height:3.25rem;
  border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--shadow-m); text-decoration:none; }
.wa svg { width:26px; height:26px; }

/* ---------------- Responsive ---------------- */
@media (max-width:1080px){
  .g4 { grid-template-columns:repeat(2,1fr); }
  .footgrid { grid-template-columns:1fr 1fr 1fr; }
  .searchbar { grid-template-columns:1fr 1fr; }
  .searchbar .cell:nth-child(2){ border-right:0; }
  .searchbar .cell { border-bottom:1px solid var(--line); }
  .searchbar .go { grid-column:1/-1; }
  .searchbar .go .btn { width:100%; }
}
@media (max-width:880px){
  .mainnav { display:none; }
  .burger { display:block; }
  .mainnav.open { display:flex; flex-direction:column; gap:0; position:absolute; inset:100% 0 auto 0;
    background:#fff; border-bottom:1px solid var(--line); padding:.5rem var(--gut) 1.2rem; }
  .mainnav.open a { padding:.85rem 0; border-bottom:1px solid var(--line); }
  .g3,.g2,.split { grid-template-columns:1fr; }
  .dep { grid-template-columns:1fr auto; row-gap:.6rem; }
  .dep .date { grid-column:1/-1; }
  .frow { grid-template-columns:1fr; }
  .footgrid { grid-template-columns:1fr 1fr; }
  .hideph { display:none; }
}
@media (max-width:560px){
  .g4 { grid-template-columns:1fr; }
  .footgrid { grid-template-columns:1fr; }
  .searchbar { grid-template-columns:1fr; margin-top:-1.5rem; }
  .searchbar .cell { border-right:0; }
}


/* ==========================================================================
   v3 — multi-page additions
   ========================================================================== */

/* ---------------- Dropdown navigation ---------------- */
.mainnav .has-sub { position:relative; }
.mainnav .has-sub > a { display:inline-flex; align-items:center; gap:.35rem; }
.mainnav .has-sub > a::after {
  content:""; width:5px; height:5px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px);
}
.submenu {
  position:absolute; left:-1rem; top:calc(100% + .55rem); min-width:19rem;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-m); padding:.5rem; z-index:95;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.mainnav .has-sub:hover .submenu,
.mainnav .has-sub:focus-within .submenu,
.mainnav .has-sub.open .submenu { opacity:1; visibility:visible; transform:none; }
.submenu a {
  display:flex; gap:.75rem; align-items:center; padding:.6rem .7rem;
  border-radius:var(--r); border:0; text-transform:none; letter-spacing:0;
  font-size:.9rem; font-weight:500; color:var(--ink);
}
.submenu a:hover { background:var(--sand); color:var(--teal); border:0; }
.submenu a i { font-style:normal; display:block; font-size:.74rem; color:var(--ink-3); font-weight:400; }
.submenu a b { font-weight:600; display:block; }
.submenu .thumb { width:52px; height:38px; border-radius:2px; flex:0 0 auto; }

/* ---------------- Page header (interior pages) ---------------- */
.pagehead { position:relative; }
.pagehead .ph { position:absolute; inset:0; border-radius:0; }
.pagehead .scrim { position:absolute; inset:0; z-index:3; background:linear-gradient(to top,rgba(6,26,36,.86),rgba(6,26,36,.42)); }
.pagehead .wrap { position:relative; z-index:4; color:#fff; padding-block:clamp(3rem,8vw,6rem); }
.pagehead .d1 { max-width:20ch; }
.pagehead .lede { color:rgba(255,255,255,.9); margin-top:.9rem; }

.crumbs { display:flex; gap:.5rem; flex-wrap:wrap; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:1rem; }
.crumbs a { text-decoration:none; }
.crumbs a:hover { color:#fff; }
.crumbs span { opacity:.5; }

/* ---------------- Prose ---------------- */
.prose { max-width:68ch; }
.prose h2 { font-family:"Cormorant Garamond",serif; font-size:1.9rem; font-weight:400; margin:2.2rem 0 .8rem; }
.prose h3 { font-family:"Cormorant Garamond",serif; font-size:1.45rem; font-weight:500; margin:1.8rem 0 .6rem; }
.prose p { margin-bottom:1rem; color:var(--ink-2); }
.prose ul { margin:0 0 1.2rem; }
.prose ul li { position:relative; padding-left:1.2rem; margin-bottom:.5rem; color:var(--ink-2); }
.prose ul li::before { content:""; position:absolute; left:0; top:.7rem; width:6px; height:6px; border-radius:50%; background:var(--teal); }
.prose strong { color:var(--ink); font-weight:600; }

/* ---------------- Spec table ---------------- */
.spectable { width:100%; border-collapse:collapse; }
.spectable th, .spectable td { text-align:left; padding:.75rem .5rem; border-bottom:1px solid var(--line); font-size:.92rem; }
.spectable th { color:var(--ink-3); font-weight:500; width:44%; }
.spectable td { font-weight:600; }

/* ---------------- Gallery ---------------- */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.gallery .ph { cursor:zoom-in; }
.gallery .ph--big { grid-column:span 2; grid-row:span 2; }

/* ---------------- Sticky booking rail ---------------- */
.rail { position:sticky; top:6.5rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); padding:1.5rem; box-shadow:var(--shadow-s); }
.rail .bigprice { font-family:"Cormorant Garamond",serif; font-size:2.4rem; line-height:1; }
.rail .bigprice small { display:block; font-family:Manrope,sans-serif; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-top:.3rem; }
.rail hr { border:0; border-top:1px solid var(--line); margin:1.1rem 0; }
.rail .line { display:flex; justify-content:space-between; gap:1rem; font-size:.88rem; padding:.3rem 0; color:var(--ink-2); }
.rail .line b { color:var(--ink); font-weight:600; }

.layout { display:grid; grid-template-columns:1fr 22rem; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }

/* ==========================================================================
   THE LOGBOOK — animated live chart on the routes pages
   ========================================================================== */
.logbook {
  background:
    radial-gradient(90% 70% at 30% 10%, #FBF6E9 0%, #F3EAD6 55%, #EADFC6 100%);
  border:1px solid #D9CBAA; border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow-m);
}
.lb-top {
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:.9rem 1.2rem; border-bottom:1px solid #DFD2B4; background:rgba(255,255,255,.45);
}
.lb-top h3 { font-family:"Cormorant Garamond",serif; font-size:1.35rem; color:#2A3B2E; }
.lb-top .stamp {
  margin-left:auto; border:2px solid #9A6B4F; color:#9A6B4F; border-radius:2px;
  padding:.25rem .6rem; font-size:.68rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; transform:rotate(-3deg); opacity:.85;
}
.lb-body { display:grid; grid-template-columns:1.45fr 1fr; }
.lb-map { position:relative; background:#EAF4F4; min-height:26rem; }
.lb-map svg { display:block; width:100%; height:100%; }

.sea    { fill:#D9EDF0; }
.land   { fill:#EFE7D2; stroke:#CDBF9E; stroke-width:.6; }
.grat   { stroke:#B9CFD4; stroke-width:.35; opacity:.55; }
.leg    { fill:none; stroke:#1E6E7A; stroke-width:1.5; stroke-linecap:round;
          stroke-dasharray:3 2.6; }
.leg-run{ fill:none; stroke:#B4551F; stroke-width:1.9; stroke-linecap:round; }
.node   { fill:#FFFDF6; stroke:#1E6E7A; stroke-width:1.1; cursor:pointer;
          transition:r .25s var(--ease), fill .25s var(--ease); }
.node:hover, .node.on { fill:#B4551F; stroke:#8C3F14; }
.nodelabel { font:600 3.1px Manrope,sans-serif; fill:#2B4750; pointer-events:none; }
.regionlabel { font:400 4.4px "Cormorant Garamond",serif; fill:#9FB0A6; letter-spacing:.4px; pointer-events:none; }
.boat { transition:none; }

.lb-side { border-left:1px solid #DFD2B4; display:flex; flex-direction:column; background:rgba(255,255,255,.35); }
.lb-entry { padding:1.25rem 1.35rem; flex:1; }
.lb-entry .daytag { display:inline-block; background:#2A4A52; color:#F6EFDF; font-size:.66rem;
  font-weight:700; letter-spacing:.16em; text-transform:uppercase; padding:.28rem .6rem; border-radius:2px; }
.lb-entry h4 { font-family:"Cormorant Garamond",serif; font-size:1.75rem; margin:.7rem 0 .15rem; color:#22333A; }
.lb-entry .pos { font-size:.72rem; letter-spacing:.1em; color:#8A7A57; font-variant-numeric:tabular-nums; }
.lb-entry .shot { margin:.9rem 0; border-radius:2px; overflow:hidden; border:1px solid #DFD2B4; }
.lb-entry p { font-size:.9rem; line-height:1.65; color:#4A5A52; }
.lb-entry .facts { display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:.9rem;
  padding-top:.9rem; border-top:1px dashed #CDBF9E; }
.lb-entry .facts div { font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#8A7A57; }
.lb-entry .facts div b { display:block; font-size:.95rem; letter-spacing:0; text-transform:none; color:#22333A; }

.lb-controls { display:flex; align-items:center; gap:.75rem; padding:.85rem 1.2rem;
  border-top:1px solid #DFD2B4; background:rgba(255,255,255,.5); }
.lb-controls button { background:#2A4A52; color:#F6EFDF; border:0; border-radius:2px;
  padding:.6rem 1.1rem; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; cursor:pointer; }
.lb-controls button:hover { background:#1B343A; }
.lb-controls button.ghost { background:transparent; color:#2A4A52; border:1px solid #B9A780; }
.lb-controls button.ghost:hover { background:#E4D8BC; }
.lb-progress { flex:1; height:3px; background:#DCCFB0; border-radius:2px; overflow:hidden; }
.lb-progress i { display:block; height:100%; width:0; background:#B4551F; transition:width .3s linear; }

.lb-days { display:flex; gap:.4rem; flex-wrap:wrap; padding:.85rem 1.2rem; border-top:1px solid #DFD2B4; }

.lb-days button { border:1px solid #C6B58E; background:transparent; color:#5A4A2C;
  border-radius:2px; padding:.4rem .7rem; font-size:.74rem; font-weight:600; cursor:pointer; }
.lb-days button:hover { border-color:#8A6A34; }
.lb-days button[aria-current="true"] { background:#2A4A52; border-color:#2A4A52; color:#F6EFDF; }

@media (max-width:900px){
  .lb-body { grid-template-columns:1fr; }
  .lb-side { border-left:0; border-top:1px solid #DFD2B4; }
  .lb-map { min-height:20rem; }
  .layout { grid-template-columns:1fr; }
  .rail { position:static; }
  .gallery { grid-template-columns:repeat(2,1fr); }
  .gallery .ph--big { grid-column:span 2; grid-row:auto; }
}

/* ---------------- Mobile submenu ---------------- */
@media (max-width:880px){
  .mainnav .has-sub > a::after { margin-left:auto; }
  .submenu { position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; border-left:2px solid var(--line); border-radius:0;
    margin:0 0 .5rem .5rem; padding:0 0 0 .75rem; display:none; }
  .mainnav .has-sub.open .submenu { display:block; }
  .submenu .thumb { display:none; }
}

/* ==========================================================================
   v4 — yacht pages, reviews, region picker, 360 tour
   ========================================================================== */

/* ---------------- Yacht hero ---------------- */
.yhero { display:grid; grid-template-columns:1.6fr 1fr; gap:.5rem; }
.yhero .main .ph { aspect-ratio:16/10; }
.yhero .side { display:grid; grid-template-rows:1fr 1fr; gap:.5rem; }
.yhero .side .ph { aspect-ratio:16/10; height:100%; }
.yhero .ph { border-radius:0; }
.yhero .ph:first-child { border-radius:var(--r) 0 0 var(--r); }

.ytitle { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin:2rem 0 1.4rem; }
.ytitle h1 { font-family:"Cormorant Garamond",serif; font-size:clamp(2.2rem,1.4rem+2.4vw,3.4rem); font-weight:300; line-height:1.05; }
.ytitle .kicker { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.ytitle .rating { display:flex; align-items:center; gap:.5rem; font-size:.9rem; color:var(--ink-2); }
.ytitle .rating b { color:var(--ink); }

/* Key facts strip */
.keyfacts { display:grid; grid-template-columns:repeat(6,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.keyfacts div { background:#fff; padding:1rem .9rem; }
.keyfacts span { display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.keyfacts b { display:block; font-family:"Cormorant Garamond",serif; font-size:1.5rem; font-weight:400; margin-top:.15rem; }

/* Cabin / layout cards */
.cabins { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.cabincard { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#fff; }
.cabincard .ph { border-radius:0; }
.cabincard div { padding:.9rem 1rem 1.1rem; }
.cabincard b { display:block; font-weight:600; }
.cabincard span { font-size:.82rem; color:var(--ink-2); }

/* Crew */
.crew { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; }
.crewcard { border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.15rem; background:#fff; }
.crewcard .role { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.crewcard b { display:block; font-family:"Cormorant Garamond",serif; font-size:1.3rem; font-weight:400; margin:.3rem 0 .2rem; }
.crewcard span { font-size:.82rem; color:var(--ink-2); line-height:1.55; }

/* Reviews */
.reviews { display:grid; gap:1rem; }
.rev { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:1.3rem 1.4rem; }
.rev .rhead2 { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:.6rem; }
.rev .who { font-weight:600; }
.rev .when { font-size:.78rem; color:var(--ink-3); margin-left:auto; }
.rev .stars { font-size:.85rem; }
.rev p { font-size:.95rem; color:var(--ink-2); line-height:1.65; }
.ratingbox { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; border:1px solid var(--line);
  border-radius:var(--r); background:#fff; padding:1.2rem 1.4rem; margin-bottom:1.2rem; }
.ratingbox .big { font-family:"Cormorant Garamond",serif; font-size:3rem; line-height:1; }
.ratingbox .bars { flex:1; min-width:220px; display:grid; gap:.35rem; }
.ratingbox .bars div { display:grid; grid-template-columns:6.5rem 1fr auto; gap:.7rem; align-items:center;
  font-size:.78rem; color:var(--ink-2); }
.ratingbox .bars i { display:block; height:5px; background:var(--sand-2); border-radius:3px; overflow:hidden; }
.ratingbox .bars i b { display:block; height:100%; background:var(--gold); }

/* ---------------- Region picker (routes) ---------------- */
.regionpick { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.regioncard { position:relative; display:block; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:#fff; text-align:left; cursor:pointer; padding:0; color:inherit;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); }
.regioncard:hover { box-shadow:var(--shadow-m); transform:translateY(-3px); }
.regioncard[aria-pressed="true"] { border-color:var(--teal); box-shadow:0 0 0 2px rgba(14,124,134,.18), var(--shadow-m); }
.regioncard .ph { border-radius:0; aspect-ratio:4/3; }
.regioncard .rc { padding:1rem 1.1rem 1.2rem; }
.regioncard h3 { font-family:"Cormorant Garamond",serif; font-size:1.35rem; font-weight:400; }
.regioncard p { font-size:.84rem; color:var(--ink-2); margin-top:.3rem; line-height:1.55; }
.regioncard .n { display:inline-block; margin-top:.7rem; font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal); font-weight:700; }
.regioncard[aria-pressed="true"]::after {
  content:""; position:absolute; left:50%; bottom:-1rem; width:1rem; height:1rem;
  background:var(--sand); border-left:1px solid var(--teal); border-top:1px solid var(--teal);
  transform:translateX(-50%) rotate(45deg); }

.routelist { margin-top:2.5rem; }
.routerow { display:grid; grid-template-columns:16rem 1fr auto; gap:1.6rem; align-items:center;
  border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; margin-bottom:1rem; }
.routerow .ph { border-radius:0; aspect-ratio:4/3; }
.routerow .rr { padding:1.2rem 0; }
.routerow h3 { font-family:"Cormorant Garamond",serif; font-size:1.55rem; font-weight:400; }
.routerow .where { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.routerow p { font-size:.9rem; color:var(--ink-2); margin-top:.5rem; line-height:1.6; }
.routerow .stops { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.routerow .stops span { font-size:.72rem; background:var(--sand); border:1px solid var(--line);
  border-radius:2px; padding:.25rem .5rem; color:var(--ink-2); }
.routerow .rx { padding:1.2rem 1.4rem 1.2rem 0; text-align:right; }
.routerow .rx .price { display:block; margin-bottom:.7rem; }

/* ---------------- 360 tour ---------------- */
.tour { position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:#0B2B3A; }
.tour canvas { display:block; width:100%; height:clamp(22rem,52vh,34rem); cursor:grab; touch-action:none; }
.tour canvas:active { cursor:grabbing; }
.tour .tbar { position:absolute; left:0; right:0; bottom:0; z-index:5; display:flex; gap:.5rem;
  padding:.85rem 1rem; background:linear-gradient(to top,rgba(6,26,36,.9),rgba(6,26,36,0)); flex-wrap:wrap; }
.tour .tbar button { background:rgba(255,255,255,.14); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:var(--r); padding:.55rem .95rem; font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; }
.tour .tbar button:hover { background:rgba(255,255,255,.28); }
.tour .tbar button[aria-current="true"] { background:#fff; color:var(--ink); border-color:#fff; }
.tour .hint { position:absolute; top:1rem; left:1rem; z-index:5; color:#fff; font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase; background:rgba(6,26,36,.5); backdrop-filter:blur(6px);
  padding:.45rem .8rem; border-radius:var(--r); pointer-events:none; transition:opacity .5s; }
.tour .fallback { padding:2rem; color:#E8EEF1; text-align:center; font-size:.9rem; }

@media (max-width:1080px){
  .keyfacts { grid-template-columns:repeat(3,1fr); }
  .regionpick { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .yhero { grid-template-columns:1fr; }
  .yhero .side { grid-template-rows:auto; grid-template-columns:1fr 1fr; }
  .yhero .ph:first-child { border-radius:var(--r) var(--r) 0 0; }
  .routerow { grid-template-columns:1fr; }
  .routerow .rr, .routerow .rx { padding:1.2rem; text-align:left; }
}
@media (max-width:560px){
  .keyfacts { grid-template-columns:repeat(2,1fr); }
  .regionpick { grid-template-columns:1fr; }
}

/* ---------------- 360° tour badge ---------------- */
.phwrap { position:relative; display:block; }
.tourbadge {
  position:absolute; z-index:6; left:.7rem; top:.7rem;
  display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(255,255,255,.94); color:var(--ink);
  border-radius:2rem; padding:.35rem .75rem;
  font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  box-shadow:var(--shadow-s); pointer-events:none;
}
.tourbadge::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 0 0 rgba(14,124,134,.55);
  animation:tpulse 2.4s ease-out infinite;
}
.tourbadge--lg { left:1rem; top:1rem; font-size:.74rem; padding:.5rem 1rem; }
@keyframes tpulse {
  0%   { box-shadow:0 0 0 0 rgba(14,124,134,.55); }
  70%  { box-shadow:0 0 0 10px rgba(14,124,134,0); }
  100% { box-shadow:0 0 0 0 rgba(14,124,134,0); }
}
@media (prefers-reduced-motion: reduce){ .tourbadge::before { animation:none; } }

/* ==========================================================================
   v5 — mobile pass, page transitions, crew icons, memories timeline
   ========================================================================== */

/* ---------------- Page transitions ----------------
   Native View Transitions where supported; a scripted fade elsewhere. */
/* the sail wipe in nimara.js is the page transition */
@keyframes vtOut { to { opacity:0; transform:translateY(-6px); } }
@keyframes vtIn  { from { opacity:0; transform:translateY(10px); } }

body { animation: pageIn .38s var(--ease) both; }
@keyframes pageIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  body { animation:none; }
}

/* ---------------- Crew, as icons ---------------- */
.crewicons { display:flex; flex-wrap:wrap; gap:.6rem; }
.crewicon {
  display:flex; align-items:center; gap:.55rem;
  border:1px solid var(--line); border-radius:2rem; background:#fff;
  padding:.5rem .95rem .5rem .6rem;
}
.crewicon svg { width:26px; height:26px; color:var(--teal); flex:0 0 auto; }
.crewicon b { font-size:.9rem; font-weight:600; }
.crewicon span { font-size:.78rem; color:var(--ink-3); margin-left:.15rem; }
.sec--deep .crewicon { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.18); color:#E8EEF1; }
.sec--deep .crewicon svg { color:#6BC5CE; }

/* ---------------- Memories / logbook of a life ---------------- */
.mem-filter { display:flex; gap:.45rem; overflow-x:auto; padding-bottom:.5rem; -webkit-overflow-scrolling:touch; }
.mem-filter button {
  flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink-2);
  border-radius:2rem; padding:.5rem 1rem; font-size:.82rem; font-weight:600; cursor:pointer;
}
.mem-filter button[aria-pressed="true"] { background:var(--deep); border-color:var(--deep); color:#fff; }

.timeline { position:relative; margin-top:2rem; }
.timeline::before {
  content:""; position:absolute; left:5.5rem; top:0; bottom:0; width:2px;
  background:linear-gradient(to bottom, transparent, var(--line) 6%, var(--line) 94%, transparent);
}
.mem { position:relative; display:grid; grid-template-columns:5.5rem 1fr; gap:2rem; padding-bottom:2.5rem; }
.mem .yr {
  font-family:"Cormorant Garamond",serif; font-size:1.6rem; color:var(--ink-3);
  text-align:right; padding-right:1.1rem; line-height:1.1; padding-top:.1rem;
}
.mem::after {
  content:""; position:absolute; left:calc(5.5rem - 5px); top:.7rem;
  width:12px; height:12px; border-radius:50%; background:#fff; border:2px solid var(--teal); z-index:2;
}
.mem .card2 { background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.mem .card2 .body2 { padding:1.15rem 1.25rem 1.35rem; }
.mem h3 { font-family:"Cormorant Garamond",serif; font-size:1.45rem; font-weight:400; }
.mem .place { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.mem p { font-size:.92rem; color:var(--ink-2); line-height:1.65; margin-top:.5rem; }
.memmedia { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:2px; }
.memmedia .ph, .memmedia video { border-radius:0; aspect-ratio:4/3; width:100%; object-fit:cover; background:#0B2B3A; }
.memmedia > * { cursor:zoom-in; }

/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(6,26,36,.94);
  display:none; align-items:center; justify-content:center; padding:1rem; }
.lightbox.on { display:flex; }
.lightbox img, .lightbox video { max-width:100%; max-height:86vh; border-radius:var(--r); }
.lightbox button { position:absolute; top:max(1rem,env(safe-area-inset-top)); right:1rem;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35); color:#fff;
  width:2.75rem; height:2.75rem; border-radius:50%; font-size:1.4rem; cursor:pointer; }

/* ==========================================================================
   MOBILE PASS — checked component by component
   ========================================================================== */

/* Never let anything push the page sideways. */
html, body { max-width:100%; }
img, video, canvas, svg, table, pre { max-width:100%; }

/* iOS: inputs below 16px make Safari zoom on focus. */
@media (max-width: 880px) {
  .form input, .form select, .form textarea,
  .searchbar input, .searchbar select { font-size:16px; }
}

/* Respect the notch and the home indicator. */
.wrap { padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.wa { right:max(1.1rem, env(safe-area-inset-right)); bottom:max(1.1rem, env(safe-area-inset-bottom)); }

@media (max-width: 880px) {
  /* Tap targets: nothing smaller than a fingertip. */
  .btn { padding:1rem 1.6rem; }
  .btn--sm { padding:.8rem 1.1rem; }
  .mainnav.open a, .submenu a, .lang li button { min-height:46px; display:flex; align-items:center; }
  .burger { min-width:46px; min-height:46px; }
  .faq summary { padding-block:1.1rem; min-height:48px; }

  /* Header: keep the logo readable, drop the label on the CTA. */
  .head .wrap { gap:.75rem; }
  .logo svg { width:124px; }
  .headtools { gap:.4rem; margin-left:auto; }
  .lang > button { padding:.6rem .55rem; }

  /* Hero: shorter, so the search bar is reachable without a long scroll. */
  .hero { min-height:min(64svh, 520px); }
  .hero-proof { gap:1.4rem; margin-bottom:1rem; }
  .hero-proof div strong { font-size:1.4rem; }
  .hero-cta .btn { flex:1 1 auto; justify-content:center; }

  /* Page heads */
  .pagehead .wrap { padding-block:2.5rem; }
  .crumbs { font-size:.7rem; }

  /* Cards and grids already collapse; tighten the rhythm. */
  .sec { padding-block:clamp(2.5rem,7vw,4rem); }
  .sechead { margin-bottom:1.6rem; }

  /* Yacht page */
  .ytitle { gap:1rem; margin:1.4rem 0 1.1rem; }
  .ytitle > div:last-child .price { font-size:1.6rem !important; }
  .keyfacts div { padding:.8rem .7rem; }
  .keyfacts b { font-size:1.25rem; }

  /* Rating summary stacks instead of squeezing */
  .ratingbox { flex-direction:column; align-items:flex-start; gap:.9rem; }
  .ratingbox .bars { width:100%; }

  /* Reviews */
  .rev .when { margin-left:0; width:100%; }

  /* Timeline collapses to a single column with the year as a chip. */
  .timeline::before { left:.5rem; }
  .mem { grid-template-columns:1fr; gap:.75rem; padding-left:2rem; padding-bottom:2rem; }
  .mem::after { left:calc(.5rem - 5px); top:.35rem; }
  .mem .yr { text-align:left; padding:0; font-size:1.15rem; letter-spacing:.06em; }

  /* 360 tour: usable height and thumb-reachable controls. */
  .tour canvas { height:clamp(17rem,44svh,24rem); }
  .tour .tbar { gap:.4rem; padding:.7rem .7rem max(.7rem,env(safe-area-inset-bottom)); overflow-x:auto;
    flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .tour .tbar button { flex:0 0 auto; }
  .tour .hint { font-size:.68rem; }

  /* Logbook chart */
  .lb-map { min-height:15rem; }
  .lb-controls { flex-wrap:wrap; }
  .lb-controls button { flex:1 1 auto; }
  .lb-progress { order:3; width:100%; flex-basis:100%; }

  /* Tables scroll rather than squash. */
  .spectable { font-size:.86rem; }
  .spectable th, .spectable td { padding:.6rem .35rem; }

  /* Footer */
  .foot { padding-block:2.5rem 1.5rem; }
  .colophon { flex-direction:column; gap:.4rem; }
}

@media (max-width: 400px) {
  :root { --gut: 1rem; }
  .logo svg { width:110px; }
  .head .btn--sm { padding:.7rem .8rem; font-size:.66rem; }
  .hero-proof { gap:1rem; }
  .hero-proof div span { font-size:.62rem; letter-spacing:.1em; }
  .keyfacts { grid-template-columns:repeat(2,1fr); }
  .crewicon { padding:.45rem .8rem .45rem .5rem; }
  .crewicon svg { width:22px; height:22px; }
  .d1 { font-size:clamp(2rem,1.2rem+3.2vw,2.6rem); }
}

/* Landscape phones: the hero should not eat the whole screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height:auto; padding-block:3rem; }
  .tour canvas { height:78svh; }
}

/* Coarse pointers get no hover-only affordances. */
@media (hover: none) {
  .card:hover { transform:none; box-shadow:var(--shadow-s); }
  .tile:hover img { transform:none; }
  .mainnav .has-sub:hover .submenu { opacity:0; visibility:hidden; }
  .mainnav .has-sub.open .submenu { opacity:1; visibility:visible; }
}

/* ==========================================================================
   v6 — early-booking bar, header WhatsApp, trust strip, story page
   ========================================================================== */

/* ---------------- Top bar: three designs, one switch ---------------- */
.topbar{ background:var(--deep); color:rgba(232,238,241,.76); font-size:.79rem; }
.topbar .wrap{ display:flex; align-items:center; gap:1rem; padding-block:.6rem; }
.topbar.gone{ display:none; }
.topbar .rate{ display:flex; align-items:center; gap:.45rem; white-space:nowrap; }
.topbar .rate b{ color:#fff; font-weight:700; }
.topbar .sep{ width:1px; height:15px; background:rgba(255,255,255,.16); flex:0 0 auto; }
.topbar .right{ margin-left:auto; display:flex; align-items:center; gap:1rem; white-space:nowrap; }
.topbar .right a{ text-decoration:none; }
.topbar .right a:hover{ color:#fff; }
.topbar .wa-mini svg{ width:15px; height:15px; }
.topbar .x{ background:none; border:0; color:rgba(232,238,241,.42); cursor:pointer;
  font-size:1.05rem; line-height:1; padding:0 .15rem; flex:0 0 auto; }
.topbar .x:hover{ color:#fff; }

/* A — single rail */
.tb-a .promo-in{ display:flex; align-items:center; gap:.5rem; min-width:0; }
.tb-a .promo-in svg{ width:16px; height:16px; color:#E8C87E; flex:0 0 auto; }
.tb-a .promo-in b{ color:#F6E3B4; font-weight:700; white-space:nowrap; }
.tb-a .promo-in > span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tb-a .promo-in a{ color:#E8C87E; text-decoration:none; font-weight:600; white-space:nowrap;
  border-bottom:1px solid rgba(232,200,126,.45); padding-bottom:1px; }
.tb-a .promo-in a:hover{ color:#fff; border-bottom-color:#E8C87E; }

/* B — rotating notice over a light utility strip */
.tb-b{ background:#07202B; color:#EDE3CD; position:relative; }
.tb-b::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,#B98A34,transparent); }
.tb-b .wrap{ padding-block:.42rem; min-height:30px; gap:.7rem; }
.tb-b .dot{ width:6px; height:6px; border-radius:50%; background:#E8C87E; flex:0 0 auto;
  animation:tbpulse 2.6s ease-out infinite; }
@keyframes tbpulse{ 0%{box-shadow:0 0 0 0 rgba(232,200,126,.55)} 70%{box-shadow:0 0 0 8px rgba(232,200,126,0)} 100%{box-shadow:0 0 0 0 rgba(232,200,126,0)} }
.tb-b .rot{ position:relative; height:1.3rem; overflow:hidden; flex:1; min-width:0; }
.tb-b .rot p{ position:absolute; inset:0; margin:0; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; opacity:0; transform:translateY(60%); font-size:.77rem;
  transition:opacity .5s var(--ease), transform .5s var(--ease); }
.tb-b .rot p.on{ opacity:1; transform:none; }
.tb-b .rot b{ color:#F6E3B4; font-weight:700; }
.tb-b .go{ color:#E8C87E; text-decoration:none; font-weight:700; font-size:.68rem;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; }
.tb-b .go:hover{ color:#fff; }

/* Utility strip: review badges on the left, offices and a call button on the right */
.utilbar{ background:var(--sand-2); color:var(--ink-2); font-size:.77rem;
  border-bottom:1px solid var(--line); }
.utilbar .wrap{ display:flex; align-items:center; gap:.9rem; padding-block:.34rem; min-height:38px; }
.utilbar .right{ margin-left:auto; display:flex; align-items:center; gap:.7rem; white-space:nowrap; }

.badges{ display:flex; align-items:center; gap:.4rem; min-width:0; }
.badge{ display:inline-flex; align-items:center; gap:.36rem; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:2rem;
  padding:.2rem .6rem .2rem .28rem; color:var(--ink); line-height:1;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease); }
.badge:hover{ border-color:var(--ink-3); box-shadow:0 1px 6px rgba(16,32,43,.1); }
.badge svg{ width:17px; height:17px; flex:0 0 auto; }
.badge b{ font-size:.78rem; font-weight:700; font-variant-numeric:tabular-nums; }
.badge span{ font-size:.7rem; color:var(--ink-3); font-weight:600; }

.iconbtn{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  border-radius:2rem; padding:.34rem .8rem .34rem .6rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; line-height:1; }
.iconbtn svg{ width:15px; height:15px; flex:0 0 auto; }
.iconbtn.call{ background:var(--deep); color:#fff; }
.iconbtn.call:hover{ background:var(--teal); }

/* C — countdown ribbon */
.tb-c .wrap{ padding-block:.5rem; }
.ribbon{ margin-inline:auto; display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  background:linear-gradient(100deg,#F6E3B4,#E8C87E); color:#241A08;
  border-radius:2rem; padding:.3rem .35rem .3rem .85rem; font-size:.74rem; font-weight:700;
  white-space:nowrap; box-shadow:0 2px 10px rgba(0,0,0,.22); position:relative; overflow:hidden; }
.ribbon::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.8) 50%,transparent 65%);
  transform:translateX(-120%); animation:ribbonsheen 6.5s ease-in-out 2s infinite; }
@keyframes ribbonsheen{ 0%{transform:translateX(-120%)} 25%,100%{transform:translateX(130%)} }
.ribbon .yr{ letter-spacing:.1em; }
.ribbon .txt{ font-weight:600; color:#4A3610; }
.ribbon .cd{ background:#241A08; color:#F6E3B4; border-radius:2rem; padding:.28rem .7rem;
  font-variant-numeric:tabular-nums; }
.ribbon:hover{ box-shadow:0 3px 16px rgba(0,0,0,.3); }

@media (prefers-reduced-motion: reduce){
  .ribbon::after{ display:none; } .tb-b .dot{ animation:none; }
}
@media (max-width:1080px){
  .tb-c .wrap{ flex-wrap:wrap; row-gap:.5rem; }
  .tb-c .ribbon{ order:3; flex-basis:100%; justify-content:center; }
  .tb-c .x{ order:2; }
}
@media (max-width:1080px){ .badge .hide-m{ display:none; } }
@media (max-width:900px){
  .topbar .hide-s{ display:none; }
  .utilbar .wrap{ gap:.55rem; padding-block:.3rem; min-height:36px; }
  .utilbar .right .hide-s{ display:none; }
  .badges{ gap:.3rem; }
  .badge{ padding:.18rem .5rem .18rem .24rem; }
  .badge svg{ width:15px; height:15px; }
  .iconbtn span{ display:none; }
  .iconbtn{ padding:.4rem; }
  .iconbtn svg{ width:16px; height:16px; }
  .tb-a .promo-in > span{ display:none; }
  .tb-a .wrap, .tb-b .wrap, .tb-c .wrap{ gap:.65rem; }
  .ribbon .txt{ display:none; }
  .tb-b .go{ font-size:.66rem; }
}
@media (max-width:400px){
  .topbar{ font-size:.72rem; }
  .badge b{ font-size:.72rem; }
  .badge:nth-child(3){ display:none; }   /* two badges is enough on a small phone */
  .ribbon{ font-size:.68rem; padding-left:.7rem; }
}

/* ---------------- WhatsApp in the header ---------------- */
.wabtn{
  display:inline-flex; align-items:center; gap:.4rem; text-decoration:none;
  background:#25D366; color:#fff; border-radius:var(--r);
  padding:.65rem .9rem; font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}
.wabtn:hover{ background:#1EB855; }
.wabtn svg{ width:17px; height:17px; }

/* ---------------- Trust strip ---------------- */
.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.trust div{ background:#fff; padding:1.15rem 1.2rem; display:flex; gap:.85rem; align-items:flex-start; }
.trust svg{ width:24px; height:24px; color:var(--teal); flex:0 0 auto; margin-top:.15rem; }
.trust b{ display:block; font-size:.98rem; font-weight:700; }
.trust span{ display:block; font-size:.84rem; color:var(--ink-2); line-height:1.55; margin-top:.15rem; }

.claimbar{ background:var(--deep); color:#fff; }
.claimbar .wrap{ padding-block:clamp(2rem,4vw,3rem); text-align:center; }
.claimbar .d2{ max-width:22ch; margin:0 auto; }
.claimbar p{ color:rgba(232,238,241,.8); max-width:60ch; margin:.9rem auto 0; }

/* ---------------- Story (gallery page) ---------------- */
.story{ display:grid; grid-template-columns:1fr 1.25fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.story .portrait{ position:relative; }
.story .portrait .ph{ aspect-ratio:4/5; }
.story .stamp2{ position:absolute; right:-.6rem; bottom:-.6rem; background:var(--deep); color:#fff;
  border-radius:var(--r); padding:.9rem 1.1rem; box-shadow:var(--shadow-m); }
.story .stamp2 b{ display:block; font-family:"Cormorant Garamond",serif; font-size:1.9rem; line-height:1; }
.story .stamp2 span{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(232,238,241,.7); }
.facts2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:1.6rem; }
.facts2 div{ background:#fff; padding:.9rem 1rem; }
.facts2 span{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.facts2 b{ display:block; font-size:.98rem; margin-top:.15rem; }

.uploadhint{ border:2px dashed var(--line); border-radius:var(--r); background:var(--sand);
  padding:1.4rem; text-align:center; }
.uploadhint b{ display:block; font-size:1rem; }
.uploadhint span{ font-size:.86rem; color:var(--ink-2); }

@media (max-width:1080px){ .trust{ grid-template-columns:1fr; } }
@media (max-width:880px){
  .story{ grid-template-columns:1fr; }
  .story .stamp2{ right:auto; left:.7rem; bottom:.7rem; }
  .promo .wrap{ flex-wrap:wrap; gap:.45rem .6rem; padding-block:.5rem; }
  .promo span{ flex:1 1 100%; order:4; font-size:.76rem; line-height:1.4; }
  .promo a{ margin-left:0; order:3; }
  .promo button{ margin-left:auto; order:2; }
  .wabtn span{ display:none; }
  .wabtn{ padding:.65rem .75rem; }
}
@media (max-width:400px){
  .promo b{ font-size:.78rem; white-space:normal; }
  .promo a{ font-size:.66rem; padding:.35rem .7rem; }
}

/* ---------------- Keyword strip (foot of location and service pages) ---- */
.kwstrip{ margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.kwstrip p{ display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin-bottom:.45rem; }
.kwstrip i{ font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.14em;
  color:var(--ink-3); width:1.8rem; flex:0 0 auto; }
.kwstrip span{ font-size:.72rem; color:var(--ink-2); background:var(--sand);
  border:1px solid var(--line); border-radius:2px; padding:.24rem .5rem; }
@media (max-width:560px){ .kwstrip i{ width:100%; margin-bottom:.15rem; } }


/* ==========================================================================
   v7 — season pricing, availability calendar, cabin plan, live search
   ========================================================================== */

/* ---------------- Season price table ---------------- */
.seasons{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.seasons div{ background:#fff; padding:.9rem 1rem; }
.seasons .sn{ font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.seasons .sd{ font-size:.76rem; color:var(--ink-2); margin-top:.1rem; }
.seasons .sp{ font-family:"Cormorant Garamond",serif; font-size:1.5rem; margin-top:.3rem; }
.seasons div.now{ background:#F2F9F9; box-shadow:inset 3px 0 0 var(--teal); }

/* ---------------- Week calendar ---------------- */
.calbar{ display:flex; gap:.4rem; overflow-x:auto; padding-bottom:.5rem; -webkit-overflow-scrolling:touch; }
.calbar button{ flex:0 0 auto; border:1px solid var(--line); background:#fff; color:var(--ink-2);
  border-radius:2rem; padding:.45rem .9rem; font-size:.78rem; font-weight:600; cursor:pointer; }
.calbar button[aria-pressed="true"]{ background:var(--deep); border-color:var(--deep); color:#fff; }
.weeks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.5rem; margin-top:.9rem; }
.week{ display:flex; align-items:center; gap:.7rem; text-align:left; width:100%;
  border:1px solid var(--line); background:#fff; border-radius:var(--r); padding:.7rem .85rem; cursor:pointer;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.week:hover:not(:disabled){ border-color:var(--teal); box-shadow:var(--shadow-s); }
.week .wd{ flex:1; min-width:0; }
.week .wdate{ font-weight:600; font-size:.86rem; }
.week .wtag{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.week .wp{ font-family:"Cormorant Garamond",serif; font-size:1.2rem; white-space:nowrap; }
.week .dotst{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--teal); }
.week[data-st="booked"]{ opacity:.5; cursor:not-allowed; background:var(--sand); }
.week[data-st="booked"] .dotst{ background:#B4432B; }
.week[data-st="option"] .dotst{ background:var(--gold); }
.week[aria-pressed="true"]{ border-color:var(--teal); box-shadow:0 0 0 2px rgba(14,124,134,.18); }
.callegend{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.9rem; font-size:.74rem; color:var(--ink-3); }
.callegend span{ display:flex; align-items:center; gap:.35rem; }
.callegend i{ width:9px; height:9px; border-radius:50%; display:block; }

/* ---------------- Cabin plan ---------------- */
.plan{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:1rem; }
.plan svg{ width:100%; height:auto; }
.plan .hull{ fill:#F5F1E8; stroke:#CDBF9E; stroke-width:1.4; }
.plan .deck{ fill:none; stroke:#E2DCD1; stroke-width:1; }
.plan .cab{ cursor:pointer; transition:fill .2s var(--ease); }
.plan .cab rect{ fill:#E8F3F3; stroke:#0E7C86; stroke-width:1.2; rx:2; }
.plan .cab text{ font:600 5px Manrope,sans-serif; fill:#0B2B3A; text-anchor:middle; pointer-events:none; }
.plan .cab .sub{ font:400 3.4px Manrope,sans-serif; fill:#5B6E77; }
.plan .cab.sold rect{ fill:#EFEBE3; stroke:#B9C2C6; stroke-dasharray:2 2; }
.plan .cab.sold text{ fill:#93A3AA; }
.plan .cab.sold{ cursor:not-allowed; }
.plan .cab.on rect{ fill:#0E7C86; stroke:#0A5C63; }
.plan .cab.on text, .plan .cab.on .sub{ fill:#fff; }
.plan .lbl{ font:600 4px Manrope,sans-serif; fill:#93A3AA; letter-spacing:.4px; text-anchor:middle; }
.planlegend{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.8rem; font-size:.74rem; color:var(--ink-2); }
.planlegend span{ display:flex; align-items:center; gap:.35rem; }
.planlegend i{ width:12px; height:12px; border-radius:2px; display:block; border:1px solid; }
.picked{ margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.picked b{ font-family:"Cormorant Garamond",serif; font-size:1.6rem; }

/* ---------------- Cabin charter package cards ---------------- */
.pkgs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1.2rem; }
.pkg{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; text-decoration:none; color:inherit;
  transition:box-shadow .35s var(--ease), transform .35s var(--ease); }
.pkg:hover{ box-shadow:var(--shadow-m); transform:translateY(-3px); }
.pkg .ph{ border-radius:0; }
.pkg .pdate{ position:absolute; z-index:6; left:.8rem; top:.8rem; background:rgba(255,255,255,.95);
  border-radius:var(--r); padding:.4rem .7rem; text-align:center; line-height:1.1; }
.pkg .pdate b{ display:block; font-family:"Cormorant Garamond",serif; font-size:1.35rem; }
.pkg .pdate span{ font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.pkg .pleft{ position:absolute; z-index:6; right:.8rem; top:.8rem; background:var(--teal); color:#fff;
  border-radius:2rem; padding:.3rem .7rem; font-size:.68rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; }
.pkg .pleft.few{ background:#B4432B; }
.pkg .pbody{ padding:1.15rem 1.25rem 1.35rem; display:flex; flex-direction:column; flex:1; }
.pkg .pboat{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); font-weight:700; }
.pkg h3{ font-family:"Cormorant Garamond",serif; font-size:1.5rem; line-height:1.15; margin:.35rem 0 .4rem; }
.pkg .pstops{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.7rem; }
.pkg .pstops span{ font-size:.68rem; background:var(--sand); border:1px solid var(--line);
  border-radius:2px; padding:.2rem .45rem; color:var(--ink-2); }
.pkg .pfoot{ margin-top:auto; padding-top:1.1rem; display:flex; align-items:flex-end;
  justify-content:space-between; gap:.7rem; }

/* ---------------- Search results ---------------- */
.results{ margin-top:1.2rem; }
.result{ display:grid; grid-template-columns:110px 1fr auto; gap:1rem; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:.8rem; margin-bottom:.6rem; }
.result .ph{ aspect-ratio:4/3; }
.result h4{ font-family:"Cormorant Garamond",serif; font-size:1.25rem; font-weight:400; }
.result .rmeta{ font-size:.8rem; color:var(--ink-2); }
.result .rprice{ text-align:right; }
.result .rprice b{ font-family:"Cormorant Garamond",serif; font-size:1.35rem; display:block; }
.result .rprice small{ font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.noresult{ border:1px dashed var(--line); border-radius:var(--r); padding:2rem; text-align:center; color:var(--ink-2); }

@media (max-width:880px){
  .result{ grid-template-columns:84px 1fr; }
  .result .rprice{ grid-column:2; text-align:left; }
  .weeks{ grid-template-columns:1fr; }
}

/* ==========================================================================
   v8 — add-ons, collections, day tours
   ========================================================================== */
.collections{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.coll{ position:relative; display:block; text-decoration:none; color:#fff; background:var(--deep); }
.coll .ph{ border-radius:0; aspect-ratio:3/4; }
.coll .cscrim{ position:absolute; inset:0; z-index:3;
  background:linear-gradient(to top,rgba(6,26,36,.92) 8%,rgba(6,26,36,.25) 55%,rgba(6,26,36,.05)); }
.coll .cnum{ position:absolute; z-index:5; top:1rem; left:1.1rem; font-family:"Cormorant Garamond",serif;
  font-size:1.5rem; color:rgba(255,255,255,.6); }
.coll .ccap{ position:absolute; z-index:5; inset:auto 0 0 0; padding:1.2rem 1.1rem 1.3rem; }
.coll .ceye{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:700; }
.coll h3{ font-family:"Cormorant Garamond",serif; font-size:1.55rem; margin:.3rem 0 .35rem; }
.coll p{ font-size:.82rem; color:rgba(255,255,255,.78); line-height:1.5; }
.coll .cgo{ display:inline-block; margin-top:.8rem; font-size:.66rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid rgba(255,255,255,.45); padding-bottom:2px; }
.coll:hover img{ transform:scale(1.04); }
.coll img{ transition:transform .7s var(--ease); }

/* add-on rows */
.addon{ display:grid; grid-template-columns:1fr 1.15fr; gap:0; background:#fff;
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:1rem; }
.addon:nth-child(even) .amedia{ order:2; }
.addon .amedia .ph{ border-radius:0; height:100%; aspect-ratio:4/3; }
.addon .abody{ padding:1.6rem 1.7rem; display:flex; flex-direction:column; justify-content:center; }
.addon .anum{ font-family:"Cormorant Garamond",serif; font-size:1.4rem; color:var(--ink-3); }
.addon .aeye{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); font-weight:700; margin-top:.3rem; }
.addon h3{ font-family:"Cormorant Garamond",serif; font-size:1.7rem; margin:.3rem 0 .5rem; }
.addon p{ font-size:.92rem; color:var(--ink-2); line-height:1.65; }
.addon .afoot{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:1.1rem; }
.addon .aprice{ font-family:"Cormorant Garamond",serif; font-size:1.35rem; }
.addon .aprice small{ font-family:Manrope,sans-serif; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); display:block; }
.addon .anote{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line); border-radius:2rem; padding:.25rem .6rem; }

/* add-on picker on the enquiry form */
.addpick{ display:flex; flex-wrap:wrap; gap:.45rem; }
.addpick button{ display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--line);
  background:#fff; color:var(--ink-2); border-radius:2rem; padding:.5rem .85rem;
  font-size:.8rem; font-weight:600; cursor:pointer; min-height:40px; }
.addpick button:hover{ border-color:var(--teal); color:var(--teal); }
.addpick button[aria-pressed="true"]{ background:var(--teal); border-color:var(--teal); color:#fff; }
.addpick button b{ font-weight:700; }
.addsum{ margin-top:.7rem; font-size:.84rem; color:var(--ink-2); }
.addsum b{ color:var(--ink); }

@media (max-width:1080px){ .collections{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:880px){
  .addon{ grid-template-columns:1fr; }
  .addon:nth-child(even) .amedia{ order:0; }
  .addon .abody{ padding:1.2rem 1.2rem 1.4rem; }
}
@media (max-width:520px){ .collections{ grid-template-columns:1fr; } .coll .ph{ aspect-ratio:16/10; } }

/* ---------------- Collapsible add-on picker ---------------- */
.addbox{ border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
.addbox summary{ display:flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none;
  padding:.85rem 1rem; font-size:.86rem; font-weight:600; }
.addbox summary::-webkit-details-marker{ display:none; }
.addbox summary::after{ content:"+"; margin-left:auto; font-size:1.2rem; color:var(--ink-3); line-height:1; }
.addbox[open] summary::after{ content:"\2212"; }
.addbox summary:hover{ background:var(--sand); }
.addbox .addhint{ font-weight:400; font-size:.76rem; color:var(--ink-3); }
.addbox .addcount{ display:none; background:var(--teal); color:#fff; border-radius:2rem;
  padding:.1rem .5rem; font-size:.7rem; }
.addbox .addcount.on{ display:inline-block; }
.addbox .addpick{ padding:0 1rem 1rem; }
.addpick button svg{ width:17px; height:17px; flex:0 0 auto; }
@media (max-width:560px){
  .addbox summary .addhint{ display:none; }
  .addpick button span{ font-size:.76rem; }
}

/* ---------------- What the guest was looking at ---------------- */
.bookingctx{ grid-column:1/-1; background:#F2F9F9; border:1px solid #BFE0E2; border-radius:var(--r);
  padding:1rem 1.1rem; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; align-items:baseline; }
.bookingctx b{ width:100%; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-weight:700; }
.bookingctx span{ font-size:.9rem; }
.bookingctx i{ display:block; font-style:normal; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }

/* ==========================================================================
   Page transition — a sail crosses the screen between pages
   ========================================================================== */
#sailwipe{ position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:0; visibility:hidden; contain:strict; }
#sailwipe .sea{ position:absolute; inset:-2px;
  background:linear-gradient(180deg,#07202B 0%,#0B2B3A 34%,#0E4C58 70%,#0E7C86 100%);
  transform:translateY(101%); will-change:transform; }
#sailwipe .sea::after{ content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:linear-gradient(90deg,transparent,rgba(246,227,180,.5),transparent); }
#sailwipe .boat{ position:absolute; left:-26vw; top:50%; width:min(30vw,300px);
  transform:translateY(-60%); color:#F6E3B4; opacity:0; will-change:left,opacity; }
#sailwipe .boat svg{ width:100%; height:auto; overflow:visible;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.35)); }
#sailwipe .wake{ position:absolute; left:0; right:0; top:calc(50% + 30px); height:2px;
  background:linear-gradient(90deg,transparent,rgba(246,227,180,.55),transparent);
  transform:scaleX(0); transform-origin:left; }
#sailwipe .hull{ transform-origin:50% 82%; animation:sailBob 2.2s ease-in-out infinite; }
@keyframes sailBob{ 0%,100%{ transform:rotate(-2.5deg) translateY(0) }
  50%{ transform:rotate(2deg) translateY(-4px) } }

/* leaving: sea rises, boat sails in and stops mid-screen */
html.sailing #sailwipe{ opacity:1; visibility:visible; }
html.sailing #sailwipe .sea{ animation:seaIn 470ms cubic-bezier(.55,0,.25,1) forwards; }
html.sailing #sailwipe .boat{ animation:sailIn 470ms cubic-bezier(.3,0,.4,1) forwards; }
html.sailing #sailwipe .wake{ animation:wakeIn 470ms ease-out forwards; }
@keyframes seaIn{ from{ transform:translateY(101%) } to{ transform:translateY(0) } }
@keyframes sailIn{ 0%{ left:-26vw; opacity:0 } 25%{ opacity:1 } 100%{ left:36vw; opacity:1 } }
@keyframes wakeIn{ from{ transform:scaleX(0); opacity:0 } to{ transform:scaleX(.7); opacity:.8 } }

/* arriving: boat carries on off the right, sea drops away */
html.sail-in #sailwipe{ opacity:1; visibility:visible; }
html.sail-in #sailwipe .sea{ animation:seaOut 620ms cubic-bezier(.5,0,.2,1) 90ms forwards; }
html.sail-in #sailwipe .boat{ animation:sailOut 560ms cubic-bezier(.35,0,.5,1) forwards; }
html.sail-in #sailwipe .wake{ animation:wakeOut 560ms ease-in forwards; }
@keyframes seaOut{ from{ transform:translateY(0) } to{ transform:translateY(-101%) } }
@keyframes sailOut{ 0%{ left:36vw; opacity:1 } 70%{ opacity:1 } 100%{ left:118vw; opacity:0 } }
@keyframes wakeOut{ 0%{ transform:scaleX(.7); opacity:.8 } 100%{ transform:scaleX(1); opacity:0 } }
html.sail-in main, html.sail-in .head{ animation:contentUp 620ms cubic-bezier(.22,.61,.36,1) 180ms both; }
@keyframes contentUp{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

@media (prefers-reduced-motion: reduce){
  #sailwipe{ display:none; }
  html.sail-in main, html.sail-in .head{ animation:none; }
}

/* ---------------- Collapsible add-on picker ---------------- */
.addbox{ border:1px solid var(--line); border-radius:var(--r); background:#fff; overflow:hidden; }
.addbox summary{ display:flex; align-items:center; gap:.6rem; cursor:pointer; list-style:none;
  padding:.85rem 1rem; font-size:.86rem; font-weight:600; }
.addbox summary::-webkit-details-marker{ display:none; }
.addbox summary::after{ content:"+"; margin-left:auto; font-size:1.2rem; color:var(--ink-3); line-height:1; }
.addbox[open] summary::after{ content:"\2212"; }
.addbox summary:hover{ background:var(--sand); }
.addbox .addhint{ font-weight:400; font-size:.76rem; color:var(--ink-3); }
.addbox .addcount{ display:none; background:var(--teal); color:#fff; border-radius:2rem;
  padding:.1rem .5rem; font-size:.7rem; }
.addbox .addcount.on{ display:inline-block; }
.addbox .addpick{ padding:0 1rem 1rem; }
.addpick button svg{ width:17px; height:17px; flex:0 0 auto; }
@media (max-width:560px){
  .addbox summary .addhint{ display:none; }
  .addpick button span{ font-size:.76rem; }
}

/* ---------------- What the guest was looking at ---------------- */
.bookingctx{ grid-column:1/-1; background:#F2F9F9; border:1px solid #BFE0E2; border-radius:var(--r);
  padding:1rem 1.1rem; display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; align-items:baseline; }
.bookingctx b{ width:100%; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); font-weight:700; }
.bookingctx span{ font-size:.9rem; }
.bookingctx i{ display:block; font-style:normal; font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); }

/* ==========================================================================
   Page transition — a sail crosses the screen between pages
   ========================================================================== */
#sailwipe{ position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0; visibility:hidden; }
#sailwipe .sea{ position:absolute; inset:0;
  background:linear-gradient(180deg,#0B2B3A 0%,#0E4C58 58%,#0E7C86 100%);
  transform:translateY(101%); }
#sailwipe .boat{ position:absolute; left:-22vw; top:50%; width:min(30vw,280px);
  transform:translateY(-58%); color:#F6E3B4; opacity:0; }
#sailwipe .boat svg{ width:100%; height:auto; overflow:visible; }
#sailwipe .wake{ position:absolute; left:0; right:0; top:calc(50% + 26px); height:2px;
  background:linear-gradient(90deg,transparent,rgba(246,227,180,.55),transparent);
  transform:scaleX(0); transform-origin:left; }
html.sailing #sailwipe{ opacity:1; visibility:visible; }
html.sailing #sailwipe .sea{ animation:seaRise 820ms cubic-bezier(.6,0,.2,1) forwards; }
html.sailing #sailwipe .boat{ animation:sailAcross 820ms cubic-bezier(.45,0,.3,1) forwards; }
html.sailing #sailwipe .wake{ animation:wakeDraw 820ms cubic-bezier(.45,0,.3,1) forwards; }
@keyframes seaRise{ 0%{transform:translateY(101%)} 45%{transform:translateY(0)}
  55%{transform:translateY(0)} 100%{transform:translateY(-101%)} }
@keyframes sailAcross{ 0%{left:-24vw;opacity:0} 12%{opacity:1}
  50%{left:38vw} 88%{opacity:1} 100%{left:112vw;opacity:0} }
@keyframes wakeDraw{ 0%{transform:scaleX(0);opacity:0} 30%{opacity:.9}
  60%{transform:scaleX(1);opacity:.7} 100%{transform:scaleX(1);opacity:0} }
#sailwipe .hull{ animation:bob 1.6s ease-in-out infinite; transform-origin:50% 80%; }
@keyframes bob{ 0%,100%{transform:rotate(-2.5deg) translateY(0)} 50%{transform:rotate(2deg) translateY(-3px)} }
@media (prefers-reduced-motion: reduce){
  html.sailing #sailwipe .sea{ animation-duration:1ms; }
  html.sailing #sailwipe .boat, html.sailing #sailwipe .wake, #sailwipe .hull{ animation:none; }
}

/* ---------------- Quick quote on service and yard pages ---------------- */
.quotebox{ margin-top:2.4rem; background:var(--deep); color:#fff; border-radius:var(--r);
  padding:1.6rem 1.7rem 1.7rem; }
.quotebox .qhead{ margin-bottom:1.2rem; }
.quotebox .qeye{ font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-lt); font-weight:700; }
.quotebox h3{ font-family:"Cormorant Garamond",serif; font-size:1.7rem; margin:.3rem 0 .4rem; }
.quotebox p{ font-size:.88rem; color:rgba(232,238,241,.75); max-width:56ch; line-height:1.6; }
.qform{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.qform label{ display:block; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(232,238,241,.6); margin-bottom:.35rem; font-weight:600; }
.qform input, .qform select, .qform textarea{ width:100%; background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18); border-radius:var(--r); color:#fff;
  padding:.72rem .8rem; font-size:16px; font-family:inherit; }
.qform input::placeholder, .qform textarea::placeholder{ color:rgba(232,238,241,.4); }
.qform select option{ color:var(--ink); }
.qform input:focus, .qform select:focus, .qform textarea:focus{ outline:none;
  border-color:var(--gold-lt); background:rgba(255,255,255,.11); }
.qform .qfull{ grid-column:1/-1; }
.qform .qactions{ grid-column:1/-1; display:flex; gap:.6rem; flex-wrap:wrap; align-items:center;
  margin-top:.3rem; }
.qform .btn--ghost{ background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; }
.qform .btn--ghost:hover{ border-color:#fff; }
.qform .status{ font-size:.84rem; color:var(--gold-lt); }
@media (max-width:680px){ .qform{ grid-template-columns:1fr; } .quotebox{ padding:1.2rem 1.1rem 1.4rem; } }