:root {
  --cliffton-forest: #23352f;
  --cliffton-deep: #1b2a27;
  --cliffton-gold: #c8a45a;
  --cliffton-gold-dark: #a87b2a;
  --cliffton-ivory: #f8f5ee;
}

html {
  scroll-behavior: smooth;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 94;
  height: 160px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(250, 245, 239, 0.96) 0%, rgba(250, 245, 239, 0.62) 45%, rgba(250, 245, 239, 0.16) 76%, rgba(250, 245, 239, 0) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 44%, rgba(0, 0, 0, 0.22) 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.78) 44%, rgba(0, 0, 0, 0.22) 78%, transparent 100%);
}

.site-nav {
  z-index: 90 !important;
}

.hero-slider-nav {
  display: none !important;
}

body.universal-shell-ready .site-shell > .site-nav,
body.universal-shell-ready .site-shell > footer:not(.universal-footer) {
  display: none !important;
}

.universal-site-nav {
  position: fixed;
  top: 16px;
  left: 24px;
  right: 24px;
  z-index: 95;
  display: flex;
  width: auto;
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 26px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 999px;
  background: #FAF5EF;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  font-family: Manrope, sans-serif;
}

.universal-brand img {
  display: block;
  width: auto;
  height: 64px;
}

.universal-desktop-links {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}

.universal-desktop-links a {
  color: var(--cliffton-forest);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.universal-desktop-links .universal-book {
  padding: 12px 23px;
  border-radius: 999px;
  background: var(--cliffton-gold);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.universal-menu-trigger,
.universal-mobile-backdrop,
.universal-mobile-drawer {
  display: none;
}

.universal-mobile-drawer {
  font-family: Manrope, sans-serif;
}

.hero-cta:first-child,
.mobile-book-bar,
.mobile-menu-cta,
.universal-book,
.universal-mobile-book {
  color: #fff !important;
}

.universal-footer {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 8vw, 100px) clamp(20px, 5vw, 80px) 32px;
  background: var(--cliffton-deep);
  color: var(--cliffton-ivory);
  font-family: Manrope, sans-serif;
}

.universal-footer-inner {
  display: grid;
  max-width: 1340px;
  margin: 0 auto;
  padding-bottom: 60px;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(155px, 1fr));
  gap: clamp(30px, 4vw, 56px);
  border-bottom: 1px solid rgba(248, 245, 238, 0.12);
}

.universal-footer-brand img {
  display: block;
  width: auto;
  height: 58px;
  margin-bottom: 20px;
}

