/* ==========================================================================
   LIVE IN GUANACASTE — V2 DESIGN SYSTEM
   One canonical token file + component set, shared by every page template.
   Palette/typefaces carried forward from the current production site;
   modernization = consolidated tokens, 8px spacing scale, restrained motion.
   ========================================================================== */

:root{
  /* --- core palette (canonical names — the single source of truth) --- */
  --ink:#141F19; --ink2:#1D2C24; --clay:#9A4B29; --clay2:#B85A32;
  --sand:#EFE8D8; --sand2:#E6DECB; --sanddim:#C9C0AC; --inkdim:#5C564A;
  --brass:#C9A227; --line-d:rgba(239,232,216,0.16); --line-l:rgba(20,31,25,0.14);
  --line-strong:rgba(20,31,25,0.22);
  --white:#FFFFFF;
  --ok:#3E6B4F; --err:#A23B2E;

  /* --- spacing scale (8px base) --- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px; --sp-8:64px; --sp-12:96px; --sp-16:128px;

  /* --- type scale (desktop / mobile handled via clamp) --- */
  --fs-display: clamp(32px, 4.6vw, 62px);
  --fs-h1: clamp(28px, 3.4vw, 42px);
  --fs-h2: clamp(22px, 2.4vw, 30px);
  --fs-h3: clamp(18px, 1.6vw, 21px);
  --fs-body: 16px;
  --fs-body-lg: 18px;
  --fs-label: 12.5px;

  --radius-s: 6px; --radius-m: 10px; --radius-l: 18px;
  --shadow-card: 0 8px 28px rgba(20,31,25,0.10);
  --shadow-card-hover: 0 16px 40px rgba(20,31,25,0.16);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{background:var(--sand); color:var(--ink); font-family:'Inter',sans-serif; font-size:var(--fs-body); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; width:100%;}
/* off-canvas panels (mobile nav) use fixed positioning + transform to sit off-screen when closed;
   some browsers still count that translated position in document scrollWidth, so overflow-x:hidden
   above is the safety net — the page itself never needs horizontal scroll. */
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
ul{list-style:none;}
em{font-style:italic; color:var(--clay2); font-weight:inherit;}
h1,h2,h3,h4{font-family:'Fraunces',serif; font-weight:500; line-height:1.15; letter-spacing:-0.01em;}
.wrap{max-width:1220px; margin:0 auto; padding:0 32px;}

/* ---------- language toggle ---------- */
body[data-lang="en"] .t-fr, body[data-lang="en"] .t-es{display:none;}
body[data-lang="fr"] .t-en, body[data-lang="fr"] .t-es{display:none;}
body[data-lang="es"] .t-en, body[data-lang="es"] .t-fr{display:none;}

/* ---------- eyebrow / label ---------- */
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:var(--fs-label); letter-spacing:0.10em; text-transform:uppercase; color:var(--clay2);}
.eyebrow.on-dark{color:var(--brass);}

/* ---------- utility bar + header ---------- */
.utility-bar{background:var(--ink); color:var(--sanddim); font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.04em;}
.utility-bar .wrap{display:flex; justify-content:space-between; align-items:center; padding:6px 32px; gap:16px;}
.utility-bar a{color:var(--sanddim); opacity:.85;}
.utility-bar a:hover{opacity:1; color:var(--brass);}
.lang-switch{display:flex; gap:10px;}
.lang-switch a{color:var(--sanddim); opacity:.85;}
.lang-switch a:hover{opacity:1; color:var(--brass);}
.lang-switch a.active{color:var(--brass); font-weight:600; opacity:1;}

.topbar{position:sticky; top:0; z-index:60; background:rgba(20,31,25,0.96); backdrop-filter:blur(10px); border-bottom:1px solid var(--line-d); transition:padding .25s var(--ease);}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; padding:18px 32px; gap:24px;}
.topbar.compact .wrap{padding:11px 32px;}
.logo{font-family:'Fraunces',serif; font-size:19px; color:var(--sand); font-weight:500; white-space:nowrap;}
.logo em{color:var(--clay2);}
.logo .sub{display:block; font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.12em; color:var(--sanddim); text-transform:uppercase; margin-top:2px;}

