/* built by /root/bundle_assets.py from nav.css, theme.css, footer.css, join-cta.css -- edit the sources, not this file */
/* == nav.css == */
#clg-header {
  --green:  #6ABA5A;
  --teal:   #48A3A6;
  --lime:   #A2C243;
  --ink:    #012F38;
  --muted:  #5A5A5A;
  --border: #E4E4E0;
  --off:    #F7F7F5;
  --serif:  'Playfair Display', Georgia, serif;
  --sans:   'DM Sans', system-ui, -apple-system, sans-serif;
}#clg-header { overflow: visible; position: relative; z-index: 9999; }#clg-header *, #clg-header *::before, #clg-header *::after { box-sizing: border-box; margin: 0; padding: 0; }#clg-header a { text-decoration: none; color: inherit; }#clg-header ul, #clg-header li { list-style: none; }#clg-header #clg-ticker { background: var(--ink); height: 38px; overflow: hidden; width: 100%; max-width: 100%; display: flex; align-items: center; border-bottom: 4px solid transparent; border-image: linear-gradient(to right, var(--teal), var(--green), var(--lime)) 1; }#clg-header #clg-ticker-track { display: flex; white-space: nowrap; animation: tick 45s linear infinite; }#clg-header #clg-ticker-track:hover { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }#clg-header .t-item { display: inline-flex; align-items: center; gap: .65rem; padding: 0 4rem; font-family: var(--sans); font-size: .85rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }#clg-header .t-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }#clg-header .t-dot.g { background: var(--green); }#clg-header .t-dot.t { background: var(--teal); }#clg-header .t-dot.l { background: var(--lime); }#clg-header #clg-nav { background: rgba(255,255,255,.97); backdrop-filter: blur(16px); border-bottom: none; border-bottom: 4px solid transparent; border-image: linear-gradient(to right, var(--teal), var(--green), var(--lime)) 1; position: sticky; top: 0; z-index: 9000; width: 100%; max-width: 100%; transition: box-shadow .3s; }#clg-header #clg-nav.scrolled { box-shadow: 0 2px 28px rgba(0,0,0,.09); }#clg-header #clg-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; max-width: none; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); gap: .75rem; position: relative; transition: height .3s ease; overflow: visible; }#clg-header #clg-nav.shrunk #clg-nav-inner { height: 54px; }#clg-header #clg-logo { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-decoration: none; line-height: 1; }#clg-header #clg-logo img { height: 32px; width: auto; display: block; transition: height .3s ease; }#clg-header #clg-nav.shrunk #clg-logo img { height: 26px; }#clg-header #clg-tagline { font-family: var(--sans); font-size: .72rem; font-weight: 500; color: var(--muted); letter-spacing: .02em; white-space: nowrap; transition: opacity .3s ease, max-height .3s ease; line-height: 1.2; max-height: 14px; overflow: hidden; }#clg-header #clg-nav.shrunk #clg-tagline { opacity: 0; max-height: 0; }#clg-header #clg-menu { display: flex; align-items: center; gap: .25rem; flex: 1; justify-content: center; }#clg-header .clg-mi { position: relative; }#clg-header .clg-mi::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }#clg-header .clg-ml { display: flex; align-items: center; gap: .3rem; padding: .4rem .42rem; font-family: var(--sans); font-size: .88rem; font-weight: 500; color: var(--ink); border-radius: 6px; cursor: pointer; white-space: nowrap; transition: color .2s, background .2s; }#clg-header .clg-ml:hover, #clg-header .clg-mi:hover > .clg-ml { color: var(--green); background: rgba(106,186,90,.07); }#clg-header .clg-ml svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; flex-shrink: 0; }#clg-header .clg-mi:hover > .clg-ml svg { transform: rotate(180deg); }#clg-header .clg-mega {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 960px;
  max-width: calc(100vw - 3rem);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 16px 56px rgba(0,0,0,.13);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s, transform .22s, visibility .22s;
  pointer-events: none;
  z-index: 99999;
}#clg-header .clg-mi:hover .clg-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }#clg-header #clg-mega-communities { left: 50%; transform: translateX(-52%) translateY(-6px); }#clg-header .clg-mi:hover #clg-mega-communities { transform: translateX(-52%) translateY(0); }#clg-header #clg-mega-buy { left: -20px; transform: translateX(0) translateY(-6px); }#clg-header .clg-mi:hover #clg-mega-buy { transform: translateX(0) translateY(0); }#clg-header #clg-mega-resources { left: auto; right: -20px; transform: translateX(0) translateY(-6px); }#clg-header .clg-mi:hover #clg-mega-resources { transform: translateX(0) translateY(0); }#clg-header .mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); }#clg-header .mega-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); }#clg-header .mega-sector { padding: 1.2rem 1.4rem 1.5rem; border-right: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); transition: background .2s; }#clg-header .mega-sector:last-child, #clg-header .mega-sector:nth-child(4) { border-right: none; }#clg-header .mega-sector.last-row { border-bottom: none; }#clg-header .mega-grid-3 .mega-sector:nth-child(3) { border-right: none; }#clg-header .mega-grid-3 .mega-sector { border-bottom: none; }#clg-header .ms-green { background: rgba(106,186,90,.07); }#clg-header .ms-teal { background: rgba(72,163,166,.07); }#clg-header .ms-lime { background: rgba(162,194,67,.07); }#clg-header .ms-green2 { background: rgba(106,186,90,.05); }#clg-header .ms-teal2 { background: rgba(72,163,166,.06); }#clg-header .ms-green:hover { background: rgba(106,186,90,.16); }#clg-header .ms-teal:hover { background: rgba(72,163,166,.16); }#clg-header .ms-lime:hover { background: rgba(162,194,67,.16); }#clg-header .ms-green2:hover { background: rgba(106,186,90,.14); }#clg-header .ms-teal2:hover { background: rgba(72,163,166,.14); }#clg-header .ms-head { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .9rem; padding-bottom: .6rem; border-bottom: 2px solid; display: flex; align-items: center; justify-content: space-between; }#clg-header .ms-head .view-all { font-size: .68rem; font-weight: 500; opacity: .55; transition: opacity .15s; }#clg-header .ms-head .view-all:hover { opacity: 1; }#clg-header .ms-green  .ms-head, #clg-header .ms-green2  .ms-head { color: var(--green); border-color: var(--green); }#clg-header .ms-teal   .ms-head, #clg-header .ms-teal2   .ms-head { color: var(--teal);  border-color: var(--teal); }#clg-header .ms-lime   .ms-head { color: #8aaa1a; border-color: var(--lime); }#clg-header .mega-sector a { display: block; font-family: var(--sans); font-size: .86rem; color: var(--muted); padding: .38rem .5rem; margin: 0 -.5rem; border-radius: 5px; line-height: 1.5; transition: color .15s, background .15s; }#clg-header .mega-sector a:hover { color: var(--ink); background: rgba(106,186,90,.22); font-weight: 600; }#clg-header .mega-search-head { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .8rem 1.5rem .6rem; border-bottom: 2px solid; display: block; margin: 0; }#clg-header .mega-qs-links { border-bottom: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }#clg-header .mega-qs-links > div { padding: 1.2rem 1.4rem 1.5rem; border-right: 1px solid rgba(0,0,0,.06); }#clg-header .mega-qs-links > div:last-child { border-right: none; }#clg-header .mega-qs-group-head { font-family: var(--sans); font-size: .67rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; padding: .3rem 0 .4rem; border-bottom: 2px solid; margin-bottom: .4rem; }#clg-header .mega-qs-links a { display: block; font-family: var(--sans); font-size: .86rem; color: var(--muted); padding: .38rem .5rem; margin: 0 -.5rem; border-radius: 5px; transition: color .15s, background .15s, font-weight .15s; }#clg-header .mega-qs-links a:hover { color: var(--ink); background: rgba(106,186,90,.22); font-weight: 600; }#clg-header .mega-area-tile { display: flex; align-items: center; justify-content: center; padding: 1.3rem 1rem; font-family: var(--sans); font-size: .92rem; font-weight: 700; letter-spacing: .04em; text-align: center; border-right: 1px solid rgba(0,0,0,.06); border-bottom: 1px solid rgba(0,0,0,.06); transition: filter .15s; text-decoration: none; }#clg-header .mega-area-tile:hover { filter: brightness(.93); }#clg-header .mega-surrounding { border-top: 1px solid var(--border); background: #f7f7f5; padding: .7rem 1.5rem .9rem; }#clg-header .mega-surr-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .55rem; }#clg-header .mega-surr-head span { font-family: var(--sans); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); }#clg-header .mega-surr-head::after { content: ''; flex: 1; height: 1px; background: var(--border); }#clg-header .mega-surr-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }#clg-header .mega-surr-cols a { display: block; font-family: var(--sans); font-size: .86rem; color: var(--muted); padding: .35rem .5rem; margin: 0 -.5rem; border-radius: 5px; transition: color .15s, background .15s; }#clg-header .mega-surr-cols a:hover { color: var(--ink); background: rgba(106,186,90,.22); font-weight: 600; }#clg-header .mega-foot { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--off); }#clg-header .mega-foot span { font-family: var(--sans); font-size: .84rem; color: var(--muted); }#clg-header .mega-foot-link { font-family: var(--sans); font-size: .86rem; font-weight: 600; color: var(--green); display: flex; align-items: center; gap: .35rem; transition: gap .2s; }#clg-header .mega-foot-link:hover { gap: .6rem; }#clg-header #clg-ctas { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }#clg-header .clg-phone-link { font-family: var(--sans); font-size: .82rem; font-weight: 600; color: var(--ink); letter-spacing: .04em; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; transition: color .2s; }#clg-header .clg-phone-link svg { width: 14px; height: 14px; stroke: var(--teal); fill: none; stroke-width: 2; flex-shrink: 0; }#clg-header .clg-phone-link:hover { color: var(--teal); }#clg-header .btn-ol { display: inline-block; padding: .75rem 1.6rem; font-family: var(--sans); font-size: .9rem; font-weight: 600; color: #fff !important; background: linear-gradient(135deg, #48A3A6, #3d8c7a); border: none; border-radius: 50px; box-shadow: 0 3px 10px rgba(72,163,166,.35); transition: box-shadow .2s, transform .2s; white-space: nowrap; text-decoration: none; letter-spacing: .01em; }#clg-header .btn-ol:hover { box-shadow: 0 5px 16px rgba(72,163,166,.5); transform: translateY(-1px); color: #fff !important; }#clg-header .clg-login-link { display: inline-block; padding: .6rem 1rem; font-family: var(--sans); font-size: .78rem; font-weight: 600; color: #48A3A6; border: 1.5px solid rgba(72,163,166,.45); border-radius: 50px; white-space: nowrap; text-decoration: none; letter-spacing: .01em; transition: border-color .2s, color .2s, background .2s; }#clg-header .clg-login-link:hover { border-color: #48A3A6; background: rgba(72,163,166,.07); }#clg-header .btn-grn { display: inline-block; padding: .78rem 1.9rem !important; font-family: var(--sans); font-size: .88rem; font-weight: 700; color: #fff !important; background: linear-gradient(135deg, #48A3A6 0%, #6ABA5A 100%); border: none; border-radius: 50px; box-shadow: 0 4px 18px rgba(72,163,166,.4); transition: box-shadow .2s, transform .2s; white-space: nowrap; text-decoration: none; letter-spacing: .06em; text-transform: uppercase; }#clg-header .btn-grn:hover { box-shadow: 0 6px 26px rgba(72,163,166,.6); transform: translateY(-1px); color: #fff !important; }#clg-header #clg-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 4px; cursor: pointer; background: none; border: none; border-radius: 6px; }#clg-header #clg-burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .25s; }#clg-header #clg-burger span:nth-child(2) { width: 70%; }#clg-header #clg-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }#clg-header #clg-burger.open span:nth-child(2) { opacity: 0; }#clg-header #clg-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }#clg-header #clg-mob { display: none; overflow: hidden; max-height: 0; transition: max-height .35s; background: #fff; border-top: 1px solid var(--border); }#clg-header #clg-mob.open { max-height: 100vh; }#clg-header #clg-mob-inner { padding: 1rem 1.5rem 1.5rem; }#clg-header .mob-link { display: block; padding: .7rem 0; font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--border); }#clg-header .mob-sec { font-family: var(--sans); font-size: .63rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin: 1rem 0 .4rem; }#clg-header .mob-sub { display: block; padding: .45rem 0 .45rem .75rem; font-family: var(--sans); font-size: .82rem; color: var(--muted); border-bottom: 1px solid rgba(228,228,224,.5); }#clg-header .mob-ctas { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.25rem; }#clg-header .mob-ctas a { display: block; text-align: center; padding: .75rem; font-size: .85rem; border-radius: 8px; }

