:root{
    --bg:#ffffff;
    --text:#0f172a;
    --muted:#6b7280;
    --soft:#f5f7ff;
    --primary:#1d4ed8;
    --primary-700:#1e40af;
    --indigo:#4f46e5;
    --dark:#0b1020;
    --dark-2:#0b1533;
    --glass:rgba(255,255,255,0.1);
    --glass-border:rgba(255,255,255,0.2);
    --white:#fff;
  }
  
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body.site{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; color:var(--text); background:var(--bg); line-height:1.6}
  
  /* Layout helpers */
  .container{max-width:1200px;padding:0 1rem;margin:0 auto}
  .narrow{max-width:900px}
  .center{text-align:center}
  .mid{align-items:center}
  /* NAVBAR */
.nav{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:#ffffff; color:var(--text);
    box-shadow:0 1px 8px rgba(15,23,42,.08);
  }
  .nav__inner{position:relative; display:flex; align-items:center; justify-content:space-between; height:64px}
  .logo{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--text); font-weight:800; letter-spacing:.5px}
  .logo__img{width:50px; height:40px}
  .logo__text{font-size:1.05rem}
  
  /* Center links like the reference */
  .nav__links{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; list-style:none; gap:1.5rem; margin:0; padding:0}
  .nav__links a{color:#111827; text-decoration:none; font-weight:700; transition:color .2s}
  .nav__links a:hover{color:var(--primary)}
  
  .nav__actions{display:flex; align-items:center; gap:.5rem}
  .btn--sm{padding:.6rem 1rem; font-size:.95rem; border-radius:.6rem}
  .btn--block{display:block; width:100%}
  
  /* Mobile burger (CSS only) */
  .nav__checkbox{display:none}
  .nav__burger{
    display:inline-flex; flex-direction:column; gap:5px; cursor:pointer; padding:.5rem; margin-left:auto;
  }
  .nav__burger span{width:22px; height:2px; background:#fff; border-radius:2px; display:block; transition:.25s}
  #nav-toggle:checked + .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  #nav-toggle:checked + .nav__burger span:nth-child(2){opacity:0}
  #nav-toggle:checked + .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  
  /* Mobile menu panel */
  #nav-toggle ~ .nav__links,
  #nav-toggle ~ .nav__actions{display:none}
  
  @media (max-width:767.98px){
    /* Drop panel below the bar on mobile */
    #nav-toggle:checked ~ .nav__links,
    #nav-toggle:checked ~ .nav__actions{
      display:block; background:rgba(10,15,30,.9); backdrop-filter: blur(10px);
    }
    .nav__links{padding:0 1rem 1rem; display:grid; gap:.75rem}
    .nav__links li a{padding:.5rem 0; display:block}
    .nav__actions{padding:0 1rem 1rem}
  }
  
  @media (min-width:768px){
    .nav__burger{display:none}
    .nav__links{display:flex}
    .nav__actions{display:block}
  }
  
  /* Ensure page content not hidden under fixed nav */
  .hero{padding-top:64px}
  
  /* FOOTER */
  .footer{background:#0f172a; color:#e2e8f0; margin-top:0}
  .footer__grid{
    display:grid; gap:2rem; padding:3rem 1rem; /* keep side padding on mobile */
    grid-template-columns:1fr; 
  }
  .footer__col .footer__title{
    margin:0 0 .75rem; font-weight:800; font-size:1.05rem; color:#fff;
  }
  .footer__list{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
  .footer__list a{color:#cbd5e1; text-decoration:none}
  .footer__list a:hover{color:#fff}
  
  .footer__brand{display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem}
  .socials{display:flex; gap:.5rem; margin-top:1rem}
  .socials a{
    width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
    background:#111a33; color:#cbd5e1; text-decoration:none; font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  }
  .socials a:hover{background:#1f2a44; color:#fff}
  
  .footer__bar{border-top:1px solid rgba(255,255,255,.08); background:#0b1226}
  .footer__bar__inner{display:flex; justify-content:space-between; align-items:center; padding:1rem 1rem}
  
  @media (min-width:768px){
    /* Two-column footer: left brand/links, right large form */
    .footer__grid{grid-template-columns:1.1fr 1fr}
    /* Restore bigger breathing room on larger screens if desired */
    .footer__grid{padding:3rem 1rem}
    .footer__bar__inner{padding:1rem 1rem}
  }
  .footer__brand{display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem}
  .footer__logo{width:140px; height:auto; display:block}
  /* Hero */
  .hero{
    position:relative; min-height:100vh; display:grid; place-items:center;
    background: center/cover no-repeat var(--dark);
    background-image: var(--hero, none);
    color:#fff; overflow:hidden;
  }
  .hero__overlay{
    position:absolute; inset:0;
    background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.4), rgba(0,0,0,.7));
  }
  .hero__content{position:relative; z-index:1; max-width:900px; text-align:center; padding:2rem 1rem}
  .hero__badge{
    display:inline-block; padding:.5rem 1rem; border-radius:999px;
    background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.3);
    backdrop-filter:saturate(140%) blur(6px); font-weight:600; margin-bottom:1.5rem;
  }
  .hero__title{font-size:clamp(2.5rem,6vw,4rem); font-weight:800; margin:.25rem 0 1rem}
  .hero__subtitle{font-size:clamp(1rem,2.5vw,1.375rem); color:#d1d5db; margin:0 0 1rem}
  .hero__facts{display:flex; gap:1rem; justify-content:center; align-items:center; color:#e5e7eb; margin:1.25rem 0 2rem}
  .hero__fact{display:flex; align-items:center; gap:.5rem; font-weight:600}
  .hero__dot{opacity:.7}
  .star{color:#fbbf24}
  .hero__cta{display:flex; flex-wrap:wrap; gap:1rem; justify-content:center}
  
  /* Buttons */
  .btn{
    display:inline-flex; gap:.5rem; align-items:center; justify-content:center;
    padding:.875rem 1.75rem; border-radius:.75rem; font-weight:700; text-decoration:none; transition:.25s ease;
    font-size:1rem;
  }
  .btn .icon{font-size:1.1em}
  .btn--primary{background:linear-gradient(90deg,var(--primary), var(--primary-700)); color:#fff}
  .btn--primary:hover{filter:brightness(1.05)}
  /* New pill/button variants for navbar */
  .btn--pill{border-radius:999px; padding:.5rem 1rem}
  .btn--light{background:#fff; color:#111827; border:1px solid rgba(2,6,23,.12); box-shadow:0 1px 2px rgba(2,6,23,.06)}
  .btn--light .icon{color:#b91c1c}
  .btn--light:hover{box-shadow:0 2px 6px rgba(2,6,23,.12)}
  .btn--whatsapp{background:#22c55e; color:#fff}
  .btn--whatsapp:hover{filter:brightness(1.05)}

  /* Hide long labels on small screens, keep icons visible */
  .hide-sm{display:inline}
  @media (max-width:639.98px){
    .hide-sm{display:none}
    /* Exception: in navbar, show full number for the tel button on mobile */
    .nav .nav__actions a[href^="tel"] .hide-sm{display:inline}
    /* Hide WhatsApp button on mobile */
    .nav .btn--whatsapp{display:none}
    .btn--sm{padding:.5rem .7rem}
  }
  .btn--outline{
    color:#fff; border:2px solid #fff; background:transparent;
  }
  .btn--outline:hover{background:#fff; color:#111827}
  
  /* Sections */
  .section{padding:5rem 0; position:relative}
  .section--soft{background:linear-gradient(135deg,#f8fbff 0%, #eef2ff 100%)}
  .section--dark{background:linear-gradient(135deg,#0b1020 0%, #16234f 100%); color:#fff; overflow:hidden}
  .section__head{ text-align:center; margin-bottom:3rem}
  .section__title{font-size:clamp(1.75rem,4vw,2.75rem); margin:0 0 1rem; font-weight:800}
  .section__subtitle{font-size:1.125rem; color:var(--muted); max-width:720px; margin:0 auto 1.25rem}
  .section__underline{width:8rem; height:4px; margin:.5rem auto 0; background:linear-gradient(90deg,#60a5fa,#a78bfa); border-radius:999px}
  .pattern{position:absolute; inset:0; background-image:radial-gradient(transparent 60%, rgba(255,255,255,.08) 61%); opacity:.1; pointer-events:none}
  
  /* Cards, grids */
  .card{
    background:#fff; border-radius:1rem; box-shadow:0 10px 25px rgba(0,0,0,.06); padding:1.25rem;
    transition:.3s transform, .3s box-shadow;
    height:100%; /* ensure equal heights in grid */
  }
  .card.padded{padding:2rem}
  .card:hover{transform:translateY(-6px) scale(1.02); box-shadow:0 18px 35px rgba(0,0,0,.1)}
  .card__title{margin:.5rem 0 0.5rem; font-weight:800; color:#111827}
  .card__icon{font-size:2.25rem; margin:0 auto 0.75rem}
  .card--glass{
    background:var(--glass); color:#fff; border:1px solid var(--glass-border); backdrop-filter: blur(6px) saturate(120%);
  }
  /* Ensure titles on glass cards are white (Project Highlights) */
  .card--glass .card__title{color:#fff}
  .card--glass .muted{color:#d1d5db}
  .round-icon{
    --bg:#2563eb;
    width:4rem; height:4rem; display:grid; place-items:center; border-radius:999px; color:#fff;
    background:var(--bg); margin:0 auto 1.25rem; font-size:1.5rem;
  }
  
  .grid{display:grid; gap:2rem}
  /* Prevent intrinsic content from forcing uneven column widths */
  .grid > *{min-width:0}
  .grid--6{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:1fr}
  .grid--2{grid-template-columns:1fr}
  .map-grid{display:grid; gap:1.25rem; grid-template-columns:1fr}
  
  @media (min-width:640px){
    .grid--3{grid-template-columns:repeat(2,1fr)}
  }
  @media (min-width:768px){
    .grid--4{grid-template-columns:repeat(3,1fr)}
    .grid--2{grid-template-columns:repeat(2,1fr)}
  }
  @media (min-width:1024px){
    .grid--6{grid-template-columns:repeat(6,1fr)}
    .grid--3{grid-template-columns:repeat(3,1fr)}
    .map-grid{grid-template-columns:1fr}
  }
  
  /* Text styles */
  .muted{color:var(--muted)}
  .muted.lg{font-size:1.125rem}
  .prose p{margin:0 0 1.25rem; color:#374151; font-size:1.125rem}
  
  /* Amenities */
  .amenity__icon{font-size:2rem; margin:0 auto .5rem}
  
  /* Gallery */
  .gallery__item{position:relative; overflow:hidden; border-radius:1rem; box-shadow:0 10px 25px rgba(0,0,0,.08); transition:transform .35s}
  .gallery__item:hover{transform:scale(1.015)}
  .gallery__media{position:relative; aspect-ratio:4/3; overflow:hidden}
  .gallery__media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s}
  .gallery__item:hover .gallery__media img{transform:scale(1.08)}
  .gallery__overlay{
    position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.2), transparent);
    opacity:0; transition:opacity .3s;
  }
  .gallery__item:hover .gallery__overlay{opacity:1}
  .gallery__label{
    position:absolute; left:0; right:0; bottom:.5rem; padding:.5rem 1rem; color:#fff; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,.5);
  }
  
  /* Checks list */
  .checks{list-style:none; padding:0; margin:1.25rem 0 0; display:grid; gap:.75rem}
  .checks li{display:flex; gap:.5rem; align-items:flex-start; color:#374151; font-weight:500}
  .checks li::before{content:"✔"; color:#22c55e; flex:0 0 auto; margin-top:.1rem}
  
  /* Map image */
  .map-card{position:relative; border-radius:1rem; overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.09)}
  .map-card img{width:100%; height:24rem; object-fit:cover; display:block; transition:transform .5s}
  .map-card:hover img{transform:scale(1.04)}
  .map-card__overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.25), transparent)}
  
  /* CTA */
  .cta{
    color:#fff; background:linear-gradient(90deg,#0b1020, #0b1533 35%, #1e3a8a 65%, #312e81); overflow:hidden;
  }
  .cta__title{font-size:clamp(1.75rem,4vw,2.75rem); margin:0 0 1rem; font-weight:800}
  .cta__subtitle{max-width:720px; margin:0 auto 1.25rem; color:#cbd5e1; font-size:1.125rem}
  .badges{display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; margin:1rem 0 2rem}
  .badge{display:inline-block; padding:.4rem .8rem; border-radius:999px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.18); color:#fff; backdrop-filter: blur(4px)}
  
  /* Footer */
  .footer{padding:2rem 0; background:#0f172a; color:#94a3b8}
  
  /* A11y helper */
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

  /* MODAL (popup) */
  .modal{position:fixed; inset:0; display:none; z-index:100}
  .modal:target{display:block}
  .modal__overlay{
    position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(2px);
  }
  .modal__dialog{
    position:relative; z-index:1; width:min(680px, calc(100% - 2rem));
    margin:5vh auto; background:#fff; color:#0f172a; border-radius:1rem;
    box-shadow:0 20px 60px rgba(0,0,0,.25); padding:1.25rem;
  }
  @media (min-width:640px){ .modal__dialog{padding:1.75rem} }
  .modal__close{
    position:absolute; top:.75rem; right:.75rem; width:36px; height:36px; line-height:36px;
    text-align:center; text-decoration:none; color:#0f172a; border-radius:.5rem; font-size:1.25rem;
  }
  .modal__close:hover{background:#f3f4f6}
  .modal__title{margin:0 2.25rem .25rem 0; font-size:1.35rem; font-weight:800}
  .modal__subtitle{margin:0 2.25rem 1rem 0; color:#6b7280}

  /* FORMS (shared) */
  .form{display:block}
  .form__row{display:grid; gap:1rem; grid-template-columns:1fr}
  @media (min-width:640px){ .form__row{grid-template-columns:1fr 1fr} }
  .form__field{display:grid; gap:.4rem; margin-bottom:1rem}
  .form__field label{font-weight:600; font-size:.95rem; color:#111827}
  .form__field input,
  .form__field textarea,
  .form__field select{
    width:100%; padding:.7rem .9rem; border-radius:.6rem; border:1px solid #e5e7eb;
    background:#fff; color:#111827; outline:none; transition:border-color .2s, box-shadow .2s;
  }
  .form__field input:focus,
  .form__field textarea:focus,
  .form__field select:focus{
    border-color:#93c5fd; box-shadow:0 0 0 3px rgba(59,130,246,.15);
  }
  .form__actions{display:flex; gap:.75rem; justify-content:flex-end; margin-top:.5rem}

  /* Footer form variants */
  .form--footer .form__field label{color:#e2e8f0}
  .form--footer .form__field input,
  .form--footer .form__field textarea{
    background:#0b1226; border-color:#1f2a44; color:#e2e8f0;
  }
  .form--footer .form__field input::placeholder,
  .form--footer .form__field textarea::placeholder{color:#94a3b8}
  .form--footer .form__field input:focus,
  .form--footer .form__field textarea:focus{
    border-color:#60a5fa; box-shadow:0 0 0 3px rgba(59,130,246,.25);
  }