/* ============================================================
   BUNDLE.CSS — all stylesheets combined into one file.

   Why: PageSpeed's own network trace showed 14-19 separate CSS
   requests per page, each costing 190-570ms individually under
   throttled mobile conditions — almost entirely per-request
   overhead, not actual transfer time (each file is only 1-3KB).
   One combined request eliminates that overhead sitewide.

   This is the union of every page-specific stylesheet, so every
   page loads slightly more CSS than it strictly needs — but the
   combined total is still small in absolute terms, and one request
   beats eighteen by a wide margin under real mobile network
   conditions. Individual source files are kept in the repo/zip
   for future editing; this file is regenerated from them, not
   hand-maintained separately.

   Order matters (CSS cascade) — matches the original per-page
   <link> order: shared foundation first, then each page's own
   styles, footer/floating-cta last. There's no actual selector
   overlap between page-specific files (hero.css, contact.css,
   apartment-detail.css, etc. all use fully distinct class
   prefixes), so combining them here doesn't change how any of
   them render.
   ============================================================ */

/* ---------- fonts.css ---------- */
/* ---------- SELF-HOSTED FONTS ----------
   Previously loaded from Google's CDN (fonts.googleapis.com +
   fonts.gstatic.com), which cost two external DNS lookups/connections
   before a single font byte could arrive, plus a render-blocking (or,
   after an earlier fix, async-but-still-external) stylesheet request.

   These are the exact same font files Google Fonts serves — pulled
   directly from Google's own open-source font repository — just
   hosted alongside the rest of the site and subsetted to the Latin
   characters this site actually uses (English + the Albanian ë/ç
   used throughout, plus the punctuation/currency symbols in the
   copy). That subsetting is most of why these are so much smaller
   than the originals: Inter's full file covers dozens of scripts
   this site never uses.

   Both are variable fonts — one file each covers the entire weight
   range (300–700) rather than needing a separate file per weight,
   which is what the old Google Fonts URL was requesting under the
   hood (four separate Inter weights, five Fraunces instances). */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'),
       url('../fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Variable.woff2') format('woff2-variations'),
       url('../fonts/Fraunces-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2-variations'),
       url('../fonts/Fraunces-Italic-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- variables.css ---------- */
:root{
  --navy:#16303F;
  --navy-deep:#0F252F;
  --aegean:#3E7C97;
  --aegean-light:#8FB8C7;
  --sand:#ECE1CC;
  --whitewash:#FBF8F3;
  --terracotta:#C2703D;
  /* Same hue as --terracotta, darkened for text use. The base
     terracotta fails WCAG AA contrast (4.5:1) as text color on the
     site's light backgrounds (whitewash/sand/white) — it's fine as a
     button background or accent since it's paired with white text or
     sits against navy there, just not as text-on-light itself. Use
     this variant anywhere terracotta is the text/icon color rather
     than the background. */
  --terracotta-text:#884E2B;
  --error:#A6372E;
  --ink:#1C2B2F;
  --ink-soft:#4C5F63;
  --line:rgba(22,48,63,0.12);
  --serif:'Fraunces', serif;
  --sans:'Inter', sans-serif;

  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- base.css ---------- */
*{margin:0;padding:0;box-sizing:border-box;}
*{
  /* Kills the mobile browser default of flashing a translucent blue
     box over anything tappable (links, buttons, summary elements —
     including the FAQ questions). Not a bug, just an unstyled
     browser default; the site already has its own considered hover/
     active states, so this default only ever gets in the way. */
  -webkit-tap-highlight-color:transparent;
}
html{
  scroll-behavior:smooth;overflow-x:hidden;width:100%;
  /* Matches the footer (the last thing on every page) so iOS's
     elastic overscroll bounce past the bottom reveals navy instead
     of the browser's default white canvas. html sits behind body,
     so this is what shows through during the bounce, not body's own
     (lighter) background. */
  background:var(--navy-deep);
  /* Stops fast/double taps from being misread as a "double-tap to
     zoom" gesture (the actual cause of the site randomly zooming in
     when tapping quickly — not a phone issue). Pinch-zoom stays
     fully available; only the double-tap gesture specifically is
     disabled, which is the standard, accessibility-safe way to do
     this (unlike disabling zoom outright via the viewport tag). */
  touch-action:manipulation;
}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--whitewash);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
  width:100%;
}
img,svg{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* focus visibility, kept crisp even with all the motion below */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--terracotta);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed;top:-60px;left:16px;z-index:1000;
  background:var(--navy);color:#fff;
  padding:12px 20px;border-radius:2px;
  font-size:13px;font-weight:600;letter-spacing:0.04em;
  transition:top .25s ease;
}
.skip-link:focus{top:16px;}

.eyebrow{
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--terracotta-text);
}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;}
/* keeps a hyphenated token (e.g. "3-Bedroom") from splitting across
   lines — the break would otherwise land mid-word after the hyphen */
.nowrap{white-space:nowrap;}
.wrap{max-width:1280px;margin:0 auto;padding:0 40px;}
@media(max-width:640px){.wrap{padding:0 22px;}}

.section-head{max-width:640px;margin:0 auto 0;text-align:center;padding:0 20px;}
.section-head h2{font-size:clamp(28px,4vw,44px);margin-top:14px;}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:16px;line-height:1.6;}

