:root{
  --bg:linear-gradient(135deg, #f6f8fa 0%, #ececf3 100%);
  --ink:#181a20;
  --muted:#8a94a6;
  --line:#ececf3;
  --brand:#bbc6d8;
  --accent:#b4b6c1;
  --accent-2:#dadbe3;
  --card:rgba(255,255,255,0.80);
  --shadow:0 6px 24px 3px rgba(186,189,207,0.18), 0 1.5px 0.5px -1px #dfdfe6;
  --radius:16px;
  --ripple:rgba(154,148,186,.15);
  --nav-blur:blur(20px) saturate(180%);
  --divider:#d6dae4;
}

*,*:before,*:after{box-sizing:border-box}
html,body{
  background:var(--bg)!important;
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  font-size:18px;
  line-height:1.6;
  min-height:100vh;
  margin:0;padding:0;
  overflow-x: hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* Mobile base font size */
@media (max-width: 768px) {
  html, body {
    font-size: 16px;
  }
}

/* NAVIGATION - Premium redesign with subtle color */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(135deg, rgba(248, 249, 255, 0.98) 0%, rgba(242, 245, 252, 0.97) 50%, rgba(245, 247, 254, 0.96) 100%);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, rgba(155, 165, 212, 0.3) 0%, rgba(180, 190, 220, 0.5) 50%, rgba(155, 165, 212, 0.3) 100%) 1;
  backdrop-filter: var(--nav-blur);
  box-shadow: 0 4px 24px -8px rgba(140, 155, 200, 0.22), 0 2px 8px rgba(160, 175, 210, 0.12);
  transition: all 0.28s cubic-bezier(0.23, 0.82, 0.47, 1.25);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  font-size: 1.02em;
  max-width:1200px;
  margin:0 auto;
  padding-left:4vw;
  padding-right:4vw;
}

.logo {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  gap: 12px;
  color: #2d3142;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
}
.logo:hover {
  transform: translateY(-1px);
}

.logo svg {
  color: #6b7db8 !important;
  filter: drop-shadow(0 0 8px rgba(107, 125, 184, 0.45));
}

.links {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Hamburger menu button - hidden on desktop */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1000;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  background: #4a5073;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-toggle:hover span {
  background: #2d3142;
}

/* Hamburger animation when open */
.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

.links a {
  font-weight: 700;
  font-size: 0.96em;
  color: #4a5073;
  padding: 10px 18px;
  border-radius: 12px;
  transition: all 0.2s cubic-bezier(0.23, 0.82, 0.47, 1.25);
  text-decoration: none;
  position: relative;
}

.links a:hover {
  background: linear-gradient(135deg, rgba(220, 228, 248, 0.8) 0%, rgba(230, 236, 252, 0.7) 100%);
  color: #2d3142;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px -2px rgba(155, 165, 212, 0.25);
}

.links a.active,
.links a:focus {
  background: linear-gradient(135deg, rgba(210, 220, 245, 0.9) 0%, rgba(220, 228, 250, 0.85) 100%);
  color: #2d3142;
  box-shadow: 0 2px 8px -2px rgba(155, 165, 212, 0.3);
}

