/* Site shell base CSS - every builder page (_SitePageShell.cshtml) links this file.
   It used to be an inline <style> block in the shell; moved here (2026-09-11) so it is
   fetched once, cached immutable via ?v= and served compressed instead of riding along
   in every HTML response. Theme values come from the :root tokens _SiteChromeHead emits. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.display { font-family: var(--font-display); font-weight: 400; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.btn-accent { background: var(--accent); color: #FDFBF6; border: none; border-radius: 9px; padding: 12px 26px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: var(--font-body); }
.card { border-radius: 14px; overflow: hidden; background: var(--card); box-shadow: 0 6px 24px rgba(0,0,0,.07); }
.section { padding-top: 56px; padding-bottom: 24px; }
.section h2 { font-family: var(--font-display); font-size: 36px; font-weight: 400; margin: 0 0 28px; }
/* Rich-text content (incl. images inserted from the editor's image picker) */
.section img { max-width: 100%; height: auto; }
.section blockquote { border-left: 3px solid var(--accent); margin: 0 0 16px; padding: 6px 18px; opacity: .85; }
.section hr { border: none; border-top: 1px solid rgba(0,0,0,.12); margin: 24px 0; }
/* Rich-text image positions, set by the page editor's click-on-image toolbar */
.section img.rt-left { float: left; margin: 6px 22px 12px 0; border-radius: 10px; }
.section img.rt-right { float: right; margin: 6px 0 12px 22px; border-radius: 10px; }
.section img.rt-center { display: block; float: none; margin: 14px auto; border-radius: 10px; }
.section img.rt-full { display: block; float: none; width: 100%; margin: 14px 0; border-radius: 10px; }
input, textarea { font-family: var(--font-body); }
.nav-caret { font-size: 10px; opacity: .5; margin-left: 4px; }
/* ── Listings strip: stats bar + view/sort toolbar ── */
.al-strip-stats { display: flex; flex-wrap: wrap; gap: 14px; margin: -8px 0 22px; }
.al-stat { background: var(--card); border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,.06); padding: 14px 22px; min-width: 128px; }
.al-stat-num { font-size: 22px; font-weight: 700; line-height: 1.2; }
.al-stat-lbl { font-size: 12.5px; opacity: .6; margin-top: 2px; }
.al-strip-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 20px; }
.al-strip-views { display: inline-flex; border: 1px solid rgba(0,0,0,.14); border-radius: 9px; overflow: hidden; background: var(--card); }
.al-vbtn { border: none; background: transparent; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 8px 16px; cursor: pointer; color: inherit; opacity: .65; }
.al-vbtn + .al-vbtn { border-left: 1px solid rgba(0,0,0,.1); }
.al-vbtn.on { background: var(--accent); color: #FDFBF6; opacity: 1; }
.al-strip-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.al-strip-sort { font-family: var(--font-body); font-size: 13.5px; padding: 8px 10px; border-radius: 9px; border: 1px solid rgba(0,0,0,.14); background: var(--card); color: inherit; cursor: pointer; }
.al-strip-viewall { display: inline-block; background: var(--accent); color: #FDFBF6; border-radius: 9px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; }
.al-strip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.al-strip.view-list .al-strip-grid { grid-template-columns: 1fr; }
.al-strip.view-list .al-strip-grid .card { display: flex !important; }
.al-strip.view-list .al-strip-grid .card > div:first-child { width: 270px; min-width: 180px; flex-shrink: 0; height: auto !important; min-height: 150px; }
.al-strip.view-map .al-strip-grid { display: none; }
.al-strip-map { height: 480px; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.07); }
/* Strip paging: cards past the current page hide via this CLASS (the cards' inline
   display:block — and list view's display:flex !important — would beat [hidden]) */
.al-pgx { display: none !important; }
.al-strip.view-list .al-strip-grid .card.al-pgx { display: none !important; }
.al-strip-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.al-pg-lbl { font-size: 13.5px; opacity: .65; }
.al-pg-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.al-pg-btn { display: inline-block; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 9px; border: 1px solid rgba(0,0,0,.14); background: var(--card); color: inherit; cursor: pointer; text-decoration: none; }
.al-pg-btn:hover { color: var(--accent); }
.al-pg-btn[hidden] { display: none; }
.al-pg-viewall[hidden] { display: none; }
.al-pg-btm { text-align: center; margin-top: 24px; }
.al-pg-btm[hidden] { display: none; }
/* Map view shows every fetched pin at once — the pager describes the grid, so hide it there */
.al-strip.view-map .al-pg-btm, .al-strip.view-map .al-strip-pager { display: none; }
@media (max-width: 640px) {
    .al-stat { padding: 10px 14px; min-width: 104px; }
    .al-stat-num { font-size: 18px; }
    .al-strip.view-list .al-strip-grid .card > div:first-child { width: 130px; min-width: 130px; }
}
/* ── Buttons section (content.buttons) ── */
.al-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.al-btns.align-center { justify-content: center; }
.al-btns.align-right { justify-content: flex-end; }
.al-btns.vert { flex-direction: column; align-items: flex-start; }
.al-btns.vert.align-center { justify-content: flex-start; align-items: center; }
.al-btns.vert.align-right { justify-content: flex-start; align-items: flex-end; }
.al-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; background-color: var(--accent); color: #FDFBF6; border-radius: 9px; padding: 13px 30px; font-size: 15px; font-weight: 600; text-align: center; background-size: cover; background-position: center; }
.al-btn.has-img { min-height: 64px; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
@media (max-width: 760px) {
    /* Phones always stack the buttons one above the other, full width
       (!important beats the 3-class .vert.align-* rules) */
    .al-btns { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; }
}
/* ── Testimonials (testimonials.carousel / testimonials.page) ── */
.al-tst { position: relative; }
.al-tst.has-pages { padding: 0 56px; }
.al-tst-card { background: var(--card); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.07); padding: 24px 28px; margin: 0 0 18px; }
.al-tst-card .txt { font-size: 15.5px; line-height: 1.65; white-space: pre-line; }
.al-tst-card .txt.clamped { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.al-tst-more { border: none; background: none; color: var(--accent); font-weight: 600; font-size: 13.5px;
    padding: 0; margin-top: 8px; cursor: pointer; font-family: var(--font-body); }
.al-tst-card .who { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; font-size: 14px; }
.al-tst-card .who .nm { font-weight: 700; }
.al-tst-card .who .dt { opacity: .55; }
.al-tst-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,.14); background: var(--card); color: inherit; font-size: 22px; line-height: 1;
    cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.08); z-index: 2; font-family: var(--font-body); }
.al-tst-arrow.prev { left: 0; }
.al-tst-arrow.next { right: 0; }
.al-tst-dots { display: flex; gap: 8px; justify-content: center; margin: 2px 0 0; }
.al-tst-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(0,0,0,.18); cursor: pointer; padding: 0; }
.al-tst-dots button.on { background: var(--accent); }
.al-tst-cta { display: flex; justify-content: flex-end; margin-top: 16px; }
.al-tst-empty { opacity: .65; font-size: 15px; margin: 0 0 8px; }
.al-tst-form { padding: 26px; margin-top: 36px; }
.al-tst-form h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin: 0 0 16px; }
.al-tst-fm { display: grid; gap: 14px; }
.al-tst-fm input, .al-tst-fm textarea { border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; background: var(--bg); color: inherit; }
.al-tst-fm textarea { resize: vertical; }
.al-tst-note { font-size: 12.5px; opacity: .6; }
.al-tst-msg { font-size: 14px; display: none; }
.al-tst-modal { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 18px; }
.al-tst-modal[hidden] { display: none; }
.al-tst-modal-bg { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.al-tst-modal-card { position: relative; background: var(--card); border-radius: 16px; padding: 28px; width: 100%;
    max-width: 540px; max-height: 90vh; overflow: auto; box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.al-tst-modal-card h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin: 0 0 16px; padding-right: 30px; }
.al-tst-modal-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: none; border-radius: 50%;
    background: rgba(0,0,0,.06); color: inherit; font-size: 15px; cursor: pointer; }