@media (max-width: 1279px) {#clg-header #clg-menu, #clg-header #clg-ctas { display: none; }#clg-header #clg-burger { display: flex; }#clg-header #clg-mob { display: block; } }@media (min-width: 1280px) and (max-width: 1450px) {#clg-header .clg-phone-link { display: none; } }
@media (max-width: 600px) {#clg-header #clg-nav-inner { padding: 0 1.25rem; }#clg-header #clg-logo img { height: 36px; } }

/* reset old fixed-nav clearance — new nav is sticky / in-flow */
body{margin:0}
.clg-wrap{padding-top:0 !important}


/* click-to-pin: keep the menu open after a click on the trigger */
#clg-header .clg-ml:hover, #clg-header .clg-mi.pinned > .clg-ml { color: var(--green); background: rgba(106,186,90,.07); }
#clg-header .clg-mi.pinned > .clg-ml svg { transform: rotate(180deg); }
#clg-header .clg-mi.pinned .clg-mega { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
#clg-header .clg-mi.pinned #clg-mega-communities { transform: translateX(-52%) translateY(0); }
#clg-header .clg-mi.pinned #clg-mega-buy { transform: translateX(0) translateY(0); }
#clg-header .clg-mi.pinned #clg-mega-resources { transform: translateX(0) translateY(0); }

/* ── Communities menu: whole menu scrolls as one; Surrounding Areas is last and scrolls with it (site-wide) ── */
#clg-header .clg-mega:has(.mega-surrounding){max-height:min(72vh,calc(100vh - 150px));overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#48a3a6 #eef1ee}
#clg-header .clg-mega:has(.mega-surrounding)::-webkit-scrollbar{width:8px}
#clg-header .clg-mega:has(.mega-surrounding)::-webkit-scrollbar-thumb{background:#48a3a6;border-radius:4px}
#clg-header .clg-mega:has(.mega-surrounding)::-webkit-scrollbar-track{background:#eef1ee}
#clg-header .clg-mega:has(.mega-surrounding) .mega-grid{max-height:none;overflow:visible;padding-right:0}
#clg-header .mega-grid .mega-surrounding{grid-column:1/-1;width:100%;order:99;position:static;box-shadow:none}
#clg-header .mega-quadrants { border-top: 1px solid var(--border); background: #fbfbfa; padding: .7rem 1.5rem .95rem; }#clg-header .mega-quad-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }#clg-header .mega-quad-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; padding: .75rem .6rem; border-radius: 9px; border: 1px solid rgba(0,0,0,.07); text-decoration: none; transition: filter .15s, transform .15s, box-shadow .15s; }#clg-header .mega-quad-tile:hover { filter: brightness(.96); transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); }#clg-header .mega-quad-tile .quad-abbr { font-family: var(--sans); font-size: 1.05rem; font-weight: 800; letter-spacing: .06em; line-height: 1; }#clg-header .mega-quad-tile .quad-full { font-family: var(--sans); font-size: .74rem; font-weight: 600; color: var(--muted); letter-spacing: .02em; }
/* ── Mobile menu text colour is independent of the header bar theme ────────
   The dropdown panel (#clg-mob) is always a white sheet. A page may still
   give the *bar* a dark treatment — the homepage sets body.h2 with
   `#clg-header a{color:#fff}`, which is right for the bar but also caught
   every link inside this white panel, rendering the menu white-on-white.
   Only the teal section labels stayed readable, because they set their own
   colour.

   Specificity, not source order, is what settles this:
     body.h2 #clg-header a      (1,1,2)
     #clg-header #clg-mob .x    (2,1,0)  <- wins, on any page, any theme. */
#clg-header #clg-mob .mob-link { color: var(--ink); }
#clg-header #clg-mob .mob-sub  { color: var(--muted); }
#clg-header #clg-mob .mob-sec  { color: var(--teal); }

/* ── The mobile menu must be able to scroll ────────────────────────────────
   #clg-mob animates open by moving max-height 0 -> 100vh, and carries
   overflow:hidden so the closed state clips. But the menu is ~1690px of
   content against an 812px phone viewport, and nothing ever turned the
   overflow back on: measured 42 of 58 items — everything below "Tuscany",
   including Communities, Resources, About, Contact and all three CTA
   buttons — rendered but sat outside the clip with no way to reach them.

   Only the open state scrolls; the closed state keeps overflow:hidden so the
   transition still collapses cleanly. dvh follows the mobile browser chrome
   as it hides and shows, with a vh fallback for anything that predates it. */
#clg-header #clg-mob.open {
  max-height: calc(100vh - 96px);
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* hero heading standard - matches homepage */
/* max is 3.7rem, not 4.6rem: the h1 box is capped at 760px, so a larger
   font simply overflows it and pushes the second line onto a third row on
   1280-1600px screens. Raise the box before raising this. */
.hero h1{font-family:var(--sans)!important;font-size:clamp(2.5rem,5.4vw,3.7rem)!important;font-weight:400!important;line-height:1.03!important;letter-spacing:-.02em!important;color:#fff;}@media(max-width:600px){.hero h1{font-size:clamp(2rem,8vw,3rem)!important;}}

/* The <em> in a hero H1 is the SECOND LINE OF THE HEADLINE, not a subtitle --
   on most pages it continues the sentence (Airdrie Homes + for Sale), so
   it must stay the same size as line 1 or the phrase reads broken. */
.hero h1 em{display:block!important;color:rgba(255,255,255,.55)!important;font-style:italic!important;font-weight:400!important;font-family:inherit!important;letter-spacing:inherit!important;}


/* ===========================================================================
   HARD RULE — every headline is DM Sans Regular, tracking -20.
   Set by Crystal 2026-08-30. Covers all headings AND anything nested inside
   one (the second line of a hero H1 is an <em>, so it must follow too).
   The `html body` prefix plus !important puts this above per-page heading
   rules, of which ~1,266 pages still carry a Playfair/serif declaration.
   If a headline ever needs a different face, change it HERE, not per page.
   =========================================================================== */
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body h1 *, html body h2 *, html body h3 *, html body h4 *,
html body h5 *, html body h6 *,
html body .hero h1, html body .hero h1 *,
html body .hero-title, html body .hero-title *,
html body .section-title, html body .section-title * {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* Top-level nav item that is a plain link rather than a mega trigger. */
.clg-ml-link{text-decoration:none;color:inherit;display:inline-flex;align-items:center}

/* == theme.css == */
/* ============================================
   SITE THEME — loaded last, wins the cascade
   Matches /calgary-real-estate-listings/ design
   ============================================ */

/* --- Design tokens --- */
:root {
  --green:      #6aba5a;
  --teal:       #48a3a6;
  --lime:       #a2c243;
  --ink:        #012F38;
  --dark-teal:  #012F38;
  --muted:      #6b6b6b;
  --bg:         #f8f7f4;
  --light:      #f8f7f4;
  --lighter:    #ffffff;
  --white:      #ffffff;
  --card-bg:    #ffffff;
  --border:     rgba(1,47,56,0.10);
  --shadow-sm:  0 2px 12px rgba(0,0,0,0.07);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.13);
  --radius:     14px;
  --radius-sm:  8px;
  --radius-lg:  22px;
  --transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sans:       'DM Sans', system-ui, sans-serif;
  --serif:      'Playfair Display', Georgia, serif;
}

/* --- Base --- */
html { -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
}

h1, h2, h3, h4, h5 {
  letter-spacing: -0.025em;
}

/* ============================================
   HEADLINES — DM Sans Regular, tracking ~-20
   All headings + div-based title classes.
   !important to beat per-page serif rules.
   ============================================ */
h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *,
.ap-title, .bvs-title, .cat-title, .cmp-badge-title, .cond-card-title,
.dc-title, .ep-title, .feat-callout-title, .hazard-title, .hero-title,
.htype-heading, .j-title, .lc-title, .letter-heading, .mtype-heading,
.r-title, .rcard-title, .section-title, .solve-title, .split-title,
.step-title, .svc-title, .tl-title, .toc-title, .val-title,
.collection-main-title,
.ap-title *, .bvs-title *, .cat-title *, .cmp-badge-title *, .cond-card-title *,
.dc-title *, .ep-title *, .feat-callout-title *, .hazard-title *, .hero-title *,
.htype-heading *, .j-title *, .lc-title *, .letter-heading *, .mtype-heading *,
.r-title *, .rcard-title *, .section-title *, .solve-title *, .split-title *,
.step-title *, .svc-title *, .tl-title *, .toc-title *, .val-title *,
.collection-main-title * {
  font-family: 'DM Sans', system-ui, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.02em !important;
}

/* --- Layout utilities --- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }

.section    { padding: 96px 0; }
.section-sm { padding: 64px 0; }

.section-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 16px;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.section-subtitle {
  font-size: 17px;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.65;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  text-decoration: none;
}

.btn-primary  { background: var(--green); color: #fff; }
.btn-primary:hover { background: #5aaa4a; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(106,186,90,.35); }

.btn-secondary { background: transparent; color: var(--ink); border: 1.5px solid rgba(0,0,0,.2); }
.btn-secondary:hover { border-color: var(--green); color: var(--green); transform: translateY(-2px); }

.btn-teal  { background: var(--teal); color: #fff; }
.btn-teal:hover { background: #389a9d; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(72,163,166,.35); }

.btn-outline { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-outline:hover { background: var(--green); color: #fff; transform: translateY(-2px); }

.btn-white { background: rgba(255,255,255,.15); color: #fff; border: 1.5px solid rgba(255,255,255,.3); backdrop-filter: blur(10px); }
.btn-white:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); }

/* --- Card defaults --- */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* --- Tab buttons (collections, filters) --- */
.tab-btn {
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: var(--transition);
  font-family: var(--sans);
}
.tab-btn:hover, .tab-btn.active { background: var(--dark-teal); color: #fff; border-color: var(--dark-teal); }

/* --- Stat cards (dark bg) --- */
.stat-card {
  border-radius: var(--radius);
  transition: var(--transition);
}
.stat-card:hover { transform: translateY(-3px); }

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
}
.stat-trend.up      { background: rgba(106,186,90,.2); color: var(--green); }
.stat-trend.down    { background: rgba(229,100,100,.2); color: #e56464; }
.stat-trend.neutral { background: rgba(0,0,0,.06); color: var(--muted); }

/* --- Sidebar / price-range pages --- */
.sidebar-nav a.current {
  background: var(--green);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* --- IDX widget page hero (buy/ pages) --- */
.page-hero {
  background: var(--dark-teal);
  color: #fff;
}

/* --- Nav ink override (matches #clg-header scoped vars) --- */
#clg-header { --ink: #012F38; }

/* --- Footer text on light bg --- */
footer { color: var(--ink); }

/* Playfair accent class */
.playfair-accent { font-family: var(--serif); }

/* ============================================
   CANONICAL FAQ — consistent accordion style
   site-wide. Visual-only: never sets the
   collapsed max-height, so it can't hide any
   page's answers. Covers both naming schemes
   (.faq-q/.faq-a and .faq-question/.faq-answer).
   ============================================ */
.faq-q, .faq-question {
  width: 100%; box-sizing: border-box; text-align: left;
  background: none; border: none; border-radius: 0;
  padding: 1.2rem 0; margin: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  cursor: pointer; font-family: var(--sans);
  font-size: .96rem; font-weight: 500; color: var(--ink); line-height: 1.45;
  transition: color .2s;
}
.faq-q:hover, .faq-question:hover, .faq-q:hover .faq-q-text { color: var(--green); }
.faq-q-text { flex: 1; font-size: .96rem; font-weight: 500; color: inherit; line-height: 1.45; }
.faq-icon {
  flex-shrink: 0; font-size: 1.2rem; font-weight: 400; line-height: 1;
  color: var(--green); background: none; width: auto; height: auto;
  border-radius: 0; padding: 0; transition: transform .25s;
}
.faq-item.open .faq-icon, .faq-item.active .faq-icon {
  background: none; color: var(--green); transform: rotate(45deg);
}
.faq-a, .faq-answer {
  font-size: .9rem; line-height: 1.75; color: var(--muted); font-weight: 400;
}
/* open-state only — safe: enlarging a visible answer can't hide content */
.faq-item.open .faq-a, .faq-item.open .faq-answer,
.faq-item.active .faq-a, .faq-item.active .faq-answer {
  max-height: 800px; padding-bottom: 1.25rem;
}
.faq-a a, .faq-answer a { color: var(--teal); font-weight: 500; text-decoration: none; }


/* ── Hero height standard ─────────────────────────────────────────────────
   One height everywhere: 460px desktop, 340px at phone widths. Before this
   the site ran two competing standards (500/380 on condo buildings, 420/320
   on communities) plus a scattered tail, so interior pages never lined up.

   :not(:has(.hero-carousel)) exempts the homepage, whose hero is a
   deliberate full-viewport video carousel and shares both the .hero class
   and a bare <body> with every other page — the carousel is the only
   structural thing unique to it. /home2/ uses .h2-hero and is unaffected. */
.hero:not(:has(.hero-carousel)),
.bs-hero,
.cd-hero,
.lx-hero,
.aw-hero {
  /* height:auto releases hard heights (condo buildings ship height:500px)
     so min-height governs; content taller than the floor still grows. */
  height: auto;
  min-height: 460px;
}
@media (max-width: 760px) {
  .hero:not(:has(.hero-carousel)),
  .bs-hero,
  .cd-hero,
  .lx-hero,
  .aw-hero {
    height: auto;
    min-height: 340px;
  }
}


/* ── Mobile hero: headline first ──────────────────────────────────────────
   The min-height above is a floor, not a ceiling, and on a phone the hero's
   own content blew straight through it: measured 877px on an 812px screen,
   so the entire first screen was intro and the primary CTA landed at 1550px
   — nearly two screens down before anyone could act.

   Two causes, both fixed here:
     * the sub-paragraph is the bulk of it (292 chars, 259px + 28px margin)
     * .hero ships padding:80px 0 64px with no phone breakpoint

   The copy stays in the HTML. This is responsive display, not hidden text —
   the crawler still reads it, and the opening body paragraph covers the same
   ground for anyone who scrolls. The headline carries the hero alone on a
   phone, which is what it is for.

   !important on the hide only: these ledes are declared in per-page inline
   <style> blocks across ~930 pages plus four cluster stylesheets that load
   after this file, so source order can't be relied on. Padding needs no
   !important — :not(:has()) already outweighs a bare .hero.
   Desktop is untouched. */
@media (max-width: 760px) {
  .hero:not(:has(.hero-carousel)) {
    padding-top: 40px;
    padding-bottom: 28px;
  }
  .hero:not(:has(.hero-carousel)) .hero-sub,
  .bs-hero .bs-lede,
  .cd-hero .cd-lede,
  .lx-hero .lx-lede,
  .st-hero .st-sum {
    display: none !important;
  }
}

/* == footer.css == */
/* CalgaryListings Group — canonical site footer.
   Scoped to .clg-footer so it beats the per-page `footer{...}` rules that made
   the blog render charcoal while the rest of the site rendered brand teal.
   Colours and fonts are literals, not var(--ink)/var(--green), so the footer
   looks identical on every page regardless of what that page defines. */

.clg-footer{background:#0B3D47;font-family:'DM Sans',system-ui,sans-serif;margin-top:0}
.clg-footer *{box-sizing:border-box}

/* CTA band */
.clg-footer .foot-cta{padding:2.5rem 6rem;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  background:linear-gradient(135deg,#0B3D47,#106070)}
.clg-footer .foot-cta-text h3{font-family:'Playfair Display',Georgia,serif;font-size:1.55rem;
  color:#fff;font-weight:700;margin:0 0 .25rem;line-height:1.25}
.clg-footer .foot-cta-text h3 em{font-style:italic;color:#6ABA5A}
.clg-footer .foot-cta-text p{font-size:.925rem;color:rgba(255,255,255,.72);font-weight:400;margin:0}
.clg-footer .foot-cta-btns{display:flex;gap:.75rem;flex-shrink:0;flex-wrap:wrap}
.clg-footer .foot-btn-g{background:#6ABA5A;color:#012F38;padding:.75rem 1.5rem;font-size:.85rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  display:inline-block;border-radius:2px;transition:background .2s;white-space:nowrap;
  border-top:3px solid #6ABA5A}
.clg-footer .foot-btn-g:hover{background:#5aa84a}

/* link columns */
.clg-footer .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:2.5rem;
  padding:3rem 6rem 2.5rem}
.clg-footer .foot-brand img{height:50px;width:auto;display:block;margin-bottom:.55rem;opacity:.9}
/* brokerage line sits tight under the logo, reading as part of the lockup */
.clg-footer .foot-brokerage{font-size:.8rem;color:rgba(255,255,255,.6);font-weight:400;
  letter-spacing:.04em;margin:0 0 1rem}
.clg-footer .foot-brand p{font-size:.875rem;color:rgba(255,255,255,.68);line-height:1.75;
  font-weight:400;max-width:250px;margin:0 0 1rem}
.clg-footer .foot-phone{font-size:1rem;color:rgba(255,255,255,.92);text-decoration:none;
  font-weight:500;letter-spacing:.02em;transition:color .2s}
.clg-footer .foot-phone:hover{color:#6ABA5A}
.clg-footer .foot-col h4{font-family:'Playfair Display',Georgia,serif;font-size:.95rem;
  color:rgba(255,255,255,.95);margin:0 0 1.1rem;font-weight:600;letter-spacing:.01em}
.clg-footer .foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.5rem;
  margin:0;padding:0}
.clg-footer .foot-col ul a{font-size:.875rem;color:rgba(255,255,255,.75);text-decoration:none;
  transition:color .2s}
.clg-footer .foot-col ul a:hover{color:#6ABA5A}

/* bottom bar */
.clg-footer .foot-bottom{padding:1.25rem 6rem;border-top:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.clg-footer .foot-copy{font-size:.8rem;color:rgba(255,255,255,.62)}
.clg-footer .foot-social{display:flex;gap:.6rem}
.clg-footer .foot-social a{width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:border-color .2s}
.clg-footer .foot-social a:hover{border-color:#6ABA5A}
.clg-footer .foot-social svg{width:15px;height:15px;fill:rgba(255,255,255,.7);
  transition:fill .2s}
.clg-footer .foot-social a:hover svg{fill:#6ABA5A}
.clg-footer .foot-legal{display:flex;gap:1.25rem;flex-wrap:wrap}
.clg-footer .foot-legal a{font-size:.8rem;color:rgba(255,255,255,.62);text-decoration:none;
  transition:color .2s}
.clg-footer .foot-legal a:hover{color:#6ABA5A}

@media (max-width:1180px){
  /* Five sections in three columns wrapped 3+2 and left a hole beside the last
     one. Below the full-width layout the brand takes its own row and the four
     link columns sit evenly under it. */
  .clg-footer .foot-top{grid-template-columns:repeat(4,1fr);gap:2rem}
  .clg-footer .foot-brand{grid-column:1/-1;max-width:none}
  .clg-footer .foot-brand p{max-width:52ch}
  .clg-footer .foot-cta,.clg-footer .foot-top,.clg-footer .foot-bottom{
    padding-left:3rem;padding-right:3rem}
}
@media (max-width:760px){
  .clg-footer .foot-top{grid-template-columns:1fr 1fr;gap:1.75rem}
  .clg-footer .foot-brand{grid-column:1/-1}
  .clg-footer .foot-cta{flex-direction:column;align-items:flex-start}
  .clg-footer .foot-bottom{flex-direction:column;align-items:flex-start;gap:.85rem}
  .clg-footer .foot-cta,.clg-footer .foot-top,.clg-footer .foot-bottom{
    padding-left:1.5rem;padding-right:1.5rem}
}
@media (max-width:460px){
  .clg-footer .foot-top{grid-template-columns:1fr}
  .clg-footer .foot-btn-g{width:100%;text-align:center}
}

/* The newsletter signup band sits directly above the footer and was painted
   var(--ink) — #1a1a1a on the 224 blog pages — so the bottom of every article
   went black, then teal. Pulled into the footer palette so the page ends as one
   block. `body` prefix outranks the page's own .newsletter rule regardless of
   stylesheet order. */
body .newsletter{background:#0B3D47;border-top:2px solid #6ABA5A}

/* Footer labels were h3/h4 until 2026-09-14; they are not document headings and
   pushed every page past Seobility's 25-heading limit. These values are what the
   headings computed to site-wide (the headline rule beat footer.css's Playfair). */
.clg-footer .foot-cta-title{font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:1.55rem;font-weight:400;letter-spacing:-.02em;line-height:1.25;color:#fff;margin:0 0 .25rem}
.clg-footer .foot-col-title{font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-size:.95rem;font-weight:400;letter-spacing:-.02em;color:rgba(255,255,255,.95);margin:0 0 1.1rem}

/* == join-cta.css == */
/* Site-wide "create a free account" band — guides, checklists, videos, concierge.
   Scoped to .clg-join so it cannot affect the pages it is injected into.
   Sits directly above the footer, so it uses the same brand teal and the two
   read as one block rather than two competing dark bands. */

.clg-join{background:#0B3D47;padding:3.25rem 6rem;font-family:'DM Sans',system-ui,sans-serif;
  border-top:1px solid rgba(255,255,255,.08)}
.clg-join-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:3rem;align-items:center;
  max-width:1180px;margin:0 auto}
.clg-join-eyebrow{display:inline-block;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:#6ABA5A;font-weight:500;margin:0 0 .6rem}
.clg-join h2{font-family:'Playfair Display',Georgia,serif;font-size:1.9rem;color:#fff;
  font-weight:700;line-height:1.22;margin:0 0 .7rem}
.clg-join h2 em{font-style:italic;color:#6ABA5A}
.clg-join-sub{font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.72);margin:0 0 1.4rem;
  max-width:46ch}
.clg-join-btns{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.clg-join-btn{background:#6ABA5A;color:#012F38;padding:.85rem 1.6rem;font-size:.85rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;
  border:0;border-radius:2px;cursor:pointer;font-family:inherit;transition:background .2s}
.clg-join-btn:hover{background:#5aa84a}
.clg-join-alt{color:rgba(255,255,255,.72);font-size:.85rem;text-decoration:none;
  padding:.85rem .4rem;transition:color .2s}
.clg-join-alt:hover{color:#6ABA5A}
.clg-join-note{font-size:.78rem;color:rgba(255,255,255,.45);margin:1rem 0 0}

.clg-join-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:.9rem}
.clg-join-list li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:8px;padding:.95rem 1.05rem}
.clg-join-list b{display:block;font-size:.9rem;color:#fff;font-weight:500;margin:0 0 .2rem}
.clg-join-list span{display:block;font-size:.8rem;line-height:1.55;color:rgba(255,255,255,.62)}

@media (max-width:1100px){
  .clg-join{padding:2.75rem 3rem}
  .clg-join-inner{grid-template-columns:1fr;gap:2rem}
  .clg-join-sub{max-width:none}
}
@media (max-width:600px){
  .clg-join{padding:2.25rem 1.5rem}
  .clg-join h2{font-size:1.55rem}
  .clg-join-list{grid-template-columns:1fr}
  .clg-join-btn{width:100%;text-align:center}
}