/* placeholder photo generator */
.ph{background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.ph-icon{opacity:0.5;}

/* ---------- GRAIN / DEPTH LAYER ----------
   A fixed, whole-page film-grain overlay. Very low opacity, blend-mode
   overlay so it reads as texture rather than noise. Kills the "sterile"
   flatness without adding visible decoration. */
.grain-overlay{
  position:fixed;inset:0;z-index:999;pointer-events:none;
  opacity:0.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* ---------- CUSTOM SCROLLBAR ----------
   Slim, rounded, in the site's ink color. Track stays transparent
   so only the thumb reads — a quiet detail, not a UI element. The
   faint light inner edge keeps the thumb visible when it passes
   over the navy sections. */
html{
  scrollbar-width:thin;               /* Firefox */
  scrollbar-color:var(--ink) var(--whitewash);
}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-track{background:var(--whitewash);}
::-webkit-scrollbar-thumb{
  background-color:var(--ink);
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(251,248,243,0.18);
  transition:background-color .28s ease;
}
::-webkit-scrollbar-thumb:hover{background-color:#10191C;}
::-webkit-scrollbar-button{display:none;height:0;}

/* ---------- animations.css ---------- */
/* ---------- SCROLL REVEAL ----------
   Elements start in a hidden state defined by their data-reveal
   direction, then transition to natural position once scroll-reveal.js
   adds .is-visible (via IntersectionObserver). Images and their
   accompanying text use staggered delays so text settles in just
   after the image, rather than everything popping in at once. */

[data-reveal]{
  opacity:0;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay:var(--reveal-delay, 0ms);
  will-change:transform, opacity;
}
[data-reveal="up"]{transform:translateY(36px);}
[data-reveal="left"]{transform:translateX(-46px);}
[data-reveal="right"]{transform:translateX(46px);}
[data-reveal="scale"]{transform:scale(.94);}
[data-reveal].is-visible{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{transition:none;opacity:1;transform:none;}
}

/* ---------- PARALLAX ----------
   Applied via inline transform by scroll-reveal.js's parallax pass.
   The CSS just needs to make sure the transform has somewhere calm
   to live (no layout shift, GPU-friendly). */
[data-parallax]{
  will-change:transform;
}

/* ---------- header.css ---------- */
header.site{
  position:fixed;top:0;left:0;right:0;z-index:250;
  padding:28px 0;
  transition:background .5s var(--ease-soft), padding .5s var(--ease-soft), box-shadow .5s var(--ease-soft);
}
header.site .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(8px, 3vw, 20px);
}
/* header padding shrinks earlier and further than the shared .wrap
   rule (base.css) — the header is the tightest-fit row on the page,
   so it needs its own smaller floor on narrow phones */
@media(max-width:640px){
  header.site .wrap{padding:0 16px;}
}
@media(max-width:360px){
  header.site .wrap{padding:0 12px;}
}
header.site.scrolled{
  background:rgba(251,248,243,0.74);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  padding:15px 0;
  box-shadow:0 1px 0 var(--line), 0 12px 30px -20px rgba(15,37,47,0.35);
}

/* centered wordmark: icon stacked above the text, both scaling and
   recoloring together as one unit when the header goes into its
   scrolled (frosted, light) state. */
.logo{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  overflow:hidden;
  color:#fff;
  transition:color .5s var(--ease-soft), transform .5s var(--ease-soft), opacity .3s ease;
  transform-origin:center;
}
.logo-text{
  font-family:var(--serif);
  font-size:clamp(9.5px, 3vw, 13px);
  letter-spacing:clamp(0.03em, 1.2vw, 0.14em);
  text-transform:uppercase;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  max-width:100%;
}
.logo-text span{white-space:nowrap;}
.logo-text span + span::before{content:" ";}
.logo:hover{opacity:0.82;}
header.site.scrolled .logo{color:var(--navy);transform:scale(0.92);}

.logo-mark{
  flex:0 0 auto;
  width:19px;height:19px;
  color:inherit; /* rides along with .logo's own white/navy transition above */
}

/* ---------- MOBILE HEADER ----------
   Below 640px the wordmark is replaced entirely by the balcony-arch
   mark — no text at all, just the icon, sized to sit comfortably in
   the header row. The link keeps an aria-label so it still has an
   accessible name for screen readers despite the visible content
   being purely a decorative icon. */
@media(max-width:640px){
  .logo{
    flex:0 0 auto;
  }
  .logo-mark{width:34px;height:34px;}
  .logo-text{display:none;}
}
@media(max-width:520px){
  .menu-toggle .label{display:none;}
}

.btn-reserve{
  flex:0 0 auto;
  white-space:nowrap;
  min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:clamp(8px, 2.4vw, 11px) clamp(10px, 3.5vw, 22px);
  border:1px solid rgba(255,255,255,0.55);
  border-radius:2px;
  font-size:clamp(9.5px, 2.6vw, 12.5px);letter-spacing:0.06em;text-transform:uppercase;font-weight:600;
  color:#fff;
  transition:border-color .35s ease, color .35s ease, background .35s ease;
}
header.site.scrolled .btn-reserve{border-color:var(--navy);color:var(--navy);}
.btn-reserve:hover{background:rgba(255,255,255,0.12);border-color:#F1D9A8;color:#F1D9A8;}
header.site.scrolled .btn-reserve:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

/* ---------- MENU TRIGGER ----------
   A quiet text label rather than an icon-heavy hamburger — reads as
   editorial signage ("☰ MENU") rather than an app affordance. It is
   the single entry point to navigation at every breakpoint. */
.menu-toggle{
  flex:0 0 auto;
  min-width:0;
  display:flex;align-items:center;gap:9px;
  padding:15px 4px; /* larger touch target without changing visual size */
  margin:-15px 0;
  font-size:clamp(11px, 2.8vw, 12.5px);letter-spacing:0.08em;text-transform:uppercase;font-weight:600;
  color:#fff;
  transition:color .5s var(--ease-soft), opacity .3s ease;
}
.menu-toggle:hover{opacity:0.75;}
.menu-toggle:hover .glyph{color:#F1D9A8;}
.menu-toggle .glyph{font-size:15px;line-height:1;transition:transform .5s var(--ease-out), color .3s ease;}
.menu-toggle .label{position:relative;display:inline-block;}
.menu-toggle .label .close-text{
  position:absolute;left:0;top:0;opacity:0;transform:translateY(6px);
  transition:opacity .35s ease, transform .35s ease;
}
.menu-toggle .label .open-text{transition:opacity .35s ease, transform .35s ease;}
.menu-toggle.open .label .open-text{opacity:0;transform:translateY(-6px);}
.menu-toggle.open .label .close-text{opacity:1;transform:translateY(0);}
.menu-toggle.open .glyph{transform:rotate(90deg);}
header.site.scrolled .menu-toggle{color:var(--navy);}
/* while the fullscreen panel is open, the trigger sits above it and
   should stay white regardless of scroll state */
.menu-toggle.open{color:#fff !important;}

/* ---------- MOBILE OPEN-MENU HEADER ----------
   While the fullscreen menu is open on mobile only: Reserve hides
   too, leaving CLOSE alone on the left (the logo is already removed
   on mobile by the rule above, in both open and closed states).
   visibility:hidden (not display:none) is deliberate: it removes
   Reserve from view and interaction but keeps its layout box, so
   the header row's height doesn't collapse and re-center Menu/Close
   at a different vertical position when Reserve disappears — that
   was the actual cause of the Menu→Close jump. Desktop keeps the
   normal three-part layout. */
@media(max-width:640px){
  .menu-toggle.open ~ .btn-reserve{visibility:hidden;}
}

/* ---------- FULLSCREEN MENU PANEL ---------- */
.mobile-menu{
  position:fixed;inset:0;z-index:200;
  background:var(--navy-deep);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
  padding-left:clamp(40px,10vw,160px);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease-out), visibility .6s;
}
.mobile-menu.open{opacity:1;visibility:visible;}
.mobile-menu a{
  position:relative;
  font-family:var(--serif);font-style:italic;font-size:clamp(30px,5vw,52px);color:#fff;
  opacity:0;transform:translateX(-22px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), color .3s ease;
}
/* thin underline that grows in on hover — a quiet, editorial cue
   rather than a color jump alone */
.mobile-menu a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;
  background:#F1D9A8;transition:right .45s var(--ease-out);
}
.mobile-menu a:hover,.mobile-menu a.active{color:#F1D9A8;}
.mobile-menu a:hover::after,.mobile-menu a.active::after{right:0;}
.mobile-menu.open a{opacity:1;transform:none;}
.mobile-menu.open a:nth-child(1){transition-delay:.1s;}
.mobile-menu.open a:nth-child(2){transition-delay:.17s;}
.mobile-menu.open a:nth-child(3){transition-delay:.24s;}
.mobile-menu.open a:nth-child(4){transition-delay:.31s;}
.mobile-menu.open a:nth-child(5){transition-delay:.38s;}


/* ---------- hero.css ---------- */
.hero {
    position: relative;
    height: 100vh;
    min-height: 640px;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    overflow: hidden;

    /* lighter haze than before — the dark gradient is here only to
       keep the headline readable, not to veil the photograph */
    background:
        linear-gradient(
            180deg,
            rgba(15, 37, 47, 0.13) 0%,
            rgba(15, 37, 47, 0.02) 38%,
            rgba(15, 37, 47, 0.3) 100%
        ),
        url("../images/hero.webp");

    /* cover (rather than a fixed %) keeps the framing — sea, mountains,
       horizon — consistent across desktop widths instead of zooming a
       different amount at every viewport size */
    background-size: cover;
    background-position: center 62%;
    background-repeat: no-repeat;
}

/* ---------- MOBILE CROP ----------
   On narrow/portrait screens a width-based background-size leaves
   the image shorter than the viewport, which — combined with the
   default repeat — was tiling the photo. Switch to `cover` so a
   cropped portion of the same image fills the full screen exactly
   once, and use small-viewport units so mobile browser chrome
   (address bar showing/hiding) doesn't leave a gap at the bottom. */
@media (max-width: 640px) {
    .hero {
        height: 100vh;
        height: 100svh;
        min-height: 560px;
        /* Smaller source image for mobile — same photo, downscaled
           and re-compressed (780px wide vs. the desktop 1200px),
           since a phone screen never benefits from the extra
           resolution but pays for it in load time. This is the
           page's LCP element, so its file size directly affects
           the mobile PageSpeed score. */
        background-image:
            linear-gradient(
                180deg,
                rgba(15, 37, 47, 0.13) 0%,
                rgba(15, 37, 47, 0.02) 38%,
                rgba(15, 37, 47, 0.3) 100%
            ),
            url("../images/hero-mobile.webp");
        background-size: cover;
        background-position: center 68%;
        background-repeat: no-repeat;
    }
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;

    /* quiet warm glow, low corner — echoes the gold accent used
       throughout the site so the hero stays tied to the rest of the
       page. Pulled back further than before so the water and
       mountains keep their real color. */
    background-image:
        radial-gradient(ellipse at 72% 88%, rgba(255, 244, 220, 0.09), transparent 58%),
        radial-gradient(ellipse at 50% 100%, rgba(15, 37, 47, 0.18), transparent 60%);

    mix-blend-mode: screen;
}

/* a small, localized dark pool behind the headline only — legibility
   help that's targeted rather than a haze laid over the whole photo */
.hero-content::before{
    content:"";
    position:absolute;
    left:50%;top:50%;
    width:min(720px, 90vw);height:340px;
    transform:translate(-50%,-50%);
    background:radial-gradient(ellipse, rgba(15,37,47,0.22), transparent 72%);
    z-index:-1;
    pointer-events:none;
}

.hero-depth {
    display: none;
}

.hero-waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;

    width: 100%;
    height: 90px;

    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 0 24px;
}

/* ---------- QUIET LOAD-IN ----------
   The hero is above the fold, so scroll-reveal.js never sees it.
   A one-time, gently staggered rise on page load instead — slow and
   deliberate, not a "landing page" pop-in. */
.hero-content h1,
.hero-content p,
.hero-content .btn-explore {
    opacity: 0;
    animation: heroRise 1.1s var(--ease-out) forwards;
}
/* The headline settles almost immediately now — no delay, a shorter
   0.6s duration — specifically because it's the page's actual LCP
   candidate. Leaving it mid-animation for over a second (the old
   0.15s delay + 1.1s duration) meant the browser couldn't confidently
   settle on it as "done painting" quickly, and PageSpeed traces
   showed it falling back to a much smaller, always-present element
   (the scroll cue below) as the reported LCP instead — worth far
   more than the subtle staggered-rise effect cost here. */
.hero-content h1{ animation-duration: .6s; animation-delay: 0s; }
.hero-content p{ animation-delay: .25s; }
.hero-content .btn-explore{ animation-delay: .45s; }

@keyframes heroRise {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-content h1,
    .hero-content p,
    .hero-content .btn-explore {
        animation: none;
        opacity: 1;
    }
}

.hero-content h1 {
    font-size: clamp(40px, 7vw, 84px);
    font-weight: 400;
    font-style: italic;
    letter-spacing: -0.01em;
    /* slightly stronger than before, to compensate for the lighter
       overlay and keep contrast against a brighter sky */
    text-shadow: 0 2px 34px rgba(0, 0, 0, 0.32);
}

.hero-content p {
    margin-top: 24px;
    font-size: clamp(15px, 1.8vw, 19px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.92);
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    text-shadow: 0 1px 16px rgba(0, 0, 0, 0.22);
}

/* ---------- CTA ----------
   Warm frosted glass instead of a flat white block — reads as part
   of the Mediterranean light rather than a UI element dropped on
   top of the photo. */
.btn-explore {
    display: inline-block;

    margin-top: 44px;

    padding: 18px 40px;

    background: rgba(251, 248, 243, 0.82);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: var(--navy);

    border-radius: 999px;

    font-size: 12.5px;
    font-weight: 700;

    letter-spacing: 0.15em;
    text-transform: uppercase;

    transition:
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;

    box-shadow: 0 6px 22px rgba(15, 37, 47, 0.16);
}
.btn-explore:hover {
    background: rgba(241, 217, 168, 0.88);
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 26px rgba(15, 37, 47, 0.2);
}
.btn-explore:active {
    background: rgba(241, 217, 168, 0.95);
}

@media (max-width: 640px) {
    .hero-content p { padding: 0 6px; }
    .btn-explore { padding: 16px 32px; margin-top: 36px; }
}

/* ---------- SCROLL CUE ----------
   Small, editorial, bottom-right. A slow breathing fade rather than
   a bounce — a whisper that there's more below, not a nudge. */
.hero-scroll-cue{
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* Delayed start (not just a longer duration) — this animation
       runs forever, so during the page's first couple seconds (when
       LCP is actually being measured) it was one of the only things
       with a continuously-changing opacity, which is very likely why
       PageSpeed traces reported this small decorative element as the
       page's LCP candidate instead of the actual headline. Holding
       off until 2s in means it's out of the way for that measurement
       window entirely, without losing the breathing effect itself. */
    animation: scrollCueBreathe 3.2s ease-in-out 2s infinite;
    pointer-events: none;
}
.hero-scroll-cue .line{
    width: 1px;
    height: 30px;
    background: rgba(255, 255, 255, 0.4);
}
@keyframes scrollCueBreathe{
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.8; }
}
@media (max-width: 640px){
    .hero-scroll-cue{ right: 22px; bottom: 26px; }
    .hero-scroll-cue .line{ height: 22px; }
}
@media (prefers-reduced-motion: reduce){
    .hero-scroll-cue{ animation: none; opacity: 0.55; }
}
/* ---------- trust.css ---------- */
.trust{
  background:var(--navy);color:#fff;
  padding:96px 0 66px;
  position:relative;
  overflow:hidden;
}
/* a quiet warm glow at the top, tying the section back to the hero's
   golden-hour light rather than starting cold and corporate */
.trust::before{
  content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:640px;height:340px;
  background:radial-gradient(ellipse, rgba(241,217,168,0.10), transparent 70%);
  pointer-events:none;
}

.stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  text-align:center;position:relative;
  max-width:640px;margin:0 auto;
}
@media(max-width:640px){.stats-grid{grid-template-columns:1fr;row-gap:36px;max-width:320px;}}