/* Contact button - smaller, inline, elegant with color pop */
.links a.btn.primary {
  background: linear-gradient(135deg, #8b96d4 0%, #a8b3e8 100%);
  color: #fff;
  padding: 10px 20px;
  font-size: 0.94em;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 4px 16px -4px rgba(139, 150, 212, 0.45), 0 2px 8px rgba(155, 165, 212, 0.2);
  border: none;
  margin-left: 6px;
}

.links a.btn.primary:hover {
  background: linear-gradient(135deg, #7a87c8 0%, #98a5dc 100%);
  box-shadow: 0 6px 24px -4px rgba(139, 150, 212, 0.6), 0 3px 12px rgba(155, 165, 212, 0.3);
  transform: translateY(-2px);
  text-decoration:none;
}

/* Sticky glow enhancement with color accent */
body.has-scrolled header,
header.sticky-glow {
  background: linear-gradient(135deg, rgba(250, 251, 255, 0.98) 0%, rgba(245, 248, 255, 0.96) 50%, rgba(248, 250, 255, 0.95) 100%);
  box-shadow: 0 6px 32px -8px rgba(140, 155, 210, 0.32), 0 3px 12px rgba(155, 170, 220, 0.15);
  border-image: linear-gradient(90deg, rgba(140, 155, 212, 0.4) 0%, rgba(165, 180, 225, 0.6) 50%, rgba(140, 155, 212, 0.4) 100%) 1;
}

/* Nav underline "slider" effect for .links a.hovered */
.links a {position:relative;z-index:1;}
.links a::after {content:'';position:absolute;left:50%;bottom:3px;width:0;height:3px;background:linear-gradient(90deg,#d7e2fa 40%,#b6bddb 100%);border-radius:2px;transition:width .28s cubic-bezier(.6,.4,0,1.13), left .28s cubic-bezier(.23,.82,.47,1.25);opacity:.56;pointer-events:none;z-index:-1;}
.links a.hovered::after, .links a.active::after {width:81%;left:10%;}

/* Mobile Navigation */
@media (max-width: 768px) {
  .nav {
    padding: 14px 4vw;
    flex-wrap: nowrap;
  }
  
  .logo {
    font-size: 1.15rem;
  }
  
  .logo svg {
    width: 28px;
    height: 28px;
  }
  
  /* Show hamburger menu on mobile */
  .menu-toggle {
    display: flex;
  }
  
  /* Hide links by default on mobile */
  .links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: linear-gradient(135deg, rgba(248, 249, 255, 0.98) 0%, rgba(242, 245, 252, 0.97) 100%);
    backdrop-filter: blur(20px);
    flex-direction: column;
    gap: 0;
    padding: 80px 24px 24px;
    box-shadow: -4px 0 24px rgba(100, 110, 150, 0.15);
    transition: right 0.3s cubic-bezier(0.23, 0.82, 0.47, 1.25);
    z-index: 1001;
    overflow-y: auto;
  }
  
  /* Show menu when active */
  .links.active {
    right: 0;
  }
  
  .links a {
    width: 100%;
    font-size: 1em;
    padding: 14px 18px;
    text-align: left;
    border-radius: 12px;
    margin-bottom: 6px;
    position: relative;
    z-index: 1002;
    pointer-events: auto;
  }
  
  .links a.btn.primary {
    padding: 14px 18px;
    font-size: 1em;
    margin-left: 0;
    margin-top: 12px;
    text-align: center;
    z-index: 1002;
    pointer-events: auto;
  }
  
  /* Overlay when menu is open */
  body.menu-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Prevent scrolling when menu is open */
  body.menu-open {
    overflow: hidden;
  }
}

/* BUTTONS */
.btn{
  padding:14px 22px;
  border-radius:99px;
  border:none;
  font-weight:800;
  font-size:17px;
  box-shadow:0 8px 26px -7px #d2d3e4;
  letter-spacing:.02em;
  background:linear-gradient(90deg,#e9eaf6 15%,#d6dae7 100%);
  color:#36384c;
  transition:box-shadow 0.18s,transform 0.16s,background 0.18s,color .16s;
  display:inline-block;
  cursor:pointer;
}
.btn.primary{background:linear-gradient(90deg,#b6bddb 40%,#f0eef7 100%);color:#222236;box-shadow:0 7px 20px -5px #b7b8c9;}
.btn.ghost{background:transparent;box-shadow:none;color:var(--muted);}
.btn:hover{box-shadow:0 12px 38px -6px #b6bddb,0 1.5px 0.5px -1px #dfdfe6;transform:translateY(-1.5px);background:linear-gradient(90deg,#ececf3 25%,#e2e4ed 100%);}
.btn:active{transform:scale(0.98);}

/* Ripple effect */
.btn {position:relative;overflow:hidden;}
.ripple{position:absolute;width:40px;height:40px;background:radial-gradient(circle,#bccbe3 10%,#e7eaf7 72%,transparent 92%);opacity:.5;border-radius:50%;transform:translate(-50%, -50%) scale(0.1);animation:ripmove .56s cubic-bezier(.45,1,1,.97);pointer-events:none;z-index:2;mix-blend-mode:soft-light;}
@keyframes ripmove{to{transform:translate(-50%,-50%) scale(3.2);opacity:0;}}

/* HERO BANNER - Full width, proper aspect, balanced layout */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 520px;
  max-height: 640px;
  height: 60vh;
  overflow: hidden;
  padding: 0 !important;
  margin-bottom: 0;
  margin-top: 0;
}
.hero:before {
  display: none !important;
}

.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-radius: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 40%, transparent 70%);
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hero-card {
  max-width: 620px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(230, 234, 248, 0.9);
  border-radius: 20px;
  padding: 48px 56px 44px;
  box-shadow: 0 16px 64px -16px rgba(100, 110, 150, 0.4), 0 4px 16px rgba(120, 130, 160, 0.15);
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 768px) {
  .hero {
    min-height: 480px;
    max-height: 600px;
    height: 70vh;
    align-items: flex-end;
    padding-bottom: 32px !important;
  }
  .hero-inner {
    padding: 0 6%;
  }
  .hero-card {
    padding: 28px 32px 26px;
    max-width: 100%;
    margin-left: 0;
  }
  .hero-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.25) 40%, rgba(0, 0, 0, 0.1) 70%);
  }
  .headline {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }
  .subhead {
    font-size: 1rem !important;
  }
  .eyebrow {
    font-size: 11px;
  }
  .cta {
    flex-direction: column;
    gap: 8px;
  }
  .btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .hero-card {
    padding: 24px 26px 22px;
  }
  .hero-inner {
    padding: 0 4%;
  }
}

/* Section delineation - proper spacing */
section{padding:72px 0 68px 0;position:relative;z-index:1;background-clip:padding-box;overflow:visible;}
section:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(184deg,rgba(236,236,243,0.29) 0%,rgba(221,222,236,0.19) 100%);z-index:-1;}
section.alt{background:linear-gradient(120deg, #f2f4fa 0%, #e9eaf4 100%);}
section.fade-bg{background:linear-gradient(180deg,#f7f9fc 10%,#ececf3 80%,rgba(245,245,255,0.95) 100%)!important;}
@media (max-width:670px){ section{padding:48px 0 44px 0;} }

h2{font-size:clamp(2.1rem,3vw,2.8rem);margin:0 0 19px;line-height:1.14;color:#232338;font-weight:900;letter-spacing:.01em;text-shadow:0 2px 16px #f9faff;}
h3 {font-size:clamp(1.2rem,2vw,1.7rem);color:#3d4466;margin-top:28px;margin-bottom:12px;letter-spacing:0.01em;font-weight:900;line-height:1.13;}
p.lead{font-size:1.20em;color:#7c8796;max-width:70ch;font-weight:500;letter-spacing:0.01em;}
.eyebrow{font-weight:900;font-size:13.5px;letter-spacing:.15em;color:#8288a5;border-radius:999px;padding:7px 16px;background:#efeff5;box-shadow:0 0 8px #f0f1fb;text-transform:uppercase;opacity:0.76;margin-bottom:9px;display:inline-block;}
.headline{font-size:clamp(2.25rem,5vw,3.8rem);font-weight:900;color:#161924;line-height:1.08;background:linear-gradient(95deg,#36384c,#adb4d7 60%,#c6c8d9 95%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.01em;}
.subhead{font-size:clamp(1.09rem,2.5vw,1.33rem);color:#4c5870;max-width:65ch;margin:8px 0 0;}
.cta{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

.container{padding:40px 4vw;border-radius:26px;margin:0 auto;background:none;max-width:1200px;}
@media (max-width:900px){.container{padding:28px 5vw;}}
@media (max-width:600px){.container{padding:24px 6vw;}}

.card{
  background:var(--card);
  border:1.5px solid var(--divider);
  border-radius:19px;
  padding:38px 26px 31px 26px;
  box-shadow:0 12px 44px -16px #b7b7d1,0 2px 2px -1.5px #eee;
  transition:box-shadow .18s, transform .16s;
  backdrop-filter:blur(6px);
}
.card:hover{box-shadow:0 16px 48px -10px #d5d8ea,0 6px 24px -7px #d2d3e4;transform:scale(1.025);}
.card h3{font-size:1.45em;letter-spacing:.01em;margin-bottom:10px;color:#362c58;}
.card ul{color:#5b6481;font-size:1.08em;margin:12px 0 0;padding-left:18px;}
@media (max-width:900px){.card{padding:21px 5vw 18px 5vw;}}

/* MEET NANCY FLEX LAYOUT, image left, text right */
.about {display: flex; flex-direction: row; align-items: center; gap: 48px;padding: 48px 32px;}
.about .pic {flex: 0 0 264px;display:flex;align-items:center;justify-content:center;min-width:180px;}
.about .pic img {
  width: 228px;
  max-width: 90vw;
  max-height: 322px;
  aspect-ratio: 1/1.15;
  object-fit: cover;
  margin: 0;
  border-radius: 18px;
  box-shadow: 0 4px 32px -10px #bbcbe5;
  display: block;
}
.about > div:not(.pic){flex:1;min-width:0;}
@media (max-width:850px){.about{flex-direction:column;gap:34px;padding:30px 7vw;}.about .pic img{width:88vw;max-width:300px;}}

.services,.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px;}
@media (max-width:900px){.services,.testimonials{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.services,.testimonials{grid-template-columns:1fr;}}

.testimonials{background:linear-gradient(100deg,#f2f4fa 0%,#f9faff 100%);}

/* LISTING CARDS - Images fill perfectly, no gaps */
.listings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px 24px;
  margin-top: 32px;
  padding-bottom: 20px;
}

.listing {
  margin-bottom: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 32px -10px rgba(180, 188, 220, 0.28), 0 2px 4px rgba(220, 224, 238, 0.3);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(230, 234, 248, 0.6);
  transition: all 0.24s cubic-bezier(0.23, 0.82, 0.47, 1.25);
}

.listing:hover {
  box-shadow: 0 12px 48px -12px rgba(180, 188, 220, 0.4), 0 6px 16px rgba(220, 224, 238, 0.35);
  transform: translateY(-4px) scale(1.01);
  border-color: rgba(200, 210, 240, 0.7);
}

.listing .photo {
  aspect-ratio: 4 / 3;
  height: auto;
  width: 100%;
  background: linear-gradient(135deg, #e8ecf7 0%, #f2f4fa 100%);
  border-radius: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: block;
}

.listing .photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 0;
  display: block;
  transition:transform .3s;
}
.listing:hover .photo img{transform:scale(1.05);}

.listing .meta {
  padding: 20px 18px 22px 18px;
}

.price{font-weight:900;font-size:1.18em;color:#504368;margin-bottom:2px;}
.addr{color:#6c70a0;margin-top:4px;font-weight:600;}
.specs{display:flex;gap:13px;flex-wrap:wrap;color:#928cb0;font-weight:700;margin:10px 0;}
.tag{display:inline-block;padding:5px 13px;border-radius:999px;border:1px solid var(--line);background:#f5f6fc;font-size:13px;color:#687197}

@media (max-width: 700px) {
  .listings {
    grid-template-columns: 1fr;
    gap: 24px 0;
  }
}

/* Placeholder SVG for photos if no image is present */
.listing .photo:empty,.detail-photo:empty,.about .pic:empty {
  background:linear-gradient(115deg,#eaecef 60%,#f7f8fa 100%);
}
.listing .photo:empty::after, .detail-photo:empty::after, .about .pic:empty::after {
  content:'';
  display:block;
  width:110px;height:78px;
  margin:auto;
  background:url('data:image/svg+xml;utf8,<svg width="110" height="78" viewBox="0 0 110 78" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="36" width="110" height="42" rx="13" fill="%23e8eaf2"/><ellipse cx="41" cy="68" rx="19" ry="6" fill="%23e0e3f7"/><ellipse cx="84" cy="71" rx="14" ry="4" fill="%23eaebf7"/><rect x="25" y="24" width="48" height="32" rx="8" fill="%23cfd4eb"/><rect x="32" y="31" width="34" height="18" rx="3" fill="%23eaf0fb"/><rect x="44" y="41" width="8" height="10" rx="2" fill="%23b6bddb"/><rect x="58" y="41" width="6" height="10" rx="2" fill="%23d2d7f4"/><rect x="32" y="31" width="34" height="4" rx="2" fill="%23e0e3f7"/><ellipse cx="80" cy="43" rx="5" ry="7" fill="%23e0e3f7"/><rect x="76" y="54" width="3" height="6" rx="1.5" fill="%23b6bddb"/><rect x="83" y="54" width="4" height="7" rx="1.5" fill="%23b6bddb"/><rect x="68" y="59" width="15" height="4" rx="2" fill="%23e0e3f7"/><ellipse cx="40" cy="37" rx="3" ry="3" fill="%23e0e3f7"/></svg>') no-repeat center/contain;
  opacity:0.82;
}

/* DETAIL PAGE - full-width hero photo */
.detail-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 2.5 / 1;
  max-height: 480px;
  margin: 0 0 32px 0;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #e8ecf7 0%, #f2f4fa 100%);
}
.detail-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 768px) {
  .detail-photo {
    aspect-ratio: 1.8 / 1;
    max-height: 320px;
  }
}
.gallery {display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin:24px 0;}
.gallery img {border-radius:var(--radius); box-shadow:var(--shadow);}
.description {line-height:1.8; color:#52577a; font-size:1.08em;margin-bottom:20px;}
.description strong {color:#3d4466;font-weight:800;}

/* Contact and Forms */
form{background:rgba(255,255,255,0.70);border-radius:22px;box-shadow:0 2px 12px -2px #d6d8ea;margin-top:16px;display:grid;gap:14px;padding:20px;}
label{font-weight:800;color:#928cb0;font-size:1.07em;}
input, textarea{padding:14px 18px;border:1.2px solid #e7e7f1;border-radius:15px;font:inherit;box-shadow:inset 0 2px 8px rgba(205,205,225,.08);background:#f7f8fa;color:#383b55;}
textarea{min-height:120px;resize:vertical;}
input:focus, textarea:focus{outline:none;border-color:#b6bddb;box-shadow:0 0 0 4px #caccdf6b;}
.contact-bottom {margin-top:40px; padding:20px; background:var(--card); border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow);}

/* Footer */
footer{padding:54px 0 44px 0;border-top:1.5px solid var(--line);background:linear-gradient(92deg,#f2f4fa 65%,#ececf3 100%);box-shadow:0 -2px 16px -8px #cbcde9;margin-top:20px;font-size:1.04em;border-radius:0 0 38px 38px;}
.small{font-size:15px;color:#7c8796;}

/* Scroll reveal motion */
.reveal-up{opacity:0;transform:translateY(36px) scale(.98);transition:opacity .66s cubic-bezier(.39,.47,.14,1.26),transform .67s cubic-bezier(.23,.82,.47,1.25);will-change:opacity,transform;}
.reveal-up.visible{opacity:1;transform:none;}

::-webkit-scrollbar {width: 10px;background: #f5f7fa;}
::-webkit-scrollbar-thumb {background: #d8dae3;border-radius:8px;}