@media (max-width: 640px) {
    .al-tst.has-pages { padding: 0 40px; }
    .al-tst-arrow { width: 32px; height: 32px; font-size: 18px; }
    .al-tst-card { padding: 18px 20px; }
}
/* ── Offices & Agents directory (offices.directory) ── */
/* pages.grid cards: page links with the page's share image as the card background */
.al-pgc { display: flex; flex-direction: column; justify-content: flex-end; min-height: 150px; padding: 20px 22px;
    background-size: cover; background-position: center; text-decoration: none; color: inherit; }
.al-pgc .al-pgc-t { font-weight: 600; font-size: 17px; }
.al-pgc .al-pgc-s { font-size: 13px; opacity: .6; margin-top: 3px; }
.al-pgc.has-img { color: #fff; }
.al-pgc.has-img .al-pgc-s { opacity: .85; }
/* pages.grid extras: card description, the subtitle under the heading, the View all button */
.al-pgc .al-pgc-d { font-size: 13.5px; line-height: 1.5; opacity: .78; margin-top: 6px; }
.al-pgc.has-img .al-pgc-d { opacity: .92; }
.al-pgg-sub { font-size: 15px; opacity: .7; margin: -16px 0 24px; max-width: 760px; }
.al-pgg-all { text-align: center; margin-top: 26px; }
.al-pgg-all .btn-accent { display: inline-block; text-decoration: none; }

/* contact.form agent-info block (showAgentInfo): beside the form (pos-left / pos-right) or
   stacked above / below it. Templates get the same markup as agent_info_html. */
.al-cf-layout { display: flex; flex-direction: column; gap: 28px; }
.al-cf-layout > .al-cf { flex: 1 1 0; min-width: 0; }
.al-cf-layout.pos-left, .al-cf-layout.pos-right { flex-direction: row; align-items: flex-start; }
.al-cf-layout.pos-right .al-cf-agent, .al-cf-layout.pos-below .al-cf-agent { order: 2; }
.al-cf-agent { flex: 0 0 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.al-cf-layout.pos-above .al-cf-agent, .al-cf-layout.pos-below .al-cf-agent { flex: none; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 18px 40px; }
.al-cf-layout.pos-above .al-cf-agent > *, .al-cf-layout.pos-below .al-cf-agent > * { flex: 1 1 260px; min-width: 0; }
.al-cf-layout.pos-above .al-cf-agent-t, .al-cf-layout.pos-below .al-cf-agent-t,
.al-cf-layout.pos-above .al-cf-agent-x, .al-cf-layout.pos-below .al-cf-agent-x { flex: 1 1 100%; }
.al-cf-agent-t { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin: 0; line-height: 1.2; }
.al-cf-agent-x { font-size: 14.5px; line-height: 1.6; opacity: .75; margin: -6px 0 0; }
.al-cf-agent-head { display: flex; align-items: center; gap: 14px; }
.al-cf-agent-photo { width: 84px; height: 84px; flex: none; border-radius: 50%; object-fit: cover; }
.al-cf-agent-name { font-size: 17.5px; font-weight: 600; line-height: 1.25; }
.al-cf-agent-role { font-size: 13.5px; opacity: .65; margin-top: 3px; }
.al-cf-agent-rows { display: flex; flex-direction: column; gap: 10px; }
.al-cf-agent-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: inherit; text-decoration: none; }
.al-cf-agent-row svg { width: 18px; height: 18px; flex: none; fill: var(--accent); margin-top: 2px; }
.al-cf-agent-row small { display: block; font-size: 11.5px; opacity: .6; }
a.al-cf-agent-row:hover span { color: var(--accent); }
.al-cf-agent-bio { font-size: 14.5px; line-height: 1.65; opacity: .8; margin: 0; }
.al-cf-agent-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.al-cf-agent-social { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); color: inherit; }
.al-cf-agent-social svg { width: 18px; height: 18px; fill: currentColor; }
.al-cf-agent-social:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 900px) {
    .al-cf-layout.pos-left, .al-cf-layout.pos-right { flex-direction: column; }
    .al-cf-agent { flex: none; width: 100%; }
}
/* listings.subpages: browse-link pill groups (current position = bold, unlinked) */
.al-subpg-group { margin-top: 16px; }
.al-subpg-group:first-of-type { margin-top: 0; }
.al-subpg-head { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .55; margin-bottom: 9px; }
.al-subpg-links { display: flex; flex-wrap: wrap; gap: 8px; }
.al-subpg-link, .al-subpg-cur { display: inline-block; padding: 7px 14px; border-radius: 999px; font-size: 13.5px; line-height: 1.4; }
.al-subpg-link { background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.06); text-decoration: none; color: inherit; transition: transform .12s ease, color .12s ease; }
.al-subpg-link:hover { transform: translateY(-1px); color: var(--accent); }
.al-subpg-cur { background: var(--accent); color: #fff; font-weight: 700; }
.al-subpg-n { opacity: .6; font-weight: 400; }
.al-ofc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; margin: 0 0 18px; }
.al-ofc-crumbs a { color: inherit; opacity: .65; text-decoration: none; }
.al-ofc-crumbs a:hover { opacity: 1; color: var(--accent); }
.al-ofc-crumbs .sep { opacity: .35; }
.al-ofc-crumbs .cur { font-weight: 600; }
.al-ofc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.al-ofc-bucket { display: block; background: var(--card); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.07);
    padding: 24px 26px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.al-ofc-bucket:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.al-ofc-bucket .nm { font-family: var(--font-display); font-size: 22px; margin: 0 0 6px; }
