/* Romanza Villas homepage — extracted from the single-file prototype so a bug in one
   feature's script can no longer silently break unrelated features sharing one file.
   See app.js for the same reasoning on the JS side. */

  :root {
    --parchment:#faf9f6; --espresso:#4a3728; --amber:#b45309; --line:#e6e1d6; --ink:#2b2820;
    --gold-muted:#9c8563; /* used for section kickers/labels — amber itself is reserved strictly for prices, per brand rule */
    --teal:#3aa39a; /* Romanza's actual logo color, used only for the monogram mark itself */
    --shadow-soft: 0 18px 46px rgba(35,24,14,0.14);
    --shadow-lift: 0 26px 60px rgba(35,24,14,0.22);
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; background: var(--parchment); color: var(--ink); line-height:1.65; -webkit-font-smoothing:antialiased; }
  /* fixed header covers ~90px — without this, jumping to #villas/#reviews/#explore lands the
     section heading right under the header, which reads as "the link didn't work" */
  section[id] { scroll-margin-top: 96px; }
  a { color:inherit; }
  .wrap { max-width:1120px; margin:0 auto; padding:0 32px; }
  ::selection { background: var(--gold-muted); color:#fff; }

  /* header sits transparent over the hero photo, then snaps to a solid parchment bar with its own
     shadow once scrolled past — otherwise the logo/nav vanish over any non-photo background */
  /* flex-start + margin-right:auto on the logo (rather than justify-content:space-between) is
     deliberate: header now has 4 possible children (logo, nav-toggle, nav, lang-switch) and
     space-between would strand whichever sits in the middle instead of clustering the toggle,
     nav and lang-switch together on the right where they visually belong. */
  header {
    display:flex; justify-content:flex-start; align-items:center; gap:14px; padding: 22px 130px 22px 40px;
    position:fixed; top:0; left:0; right:0; z-index:150;
    background:transparent; box-shadow:none; transition:background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
  }
  header .logo { margin-right:auto; }
  header.scrolled { background: rgba(250,249,246,0.96); backdrop-filter:blur(6px); box-shadow:0 2px 20px rgba(35,24,14,0.08); padding:14px 40px; }
  header .logo { font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; font-size:26px; letter-spacing:0.03em; color:#fff; transition:color 0.3s ease, font-size 0.3s ease; }
  header.scrolled .logo { color: var(--espresso); font-size:22px; }
  header nav { display:flex; align-items:center; gap:28px; font-size:12px; letter-spacing:0.03em; }
  .lang-switch { position:relative; opacity:1; max-width:80px; overflow:visible; transition:opacity 0.3s ease, max-width 0.3s ease, margin 0.3s ease; }
  /* once scrolled past the hero, the language switch collapses away entirely rather than sitting
     as dead weight next to the espresso-colored nav links — pointer-events:none plus visibility
     also stops the now-invisible button from being tabbed to or accidentally tapped */
  header.scrolled .lang-switch { opacity:0; pointer-events:none; visibility:hidden; max-width:0; margin-left:-28px; overflow:hidden; }
  .lang-switch .lang-current { display:flex; align-items:center; gap:5px; background:none; border:1px solid rgba(255,255,255,0.5); color:#fff; font-size:11px; font-weight:700; letter-spacing:0.04em; padding:5px 10px; border-radius:14px; cursor:pointer; transition:opacity 0.2s, color 0.3s ease, border-color 0.3s ease; }
  .lang-switch .lang-current .globe-icon { flex-shrink:0; }
  header.scrolled .lang-switch .lang-current { color:var(--espresso); border-color:var(--line); }
  .lang-switch .lang-menu { position:absolute; top:calc(100% + 8px); right:0; background:#fff; border-radius:10px; box-shadow:var(--shadow-soft); padding:6px; display:none; flex-direction:column; min-width:120px; z-index:10; }
  .lang-switch .lang-menu.open { display:flex; }
  .lang-switch .lang-menu button { background:none; border:none; text-align:left; padding:8px 10px; font-size:13px; color:var(--espresso); border-radius:6px; cursor:pointer; }
  .lang-switch .lang-menu button:hover { background:var(--parchment); }
  /* mobile-only duplicate of the language buttons, living inside the hamburger dropdown itself —
     hidden on desktop (the separate .lang-switch pill next to the logo handles it there). See the
     900px breakpoint below for where this actually becomes visible. */
  .nav-lang-group { display:none; }
  header nav a { text-decoration:none; color:#fff; opacity:0.88; position:relative; line-height:1; padding:14px 8px; margin:-14px -8px; display:inline-block; cursor:pointer; transition:opacity 0.2s, color 0.3s ease; }
  header.scrolled nav a { color: var(--espresso); }

  /* hamburger toggle — hidden on desktop, only appears once the Villas/Reviews/Island links
     collapse below in the mobile breakpoint. Reuses the same white/espresso color-swap pattern
     as the language switcher so it stays visible over both the dark hero video and light sections. */
  /* Option 6 from the nav-alternatives review: a text pill reading "Menu"/"Close" instead of the
     three-bar glyph — several UX sources flagged the bars icon as having weak discoverability for
     non-tech visitors, a spelled-out label removes that ambiguity. */
  .nav-toggle {
    display:none; align-items:center; justify-content:center; height:34px; padding:0 18px;
    background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.4); border-radius:17px;
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    box-shadow:0 2px 10px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.25);
    cursor:pointer; transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .nav-toggle:active { transform:scale(0.97); }
  .nav-toggle span { font-size:12px; font-weight:700; letter-spacing:0.03em; color:#fff; transition:color 0.3s ease; }
  header.scrolled .nav-toggle {
    background:rgba(255,255,255,0.55); border-color:rgba(28,43,69,0.25);
    box-shadow:0 2px 10px rgba(35,24,14,0.06), inset 0 1px 0 rgba(255,255,255,0.5);
  }
  header.scrolled .nav-toggle span { color: var(--espresso); }
  header nav a:hover { opacity:1; }
  header nav a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:1px; background:currentColor; transition:width 0.25s ease; }
  header nav a:hover::after { width:100%; }

  /* HERO — real drone footage of the Zakynthos coastline (Villa 1's own tour video, not stock),
     muted/looping/autoplay, restrained text, subtle vignette instead of a flat overlay */
  .hero { position:relative; height:100vh; min-height:660px; overflow:hidden; }
  .hero video, .hero img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.04); }
  .hero::after { content:''; position:absolute; inset:0; background:
    radial-gradient(ellipse at 50% 30%, rgba(20,14,8,0.05), rgba(20,14,8,0.25) 60%),
    linear-gradient(180deg, rgba(20,14,8,0.4), rgba(20,14,8,0.1) 32%, rgba(20,14,8,0.62) 100%); }
  .hero-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; text-align:left; color:#fff; z-index:2; padding:0 6vw 12vh; opacity:0; animation: hero-copy-in 1.1s ease 0.6s forwards; }
  @keyframes hero-copy-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
  .hero-content .kicker { font-size:12px; letter-spacing:0.34em; text-transform:uppercase; opacity:0.9; margin-bottom:16px; font-weight:600; }
  .hero-content h1 { font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; font-size:clamp(24px, 3.6vw, 38px); max-width:460px; line-height:1.34; text-shadow:0 2px 20px rgba(0,0,0,0.3); }
  .hero-content .rule { width:40px; height:1px; background:rgba(255,255,255,0.5); margin:18px 0; }

  /* ============ THE MONOGRAM CTA — fixed top-right, present in header and while scrolling ============ */
  /* Pattern borrowed from Haute Retreats' floating contact button (top-right, "+" morphs on open,
     tooltip prompt appears above, options cascade below) — reworked around a calligraphic "R"
     monogram instead of a generic chat icon, so the button itself doubles as a tiny brand mark. */
  /* pointer-events:none on the wrapper is deliberate: this is a fixed flex box sized to its
     widest child (the "Book Now!" caption), so its invisible box reaches further left/down than
     the round button itself — without this, that transparent area silently steals clicks from
     whatever sits underneath it (e.g. the header nav links closest to this corner). Only the
     actual visible pieces re-enable pointer-events below. */
  /* moved from top-right to bottom-right: this is a chat/booking-bubble pattern (Intercom, WhatsApp,
     Booking.com's chat launcher all live bottom-right), which keeps it in mobile thumb-reach and,
     just as importantly, out of the header nav's territory entirely rather than merely not-overlapping it.
     column-reverse + reordered markup (button, caption, options, tooltip) makes the popups cascade
     upward from the button instead of downward off the bottom of the screen. */
  /* mid-right instead of top-right or bottom-right: clear of both the header nav and any
     bottom-of-viewport content on short screens, vertically centered via top:50%+translateY */
  /* occupies the exact same fixed spot as .monogram-wrap below — hidden by default, shown only
     while the booking panel is open (toggled via .visible in openAvailability()/
     closeAvailability()), replacing the button in place rather than leaving that spot empty */
  .direct-book-note {
    position:fixed; top:50%; right:32px; transform:translateY(-50%); z-index:300; max-width:150px;
    text-align:right; font-size:11px; line-height:1.4; color:#fff;
    background:rgba(28,43,69,0.82); backdrop-filter:blur(4px); padding:10px 14px; border-radius:14px;
    opacity:0; pointer-events:none; transition:opacity 0.3s ease 0.15s;
  }
  .direct-book-note.visible { opacity:1; }
  .monogram-wrap { position:fixed; top:50%; right:32px; transform:translateY(-50%); z-index:300; display:flex; flex-direction:column-reverse; align-items:flex-end; pointer-events:none; }
  /* the button hides (replaced by .direct-book-note in the same spot) while the booking panel is
     open — at ANY screen width, not just mobile. This was previously only defined inside the
     max-width:900px media query further down, which is why it kept showing on desktop even
     though JS was correctly adding the avail-open class the whole time. */
  .monogram-wrap.avail-open { opacity:0; pointer-events:none; transition:opacity 0.2s ease; }
  .monogram-wrap.avail-open .monogram-btn,
  .monogram-wrap.avail-open .monogram-options a,
  .monogram-wrap.avail-open .monogram-options button { pointer-events:none; }

  .monogram-btn { position:relative; width:64px; height:64px; cursor:pointer; pointer-events:auto; }
  /* svg must be explicitly positioned + stacked above the white disc, otherwise the disc
     (being absolutely positioned) paints over it regardless of DOM order and hides the icon at rest */
  .monogram-btn svg { position:absolute; inset:0; z-index:2; width:100%; height:100%; display:block; transition:opacity 0.3s ease, transform 0.35s cubic-bezier(.3,.9,.3,1); transform-origin:50% 50%; }
  /* resting state: the turtle mark, fitted inside the circle, visible by default */
  .monogram-btn .bubble-rest { opacity:1; }
  .monogram-btn .turtle-mark { opacity:0.95; }
  /* click state: the R monogram, hidden until the wrap opens */
  .monogram-btn .r-reveal { opacity:0; pointer-events:none; }
  .monogram-btn .ring-stroke { stroke:var(--teal); stroke-width:2.6; fill:none; stroke-linecap:round; stroke-dasharray:210; stroke-dashoffset:40; }
  /* hand-drawn path monogram instead of a webfont letter — always renders instantly, no font-load flash */
  .monogram-btn .r-path { fill:none; stroke:var(--teal); stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; }
  .monogram-btn .flower { fill:var(--teal); opacity:0.85; }
  /* the R group is what actually spins (44 rotations); it fades out right at the very end
     of the 1.5s spin (transition-delay matches the animation length), replaced by the static
     X so the settled, open-panel state reads as "click to close" instead of showing the R */
  .monogram-btn .r-group { opacity:1; transition:opacity 0.15s ease; }
  .monogram-btn .x-group { opacity:0; transition:opacity 0.15s ease; }
  .monogram-btn .x-path { fill:none; stroke:var(--teal); stroke-width:4; stroke-linecap:round; }
  .monogram-wrap.open .monogram-btn .r-group { opacity:0; transition-delay:1.35s; }
  .monogram-wrap.open .monogram-btn .x-group { opacity:1; transition-delay:1.35s; }
  /* once open/opening/closing, swap which svg is visible: turtle fades out, R/X svg fades + spins in */
  .monogram-wrap.open .monogram-btn .bubble-rest,
  .monogram-wrap.opening .monogram-btn .bubble-rest,
  .monogram-wrap.closing .monogram-btn .bubble-rest { opacity:0; }
  .monogram-wrap.open .monogram-btn .r-reveal,
  .monogram-wrap.opening .monogram-btn .r-reveal,
  .monogram-wrap.closing .monogram-btn .r-reveal { opacity:1; }
  /* while closing, force the R back (not the X) so the vanish animation matches the original flourish */
  .monogram-wrap.closing .monogram-btn .r-group { opacity:1; }
  .monogram-wrap.closing .monogram-btn .x-group { opacity:0; }

  .monogram-caption {
    /* mid-right means this floats over the dark hero video AND light cream sections as the page
       scrolls. mix-blend-mode:difference was tried here but browsers don't reliably composite
       blend modes against a playing <video> element, so it just sat stuck white over the hero —
       toggled via JS instead (see .over-light below), which checks the actual hero bounds on scroll. */
    margin-bottom:6px; font-size:11px; font-weight:700; letter-spacing:0.04em; color:#fff;
    text-shadow:0 1px 6px rgba(0,0,0,0.4); text-align:right; transition:opacity 0.25s ease, color 0.2s ease, background 0.2s ease;
    /* small backing plate so the caption stays readable no matter what photo happens to be
       underneath it at this scroll position (a bare shadow wasn't enough over busy images like
       foliage or bright sky) — subtle enough not to look like its own separate UI element */
    background:rgba(0,0,0,0.18); backdrop-filter:blur(3px); padding:4px 10px; border-radius:20px;
  }
  /* JS adds this to #monogramWrap once the button's own position has scrolled past the hero video */
  .monogram-wrap.over-light .monogram-caption { color: var(--espresso); text-shadow:none; background:rgba(255,255,255,0.72); }
  .monogram-wrap.open .monogram-caption,
  .monogram-wrap.opening .monogram-caption,
  .monogram-wrap.closing .monogram-caption { opacity:0; pointer-events:none; }
  .monogram-btn-inner { position:absolute; inset:0; z-index:1; border-radius:50%; background:#fff; box-shadow: var(--shadow-soft); transition:box-shadow 0.3s ease; }
  .monogram-btn:hover .monogram-btn-inner { box-shadow: var(--shadow-lift); }
  .monogram-btn:hover svg { transform:scale(1.05); }
  /* forty-four rotations total in 1.5s: fast whoosh, a glitchy stutter near the end, then slow
     rotations that settle exactly back to the R's original resting orientation (15840deg = 44 * 360) */
  .monogram-wrap.opening .monogram-btn svg { animation: flourish-spin 1.5s forwards; }
  @keyframes flourish-spin {
    0%   { transform:rotate(0deg) scale(1);          animation-timing-function: cubic-bezier(.1,.7,.2,1); }
    45%  { transform:rotate(14400deg) scale(1.16);   animation-timing-function: steps(5, jump-end); }
    58%  { transform:rotate(14760deg) scale(1.08);   animation-timing-function: linear; }
    63%  { transform:rotate(14670deg) scale(1.12);   animation-timing-function: ease-in-out; }
    72%  { transform:rotate(15080deg) scale(1.03);   animation-timing-function: ease-out; }
    100% { transform:rotate(15840deg) scale(1); }
  }
  /* closing: spins the opposite way while shrinking and fading — a quick "vanish" — then resets to resting for next time */
  .monogram-wrap.closing .monogram-btn svg { animation: flourish-vanish 0.55s cubic-bezier(.4,0,.6,1) forwards; }
  @keyframes flourish-vanish {
    0%   { transform:rotate(0deg) scale(1); opacity:1; }
    70%  { transform:rotate(-540deg) scale(0.35); opacity:0.15; }
    100% { transform:rotate(-720deg) scale(0.0001); opacity:0; }
  }
  .monogram-wrap.closing .monogram-btn-inner { animation: inner-vanish 0.55s ease forwards; }
  @keyframes inner-vanish { 100% { transform:scale(0.6); opacity:0.4; } }

  .monogram-tooltip {
    background:#fff; color:var(--espresso); font-size:13px; max-width:220px; text-align:right; line-height:1.5;
    padding:12px 16px; border-radius:10px 10px 2px 10px; box-shadow: var(--shadow-soft); margin-bottom:12px;
    opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity 0.3s ease, transform 0.3s ease;
  }
  .monogram-wrap.open .monogram-tooltip { opacity:1; transform:translateY(0); }

  .monogram-options { display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-bottom:12px; }
  .monogram-options a, .monogram-options button {
    display:flex; align-items:center; gap:9px; background: var(--espresso); color:#fff;
    border:none; border-radius:24px; padding:12px 20px; font-size:13px; font-weight:700; text-decoration:none; cursor:pointer;
    box-shadow: var(--shadow-soft); opacity:0; transform:translateX(16px); pointer-events:none;
    transition:opacity 0.25s ease, transform 0.25s ease;
  }
  .monogram-wrap.open .monogram-options a, .monogram-wrap.open .monogram-options button { opacity:1; transform:translateX(0); pointer-events:auto; }
  .monogram-wrap.open .monogram-options a:nth-child(1) { transition-delay:0.05s; }
  .monogram-wrap.open .monogram-options a:nth-child(2), .monogram-wrap.open .monogram-options button:nth-child(2) { transition-delay:0.12s; }
  .monogram-options .emoji { font-size:16px; }

  /* one giant hero CTA is no longer needed once the monogram lives fixed top-right — the hero keeps just its message */
  .hero-hint { position:absolute; bottom:32px; right:6vw; color:#fff; font-size:12px; letter-spacing:0.12em; text-transform:uppercase; opacity:0.7; display:flex; align-items:center; gap:8px; }
  .hero-hint::after { content:'↗'; font-size:14px; }

  /* AVAILABILITY PANEL */
  /* the booking overlay uses the site's Zakynthos-themed background — cream field (matching the
     site's dominant 60% color), with turtle and cliff motifs as a quiet ~10% teal accent per the
     60-30-10 balance used throughout. A soft warm scrim (not a dark one — the field is light now)
     keeps the white card feeling lifted above the backdrop rather than flat against it */
  .avail-panel { position:fixed; inset:0; background:linear-gradient(rgba(74,55,40,0.12),rgba(74,55,40,0.12)), url('bg-navagio-pencil-dual-rev.jpg') center/cover; backdrop-filter:blur(2px); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
  .avail-panel.open { display:flex; }
  /* spacing throughout this card was compacted (quote, labels, calendar, button) specifically so
     the whole booking flow fits one viewport with no internal scrolling on typical phones —
     overflow-y:auto stays only as a safety net for extreme cases like a phone in landscape,
     where no amount of tightening makes everything fit inside ~375px of height. */
  .avail-card { background:#fff; border-radius:12px; padding:22px 26px; max-width:380px; width:100%; position:relative; box-shadow: var(--shadow-lift); max-height:96vh; overflow-y:auto; text-align:center; }
  /* everything below the quote's own border-bottom line gets a terracotta background, bled out
     to the card's true edges via negative margins (matching .avail-card's own padding values)
     since .form-body normally sits inset within that padding like everything else. The quote
     above the line stays on the plain white card background, untouched. */
  .avail-card .form-body { background:#e6cbb3; margin:14px -26px -22px; padding:16px 26px 22px; border-radius:0 0 10px 10px; }
  .avail-quote { font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:600; font-size:15.5px; line-height:1.5;
    color:#1c2b45; text-align:center; margin:0 8px 10px; padding:4px 4px 10px;
    border-bottom:1px solid var(--line); opacity:0; transform:translateY(6px);
    transition:opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s; }
  .avail-panel.open .avail-quote { opacity:1; transform:translateY(0); }
  .avail-quote .quote-attr { display:block; font-style:normal; font-size:10px; letter-spacing:0.06em;
    text-transform:uppercase; color:var(--gold-muted); margin-top:6px; }
  .avail-card h3 { font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; font-size:18px; color:var(--espresso); margin-bottom:2px; }
  .avail-card .sub { font-size:11.5px; opacity:0.6; margin-bottom:10px; line-height:1.35; }
  .avail-card label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.07em; color:#1c2b45; font-weight:700; margin:8px 0 4px; }
  .avail-card .guest-limit-note { text-transform:none; letter-spacing:0; font-weight:400; color:#1c2b45; font-size:10.5px; }
  .avail-card select, .avail-card input:not([type="hidden"]) { width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:5px; font-size:13px; font-family:inherit; transition:border-color 0.2s; text-align:center; text-align-last:center; }
  .avail-card select:focus, .avail-card input:focus { outline:none; border-color: var(--espresso); }
  /* "Which villa?" dropdown switched from white to navy, same as the calendar's available-day
     cells — scoped to #villaSelect specifically rather than the shared select/input rule above,
     since that rule also covers other fields (guest slider, future inputs) that should stay
     unaffected. <option> background is set too, though some mobile browsers (notably iOS Safari)
     ignore styling on the native option list and will still show it in the OS's own picker UI —
     a real platform limitation, not a CSS mistake, if it doesn't show navy everywhere. */
  #villaSelect { background:#1c2b45; color:#fff; border-color:#1c2b45; }
  #villaSelect option { background:#1c2b45; color:#fff; }
  .avail-card .row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

  /* only shown when "Both villas, one booking" is selected — toggled in updateGuestLimit() via
     the .visible class rather than removed from the DOM, so its own transition can run */
  .villa-event-note { font-size:11px; line-height:1.4; color:#1c2b45; opacity:1; background:var(--parchment); border-radius:6px; padding:0; max-height:0; overflow:hidden; margin-top:0; transition:max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease; }
  .villa-event-note.visible { max-height:80px; padding:8px 10px; margin-top:8px; }

  /* number-pill guest picker — one tap sets the exact count, no spinner arrows to hunt for.
     Hidden by default; JS toggles .visible on whichever of pills/slider fits the current max
     (see GUEST_PILL_MAX_THRESHOLD in app.js). */
  .guest-pills { display:none; flex-wrap:wrap; justify-content:center; gap:6px; }
  .guest-pills.visible { display:flex; }
  .guest-pill { width:28px; height:28px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--espresso); font-size:12px; font-weight:600; cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
  .guest-pill:hover { border-color:var(--espresso); }
  .guest-pill.active { background:#1c2b45; border-color:#1c2b45; color:#fff; }

  /* slider swap-in for the "Both villas" case (max 14) — dragging across a wide range beats
     tapping through 14 individual pills. Styled as a frosted "glass" pill (soft translucent
     track, blurred glassy thumb) rather than a bare flat rectangle — the fill percentage is set
     inline via JS (updateGuestSliderFill in app.js) since native range inputs have no built-in
     progress-fill styling that works consistently across browsers. */
  .guest-slider-wrap { display:none; padding:2px 2px 0; }
  .guest-slider-wrap.visible { display:block; }
  .guest-slider-value { text-align:center; font-size:13px; font-weight:600; color:var(--espresso); margin-bottom:10px; }
  /* track thinned to 4px and thumb to 18px (both values are also read by updateGuestSliderFill()
     in app.js — thumbWidthPx there must match the width set here, since the fill-alignment math
     depends on knowing the thumb's actual size) */
  /* .avail-card input (the generic rule used for the villa/guest text fields) also matches this
     element since it isn't type="hidden" — its 1px border + 7px/10px padding were the actual
     cause of the "fat boxed" look, sitting around the thin custom track underneath. Explicitly
     zeroing border/padding/background-color here strips that inherited styling back out. */
  #guestSlider {
    width:100%; height:4px; border-radius:4px; appearance:none; -webkit-appearance:none;
    cursor:pointer; outline:none; border:none; padding:0; background-color:transparent;
    background-image: linear-gradient(90deg, #1c2b45 0%, #1c2b45 0%, rgba(28,43,69,0.12) 0%, rgba(28,43,69,0.12) 100%);
    box-shadow: inset 0 1px 2px rgba(35,24,14,0.08);
  }
  #guestSlider::-webkit-slider-thumb {
    appearance:none; -webkit-appearance:none; width:18px; height:18px; border-radius:50%;
    background: rgba(255,255,255,0.85); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
    border:1px solid rgba(28,43,69,0.18); cursor:pointer;
    box-shadow: 0 2px 8px rgba(35,24,14,0.22), inset 0 1px 0 rgba(255,255,255,0.6);
    transition: transform 0.12s ease;
  }
  #guestSlider::-webkit-slider-thumb:active { transform:scale(1.08); }
  #guestSlider::-moz-range-track { height:4px; border-radius:4px; background:rgba(28,43,69,0.12); box-shadow: inset 0 1px 2px rgba(35,24,14,0.08); }
  #guestSlider::-moz-range-progress { height:4px; border-radius:4px; background:#1c2b45; }
  #guestSlider::-moz-range-thumb {
    width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,0.85);
    border:1px solid rgba(28,43,69,0.18); cursor:pointer;
    box-shadow: 0 2px 8px rgba(35,24,14,0.22), inset 0 1px 0 rgba(255,255,255,0.6);
  }

  /* real-availability calendar — colors reuse the site's existing palette rather than inventing
     new ones: teal for a selected stay (matches --teal/the turtle mark), a warm coral only for
     booked/unavailable days (a genuinely new meaning on this page, so it gets a genuinely new
     color rather than overloading espresso or teal to mean two different things) */
  /* the widget's own field/container background is navy now (was --parchment) — per Christos:
     "the boxes when you click them" (the individual day cells) were the wrong thing to recolor;
     it's this outer field itself that should be navy. Cell background/text below is reverted
     back to its original white/ink. Header/nav/day-of-week/legend/status text switched to
     white/light so they still read against the new dark field. */
  .cal-widget { background:#1c2b45; border:1px solid #1c2b45; border-radius:8px; padding:8px; margin-bottom:8px; }
  .cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
  .cal-month-label { font-family:'Cormorant Garamond', Georgia, serif; font-size:13.5px; color:#fff; font-weight:700; }
  .cal-nav { background:none; border:1px solid rgba(255,255,255,0.4); border-radius:6px; width:21px; height:21px; font-size:12px; color:#fff; cursor:pointer; line-height:1; }
  .cal-nav:hover { border-color:#fff; }
  .cal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; font-size:9px; font-weight:700; text-align:center; color:#fff; margin-bottom:2px; }
  .cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
  .cal-day { height:22px; display:flex; align-items:center; justify-content:center; font-size:11px; border-radius:6px; color:var(--ink); cursor:pointer; background:#fff; user-select:none; }
  .cal-day.cal-empty { visibility:hidden; cursor:default; }
  /* past dates sit directly on the navy field (transparent lets it show through) — bold full
     white number, plus a soft thin diagonal white slash through the cell as a clearer "not
     clickable" visual cue than dimmed opacity alone used to give */
  .cal-day.cal-past { color:#fff; font-weight:700; cursor:not-allowed;
    background: linear-gradient(135deg, transparent calc(50% - 0.75px), rgba(255,255,255,0.45) 50%, transparent calc(50% + 0.75px)); }
  .cal-day.cal-booked { background:#f5c4b3; color:#4a1b0c; cursor:not-allowed; }
  .cal-day.cal-in-range { background:#9fe1cb; color:#04342c; }
  .cal-day.cal-selected { background:var(--teal); color:#fff; font-weight:700; }
  .cal-day:not(.cal-booked):not(.cal-past):not(.cal-empty):hover { border:1px solid var(--teal); }
  .cal-legend { display:flex; gap:12px; margin-top:5px; font-size:10px; color:rgba(255,255,255,0.75); opacity:1; }
  .cal-legend span { display:flex; align-items:center; gap:5px; }
  .cal-swatch { width:8px; height:8px; border-radius:2px; display:inline-block; }
  .cal-swatch-selected { background:var(--teal); }
  .cal-swatch-booked { background:#f5c4b3; }
  .cal-status { font-size:11px; color:#fff; margin-top:5px; min-height:14px; }
  .avail-card .submit { margin-top:12px; width:100%; background:#1c2b45; color:#fff; border:none; padding:11px; border-radius:5px; font-weight:700; font-size:13px; cursor:pointer; transition:background 0.2s; }
  /* hidden by default (desktop uses the fixed floating .direct-book-note instead) — shown only
     inside the mobile breakpoint below, where it appears under the button rather than in the
     floating spot */
  .direct-book-note-inline { display:none; font-size:10.5px; line-height:1.4; color:#1c2b45; opacity:0.75; margin-top:10px; }
  .avail-card .submit:hover { background:#14203b; }
  .avail-card .close { position:absolute; top:12px; right:14px; background:none; border:none; font-size:18px; cursor:pointer; color:#aaa; }

  /* SECTIONS — shared rhythm */
  section { padding:96px 0; }
  .section-head { text-align:center; max-width:600px; margin:0 auto 46px; }
  .section-head .kicker { font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-muted); font-weight:700; margin-bottom:12px; }
  .section-head h2 { font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; font-size:31px; color:var(--espresso); }
  .section-head .rule { width:40px; height:2px; background:var(--gold-muted); margin:16px auto 0; opacity:0.5; }

  /* live Google review card — swapped in by JS once the Places API responds; markup below
     ships a static fallback quote so the section never shows empty/broken while that loads,
     or if the API key isn't configured yet */
  /* same arched-top feel as the villa cards, applied consistently across the page's other
     card-like boxes so it reads as one deliberate motif rather than a one-off */
  .review-card { max-width:560px; margin:0 auto 34px; background:#e6cbb3; border-radius:90px 90px 12px 12px; padding:36px 28px 24px; box-shadow:0 10px 26px rgba(35,24,14,0.08); text-align:center; opacity:0; animation: review-card-in 0.5s ease forwards; }
  @keyframes review-card-in { to { opacity:1; } }
  .review-card .stars { color:var(--amber); font-size:14px; letter-spacing:2px; margin-bottom:10px; }
  .review-card .quote { font-family:'Cormorant Garamond', Georgia, serif; font-style:italic; font-weight:600; color:var(--ink); font-size:17px; line-height:1.6; margin-bottom:6px; }
  .review-card .quote .full { display:none; }
  .review-card.expanded .quote .truncated { display:none; }
  .review-card.expanded .quote .full { display:inline; }
  .review-card .read-more { display:none; background:none; border:none; padding:0; font-size:12px; font-weight:700; color:var(--espresso); text-decoration:underline; cursor:pointer; margin-bottom:14px; }
  .review-card.has-more .read-more { display:inline-block; }
  .review-card.expanded .read-more { display:none; }
  .review-card .who b { font-size:13px; color:var(--espresso); }
  .review-card .who span { font-size:12px; color:var(--gold-muted); display:block; }

  .reviews-strip { display:flex; justify-content:center; gap:56px; flex-wrap:wrap; margin-bottom:38px; text-align:center; }
  .reviews-strip .stat b { display:block; font-size:34px; color:var(--espresso); font-family:'Cormorant Garamond', Georgia, serif; font-weight:700; }
  .reviews-strip .stat span { font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.6; }
  .reviews-cta { text-align:center; }
  .reviews-cta a { font-size:13px; font-weight:700; color:#1c2b45; text-decoration:none; border-bottom:1px solid var(--gold-muted); padding-bottom:2px; transition:opacity 0.2s; }
  .reviews-cta a:hover { opacity:0.7; }

  .experiences { background:#fff; }
  .exp-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:10px; }
  .exp-card { position:relative; border-radius:120px 120px 8px 8px; overflow:hidden; height:360px; box-shadow: var(--shadow-soft); transition:transform 0.35s ease, box-shadow 0.35s ease; }
  .exp-card:hover { transform:translateY(-6px); box-shadow: var(--shadow-lift); }
  .exp-card img { width:100%; height:100%; object-fit:cover; display:block; filter:brightness(0.87); transition:transform 0.6s ease; }
  .exp-card:hover img { transform:scale(1.05); }
  .exp-card .caption { position:absolute; bottom:0; left:0; right:0; padding:24px; background:linear-gradient(0deg, rgba(15,10,6,0.88), transparent 80%); color:#fff; }
  .exp-card .caption .line1 { font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; font-size:20px; margin-bottom:5px; }
  .exp-card .caption .line2 { font-size:12.5px; opacity:0.85; line-height:1.5; }

  .explore-media { position:relative; border-radius:8px; overflow:hidden; margin-bottom:24px; box-shadow: var(--shadow-soft); }
  .explore-media video { width:100%; height:340px; object-fit:cover; display:block; }
  .explore-media-caption { position:absolute; bottom:0; left:0; right:0; padding:18px 22px; background:linear-gradient(0deg, rgba(15,10,6,0.8), transparent); color:#fff; font-size:13px; font-style:italic; }
  .explore-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px; }
  /* these are short, thin flex rows — a literal deep arch would look broken at this height, so
     they get a lighter echo of the same motif instead (noticeably rounder top corners than
     bottom) rather than forcing a true arch onto a shape too short to carry it */
  .explore-item { display:flex; justify-content:space-between; align-items:center; background: #e6cbb3; border:1px solid var(--line); border-radius:22px 22px 8px 8px; padding:17px 22px; font-size:14px; transition:border-color 0.2s, transform 0.2s; }
  .explore-item:hover { border-color: var(--gold-muted); transform:translateX(2px); }
  /* text recolored to the same blue family used for the reviews/villa-card/explore sections,
     so the terracotta boxes tie back to that pairing instead of the old espresso — darker than
     the pastel #9fb8d1 background-blue so it actually has contrast to read against terracotta */
  .explore-item .place { font-weight:700; color:#2f4a68; }
  .explore-item .dist { color:#2f4a68; opacity:0.7; font-weight:700; font-size:12.5px; letter-spacing:0.02em; }
  .explore-note { text-align:center; font-size:13px; opacity:0.65; margin-top:24px; max-width:560px; margin-left:auto; margin-right:auto; font-style:italic; }
  /* same "Open in Google Maps" pattern parked for the villa detail pages, brought forward onto
     the homepage's Island section — real link, no embed, for the same load-time/trust reasons */
  .explore-maps-btn { display:block; text-align:center; max-width:280px; margin:24px auto 0; background:#1c2b45; color:#fff; text-decoration:none; padding:13px; border-radius:6px; font-weight:700; font-size:14px; transition:background 0.2s; }
  .explore-maps-btn:hover { background:#14203b; }

  /* the "Choose your villa" section sits on the same warm cream used behind the old button
     showcase — a quiet break from the parchment page background so the two villa cards
     stand out as their own moment, without the busier teal/turtle treatment */
  /* soft muted terracotta instead of the plain cream/beige — separates this section from the
     cream sections above/below and leans into the Mediterranean tone, kept pale enough that the
     espresso text and night-shot photos still read comfortably against it */
  #villas { background:#e6cbb3; padding:110px 0; }
  /* curiosity test — "Two Villas, One Family" kicker recolored to navy to check against the
     terracotta background */
  #villas .section-head .kicker { color:#1c2b45; }
  /* a warm beige, one notch deeper than the page's base cream, so this section doesn't just
     blend invisibly — pairs with the terracotta villas section above without competing with the
     white review card and star rating sitting on top of it */
  /* swapped from a saturated navy to a real dusty/powder blue — closer to the actual pastel
     façade colors found on traditional Zakynthos houses (ochre/terracotta + soft pastels, per
     research) than a corporate-navy would be, while keeping the same terracotta/blue
     complementary contrast that made the navy version work visually */
  #reviews { background:#9fb8d1; padding:96px 0; }
  .experiences { background:#e6cbb3; padding:96px 0; }
  #explore { background:#9fb8d1; padding:96px 0; }
  #reviews .read-more, #reviews a { color:#e6cbb3; }
  .villas-compare { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  /* arched top corners — a nod to the villas' own Mediterranean archways rather than a generic
     rounded rectangle. Only applied on the desktop/tablet stacked layout where the photo sits on
     top; the mobile horizontal-split layout resets this back to a plain rounded corner further
     down, since an arch doesn't read the same way on a card lying on its side. */
  .villa-compare-card { border:1px solid var(--line); border-radius:140px 140px 10px 10px; overflow:hidden; text-decoration:none; color:var(--ink); background:#9fb8d1; transition:transform 0.3s ease, box-shadow 0.3s ease; display:block; }
  .villa-compare-card:hover { transform:translateY(-5px); box-shadow: var(--shadow-soft); }
  /* navy text inside the card, price stays amber as before — dark navy on the pastel blue
     background gives real contrast, unlike the off-white attempt */
  .villa-compare-card h3 { color:#1c2b45 !important; }
  .villa-compare-card .specs { color:#33455f !important; opacity:1 !important; }
  .villa-compare-card img { width:100%; height:240px; object-fit:cover; display:block; }
  .villa-compare-card .info { padding:22px; }
  .villa-compare-card h3 { font-size:19px; color:var(--espresso); margin-bottom:9px; font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; }
  .villa-compare-card .specs { font-size:12.5px; opacity:0.65; margin-bottom:12px; }
  .villa-compare-card .price { color:var(--amber); font-weight:700; font-size:14px; } /* amber reserved for price only, per brand rule */

  footer { text-align:center; padding:44px; font-size:12px; opacity:0.55; border-top:1px solid var(--line); background:#e6cbb3; }

  /* ============ RESPONSIVE — tablet and phone ============ */
  @media (max-width: 900px) {
    .wrap { padding:0 24px; }
    header { padding:18px 88px 18px 24px; }
    header.scrolled { padding:12px 24px; }
    /* the Villas/Reviews/Island links move into a hamburger dropdown at this width rather than
       just disappearing — the monogram button covers booking, but visitors still need a way to
       actually jump to these sections without blind-scrolling to find them. */
    /* header's flex-start + logo auto-margin is now set at the base rule above and applies here
       too — no override needed at this breakpoint. */
    /* the standalone globe/EN pill disappears entirely below 900px — its job is taken over by the
       language buttons living inside the hamburger dropdown instead (.nav-lang-group below). This
       also fixes a real bug: the pill used to vanish for good once you scrolled past the hero
       (header.scrolled hid it) with no way back short of scrolling all the way back to the top.
       Living inside the menu means it's reachable from anywhere on the page, at any scroll
       position, exactly like Villas/Reviews/Island already are. */
    .lang-switch { display:none; }
    .nav-toggle { display:flex; }
    header nav a { display:none; }
    header nav { gap:0; }
    /* option 2 from the dropdown-style review: frosted glass, matching the Menu pill's own
       treatment (same backdrop-filter blur language) rather than a flat navy or white panel.
       Anchored under the logo specifically (left offset matches header's own left padding at
       this breakpoint) instead of stretching full-width edge to edge — width:auto so it only
       takes up as much room as the longest link needs. */
    header nav.mobile-open {
      position:absolute; top:calc(100% + 6px); left:24px; right:auto; width:auto; min-width:180px;
      background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
      border:1px solid rgba(28,43,69,0.12); border-radius:0 14px 14px 14px;
      box-shadow:0 10px 24px rgba(35,24,14,0.16);
      padding:10px 18px; flex-direction:column; align-items:flex-start; gap:2px;
    }
    /* the base "header nav a" rule (further up) sets margin:-14px -8px as a desktop-only trick to
       enlarge the hover hitbox without affecting layout — that negative margin was never reset
       here, so every link in this dropdown was being pulled inward/overlapping its neighbors
       (the "compressed sandwich" look). margin:0 restores real spacing. */
    header nav.mobile-open a { display:block; color:var(--espresso) !important; opacity:1; margin:0; padding:11px 0; width:100%; border-bottom:1px solid rgba(28,43,69,0.12); font-size:14px; }
    header nav.mobile-open a:last-of-type { border-bottom:none; }
    /* the language switcher inside the mobile menu — collapsed by default to a single compact
       row (globe icon + current language code + chevron), matching the same globe+code pattern
       the desktop pill already uses, rather than dumping all 7 language names in full straight
       into the menu. Tapping it expands the actual list below, in a 2-column grid so it doesn't
       turn a short menu into a long scroll on small phones. */
    header nav.mobile-open .nav-lang-group { display:block; width:100%; margin-top:6px; padding-top:8px; border-top:1px solid rgba(28,43,69,0.12); }
    header nav.mobile-open .nav-lang-toggle {
      all:unset; box-sizing:border-box; display:flex; align-items:center; gap:8px; cursor:pointer;
      color:var(--espresso); opacity:0.9; font-size:14px; font-weight:700; padding:4px 0; width:100%;
    }
    header nav.mobile-open .nav-lang-toggle .lang-chevron { margin-left:auto; transition:transform 0.2s ease; opacity:0.6; }
    header nav.mobile-open .nav-lang-group.open .nav-lang-toggle .lang-chevron { transform:rotate(180deg); }
    header nav.mobile-open .nav-lang-list {
      display:none; grid-template-columns:1fr 1fr; gap:2px 14px; margin-top:8px;
    }
    header nav.mobile-open .nav-lang-group.open .nav-lang-list { display:grid; }
    header nav.mobile-open .nav-lang-list button {
      all:unset; box-sizing:border-box; cursor:pointer; color:var(--espresso); opacity:0.85;
      font-size:13px; padding:7px 0;
    }
    .hero-content { padding:0 6vw 14vh; }
    .hero-content h1 { max-width:340px; }
    .exp-grid { grid-template-columns:1fr 1fr; }
    .villas-compare { grid-template-columns:1fr; gap:20px; }
  }

  @media (max-width: 640px) {
    .wrap { padding:0 20px; }
    section { padding:64px 0; }
    header { padding:16px 76px 16px 20px; }
    /* with the lang pill now gone at this width (moved into the menu above), the logo has the
       header pretty much to itself next to the Menu button — but "Romanza Luxury Villas" at the
       desktop 26px size still wrapped to 2-3 lines on narrow phones, cramped right up against the
       Menu button. Dropping to 19px keeps it on one line on every phone we need to support. */
    header .logo { font-size:19px; white-space:nowrap; }
    header.scrolled .logo { font-size:18px; }
    header nav.mobile-open { left:20px; }
    .monogram-wrap { right:20px; }
    /* on mobile the note moves into the panel itself (.direct-book-note-inline, under the submit
       button) rather than the floating fixed spot — hide the fixed version entirely here so it
       never shows in both places at once */
    .direct-book-note { display:none; }
    .direct-book-note-inline { display:block; font-weight:700; opacity:0.9; }
    .monogram-btn { width:52px; height:52px; }
    .monogram-caption { font-size:10px; }
    .hero { min-height:560px; }
    .hero-content { padding:0 6vw 10vh; }
    .hero-content .kicker { font-size:10.5px; letter-spacing:0.24em; }
    .hero-content h1 { font-size:clamp(22px, 6.5vw, 30px); max-width:280px; }
    .hero-hint { display:none; } /* redundant with the caption under the monogram button at this width */
    .section-head h2 { font-size:23px; }
    .reviews-strip { gap:28px; }
    .reviews-strip .stat b { font-size:26px; }
    .exp-grid, .explore-grid { grid-template-columns:1fr; }
    .exp-card { height:280px; }
    .villas-compare { grid-template-columns:1fr; gap:14px; }
    /* villa cards used to switch to a plain-box horizontal split on phones (photo left, info
       right) since an arch didn't read right on a sideways card — but that made them the one
       card style on the whole site that goes flat on mobile while review-card and exp-card stay
       arched at every width. Reverted so villa cards stay the same stacked/arched shape as those,
       consistent everywhere rather than a special case here. */
    .villa-compare-card h3 { font-size:15px; margin-bottom:5px; }
    .villa-compare-card .specs { font-size:11.5px; margin-bottom:8px; }
    .avail-card { padding:18px 18px; max-height:94vh; overflow-y:auto; }
    .avail-quote { font-size:14px; }
    .row2 { grid-template-columns:1fr !important; }
    .avail-card .row2 { grid-template-columns:1fr; gap:10px; }
  }