/* Mobile: let the search hero grow to fit the search bar and start it below the logo */
@media (max-width:900px){
  div:has(> .wrap form.al-hs){height:auto!important;min-height:0!important}
  .wrap:has(form.al-hs){justify-content:flex-start!important;padding-top:150px!important;padding-bottom:40px!important}
}
/* Community pages: price ranges as a dropdown */
.al-subpg-select{display:block;width:100%;max-width:380px;height:46px;margin-top:6px;border:1px solid #d5dbe8;border-radius:8px;padding:0 38px 0 12px;font-size:16px;font-family:inherit;color:#1B2A4A;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%2355627f'/%3E%3C/svg%3E") no-repeat right 14px center;-webkit-appearance:none;appearance:none;cursor:pointer}
.al-subpg-select:focus{outline:0;border-color:#1734c4;box-shadow:0 0 0 3px rgba(23,52,196,.15)}
/* Home: Communities Served - keep the two button groups together as one list on phones */
@media (max-width:900px){
  #sec-commbtn1,#sec-commbtn1 > *,#sec-commbtn1 > * > *{padding-bottom:0!important;margin-bottom:0!important}
  #sec-commbtn2,#sec-commbtn2 > *,#sec-commbtn2 > * > *{padding-top:0!important;margin-top:0!important}
  #sec-commbtn2{margin-top:12px!important}
  #sec-commhead,#sec-commhead > *,#sec-commhead h2{padding-bottom:0!important;margin-bottom:0!important}
  #sec-commbtn1{padding-top:12px!important}
}
/* Home: Communities Served - buttons change colour on hover / keyboard focus */
#sec-commbtn1 a,#sec-commbtn2 a{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease}
#sec-commbtn1 a:hover,#sec-commbtn2 a:hover,#sec-commbtn1 a:focus-visible,#sec-commbtn2 a:focus-visible{background:#DC1C2E!important;border-color:#DC1C2E!important;color:#FFFFFF!important;transform:translateY(-2px);box-shadow:0 6px 16px rgba(220,28,46,.28)}
/* Header logo: transparent logo, white over the hero photo, original colours on the white bar */
#siteHeader .site-logo{background:none;box-shadow:none;border:0;padding:6px 0;flex-shrink:0}
#siteHeader .site-logo img{display:block;height:120px!important;max-height:none!important;width:auto!important;max-width:none!important;transition:filter .35s ease}
#siteHeader.tr-on-photo .site-logo img{filter:invert(1) contrast(.385) brightness(1.57) drop-shadow(0 1px 6px rgba(0,0,0,.45))}
@media (max-width:1100px){#siteHeader .site-logo img{height:96px!important}}
@media (max-width:900px){#siteHeader .site-logo img{height:76px!important}}
/* In-text links in blog posts and page write-ups: bold, brand blue, light underline, red on hover (menus, footer, buttons and listing cards are left alone) */
:is(p,li,td,dd,blockquote,figcaption) a:not([class]):not(#siteHeader *):not(header *):not(nav *):not(footer *):not([class*="menu"] *):not([class*="footer"] *):not([class*="card"] *){font-weight:700;color:#1734c4;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(23,52,196,.45);transition:color .15s ease,text-decoration-color .15s ease}
:is(p,li,td,dd,blockquote,figcaption) a:not([class]):not(#siteHeader *):not(header *):not(nav *):not(footer *):not([class*="menu"] *):not([class*="footer"] *):not([class*="card"] *):is(:hover,:focus-visible){color:#DC1C2E;text-decoration-color:currentColor}
/* Blue cards on neighbourhood, community and income-property guides: links stay white, bold and underlined so phone numbers are readable on the blue */
.nbg-cta a:not(.nbg-btn),.nbg-lead a,.nbi-cta a,.nbg-cta a:not(.nbg-btn):is(:hover,:focus-visible),.nbg-lead a:is(:hover,:focus-visible),.nbi-cta a:is(:hover,:focus-visible){color:#FFFFFF!important;font-weight:700!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important;text-decoration-color:rgba(255,255,255,.85)!important}
/* Neighbourhood & community guides (pages with the live listings strip): every block uses the same content width as the heading and listings, instead of running edge to edge */
body:has(.ng-strip) .wrap.section[style*="max-width:none"]{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}
/* ...and one even gap between every block, top to bottom (no big empty bands) */
body:has(.ng-strip) .al-sec:not(.al-sec-hero-media){padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
body:has(.ng-strip) .wrap.section{padding-top:14px!important;padding-bottom:14px!important}
body:has(.ng-strip) .nbg{margin-top:0!important;margin-bottom:0!important}
.nbg .nbg-out > :last-child{margin-bottom:0!important}
.ng-perks ul{margin-bottom:0!important}
/* Guide pages with a header card or photo hero (neighbourhoods and communities): the hero already shows the name, so the separate page heading is hidden from view (it stays in the page for Google and screen readers) and takes up no space */
body:has(.nbh) .al-sec-content-pageHeading,body:has(.ng-strip):has(.al-sec-hero-media) .al-sec-content-pageHeading{padding:0!important;margin:0!important;height:0!important;overflow:hidden!important}
body:has(.nbh) .al-sec-content-pageHeading .section,body:has(.ng-strip):has(.al-sec-hero-media) .al-sec-content-pageHeading .section{padding:0!important;margin:0!important}
body:has(.nbh) .al-sec-content-pageHeading h1,body:has(.ng-strip):has(.al-sec-hero-media) .al-sec-content-pageHeading h1{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
/* Neighbourhood guides: tighter illustrated header card on phones - no empty sky, less gap under the menu */
@media (max-width:760px){
  .nb-hero-auto,.wrap.section:has(> .nbh){padding-top:4px!important;padding-bottom:0!important;margin-top:0!important}
  .nbh{min-height:0!important;margin:6px 0 0!important;border-radius:16px!important}
  .nbh .nbh-tx{padding:22px 20px 20px!important}
  .nbh .nbh-eye{font-size:11px!important;letter-spacing:.1em!important;padding:8px 12px!important;margin-bottom:12px!important}
  .nbh .nbh-title{font-size:36px!important;margin-bottom:8px!important}
  .nbh .nbh-tag{font-size:16px!important;margin-bottom:16px!important}
  .nbh .nbh-cta{gap:10px!important}
  .nbh .nbh-btn{padding:13px 20px!important;font-size:15px!important}
}
/* Neighbourhood guides: the illustrated header runs full width, edge to edge, like the photo heroes on the community pages (same 55% screen height, text middle-left) */
body:has(.nbh){overflow-x:clip}
body:has(.nbh) .wrap.section.nb-hero-auto{width:100vw!important;max-width:none!important;margin:0 0 0 calc(50% - 50vw)!important;padding:0!important;box-sizing:border-box}
body:has(.nbh) .nb-hero-auto .nbh{min-height:55vh!important;align-items:center!important;margin:0!important;border-radius:0!important;box-shadow:none!important}
body:has(.nbh) .nb-hero-auto .nbh-tx{width:100%!important;max-width:1440px!important;margin:0 auto!important;padding:48px clamp(20px,4vw,56px)!important;box-sizing:border-box}
body:has(.nbh) .nb-hero-auto .nbh-tx > p{max-width:620px}
@media (max-width:760px){
  body:has(.nbh) .wrap.section.nb-hero-auto{padding:0!important;margin-top:0!important}
  body:has(.nbh) .nb-hero-auto .nbh{min-height:0!important;align-items:flex-end!important}
  body:has(.nbh) .nb-hero-auto .nbh-tx{padding:26px 20px 24px!important}
}
/* Buyers menu: the HomeSwipe link shows in bold pink (darker pink on hover) to match the app */
#siteHeader a[href*="/buyers/homeswipe"],header a[href*="/buyers/homeswipe"],nav a[href*="/buyers/homeswipe"],[class*="menu"] a[href*="/buyers/homeswipe"]{color:#d3155a!important;font-weight:700!important}
#siteHeader a[href*="/buyers/homeswipe"]:is(:hover,:focus-visible),header a[href*="/buyers/homeswipe"]:is(:hover,:focus-visible),nav a[href*="/buyers/homeswipe"]:is(:hover,:focus-visible),[class*="menu"] a[href*="/buyers/homeswipe"]:is(:hover,:focus-visible){color:#a50f45!important}
/* Phones, all pages except the home page and the neighbourhood/community guides (which have their own rule above): one even gap between blocks, no empty bands above and below the blue boxes, and the invisible jump-to anchors take up no space */
@media (max-width:760px){
  body:not(:has(form.al-hs)):not(:has(.ng-strip)) .al-sec:not(.al-sec-hero-media){padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
  body:not(:has(form.al-hs)):not(:has(.ng-strip)) .al-sec:not(.al-sec-hero-media) .wrap.section{padding-top:10px!important;padding-bottom:10px!important}
  body:not(:has(form.al-hs)):not(:has(.ng-strip)) .nbg{margin-top:0!important;margin-bottom:0!important}
  body:not(:has(form.al-hs)):not(:has(.ng-strip)) .wrap.section div[style*="linear-gradient"][style*="margin:24px auto"]{margin-top:0!important;margin-bottom:0!important}
  body:not(:has(form.al-hs)):not(:has(.ng-strip)) .al-sec:has([id][style*="height:1px"]){height:0!important;overflow:hidden!important}
  body:not(:has(form.al-hs)):not(:has(.ng-strip)) .al-sec:has([id][style*="height:1px"]) .wrap.section{padding:0!important}
}
/* Home page "Hot New Listings" on phones: compact two-across cards, same as the neighbourhood pages */
@media (max-width:640px){
  body:has(form.al-hs) .al-strip .al-strip-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body:has(form.al-hs) .al-strip .al-strip-grid .card{margin:0!important;min-width:0;border-radius:12px;overflow:hidden}
  body:has(form.al-hs) .al-strip .al-strip-grid .card>div:first-child{height:116px!important}
  body:has(form.al-hs) .al-strip .al-strip-grid .card>div:first-child>div:nth-child(2){top:7px!important;left:7px!important;font-size:9.5px!important;padding:3px 6px!important}
  body:has(form.al-hs) .al-strip .al-strip-grid .card>div:nth-child(2){padding:9px 10px 11px!important}
  body:has(form.al-hs) .al-strip .al-strip-grid .card>div:nth-child(2)>div:first-child{font-size:15.5px!important}
  body:has(form.al-hs) .al-strip .al-strip-grid .card>div:nth-child(2)>div:nth-child(2){font-size:12.5px!important;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  body:has(form.al-hs) .al-strip .al-strip-grid .card>div:nth-child(2)>div:nth-child(3){font-size:11px!important;line-height:1.3}
}