/* ═══════════════════════════════════════════════════════════
   PRINCIPE DEL PACIFICO — main.css
   All shared styles in one file (fewer HTTP requests = faster)
   Version 3.0 — March 2026
   ═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Colors */
  --forest:       #1C4A3A;
  --forest-deep:  #0F2E24;
  --forest-mid:   #2D6B54;
  --forest-soft:  #4A8C72;
  --forest-pale:  #A8C9BB;
  --forest-wash:  #E8F2EE;
  --forest-ghost: #F2F8F5;
  --sand:         #F5F0E8;
  --sand-warm:    #EDE5D6;
  --earth:        #6B4F3A;
  --earth-light:  #C49A7A;
  --earth-pale:   #F0E6DC;
  --ink:          #1A1714;
  --ink-mid:      #3D3730;
  --ink-soft:     #6B6358;
  --ink-muted:    #9A9188;
  --ink-ghost:    #D4CFC8;
  --white:        #FDFCFA;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --sp-16:64px; --sp-20:80px;

  /* Radius */
  --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:20px; --r-full:9999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(26,23,20,.07);
  --shadow-md: 0 4px 16px rgba(26,23,20,.10);
  --shadow-lg: 0 8px 32px rgba(26,23,20,.12);
  --shadow-xl: 0 12px 40px rgba(26,23,20,.14);
  --shadow-card: 0 2px 8px rgba(26,23,20,.06), 0 1px 3px rgba(26,23,20,.04);
  --shadow-hero: 0 20px 60px rgba(0,0,0,.26), 0 4px 16px rgba(0,0,0,.12);
  --shadow-cta:  0 4px 14px rgba(28,74,58,.38);
  --shadow-cta-h:0 8px 22px rgba(28,74,58,.44);

  /* Motion */
  --ease-out:    cubic-bezier(.2,0,0,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* Layout */
  --max-w: 1100px;
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-body);
  background: var(--sand);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img  { display:block; max-width:100%; height:auto; }
a    { color:inherit; text-decoration:none; }
button { cursor:pointer; font-family:var(--font-body); border:none; background:none; }
address { font-style:normal; }
@media (max-width:767px) { body { padding-bottom:72px; } }

/* ── LAYOUT HELPERS ─────────────────────────────────────── */
.wrap { max-width:var(--max-w); margin:0 auto; padding:0 24px; }
@media (min-width:640px)  { .wrap { padding:0 32px; } }
@media (min-width:1024px) { .wrap { padding:0 48px; } }

.section       { padding: var(--sp-20) 0; }
.section--alt  { background: var(--white); }

.section-eyebrow {
  font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--forest-mid); margin-bottom:12px;
  display:flex; align-items:center; gap:12px;
}
.section-eyebrow::before { content:''; width:18px; height:1px; background:var(--forest-pale); flex-shrink:0; }

.section-title {
  font-family:var(--font-display); font-size:clamp(34px,4.5vw,50px);
  font-weight:300; color:var(--ink); line-height:1.05;
  letter-spacing:-.02em; margin-bottom:12px;
}
.section-title em { font-style:italic; color:var(--forest-mid); }
.section-desc { font-size:15px; font-weight:300; color:var(--ink-soft); max-width:460px; line-height:1.65; }