.stat{position:relative;}

.stat-num{
  font-family:var(--serif);
  font-size:clamp(32px,3.6vw,50px);
  font-weight:500;
  color:#F1D9A8;
  letter-spacing:-0.01em;
  line-height:1;
}
.stat-label{
  margin-top:11px;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.5);
}

.marquee-wrap{
  margin-top:38px;padding-top:28px;border-top:1px solid rgba(255,255,255,0.12);
  overflow:hidden;white-space:nowrap;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{display:inline-flex;gap:0;animation:scrollmq 52s linear infinite;}
.marquee-track span{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:19px;color:rgba(255,255,255,0.5);
  padding:0 28px;white-space:nowrap;
}
.marquee-track span::after{content:"·";margin-left:28px;color:var(--terracotta);font-style:normal;}
@keyframes scrollmq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none;}}
/* ---------- apartments.css ---------- */
.apartments {
    padding: 140px 0 50px;
    overflow: hidden;
}

.apt-row {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 0;
    margin-top: 224px;
}

.apt-row.reverse {
    grid-template-columns: 0.85fr 1.15fr;
}

.apt-row.reverse .apt-media {
    order: 2;
}

.apt-row.reverse .apt-info {
    order: 1;
}

@media (max-width: 860px) {
    .apt-row,
    .apt-row.reverse {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 96px;
    }

    .apt-row.reverse .apt-media {
        order: 1;
    }

    .apt-row.reverse .apt-info {
        order: 2;
    }
}

.apt-media {
    position: relative;

    width: 100%;
    aspect-ratio: 3 / 2;

    border-radius: 18px;
    overflow: hidden;
      box-shadow: 0 22px 70px -34px rgba(15, 37, 47, 0.2);

    max-width: 540px;

    margin-right: auto;
}

.apt-row.reverse .apt-media {
    margin-right: 0;
    margin-left: auto;
}

@media (max-width: 860px) {
    .apt-media {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }
}

.apt-media .ph {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition: transform 650ms var(--ease-soft);
}

/* zoom only on devices with a real pointer — prevents the "sticky
   hover" glitch on touch screens, where a tap would freeze the
   image in its zoomed state */
@media (hover: hover) {
    .apt-media:hover .ph{
        transform: scale(1.03);
    }
}
@media (prefers-reduced-motion: reduce){
    .apt-media:hover .ph{ transform:none; }
}

.apt-info {
    padding: 0 60px;
    position: relative;
    z-index: 2;
}

