
:root{--bg:#ffffff;--text:#111417;--muted:#667085;--accent:#2FA44A;--accent-2:#194E37;--alt:#f0f4f1;--shadow:0 10px 30px rgba(0,0,0,.08);}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg);line-height:1.6}
.container{width:min(1100px,92%);margin-inline:auto}
.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin:0 0 .5rem}
h1{font-size:clamp(2rem,3vw + 1rem,3.5rem);line-height:1.1;margin:.2rem 0 1rem}
h2{font-size:clamp(1.6rem,2.1vw + .9rem,2.2rem);line-height:1.2;margin:.2rem 0 1rem}
h3{font-size:1.1rem;margin:.2rem 0 .4rem}
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.85rem 1.1rem;border-radius:.6rem;border:none;font-weight:700;box-shadow:var(--shadow);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(.95)}
.logo-img{height:auto;width:180px;display:block}
.logo.small .logo-img{width:120px}
.site-header{position:sticky;top:0;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.06);z-index:10}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.nav{display:flex;gap:1.2rem;align-items:center}
.nav-link{color:#333;text-decoration:none;padding:.4rem .2rem}
.nav-link.active{color:var(--accent)}
.nav-toggle{display:none;background:none;border:none;font-size:1.5rem}
@media (max-width:820px){
  .nav{position:fixed;inset:60px 0 auto 0;display:none;flex-direction:column;background:#fff;padding:1rem 1.2rem;border-top:1px solid #eee}
  .nav.show{display:flex}
  .nav-toggle{display:block}
}
.hero{position:relative;min-height:62vh;display:grid;place-items:center;color:#fff}
.hero-media{position:absolute;inset:0;background:url('../img/hero.jpg') center/cover no-repeat;filter:brightness(.55)}
.hero-content{position:relative;text-align:left;padding:3.5rem 0}
.section{padding:4rem 0}.section.alt{background:var(--alt)}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem}
.two-col .media img{width:100%;height:auto;border-radius:1rem;display:block}
.card{background:#fff;border-radius:1rem;box-shadow:var(--shadow);overflow:hidden}
.card img{width:100%;height:220px;object-fit:cover;display:block}
.card-body{padding:1rem 1.1rem}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:1.2rem}
.card-grid.two{grid-template-columns:repeat(2,1fr)}
@media (max-width:980px){.two-col{grid-template-columns:1fr}.card-grid,.card-grid.two{grid-template-columns:1fr}}
.columns-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.2rem}
.plan{background:#fff;border-radius:1rem;padding:1rem;box-shadow:var(--shadow)}.plan-media img{width:100%;height:160px;object-fit:cover;border-radius:.8rem}
.plan .price{font-weight:800;color:var(--accent-2)}
.form{display:grid;gap:.8rem}.form label{display:grid;gap:.35rem;font-weight:600}
input,textarea{font:inherit;padding:.8rem;border:1px solid #e3e3e3;border-radius:.6rem}
.checkbox{font-weight:400;display:flex;gap:.6rem;align-items:flex-start}
.contact .map-placeholder{height:240px;border-radius:1rem;background:#eaeaea;display:grid;place-items:center;margin-bottom:1rem}
.map-note{background:#333;color:#fff;padding:.8rem 1rem;border-radius:.6rem;max-width:80%;text-align:center}
.contact-card{background:#fff;border-radius:1rem;padding:1rem;box-shadow:var(--shadow)}
.hours{list-style:none;padding:0;margin:.6rem 0 0}.hours li{padding:.18rem 0;color:#374151}
.site-footer{border-top:1px solid #eee;padding:1.6rem 0;background:#0c1712;color:#cfe3d7}
.site-footer .footer-wrap{display:flex;align-items:center;gap:1rem;justify-content:space-between}
.site-footer a{color:#cfe3d7;text-decoration:none}
.footer-nav{display:flex;gap:1rem;align-items:center}

/* v13 adjustments */
.site-header .nav-wrap { padding: 0.4rem 0; }
.logo-img { max-height: 50px; }
.hero { min-height: 80vh; }
.hero-media { background-position: center top; }


/* v14 corrections */
/* Restore logo proportions (header 180px width, footer 120px via classes) */
.logo-img { max-height: unset; height: auto; }
/* Center the hero background so the meaningful middle shows */
.hero-media { background-position: center center; }


/* v15 adjustments */
/* Slimmer header by ~40% */
.site-header .nav-wrap {
  padding: 0.25rem 0;
}
.site-header {
  min-height: 50px;
}

/* Hero image fills reclaimed space */
.hero {
  min-height: 90vh;
}


/* v16 header-over-hero overlap */
/* Make header translucent with blur (polished) */
.site-header {
  background: rgba(255,255,255,0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Pull hero up under the header for an overlap effect */
.hero {
  margin-top: -25px; /* matches the ~50px header height from v15 */
}


/* v18: social icons */
.socials { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.socials a { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:8px; background:#f3f4f6; text-decoration:none; }
.socials a svg { width:20px; height:20px; }
.footer-contact { display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; }
.footer-contact a.icon { width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:#0e2018; }
.footer-contact a.icon svg { width:20px; height:20px; fill:#cfe3d7; }


/* v19: 2x2 housing grid + rounded images + hover */
.housing-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:1.2rem;
  margin-top:1rem;
}
@media (max-width: 860px){
  .housing-grid{ grid-template-columns: 1fr; }
}
.plan-card{
  background:#fff;
  border-radius:1rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  padding:0.9rem;
  transition:transform .22s ease, box-shadow .22s ease;
}
.plan-card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}
.plan-card .media{
  overflow:hidden;
  border-radius:0.8rem;
  margin:0 0 .8rem 0;
}
.plan-card .media img{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
  border-radius:0.8rem;
}
.plan-card h3{ margin:.2rem 0 .2rem; }
.plan-card .price{ font-weight:800; color:#194E37; margin:0; }

/* v20: social logo images */
.socials.logos a, .footer-contact a.icon {
  width:40px; height:40px; border-radius:10px; background:#f3f4f6;
}
.socials.logos a img, .footer-contact a.icon img {
  width:22px; height:22px; object-fit:contain;
}
.footer-contact a.icon { background:#0e2018; }


/* v21: App store badges */
.store-badges{
  display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin:.6rem 0 1rem;
}
.store-badges .badge{
  display:inline-block; border-radius:.8rem; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.08); transform:translateZ(0);
  transition:transform .18s ease, box-shadow .18s ease;
}
.store-badges .badge img{
  display:block; height:52px; width:auto; object-fit:contain;
}
.store-badges .badge:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:0 10px 28px rgba(0,0,0,.14);
}
/* Smaller on mobile */
@media (max-width: 520px){
  .store-badges .badge img{ height:44px; }
}

/* v22 carry-over: image tiles rules remain below */
.card-grid img{
  width:100%; height:250px; object-fit:cover; border-radius:.8rem; display:block;
}
.card.media img{ width:100%; height:auto; border-radius:.8rem; display:block; }
.plan-media img{ width:100%; height:250px; object-fit:cover; border-radius:.8rem; display:block; }
.card img{ max-width:100%; height:auto; display:block; border-radius:.8rem; }

/* subtle hover on all cards with images */
.card:hover{ box-shadow:0 16px 38px rgba(0,0,0,.12); transform: translateY(-3px); transition: all .22s ease; }



/* moved further down from header */
  right: 22px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 12px;       /* consistent spacing */
}
.floating-badges .badge{
  display:inline-block;
  border-radius:.9rem;      /* keep rounded corners */
  overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  transition:transform .18s ease, box-shadow .18s ease;
  background: transparent;  /* remove white padding */
}
.floating-badges .badge img{
  display:block;
  height:112px;             /* larger badge size */
  width:auto;
  object-fit:contain;
}
.floating-badges .badge:hover{
  transform: translateY(-2px) scale(1.035);
  box-shadow:0 18px 42px rgba(0,0,0,.2);
}

/* Responsive tweaks */
@media (max-width: 1200px){
  .floating-badges{ top: 160px; right: 18px; }
  .floating-badges .badge img{ height:102px; }
}
@media (max-width: 900px){
  .floating-badges{ top: 150px; right: 14px; }
  .floating-badges .badge img{ height:92px; }
}
@media (max-width: 640px){
  .floating-badges{ top: 140px; right: 10px; }
  .floating-badges .badge img{ height:78px; }
}

/* sits just below the white header */
  right: 22px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.floating-badges .badge{
  display:inline-block;
  border-radius: 12px;   /* keep rounded to match site */
  overflow:hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  transition: transform .18s ease, box-shadow .18s ease;
}
.floating-badges .badge img{
  display:block;
  height: 110px;   /* same size for both badges */
  width: auto;
  object-fit: contain;
}
.floating-badges .badge:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 42px rgba(0,0,0,.20);
}
@media (max-width: 1200px){
  .floating-badges{ top: 98px; right: 18px; }
  .floating-badges .badge img{ height: 100px; }
}
@media (max-width: 900px){
  .floating-badges{ top: 92px; right: 14px; }
  .floating-badges .badge img{ height: 88px; }
}
@media (max-width: 640px){
  .floating-badges{ top: 88px; right: 10px; }
  .floating-badges .badge img{ height: 76px; }
}

/* v26: badge swap position (lower), 30% smaller, and global scroll offset */
.floating-badges{
  position: fixed;
  top: 225px;  /* App Store now sits where Play was before */
  right: 22px;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floating-badges .badge img{
  height: 77px; /* ~30% smaller than 110px */
  width: auto;
  object-fit: contain;
}
.floating-badges .badge{
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
  transition: transform .18s ease, box-shadow .18s ease;
  background: transparent;
}
.floating-badges .badge:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 16px 38px rgba(0,0,0,.20);
}

/* Responsive tweaks */
@media (max-width: 1200px){
  .floating-badges{ top: 210px; right: 18px; }
  .floating-badges .badge img{ height: 70px; }
}
@media (max-width: 900px){
  .floating-badges{ top: 200px; right: 14px; }
  .floating-badges .badge img{ height: 62px; }
}
@media (max-width: 640px){
  .floating-badges{ top: 190px; right: 10px; }
  .floating-badges .badge img{ height: 56px; }
}

/* Ensure in-page anchor links stop below the sticky header area */
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
[id] { scroll-margin-top: 120px; }


/* v27: nav active highlight on scroll */
.nav a.nav-link{ color:#222; opacity:.9; transition:color .18s ease, opacity .18s ease; }
.nav a.nav-link:hover{ opacity:1; }
.nav a.nav-link.active{ color:#16a34a; opacity:1; font-weight:600; }

/* contact icon sizing */
.contact-icon{width:20px;height:20px;vertical-align:-4px;margin-right:8px;}

/* v32: Urban Living App card emphasis */
.card.card--urban img{
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.18));
  transition: filter .25s ease, transform .25s ease;
}
.card.card--urban:hover img{
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.22));
  transform: translateY(-2px) scale(1.01);
}


/* v34: Neutralize nav link colors (no hover/active/visited highlight) */
.site-nav .nav-link,
.site-nav .nav-link:link,
.site-nav .nav-link:visited,
.site-nav .nav-link:hover,
.site-nav .nav-link:active,
.site-nav .nav-link.is-active {
  color: inherit !important;
  text-decoration: none;
}

/* Keep keyboard focus visible */
.site-nav .nav-link:focus-visible {
  outline: 2px solid rgba(0,0,0,.25);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Preserve Contact button visual style (assumes .btn or .contact class exists) */
/* No overrides here; relies on your existing button styles */