/* Star fills — used by both trust bar and reviews */
.star-full  { fill: var(--earth-light); }
.star-half  { fill: url(#half-star-grad); }
.star-empty { fill: var(--ink-ghost); }

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.5; transform:scale(.8); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── AVAILABILITY RIBBON ────────────────────────────────── */
.avail-ribbon {
  background:var(--forest-ghost); border-top:1px solid var(--forest-wash);
  border-bottom:1px solid var(--forest-wash); padding:10px 0;
  text-align:center; font-size:12px; color:var(--forest-mid);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.avail-dot {
  width:7px; height:7px; border-radius:50%; background:var(--forest-mid);
  animation:pulse 2s infinite; flex-shrink:0;
}

/* ── TRUST CHIPS ────────────────────────────────────────── */
.trust-strip { display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--sp-4); }
.trust-chip {
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--white); border:1px solid var(--ink-ghost);
  border-radius:var(--r-full); font-size:12px; color:var(--ink-soft);
}
.trust-chip svg { color:var(--forest-mid); flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.topbar {
  background:var(--forest-deep);
  border-bottom:1px solid rgba(255,255,255,.07);
  padding:7px 0; font-size:12px;
}
.topbar-inner {
  display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}
.topbar-left  { display:flex; align-items:center; gap:18px; min-width:0; }
.topbar-right { display:flex; align-items:center; gap:10px; flex-shrink:0; }

.tb-link {
  display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,.72); font-size:12px; white-space:nowrap;
  transition:color .15s;
}
.tb-link:hover { color:#fff; }

.tb-sep  { width:1px; height:14px; background:rgba(255,255,255,.15); flex-shrink:0; }

.tb-social {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  border:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.65);
  transition:all .2s;
}
.tb-social:hover { border-color:rgba(255,255,255,.4); color:#fff; background:rgba(255,255,255,.08); }

.tb-lang {
  font-size:11px; font-weight:500; letter-spacing:.05em;
  color:rgba(255,255,255,.55); padding:3px 8px; border-radius:var(--r-full);
  border:1px solid rgba(255,255,255,.12); transition:all .2s;
}
.tb-lang:hover { color:#fff; border-color:rgba(255,255,255,.3); }

@media (max-width:767px) { .topbar { display:none; } }

/* ══════════════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════════════ */
.site-header {
  position:sticky; top:0; z-index:100;
  background:var(--forest-deep); padding:13px 0;
  transition:background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.site-header.scrolled {
  background:rgba(253,252,250,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--ink-ghost);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; }

/* Logo — text only, no image dependency */
.logo { display:flex; align-items:center; }
.logo-text { display:flex; flex-direction:column; gap:1px; }
.logo-name {
  font-family:var(--font-display); font-size:19px; font-weight:400;
  color:var(--white); letter-spacing:-.01em; line-height:1;
  transition:color .3s;
}
.logo-sub {
  font-size:10px; font-weight:500; letter-spacing:.17em;
  text-transform:uppercase; color:var(--forest-pale); transition:color .3s;
}
.site-header.scrolled .logo-name { color:var(--ink); }
.site-header.scrolled .logo-sub  { color:var(--ink-muted); }

/* Desktop nav */
.main-nav { display:flex; align-items:center; gap:26px; }
.nav-link {
  font-size:13px; font-weight:400; color:rgba(255,255,255,.85);
  letter-spacing:.02em; transition:color .15s; position:relative;
}
.nav-link::after {
  content:''; position:absolute; bottom:-3px; left:0; right:0;
  height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out);
}
.nav-link:hover { color:#fff; }
.nav-link:hover::after { transform:scaleX(1); }
.site-header.scrolled .nav-link { color:var(--ink-soft); }
.site-header.scrolled .nav-link:hover { color:var(--ink); }

.nav-cta {
  font-size:13px; font-weight:500; color:var(--white);
  background:var(--forest-mid); padding:9px 20px; border-radius:var(--r-full);
  border:1.5px solid rgba(255,255,255,.2);
  transition:background .15s, transform .2s var(--ease-spring);
}
.nav-cta:hover { background:var(--forest); transform:translateY(-1px); }
.site-header.scrolled .nav-cta { background:var(--forest); border-color:transparent; }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span {
  display:block; width:22px; height:1.5px; background:var(--white);
  border-radius:2px; transition:background .3s, transform .2s, opacity .2s;
}
.site-header.scrolled .hamburger span { background:var(--ink); }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu {
  display:none; position:fixed; inset:0; background:var(--forest-deep);
  z-index:99; flex-direction:column; justify-content:center; align-items:center;
  gap:32px; opacity:0; transition:opacity .25s var(--ease-out);
}
.mobile-menu.open { opacity:1; }
.mobile-menu .m-link {
  font-family:var(--font-display); font-size:34px; font-weight:300;
  color:var(--white); transition:color .15s;
}
.mobile-menu .m-link:hover { color:var(--forest-pale); }
.mobile-menu .m-cta {
  font-family:var(--font-body); font-size:15px; font-weight:500;
  padding:13px 32px; border-radius:var(--r-full);
  border:1.5px solid rgba(255,255,255,.15); background:var(--forest-mid); margin-top:4px;
}
.mob-soc-row { display:flex; gap:24px; margin-top:4px; }
.mob-soc-link { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--forest-pale); transition:color .15s; }
.mob-soc-link:hover { color:var(--white); }

@media (max-width:767px) {
  .main-nav { display:none; }
  .hamburger { display:flex; }
}

/* ══════════════════════════════════════════════════════════
   VALUE BAR
══════════════════════════════════════════════════════════ */
.value-bar { background:var(--forest); padding:28px 0; }
.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.value-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:18px 22px; border-radius:var(--r-lg); transition:background .2s;
}
.value-item:hover { background:rgba(255,255,255,.06); }
.value-icon {
  width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; color:var(--forest-pale);
}
.value-title { font-size:14px; font-weight:500; color:var(--white); line-height:1.3; }
.value-sub   { font-size:12px; font-weight:300; color:var(--forest-pale); line-height:1.4; margin-top:3px; }
@media (max-width:767px) { .value-grid { grid-template-columns:1fr; } }

/* ══════════════════════════════════════════════════════════
   TRUST / RATINGS BAR
══════════════════════════════════════════════════════════ */
.trust-bar { background:var(--white); border-bottom:1px solid var(--ink-ghost); padding:16px 0; }
.trust-bar-inner { display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--r-lg); transition:background .15s; }
.trust-item:hover { background:var(--forest-ghost); }
.trust-stars { display:flex; align-items:center; gap:2px; }
.trust-star  { width:15px; height:15px; }
.trust-score { font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); line-height:1; }
.trust-score-sub { font-size:12px; font-weight:300; color:var(--ink-muted); font-family:var(--font-body); }
.trust-score--green { color:var(--forest-mid); }
.trust-label { font-size:11px; color:var(--ink-muted); }
.trust-sep   { width:1px; height:34px; background:var(--ink-ghost); flex-shrink:0; }
.trust-quote { font-family:var(--font-display); font-size:15px; font-style:italic; color:var(--ink-mid); line-height:1.4; max-width:300px; }
.trust-quote-author { font-size:11px; color:var(--ink-muted); font-weight:500; margin-top:3px; display:block; font-style:normal; font-family:var(--font-body); }
@media (max-width:767px) {
  .trust-sep, .trust-quote-wrap { display:none; }
  .trust-bar-inner { gap:18px; }
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero {
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; padding-bottom:var(--sp-16);
}
.hero-bg {
  position:absolute; inset:0;
  background:linear-gradient(165deg, #0F2E24 0%, #163D2E 38%, #1C4A3A 68%, #234D3F 100%);
}
.hero-bg::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 65% 55% at 78% 28%, rgba(74,140,114,.22) 0%, transparent 58%),
    radial-gradient(ellipse 42% 52% at 18% 72%, rgba(196,154,122,.13) 0%, transparent 54%),
    radial-gradient(ellipse 50% 38% at 50% 92%, rgba(15,46,36,.55) 0%, transparent 50%);
}
.hero-shape {
  position:absolute; bottom:-2px; left:0; right:0;
  height:100px; background:var(--sand);
  clip-path:ellipse(58% 100% at 50% 100%);
}
/* Botanical decoration */
.hero-botanical { position:absolute; top:12%; right:4%; width:200px; height:260px; opacity:.065; pointer-events:none; }
.hero-content   { position:relative; z-index:2; padding-top:80px; }