@media (max-width: 860px) {
    .apt-info,
    .apt-row.reverse .apt-info {
        padding: 0;
    }
}

.apt-ghost {
    position: absolute;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(120px, 16vw, 220px);
    color: var(--navy);
    opacity: 0.045;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 860px) {
    .apt-ghost {
        display: none;
    }
}

.apt-index {
    font-family: var(--serif);
    font-style: italic;
    font-size: 15px;
    color: var(--terracotta);
    margin-bottom: 16px;
    display: block;
}

.apt-info h3 {
    font-size: clamp(27px, 3.1vw, 38px);
    letter-spacing: -0.01em;
}

.apt-type {
    display: block;
    margin-top: 9px;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 500;
}

.apt-info p.desc {
    margin-top: 20px;
    color: var(--ink-soft);
    line-height: 1.75;
    font-size: 15.5px;
    max-width: 390px;
}

/* spec-sheet rhythm: a thin hairline separates the description from
   the guest/bed/bath figures, so the numbers read as a considered
   detail rather than dashboard stats */
.apt-meta {
    display: flex;
    gap: 48px;
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    max-width: 390px;
}

.apt-meta-item {
    position: relative;
    font-size: 11.5px;
    color: rgba(76, 95, 99, 0.6);
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* thin single-stroke line icons — deliberately faint, a quiet label
   above the number rather than a competing element */
.apt-meta-icon {
    width: 16.5px;
    height: 16.5px;
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.5;
    margin-bottom: 11px;
    display: block;
}

.apt-meta strong {
    display: block;
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1;
    color: var(--navy);
    font-weight: 500;
    margin-bottom: 5px;
}

/* hairline dividers between items — centered in the 48px gap,
   centered vertically against the item. Delete this one rule to
   remove them entirely. */
.apt-meta-item + .apt-meta-item::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 21px;
    background: rgba(22, 48, 63, 0.08);
}
.apt-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 34px;
    font-size: 12.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--navy);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--navy);
    transition: color 0.3s ease, border-color 0.3s ease;
}

/* only the arrow moves — a quiet 4px glide, no bounce */
.apt-link .arrow {
    display: inline-block;
    transition: transform 300ms var(--ease-soft);
    will-change: transform;
}

.apt-link:hover,
.apt-link:focus-visible {
    color: var(--terracotta);
    border-color: var(--terracotta);
}

.apt-link:hover .arrow,
.apt-link:focus-visible .arrow {
    transform: translateX(4px);
}

/* Apartment 01 — the flagship. Larger frame, more air above and
   below, a slightly bolder ghost number. No badge, no label. */

.apt-row.apt--01{
    margin-top: 250px;
    padding-bottom: 36px;
}

.apt--01 .apt-media {
    max-width: 620px;
}

.apt--01 .apt-ghost {
    top: -74px;
    left: -10px;
    opacity: 0.065;
    font-size: clamp(130px, 17vw, 236px);
}

.apt--01 .apt-info {
    margin-top: 40px;
}

@media (max-width: 860px){
    .apt-row.apt--01{ margin-top: 96px; padding-bottom: 0; }
}

/* Apartment 02 */

.apt--02 .apt-ghost {
    bottom: -60px;
    right: 10px;
}

/* Apartment 03 */

.apt--03 .apt-ghost {
    top: -50px;
    left: 0;
}

/* Apartment 04 */

.apt--04 .apt-ghost {
    top: -90px;
    right: 0;
}

/* Apartment 05 */

.apt--05 .apt-ghost {
    bottom: -40px;
    right: -10px;
}

/* ---------- reviews.css ---------- */
.reviews{background:var(--sand);padding:130px 0;position:relative;}
.review-ratings{display:flex;justify-content:center;align-items:stretch;gap:28px;margin-top:38px;flex-wrap:wrap;}

/* ---------- BRAND RATING BADGES ---------- */
.rating-badge{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border-radius:10px;
  padding:14px 20px;
  box-shadow:0 12px 30px -18px rgba(15,37,47,0.35);
  transition:transform .3s var(--ease-soft), box-shadow .3s ease;
  font-family:var(--sans);
}

.rating-badge:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px -16px rgba(15,37,47,0.4);
}

.rb-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-align:left;
}

.rb-brand{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.02em;
}

.rb-score{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
}

.rb-sub{
  font-size:11.5px;
  font-weight:400;
  color:var(--ink-soft);
}

/* ---------- AIRBNB ---------- */

.rating-badge--airbnb{
  gap:10px;
}

.rb-logo{
  flex-shrink:0;
  width:34px;
  height:34px;
  display:block;
  transform:translateY(-1px);
}

.rating-badge--airbnb .rb-text{
  gap:1px;
}

.rating-badge--airbnb .rb-brand{
  color:var(--ink);
  text-transform:none;
  font-family:var(--sans);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.01em;
}

.rating-badge--airbnb .rb-score{
  color:var(--ink);
}

.rb-stars{
  color:var(--terracotta-text);
  letter-spacing:1px;
  font-size:12px;
  margin-right:2px;
}

/* ---------- BOOKING ---------- */

.rb-square{
  flex-shrink:0;
  width:38px;
  height:38px;
  background:#003580;
  color:#fff;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:15px;
}

.rating-badge--booking .rb-brand{
  color:#003580;
}

.rating-badge--booking .rb-score{
  color:#003580;
}

@media(max-width:520px){
  .rating-badge{
    padding:12px 16px;
    gap:11px;
  }

  .rating-badge--airbnb{
    gap:9px;
  }

  .rb-logo{
    width:30px;
    height:30px;
    transform:none;
  }

  .rb-sub{
    display:none;
  }
}

/* ---------- EDITORIAL REVIEW CAROUSEL ---------- */

.review-stage{
  display:flex;
  align-items:center;
  gap:18px;        /* arrows sit closer to the reviews */
  margin-top:48px; /* ~37% less dead space under the rating badges */
}

.review-track-wrapper{
  overflow:hidden;
  flex:1;
}

.review-track{
  display:flex;
  gap:44px;
  transition:transform .7s var(--ease-soft);
  will-change:transform;
  touch-action:pan-y;
  cursor:grab;
}

.review-track.dragging{
  cursor:grabbing;
  transition:none;
}

.review-card{
  flex:0 0 calc((100% - 88px) / 3);
  position:relative;
  padding:8px 6px 0;
  transition:transform 400ms var(--ease-soft);
  display:flex;
  flex-direction:column;
  cursor:default; /* overrides the track's grab cursor — cards aren't draggable individually */
}

/* understated lift — pointer devices only, so a tap doesn't leave the
   card stuck in its hovered state on touch screens */
@media (hover:hover){
  .review-card:hover{transform:translateY(-4px);}
}

.quote{
  font-family:var(--serif);
  font-weight:400;
  font-size:18px;
  line-height:1.75;
  color:var(--ink);
  /* caps the measure when a card goes full-width (1-per-view), so the
     line length stays comfortable instead of running edge to edge */
  max-width:480px;
  min-height:150px;
  flex:1 0 auto; /* fills remaining height so the byline below lands at the same position on every card in a row */
}

.review-byline{
  margin-top:32px;
  padding-top:22px;
  border-top:1px solid rgba(22,48,63,0.14);
  display:flex;
  align-items:baseline;
  gap:6px;
}

.review-name{
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:0.01em;
}

.review-country{
  font-size:12px;
  color:rgba(76,95,99,0.95);
}
.review-country::before{
  content:"·";
  margin-right:6px;
  color:rgba(76,95,99,0.7);
}

.review-arrow{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border:1.5px solid rgba(22,48,63,0.45); /* bolder outline, but diameter stays the same so the row doesn't stretch */
  border-radius:50%;
  background:transparent;
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.review-arrow svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}

.review-arrow:hover{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}

.carousel-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:44px;
}

