/* Rent a Boat Cavtat — standalone HTML/CSS/JS
   Design tokens inspired by the React/Lovable version.
   ----------------------------------------------------- */

:root{
  --wa-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22c5.46 0 9.9-4.45 9.9-9.91C21.94 6.45 17.5 2 12.04 2zm5.8 14.17c-.24.68-1.42 1.3-1.95 1.35-.5.05-.98.23-3.3-.69-2.79-1.1-4.56-3.95-4.7-4.13-.14-.19-1.12-1.49-1.12-2.84 0-1.35.71-2.02.96-2.29.25-.28.55-.35.73-.35h.53c.17.01.4-.6.62.48.24.56.8 1.94.87 2.08.07.14.12.3.02.49-.1.19-.14.3-.28.47-.14.16-.3.36-.42.48-.14.14-.29.29-.12.57.16.28.73 1.2 1.56 1.95 1.07.96 1.98 1.25 2.26 1.39.28.14.44.12.6-.7.17-.19.7-.81.88-1.09.19-.28.37-.23.63-.14.25.09 1.63.77 1.9.91.28.14.46.21.53.32.07.12.07.66-.17 1.34z'/%3E%3C/svg%3E");
  --bg:#fbf8f3;
  --fg:#0e1b2c;
  --muted:#5a6878;
  --card:#ffffff;
  --border:#e6e1d6;
  --primary:#0e2a3d;       /* deep navy */
  --primary-fg:#f4ead5;
  --accent:#c9962b;        /* warm gold */
  --accent-fg:#0e1b2c;
  --secondary:#eef1f4;
  --shadow:0 30px 60px -30px rgba(14,27,44,.35);
  --shadow-soft:0 8px 30px -12px rgba(14,27,44,.18);
  --display:"Cormorant Garamond","Playfair Display",ui-serif,Georgia,serif;
  --sans:"Inter","Helvetica Neue",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--accent);font-family:var(--display)}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-.01em;margin:0;line-height:1.05}