.hero-eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--forest-pale); margin-bottom:16px;
  opacity:0; animation:fadeUp .8s .1s var(--ease-out) forwards;
}
.hero-eyebrow::before { content:''; width:24px; height:1px; background:var(--forest-pale); opacity:.6; flex-shrink:0; }

.hero-title {
  font-family:var(--font-display); font-size:clamp(46px,7.5vw,86px);
  font-weight:300; color:var(--white); line-height:.96; letter-spacing:-.025em;
  margin-bottom:16px; opacity:0; animation:fadeUp .9s .2s var(--ease-out) forwards;
}
.hero-title em { font-style:italic; color:var(--forest-pale); }

.hero-desc {
  font-size:clamp(14px,1.6vw,16px); font-weight:300; color:rgba(255,255,255,.62);
  max-width:440px; line-height:1.65; margin-bottom:22px;
  opacity:0; animation:fadeUp .9s .35s var(--ease-out) forwards;
}
.hero-pills {
  display:flex; flex-wrap:wrap; gap:7px; margin-bottom:24px;
  opacity:0; animation:fadeUp .9s .45s var(--ease-out) forwards;
}
.hero-pill {
  display:flex; align-items:center; gap:7px; font-size:11px;
  color:rgba(255,255,255,.72); background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.11); padding:5px 12px; border-radius:var(--r-full);
}
.hero-pill-dot { width:4px; height:4px; border-radius:50%; background:var(--forest-pale); flex-shrink:0; }