.navlinks{display:flex; align-items:center; gap:28px; font-size:12.5px; color:var(--sanddim); font-family:'IBM Plex Mono',monospace; letter-spacing:.03em; text-transform:uppercase;}
.navlinks > li{position:relative;}
.navlinks a{color:var(--sanddim); padding:8px 0; transition:color .2s;}
.navlinks a:hover, .navlinks .current > a{color:var(--sand);}
.navlinks .current > a{color:var(--brass);}
.nav-cta-group{display:flex; align-items:center; gap:16px;}

/* mega menu */
.has-mega{display:flex; align-items:center; gap:5px;}
.mega{position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%); width:560px;
  background:var(--ink2); border:1px solid var(--line-d); border-radius:var(--radius-m); box-shadow:var(--shadow-card-hover);
  padding:26px; display:grid; grid-template-columns:1fr 1fr; gap:28px; opacity:0; visibility:hidden; translate:0 8px;
  transition:opacity .2s var(--ease), translate .2s var(--ease), visibility .2s;}
.has-mega:hover .mega, .has-mega:focus-within .mega{opacity:1; visibility:visible; translate:0 0;}
.mega.mega-services{grid-template-columns:1fr; width:360px;}
.mega-col h5{font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); margin-bottom:12px;}
.mega-item{display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-d); align-items:center;}
.mega-item:last-child{border-bottom:none;}
.mega-item img{width:56px; height:44px; object-fit:cover; border-radius:4px; flex:none;}
.mega-item .t{font-family:'Inter',sans-serif; font-size:13px; color:var(--sand); text-transform:none; letter-spacing:0; font-weight:600;}
.mega-view-all{display:block; margin-top:12px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.04em; color:var(--clay2); text-transform:none;}
.mega-view-all:hover{color:var(--brass);}
.mega-item .p{font-family:'Inter',sans-serif; font-size:11.5px; color:var(--sanddim); text-transform:none; letter-spacing:0;}

.btn{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:13px 22px; border-radius:999px; border:1px solid transparent; transition:all .2s var(--ease); white-space:nowrap;}
.btn-primary{background:var(--clay); color:var(--sand); border-color:var(--clay);}
.btn-primary:hover{background:var(--clay2); transform:translateY(-1px); box-shadow:0 8px 18px rgba(154,75,41,.28);}
.btn-secondary{background:transparent; color:var(--sand); border-color:var(--line-d);}
.btn-secondary:hover{border-color:var(--sand); background:rgba(239,232,216,.06);}
.btn-ghost-dark{background:transparent; color:var(--ink); border-color:var(--line-l);}
.btn-ghost-dark:hover{border-color:var(--ink); background:rgba(20,31,25,.05);}
.btn-text{padding:0; border-radius:0; text-transform:none; font-family:'Inter',sans-serif; letter-spacing:0; font-weight:600; font-size:14px; color:var(--clay2); border-bottom:1px solid currentColor;}

/* hamburger */
.hamburger{display:none; width:42px; height:42px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line-d); border-radius:8px;}
.hamburger span, .hamburger::before, .hamburger::after{content:""; display:block; width:20px; height:1.5px; background:var(--sand); position:relative; transition:all .25s var(--ease);}
.hamburger span{margin:4px 0;}

/* mobile nav panel */
.mobile-nav-overlay{position:fixed; inset:0; background:rgba(20,31,25,.55); opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s; z-index:90;}
.mobile-nav-overlay.open{opacity:1; visibility:visible;}
.mobile-nav-panel{position:fixed; top:0; right:0; bottom:0; width:min(84vw, 380px); background:var(--ink2); z-index:95;
  transform:translateX(100%); transition:transform .3s var(--ease); display:flex; flex-direction:column;
  padding-top:max(20px, env(safe-area-inset-top)); padding-bottom:max(20px, env(safe-area-inset-bottom));
  padding-left:24px; padding-right:24px; overflow-y:auto;}