.carousel-dot{
  box-sizing:content-box; /* overrides the sitewide border-box default —
    with border-box, padding this large would shrink the 5px dot to
    zero instead of expanding the tap area around it */
  width:5px;
  height:5px;
  padding:9.5px; /* invisible tap area only — pads the real 5px dot up to the 24px minimum target size without changing how it looks */
  background-clip:content-box;
  border-radius:50%;
  background-color:rgba(22,48,63,0.18);
  transition:background-color .3s ease, transform .3s ease;
}

.carousel-dot.active{
  background-color:var(--terracotta);
  transform:scale(1.3);
}

.carousel-progress{
  display:none; /* only shown on mobile, in place of the dot strip — see below */
  width:120px;
  height:3px;
  margin:44px auto 0;
  background:rgba(22,48,63,0.12);
  border-radius:3px;
  overflow:hidden;
}
.carousel-progress-fill{
  height:100%;
  width:0%;
  background:var(--terracotta);
  border-radius:3px;
  transition:width .5s var(--ease-soft);
}

@media (max-width:950px){
  .review-card{
    flex:0 0 calc((100% - 44px) / 2);
  }
}

@media (max-width:700px){
  .review-stage{
    gap:10px;
    margin-top:36px; /* matches the ~37% reduction used on desktop */
  }

  .review-card{
    flex:0 0 100%;
  }

  /* Arrows stay visible on mobile alongside swipe — with 30 reviews,
     relying on swipe alone (plus a 30-dot strip) was the actual
     complaint this replaces. Sized up slightly from desktop's 40px
     to comfortably clear the 44px touch-target guideline. */
  .review-arrow{
    width:44px;
    height:44px;
  }
  .review-arrow svg{
    width:16px;height:16px;
  }

  .carousel-dots{
    display:none;
  }

  .carousel-progress{
    display:block;
  }

  .quote{
    font-size:17px;
    min-height:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .review-track{
    transition:none;
  }

  .review-card{
    transition:none;
  }

  .review-card:hover{
    transform:none;
  }
}
/* ---------- area.css ---------- */
.area{padding:130px 0;}

/* three equal, modest cards — supporting visual accents beneath the
   section copy rather than a dominating spread. The grid is capped
   narrower than the page wrap so the images stay quiet. */
.area-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin:64px auto 0;
  max-width:1080px;
}
.area-card{
  position:relative;overflow:hidden;border-radius:2px;
  box-shadow:0 20px 44px -28px rgba(15,37,47,0.28);
  aspect-ratio:4/3;
}
.area-card.lead{grid-row:auto;aspect-ratio:4/3;}
.area-card .ph{position:absolute;inset:0;transition:transform 1.2s var(--ease-soft);}
.area-card:hover .ph{transform:scale(1.05);}
.area-card .label{
  position:absolute;bottom:0;left:0;right:0;padding:18px 20px;
  background:linear-gradient(0deg, rgba(15,37,47,0.85) 0%, rgba(15,37,47,0.4) 60%, transparent 100%);
  color:#fff;
}
.area-card .label .tag{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--aegean-light);text-shadow:0 1px 6px rgba(0,0,0,0.85);}
.area-card .label h3{font-family:var(--serif);font-size:17px;font-weight:500;margin-top:4px;font-style:italic;text-shadow:0 1px 8px rgba(0,0,0,0.7);}
.area-card .label p{margin-top:5px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,0.85);max-width:300px;text-shadow:0 1px 8px rgba(0,0,0,0.7);}
.area-card.lead .label h3{font-size:20px;}

@media(max-width:860px){
  .area-grid{grid-template-columns:1fr;max-width:520px;}
  .area-card,.area-card.lead{aspect-ratio:16/10;}
}


/* ---------- contact-cta.css ---------- */
.contact-cta{
  position:relative;
  padding:170px 0;
  overflow:hidden;
  text-align:center;
  isolation:isolate;
}

.contact-cta-media{
  position:absolute;
  inset:0;
  z-index:-2;
}
.contact-cta-media .ph{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
}

/* same treatment as the hero: a gradient rather than a flat block —
   pulled back so the photograph carries the section, with just
   enough navy for the type to sit comfortably */
.contact-cta::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(15,37,47,0.48), rgba(15,37,47,0.62));
}

.contact-cta-content{
  max-width:560px;
  margin:0 auto;
  color:#fff;
}
.contact-cta .eyebrow{color:var(--aegean-light);}
.contact-cta h2{
  color:#fff;
  font-size:clamp(28px,4vw,44px);
  margin-top:16px;
  font-style:italic;
  font-weight:400;
  text-shadow:0 2px 28px rgba(0,0,0,0.32);
}
.contact-cta p{
  margin-top:20px;
  color:rgba(255,255,255,0.88);
  line-height:1.7;
  font-size:16px;
  text-shadow:0 1px 14px rgba(0,0,0,0.25);
}
.contact-cta .btn-explore{
  margin-top:38px;
}

@media(max-width:640px){
  .contact-cta{padding:120px 0;}
}

/* ---------- faq.css ---------- */
/* ---------- FAQ ----------
   Native <details>/<summary> accordion — no JS needed, accessible by
   default (keyboard + screen reader support built into the element),
   and consistent with the site's "quiet typographic space" approach
   used on the contact form. */
.faq{padding:130px 0;background:var(--sand);}

.faq-groups{
  max-width:760px;
  margin:64px auto 0;
}

.faq-group + .faq-group{margin-top:52px;}

.faq-group-label{
  font-size:11.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--terracotta-text);
  margin-bottom:14px;
}

.faq-list{}

.faq-item{
  border-bottom:1px solid var(--line);
  padding-bottom:0;
  transition:padding-bottom .35s var(--ease-soft);
}
.faq-item[open]{padding-bottom:24px;}
.faq-item:first-child{border-top:1px solid var(--line);}

.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:22px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-family:var(--serif);
  font-size:18px;
  color:var(--navy);
  transition:color .25s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}

.faq-item summary::after{
  content:"";
  flex:0 0 auto;
  width:10px;height:10px;
  border-right:1.4px solid var(--ink-soft);
  border-bottom:1.4px solid var(--ink-soft);
  transform:rotate(45deg);
  transition:transform .3s var(--ease-soft);
  margin-top:-4px;
}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:4px;}


/* ---------- SMOOTH OPEN/CLOSE ----------
   Native <details> can only animate opening (via a plain CSS
   transition/keyframe) — closing is always an instant, unanimatable
   display:none, because that's how the element works natively. To
   get a real two-way smooth animation, the answer is wrapped in
   .faq-answer and we override the browser's native show/hide with
   our own grid-row collapse instead: the wrapper's row track animates
   between 0fr (fully collapsed) and 1fr (fully expanded), which grid
   can interpolate smoothly in both directions — unlike max-height,
   this doesn't need a guessed-at pixel ceiling and never feels like
   it "waits" then snaps for short answers. */
.faq-item .faq-answer{
  display:grid !important; /* override the native UA rule that would
    otherwise display:none this whenever <details> isn't open */
  grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease-soft);
}
.faq-item[open] .faq-answer{
  grid-template-rows:1fr;
}
.faq-item .faq-answer > p{
  overflow:hidden;
  min-height:0;
  padding:0 4px;
  max-width:640px;
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink-soft);
}
.faq-item .faq-answer > p a{color:var(--terracotta-text);text-decoration:underline;text-underline-offset:2px;}

@media(max-width:640px){
  .faq{padding:90px 0;}
  .faq-groups{margin-top:44px;}
  .faq-group + .faq-group{margin-top:40px;}
  .faq-item summary{font-size:16.5px;padding:19px 2px;}
  .faq-item .faq-answer > p{font-size:14px;padding:0 2px;}
}

/* ---------- apartments-list.css ---------- */
/* ---------- APARTMENTS INDEX HERO ----------
   Smaller than the homepage hero (this isn't the first thing a visitor
   sees on the site) but same visual language: full-bleed photo, dark
   gradient for legibility, serif italic heading. */