/* ── SEARCH WIDGET ───────────────────────────────────────
   CRITICAL: 4-column grid on desktop keeps everything on ONE row.
   grid-template-columns: 1fr 1fr auto auto
   - col 1: check-in field (flexible)
   - col 2: check-out field (flexible)
   - col 3: guests select (auto width)
   - col 4: submit button (auto width)
   The dividers are positioned between col 1-2 and col 2-3 using
   a CSS trick — they are extra elements with align-self:stretch.
   ─────────────────────────────────────────────────────── */
.search-wrap {
  max-width:700px;
  opacity:0; animation:fadeUp 1s .55s var(--ease-out) forwards;
}
.search-form {
  background:var(--white); border-radius:var(--r-xl); padding:10px;
  display:grid;
  grid-template-columns: 1fr auto 1fr auto auto auto;
  /* col:  checkin | div | checkout | div | guests | button */
  gap:0; align-items:stretch;
  box-shadow:var(--shadow-hero);
}
.search-field {
  display:flex; flex-direction:column; gap:2px;
  padding:10px 14px; border-radius:var(--r-lg);
  cursor:pointer; transition:background .15s; min-width:0;
}
.search-field:hover  { background:var(--sand); }
.search-field.err    { background:rgba(184,64,64,.07); outline:2px solid rgba(184,64,64,.4); }
.search-field--guests { padding-right:10px; }

.search-div {
  width:1px; background:var(--ink-ghost);
  margin:8px 4px; flex-shrink:0; align-self:stretch;
}
.search-label {
  font-size:10px; font-weight:500; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-muted); white-space:nowrap; cursor:pointer;
}
.search-input {
  font-size:14px; color:var(--ink); width:100%;
  border:none; background:none; outline:none; font-family:var(--font-body);
}
.search-input::placeholder { color:var(--ink-muted); }
select.search-input { appearance:none; -webkit-appearance:none; cursor:pointer; }

.search-btn {
  display:flex; align-items:center; justify-content:center; gap:7px;
  background:var(--forest); color:var(--white);
  border-radius:var(--r-lg); font-size:14px; font-weight:500;
  padding:12px 20px; white-space:nowrap; flex-shrink:0; align-self:stretch;
  transition:background .15s, transform .2s var(--ease-spring), box-shadow .2s;
  box-shadow:var(--shadow-cta); margin-left:4px;
}
.search-btn:hover { background:var(--forest-deep); transform:translateY(-1px); box-shadow:var(--shadow-cta-h); }
.search-note {
  font-size:11px; color:var(--forest-pale); margin-top:10px; opacity:.85;
  display:flex; align-items:center; gap:6px;
}
.search-note::before { content:'✓'; }