.mobile-nav-panel.open{transform:translateX(0);}
body.nav-open{overflow:hidden;}
.mnp-close{align-self:flex-end; width:38px; height:38px; border:1px solid var(--line-d); border-radius:8px; background:transparent; color:var(--sand); font-size:18px;}
.mnp-group{margin-top:18px;}
.mnp-group summary{list-style:none; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--sand); padding:14px 0; border-bottom:1px solid var(--line-d); display:flex; justify-content:space-between; cursor:pointer;}
.mnp-group summary::-webkit-details-marker{display:none;}
.mnp-sub{padding:6px 0 14px 12px; display:flex; flex-direction:column; gap:10px;}
.mnp-sub a{font-size:13.5px; color:var(--sanddim);}
.mnp-link{display:block; padding:14px 0; border-bottom:1px solid var(--line-d); font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--sand);}
.mnp-foot-links{display:flex; flex-direction:column; gap:10px; padding:14px 0;}
.mnp-foot-links a{font-size:13px; color:var(--sanddim);}
.mnp-lang{display:flex; gap:14px; padding:14px 0; font-family:'IBM Plex Mono',monospace; font-size:13px;}
.mnp-lang a{color:var(--sanddim); padding:6px 10px; border:1px solid var(--line-d); border-radius:6px;}
.mnp-lang a.active{color:var(--brass); border-color:var(--brass);}
.mnp-cta{margin-top:auto; padding-top:16px;}
.mnp-cta .btn{width:100%; justify-content:center;}

/* ---------- persistent WhatsApp ---------- */
.wa-float{position:fixed; right:20px; bottom:20px; z-index:80; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.25);
  transition:transform .2s var(--ease);}
.wa-float:hover{transform:scale(1.06);}
.wa-float svg{width:28px; height:28px; fill:#fff;}
@media (max-width:768px){.wa-float{right:16px; bottom:max(16px, env(safe-area-inset-bottom));}}

/* ---------- hero ---------- */
.hero{position:relative; min-height:78vh; display:flex; align-items:flex-end; color:var(--sand); overflow:hidden;}
.hero .bg{position:absolute; inset:0; background-size:cover; background-position:center;}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,31,25,.35) 0%, rgba(20,31,25,.55) 55%, rgba(20,31,25,.88) 100%);}
.hero-inner{position:relative; z-index:2; padding-bottom:var(--sp-8); width:100%;}
.hero h1{font-size:var(--fs-display); color:var(--sand); max-width:820px; margin-top:14px;}
.hero .sub{font-size:var(--fs-body-lg); color:var(--sanddim); max-width:560px; margin-top:18px; line-height:1.6;}
.hero .cta-row{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero .trust-strip{margin-top:38px; padding-top:18px; border-top:1px solid var(--line-d); display:flex; gap:26px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.05em; color:var(--sanddim); text-transform:uppercase;}

/* section rhythm */
.section{padding:var(--sp-12) 0;}
.section.tight{padding:var(--sp-8) 0;}
.section.on-dark{background:var(--ink); color:var(--sand);}
.section.on-dark h2, .section.on-dark h3{color:var(--sand);}
.section.on-tint{background:var(--sand2);}
.section-head{max-width:640px; margin-bottom:var(--sp-6);}
.section-head h2{margin-top:10px;}
.section-head p{margin-top:14px; color:var(--inkdim); font-size:var(--fs-body-lg);}
.on-dark .section-head p{color:var(--sanddim);}

/* grids */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3);}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); text-align:center;}
.stat-grid .num{font-family:'IBM Plex Mono',monospace; font-size:28px; color:var(--brass); font-weight:600;}
.stat-grid .lbl{font-size:12px; color:var(--inkdim); margin-top:6px; text-transform:uppercase; letter-spacing:.04em;}
.on-dark .stat-grid .lbl{color:var(--sanddim);}