.al-ofc-bucket .ct { font-size: 13.5px; opacity: .6; }
.al-ofc-bucket .go { margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.al-ofc-offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 0 0 30px; }
.al-ofc-office { display: flex; gap: 18px; background: var(--card); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.07); padding: 20px 22px; }
.al-ofc-office .ph { width: 92px; height: 92px; flex: none; border-radius: 12px; object-fit: cover; background: var(--accent); }
.al-ofc-office .nm { font-weight: 700; font-size: 16.5px; margin: 0 0 4px; }
.al-ofc-office .ln { font-size: 13.5px; opacity: .75; margin: 2px 0; overflow-wrap: anywhere; }
.al-ofc-office .ln a { color: inherit; text-decoration: none; }
.al-ofc-office .ln a:hover { color: var(--accent); }
.al-ofc-agents { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.al-ofc-agent { display: block; text-align: center; background: var(--card); border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.07);
    padding: 26px 18px 22px; text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
/* the class sets display, which beats the UA's [hidden] rule — filter hiding needs this */
.al-ofc-agent[hidden] { display: none; }
.al-ofc-agent:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.al-ofc-agent .ph, .al-ofc-agent .ph-i { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 12px; display: block; object-fit: cover; }
.al-ofc-agent .ph-i { display: grid; place-items: center; background: var(--accent); color: #FDFBF6; font-family: var(--font-display); font-size: 34px; }
.al-ofc-agent .nm { font-weight: 700; font-size: 15.5px; }
.al-ofc-agent .tt { font-size: 12.5px; opacity: .6; margin-top: 2px; }
.al-ofc-agent .ct { font-size: 12.5px; color: var(--accent); margin-top: 6px; }
.al-ofc-filter { display: flex; gap: 12px; margin: 0 0 22px; }
.al-ofc-filter input { flex: 1; max-width: 420px; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 12px 14px;
    font-size: 14.5px; background: var(--card); color: inherit; font-family: var(--font-body); }
.al-ofc-none { opacity: .65; font-size: 15px; padding: 8px 0 4px; }
.al-ofc-prof { display: flex; gap: 40px; align-items: flex-start; }
.al-ofc-prof .ph, .al-ofc-prof .ph-i { width: 190px; height: 190px; flex: none; border-radius: 50%; object-fit: cover; }
.al-ofc-prof .ph-i { display: grid; place-items: center; background: var(--accent); color: #FDFBF6; font-family: var(--font-display); font-size: 64px; }
.al-ofc-prof h2 { margin: 0 0 4px; }
.al-ofc-prof .tt { font-size: 15px; opacity: .65; margin: 0 0 14px; }
.al-ofc-prof .bio { font-size: 15.5px; line-height: 1.7; opacity: .85; max-width: 720px; }
.al-ofc-prof .bio p { margin: 0 0 12px; }
.al-ofc-contact { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 16px 0 6px; font-size: 14.5px; }
.al-ofc-contact a { color: inherit; text-decoration: none; font-weight: 600; }
.al-ofc-contact a:hover { color: var(--accent); }
.al-ofc-prof-offices { margin-top: 26px; }
.al-ofc-prof-offices h3 { font-family: var(--font-display); font-size: 21px; font-weight: 400; margin: 0 0 12px; }
@media (max-width: 980px) {
    .al-ofc-grid { grid-template-columns: repeat(2, 1fr); }
    .al-ofc-agents { grid-template-columns: repeat(2, 1fr); }
    .al-ofc-offices { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .al-ofc-grid { grid-template-columns: 1fr; }
    .al-ofc-prof { flex-direction: column; align-items: center; text-align: center; }
    .al-ofc-contact { justify-content: center; }
}
/* ── Row background band (bgColor / bgImageId on a row separator) ── */
.row-bg { background-size: cover; background-position: center; padding-bottom: 30px; }
/* ── Side-by-side areas (layout.split … layout.full) ── */
.split-row { display: flex; gap: 44px; max-width: 1180px; margin: 0 auto; padding: 0 24px; align-items: flex-start; }
.split-side { min-width: 0; }
.split-main { flex: 1 1 0; min-width: 0; }
.split-row.side-right .split-side { order: 2; }
.split-row .wrap { max-width: none !important; }
@media (min-width: 901px) {
    .split-row .wrap { padding-left: 0 !important; padding-right: 0 !important; }
    .split-row .section { padding-top: 36px; }
    /* card grids: one column in the sidebar, two in the main column */
    .split-side .grid3 { grid-template-columns: 1fr !important; }
    .split-main .grid3 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 900px) {
    .split-row { flex-direction: column; gap: 0; padding: 0; }
    .split-side { flex: 1 1 auto !important; width: 100%; }
    .split-row.m-below .split-side { order: 2; }
}
@media (max-width: 760px) {
    .hide-mobile { display: none !important; }
}
/* ── Featured-listings hero slideshow (full-bleed) ── */
.hero-slides { position: relative; min-height: 420px; overflow: hidden; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity .9s ease; display: flex; align-items: flex-end; pointer-events: none; }
.hero-slide.active { opacity: 1; z-index: 1; pointer-events: auto; }
.hero-slide-scrim { position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.10) 55%, rgba(0,0,0,.22)); }
.hero-slide-info { position: relative; z-index: 2; width: 100%; color: #fff; padding-bottom: 64px; }
.hero-dots { position: absolute; z-index: 3; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0;
    background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s ease; }
.hero-dots button.on { background: #fff; }
/* ── hero.media background slideshow — clipping lives on this inset wrapper, NEVER on
      the hero root (the embedded search bar's dropdowns must escape the hero) ── */
.al-mh-slides { position: absolute; inset: 0; overflow: hidden; }
.al-mh-slide { position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity .9s ease; }
.al-mh-slide.active { opacity: 1; }
.al-mh-dots { position: absolute; z-index: 3; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; }
.al-mh-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0;
    background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s ease; }
.al-mh-dots button.on { background: #fff; }
/* ── Embedded video / photo block (video.embed + the Lead Capture Widgets' media column) ── */
.al-vemb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
.al-vemb iframe, .al-vemb video, .al-vemb img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.al-vemb video, .al-vemb img { object-fit: cover; }
.al-vemb-cap { font-size: 13px; opacity: .6; margin-top: 10px; text-align: center; }
.al-vemb-mute { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(4px); transition: background .15s; }
.al-vemb-mute:hover { background: rgba(0,0,0,.8); }
.al-vemb-mute svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ── Lead Capture Widgets (cta.postalCode / cta.homeEval / cta.streetMatch) ── */
/* The section wrapper is a size container so the card adapts to the COLUMN it sits in
   (a split-row sidebar on a wide desktop stacks like a phone would) */
.al-sec[data-sec^="cta."] { container-type: inline-size; }
.al-lcw { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--card); border: 1px solid rgba(0,0,0,.08); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 34px rgba(0,0,0,.07); }
.al-lcw.no-media { grid-template-columns: 1fr; }
.al-lcw.media-right .al-lcw-media { order: 2; }
.al-lcw-media { position: relative; min-height: 300px; background: #000; display: flex; align-items: center; }
.al-lcw-media .al-vemb { border-radius: 0; }
.al-lcw-media .al-vemb.has-photo { position: absolute; inset: 0; aspect-ratio: auto; }
.al-lcw-body { padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.al-lcw-title { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.1; margin: 0 0 12px; }
.al-lcw-text { font-size: 16px; line-height: 1.55; opacity: .78; margin: 0 0 22px; }
.al-lcw-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
/* The box keeps a readable width; when the row can't fit both, the button wraps below */
.al-lcw-in { flex: 1 1 200px; min-width: 0; border: 1px solid rgba(0,0,0,.22); border-radius: 10px; background: var(--bg); color: var(--ink); font: 400 16px var(--font-body); padding: 14px 16px; }
.al-lcw-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.al-lcw-go { flex: none; white-space: nowrap; padding: 14px 24px; font-size: 15.5px; }
.al-lcw-err { display: none; margin-top: 10px; font-size: 13.5px; color: #C05A2E; }
.al-lcw-note { font-size: 12.5px; opacity: .55; margin-top: 10px; }
@media (max-width: 900px) {
    .al-lcw { grid-template-columns: 1fr; }
    .al-lcw.media-right .al-lcw-media { order: 0; }
    .al-lcw-media { min-height: 0; }
    .al-lcw-media .al-vemb.has-photo { position: relative; inset: auto; aspect-ratio: 16 / 9; }
    .al-lcw-body { padding: 26px 22px 28px; }
    .al-lcw-title { font-size: 27px; }
    .al-lcw-form { flex-direction: column; }
    .al-lcw-in { flex: 0 0 auto; } /* the 200px basis must not become a HEIGHT in column mode */
}
/* Same stacking keyed on the CONTAINER width (sidebar columns on wide screens) */
@container (max-width: 760px) {
    .al-lcw { grid-template-columns: 1fr; }
    .al-lcw.media-right .al-lcw-media { order: 0; }
    .al-lcw-media { min-height: 0; }
    .al-lcw-media .al-vemb.has-photo { position: relative; inset: auto; aspect-ratio: 16 / 9; }
    .al-lcw-body { padding: 26px 22px 28px; }
    .al-lcw-title { font-size: 27px; }
}
@container (max-width: 480px) {
    .al-lcw-form { flex-direction: column; }
    .al-lcw-in { flex: 0 0 auto; }
    .al-lcw-go { width: 100%; }
}
/* ── Quick search bar (search.bar) ── */
.al-qsb { position: relative; }
.al-qsb-bar { display: flex; align-items: stretch; gap: 10px; background: var(--card); border: 1px solid rgba(0,0,0,.14); border-radius: 12px; padding: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.al-qsb-mode { position: relative; flex: none; }
.al-qsb-mode-btn { height: 100%; min-height: 46px; border: none; background: transparent; font: 600 15px var(--font-body); color: var(--ink); padding: 0 14px; cursor: pointer; display: flex; align-items: center; gap: 7px; border-right: 1px solid rgba(0,0,0,.12); border-radius: 0; white-space: nowrap; }
.al-qsb-mode-btn .car { font-size: 10px; opacity: .55; }
.al-qsb-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 200px; background: var(--card); border: 1px solid rgba(0,0,0,.1); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.14); padding: 6px; display: none; z-index: 60; }
.al-qsb-menu.open { display: block; }
.al-qsb-menu button { display: block; width: 100%; text-align: left; border: none; background: transparent; font: 500 14.5px var(--font-body); color: var(--ink); padding: 10px 12px; border-radius: 7px; cursor: pointer; }
.al-qsb-menu button:hover, .al-qsb-menu button.sel { background: var(--accent); color: #fff; }
.al-qsb-loc { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; }
.al-qsb-loc input { width: 100%; border: none; outline: none; background: transparent; font: 400 15px var(--font-body); color: var(--ink); padding: 10px 12px; }
.al-qsb-sug { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--card); border: 1px solid rgba(0,0,0,.1); border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.14); padding: 6px; display: none; z-index: 60; max-height: 320px; overflow: auto; }
.al-qsb-sug.open { display: block; }
.al-qsb-sug button { display: flex; width: 100%; align-items: baseline; gap: 8px; text-align: left; border: none; background: transparent; font: 500 14.5px var(--font-body); color: var(--ink); padding: 9px 12px; border-radius: 7px; cursor: pointer; }
.al-qsb-sug button:hover { background: rgba(0,0,0,.06); }
.al-qsb-sug .s2 { font-size: 12px; opacity: .55; font-weight: 400; margin-left: auto; white-space: nowrap; }
.al-qsb-fbtn { flex: none; border: 1px solid rgba(0,0,0,.16); background: transparent; color: var(--ink); border-radius: 9px; font: 600 14px var(--font-body); padding: 0 16px; cursor: pointer; }
.al-qsb-fbtn.active { border-color: var(--accent); color: var(--accent); }
.al-qsb-go { flex: none; min-height: 46px; white-space: nowrap; }
.al-qsb-panel { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--card); border: 1px solid rgba(0,0,0,.1); border-radius: 12px; box-shadow: 0 16px 44px rgba(0,0,0,.16); padding: 20px 22px; display: none; z-index: 55; }
.al-qsb-panel.open { display: block; }
.al-qsb-panel h4 { margin: 0 0 10px; font: 700 12.5px var(--font-body); letter-spacing: .1em; text-transform: uppercase; opacity: .75; border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: 7px; }
.al-qsb-panel .prow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.al-qsb-panel select { flex: 1 1 120px; min-width: 110px; border: 1px solid rgba(0,0,0,.16); border-radius: 8px; background: var(--bg); color: var(--ink); font: 400 14px var(--font-body); padding: 10px 10px; }
.al-qsb-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.al-qsb-pfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.08); }
.al-qsb-reset { border: none; background: transparent; font: 600 13px var(--font-body); letter-spacing: .06em; color: var(--ink); opacity: .6; cursor: pointer; }
.al-qsb-err { display: none; margin-top: 8px; font-size: 13.5px; color: #C05A2E; }
/* Bar sitting at the bottom of a hero (hero.media textPosition bottom-*): the mode menu,
   location suggestions and filters panel open UPWARD so the options stay on screen */
.al-qsb-up .al-qsb-menu, .al-qsb-up .al-qsb-sug, .al-qsb-up .al-qsb-panel { top: auto; bottom: calc(100% + 10px); }
@media (max-width: 760px) {
    .al-qsb-bar { flex-wrap: wrap; }
    .al-qsb-mode { order: 1; }
    .al-qsb-mode-btn { border-right: none; }
    .al-qsb-fbtn { order: 2; margin-left: auto; padding: 10px 16px; }
    .al-qsb-loc { order: 3; flex-basis: 100%; border-top: 1px solid rgba(0,0,0,.08); }
    .al-qsb-go { order: 4; flex-basis: 100%; }
    .al-qsb-cols { grid-template-columns: 1fr; }
}
/* ── Home evaluation wizard (homeEval.landing) ── */
.al-hev { position: relative; overflow: hidden; }
.al-hev-step { position: absolute; inset: 0; transform: translateX(103%); visibility: hidden; transition: transform .55s ease, visibility 0s linear .55s; display: flex; flex-direction: column; background: var(--bg); }
.al-hev-step.on { transform: none; visibility: visible; transition: transform .55s ease, visibility 0s; }
.al-hev-step.off { transform: translateX(-103%); }
.al-hev.no-anim .al-hev-step { transition: none; }
.al-hev-hero { align-items: center; justify-content: center; text-align: center; }
.al-hev-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.al-hev-hero-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.al-hev-hero-inner { position: relative; z-index: 2; color: #fff; width: min(720px, calc(100% - 48px)); animation: alhevin .75s both; }
.al-hev-hero-inner h1 { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1.06; margin: 0 0 14px; }
.al-hev-hero-inner p { font-size: 17px; letter-spacing: .04em; opacity: .94; margin: 0 0 28px; line-height: 1.55; }
@keyframes alhevin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.al-hev-pill { display: flex; gap: 10px; background: #fff; border-radius: 10px; padding: 11px; align-items: center; }
.al-hev-pill input { flex: 1 1 auto; min-width: 0; border: none; outline: none; font: 400 17px var(--font-body); color: #111; padding: 12px 10px 12px 14px; background: transparent; }
.al-hev-pill .btn-accent { flex: none; padding: 14px 26px; font-size: 15.5px; }
.al-hev-err { display: none; margin-top: 12px; font-size: 14px; background: #f03; color: #fff; border-radius: 7px; padding: 8px 14px; width: fit-content; margin-left: auto; margin-right: auto; }
.al-hev-head { flex: none; display: flex; align-items: center; gap: 16px; background: color-mix(in srgb, var(--card) 88%, #000 6%); border-bottom: 1px solid rgba(0,0,0,.1); padding: 0 40px; height: 86px; }
.al-hev-back { border: none; background: transparent; font-size: 22px; color: var(--ink); opacity: .6; cursor: pointer; padding: 8px; }
.al-hev-back:hover { opacity: 1; }
.al-hev-addr { margin-left: auto; font-size: 18px; color: var(--ink); opacity: .6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-hev-main { flex: 1 1 auto; display: flex; padding: 0 24px; overflow: auto; }
.al-hev-q { width: min(620px, 100%); margin: auto; display: flex; gap: 28px; padding: 30px 0; }
.al-hev-ico { flex: none; width: 92px; height: 92px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: #fff; }
.al-hev-ico svg { width: 44px; height: 44px; }
.al-hev-q h2 { font: 400 26px/1.35 var(--font-body); margin: 0 0 22px; }
.al-hev-opts { display: flex; flex-direction: column; gap: 13px; }
.al-hev-opts.horz { flex-direction: row; flex-wrap: wrap; gap: 8px 26px; }
.al-hev-opts label { display: flex; align-items: center; gap: 10px; font-size: 21px; color: var(--ink); cursor: pointer; }
.al-hev-opts input { display: none; }
.al-hev-opts .dot { width: 22px; height: 22px; flex: none; border-radius: 50%; background: #fff; border: 1px solid #c6c6c6; transition: background-color .3s linear, border-color .3s linear; }
.al-hev-opts input:checked + .dot { background: var(--accent); border-color: var(--accent); }
.al-hev-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.al-hev-form input { border: 1px solid rgba(0,0,0,.25); border-radius: 6px; font: 400 15.5px var(--font-body); color: var(--ink); background: var(--card); padding: 18px 15px; width: 100%; }
.al-hev-form .full { grid-column: 1 / -1; }
.al-hev-form .btn-accent { grid-column: 1 / -1; padding: 15px 26px; font-size: 17px; }
.al-hev-note { grid-column: 1 / -1; font-size: 12.5px; opacity: .6; margin-top: -4px; }
.al-hev-ferr { grid-column: 1 / -1; display: none; font-size: 14px; color: #C05A2E; }
.al-hev-done { text-align: center; width: min(640px, 100%); margin: auto; padding: 30px 0; }
.al-hev-done h2 { font-family: var(--font-display); font-weight: 400; font-size: 38px; margin: 0 0 12px; }
.al-hev-stats { display: flex; gap: 14px; justify-content: center; margin: 26px 0 6px; flex-wrap: wrap; }
.al-hev-stat { background: var(--card); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 18px 26px; min-width: 200px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.al-hev-stat .v { font-family: var(--font-display); font-size: 30px; color: var(--accent); }
.al-hev-stat .k { font-size: 13px; opacity: .65; margin-top: 4px; }
@media (max-width: 760px) {
    .al-hev-hero-inner h1 { font-size: 34px; }
    .al-hev-pill { flex-direction: column; align-items: stretch; }
    .al-hev-head { height: 60px; padding: 0 16px; }
    .al-hev-addr { font-size: 14px; }
    .al-hev-ico { display: none; }
    .al-hev-q h2 { font-size: 22px; }
    .al-hev-opts.horz { gap: 8px 18px; }
    .al-hev-form { grid-template-columns: 1fr; }
}
/* ── Street Match / Nosy Neighbour (streetMatch.landing) — reuses the .al-hev step + hero styles ── */
.al-snm { position: relative; overflow: hidden; }
.al-snm.no-anim .al-hev-step { transition: none; }
.al-snm-head-title { font-size: 17px; line-height: 1.35; color: var(--ink); opacity: .85; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.al-snm-body { flex: 1 1 auto; display: flex; min-height: 0; }
.al-snm-map { flex: 1 1 auto; position: relative; min-width: 0; }
.al-snm-canvas { position: absolute; inset: 0; }
.al-snm-top { position: absolute; z-index: 5; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 76px); }
.al-snm-top-back { display: none; flex: none; width: 40px; height: 40px; border: none; border-radius: 50%; background: #fff; color: #1d1d1d; font-size: 19px; box-shadow: 0 4px 16px rgba(0,0,0,.25); cursor: pointer; }
.al-snm-top-addr { background: rgba(255,255,255,.93); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 9px; box-shadow: 0 4px 16px rgba(0,0,0,.22); font: 500 14px var(--font-body); color: #1d1d1d; padding: 11px 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.al-snm-draw { background: #fff; color: #333; font: 700 14px var(--font-body); padding: 8px 16px; border-radius: 7px; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; user-select: none; }
.al-snm-draw.active { background: var(--accent); color: #fff; }
.al-snm-form { flex: none; width: 390px; padding: 24px 26px; overflow: auto; border-left: 1px solid rgba(0,0,0,.08); background: var(--card); display: flex; flex-direction: column; gap: 10px; }
.al-snm-form h3 { font-family: var(--font-display); font-weight: 400; font-size: 27px; margin: 0; }
.al-snm-form .sub { font-size: 14px; opacity: .7; margin: 0 0 4px; line-height: 1.5; }
.al-snm-form label { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; opacity: .6; margin-top: 4px; }
.al-snm-form select, .al-snm-form input { border: 1px solid rgba(0,0,0,.22); border-radius: 8px; font: 400 15px var(--font-body); color: var(--ink); background: var(--bg); padding: 12px 12px; width: 100%; }
.al-snm-form select:disabled { opacity: .45; }
.al-snm-unit { display: none; flex-direction: column; gap: 10px; }
.al-snm-user { display: flex; flex-direction: column; gap: 10px; }
.al-snm-note { font-size: 12.5px; opacity: .6; }
.al-snm-ferr { display: none; font-size: 14px; color: #C05A2E; }
.al-snm-form .btn-accent { padding: 14px 26px; font-size: 16px; margin-top: 8px; }
.al-snm-stats { position: absolute; z-index: 5; left: 14px; bottom: 26px; display: flex; gap: 10px; align-items: flex-end; max-width: calc(100% - 28px); flex-wrap: wrap; pointer-events: none; }
/* display:flex would beat the UA's [hidden] rule — the draw-mode hide relies on this */
.al-snm-stats[hidden] { display: none; }
.al-snm-stat { background: rgba(255,255,255,.93); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.2); padding: 12px 16px; min-width: 178px; color: #1d1d1d; animation: alsnmstat .35s ease both; }
@keyframes alsnmstat { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.al-snm-stat .k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.al-snm-stat .v { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 25px; font-weight: 700; color: var(--accent); line-height: 1.3; }
.al-snm-stat .s { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.al-snm-tc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.al-snm-tc svg { width: 21px; height: 21px; flex: none; opacity: .9; }
/* Mobile fullscreen draw mode (above the site header z90 and every modal) */
.al-snm-map.al-snm-fs { position: fixed; inset: 0; z-index: 140; height: 100vh !important; height: 100dvh !important; min-height: 0 !important; }
.al-snm-map.al-snm-fs .al-snm-top { display: none; }
.al-snm-tip { position: absolute; z-index: 6; top: 16px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.66); color: #fff; font: 600 13.5px var(--font-body); padding: 9px 16px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.al-snm-fs-x { position: absolute; z-index: 7; top: 14px; right: 14px; width: 40px; height: 40px; border: none; border-radius: 50%; background: #fff; color: #1d1d1d; font-size: 17px; box-shadow: 0 4px 16px rgba(0,0,0,.25); cursor: pointer; }
.al-snm-ctrls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; margin: 10px; }
.al-snm-apply { border: none; background: var(--accent); color: #fff; font: 700 14px var(--font-body); padding: 9px 18px; border-radius: 7px; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; }
.al-snm-apply:disabled { opacity: .55; cursor: default; }
@media (max-width: 900px) {
    .al-snm-body { flex-direction: column; overflow: auto; }
    .al-snm-map { flex: none; height: 52vh; min-height: 320px; }
    .al-snm-form { width: 100%; border-left: none; border-top: 1px solid rgba(0,0,0,.08); }
    .al-snm-stats { left: 8px; bottom: 22px; gap: 8px; max-width: calc(100% - 16px); }
    .al-snm-stat { min-width: 142px; padding: 9px 12px; }
    .al-snm-stat .s { font-size: 11.5px; }
    /* Phones skip the head bar — the map takes its space; a floating back button steps in */
    .al-snm .al-hev-head { display: none; }
    .al-snm-top { top: 10px; left: 10px; max-width: calc(100% - 20px); }
    .al-snm-top-back { display: block; }
    /* The address pill spans the top — drop the Draw controls below it */
    .al-snm-ctrls { margin-top: 64px; }
    .al-snm-stat .v { font-size: 19px; gap: 9px; }
    .al-snm-tc svg { width: 17px; height: 17px; }
}
/* ── Postal Code Home Value — Canada (postalEval.landing) ──
   One morphing panel instead of sliding steps: the hero pill (with the postal input)
   glides from center-screen to a docked card as the map fades in underneath, so the
   visitor's focus (and the input's focus) never leaves the box they're typing in. */
.al-pcv { position: relative; overflow: hidden; background: var(--bg); }
.al-pcv-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: opacity .6s ease; }
.al-pcv-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); transition: opacity .6s ease; }
.al-pcv.live .al-pcv-bg, .al-pcv.live .al-pcv-scrim { opacity: 0; pointer-events: none; }
.al-pcv-map { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .55s ease .15s; }
.al-pcv.live .al-pcv-map { opacity: 1; pointer-events: auto; }
.al-pcv-canvas { position: absolute; inset: 0; }
.al-pcv-panel { position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(720px, calc(100% - 40px)); color: #fff; text-align: center; border-radius: 16px; padding: 0;
    transition: left .55s ease, top .55s ease, transform .55s ease, width .55s ease, padding .55s ease,
        background-color .55s ease, color .55s ease, box-shadow .55s ease; }
.al-pcv-panel h1 { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1.06; margin: 0 0 14px; animation: alhevin .75s both; }
.al-pcv-panel .al-pcv-sub { font-size: 17px; letter-spacing: .04em; opacity: .94; margin: 0 0 28px; line-height: 1.55; animation: alhevin .75s both; }
/* Docked card. With a SOLID (in-flow) header the section starts below the header, so
   the card hugs the very top of the map; .hdr-overlap (transparent header floats OVER
   the section, ~84px tall) pushes it down so the input never sits under the menu. */
.al-pcv.live .al-pcv-panel { left: 16px; top: 16px; transform: none; width: 428px; text-align: left;
    background: var(--card); color: var(--ink); box-shadow: 0 10px 40px rgba(0,0,0,.28); padding: 16px 16px 14px;
    max-height: calc(100% - 32px); overflow: auto; overscroll-behavior: contain; }
.al-pcv.hdr-overlap.live .al-pcv-panel { top: 96px; max-height: calc(100% - 112px); }
.al-pcv.live .al-pcv-intro { display: none; }
.al-pcv-pill input { text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.al-pcv.live .al-pcv-pill { border: 1px solid rgba(0,0,0,.14); padding: 5px; }
.al-pcv.live .al-pcv-pill .btn-accent { padding: 12px 18px; font-size: 14px; }
.al-pcv-flag { flex: none; font-size: 22px; padding-left: 12px; }
.al-pcv-hint { display: none; font-size: 13.5px; color: #C05A2E; margin-top: 8px; }
.al-pcv.live .al-hev-err { margin-left: 0; }
/* Live facts under the input: where they are + chips with what we know */
.al-pcv-info { margin-top: 14px; animation: alsnmstat .35s ease both; }
.al-pcv-info[hidden] { display: none; }
.al-pcv-loc { font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.al-pcv-loc small { display: block; font-family: var(--font-body); font-size: 12.5px; opacity: .6; margin-top: 2px; }
.al-pcv-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.al-pcv-facts span { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
    border-radius: 999px; font-size: 12.5px; font-weight: 600; padding: 5px 11px; white-space: nowrap; }
.al-pcv-facts span b { color: var(--accent); }
/* Stages inside the docked card (streets → number → contact → done) */
.al-pcv-stage { margin-top: 16px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 14px; animation: alsnmstat .35s ease both; }
.al-pcv-stage[hidden] { display: none; }
.al-pcv-stage h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin: 0 0 4px; }
.al-pcv-stage .sub { font-size: 13.5px; opacity: .7; margin: 0 0 12px; line-height: 1.5; }
.al-pcv-back { border: none; background: transparent; color: var(--accent); font: 600 13px var(--font-body); cursor: pointer; padding: 0; margin-bottom: 8px; }
.al-pcv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.al-pcv-chips button { border: 1px solid rgba(0,0,0,.18); background: var(--bg); color: var(--ink); border-radius: 999px;
    font: 600 14px var(--font-body); padding: 9px 16px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.al-pcv-chips button:hover { border-color: var(--accent); }
.al-pcv-chips button.sel { background: var(--accent); border-color: var(--accent); color: #fff; }
.al-pcv-numrow { display: flex; gap: 8px; margin-top: 10px; }
.al-pcv-numrow input { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(0,0,0,.22); border-radius: 8px;
    font: 600 16px var(--font-body); letter-spacing: .06em; color: var(--ink); background: var(--bg); padding: 12px 14px; }
.al-pcv-numrow .btn-accent { flex: none; padding: 12px 18px; font-size: 14px; }
.al-pcv-numhint { font-size: 13px; margin-top: 8px; opacity: .75; min-height: 18px; }
.al-pcv-numhint.hit { color: var(--accent); font-weight: 600; opacity: 1; }
.al-pcv-bldg { display: inline-flex; align-items: center; gap: 7px; background: color-mix(in srgb, var(--accent) 11%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); color: var(--accent); border-radius: 999px;
    padding: 4px 12px; font: 600 11.5px var(--font-body); letter-spacing: .07em; text-transform: uppercase; margin-bottom: 8px; }
.al-pcv-notbldg { margin: 12px 0 0; font-weight: 500; opacity: .85; text-align: left; }
.al-pcv-modal { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center;
    background: rgba(12,12,12,.55); padding: 20px; }
.al-pcv-modal[hidden] { display: none; }
.al-pcv-modal-card { background: var(--bg); color: var(--ink); border-radius: 16px; padding: 26px 26px 22px;
    max-width: 440px; width: 100%; box-shadow: 0 24px 70px rgba(0,0,0,.35); animation: alsnmstat .3s ease both; }
.al-pcv-modal-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 25px; margin: 0 0 6px; }
.al-pcv-modal-card .sub { font-size: 14px; opacity: .75; line-height: 1.55; margin: 0 0 16px; }
.al-pcv-modal-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.al-pcv-modal-btns button { flex: 1 1 auto; }
.al-pcv-modal-btns .p-bldg-no { border: 1px solid rgba(0,0,0,.2); background: var(--bg); color: var(--ink);
    border-radius: 9px; padding: 12px 18px; font: 600 14.5px var(--font-body); cursor: pointer; }
.al-pcv-modal-btns .p-bldg-no:hover { border-color: var(--accent); color: var(--accent); }
.al-pcv-addrwrap { position: relative; margin-top: 10px; }
.al-pcv-addrwrap input { width: 100%; border: 1px solid rgba(0,0,0,.22); border-radius: 8px;
    font: 400 15px var(--font-body); color: var(--ink); background: var(--bg); padding: 12px; }
.al-pcv-addr-sug { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: var(--bg);
    border: 1px solid rgba(0,0,0,.14); border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.18);
    max-height: 190px; overflow: auto; z-index: 9; }
.al-pcv-addr-sug[hidden] { display: none; }
.al-pcv-addr-sug button { display: block; width: 100%; text-align: left; border: none; background: transparent;
    padding: 10px 12px; font: 400 14px var(--font-body); color: var(--ink); cursor: pointer; }
.al-pcv-addr-sug button:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.al-pcv-addr-sug .tag { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.p-unit-block { margin-top: 12px; }
.p-unit-block[hidden] { display: none; }
.al-pcv-unitlbl { font: 600 13.5px var(--font-body); margin-bottom: 2px; }
.al-pcv-user { display: flex; flex-direction: column; gap: 10px; }
.al-pcv-user input { border: 1px solid rgba(0,0,0,.22); border-radius: 8px; font: 400 15px var(--font-body); color: var(--ink); background: var(--bg); padding: 12px; width: 100%; }
.al-pcv-note { font-size: 12.5px; opacity: .6; }
.al-pcv-ferr { display: none; font-size: 14px; color: #C05A2E; }
.al-pcv-stage .btn-accent.p-submit { width: 100%; padding: 14px 26px; font-size: 16px; margin-top: 10px; }
.al-pcv-done-stats { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.al-pcv-done-stat { background: var(--bg); border: 1px solid rgba(0,0,0,.08); border-radius: 12px; padding: 12px 16px; }
.al-pcv-done-stat .v { font-family: var(--font-display); font-size: 26px; color: var(--accent); }
.al-pcv-done-stat .k { font-size: 12.5px; opacity: .65; margin-top: 2px; }
/* "See My Home Value" result + refine card */
.al-pcv-val-tiles { display: flex; gap: 8px; margin-top: 12px; }
.al-pcv-val-tile { flex: 1 1 0; background: var(--bg); border: 1px solid rgba(0,0,0,.1); border-radius: 12px; padding: 10px 8px; text-align: center; min-width: 0; }
.al-pcv-val-tile .k { font-size: 10.5px; opacity: .6; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.al-pcv-val-tile .v { font-family: var(--font-display); font-size: 17px; }
.al-pcv-val-tile.mid { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.al-pcv-val-tile.mid .v { color: var(--accent); font-size: 20px; }
.al-pcv-val-basis { font-size: 12.5px; opacity: .65; margin: 10px 0 0; line-height: 1.5; }
.al-pcv-val-msg { background: color-mix(in srgb, var(--accent) 9%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.6; margin-top: 12px; }
.al-pcv-val-msg[hidden] { display: none; }
.al-pcv-val-note { font-size: 12.5px; color: #C05A2E; margin-top: 10px; line-height: 1.5; }
.al-pcv-val-note[hidden] { display: none; }
.al-pcv-preview-badge { display: inline-block; background: #1F2937; color: #fff; font: 600 10.5px var(--font-body);
    letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 4px 12px; margin-bottom: 10px; }
.al-pcv-preview-badge[hidden] { display: none; }
.al-pcv-refine { position: absolute; z-index: 6; right: 16px; top: 16px; width: 320px; background: var(--bg); color: var(--ink);
    border-radius: 18px; padding: 20px 20px 16px; box-shadow: 0 18px 60px rgba(0,0,0,.24);
    max-height: calc(100% - 32px); overflow: auto; animation: alsnmstat .4s ease both; }
.al-pcv-refine[hidden] { display: none; }
.al-pcv.hdr-overlap .al-pcv-refine { top: 96px; max-height: calc(100% - 112px); }
.al-pcv-refine h3 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin: 0 0 4px; }
.al-pcv-refine .sub { font-size: 13px; opacity: .7; margin: 0 0 10px; line-height: 1.5; }
.al-pcv-ref-row { margin-top: 10px; }
.al-pcv-ref-row[hidden] { display: none; }
.al-pcv-ref-row label { display: block; font: 600 12.5px var(--font-body); margin-bottom: 5px; }
.al-pcv-ref-row select, .al-pcv-ref-row textarea { width: 100%; border: 1px solid rgba(0,0,0,.22); border-radius: 8px;
    font: 400 14px var(--font-body); color: var(--ink); background: var(--bg); padding: 9px 10px; }
.al-pcv-refine .al-pcv-note { margin-top: 12px; }
@media (max-width: 760px) {
    .al-pcv-panel h1 { font-size: 34px; }
    .al-pcv-pill { flex-direction: column; align-items: stretch; }
    .al-pcv-flag { display: none; }
    /* Phones: the card spans edge-to-edge flush with the top of the map so as much map
       as possible shows beneath it; the transparent-header variant tucks just below the
       floating menu. Info block + stages render compact to keep the card short. */
    .al-pcv.live .al-pcv-panel { left: 0; top: 0; width: 100%; max-height: 56%; padding: 10px 12px 10px; border-radius: 0 0 16px 16px; }
    .al-pcv.hdr-overlap.live .al-pcv-panel { left: 10px; top: 64px; width: calc(100% - 20px); max-height: 52%; border-radius: 16px; }
    .al-pcv.live .al-pcv-info { margin-top: 8px; }
    .al-pcv.live .al-pcv-loc { font-size: 15px; }
    .al-pcv.live .al-pcv-loc small { display: inline; margin-left: 6px; font-size: 11px; }
    .al-pcv.live .al-pcv-facts { margin-top: 5px; gap: 5px; }
    .al-pcv.live .al-pcv-facts span { font-size: 11px; padding: 3px 9px; }
    .al-pcv.live .al-pcv-stage { margin-top: 10px; padding-top: 9px; }
    .al-pcv.live .al-pcv-stage h3 { font-size: 17px; margin-bottom: 2px; }
    .al-pcv.live .al-pcv-stage .sub { font-size: 12.5px; margin-bottom: 8px; }
    .al-pcv.live .al-pcv-chips { margin-top: 6px; }
    .al-pcv.live .al-pcv-chips button { font-size: 13px; padding: 7px 13px; }
    .al-pcv.live .al-pcv-pill { flex-direction: row; }
    .al-pcv.live .al-pcv-pill .btn-accent { padding: 10px 12px; font-size: 12.5px; }
    .al-pcv .al-snm-stats { left: 8px; bottom: 20px; gap: 8px; max-width: calc(100% - 16px); }
    .al-pcv .al-snm-stat { min-width: 142px; padding: 9px 12px; }
    /* Value stage on phones: refine card docks to the bottom edge as a sheet */
    .al-pcv-refine { left: 0; right: 0; top: auto; bottom: 0; width: 100%;
        border-radius: 16px 16px 0 0; max-height: 44%; padding: 14px 16px 12px; }
    .al-pcv.hdr-overlap .al-pcv-refine { top: auto; max-height: 44%; }
    .al-pcv-val-tile .v { font-size: 14.5px; }
    .al-pcv-val-tile.mid .v { font-size: 16.5px; }
}
/* ─── Contact / lead form (contact.form) ─── */
.al-cf { padding: 26px; }
.al-cf-grid { display: grid; grid-template-columns: repeat(var(--cf-cols, 1), minmax(0, 1fr)); gap: 14px; }
.al-cf-sec { margin-top: 26px; }
.al-cf-sec-t { font-family: var(--font-display); font-size: 21px; font-weight: 400; margin: 0; }
.al-cf-sec-s { font-size: 13.5px; opacity: .65; margin-top: 3px; }
.al-cf-sec-head { margin-bottom: 14px; }
.al-cf-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; opacity: .8; }
.al-cf-field label .req { color: var(--accent); }
.al-cf-input { width: 100%; border: 1px solid rgba(0,0,0,.12); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; background: var(--bg); color: inherit; font-family: var(--font-body); }
textarea.al-cf-input { resize: vertical; }
.al-cf-span { grid-column: 1 / -1; }
.al-cf-check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; cursor: pointer; padding: 4px 0; }
.al-cf-check input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; margin: 0; }
/* Signed-in identity line replaces the contact inputs (JS toggles .is-authed) */
.al-cf-you { display: none; align-items: center; gap: 10px; font-size: 14.5px; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 10px; padding: 12px 14px; }
.al-cf-you svg { flex: none; }
.al-cf.is-authed .al-cf-you { display: flex; }
.al-cf.is-authed .al-cf-contact { display: none; }
.al-cf-actions { margin-top: 20px; }
.al-cf-msg { margin-top: 12px; font-size: 14px; }
.al-cf-checkgroup { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.al-cf-field-err { color: #C05A2E; font-size: 12.5px; margin-top: 5px; }
/* Post-submit thank-you state: everything but the message hides */
.al-cf.is-done > *:not(.al-cf-msg) { display: none !important; }
.al-cf.is-done .al-cf-msg { margin-top: 0; font-size: 16px; line-height: 1.6; }
/* Sold cards for visitors who can't see VOW yet: blurred + register overlay (visual
   gate only — platform vowsold parity; the wrapper owns pointer events) */
.al-vow-wrap { position: relative; }
.al-vow-blur { filter: blur(8px); pointer-events: none; user-select: none; }
.al-vow-ovl { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20,18,14,.34); border-radius: inherit; z-index: 2; }
.al-vow-cta { background: var(--accent); color: #FDFBF6; border: 0; border-radius: 10px; padding: 11px 20px; font-family: var(--font-body); font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.al-vow-cta small { display: block; font-weight: 500; opacity: .85; margin-top: 2px; }
/* Breadcrumbs section */
.al-bc { font-size: 14px; }
.al-bc ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; padding: 0; }
.al-bc li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.al-bc a { color: var(--al-bc-link, var(--accent)); text-decoration: none; }
.al-bc a:hover { text-decoration: underline; }
.al-bc .cur { color: var(--al-bc-cur, inherit); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.al-bc .sep { color: var(--al-bc-sep, currentColor); opacity: var(--al-bc-sep-op, .45); flex: none; }
.al-bc .dots { display: none; }
/* Blog sections */
.al-blg-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.al-blg-cat { display: inline-block; background: var(--card); border: 1px solid rgba(0,0,0,.12); border-radius: 99px; padding: 7px 16px; font-size: 13px; font-weight: 600; color: inherit; text-decoration: none; }
.al-blg-cat:hover { border-color: var(--accent); color: var(--accent); }
.al-blg-cat.on { background: var(--accent); border-color: var(--accent); color: #FDFBF6; }
.al-blg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.al-blg-card { display: flex; flex-direction: column; background: var(--card); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.07); color: inherit; text-decoration: none; transition: transform .12s ease, box-shadow .12s ease; }
.al-blg-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.al-blg-card .ph { height: 190px; background: linear-gradient(135deg, #C9B08E, #8A6F4E); position: relative; }
.al-blg-card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-blg-card .bd { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.al-blg-card .meta { font-size: 12px; opacity: .6; margin-bottom: 8px; }
.al-blg-card .chips { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.al-blg-card .chip { background: var(--accent); color: #FDFBF6; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 4px 9px; }
.al-blg-card .ttl { font-family: var(--font-display); font-size: 20px; line-height: 1.25; margin: 0 0 8px; }
.al-blg-card .tsr { font-size: 13.5px; opacity: .75; line-height: 1.55; flex: 1; }
.al-blg-card .more { margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--accent); }
.al-blg-card[hidden] { display: none; }
.al-blg-more { margin-top: 26px; text-align: center; }
.al-blg-empty { background: var(--card); border-radius: 14px; padding: 26px; font-size: 14.5px; opacity: .75; }
/* Blog post detail */
.al-blg-post .hero-img { width: 100%; max-height: 440px; object-fit: cover; border-radius: 16px; margin: 0 0 26px; display: block; }
.al-blg-post h1 { font-family: var(--font-display); font-size: 40px; line-height: 1.15; margin: 0 0 10px; }
.al-blg-post .sub { font-size: 17px; opacity: .75; margin: 0 0 14px; }
.al-blg-post .byline { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; opacity: .65; margin: 0 0 26px; }
.al-blg-post .body { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.al-blg-post .body img { max-width: 100%; height: auto; border-radius: 10px; }
.al-blg-post .body iframe { max-width: 100%; }
.al-blg-post .cats { display: flex; flex-wrap: wrap; gap: 8px; }
/* Post-page layouts: two columns (article + right column) or one column (blocks at the bottom) */
.al-blg-two .al-blg-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.al-blg-two .al-blg-side { position: sticky; top: 100px; }
.al-blg-one .al-blg-side { margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(0,0,0,.1); }
.al-blg-one .al-blg-rec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.al-blg-two .al-blg-rec-list { display: flex; flex-direction: column; gap: 16px; }
.al-blg-side-h { font-family: var(--font-display); font-size: 21px; line-height: 1.2; margin: 0 0 14px; }
.al-blg-side-cats { margin-top: 30px; }
.al-blg-side-all { margin-top: 26px; }
.al-blg-two .al-blg-rec-list .al-blg-card .ph { height: 140px; }
.al-blg-two .al-blg-rec-list .al-blg-card .bd { padding: 14px 16px 16px; }
.al-blg-two .al-blg-rec-list .al-blg-card .ttl { font-size: 17px; }
.al-blg-two .al-blg-rec-list .al-blg-card .tsr { display: none; }
.al-blg-two .al-blg-rec-list .al-blg-card .more { margin-top: 8px; font-size: 13px; }
@media (max-width: 900px) {
    .al-blg-two .al-blg-cols { display: block; }
    .al-blg-two .al-blg-side { position: static; margin-top: 44px; padding-top: 34px; border-top: 1px solid rgba(0,0,0,.1); }
    .al-blg-two .al-blg-rec-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
    .al-blg-two .al-blg-rec-list .al-blg-card .ph { height: 170px; }
    .al-blg-two .al-blg-rec-list .al-blg-card .tsr { display: block; }
}
/* Featured blog carousel */
.al-blg-car { position: relative; }
.al-blg-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.al-blg-track::-webkit-scrollbar { display: none; }
.al-blg-track .al-blg-card { flex: 0 0 min(360px, 85%); scroll-snap-align: start; }
.al-blg-arrow { position: absolute; top: 42%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--accent); color: #FDFBF6; font-size: 18px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.2); z-index: 3; }
.al-blg-arrow[hidden] { display: none; }
.al-blg-arrow.prev { left: -10px; }
.al-blg-arrow.next { right: -10px; }
@media (max-width: 760px) {
    .grid3 { grid-template-columns: 1fr !important; }
    .hero-head { font-size: 34px !important; }
    .bio-flex { flex-direction: column; text-align: center; }
    .al-bc.m-hide { display: none; }
    /* Long trails collapse to Home › … › Current on phones */
    .al-bc.m-trunc .mid { display: none; }
    .al-bc.m-trunc .dots { display: flex; }
    .al-blg-post h1 { font-size: 30px; }
    /* Comfortable default side padding for content on phones */
    .wrap { padding-left: 28px; padding-right: 28px; }
    .section { padding-top: 40px; padding-bottom: 18px; }
    .section h2 { font-size: 28px; }
    /* Wrapped images don't work at phone widths — stack them centered instead */
    .section img.rt-left, .section img.rt-right { float: none; display: block; margin: 14px auto; }
    /* Contact form: fields stack one per line; tighter card padding so inputs get the width */
    .al-cf { padding: 16px 14px; }
    .al-cf-grid { grid-template-columns: 1fr; gap: 12px; }
    .al-cf-sec { margin-top: 22px; }
}