@media (max-width:767px) {
  .hero { padding-bottom:var(--sp-10); }
  .search-form {
    grid-template-columns:1fr;
    grid-template-rows:auto;
    padding:10px; border-radius:var(--r-lg);
  }
  .search-div  { display:none; }
  .search-btn  { padding:14px; font-size:15px; margin-left:0; margin-top:4px; }
}

/* ══════════════════════════════════════════════════════════
   APARTMENT CARDS
══════════════════════════════════════════════════════════ */
.apt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:var(--sp-8); }
@media (max-width:1024px) {
  .apt-grid { grid-template-columns:repeat(2,1fr); }
  .apt-card--featured { grid-column:span 1 !important; }
  .apt-card--featured .apt-img { height:220px !important; }
  .apt-card--featured .apt-img-label { font-size:72px !important; }
}
@media (max-width:639px) { .apt-grid { grid-template-columns:1fr; } }

.apt-card {
  background:var(--white); border-radius:var(--r-xl); overflow:hidden;
  border:1px solid var(--ink-ghost); box-shadow:var(--shadow-card);
  transition:box-shadow .25s var(--ease-out), transform .25s var(--ease-spring);
  display:flex; flex-direction:column;
  /* Cards are always visible — no opacity animation that can fail to trigger */
}
.apt-card:hover { box-shadow:var(--shadow-xl); transform:translateY(-4px); }
.apt-card--featured { grid-column:span 2; }
.apt-card--featured .apt-img { height:270px; }
.apt-card--featured .apt-img-label { font-size:96px; }

/* Image area */
.apt-img { height:200px; position:relative; overflow:hidden; flex-shrink:0; }
.apt-img-bg { position:absolute; inset:0; transition:transform .5s var(--ease-out); }
.apt-card:hover .apt-img-bg { transform:scale(1.04); }
.apt-img-label {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:64px; font-weight:300;
  color:rgba(255,255,255,.12); font-style:italic; letter-spacing:-.03em;
  user-select:none; pointer-events:none;
}
.apt-img-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(15,46,36,.48) 0%,transparent 58%); }

/* Placeholder note */
.apt-img-todo {
  position:absolute; bottom:8px; right:8px;
  background:rgba(0,0,0,.55); color:rgba(255,255,255,.7);
  font-size:9px; font-weight:500; padding:3px 8px; border-radius:4px;
  letter-spacing:.05em; pointer-events:none; z-index:2;
}