/* ---------- cards (single configurable component) ---------- */
.card{background:var(--white); border:1px solid var(--line-l); border-radius:var(--radius-m); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-card-hover);}
.card-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--sanddim);}
.card-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease);}
.card:hover .card-media img{transform:scale(1.05);}
.card.card-16x9 .card-media{aspect-ratio:16/9;}
.card-badge{position:absolute; top:14px; left:14px; background:var(--brass); color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:6px 12px; border-radius:999px;}
.card-body{padding:22px;}
.card-eyebrow{font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--clay2); letter-spacing:.06em; text-transform:uppercase;}
.card h3{font-size:20px; margin-top:8px;}
.card .price{font-family:'IBM Plex Mono',monospace; font-size:17px; color:var(--ink); font-weight:600; margin-top:8px;}
.card .facts{margin-top:10px; font-size:13.5px; color:var(--inkdim);}
.card-flagship{grid-column:span 1;}
.cards-flagship-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);}
.cards-dev-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); margin-top:var(--sp-3);}
.card.card-dev{background:var(--sand2); box-shadow:none; border:1px solid var(--line-l);}

/* icon/value cards */
.icon-card{padding:26px; border:1px solid var(--line-l); border-radius:var(--radius-m); background:var(--white);}
.icon-card .ic{width:38px; height:38px; color:var(--clay2); margin-bottom:14px;}
.icon-card h4{font-size:17px; margin-bottom:8px;}
.icon-card p{font-size:14.5px; color:var(--inkdim);}
.on-dark .icon-card{background:var(--ink2); border-color:var(--line-d);}
.on-dark .icon-card p{color:var(--sanddim);}

/* team cards */
.team-card{text-align:center;}
.team-photo{width:88px; height:88px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; background:var(--sand2); color:var(--clay2);}
.team-photo svg{width:36px; height:36px;}
.team-card .role{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--clay2); margin-bottom:8px;}
.team-card h4{font-size:17px; margin-bottom:8px;}

/* note / disclosure boxes */
.note-box{border:1px solid var(--line-strong); border-left:4px solid var(--clay2); border-radius:var(--radius-s); padding:18px 22px; background:var(--sand2); font-size:14px; color:var(--inkdim); margin-top:var(--sp-3);}
.note-box.legal{border-left-color:var(--ink);}
.on-dark .note-box{background:rgba(239,232,216,.05); color:var(--sanddim);}

/* forms */
.form-panel{background:var(--white); border:1px solid var(--line-l); border-radius:var(--radius-l); padding:var(--sp-4); box-shadow:var(--shadow-card);}
.on-dark .form-panel{background:var(--ink2); border-color:var(--line-d);}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px;}
.f-group{display:flex; flex-direction:column; gap:6px;}
.f-group.full{grid-column:1/-1;}
.f-group label{font-size:12.5px; font-family:'IBM Plex Mono',monospace; letter-spacing:.03em; text-transform:uppercase; color:var(--inkdim);}
.on-dark .f-group label{color:var(--sanddim);}
.f-group input, .f-group select, .f-group textarea{font-family:'Inter',sans-serif; font-size:15px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:8px; background:var(--sand); color:var(--ink);}
.on-dark .f-group input, .on-dark .f-group select, .on-dark .f-group textarea{background:rgba(239,232,216,.06); border-color:var(--line-d); color:var(--sand);}
.f-group input:focus, .f-group select:focus, .f-group textarea:focus{outline:2px solid var(--clay2); outline-offset:1px;}
.f-check{display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--inkdim);}
.on-dark .f-check{color:var(--sanddim);}
.f-submit{width:100%; justify-content:center; margin-top:8px;}
.f-msg{font-size:12.5px; margin-top:10px;}
.f-msg.err{color:var(--err);}
.confirm-view{display:none; text-align:center; padding:var(--sp-4) 0;}
.confirm-view .ic-ok{width:52px; height:52px; margin:0 auto 16px; color:var(--ok);}

/* gallery / lightbox (shared component) */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.gallery-grid a{display:block; aspect-ratio:4/3; overflow:hidden; border-radius:6px;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .4s;}
.gallery-grid a:hover img{transform:scale(1.06);}
.lightbox{position:fixed; inset:0; background:rgba(10,14,11,.94); z-index:200; display:none; align-items:center; justify-content:center;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw; max-height:82vh; object-fit:contain;}
.lightbox .lb-close, .lightbox .lb-nav{position:absolute; background:transparent; border:none; color:var(--sand); font-size:28px;}
.lightbox .lb-close{top:20px; right:24px;}
.lightbox .lb-prev{left:16px; top:50%; transform:translateY(-50%);}
.lightbox .lb-next{right:16px; top:50%; transform:translateY(-50%);}