.apts-hero{
  position:relative;
  height:56vh;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(15,37,47,0.35) 0%, rgba(15,37,47,0.15) 45%, rgba(15,37,47,0.55) 100%),
    url("../images/apartments/apartment-01.jpg");
  background-size:cover;
  background-position:center;
}
.apts-hero-content{position:relative;z-index:2;color:#fff;padding:0 24px;max-width:640px;}
.apts-hero .eyebrow{color:var(--aegean-light);}
.apts-hero h1{
  margin-top:14px;
  font-size:clamp(34px,5.5vw,58px);
  font-weight:400;
  font-style:italic;
  text-shadow:0 2px 30px rgba(0,0,0,0.32);
}
.apts-hero p{
  margin-top:18px;
  font-size:clamp(14px,1.6vw,17px);
  color:rgba(255,255,255,0.9);
  line-height:1.6;
  text-shadow:0 1px 14px rgba(0,0,0,0.22);
}

/* ---------- APARTMENTS LIST ----------
   A refined vertical list rather than a card grid: thumbnail, name,
   summary, quick facts, and a link, separated by thin hairlines. */
.apts-list{padding:110px 0 130px;}

.apt-row-compact{
  display:grid;
  grid-template-columns:325px 1fr; /* image ~25% larger; CTA now sits with the info */
  align-items:center;
  gap:48px;
  padding:40px 0;
  /* ~12% more present than the shared --line hairline, still quiet */
  border-bottom:1px solid rgba(22,48,63,0.135);
  transition:opacity .3s ease;
}
.apt-row-compact:first-child{border-top:1px solid rgba(22,48,63,0.135);}

.apt-row-compact-media{
  position:relative;
  aspect-ratio:4/3;          /* unchanged */
  border-radius:18px;
  overflow:hidden;
}
.apt-row-compact-media .ph{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform 700ms var(--ease-soft);
}
@media(hover:hover){
  .apt-row-compact:hover .apt-row-compact-media .ph{transform:scale(1.06);}
}

.apt-row-compact-body h2{
  font-size:clamp(22px,2.45vw,29px); /* ~+11% */
  font-weight:500;
  white-space:nowrap;                /* titles stay on one line */
}
.apt-index{
    font-family:var(--sans);
    font-size:11.5px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--terracotta-text);
    margin-bottom:10px;
    display:block;
}
.apt-row-compact-body .apt-index{margin-bottom:8px;}
.apt-row-compact-body p.summary{
  margin-top:16px;                   /* more air under the title */
  color:#42565A;                     /* slightly stronger than --ink-soft */
  font-size:15px;
  line-height:1.75;
  max-width:460px;
}
.apt-row-compact-facts{
  display:flex;
  gap:20px;
  margin-top:18px;
  flex-wrap:wrap;
}
.apt-row-compact-facts span{
  font-size:12px;                    /* slightly larger + stronger */
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:rgba(76,95,99,0.95);
  padding-left:14px;
  position:relative;
}
.apt-row-compact-facts span::before{
  content:"";
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;
  background:var(--terracotta);
}

/* CTA sits directly under the apartment information */
.apt-row-compact-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:24px;
  font-size:12px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--navy);
  white-space:nowrap;
  position:relative;
  padding-bottom:5px;
  transition:color .3s ease;
}
/* underline grows in from the left rather than sitting there statically */
.apt-row-compact-cta::after{
  content:"";
  position:absolute;left:0;bottom:0;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease-out);
}
.apt-row-compact-cta .arrow{
  display:inline-block;
  transition:transform 300ms var(--ease-soft);
}
.apt-row-compact:hover .apt-row-compact-cta{color:var(--terracotta-text);}
.apt-row-compact:hover .apt-row-compact-cta::after{transform:scaleX(1);}
.apt-row-compact:hover .apt-row-compact-cta .arrow{transform:translateX(5px);}

@media(max-width:860px){
  .apt-row-compact{
    grid-template-columns:1fr;
    gap:22px;
    padding:32px 0;
  }
  .apt-row-compact-media{aspect-ratio:16/10;}
  .apt-row-compact-body h2{white-space:normal;} /* allow wrapping on narrow screens */
}

@media(prefers-reduced-motion:reduce){
  .apt-row-compact-media .ph,
  .apt-row-compact-cta,
  .apt-row-compact-cta::after,
  .apt-row-compact-cta .arrow{transition:none;}
}

/* ---------- apartment-detail.css ---------- */
/* ===================================================================
   APARTMENT DETAIL PAGE
   Hero → sticky nav → overview → gallery → sleep → amenities →
   info → location → rules → reviews → other apartments → CTA
   Uses the site's existing tokens throughout; no new design language.
   =================================================================== */

/* shared section rhythm */
.ap-section{padding:110px 0;}
.ap-section + .ap-section{padding-top:0;}
.ap-section-head{margin-bottom:44px;}
.ap-section-head h2{
  font-size:clamp(26px,3.2vw,36px);
  font-weight:400;font-style:italic;color:var(--navy);
}
.ap-section-head p{
  margin-top:12px;color:var(--ink-soft);
  font-size:15.5px;line-height:1.7;max-width:560px;
}

@media(max-width:640px){
  .ap-section{padding:72px 0;}
  .ap-section-head{margin-bottom:32px;}
}