.h-display{font-family:var(--display)}
.container{max-width:1200px;margin:0 auto;padding:0 clamp(18px,4vw,24px)}
/* on a very wide monitor the 1200px column starts to look like a narrow strip */
@media(min-width:1600px){.container{max-width:1320px}}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.center{text-align:center}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:999px;
  font-weight:500;font-size:.95rem;
  transition:.25s ease;border:1px solid transparent;cursor:pointer;
}
.btn-primary{background:var(--accent);color:var(--accent-fg)}
.btn-primary:hover{background:#b9851f;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff;backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-outline{border-color:var(--border);background:var(--card)}
.btn-outline:hover{border-color:var(--accent)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(3px)}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:20px 0;transition:all .4s ease;
}
.nav.scrolled{
  background:rgba(251,248,243,.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  padding:12px 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.35rem;color:#fff;transition:color .3s}
.nav.scrolled .brand{color:var(--fg)}
.brand svg{stroke:#fff;transition:stroke .3s}
.nav.scrolled .brand svg{stroke:var(--accent)}
.nav-links{display:none;gap:1.75rem}
.nav-links a{font-size:.9rem;color:rgba(255,255,255,.9);transition:color .2s}
.nav.scrolled .nav-links a{color:rgba(14,27,44,.8)}
.nav-links a:hover{color:var(--accent)}
.nav .btn{padding:.5rem 1.2rem;font-size:.85rem}
@media(min-width:900px){.nav-links{display:flex}}

/* ----- mobile menu (markup built by nav.js) ----- */
/* While it is open the header wears its scrolled skin, otherwise the panel
   would hang off a transparent bar over the hero photo. */
.nav.nav-open{
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.nav.nav-open .brand{color:var(--fg)}
.nav.nav-open .brand svg{stroke:var(--accent)}
body.no-scroll{overflow:hidden}

.nav-toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 9px;    /* 44px is the smallest comfortable tap target */
  margin-right:-9px;border:0;background:none;cursor:pointer;
}
.nav-toggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .3s,opacity .2s,background .3s}
.nav.scrolled .nav-toggle span,
.nav.nav-open .nav-toggle span{background:var(--fg)}
.nav.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:900px){.nav-toggle{display:none}}

.nav-panel{
  position:absolute;top:100%;left:0;right:0;
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:.5rem 0 1.5rem;
  max-height:calc(100dvh - 72px);overflow-y:auto;   /* never taller than the screen */
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.nav.nav-open .nav-panel{opacity:1;visibility:visible;transform:none}
/* frosted where the browser can do it, plain cream where it cannot — the hero
   photo must never read through the menu */
@supports(backdrop-filter:blur(2px)){
  .nav.nav-open{background:rgba(251,248,243,.9);backdrop-filter:blur(16px)}
  .nav-panel{background:rgba(251,248,243,.9);backdrop-filter:blur(16px)}
}
.nav-panel-links{display:flex;flex-direction:column}
.nav-panel-links a{
  padding:.95rem .25rem;font-size:1.05rem;color:var(--fg);
  border-bottom:1px solid var(--border);transition:color .2s;
}
.nav-panel-links a:active{color:var(--accent)}
.nav-panel-foot{display:flex;flex-direction:column;gap:.6rem;margin-top:1.25rem}
.nav-panel-foot .btn{justify-content:center;padding:.85rem 1.4rem;font-size:.95rem}
@media(min-width:900px){.nav-panel{display:none}}

/* HERO */
.hero{
  position:relative;height:100vh;min-height:560px;width:100%;
  overflow:hidden;color:#fff;
}
/* svh ignores the mobile browser's collapsing address bar, so the hero does
   not jump — and does not hide its own buttons behind it */
@supports(height:100svh){.hero{height:100svh}}
.hero-bg{position:absolute;inset:0;z-index:0}
/* rotating hero slideshow */
.hero-slides{position:absolute;inset:0;overflow:hidden;background:#0b1c26}
.hero-slide{
  position:absolute;top:0;left:0;width:100%;height:115%;
  object-fit:cover;object-position:center center;opacity:0;transform:scale(1.05);
  transition:opacity 1.2s ease-in-out;
  pointer-events:none;
}
.hero-slide.is-active{opacity:1;animation:heroKen 5s ease-out forwards}
@keyframes heroKen{from{transform:scale(1.05)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .hero-slide{transition:none;transform:none}
  .hero-slide.is-active{animation:none;transform:none}
}
.hero-dots{
  position:absolute;bottom:28px;right:5vw;z-index:3;
  display:flex;gap:.5rem;
}
.hero-dots button{
  width:26px;height:3px;padding:0;border:0;cursor:pointer;
  background:rgba(255,255,255,.3);transition:background .4s;
}
.hero-dots button.is-active{background:var(--accent)}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.4),rgba(0,0,0,.08) 38%,rgba(0,0,0,.42) 70%,rgba(0,0,0,.82));
}
.hero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(72px,11vh,96px)}
.hero .eyebrow{color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.4rem}
.hero h1{font-size:clamp(2.6rem,6.5vw,5.5rem);color:#fff;max-width:880px;text-wrap:balance}
.hero p{margin-top:1.25rem;max-width:560px;font-size:1.1rem;color:rgba(255,255,255,.88)}
.hero-cta{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero .hero-hours{
  margin-top:1.75rem;display:inline-flex;align-items:center;gap:.65rem;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.82);max-width:none;
}
.hero .hero-hours .dot{width:6px;height:6px;flex:none;border-radius:50%;background:var(--accent)}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.6);z-index:2}

/* MARQUEE */
.marquee{
  background:var(--primary);color:var(--primary-fg);
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 0;overflow:hidden;
}
.marquee-track{display:flex;gap:3rem;animation:marquee 32s linear infinite;white-space:nowrap}
.marquee-track span{display:inline-flex;align-items:center;gap:.7rem;font-size:.8rem;letter-spacing:.25em;text-transform:uppercase}
.marquee-track .dot{width:6px;height:6px;background:var(--accent);border-radius:50%}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* SECTIONS */
/* the bands breathe on a monitor and tighten up on a phone, where 96px of
   nothing between two sections is most of a screen */
section{padding:clamp(56px,8vw,96px) 0}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(32px,5vw,56px)}
.section-head h2{font-size:clamp(2rem,4vw,3rem);max-width:640px;text-wrap:balance}
.section-head h2 + p,.section-head .lead{max-width:420px;color:var(--muted)}