/* footer */
footer{background:var(--ink); color:var(--sanddim); padding:var(--sp-8) 0 var(--sp-4);}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:var(--sp-4);}
.footer-grid h5{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); margin-bottom:14px;}
.footer-grid a, .footer-grid li{font-size:13.5px; color:var(--sanddim); margin-bottom:9px; display:block;}
.footer-grid a:hover{color:var(--sand);}
.footer-bottom{border-top:1px solid var(--line-d); margin-top:var(--sp-6); padding-top:var(--sp-3); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:11.5px; color:var(--inkdim);}

/* scroll reveal (restrained) */
/* Content is always visible by default — never gated behind JS/IntersectionObserver timing.
   (An earlier opacity:0-until-scrolled version could leave real content invisible if JS was
   slow, disabled, or a tool captured the page before the observer fired — removed for reliability.)
   The .reveal class name is kept on markup for structure/possible future use, but carries no
   hidden state; cards/buttons still get a restrained hover lift, which is enough interaction polish. */
.reveal{opacity:1; translate:0 0;}

/* breadcrumb */
.breadcrumb{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--inkdim); padding:16px 0;}
.breadcrumb a{color:var(--clay2);}

/* masterplan (Coco Haven interactive component) */
.masterplan{position:relative; background:var(--ink2); border-radius:var(--radius-l); padding:var(--sp-4); overflow:hidden;}
.mp-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:10px;}
.mp-lot{position:relative; aspect-ratio:1; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--sand); border:1px solid var(--line-d); transition:transform .2s;}
.mp-lot:hover{transform:scale(1.05);}
.mp-lot.status-available{background:rgba(154,75,41,.35);}
.mp-lot.status-sold{background:rgba(20,31,25,.6); color:var(--sanddim); opacity:.55;}
.mp-lot.status-reserved{background:rgba(201,162,39,.28);}
.mp-lot.status-common{background:rgba(239,232,216,.10); border-style:dashed;}
.mp-legend{display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; font-size:12px; color:var(--sanddim);}
.mp-legend span{display:inline-flex; align-items:center; gap:7px;}
.mp-legend i{width:12px; height:12px; border-radius:3px; display:inline-block;}
.mp-panel{margin-top:20px; padding:18px; background:rgba(239,232,216,.06); border-radius:var(--radius-s); border:1px solid var(--line-d); color:var(--sand); font-size:14px; display:none;}
.mp-panel.open{display:block;}

/* ==================== RESPONSIVE ==================== */
@media (max-width:1030px){
  .navlinks, .nav-cta-group .btn-secondary, .nav-cta-group .lang-switch{display:none;}
  .hamburger{display:flex;}
  .mega{display:none;}
}
@media (min-width:1031px){
  .mobile-nav-panel, .mobile-nav-overlay{display:none;}
}
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .cards-flagship-row, .cards-dev-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (min-width:769px) and (max-width:1024px){
  /* Tablet-only: at this width the 4-col stat-grid stays intact (see .stat-grid{grid-template-columns:repeat(4,1fr)}
     above and the 768px collapse below), but wide multi-word KPI values like "Verified reviews" can wrap onto
     two lines. Scoped to .stat-grid-mgmt (Management page KPI row) only, so no other stat-grid usage is affected. */
  .stat-grid-mgmt .num{font-size:19px; white-space:nowrap;}
}
@media (max-width:768px){
  .wrap{padding:0 20px;}
  .grid-2, .grid-3, .grid-4{grid-template-columns:1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .f-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .mp-grid{grid-template-columns:repeat(4,1fr);}
  .hero{min-height:88vh;}
  .section{padding:var(--sp-8) 0;}
}
@media (max-width:430px){
  .mp-grid{grid-template-columns:repeat(3,1fr);}
}