/* Calgary Luxury Condos.
   Same single-measure discipline as the condo documents centre: hero,
   breadcrumbs, body and CTA all share one 820px column so the left edge never
   shifts. The listings widget is the one deliberate full-width exception. */

.lx-inner{max-width:820px;margin:0 auto;padding:0 2rem}
@media (max-width:760px){.lx-inner{padding:0 1.25rem}}

/* hero */
.lx-hero{background:#012F38;padding:4.5rem 0 3.2rem}
.lx-kicker{font-family:'DM Sans',system-ui,sans-serif;font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--lime,#A2C243);font-weight:500;
  margin:0 0 1rem}
.lx-hero h1{font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.12;color:#fff;font-weight:700;
  margin:0 0 1.4rem;max-width:22ch}
.lx-lede{font-family:'DM Sans',system-ui,sans-serif;font-size:1.12rem;
  line-height:1.72;color:rgba(255,255,255,.84);margin:0 0 .85rem;max-width:60ch}
.lx-lede:last-child{margin-bottom:0}
@media (max-width:760px){.lx-hero{padding:3rem 0 2.2rem}}

/* breadcrumbs */
.lx-crumbs{background:#fff;border-bottom:1px solid #e6e3dc;padding:.9rem 0;
  font-family:'DM Sans',system-ui,sans-serif;font-size:.82rem}
.lx-crumbs .lx-inner{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.lx-crumbs a{color:#0e7c66;text-decoration:none}
.lx-crumbs a:hover{text-decoration:underline}
.lx-crumbs span{color:var(--muted,#5A5A5A)}
.lx-crumbs .lx-sep{color:#b9c2c4}

/* listings band — the widget is full width on purpose */
.lx-listings{background:#fff;padding:3rem 0 2.5rem}
.lx-listings h2{font-family:'Playfair Display',Georgia,serif;font-size:1.7rem;
  color:#012F38;font-weight:700;margin:0 0 .6rem}
.lx-sub{font-family:'DM Sans',system-ui,sans-serif;font-size:1rem;
  line-height:1.7;color:var(--muted,#5A5A5A);margin:0 0 1.8rem;max-width:62ch}

/* body */
.lx-wrap{background:#f8f7f4;padding:3.5rem 0 1rem}
.lx-sec{margin:0 0 2.6rem}
.lx-sec h2{font-family:'Playfair Display',Georgia,serif;font-size:1.6rem;
  color:#012F38;font-weight:700;line-height:1.24;margin:0 0 1rem}
.lx-sec p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.08rem;
  line-height:1.85;color:var(--muted,#5A5A5A);margin:0 0 1.15rem}
.lx-sec ul{margin:0 0 1.35rem;padding-left:1.25rem}
.lx-sec li{font-family:'DM Sans',system-ui,sans-serif;font-size:1.04rem;
  line-height:1.78;color:var(--muted,#5A5A5A);margin-bottom:.55rem}
.lx-sec a{color:#0e7c66;text-decoration:none;border-bottom:1px solid rgba(106,186,90,.5)}
.lx-sec a:hover{border-bottom-color:#6aba5a}
.lx-sec strong{color:#012F38}
.lx-pull{font-family:'Playfair Display',Georgia,serif !important;
  font-size:1.22rem !important;line-height:1.5 !important;color:#012F38 !important;
  border-left:3px solid var(--lime,#A2C243);padding-left:1.1rem;margin:1.6rem 0 !important}

/* community cards */
.lx-areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1.2rem;margin:1.6rem 0 0}
.lx-area{display:block;background:#fff;border:1px solid #e6e3dc;border-radius:4px;
  padding:1.35rem 1.5rem;text-decoration:none;transition:border-color .2s,transform .2s}
.lx-area:hover{border-color:#6aba5a;transform:translateY(-2px)}
.lx-area b{display:block;font-family:'Playfair Display',Georgia,serif;
  font-size:1.15rem;color:#012F38;font-weight:700;margin:0 0 .45rem}
.lx-area p{font-family:'DM Sans',system-ui,sans-serif;font-size:.92rem;
  line-height:1.66;color:var(--muted,#5A5A5A);margin:0;border-bottom:0}

/* FAQ */
.lx-faq{border-top:1px solid #e6e3dc;padding-top:1.3rem;margin-top:1.3rem}
.lx-faq:first-of-type{border-top:0;padding-top:0;margin-top:0}
.lx-faq h3{font-family:'Playfair Display',Georgia,serif;font-size:1.15rem;
  color:#012F38;font-weight:700;margin:0 0 .55rem;line-height:1.3}
.lx-faq p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.02rem;
  line-height:1.8;color:var(--muted,#5A5A5A);margin:0}

/* related */
.lx-related{border-top:1px solid #e6e3dc;padding-top:1.8rem;margin-top:2.4rem}
.lx-related h3{font-family:'DM Sans',system-ui,sans-serif;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted,#5A5A5A);font-weight:500;
  margin:0 0 .9rem}
.lx-related ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.lx-related li{margin:0}
.lx-related a{display:inline-block;font-family:'DM Sans',system-ui,sans-serif;
  font-size:.88rem;color:#012F38;background:#fff;border:1px solid #d5d0c6;
  border-radius:99px;padding:.45rem 1rem;text-decoration:none;transition:.18s}
.lx-related a:hover{border-color:#6aba5a;color:#0e7c66}

/* CTA */
.lx-cta{background:#012F38;padding:3.2rem 0}
.lx-cta h2{font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;font-weight:700;margin:0 0 .9rem;
  max-width:24ch}
.lx-cta p{font-family:'DM Sans',system-ui,sans-serif;font-size:1.04rem;
  line-height:1.75;color:rgba(255,255,255,.8);margin:0 0 1.6rem;max-width:58ch}
.lx-btns{display:flex;flex-wrap:wrap;gap:.75rem}
.lx-btn{display:inline-block;font-family:'DM Sans',system-ui,sans-serif;
  background:#6aba5a;color:#012F38;padding:.8rem 1.6rem;font-size:.86rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  text-decoration:none;border-radius:2px;border:1px solid #6aba5a;
  transition:background .2s}
.lx-btn:hover{background:#5aa84a}
.lx-btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.lx-btn.ghost:hover{border-color:#6aba5a;color:#6aba5a}
@media (max-width:760px){
  .lx-wrap{padding:2.4rem 0 .5rem}
  .lx-listings{padding:2.2rem 0 1.8rem}
  .lx-cta{padding:2.4rem 0}
  .lx-btn{width:100%;text-align:center}
}

/* Live market snapshot, above the listings. The widget injects its own card
   styles; this just gives it room and keeps it on the page's single measure. */
.lx-stats{background:#fff;padding:2.4rem 0 0}
.lx-stats .clg-stats-widget{margin-bottom:0}
@media (max-width:760px){.lx-stats{padding:1.6rem 0 0}}

/* Photo hero. The image is a real <img> — alt text and indexable — sitting
   under a scrim so the headline keeps its contrast at every viewport. */
.lx-hero{position:relative;overflow:hidden}
.lx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 60%;z-index:0;display:block;margin:0}
.lx-hero::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(1,47,56,.94) 0%,rgba(1,47,56,.80) 46%,rgba(1,47,56,.42) 100%)}
.lx-hero .lx-inner{position:relative;z-index:2}
@media (max-width:760px){
  .lx-hero::after{background:linear-gradient(to bottom,rgba(1,47,56,.80) 0%,rgba(1,47,56,.93) 100%)}
}