/* Real photo (replaces gradient when available) */
img.apt-real-photo {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* Badges */
.apt-badge { position:absolute; top:12px; left:12px; z-index:2; }
.badge {
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; padding:4px 10px; border-radius:var(--r-full);
}
.badge--forest { background:rgba(232,242,238,.95); color:var(--forest-deep); }
.badge--earth  { background:rgba(240,230,220,.95); color:var(--earth); }
.badge--sand   { background:rgba(245,240,232,.95); color:var(--ink-mid); }

/* Apartment gradient backgrounds */
.bg-master { background:linear-gradient(148deg,#163D2E 0%,#1C4A3A 45%,#2A6952 80%,#3D8C6A 100%); }
.bg-white  { background:linear-gradient(148deg,#4A8C72 0%,#2D6B54 50%,#1C4A3A 100%); }
.bg-green  { background:linear-gradient(148deg,#234D3F 0%,#2D6B54 55%,#4A8C72 100%); }
.bg-red    { background:linear-gradient(148deg,#5C3628 0%,#8B4A35 50%,#C49A7A 100%); }
.bg-blue   { background:linear-gradient(148deg,#1C3A4A 0%,#2D5B6B 50%,#4A8C9A 100%); }
.bg-tora   { background:linear-gradient(148deg,#3D2E1C 0%,#6B4F3A 55%,#C49A7A 100%); }
.bg-brown  { background:linear-gradient(148deg,#4A3828 0%,#7A5C42 55%,#B08060 100%); }

/* Card body */
.apt-body { padding:18px 20px 16px; display:flex; flex-direction:column; flex:1; gap:7px; }
.apt-name { font-family:var(--font-display); font-size:22px; font-weight:400; color:var(--ink); line-height:1; letter-spacing:-.01em; }
.apt-diff { font-size:11px; font-weight:500; color:var(--forest-mid); letter-spacing:.02em; }
.apt-specs { font-size:12px; font-weight:300; color:var(--ink-muted); line-height:1.6; }
.apt-foot { display:flex; align-items:flex-end; justify-content:space-between; padding-top:12px; border-top:1px solid rgba(0,0,0,.05); margin-top:auto; }
.apt-price-wrap { display:flex; flex-direction:column; gap:1px; }
.apt-from  { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-muted); }
.apt-price { font-family:var(--font-display); font-size:22px; font-weight:600; color:var(--ink); line-height:1; letter-spacing:-.02em; }
.apt-per   { font-family:var(--font-body); font-size:11px; font-weight:300; color:var(--ink-muted); }
.apt-link  { display:flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--forest); transition:gap .2s var(--ease-spring); white-space:nowrap; flex-shrink:0; }
.apt-card:hover .apt-link { gap:9px; }

/* ══════════════════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════════════════ */
.reviews-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:var(--sp-10); margin-bottom:var(--sp-8); }
@media (min-width:640px) and (max-width:1023px) { .reviews-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:639px) { .reviews-grid { grid-template-columns:1fr; } }

.review-card {
  background:var(--white); border:1px solid var(--ink-ghost); border-radius:var(--r-xl);
  padding:20px; display:flex; flex-direction:column; gap:12px;
  transition:box-shadow .2s, transform .2s var(--ease-spring);
}
.review-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.review-stars { display:flex; gap:2px; }
.review-star  { width:13px; height:13px; fill:var(--earth-light); }
.review-text  { font-family:var(--font-display); font-size:15px; font-style:italic; font-weight:400; color:var(--ink-mid); line-height:1.5; flex:1; }
.review-foot  { display:flex; align-items:center; justify-content:space-between; }
.review-name  { font-size:13px; font-weight:500; color:var(--ink); }
.review-meta  { font-size:11px; color:var(--ink-muted); margin-top:2px; }
.review-src   { font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--forest-mid); background:var(--forest-ghost); padding:3px 8px; border-radius:var(--r-full); }

/* Rating summary */
.rating-summary {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-8);
  background:var(--forest-ghost); border:1px solid var(--forest-wash);
  border-radius:var(--r-xl); padding:24px 32px; flex-wrap:wrap;
}
.rating-item { display:flex; flex-direction:column; align-items:center; gap:5px; }
.rating-big  { font-family:var(--font-display); font-size:44px; font-weight:600; color:var(--forest); line-height:1; }
.rating-big--alt { color:var(--forest-mid); }
.rating-stars-row { display:flex; gap:2px; }
.rating-platform  { font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--forest-mid); }
.rating-count     { font-size:11px; color:var(--ink-muted); }
.rating-sep       { width:1px; height:54px; background:var(--forest-wash); flex-shrink:0; }
.rating-highlights { max-width:260px; }
.rating-hl-quote  { font-family:var(--font-display); font-size:15px; font-style:italic; color:var(--ink-mid); line-height:1.5; }
.rating-hl-source { font-size:11px; color:var(--ink-muted); margin-top:8px; }
@media (max-width:767px) { .rating-sep { display:none; } .rating-summary { flex-direction:column; padding:22px 20px; } }

/* ══════════════════════════════════════════════════════════
   LOCATION
══════════════════════════════════════════════════════════ */
.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; margin-top:var(--sp-10); }
@media (max-width:767px) { .location-grid { grid-template-columns:1fr; } }

.location-facts { display:flex; flex-direction:column; gap:12px; }
.location-fact {
  display:flex; align-items:flex-start; gap:14px; padding:16px;
  background:var(--white); border:1px solid var(--ink-ghost); border-radius:var(--r-lg);
  transition:box-shadow .2s, transform .2s var(--ease-spring);
}
.location-fact:hover { box-shadow:var(--shadow-md); transform:translateX(4px); }
.fact-icon { width:38px; height:38px; border-radius:10px; background:var(--forest-ghost); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--forest); }
.fact-title { font-size:14px; font-weight:500; color:var(--ink); }
.fact-desc  { font-size:12px; font-weight:300; color:var(--ink-muted); line-height:1.5; margin-top:2px; }

.location-map { border-radius:var(--r-xl); overflow:hidden; height:320px; }
.location-map iframe { width:100%; height:100%; border:0; display:block; }
/* Fallback map (before real iframe is added) */
.map-fallback {
  height:320px; border-radius:var(--r-xl); position:relative; overflow:hidden;
  background:linear-gradient(135deg,#0F2E24 0%,#2D6B54 45%,#4A8C72 72%,#A8C9BB 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
}
.map-fallback::before { content:''; position:absolute; inset:0; background:radial-gradient(circle 70px at 55% 44%,rgba(255,255,255,.14) 0%,transparent 50%); }
.map-pin { position:relative; z-index:1; width:40px; height:40px; background:var(--white); border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:0 4px 14px rgba(0,0,0,.24); }
.map-pin::after { content:''; position:absolute; inset:8px; background:var(--forest); border-radius:50%; transform:rotate(45deg); }
.map-label     { position:relative; z-index:1; font-size:12px; font-weight:500; color:rgba(255,255,255,.85); text-align:center; }
.map-label-sub { position:relative; z-index:1; font-size:11px; color:rgba(255,255,255,.55); text-align:center; }
.map-open-btn  {
  position:relative; z-index:1; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.24); color:var(--white);
  font-size:12px; font-weight:500; padding:8px 18px; border-radius:var(--r-full);
  transition:background .15s; display:inline-block; cursor:pointer;
}
.map-open-btn:hover { background:rgba(255,255,255,.24); }

/* ══════════════════════════════════════════════════════════
   OWNERS
══════════════════════════════════════════════════════════ */
.owners-section { background:var(--forest-deep); padding:var(--sp-20) 0; position:relative; overflow:hidden; }
.owners-section::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 58% 68% at 82% 52%,rgba(74,140,114,.15) 0%,transparent 58%),
    radial-gradient(ellipse 38% 58% at 10% 28%,rgba(196,154,122,.09) 0%,transparent 50%);
}
.owners-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:767px) { .owners-grid { grid-template-columns:1fr; gap:36px; } }

/* Owner photo */
.owner-photo img { width:76px; height:76px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.15); margin-bottom:18px; }
.owner-photo-placeholder {
  width:76px; height:76px; border-radius:50%; margin-bottom:18px;
  background:linear-gradient(135deg,var(--forest-mid) 0%,var(--forest-soft) 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:20px; font-style:italic; color:rgba(255,255,255,.65);
  border:2px solid rgba(255,255,255,.1);
}
/* TODO note — only visible in development */
.photo-todo { font-size:10px; color:rgba(255,255,255,.3); margin-top:-12px; margin-bottom:18px; font-style:italic; }

.owners-eyebrow { font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--forest-pale); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.owners-eyebrow::before { content:''; width:16px; height:1px; background:var(--forest-pale); opacity:.5; flex-shrink:0; }
.owners-title { font-family:var(--font-display); font-size:clamp(28px,3.5vw,44px); font-weight:300; color:var(--white); line-height:1.1; letter-spacing:-.02em; margin-bottom:16px; }
.owners-title em { font-style:italic; color:var(--forest-pale); }
.owners-text  { font-size:15px; font-weight:300; color:rgba(255,255,255,.6); line-height:1.7; margin-bottom:22px; }
.owners-contacts { display:flex; flex-direction:column; gap:10px; }
.owner-contact { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--forest-pale); transition:color .15s; }
.owner-contact:hover { color:var(--white); }

.owners-response {
  display:flex; align-items:center; gap:8px; margin-top:14px;
  padding:10px 14px; background:rgba(255,255,255,.06); border-radius:10px;
  font-size:12px; color:var(--forest-pale);
}
.response-dot { width:7px; height:7px; border-radius:50%; background:#4ADE80; flex-shrink:0; animation:pulse 2s infinite; }

/* Stats */
.owners-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat-card { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; transition:background .2s; }
.stat-card:hover { background:rgba(255,255,255,.09); }
.stat-number { font-family:var(--font-display); font-size:36px; font-weight:300; color:var(--white); line-height:1; letter-spacing:-.03em; }
.stat-number em { font-style:normal; font-size:22px; color:var(--forest-pale); }
.stat-label  { font-size:12px; font-weight:300; color:var(--forest-pale); line-height:1.4; margin-top:5px; }

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.site-footer { background:var(--ink); padding:56px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; margin-bottom:var(--sp-10); }
@media (max-width:1023px) { .footer-grid { grid-template-columns:1fr 1fr; gap:24px; } }
@media (max-width:639px)  { .footer-grid { grid-template-columns:1fr; } }

.footer-brand { display:flex; flex-direction:column; }
.footer-logo  { font-family:var(--font-display); font-size:21px; font-weight:400; color:var(--white); margin-bottom:3px; display:block; }
.footer-location { font-size:10px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.28); display:block; margin-bottom:14px; }
.footer-desc  { font-size:12px; font-weight:300; color:rgba(255,255,255,.38); line-height:1.65; max-width:240px; }

.footer-col-title { font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.26); margin-bottom:14px; }
.footer-links { display:flex; flex-direction:column; gap:9px; }
.footer-link  { font-size:13px; font-weight:300; color:rgba(255,255,255,.5); transition:color .15s; display:block; }
.footer-link:hover { color:var(--white); }

.footer-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:22px; border-top:1px solid rgba(255,255,255,.07); flex-wrap:wrap; gap:12px; }
.footer-copy   { font-size:11px; font-weight:300; color:rgba(255,255,255,.26); }
.footer-social { display:flex; gap:8px; }
.social-icon {
  width:30px; height:30px; border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.38); transition:all .2s;
}
.social-icon:hover { border-color:rgba(255,255,255,.36); color:var(--white); background:rgba(255,255,255,.07); }

/* ══════════════════════════════════════════════════════════
   STICKY MOBILE CTA BAR
══════════════════════════════════════════════════════════ */
.sticky-cta {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:var(--forest-deep); padding:12px 20px; z-index:90;
  box-shadow:0 -4px 20px rgba(0,0,0,.2);
  align-items:center; justify-content:space-between; gap:16px;
  transform:translateY(100%); transition:transform .3s var(--ease-out);
}
.sticky-cta.visible { transform:translateY(0); }
.sticky-cta-left  { display:flex; flex-direction:column; gap:2px; }
.sticky-cta-label { font-size:11px; color:rgba(255,255,255,.55); }
.sticky-cta-price { font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--white); }
.sticky-cta-btn   { background:var(--white); color:var(--forest-deep); font-size:14px; font-weight:500; padding:10px 22px; border-radius:var(--r-full); white-space:nowrap; flex-shrink:0; transition:opacity .15s; }
.sticky-cta-btn:hover { opacity:.9; }
@media (max-width:767px) { .sticky-cta { display:flex; } }