/* ABOUT */
.about-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:900px){.about-grid{grid-template-columns:5fr 7fr;gap:64px}}
.about-img{position:relative}
.about-img img{border-radius:4px;box-shadow:var(--shadow)}
.about-badge{
  position:absolute;bottom:-22px;right:-22px;
  background:var(--accent);color:var(--accent-fg);
  padding:1rem 1.4rem;border-radius:4px;box-shadow:var(--shadow-soft);
}
.about-badge .big{font-family:var(--display);font-size:1.9rem;line-height:1}
.about-badge .small{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;margin-top:.25rem}
.about h2{margin-top:.75rem;font-size:clamp(2rem,3.5vw,2.8rem)}
.about p{font-size:1.05rem;color:var(--muted);margin-top:1.2rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.stat .ic{color:var(--accent);margin-bottom:.5rem}
.stat .val{font-family:var(--display);font-size:1.9rem}
.stat .lab{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}

/* WHY */
.why{position:relative;background:var(--primary);color:var(--primary-fg);overflow:hidden}
.why-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18}
.why-overlay{position:absolute;inset:0;background:linear-gradient(180deg,var(--primary) 0%,rgba(14,42,61,.92) 50%,var(--primary) 100%)}
.why .container{position:relative;z-index:1}
.why h2{font-size:clamp(2rem,4vw,3rem);max-width:600px}
.why .lead{margin-top:1.25rem;max-width:560px;font-size:1.05rem;color:rgba(244,234,213,.8)}
.features{display:grid;grid-template-columns:1fr;gap:1.25rem;margin-top:clamp(40px,6vw,64px)}
@media(min-width:640px){.features{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.features{grid-template-columns:repeat(4,1fr)}}
.feature{
  border:1px solid rgba(244,234,213,.15);
  padding:1.75rem;border-radius:4px;
  transition:.4s ease;
}
.feature:hover{border-color:var(--accent);background:rgba(244,234,213,.04);transform:translateY(-3px)}
.feature .ic{color:var(--accent);margin-bottom:1rem}
.feature h3{font-size:1.4rem}
.feature p{margin-top:.5rem;font-size:.9rem;color:rgba(244,234,213,.72);line-height:1.55}

/* BOATS */
.boats-grid{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:1024px){.boats-grid{grid-template-columns:1fr 1fr}}
.boat-card{background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:.4s ease}
.boat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.boat-img{aspect-ratio:16/10;overflow:hidden}
.boat-img img{height:100%;width:100%;object-fit:cover;transition:transform .7s}
.boat-card:hover .boat-img img{transform:scale(1.05)}
.boat-body{padding:clamp(20px,4vw,32px);display:flex;flex-direction:column;flex:1}
.boat-tag{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--accent)}
.boat-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.5rem}
.boat-head h3{font-size:1.8rem}
.boat-cap{font-size:.85rem;color:var(--muted)}
.boat-blurb{margin-top:1rem;color:var(--muted);font-size:.92rem}
.chips{
  list-style:none;padding:0;margin:1.25rem 0 0;   /* without this the UA indents the row 40px */
  display:flex;flex-wrap:wrap;gap:.45rem;
}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:.75rem;line-height:1;color:var(--fg);
  padding:.45rem .8rem;border-radius:999px;
  border:1px solid var(--border);background:var(--secondary);
}
.chip::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--accent)}
.prices{margin-top:1.75rem;border-top:1px solid var(--border);padding-top:1.25rem;display:flex;flex-direction:column;gap:.55rem}
.price-row{display:flex;justify-content:space-between;align-items:baseline;font-size:.9rem}
.price-row .v{font-family:var(--display);font-size:1.15rem}
.price-row .note{font-size:.7rem;color:var(--muted);margin-left:.4rem}
.price-row.sunset{border-top:1px dashed var(--border);padding-top:.65rem;margin-top:.4rem;color:var(--accent)}
.price-row.extra{border-top:1px dashed var(--border);padding-top:.65rem;margin-top:.4rem}
.pay-note{
  margin-top:1.1rem;margin-bottom:1.75rem;padding-top:1rem;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:.3rem;
  font-size:.8rem;color:var(--muted);
}
.pay-note strong{color:var(--fg);font-weight:600}
/* auto margin soaks up the slack so both cards' buttons sit on the same line */
.boat-card .btn{margin-top:auto;justify-content:center}
/* the slow hover zoom fights the crossfade, so switch it off on galleries */
.boat-card:hover .boat-img.gallery img{transform:none}

/* TOURS */
.tours{background:#f1ede4}
.tours-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:768px){.tours-grid{grid-template-columns:1fr 1fr}}
.tour{display:grid;grid-template-columns:1fr;background:var(--card);border:1px solid var(--border);border-radius:4px;overflow:hidden}
@media(min-width:520px){.tour{grid-template-columns:2fr 3fr}}
.tour-img{aspect-ratio:4/3;overflow:hidden}
.tour-img img{height:100%;width:100%;object-fit:cover}