.universal-footer h2 {
  margin: 0 0 20px;
  color: var(--cliffton-gold);
  font-family: Manrope, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.universal-footer p,
.universal-footer a {
  display: block;
  margin: 0 0 12px;
  color: #D9DDD8;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.65;
}

.universal-footer-bottom {
  display: flex;
  max-width: 1340px;
  margin: 0 auto;
  padding-top: 26px;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--cliffton-sage, #8E9C8D);
  font-size: 13px;
}

.mobile-menu-trigger,
.mobile-menu-backdrop,
.mobile-menu-drawer,
.mobile-book-bar {
  display: none;
}

.floating-whatsapp {
  background: var(--cliffton-deep) !important;
  animation: whatsappNudge 6s ease-in-out infinite;
  will-change: transform;
}

.floating-whatsapp:hover {
  background: var(--cliffton-forest) !important;
  transform: translateY(-3px);
}

.floating-whatsapp {
  font-size: 0 !important;
}

.floating-whatsapp > svg {
  display: none;
}

.floating-whatsapp::before {
  content: "";
  width: 34px;
  height: 34px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9.4 3 4 8.4 4 15c0 2.6.8 5 2.3 7.1L4.4 28l6.1-1.9A11.9 11.9 0 0 0 16 27c6.6 0 12-5.4 12-12S22.6 3 16 3Z' fill='%2325D366'/%3E%3Cpath d='M12.1 10.2c-.4.1-.9.6-1.2 1.1-.3.5-.5 1.1-.5 1.8 0 1.1.4 2.2 1.2 3.4 1.5 2.4 3.7 4.3 6.3 5.2.8.3 1.6.4 2.2.3.7-.1 1.5-.6 1.8-1.3.2-.4.2-.9.1-1.1-.1-.2-2.4-1.2-2.7-1.3-.3-.1-.5-.1-.7.1l-.6.8c-.2.2-.4.3-.7.1-1.8-.8-3.2-2.2-4-4-.1-.3 0-.5.2-.7l.6-.6c.2-.2.2-.4.1-.6l-1-2.4c-.1-.3-.3-.5-.6-.5h-.5Z' fill='%23fff'/%3E%3C/svg%3E");
}

.floating-call {
  font-size: 0 !important;
}

.floating-call > svg {
  display: none;
}

.floating-call::before {
  content: "";
  width: 24px;
  height: 24px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.69 2.8a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.56 2.81.69A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
}

@keyframes whatsappNudge {
  0%, 82%, 100% { transform: rotate(0deg) scale(1); }
  85% { transform: rotate(-7deg) scale(1.04); }
  88% { transform: rotate(7deg) scale(1.04); }
  91% { transform: rotate(-5deg) scale(1.03); }
  94% { transform: rotate(5deg) scale(1.03); }
  97% { transform: rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .floating-whatsapp { animation: none; }
}

@media (max-width: 960px) {
  body::after {
    content: "";
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 79;
    height: 160px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(250, 245, 239, 0) 0%, rgba(250, 245, 239, 0.14) 28%, rgba(250, 245, 239, 0.58) 64%, rgba(250, 245, 239, 0.94) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.18) 24%, rgba(0, 0, 0, 0.72) 66%, #000 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.18) 24%, rgba(0, 0, 0, 0.72) 66%, #000 100%);
  }

  #book {
    padding: 26px 18px !important;
    border-radius: 22px !important;
  }

  .full-screen-hero {
    align-items: center !important;
  }

  .hero-copy-home {
    width: 100%;
    padding-bottom: 0 !important;
  }

  .hero-copy-property {
    top: 50% !important;
    bottom: auto !important;
    translate: 0 -50%;
  }

  footer img[src$="logo-dark.png"] {
    display: block;
    width: 100% !important;
    max-width: 1340px;
    height: auto !important;
  }

  footer > div:first-child > div:first-child {
    grid-column: 1 / -1;
  }

  .universal-site-nav {
    top: 10px;
    left: 10px;
    right: 10px;
    padding: 7px 10px 7px 14px;
    border-radius: 20px;
  }

  .universal-brand img {
    height: 54px;
    max-width: 205px;
    object-fit: contain;
  }

  .universal-desktop-links {
    display: none;
  }

  .universal-menu-trigger {
    display: flex;
    width: 46px;
    height: 46px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-shrink: 0;
    border: 0;
    border-radius: 14px;
    background: var(--cliffton-forest);
    color: var(--cliffton-ivory);
  }

  .universal-menu-trigger span {
    width: 21px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  body.universal-menu-open {
    overflow: hidden;
  }

  body.universal-menu-open .universal-mobile-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    border: 0;
    background: rgba(14, 25, 22, 0.58);
    backdrop-filter: blur(4px);
  }

  body.universal-menu-open .universal-mobile-drawer {
    display: flex;
    position: fixed;
    top: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 120;
    width: min(390px, calc(100vw - 20px));
    padding: 24px;
    flex-direction: column;
    overflow-y: auto;
    border-radius: 24px;
    background: var(--cliffton-ivory);
    box-shadow: 0 24px 70px rgba(15, 30, 26, 0.32);
  }

  .universal-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(35, 53, 47, 0.14);
  }

  .universal-menu-head img {
    width: auto;
    height: 54px;
    max-width: 205px;
  }

  .universal-menu-head button {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(35, 53, 47, 0.18);
    border-radius: 50%;
    background: #fff;
    color: var(--cliffton-forest);
    font-size: 26px;
  }

  .universal-mobile-links {
    display: flex;
    padding: 18px 0;
    flex-direction: column;
    gap: 3px;
  }

  .universal-mobile-links a {
    display: flex;
    min-height: 48px;
    padding: 9px 12px;
    align-items: center;
    border-radius: 12px;
    color: var(--cliffton-forest);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
  }

  .universal-mobile-book {
    display: flex;
    min-height: 56px;
    margin-top: auto;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--cliffton-gold);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .universal-footer-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .universal-footer-brand img {
    width: 100% !important;
    max-width: 1340px;
    height: auto !important;
  }

  .hero-kicker {
    display: inline-flex;
    width: fit-content;
    margin-bottom: 12px !important;
    padding: 4px 8px;
    border: 1px solid rgba(200, 217, 216, 0.55);
    border-radius: 999px;
    font-size: 10px !important;
    line-height: 1.2;
    letter-spacing: 0.14em !important;
  }

  .hero-description {
    margin-bottom: 24px !important;
    font-size: 15px !important;
  }

  .hero-cta-row {
    width: 100%;
    max-width: 360px;
    gap: 8px !important;
  }

  .hero-cta-row .hero-cta:first-child {
    display: none;
  }

  .hero-cta-row .hero-cta:last-child {
    flex: 0 0 auto;
    min-width: 170px;
  }

  .hero-cta {
    display: inline-flex;
    flex: 1 1 0;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding: 13px 8px !important;
    border-radius: 11px !important;
    font-size: 11px !important;
    line-height: 1.1;
    letter-spacing: 0.045em !important;
    white-space: nowrap;
  }

  .hero-slider-nav {
    top: 50% !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    transform: translateY(-50%);
    justify-content: space-between;
    padding: 0 7px;
    pointer-events: none;
  }

  .hero-slider-button {
    width: 34px !important;
    height: 34px !important;
    padding: 0;
    font-size: 16px !important;
    line-height: 1;
    pointer-events: auto;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .location-map-card {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .location-map-frame,
  .location-map-frame iframe {
    height: 240px !important;
  }
  .site-shell {
    padding-bottom: 86px;
  }

  .site-nav {
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    flex-wrap: nowrap !important;
  }

  .site-nav img {
    height: 48px !important;
    max-width: 190px;
    object-fit: contain;
  }

  .desktop-nav-links {
    display: none !important;
  }

  .mobile-menu-trigger {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 14px;
    background: var(--cliffton-forest);
    color: var(--cliffton-ivory);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
  }

  .mobile-menu-trigger {
    display: flex;
  }

  .mobile-menu-trigger span {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 110;
    border: 0;
    background: rgba(14, 25, 22, 0.58);
    backdrop-filter: blur(4px);
  }

  .mobile-menu-drawer {
    display: flex;
    position: fixed;
    top: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 120;
    width: min(390px, calc(100vw - 20px));
    padding: 24px;
    border-radius: 24px;
    background: var(--cliffton-ivory);
    box-shadow: 0 24px 70px rgba(15, 30, 26, 0.32);
    flex-direction: column;
    overflow-y: auto;
  }

  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(35, 53, 47, 0.14);
  }

  .mobile-menu-head img {
    height: 48px;
    width: auto;
    max-width: 190px;
  }

  .mobile-menu-close {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(35, 53, 47, 0.18);
    background: #fff;
    color: var(--cliffton-forest);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }

  .mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 22px 0;
  }

  .mobile-menu-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 10px 12px;
    border-radius: 13px;
    color: var(--cliffton-forest);
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
  }

  .mobile-menu-links a:hover,
  .mobile-menu-links a:focus-visible {
    background: #efe9dd;
  }

  .mobile-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    margin-top: auto;
    border-radius: 15px;
    background: var(--cliffton-gold);
    color: var(--cliffton-deep);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mobile-book-bar {
    display: flex;
    position: fixed;
    left: 12px;
    right: 132px;
    bottom: 10px;
    z-index: 80;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 17px;
    background: var(--cliffton-gold);
    color: #fff;
    box-shadow: 0 14px 36px rgba(20, 34, 31, 0.3);
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .floating-whatsapp {
    right: 12px !important;
    bottom: 10px !important;
    width: 52px !important;
    height: 58px !important;
    border-radius: 15px !important;
    z-index: 82 !important;
    animation: none;
  }

  .floating-call {
    display: flex !important;
    left: auto !important;
    right: 72px !important;
    bottom: 10px !important;
    width: 52px !important;
    height: 58px !important;
    border-radius: 15px !important;
    background: var(--cliffton-deep) !important;
    z-index: 82 !important;
  }
}

@media (max-width: 560px) {
  .details-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .details-grid > div {
    padding: 30px 14px !important;
  }

  .site-nav img,
  .mobile-menu-head img {
    height: 44px !important;
    max-width: 170px;
  }

  .mobile-menu-trigger {
    width: 44px;
    height: 44px;
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .site-nav {
    left: 18px !important;
    right: 18px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .desktop-nav-links {
    gap: 16px !important;
  }

  .desktop-nav-links a {
    font-size: 13px !important;
  }
}

@media (min-width: 961px) {
  body {
    zoom: 0.9;
  }

  .full-screen-hero {
    height: 111.112vh !important;
    height: 111.112svh !important;
    min-height: 111.112svh !important;
  }

  .full-screen-hero .hero-slider-nav {
    bottom: 24% !important;
  }

  .property-intro-grid {
    grid-template-columns: minmax(0, 7fr) minmax(340px, 3fr) !important;
    gap: clamp(36px, 4vw, 64px) !important;
  }
}