/* ---------------- 1. HERO ---------------- */
.ap-hero{
  position:relative;
  min-height:72vh;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.ap-hero .ph{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.ap-hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,37,47,0.28) 0%,rgba(15,37,47,0.05) 40%,rgba(15,37,47,0.78) 100%);
}
.ap-hero-inner{position:relative;z-index:2;width:100%;padding-bottom:52px;color:#fff;}
.ap-hero-back{
  display:inline-block;margin-bottom:18px;
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,0.7);transition:color .3s ease;
}
.ap-hero-back:hover{color:#F1D9A8;}
.ap-hero-label{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;
  color:#F1D9A8;margin-bottom:12px;
}
.ap-hero h1{
  color:#fff;font-size:clamp(32px,5vw,54px);
  font-weight:400;font-style:italic;
  text-shadow:0 2px 30px rgba(0,0,0,0.3);
}
.ap-hero-meta{
  margin-top:16px;font-size:14.5px;
  color:rgba(255,255,255,0.9);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
}
.ap-hero-meta .dot{opacity:0.5;}
.ap-hero-actions{
  margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;
}
.ap-btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border-radius:2px;
  font-size:12px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;
  border:1px solid transparent;
  transition:background .3s ease,color .3s ease,border-color .3s ease;
  cursor:pointer;
}
.ap-btn--solid{background:#fff;color:var(--navy);border-color:#fff;}
.ap-btn--solid:hover{background:#F1D9A8;border-color:#F1D9A8;}
.ap-btn--ghost{
  background:rgba(255,255,255,0.08);color:#fff;
  border-color:rgba(255,255,255,0.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.ap-btn--ghost:hover{background:rgba(255,255,255,0.18);border-color:#F1D9A8;color:#F1D9A8;}
.ap-btn--navy{background:var(--navy);color:#fff;border-color:var(--navy);}
.ap-btn--navy:hover{background:var(--terracotta);border-color:var(--terracotta);}
.ap-btn--outline{background:transparent;color:var(--navy);border-color:rgba(22,48,63,0.25);}
.ap-btn--outline:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

@media(max-width:640px){
  .ap-hero{min-height:66vh;}
  .ap-hero-inner{padding-bottom:36px;}
  .ap-btn{padding:13px 22px;font-size:11px;}

  /* Smaller source images for mobile — same photos, downscaled and
     re-compressed (780px wide vs. the desktop 1200px), since each
     apartment hero is that page's LCP element and a phone never
     benefits from the extra desktop resolution. Overrides the
     inline background-image set in the HTML, hence !important. */
  body[data-apartment="beachfront-3br"] .ap-hero .ph{background-image:url('../../images/apartments/apartment-01-mobile.webp') !important;}
  body[data-apartment="premium-beachfront"] .ap-hero .ph{background-image:url('../../images/apartments/apartment-02-mobile.webp') !important;}
  body[data-apartment="deluxe-beachfront"] .ap-hero .ph{background-image:url('../../images/apartments/apartment-03-mobile.webp') !important;}
  body[data-apartment="top-floor"] .ap-hero .ph{background-image:url('../../images/apartments/apartment-04-mobile.webp') !important;}
  body[data-apartment="cozy-beachside"] .ap-hero .ph{background-image:url('../../images/apartments/apartment-05-mobile.webp') !important;}
}

/* ---------------- 3. OVERVIEW ---------------- */
.ap-overview p{
  font-size:17px;line-height:1.85;color:var(--ink-soft);max-width:680px;
}

/* ---------------- LIGHTBOX ---------------- */
.lightbox{
  position:fixed;inset:0;z-index:900;
  background:rgba(15,37,47,0.94);
  display:flex;align-items:center;justify-content:center;
  padding:70px 78px;
}
.lightbox[hidden]{display:none;}
.lb-stage{
  max-width:100%;max-height:100%;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:0;
}
.lb-img{
  max-width:100%;max-height:78vh;
  object-fit:contain;border-radius:4px;
  animation:lbFade .35s var(--ease-out);
}
@keyframes lbFade{from{opacity:0;transform:scale(.985);}to{opacity:1;transform:none;}}
.lb-caption{
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(255,255,255,0.65);
}
.lb-counter{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-size:12.5px;color:rgba(255,255,255,0.75);letter-spacing:0.06em;
}
.lb-close,.lb-nav{
  position:absolute;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);border-radius:50%;
  cursor:pointer;transition:background .3s ease,border-color .3s ease;
}
.lb-close{top:24px;right:24px;width:42px;height:42px;font-size:15px;}
.lb-nav{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:18px;}
.lb-prev{left:22px;}
.lb-next{right:22px;}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,0.22);border-color:#F1D9A8;}
@media(max-width:640px){
  .lightbox{padding:60px 14px;}
  .lb-nav{width:38px;height:38px;}
  .lb-prev{left:8px;}
  .lb-next{right:8px;}
  .lb-img{max-height:66vh;}
}
@media(prefers-reduced-motion:reduce){
  .lb-img{animation:none;}
}

/* ---------------- 6. AMENITIES ---------------- */
.amen-groups{
  display:grid;grid-template-columns:repeat(3,1fr);gap:44px 40px;
}
.amen-group h3{
  font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin-bottom:18px;
  font-family:var(--sans);font-style:normal;
}
.amen-group ul{display:flex;flex-direction:column;gap:13px;}
.amen-group li{
  display:flex;align-items:center;gap:11px;
  font-size:14.5px;color:var(--ink);
}
.ap-icon{
  flex:0 0 auto;width:17px;height:17px;
  fill:none;stroke:var(--terracotta);stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0.85;
}
@media(max-width:860px){.amen-groups{grid-template-columns:repeat(2,1fr);gap:36px 30px;}}
@media(max-width:560px){.amen-groups{grid-template-columns:1fr;}}

/* ---------------- 8. LOCATION ---------------- */
.loc-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;}
.loc-map{
  aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  box-shadow:0 22px 60px -34px rgba(15,37,47,0.3);
}
.loc-map iframe{width:100%;height:100%;border:0;display:block;}
.loc-near h3{
  font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;margin-bottom:20px;
  font-family:var(--sans);font-style:normal;
}
.loc-near li{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--ink);
}
.loc-near li .t{color:var(--ink-soft);font-size:13px;white-space:nowrap;}
.loc-near li .n{display:flex;align-items:center;gap:10px;}
@media(max-width:860px){.loc-grid{grid-template-columns:1fr;gap:36px;}}

/* ---------------- 11. OTHER APARTMENTS ---------------- */
.other-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.other-card{display:block;}
.other-card-media{
  position:relative;aspect-ratio:4/3;
  border-radius:14px;overflow:hidden;margin-bottom:14px;
}
.other-card-media .ph{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 700ms var(--ease-soft);
}
@media(hover:hover){
  .other-card:hover .other-card-media .ph{transform:scale(1.06);}
}
.other-card .label{
  font-family:var(--sans);font-weight:600;
  font-size:11px;letter-spacing:0.13em;text-transform:uppercase;
  color:var(--terracotta-text);display:block;margin-bottom:7px;
}
.other-card h3{font-size:16.5px;font-weight:500;color:var(--navy);transition:color .3s ease;}
.other-card:hover h3{color:var(--terracotta-text);}
.other-card .facts{margin-top:7px;font-size:12.5px;color:var(--ink-soft);}
@media(max-width:860px){.other-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.other-grid{grid-template-columns:1fr;}}

/* ---------------- 12. RESERVE CTA ---------------- */
.ap-cta{
  position:relative;overflow:hidden;isolation:isolate;
  padding:130px 0;text-align:center;
}
.ap-cta-media{position:absolute;inset:0;z-index:-2;}
.ap-cta-media .ph{position:absolute;inset:0;background-size:cover;background-position:center;}
.ap-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(15,37,47,0.5),rgba(15,37,47,0.66));
}
.ap-cta h2{
  color:#fff;font-size:clamp(28px,4vw,44px);
  font-weight:400;font-style:italic;
  text-shadow:0 2px 28px rgba(0,0,0,0.32);
}
.ap-cta p{
  margin-top:16px;color:rgba(255,255,255,0.88);
  font-size:16px;text-shadow:0 1px 14px rgba(0,0,0,0.25);
}
.ap-cta-actions{
  margin-top:36px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px;
}
@media(max-width:640px){.ap-cta{padding:90px 0;}}

/* ---------- contact.css ---------- */
/* ---------- CONTACT PAGE ----------
   A photographic hero carries the page title, then an editorial,
   unboxed body: no cards, no map. Inputs are underline-only so the
   page reads as calm typographic space rather than a UI form.
   Two columns — form ~67%, info ~33%. */

/* ---------- HERO ----------
   Same language as the apartments listing hero: full-bleed photo,
   navy gradient for legibility, serif italic heading. */
.contact-hero{
  position:relative;
  height:52vh;
  min-height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(15,37,47,0.35) 0%, rgba(15,37,47,0.15) 45%, rgba(15,37,47,0.55) 100%),
    url("../images/hero.jpg");
  background-size:cover;
  background-position:center 58%;
}
.contact-hero-content{
  position:relative;z-index:2;color:#fff;
  padding:0 24px;max-width:640px;
}
.contact-hero .eyebrow{color:var(--aegean-light);}
.contact-hero h1{
  margin-top:14px;
  font-size:clamp(34px,5.5vw,58px);
  font-weight:400;
  font-style:italic;
  text-shadow:0 2px 30px rgba(0,0,0,0.32);
}
@media(max-width:640px){
  .contact-hero{height:44vh;min-height:300px;}
}

.contact-page{padding:110px 0 150px;}

.contact-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:100px;
}
@media(max-width:900px){
  .contact-grid{grid-template-columns:1fr;gap:72px;}
}

/* ---------- LEFT: HEADING + FORM ---------- */
.contact-intro{
  margin-top:0;
  font-size:16.5px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:460px;
}

.contact-form{
  display:flex;
  flex-direction:column;
  gap:40px;
  margin-top:64px; /* generous space before the form begins */
}

.contact-form .two-col{display:grid;grid-template-columns:1fr 1fr;gap:40px;}
@media(max-width:560px){.contact-form .two-col{grid-template-columns:1fr;gap:36px;}}

.contact-form .field{display:flex;flex-direction:column;}
.contact-form label{
  font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
  margin-bottom:12px;
}
.contact-form label .optional{
  text-transform:none;letter-spacing:0;font-weight:400;
  color:rgba(76,95,99,0.55);
}

/* thin underline-only fields — no boxes, no fills */
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:var(--sans);
  font-size:16px;
  color:var(--ink);
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:0 0 12px;
  transition:border-color .3s ease;
  width:100%;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--ink-soft);}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--terracotta);
}

/* ---------- FORM ERROR STATES ----------
   A field only gets .has-error added by contact-form.js after a
   failed validation attempt — never on first load, and it clears the
   moment the visitor starts correcting that field. */
.contact-form .field.has-error input,
.contact-form .field.has-error select{
  border-color:var(--error);
}
.field-error{
  display:block;
  min-height:0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--error);
  margin-top:7px;
}
.field-error:empty{margin-top:0;}