/* swipeable photo gallery inside a tour card */
.gallery{position:relative;background:#0b1c26;touch-action:pan-y}
.gallery img{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;user-select:none}
.gallery img.is-active{opacity:1}
.gallery.single .gal-nav,
.gallery.single .gal-dots,
.gallery.single .gal-count{display:none}

.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:34px;height:34px;display:grid;place-items:center;
  border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.35);color:#fff;font-size:1.2rem;line-height:1;
  opacity:0;transition:opacity .25s,background .25s;
}
.gal-nav.prev{left:8px}
.gal-nav.next{right:8px}
.gal-nav:hover{background:rgba(0,0,0,.6)}
.gallery:hover .gal-nav,
.gal-nav:focus-visible{opacity:1}
@media(hover:none){.gal-nav{opacity:1}}

.gal-dots{
  position:absolute;bottom:10px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;gap:6px;
}
.gal-dots button{
  width:6px;height:6px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .3s,transform .3s;
}
.gal-dots button.is-active{background:#fff;transform:scale(1.35)}

.gal-count{
  position:absolute;top:8px;right:8px;z-index:2;
  background:rgba(0,0,0,.4);color:#fff;
  font-size:.62rem;letter-spacing:.12em;padding:.2rem .45rem;border-radius:2px;
}
.tour-body{padding:24px;display:flex;flex-direction:column}
.tour-body h3{font-size:1.35rem}
.tour-body .sub{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:.25rem}
.tour-body ul{list-style:none;padding:0;margin:1rem 0;display:flex;flex-direction:column;gap:.4rem;flex:1}
.tour-body li{font-size:.85rem;display:flex;gap:.5rem}
.tour-body li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:.5rem}
.tour-foot{display:flex;flex-wrap:wrap;gap:.6rem 1rem;justify-content:space-between;align-items:baseline;border-top:1px solid var(--border);padding-top:1rem;margin-top:auto}
.tour-foot .price{font-family:var(--display);font-size:1.2rem}
.tour-foot .wa-link{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.tour-foot .wa-link::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--wa-icon) center/contain no-repeat;mask:var(--wa-icon) center/contain no-repeat}
.tour-foot .dep{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.tour-foot a{font-size:.85rem;color:var(--accent)}
.tour-foot a:hover{text-decoration:underline}

/* WEATHER */
/* the forecast runs straight into the reviews, so it gives up some of its
   bottom margin — the two bands are read as one block */
#weather{padding-bottom:56px}
.weather-head{text-align:center;margin-bottom:48px}
.weather-head h2{font-size:clamp(2rem,4vw,3rem);max-width:720px;margin:.75rem auto 0;text-wrap:balance}
.weather-head p{color:var(--muted);max-width:560px;margin:1rem auto 0}
.weather-grid{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:24px}
@media(min-width:1024px){.weather-grid{grid-template-columns:7fr 5fr}}
.now-card{
  background:var(--primary);color:var(--primary-fg);
  border-radius:4px;padding:clamp(22px,4vw,36px);position:relative;overflow:hidden;
}
.now-card::before{content:"";position:absolute;top:-40px;right:-40px;width:280px;height:280px;background:rgba(201,150,43,.25);filter:blur(60px);border-radius:50%}
.now-card .inner{position:relative}
.now-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.now-label{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(244,234,213,.72)}
.now-main{display:flex;align-items:center;gap:1.25rem;margin-top:1.25rem}
.now-temp{font-family:var(--display);font-size:clamp(3.1rem,11vw,4.5rem);line-height:1}
.now-feels{font-size:.85rem;color:rgba(244,234,213,.7);margin-top:.3rem}
.now-icon{font-size:3.5rem}
.now-cond{margin-top:.5rem;font-size:1.05rem}
.verdict{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;padding:.5rem .9rem;border-radius:999px;border:1px solid;}
.verdict.good{color:#9be59b;border-color:rgba(155,229,155,.4);background:rgba(155,229,155,.08)}
.verdict.ok{color:#f0c46b;border-color:rgba(240,196,107,.4);background:rgba(240,196,107,.08)}
.verdict.bad{color:#ec8b8b;border-color:rgba(236,139,139,.4);background:rgba(236,139,139,.08)}
.now-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:1.75rem;padding-top:1.4rem;border-top:1px solid rgba(244,234,213,.15)}
@media(min-width:640px){.now-stats{grid-template-columns:repeat(4,1fr)}}
.wstat .l{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,234,213,.7)}
.wstat .v{font-family:var(--display);font-size:1.45rem;margin-top:.2rem}
.wstat .s{font-size:.7rem;color:rgba(244,234,213,.6);margin-top:.15rem}

.sun-card{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:clamp(20px,4vw,32px);display:flex;flex-direction:column}
.sun-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.25rem}
.sun-cell{border:1px solid var(--border);border-radius:4px;padding:1rem}
.sun-cell .l{font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.sun-cell .v{font-family:var(--display);font-size:1.5rem;margin-top:.25rem}
.sun-card p{color:var(--muted);font-size:.92rem;margin-top:1rem}
.sun-card a{color:var(--accent);font-size:.9rem;margin-top:auto;padding-top:1.25rem}

.hourly{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:clamp(20px,4vw,32px);margin-bottom:24px}
.hourly-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.25rem}
.hourly-head h3{font-size:1.15rem}
.hourly-head .l{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.hourly-bars{display:flex;align-items:flex-end;gap:.5rem;overflow-x:auto;padding-bottom:.5rem}
.hbar{flex:1;min-width:44px;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.hbar .t{font-size:.75rem;font-weight:500}
.hbar .bar{width:100%;height:96px;display:flex;align-items:flex-end}
.hbar .bar > div{width:100%;background:linear-gradient(to top,rgba(201,150,43,.25),var(--accent));border-radius:3px}
.hbar .h{font-size:.65rem;color:var(--muted)}
.hbar .w{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:.2rem}

.daily{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:640px){.daily{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1024px){.daily{grid-template-columns:repeat(7,1fr)}}
.dcard{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:1rem;display:flex;flex-direction:column;align-items:center;text-align:center;transition:.25s}
.dcard:hover{border-color:var(--accent)}
.dcard .d{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.dcard .ic{font-size:1.5rem;color:var(--accent);margin:.75rem 0}
.dcard .t{font-family:var(--display);font-size:1.2rem}
.dcard .t span{font-size:.85rem;color:var(--muted);margin-left:.2rem}
.dcard .w{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.4rem;display:flex;align-items:center;gap:.25rem}
.dcard .r{font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.weather-foot{font-size:.7rem;color:var(--muted);text-align:center;margin-top:1.25rem}

/* REVIEWS */
/* a shorter band than the rest — it is two panels and a heading, not a grid
   of cards, so the usual 96px would leave it swimming in empty space. The top
   is tighter still: the forecast above already ends on 96px of its own. */
#reviews{padding:40px 0 68px}
.reviews-head{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@media(min-width:1024px){.reviews-head{grid-template-columns:7fr 5fr}}
.reviews-head h2{font-size:clamp(2rem,4vw,3rem);max-width:600px}
/* one panel per source — Tripadvisor first, Google under it */
.reviews-head .badges{display:flex;flex-direction:column;gap:.75rem}
.reviews-head .badge{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:1.15rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1.25rem}
.reviews-head .badge .src{font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}
.reviews-head .badge .num{font-family:var(--display);font-size:2.6rem;line-height:1}
.reviews-head .badge .stars{display:flex;gap:.15rem;color:var(--accent);margin-top:.35rem}
.reviews-head .badge .meta{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:.45rem}

/* CONTACT */
.contact{background:var(--primary);color:var(--primary-fg)}
.contact h2{color:#fff;font-size:clamp(2rem,4vw,3rem);max-width:640px}
.contact .lead{color:rgba(244,234,213,.8);max-width:560px;margin-top:1rem}
.contact-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-top:48px}
@media(min-width:1024px){.contact-grid{grid-template-columns:7fr 5fr}}

/* Form */
.book-card{background:rgba(255,255,255,.04);border:1px solid rgba(244,234,213,.15);border-radius:4px;padding:clamp(20px,4vw,32px);backdrop-filter:blur(8px)}
.form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
/* A <select> is as wide as its longest option and will not shrink below it,
   and an auto-sized grid track grows to fit its content — between them the
   boat picker was dragging the whole contact section 80px past the right edge
   of a phone. Every step from the grid down to the control has to be allowed
   to be narrower than what is inside it. */
.contact-grid > *,.form-grid > *,.field{min-width:0}
.field input,.field select,.field textarea{width:100%;max-width:100%}
.field.full{grid-column:1/-1}
.field label{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,234,213,.7)}
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(244,234,213,.2);
  color:#fff;
  padding:.85rem 1rem;border-radius:4px;
  font:inherit;font-size:.95rem;
  transition:.2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:rgba(255,255,255,.1)}
.field textarea{resize:vertical;min-height:100px}

/* Date, time and the dropdowns are drawn by the operating system, not by this
   stylesheet, and on a dark panel that goes wrong in ways a desktop browser
   never shows you:

   · the calendar and clock icons are painted near-black onto a near-black
     field, so on a phone the control read as empty and dead
   · the dropdown opened light-on-light — the option list the OS draws is
     white, and the text on it was inheriting the field's white
   · iOS sizes date and time inputs from their own content instead of the box
     around them, so they came out shorter than the text fields beside them,
     with the value centred rather than on the same left edge as everything else

   color-scheme is the single line that tells the OS this surface is dark: it
   recolours the icons and the picker popup itself. The option colours below
   stay as a fallback for anything that ignores it. */
.field input[type="date"],.field input[type="time"],.field select{color-scheme:dark}
.field select option{background:var(--primary);color:var(--primary-fg)}
.field input[type="date"],.field input[type="time"]{
  -webkit-appearance:none;appearance:none;
  line-height:1.2;         /* without it iOS measures the picker, not the text */
}
.field input[type="date"]::-webkit-date-and-time-value,
.field input[type="time"]::-webkit-date-and-time-value{text-align:left;margin:0}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator{opacity:.75;cursor:pointer}

/* iOS zooms the page in whenever a focused control has text under 16px, and
   does not zoom back out afterwards. These fields are 15.2px, so every tap on
   one left the visitor enlarged and scrolled sideways, mid-booking. Full size
   on small screens costs nothing — the desktop keeps the smaller type. */
@media(max-width:640px){
  .field input,.field select,.field textarea{font-size:16px}
}
/* extras are informational only — nothing to click, nothing added to the price */
.extras{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.6rem}
.extras li{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem;border-radius:999px;font-size:.85rem;
  border:1px solid rgba(244,234,213,.2);background:rgba(244,234,213,.05);
}
.extras li::before{content:"";width:5px;height:5px;flex:none;border-radius:50%;background:var(--accent)}
.extras-note{margin-top:.75rem;font-size:.78rem;color:rgba(244,234,213,.6)}
/* the priced add-ons from the CMS — these ones are selectable and do count */
.extras-pick li{padding:0;cursor:pointer;transition:border-color .2s,background .2s}
.extras-pick li::before{display:none}
.extras-pick li:hover{border-color:rgba(244,234,213,.4)}
.extras-pick li:has(input:checked){border-color:var(--accent);background:rgba(244,234,213,.1)}
/* the wrapping .field sets a tiny uppercase label style — undo it in here */
.extras-pick label{
  display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;
  cursor:pointer;margin:0;
  font-size:.85rem;letter-spacing:0;text-transform:none;color:rgba(244,234,213,.92);
}
.extras-pick input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.extras-pick .x-price{color:var(--accent);font-family:var(--display);font-size:1rem}
.estimate{
  margin-top:1.5rem;padding:1.25rem;border:1px dashed rgba(244,234,213,.25);
  border-radius:4px;display:flex;justify-content:space-between;align-items:baseline;
  /* a wide tracked label beside a large serif figure stops fitting on one line
     around 360px — let it break instead of squeezing the price */
  flex-wrap:wrap;gap:.35rem 1rem;
}
.estimate .l{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(244,234,213,.7)}
.estimate .v{font-family:var(--display);font-size:clamp(1.75rem,7vw,2.25rem);color:var(--accent)}
.form-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.form-actions .btn{flex:1;justify-content:center;min-width:160px}
.form-actions .btn[disabled]{opacity:.6;cursor:progress}

/* the honeypot — off-screen rather than display:none, which bots skip */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* what the form says after it was submitted */
.form-status{
  margin-top:1rem;padding:.9rem 1.1rem;border-radius:4px;font-size:.9rem;line-height:1.5;
  border:1px solid rgba(244,234,213,.25);background:rgba(244,234,213,.06);
}
.form-status.ok{border-color:rgba(122,196,132,.5);background:rgba(122,196,132,.12);color:#cdebd2}
.form-status.err{border-color:rgba(226,120,110,.5);background:rgba(226,120,110,.12);color:#f4cfcb}
.form-status a{color:inherit;text-decoration:underline}
/* a field the server sent back as wrong */
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:#e2786e}
.field-error{display:block;margin-top:.4rem;font-size:.75rem;color:#f4cfcb;letter-spacing:0;text-transform:none}

/* Side card */
.side-card{display:flex;flex-direction:column;gap:1rem}
.info-block{background:rgba(255,255,255,.04);border:1px solid rgba(244,234,213,.15);border-radius:4px;padding:1.5rem}
.info-block h4{font-family:var(--display);font-size:1.15rem;color:#fff;margin-bottom:.75rem}
.info-row{display:flex;gap:.75rem;align-items:flex-start;font-size:.9rem;color:rgba(244,234,213,.85);margin-bottom:.5rem}
.info-row svg{color:var(--accent);flex:none;margin-top:.15rem}
.info-row a:hover{color:var(--accent)}
.socials{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.social{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border:1px solid rgba(244,234,213,.2);border-radius:999px;font-size:.8rem;transition:.2s}
.social:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
/* The same pill with no label in it: a circle the icon sits in the middle of.
   The stroke is currentColor, so the hover above recolours the icon too. */
.social-icon{width:2.6rem;height:2.6rem;padding:0;justify-content:center;border-radius:50%}
.social-icon svg{width:1.15rem;height:1.15rem;display:block}

/* FOOTER */
footer.site-footer{background:#081726;color:rgba(244,234,213,.7);padding:48px 0 32px;border-top:1px solid rgba(244,234,213,.08)}
.foot-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
@media(min-width:768px){.foot-grid{grid-template-columns:2fr 1fr 1fr}}
.foot-grid h4{font-family:var(--display);color:#fff;font-size:1rem;margin-bottom:.75rem}
.foot-grid a{display:block;font-size:.85rem;padding:.2rem 0;transition:color .2s}
.foot-grid a:hover{color:var(--accent)}
.copy{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(244,234,213,.08);font-size:.75rem;color:rgba(244,234,213,.5);text-align:center}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}

/* Util */
.flex{display:flex}.gap-2{gap:.5rem}.items-center{align-items:center}
.hide-mobile{display:none}@media(min-width:640px){.hide-mobile{display:inline-flex}}

/* STAY (sister properties) */
.stay-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:768px){.stay-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.stay-grid{grid-template-columns:repeat(3,1fr)}}
.stay-grid .boat-card{transition:.4s ease}
.stay-grid .boat-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}

/* ============================================================
   PROPERTY PAGES  (apartment-milicic / villas-becir / villa-konavle)
   ============================================================ */
.prop-hero{position:relative;min-height:70vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff}
.prop-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prop-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.45),rgba(0,0,0,.12) 42%,rgba(0,0,0,.55) 72%,rgba(0,0,0,.85))}
.prop-hero .container{position:relative;z-index:2;padding-top:140px;padding-bottom:56px}
.prop-hero h1{font-size:clamp(2.2rem,5.5vw,4.2rem);color:#fff;margin-top:.85rem;text-wrap:balance}
.prop-hero .tagline{margin-top:1.1rem;max-width:640px;font-size:1.05rem;color:rgba(255,255,255,.9)}
.prop-hero .cta-row{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem}

.prop-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem;list-style:none;padding:0}
.prop-facts li{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;letter-spacing:.06em;
  padding:.45rem .85rem;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
}

.prop-body{padding:clamp(56px,8vw,96px) 0}
.prop-grid{display:grid;grid-template-columns:1fr;gap:48px;align-items:start}
@media(min-width:900px){.prop-grid{grid-template-columns:1.6fr 1fr;gap:64px}}
.prop-grid h2{font-size:clamp(1.8rem,3vw,2.4rem)}
.prop-grid p{margin-top:1.1rem;color:var(--muted);font-size:1.02rem}
.prop-unit{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--border)}
.prop-unit h3{font-size:1.5rem}
.prop-unit .sub{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-top:.4rem}

.side-box{background:var(--card);border:1px solid var(--border);border-radius:4px;padding:28px}
.side-box+.side-box{margin-top:20px}
.side-box h4{font-family:var(--display);font-size:1.15rem;margin-bottom:1rem}
.side-box .row{display:flex;gap:.7rem;font-size:.88rem;padding:.45rem 0;color:var(--muted)}
.side-box .row b{color:var(--fg);font-weight:600}
.side-box .row+.row{border-top:1px solid var(--border)}
.side-box a{color:var(--accent)}
.side-box a:hover{text-decoration:underline}
.award{display:flex;align-items:center;gap:1rem;background:var(--primary);color:#fff;border-radius:4px;padding:20px 24px}
.award .score{font-family:var(--display);font-size:2.2rem;line-height:1;color:var(--accent)}
.award .txt{font-size:.78rem;line-height:1.45;color:rgba(255,255,255,.85)}

/* photo grid + lightbox */
.gal-section{background:#f1ede4;padding:clamp(56px,8vw,96px) 0}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:40px}
.gal-grid button{
  padding:0;border:0;cursor:zoom-in;background:#0b1c26;
  aspect-ratio:4/3;overflow:hidden;border-radius:3px;
}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,opacity .3s}
.gal-grid button:hover img{transform:scale(1.06);opacity:.9}
.gal-grid button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,12,16,.95);display:none}
.lightbox.open{display:grid;place-items:center}
.lightbox figure{margin:0;display:grid;place-items:center;gap:1rem;padding:24px}
.lightbox img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:2px}
.lightbox figcaption{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.lb-btn{
  position:absolute;z-index:2;display:grid;place-items:center;
  width:48px;height:48px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.5rem;line-height:1;
  transition:background .25s;
}
.lb-btn:hover{background:rgba(255,255,255,.26)}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb-close{top:16px;right:16px;font-size:1.2rem}
@media(min-width:768px){.lb-prev{left:32px}.lb-next{right:32px}}

.prop-contact{padding:clamp(56px,8vw,96px) 0;background:var(--primary);color:#fff}
.prop-contact h2{color:#fff}
.prop-contact .lead{margin-top:1rem;max-width:620px;color:rgba(255,255,255,.8)}
.prop-contact .cta-row{margin-top:2.25rem;display:flex;flex-wrap:wrap;gap:.75rem}
.prop-contact .cta-row a.btn-ghost{color:#fff}


/* ============================================================
   RESPONSIVE
   The layout above is written mobile-first, so this block only
   holds what a small screen has to *undo* — things sized for a
   monitor that turn cramped, clipped or unreadable on a phone.
   ============================================================ */

/* a finger has no hover, so anything it can hit needs its own visible target */
a,button{-webkit-tap-highlight-color:rgba(201,150,43,.18)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ----- tablet and below ----- */
@media(max-width:900px){
  /* the photo's gold badge hangs 22px outside the frame — off the screen edge
     on a phone, so it moves inside instead */
  .about-badge{bottom:14px;right:14px;padding:.8rem 1.1rem}
  .about-badge .big{font-size:1.6rem}
  /* the hero dots sat under the last line of text on a narrow screen */
  .hero-dots{right:auto;left:50%;transform:translateX(-50%);bottom:64px}
  .scroll-hint{display:none}
}

/* ----- phones ----- */
@media(max-width:640px){
  .hero p{font-size:1rem}
  .hero-cta{gap:.6rem}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  /* the opening hours wrap to two lines here — centring would leave the gold
     dot floating beside the second one */
  .hero .hero-hours{align-items:flex-start}
  .hero .hero-hours .dot{margin-top:.5em}

  /* three stats across 320px is three squeezed columns of two-line labels */
  .stats{gap:1rem;margin-top:2rem;padding-top:1.5rem}
  .stat .val{font-size:1.5rem}
  .stat .lab{font-size:.6rem;letter-spacing:.15em}

  .feature{padding:1.35rem}
  .boat-head{flex-wrap:wrap;gap:.25rem}
  .boat-head h3{font-size:1.5rem}

  /* price and WhatsApp link stop fighting for the same line */
  .tour-foot{flex-direction:column;align-items:flex-start}

  .now-main{gap:1rem}
  .now-icon{font-size:2.6rem}
  .hourly-head{flex-wrap:wrap;gap:.35rem}

  /* the estimate reads better stacked than as a wide label/value split */
  .estimate{flex-direction:column;align-items:flex-start;gap:.35rem}
  .form-actions .btn{flex:1 1 100%;min-width:0}

  .copy{margin-top:2rem}
}

/* ----- narrow phones (≈360px and under) ----- */
@media(max-width:400px){
  .brand{font-size:1.15rem}
  .reviews-head .badge{flex-direction:column;align-items:flex-start;gap:1rem}
  .reviews-head .badge .btn{width:100%;justify-content:center}
  .chip{font-size:.7rem;padding:.4rem .7rem}
  .gal-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* ----- phone held sideways -----
   100svh of a 375px-tall viewport is not enough for the hero to hold its
   heading, buttons and opening hours, so there it grows with its content. */
@media(orientation:landscape) and (max-height:560px){
  .hero{height:auto;min-height:0}
  .hero-inner{height:auto;padding-top:110px;padding-bottom:56px}
  .hero h1{font-size:clamp(2rem,5.5vw,3rem)}
  .hero p{margin-top:.85rem}
  .hero-cta{margin-top:1.35rem}
  .hero .hero-hours{margin-top:1rem}
  .hero-dots{bottom:16px}
  .prop-hero{min-height:0}
  .prop-hero .container{padding-top:110px;padding-bottom:40px}
}