/* native selects, restyled to match the underline fields with a
   quiet custom chevron (no browser box/shadow) */
.contact-form select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' fill='none' stroke='%234C5F63' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  background-size:15px;
  padding-right:26px;
  cursor:pointer;
}
/* Guests and Apartment intentionally share identical styling in
   every state — no separate placeholder color, so "Select guests"
   and "Any Apartment" render in the same ink tone as any other
   selected value. (Previously a :invalid rule muted only the Guests
   placeholder, since Apartment's default option isn't disabled —
   removed so both selects are visually identical.) */

/* native date inputs: keep the browser's own picker (as required)
   but align the indicator with the underline aesthetic */
.contact-form input[type="date"]{cursor:pointer;}
.contact-form input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0.55;cursor:pointer;
  transition:opacity .25s ease;
}
.contact-form input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:0.9;}

.contact-form textarea{resize:vertical;min-height:110px;padding-top:2px;}

.btn-submit{
  align-self:flex-start;
  margin-top:12px;
  padding:17px 44px;
  background:var(--navy);
  color:#fff;
  border-radius:2px;
  font-size:12.5px;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;
  transition:background .3s ease;
}
.btn-submit:hover{background:var(--terracotta);}

.contact-privacy{
  margin-top:2px;
  font-size:12.5px;
  color:rgba(76,95,99,0.7);
}

/* ---------- RIGHT: CONTACT INFO ---------- */
.contact-col-info h2{
  font-size:11.5px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;
  margin-bottom:26px;
}

.contact-info-list{display:flex;flex-direction:column;gap:22px;margin-bottom:52px;}
.contact-info-list li{display:flex;flex-direction:column;gap:4px;}
.contact-info-list .label{font-size:10.5px;letter-spacing:0.08em;text-transform:uppercase;color:rgba(76,95,99,0.55);}
.contact-info-list .value{font-size:16px;color:var(--ink);}
a.value{transition:color .3s ease;}
a.value:hover{color:var(--terracotta-text);}

/* three stacked action buttons, reusing the site's established
   solid / outline-fills-on-hover button language */
.contact-actions{display:flex;flex-direction:column;gap:14px;margin-bottom:56px;}
.contact-btn{
  display:block;text-align:center;
  padding:15px 20px;
  border-radius:2px;
  font-size:12px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.contact-btn--primary{
  background:var(--navy);color:#fff;border:1px solid var(--navy);
}
.contact-btn--primary:hover{background:var(--terracotta);border-color:var(--terracotta);}
.contact-btn--outline{
  background:transparent;color:var(--navy);border:1px solid var(--line);
}
.contact-btn--outline:hover{background:var(--navy);color:#fff;border-color:var(--navy);}

.contact-hours{padding-top:8px;border-top:1px solid var(--line);}
.contact-hours h2{margin-top:36px;}
.hours-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:14.5px;color:var(--ink-soft);
  padding:10px 0;
}
.hours-row strong{
  font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--navy);
}
.hours-row + .hours-row{border-top:1px solid var(--line);}

@media(max-width:640px){
  .contact-page{padding:130px 0 100px;}
  .contact-form{gap:34px;margin-top:48px;}
}

/* HONEYPOT — positioned off-screen rather than display:none, since some
   spam bots specifically skip display:none fields to evade this exact
   trick. Real visitors never see or reach it (tabindex -1 in the HTML). */
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* ---------- notfound.css ---------- */
/* 404 — same visual language as the rest of the site: hero photo,
   navy gradient for legibility, serif italic headline. */
.notfound{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(15,37,47,0.45), rgba(15,37,47,0.65)), url("../images/hero.jpg");
  background-size:cover;background-position:center 60%;
}
.notfound-content{position:relative;z-index:2;color:#fff;padding:0 24px;max-width:560px;}
.notfound-mark{width:38px;height:38px;margin-bottom:18px;}
.notfound .eyebrow{color:var(--aegean-light);}
.notfound h1{
  margin-top:14px;
  font-size:clamp(36px,6vw,64px);
  font-weight:400;font-style:italic;
  text-shadow:0 2px 30px rgba(0,0,0,0.35);
}
.notfound p{
  margin-top:18px;
  font-size:16px;line-height:1.7;
  color:rgba(255,255,255,0.88);
  text-shadow:0 1px 14px rgba(0,0,0,0.25);
}
.notfound-links{margin-top:38px;}
.notfound-alt{
  display:block;margin-top:22px;
  font-size:12.5px;letter-spacing:0.04em;
  color:rgba(255,255,255,0.6);
  transition:color .3s ease;
}
.notfound-alt:hover{color:#F1D9A8;}

/* ---------- footer.css ---------- */
/* ---------- FOOTER ----------
   Three quiet columns, generous air, one centered legal line.
   Understated by design: the CTA above does the selling. */
footer{background:var(--navy-deep);color:rgba(255,255,255,0.75);padding:110px 0 40px;}

.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr;
  gap:72px;
  align-items:start;
}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr;row-gap:52px;}}

.footer-brand-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.footer-brand-row .footer-mark{
  flex:0 0 auto;
  width:26px;height:26px;
}
.footer-brand-name{
  font-family:var(--serif);color:#fff;
  font-size:16px;letter-spacing:0.06em;
  margin-bottom:0;
}
footer p.desc{
  font-size:13.5px;line-height:1.8;
  color:rgba(255,255,255,0.5);
  max-width:300px;
}

footer .col-title{
  font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);
  margin-bottom:22px;
}

.footer-links li,
.footer-contact li{margin-bottom:14px;font-size:14px;}
.footer-links a,
.footer-contact a,
.footer-follow a{
  color:rgba(255,255,255,0.78);
  transition:color .3s ease, padding-left .3s ease;
}
.footer-links a:hover,
.footer-contact a:hover,
.footer-follow a:hover{color:#F1D9A8;}
.footer-links a:hover{padding-left:4px;} /* quiet slide, nothing more */

/* icon + label pairing — same thin-stroke, no-fill language as the
   amenity icons elsewhere on the site, just recolored for the dark
   footer background */
.footer-contact a,
.footer-follow a{
  display:inline-flex;align-items:center;gap:11px;
}
.footer-icon{
  flex:0 0 auto;width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0.75;
}

.footer-follow{margin-top:32px;}

.footer-bottom{
  margin-top:96px;padding-top:26px;
  border-top:1px solid rgba(255,255,255,0.1);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:12px;color:rgba(255,255,255,0.58);
}
.footer-bottom a{color:rgba(255,255,255,0.58);transition:color .3s ease;}
.footer-bottom a:hover{color:#F1D9A8;}
@media(max-width:640px){
  footer{padding:90px 0 34px;}
  .footer-bottom{justify-content:center;text-align:center;}
}

/* ---------- floating-cta.css ---------- */
/* ---------- FLOATING WHATSAPP BUTTON ----------
   A persistent, thumb-reachable way to reach us — most valuable on
   mobile where the footer/contact-page links are a long scroll away.
   Sits above ordinary content, but below the mobile nav overlay (so
   opening the menu correctly covers it) and below the photo lightbox
   (so an open gallery isn't cluttered by it). */
.floating-whatsapp{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:150;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px -8px rgba(15,37,47,0.45);
  transition:background .3s ease, transform .3s var(--ease-soft);
}
.floating-whatsapp:hover{background:var(--terracotta);transform:translateY(-2px);}
.floating-whatsapp svg{
  width:26px;height:26px;
  fill:none;stroke:#fff;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

@media(max-width:640px){
  .floating-whatsapp{
    right:16px;bottom:16px;
    width:52px;height:52px;
  }
  .floating-whatsapp svg{width:24px;height:24px;}
}

/* Hide while the full-screen mobile nav is open, so the button never
   floats on top of it. Hooks into the existing #mobileMenu.open state
   via a sibling selector — no JS changes needed. Requires the button
   to sit immediately after <nav id="mobileMenu"> in the markup. */
#mobileMenu.open ~ .floating-whatsapp{display:none;}