/* ═══════════════════════════════════════════════════
   Phase 5 v2 - Gate-2 fixes (appended after templates-v2.css)
   ═══════════════════════════════════════════════════ */

/* ── Fix 3: Pull paragraph in Bodoni Moda 400, paper bg, 240/240 ──
   Force the editorial-lead text-editor widget to display caps mass
   in display serif regardless of Elementor inline styles. */
.mcr-pull-section.elementor-section,
.mcr-pull-section { padding: 240px 0 !important; }
.mcr-pull-section .elementor-widget-text-editor.editorial-lead .elementor-widget-container,
.mcr-pull-section .elementor-widget-text-editor.editorial-lead .elementor-widget-container p,
.mcr-pull-section .editorial-lead .elementor-widget-container,
.mcr-pull-section .editorial-lead p {
  font-family: var(--font-display) !important;
  font-weight: 400 !important;
  font-size: clamp(1.75rem, 2.5vw, 2.5rem) !important;
  line-height: 1.4 !important;
  letter-spacing: -0.005em;
  color: var(--mcr-dark-text) !important;
  max-width: 44ch;
  margin: 0 auto;
  text-align: center;
  background-image: none !important;
}

/* ── Fix 4: Regions section - paper bg + section padding ── */
.mcr-regions-section.elementor-section,
.mcr-regions-section {
  background: var(--mcr-paper) !important;
  padding: var(--space-section) 0 !important;
}

/* ── Fix 2: Hero ghost button - transparent, white border, royal hover ──
   Override the global .mcr-btn--ghost only when inside the hero so the
   ghost variant elsewhere (Buy/Sell on light bg) keeps its dark styling. */
.mcr-hero .mcr-btn--ghost .elementor-button {
  background: transparent !important;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 0 !important;
  padding: 18px 36px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: background 200ms ease, color 200ms ease !important;
}
.mcr-hero .mcr-btn--ghost .elementor-button:hover {
  background: #FFFFFF !important;
  color: #1E3A8A !important;
  border-color: #FFFFFF !important;
}

/* ── Fix 1: Hero scrim - flat 25% black overlay ──
   The Elementor section overlay is set to rgba(0,0,0,0.25) in the
   _elementor_data JSON; this is a defensive override in case any
   inline style or theme plugin re-injects a gradient. */
.mcr-hero .elementor-background-overlay {
  background-image: none !important;
  background: rgba(0, 0, 0, 0.25) !important;
  opacity: 1 !important;
}

/* ── Home hero dark-fallback (no hero image/video) - 2026-06-04 ──
   Section 15a8c7e4 is configured as background_background:"video" but with
   an empty url, so Elementor renders its default light gray. Force the
   black brand fill so the transparent white nav stays legible. */
body.home .elementor-element.elementor-element-15a8c7e4 {
  background-color: #0A0A0C !important;
}

/* Home hero H1 - Playfair Display.
   The widget (3914cdd6) lacks the .mcr-hero-headline class, so the
   templates-v2.css hero-headline rule never matches. Scope this directly. */
body.home .elementor-element-3914cdd6 .elementor-heading-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 400 !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 0.95;
}

/* ── Home hero - kill the Elementor background-video stub overlay.
   The section has background_background:"video" but an empty url, so
   Elementor stamps a transparent video container PLUS an overlay layer
   that defaults to its theme color (light gray on this site). Force the
   overlay back to brand black. */
body.home .elementor-element.elementor-element-15a8c7e4 > .elementor-background-overlay {
  background-color: #0A0A0C !important;
  background-image: none !important;
  opacity: 1 !important;
}
body.home .elementor-element.elementor-element-15a8c7e4 > .elementor-background-video-container {
  display: none !important;
}

/* ── Homepage - collapse the wrapper stack above the hero.
   The hero is full-bleed stretched, but the Kadence article + Elementor
   "boxed" outer container were stacking ~180px of padding/margin between
   </header> and the hero <section>. Zero them out only on the home doc. */
body.home #inner-wrap,
body.home #primary,
body.home .content-container,
body.home #main.site-main,
body.home .content-wrap,
body.home article.entry,
body.home .entry-content-wrap,
body.home .entry-content.single-content,
body.home .elementor.elementor-67,
body.home .elementor-element.elementor-element-220a6f0,
body.home .elementor-element.elementor-element-220a6f0 > .e-con-inner {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Article element has a background-color on .content-bg - kill the visible
   "card" treatment on home so the hero section reads edge-to-edge from the
   header bottom. */
body.home article.entry.content-bg {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* The Elementor e-con-boxed container also reserves min-block-size for
   its inner padding - neutralise both to be safe. */
body.home .elementor-element.elementor-element-220a6f0 {
  min-height: 0 !important;
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
}

/* ── Home hero - pin content to top, not center.
   The section keeps its 100vh min-height; we just override the
   vertical-centering flex behavior on its container/column so the
   eyebrow + headline sit near the top with a 120px breathing band. */
body.home .elementor-element.elementor-element-15a8c7e4 > .elementor-container {
  align-items: flex-start !important;
  align-content: flex-start !important;
  padding-top: 120px !important;
}
body.home .elementor-element.elementor-element-15a8c7e4 > .elementor-container > .elementor-column > .elementor-column-wrap,
body.home .elementor-element.elementor-element-15a8c7e4 > .elementor-container > .elementor-column > .elementor-widget-wrap {
  align-content: flex-start !important;
  justify-content: flex-start !important;
}
body.home .elementor-element.elementor-element-15a8c7e4 > .elementor-container > .elementor-column > .elementor-column-wrap > .elementor-widget-wrap {
  align-content: flex-start !important;
  justify-content: flex-start !important;
}


/* ═══════════════════════════════════════════════════
   MCR STATIC EDITORIAL PAGES - 2026-07-02 fixes
   Targets: /buy/, /sell/, /about/, /concierge/, /contact/

   FIX 1: Elementor default accent (--e-global-color-accent #61CE70)
          was bleeding through .mcr-btn--ghost/--light/--primary due
          to Elementor's per-widget CSS loading LATER than templates-v2.css.
          High-specificity + !important overrides ensure brand colors win.
   FIX 2: .mcr-utility-hero and .mcr-section use full_width Elementor layout,
          so the existing .elementor-section-boxed gutter rule didn't fire.
          Explicit padding on their .elementor-containers.
   FIX 3: .mcr-section-headline and .mcr-process-step h3 were falling back
          to the sans-serif body font (Manrope). Force var(--font-display).
   FIX 5: .mcr-process-steps had no width constraint - steps hugged the
          left edge with dead right space. Constrain + 2-column grid.
   ═══════════════════════════════════════════════════ */

/* ── FIX 1 - Brand button colors beat Elementor's default accent ── */
.elementor-widget-button.mcr-btn--primary .elementor-button,
.elementor-widget-button.mcr-btn--primary .elementor-button-link,
.elementor .mcr-btn--primary .elementor-button {
    background-color: var(--mcr-royal) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.elementor-widget-button.mcr-btn--primary .elementor-button:hover,
.elementor-widget-button.mcr-btn--primary .elementor-button:focus,
.elementor .mcr-btn--primary .elementor-button:hover {
    background-color: var(--mcr-royal-hi) !important;
    color: #fff !important;
}
.elementor-widget-button.mcr-btn--ghost .elementor-button,
.elementor-widget-button.mcr-btn--ghost .elementor-button-link,
.elementor .mcr-btn--ghost .elementor-button {
    background-color: transparent !important;
    color: var(--mcr-black) !important;
    border: 1px solid var(--mcr-black) !important;
    border-radius: 0 !important;
}
.elementor-widget-button.mcr-btn--ghost .elementor-button:hover,
.elementor .mcr-btn--ghost .elementor-button:hover {
    background-color: var(--mcr-black) !important;
    color: #fff !important;
}
.elementor-widget-button.mcr-btn--light .elementor-button,
.elementor-widget-button.mcr-btn--light .elementor-button-link,
.elementor .mcr-btn--light .elementor-button {
    background-color: #fff !important;
    color: var(--mcr-black) !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.elementor-widget-button.mcr-btn--light .elementor-button:hover,
.elementor .mcr-btn--light .elementor-button:hover {
    background-color: var(--mcr-platinum) !important;
    color: var(--mcr-black) !important;
}

/* ── FIX 2 - Container gutter for editorial hero + sections ── */
.mcr-utility-hero > .elementor-container,
.mcr-section > .elementor-container {
    max-width: var(--container-max, 1440px);
    margin-inline: auto;
    padding-left: var(--gutter-desktop, 48px);
    padding-right: var(--gutter-desktop, 48px);
    box-sizing: border-box;
}
@media (max-width: 880px) {
    .mcr-utility-hero > .elementor-container,
    .mcr-section > .elementor-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

/* ── FIX 3 - Playfair on section headlines + step titles ── */
.mcr-section-headline.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-display, "Playfair Display", Georgia, serif) !important;
    font-weight: 400 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.05 !important;
    color: var(--mcr-black) !important;
}
.mcr-process-steps .mcr-process-step h3 {
    font-family: var(--font-display, "Playfair Display", Georgia, serif) !important;
    font-weight: 400 !important;
    font-size: 1.625rem !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--mcr-black);
    margin: 0 0 12px;
}

/* ── FIX 5 - 01-05 step layout (constrain + 2-column grid) ── */
.mcr-process-steps {
    max-width: 960px;
    margin-inline: auto;
    padding: 0;
}
.mcr-process-steps .mcr-process-step {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 40px;
    align-items: start;
    padding: 40px 0;
    border-bottom: 1px solid var(--mcr-line-light, #DEDBD2);
}
.mcr-process-steps .mcr-process-step:first-child { padding-top: 0; }
.mcr-process-steps .mcr-process-step:last-child { border-bottom: 0; }
.mcr-process-steps .mcr-process-step__num {
    font-family: var(--font-display, "Playfair Display", serif);
    font-style: italic;
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--mcr-royal, #1E3A8A);
}
.mcr-process-steps .mcr-process-step p {
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--mcr-mid-text, #555);
    max-width: 62ch;
    margin: 0;
}
@media (max-width: 640px) {
    .mcr-process-steps .mcr-process-step {
        grid-template-columns: 64px 1fr;
        gap: 24px;
        padding: 32px 0;
    }
    .mcr-process-steps .mcr-process-step__num { font-size: 1.75rem; }
}

/* ── FIX 4 - Community card elegant "no-media" placeholder ──
   Applied by PHP when hero_image + featured are empty or point at
   the known shared gray placeholder attachment. Text sits on a flat panel:
   #0A0A0C, no gradient. Gradients are banned in the MCR design system; this
   rule carried a 135deg linear-gradient until 2026-08-12. */
.mcr-comm-card.mcr-comm-card--no-media {
    background-image: none !important;
    background-color: #0A0A0C !important;
    color: #fff;
}
.mcr-comm-card.mcr-comm-card--no-media .mcr-comm-card__overlay {
    background: transparent !important;
}
.mcr-comm-card.mcr-comm-card--no-media .mcr-comm-card__county {
    color: var(--mcr-platinum, #C0C4CC) !important;
    letter-spacing: 0.22em;
}
.mcr-comm-card.mcr-comm-card--no-media .mcr-comm-card__name {
    color: #fff !important;
}
.mcr-comm-card.mcr-comm-card--no-media .mcr-comm-card__meta {
    color: rgba(255,255,255,0.7) !important;
}


/* ═══════════════════════════════════════════════════
   MCR STATIC EDITORIAL PAGES - 2026-07-02 fixes v2
   FIX 2 REDO: This Elementor Pro build drops the _css_classes value from
   sections (widgets keep theirs), so `.mcr-utility-hero > .elementor-container`
   never matched. Scope by body page-id instead. Editorial page IDs are
   fixed on staging + prod: buy=12, sell=13, about=15, concierge=14, contact=17.
   ═══════════════════════════════════════════════════ */
body.page-id-12 .elementor-top-section > .elementor-container,
body.page-id-13 .elementor-top-section > .elementor-container,
body.page-id-14 .elementor-top-section > .elementor-container,
body.page-id-15 .elementor-top-section > .elementor-container,
body.page-id-17 .elementor-top-section > .elementor-container {
    max-width: var(--container-max, 1440px) !important;
    margin-inline: auto !important;
    padding-left: var(--gutter-desktop, 48px) !important;
    padding-right: var(--gutter-desktop, 48px) !important;
    box-sizing: border-box;
}
@media (max-width: 880px) {
    body.page-id-12 .elementor-top-section > .elementor-container,
    body.page-id-13 .elementor-top-section > .elementor-container,
    body.page-id-14 .elementor-top-section > .elementor-container,
    body.page-id-15 .elementor-top-section > .elementor-container,
    body.page-id-17 .elementor-top-section > .elementor-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* Hero backgrounds should still bleed full-width; only the CONTENT container
   is constrained. The section's own background-image applies to the whole
   .elementor-top-section, which we leave alone. Search-widget section
   (has [showcaseidx_search] full-width map) also gets the gutter, which is
   what we want - the search form/map read as intentional. */

/* Communities grid inside these editorial pages is its own .mcr-card-grid
   with its own max-width in card grid CSS - no double-container needed. */


/* ═══════════════════════════════════════════════════
   ITEM 1 (2026-07-03) - Showcase IDX green → MCR royal.
   Overrides Showcase's default green (#008C23 ribbon bg, #68C07E for-sale
   text + icons + market chart bars). Loaded child-theme-side so Showcase
   SaaS-side style block stays untouched.
   ═══════════════════════════════════════════════════ */
.sidx-ribbon.sidx-new-listing,
.sidx-ribbon.sidx-new-listing-price,
.sidx-ribbon.sidx-back-on-market {
    background-color: var(--mcr-royal, #1E3A8A) !important;
}
.sidx-sale-type.sidx-for-sale,
.sidx-for-sale {
    color: var(--mcr-royal, #1E3A8A) !important;
}
.sidx-refresh,
.sidx-cloud-upload,
.sidx-fa-refresh,
.sidx-fa-cloud-upload {
    color: var(--mcr-royal, #1E3A8A) !important;
}
.sidx-chart-datum,
.sidx-legend-dot {
    background-color: var(--mcr-royal, #1E3A8A) !important;
}

/* ═══════════════════════════════════════════════════
   ITEM 3 (2026-07-03) - Community hero clamp + gap fix.
   Elementor Pro theme-builder template 43 renders every community with a
   hard 96px H1 in a 806px max-width, so any multi-syllable place name wraps
   3-4 lines (audited: Altamonte Springs = 4 lines, Grant Valkaria = 3 lines).
   Also the section reserves ~690-740px of empty vertical space above the
   headline for a hero image that hasn't landed yet for many communities.
   Clamp headline size + tighten the empty band. Restores automatically once
   ACF hero_image lands (CSS scopes the tightening to :not([style*="background-image"])).
   ═══════════════════════════════════════════════════ */
body.single-community .mcr-dp-hero__h1,
body.single-community h1.elementor-heading-title,
body.single-community h1 {
    font-size: clamp(2.5rem, 4.6vw, 4.5rem) !important;
    line-height: 1.05 !important;
    max-width: 22ch !important;
    letter-spacing: -0.015em !important;
}
/* Tighten the hero section when there is no background image loaded (fallback state).
   Elementor sets background-image on the section's inline style when ACF hero_image
   is populated; the :not() guard means once media lands, full band restores. */

/* ITEM 8 fix 2026-07-03 - target ONLY the community hero shortcode's
   own no-image state, not every top section. Breadcrumb / pull / about /
   IDX / FAQ sections stay self-sized. Flat fill (no gradient) per design system. */
/* 2026-08-12 - no-image hero is typography on a flat black panel. Geometry and type
   are inherited from the has-image state so the two read as one design; the only
   difference is the absence of a background image. The cream placeholder frame and the
   PHOTOGRAPHY PENDING label are gone (removed from the shortcode too). */
/* Minimal by design: inherit the has-image layout entirely and change only the
   background. Overriding display/padding here pushed .mcr-dp-hero__inner outside the
   panel (white text on cream = invisible), so do not reintroduce flex or padding:0. */
/* The shared hero pushes .mcr-dp-hero__inner down with `position:relative; top:495px`,
   an offset tuned for the 100vh image hero. In a shorter text-only panel that throws the
   content out the bottom (it is overflow:hidden, so it simply vanishes). Neutralise the
   offset and centre instead. Do NOT remove `top:0` - that is the whole fix. */
/* NO-IMAGE COMMUNITY HERO.
   Inherits the image-hero layout deliberately, so both states read as one design; the
   only difference is the absent background image. Two things are required:
     - `top:0` cancels the inherited `position:relative; top:495px`, which is tuned for
       the 100vh image hero and throws content out of a shorter band.
     - the band stays TALL (62vh). Shortening it or switching to display:block pushes the
       eyebrow up through the panel edge, where it collides with the breadcrumb bar.
       Tried and reverted 2026-08-12 - do not "tighten" this without re-checking the
       eyebrow at 1440 and 390. */
/* ── 2026-08-13 - SHARED TEXT-ONLY HERO HEIGHT TOKEN ──
   ONE custom property, defined once, consumed by every text-only (no photograph)
   hero on the site: the community black-panel heroes below and the six utility
   page heroes (/about/ /buy/ /sell/ /concierge/ /journal/ /contact/) at the foot
   of this file. Do not add a second token - if a hero needs a different height,
   change this value or the hero is not a text-only hero.

   It is a FLOOR (min-height), not a fixed height. A fixed height would clip the
   longest copy; /about/ carries a two-line headline and a three-line sub and
   legitimately measures taller than the floor. Clipping is the worse failure.

   Measured before this change (desktop 1440x900, fonts settled):
     community text-only 558px; utility 324/295/240/211/211/211. */
:root {
    --mcr-hero-text-h: clamp(260px, 30vh, 320px);
}

body.single-community .mcr-dp-hero--no-image {
    background-color: #0A0A0C;
    background-image: none !important;
    min-height: var(--mcr-hero-text-h);
    padding: 0 !important;
    align-items: center;
}
/* `top: 0` cancels the inherited `position:relative; top:55vh`, and `transform:none`
   cancels the paired `translateY(-50%)`. BOTH are required. The pair is tuned for the
   100vh image hero; left in place inside a ~270px panel the transform lifts the content
   half its own height above the panel top, where `overflow:hidden` eats it. That is the
   "eyebrow pushes up through the panel edge" failure recorded on 2026-08-12 - the cause
   was the leftover transform, not the shorter band. With both neutralised the flex
   centring does the work honestly and the content sits inside the panel at every width. */
body.single-community .mcr-dp-hero--no-image .mcr-dp-hero__inner {
    top: 0 !important;
    transform: none !important;
}
/* placeholder is removed from the shortcode; belt and braces for cached markup */
body.single-community .mcr-dp-hero__noimg-frame,
body.single-community .mcr-dp-hero__noimg-label { display: none !important; }

/* ═══════════════════════════════════════════════════
   Mortgage Calculator page (2026-07-09). Overrides Showcase
   IDX default calc chrome (5px radius on container, cyan-blue
   submit button + button drop-shadow, default gray palette)
   to match the MCR design system. Scope: body.page-template-page-mortgage-calculator-php
   only, so other Showcase widgets keep their existing styling.
   Real class names verified via headless DOM probe (not iframe,
   not shadow DOM, styleable via regular CSS).
   ═══════════════════════════════════════════════════ */

/* Page frame */
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page { background: var(--mcr-paper, #F6F4EF); }
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__intro,
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__calc,
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__foot { padding: 96px 24px; }
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__intro-inner,
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__calc-inner,
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__foot-inner {
  max-width: 720px; margin: 0 auto;
}
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__eyebrow {
  font-family: var(--font-sans, "Inter Tight", sans-serif);
  font-size: 0.6875rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--mcr-muted, #8A8680); margin-bottom: 16px;
}
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__h1 {
  font-family: var(--font-display, "Playfair Display", serif);
  font-weight: 400; font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.08; letter-spacing: -0.015em; color: var(--mcr-black, #0A0A0C);
  margin-bottom: 20px; border-radius: 0;
}
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__lead {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 1.25rem; line-height: 1.5; color: var(--mcr-mid-text, #555);
  max-width: 52ch;
}

/* SIDX calculator container: kill 5px radius, set MCR paper bg + line border */
body.page-template-page-mortgage-calculator-php .sidx-container,
body.page-template-page-mortgage-calculator-php .sidx-widget,
body.page-template-page-mortgage-calculator-php .sidx-widget-wrapper {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.page-template-page-mortgage-calculator-php .mortgage-calculator {
  background: #FFFFFF !important;
  border: 1px solid var(--mcr-line-light, #DEDBD2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 40px 32px !important;
}
body.page-template-page-mortgage-calculator-php .mortgage-calculator h2 {
  font-family: var(--font-display, "Playfair Display", serif) !important;
  font-weight: 400 !important;
  font-size: 1.75rem !important;
  color: var(--mcr-black, #0A0A0C) !important;
  margin-bottom: 24px !important;
  border-radius: 0 !important;
}

/* Form groups + labels: square, Inter Tight uppercase caps label */
body.page-template-page-mortgage-calculator-php .mortgage-calculator__form-group { margin-bottom: 20px !important; }
body.page-template-page-mortgage-calculator-php .mortgage-calculator__form-group label {
  font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--mcr-mid-text, #555) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
body.page-template-page-mortgage-calculator-php .mortgage-calculator__form-group input,
body.page-template-page-mortgage-calculator-php .mortgage-calculator__form-group select {
  font-family: var(--font-num, "Roboto Slab", serif) !important;
  font-size: 1.05rem !important;
  padding: 12px 14px !important;
  border: 1px solid var(--mcr-line-light, #DEDBD2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #FFFFFF !important;
  color: var(--mcr-black, #0A0A0C) !important;
  width: 100% !important;
}
body.page-template-page-mortgage-calculator-php .mortgage-calculator__form-group input:focus,
body.page-template-page-mortgage-calculator-php .mortgage-calculator__form-group select:focus {
  outline: 0 !important;
  border-color: var(--mcr-royal, #1E3A8A) !important;
  box-shadow: 0 0 0 1px var(--mcr-royal, #1E3A8A) !important;
}

/* Submit button (button.sidx-primary): royal, square, no shadow */
body.page-template-page-mortgage-calculator-php .mortgage-calculator button,
body.page-template-page-mortgage-calculator-php button.sidx-primary {
  background: var(--mcr-royal, #1E3A8A) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 14px 32px !important;
  font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-top: 8px !important;
}
body.page-template-page-mortgage-calculator-php .mortgage-calculator button:hover,
body.page-template-page-mortgage-calculator-php button.sidx-primary:hover {
  background: var(--mcr-royal-hi, #2B4FC9) !important;
  box-shadow: none !important;
}

/* Result block (default: paper bg + royal number, per "royal sparingly" rule).
   To A/B against solid royal fill, uncomment the .monthly-payment--royal-fill
   variant swap in the toggle CSS block above the verify screenshot pass. */
body.page-template-page-mortgage-calculator-php .monthly-payment {
  background: var(--mcr-paper-2, #EFEBE3) !important;
  color: var(--mcr-black, #0A0A0C) !important;
  padding: 32px !important;
  margin-top: 32px !important;
  border: 1px solid var(--mcr-line-light, #DEDBD2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.page-template-page-mortgage-calculator-php .monthly-payment__title {
  font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--mcr-mid-text, #555) !important;
  margin-bottom: 12px !important;
}
body.page-template-page-mortgage-calculator-php .monthly-payment__amount {
  font-family: var(--font-num, "Roboto Slab", serif) !important;
  font-size: clamp(2.25rem, 4vw, 3rem) !important;
  font-weight: 500 !important;
  color: var(--mcr-royal, #1E3A8A) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  display: block !important;
}
body.page-template-page-mortgage-calculator-php .mortgage-calculator__disclaimer {
  font-family: var(--font-sans, "Inter Tight", sans-serif) !important;
  font-size: 0.8125rem !important;
  color: var(--mcr-muted, #8A8680) !important;
  margin-top: 24px !important;
  line-height: 1.5 !important;
  padding-top: 16px !important;
}

/* Foot band: paper-2 fill, Concierge CTA */
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__foot {
  background: var(--mcr-paper-2, #EFEBE3);
  text-align: center;
}
body.page-template-page-mortgage-calculator-php .mcr-mortgage-page__disclaimer {
  font-family: var(--font-sans, "Inter Tight", sans-serif);
  font-size: 0.9rem; color: var(--mcr-mid-text, #555);
  max-width: 52ch; margin: 0 auto 24px; line-height: 1.55;
}

/* ===================================================================
   MCR REGION TIER - /communities/ parent region filter
   Added 2026-07-27. Markup: region-tier.php  Behavior: communities-region-tier.js
   This block never existed in any prior revision (confirmed against all 9
   templates-v2-fixes.css backups) - the tier shipped 2026-07-07 unstyled.
   Design: zero radius, no gradient, no default shadow, royal used only as
   the active underline (an approved sparing use).
   =================================================================== */
.mcr-region-tier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  margin: 0 auto 32px;
  padding: 0;
  border-bottom: 1px solid var(--mcr-line-light);
  max-width: var(--container-tight);
}

.mcr-region-tier__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 16px 30px 18px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mcr-muted-text);
  text-decoration: none;
  background: none;
  background-image: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms ease;
}

.mcr-region-tier__tab:hover { color: var(--mcr-dark-text); }

/* Hairline tick-mark active indicator - sits on the row rule, never a dot. */
.mcr-region-tier__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--mcr-royal);
  transform: scaleX(0);
  transition: transform 200ms ease;
}

.mcr-region-tier__tab--active,
.mcr-region-tier__tab[aria-selected="true"] { color: var(--mcr-dark-text); }

.mcr-region-tier__tab--active::after,
.mcr-region-tier__tab[aria-selected="true"]::after { transform: scaleX(1); }

.mcr-region-tier__tab:focus-visible {
  outline: 2px solid var(--mcr-royal);
  outline-offset: -2px;
}

/* Elementor shortcode wrapper can force inherited link colors - reassert. */
.elementor-widget-shortcode .mcr-region-tier__tab { color: var(--mcr-muted-text); }
.elementor-widget-shortcode .mcr-region-tier__tab--active,
.elementor-widget-shortcode .mcr-region-tier__tab:hover { color: var(--mcr-dark-text); }

@media (max-width: 780px) {
  .mcr-region-tier { margin-bottom: 24px; }
  .mcr-region-tier__tab {
    padding: 14px 18px 16px;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
  }
}

@media (max-width: 420px) {
  .mcr-region-tier__tab { padding: 12px 12px 14px; letter-spacing: 0.12em; }
}

/* Region meta line - sits under the tier, swapped by communities-region-tier.js.
   Deliberately separate from the hero lede so editorial copy is never overwritten. */
.mcr-region-header__sub {
  margin: 0 auto 40px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mcr-muted-text);
  max-width: none;
}

@media (max-width: 780px) {
  .mcr-region-header__sub { margin-bottom: 28px; letter-spacing: 0.16em; }
}

/* ===================================================================
   PHASE 1c (2026-07-27) - Journal CTA contrast.
   The shared .mcr-hero-headline rule (templates-v2.css:51) paints the
   heading #fff because it was authored for the homepage hero over a
   photograph. The Journal subscribe CTA sits on --mcr-paper, so the
   "By request." H2 rendered white-on-paper at a 1.1:1 contrast ratio.
   Scoped to the Journal page so the homepage hero and any dark CTA
   band are untouched. Uses the existing ink token, no new values.
   =================================================================== */
body.page-id-16 .mcr-hero-headline.elementor-widget-heading .elementor-heading-title {
  color: var(--mcr-dark-text);
}

/* ===================================================================
   ITEM G STATE 2 (2026-08-02) - /properties/ hero styles.
   These previously lived in an inline <style> inside the mu-plugin's
   bare-properties branch. That branch now stands down so Showcase can
   adopt page 11 and inject its connected app, so the styles have to
   live here or the hero loses its typography and inherits brand.css's
   160px section padding (which is what created the large gap above
   the app).
   =================================================================== */
.mcr-ploc-bc { padding: 24px 0 8px; background: #fff; font-family: 'Inter Tight', system-ui, sans-serif; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: #555; }
.mcr-ploc-bc a { color: #555; text-decoration: none; }
.mcr-ploc-bc a:hover { color: var(--mcr-royal); }
.mcr-ploc-bc .mcr-ploc-sep { margin: 0 8px; }

.mcr-ploc-inner { max-width: var(--container-tight); margin: 0 auto; padding: 0 24px; }

/* Explicit padding beats the generic `section {}` rule in brand.css. */
.mcr-ploc-hero { background: #fff; padding: 48px 0 40px; }

.mcr-ploc-eyebrow { font-family: 'Inter Tight', system-ui, sans-serif; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--mcr-mid-text); margin: 0 0 16px; }
.mcr-ploc-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.1; color: #111; margin: 0 0 24px; letter-spacing: -0.01em; }
.mcr-ploc-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.12; color: #111; margin: 0 0 18px; }
.mcr-ploc-lede { font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif; font-size: 1.18rem; line-height: 1.55; color: #111; margin: 0 0 8px; max-width: 62ch; }

/* Match the app container to the hero and close the gap under it. */
.page-id-11 .sidx-container { max-width: var(--container-tight); margin: 0 auto; padding: 0 24px; }
.page-id-11 .entry-content > .sidx-container:first-of-type { margin-top: 0; }
.page-id-11 .entry-content, .page-id-11 .content-area { padding-top: 0; }

@media (max-width: 880px) {
  .mcr-ploc-hero { padding: 32px 0 24px; }
  .mcr-ploc-inner, .page-id-11 .sidx-container { padding: 0 20px; }
}

/* Kadence prints its own page-title banner (SECTION.entry-hero.page-hero-section,
   ~520px) on page 11. It was never visible before because the mu-plugin rendered
   custom markup and exited. Now that Showcase adopts the page through the normal
   template, that banner duplicates our own hero. Suppress it on this page only. */
.page-id-11 .entry-hero.page-hero-section { display: none; }

/* ── Community card image layer (2026-08-12) ──
   The card image moved from a CSS background to a real <img> so it can be lazy-loaded
   and carry a srcset. `object-fit: cover` + `object-position: center` reproduce the old
   `background-size: cover; background-position: center` exactly, so cropping is
   unchanged. The <img> is absolutely positioned and fills the card, which keeps the
   card's fixed 540px height as the only thing driving layout - no CLS from image load.
   Overlay and body sit above it on the z-index. */
/* Kadence ships a global `img { height: auto }`, which beat `height: 100%` here and
   collapsed the image to its intrinsic ratio (357x335 inside a 357x540 card, leaving a
   205px band of bare card colour under every photo). Specificity + !important, not a
   tidier selector, because the parent rule is in the parent theme bundle. */
.mcr-comm-card .mcr-comm-card__img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
    z-index: 0;
    border: 0;
}
.mcr-comm-card__overlay { z-index: 1; }

/* ═══════════════════════════════════════════════════
   HOME HERO VIDEO - 2026-08-12
   Replaces the black-fallback treatment below, which existed only because the section
   was configured as background_background:"video" with an empty URL. There is now a real
   video, so the workaround comes off and the DESIGNED 42% overlay (already in the
   Elementor settings as rgba(10,10,12,0.42)) is restored.
   ═══════════════════════════════════════════════════ */

/* The section's background image (mcr-fl-hero-sunset.jpg) was being downloaded and then
   hidden completely by the opaque overlay - a wasted LCP-blocking fetch. The video layer
   covers the section, so suppress it. A background-image that computes to none is never
   fetched. */
body.home .elementor-element.elementor-element-15a8c7e4 {
    background-image: none !important;
}
body.home .elementor-element.elementor-element-15a8c7e4 > .elementor-background-overlay {
    /* 0.50, not the designed 0.42. Measured: the 11px eyebrow sits high in frame over sky
       and white towers. At 0.42 white-on-background is ~5.6:1 against realistic highlights
       but only 3.79:1 against the brightest specular pixels - under the 4.5:1 WCAG AA floor
       for small text. 0.50 lifts the worst case to 4.88:1 and the typical case to 6.9:1,
       at a barely perceptible cost to the footage. The 86px headline passes either way. */
    background-color: rgba(10, 10, 12, 0.55) !important;
    background-image: none !important;
    opacity: 1 !important;
    z-index: 1;
}

/* The video layer is an HTML widget inside the column, but it has to fill the SECTION.
   Elementor sets container / column / widget-wrap to position:relative, which would
   anchor inset:0 to the 1140x385 column instead of the 1440x540 section. Make that chain
   static here, then re-establish stacking on the widgets so the eyebrow, headline and
   CTA stay above the overlay. */
body.home .elementor-element.elementor-element-15a8c7e4 > .elementor-container,
body.home .elementor-element.elementor-element-15a8c7e4 .elementor-column,
body.home .elementor-element.elementor-element-15a8c7e4 .elementor-widget-wrap {
    position: static !important;
}
body.home .elementor-element.elementor-element-15a8c7e4 .elementor-widget {
    position: relative;
    z-index: 2;
}

.mcr-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background-color: #0A0A0C;
    background-image: url(https://marketconnectrealty.com/wp-content/uploads/2026/08/mcr-hero-poster.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Kadence ships global `img { height: auto }`, which silently collapsed the community
   card images. Assume the same class of rule can exist for video and force the box. */
.mcr-hero-media__video {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    display: block;
    border: 0;
}

/* MOBILE: still image only, never the video. The rungs are selected by media query
   rather than srcset because this is a CSS background - the browser fetches only the
   winning declaration, so a phone never touches the desktop poster. */
@media (max-width: 767px) {
    .mcr-hero-media__video { display: none !important; }
    .mcr-hero-media { background-image: url(https://marketconnectrealty.com/wp-content/uploads/2026/08/mcr-hero-mobile-780.webp); }
}
@media (max-width: 767px) and (min-width: 420px) and (min-resolution: 2dppx) {
    .mcr-hero-media { background-image: url(https://marketconnectrealty.com/wp-content/uploads/2026/08/mcr-hero-mobile-1000.webp); }
}
@media (max-width: 767px) and (min-resolution: 3dppx) {
    .mcr-hero-media { background-image: url(https://marketconnectrealty.com/wp-content/uploads/2026/08/mcr-hero-mobile-1170.webp); }
}

/* REDUCED MOTION: poster only. The inline script removes the element outright so no
   video bytes are fetched; this rule is the no-JS fallback for the same intent. */
@media (prefers-reduced-motion: reduce) {
    .mcr-hero-media__video { display: none !important; }
}

/* FIX 2026-08-12: the rule above put position:relative on EVERY widget in the hero,
   including the HTML widget that holds the video. That made the widget - a zero-height
   box, since its only child is absolutely positioned - the containing block, so the
   video layer measured 1420x0 instead of 1440x540. It was invisible, and only the
   box assertion caught it; the page looked plausible because the poster still painted
   as the section background.
   The video widget must stay static so inset:0 resolves to the section. */
body.home .elementor-element.elementor-element-15a8c7e4 .elementor-widget.elementor-widget-html,
body.home .elementor-element.elementor-element-15a8c7e4 .elementor-widget-html > .elementor-widget-container {
    position: static !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* ── DO NOT RE-ADD poster="" TO THE HERO VIDEO ──
   The <video> in section 15a8c7e4 deliberately has NO poster attribute. The browser's
   preload scanner fetches a poster before any inline script can remove the element, so
   every phone was pulling the 241KB desktop poster on top of its own 151KB still - for
   an element it never displays. The poster is painted by `.mcr-hero-media`'s
   background-image below instead, which IS media-query aware, so desktop and
   prefers-reduced-motion look identical and mobile fetches only its own rung.
   Adding poster="" back silently reintroduces a 241KB mobile download. */

/* ── HOME HERO TYPOGRAPHY, MOBILE ONLY (2026-08-12) ──
   Two faults, both only visible under 768px:
   1. The hero widgets carry a fixed 188px horizontal inset at EVERY breakpoint - tuned
      for desktop. That leaves the text 202px at a 390px viewport and 132px at 320px, so
      the eyebrow wrapped to 2-3 lines and "BROWSE PROPERTIES" broke into 5 lines inside
      a 42px-wide button.
   2. line-height equals font-size on both (11px/11px and 12px/12px) with 4px and 2.64px
      letter-spacing. Wrapped lines therefore sit exactly one glyph-height apart and
      visually collide.
   Desktop is untouched - everything here is inside the mobile media query. */
@media (max-width: 767px) {
    body.home .elementor-element.elementor-element-15a8c7e4 .elementor-widget-wrap {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    body.home .elementor-element.elementor-element-15a8c7e4 .elementor-widget {
        width: 100% !important;
    }
    /* Eyebrow: give wrapped lines room, and tighten the tracking enough that the phrase
       fits one line on a 390px screen. */
    body.home .elementor-element-377d2866 .elementor-heading-title {
        line-height: 1.5 !important;
        letter-spacing: 0.18em !important;
    }
    /* CTA: the label must never break mid-phrase inside the button. */
    body.home .elementor-element-42f7bada a {
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }
    body.home .elementor-element-42f7bada .elementor-button-text {
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }
    /* H1 was clipping ascenders at line-height 0.95. */
    body.home .elementor-element-3914cdd6 .elementor-heading-title {
        line-height: 1.08 !important;
    }
}
@media (max-width: 360px) {
    body.home .elementor-element-377d2866 .elementor-heading-title {
        letter-spacing: 0.12em !important;
        font-size: 10px !important;
    }
}

/* The actual squeeze: each hero widget carries its own desktop padding - the eyebrow has
   padding-left:120px / padding-right:48px - and Elementor applies it at every breakpoint.
   That inset alone left 222px of text width at a 390px viewport. Zero the horizontal
   widget padding under 768px and let the 24px on .elementor-widget-wrap above do the
   gutter, which gives the text 342px instead of 174px. Vertical padding is preserved. */
@media (max-width: 767px) {
    body.home .elementor-element.elementor-element-15a8c7e4 .elementor-widget {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ── COMMUNITY CARD LEGIBILITY (2026-08-12) ──
   Measured off the rendered cards with the text hidden, so the numbers include the
   overlay. Excerpt is 15.2px, so WCAG AA wants 4.5:1. At the previous 36% overlay with
   rgba(255,255,255,0.85) text, three of the five photo cards failed:
       Altamonte Springs 5.67   Azalea Park 4.75
       Apopka 3.56*   Baldwin Park 3.04*   Dr. Phillips 2.55*
   Clearing all five by darkening alone needed a 0.56 overlay, which flattens the
   photography badly. Taking the excerpt to full white does part of the work, so the
   combination that clears every card with the least damage to the image is
   overlay 0.53 + opaque text. 0.50 was tried first and left Dr. Phillips at 4.23 - the
   brightest card - so the value is solved from the measured luma, not predicted.

   The 71 black-panel cards are NOT affected: .mcr-comm-card--no-media sets its overlay
   to transparent, so this rule never paints on them. Verified, not assumed. */
.mcr-comm-card__overlay {
    background: rgba(10, 10, 12, 0.53) !important;
}
/* Hover still lightens, just not to the point of losing the excerpt. */
.mcr-comm-card:hover .mcr-comm-card__overlay {
    background: rgba(10, 10, 12, 0.30) !important;
}
.mcr-comm-card__meta {
    color: #fff !important;
}

/* ── ANCHOR LANDING vs THE FIXED HEADER ──
   The header is position:fixed and 58px tall, and scroll-padding-top was unset, so any
   anchor jump or programmatic scroll lands the target at y=0 - underneath the header.
   scroll-padding-top fixes every anchor on the site in one place rather than needing a
   scroll-margin on each target. 58px header + 20px breathing room. */
html {
    scroll-padding-top: 78px;
}
/* Belt and braces for the two things most likely to be scrolled to directly. */
.mcr-comm-card,
.mcr-comm-card__name,
[id^="region-"],
[id^="county-"] {
    scroll-margin-top: 78px;
}

/* ── UTILITY PAGE HEROES -> BLACK PANEL (2026-08-13) ──
   /about/ /buy/ /sell/ /concierge/ /journal/ /contact/ all shared attachment 57
   (mcr-utility-hero.jpg - a Caribbean thatched-hut resort shot) on a Central Florida
   brokerage. The image came from a dynamic ACF tag on the section background
   ({slug}_hero_image), so emptying that field removed it; no Elementor document was
   edited. With the tag empty the section had NO background at all - transparent, with a
   42% black overlay floating over the white page - so it needs the flat fill here.

   Targeted by Elementor element id, NOT by .mcr-utility-hero: this Pro build drops the
   section's _css_classes value, so that class is never emitted in the markup. A first
   pass used it and silently matched nothing.

   /communities/ is deliberately absent from this list - it keeps its image. */
body .elementor-element.elementor-element-89fd791,   /* about     */
body .elementor-element.elementor-element-cac2c41,   /* buy       */
body .elementor-element.elementor-element-b8b0efd,   /* sell      */
body .elementor-element.elementor-element-45576c7,   /* concierge */
body .elementor-element.elementor-element-d178d90,   /* journal   */
body .elementor-element.elementor-element-b4743d1 {  /* contact   */
    background-image: none !important;
    background-color: #0A0A0C !important;
}
body .elementor-element.elementor-element-89fd791 > .elementor-background-overlay,
body .elementor-element.elementor-element-cac2c41 > .elementor-background-overlay,
body .elementor-element.elementor-element-b8b0efd > .elementor-background-overlay,
body .elementor-element.elementor-element-45576c7 > .elementor-background-overlay,
body .elementor-element.elementor-element-d178d90 > .elementor-background-overlay,
body .elementor-element.elementor-element-b4743d1 > .elementor-background-overlay {
    background-color: transparent !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* /journal/ set its hero H1 to rgb(26,26,26) where the other five use white. Over the
   old photo it was merely poor; on a black panel it is invisible. Forcing white on all
   six rather than patching journal alone, so a per-page colour override cannot
   reintroduce this. The other five already compute to #fff, so this is a no-op there. */
body .elementor-element-89fd791 .mcr-hero-headline,
body .elementor-element-cac2c41 .mcr-hero-headline,
body .elementor-element-b8b0efd .mcr-hero-headline,
body .elementor-element-45576c7 .mcr-hero-headline,
body .elementor-element-d178d90 .mcr-hero-headline,
body .elementor-element-b4743d1 .mcr-hero-headline,
body .elementor-element-89fd791 .mcr-hero-headline .elementor-heading-title,
body .elementor-element-cac2c41 .mcr-hero-headline .elementor-heading-title,
body .elementor-element-b8b0efd .mcr-hero-headline .elementor-heading-title,
body .elementor-element-45576c7 .mcr-hero-headline .elementor-heading-title,
body .elementor-element-d178d90 .mcr-hero-headline .elementor-heading-title,
body .elementor-element-b4743d1 .mcr-hero-headline .elementor-heading-title {
    color: #fff !important;
}

/* ── UTILITY PAGE HEROES - SHARED TEXT-ONLY HEIGHT (2026-08-13) ──
   Same six Elementor section ids as the black-panel rule above; same token as the
   community text-only hero. There is exactly ONE token (--mcr-hero-text-h, defined
   once at :root earlier in this file) and both families read it.

   What actually caused the 324/295/240/211/211/211 spread, measured not assumed:
   nothing on these sections carried per-page padding - all six compute
   padding 0px/0px and identical widget margins (eyebrow 0/20, headline 0/20,
   sub 0/44). The sections had NO height floor at all, so each one was sized purely
   by how many lines its own copy happened to wrap to. The leftover spacing that is
   removed here is the trailing 44px bottom margin under the last widget: dead space
   below the copy that also pulls the optical centre up once the panel is centred.

   Centring: the first pass used `align-content: center` on .elementor-widget-wrap and
   MEASURED as a no-op - the copy sat flush at y=0 with all the slack below it. The
   assumption behind it was wrong: .elementor-container is a plain block child of the
   section, so a min-height on the section does not stretch it, and there was no free
   space inside the wrap to distribute. Making the section itself the flex container is
   what actually centres it, and it matches how the community black-panel hero
   (align-items:center on the section) already behaves. No Elementor document is edited. */
body .elementor-element.elementor-element-89fd791,   /* about     */
body .elementor-element.elementor-element-cac2c41,   /* buy       */
body .elementor-element.elementor-element-b8b0efd,   /* sell      */
body .elementor-element.elementor-element-45576c7,   /* concierge */
body .elementor-element.elementor-element-d178d90,   /* journal   */
body .elementor-element.elementor-element-b4743d1 {  /* contact   */
    min-height: var(--mcr-hero-text-h);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
}
body .elementor-element-89fd791 > .elementor-container,
body .elementor-element-cac2c41 > .elementor-container,
body .elementor-element-b8b0efd > .elementor-container,
body .elementor-element-45576c7 > .elementor-container,
body .elementor-element-d178d90 > .elementor-container,
body .elementor-element-b4743d1 > .elementor-container {
    width: 100%;
}
body .elementor-element-89fd791 .elementor-widget-wrap > .elementor-element:last-child,
body .elementor-element-cac2c41 .elementor-widget-wrap > .elementor-element:last-child,
body .elementor-element-b8b0efd .elementor-widget-wrap > .elementor-element:last-child,
body .elementor-element-45576c7 .elementor-widget-wrap > .elementor-element:last-child,
body .elementor-element-d178d90 .elementor-widget-wrap > .elementor-element:last-child,
body .elementor-element-b4743d1 .elementor-widget-wrap > .elementor-element:last-child {
    margin-bottom: 0 !important;
}
/* MCR-04 TILES BEGIN - homepage Explore tiles (post 72, section 4466662b)
   The four tile images are NATIVE ELEMENTOR IMAGE WIDGETS inside each column.
   Column-background images are deliberately NOT used: background_image refs on
   these columns silently fail on this build (3 of the 4 had url:"" and painted
   nothing). Do not "simplify" this back to a column background.

   Stacking, in the column's own stacking context:
     z 0  .mcr-tile-img   absolutely positioned <img>, object-fit cover
     z 1  ::after         bottom scrim, guarantees the white label has contrast
     z 2  .mcr-tile-label the heading link

   .elementor-widget-wrap is forced STATIC on purpose. Elementor sets it
   position:relative, which would make it - not the column - the containing block
   for the absolute image and collapse the image box. Same class of bug that
   collapsed the hero video to 1420x0. */
.mcr-tile-col {
	position: relative;
	overflow: hidden;
}
.mcr-tile-col > .elementor-widget-wrap,
.mcr-tile-col > .elementor-widget-wrap.elementor-element-populated {
	position: static;
	/* Elementor 4.1.4 no longer emits a min-height rule for the column control
	   `min_height` (580px) that is still present in _elementor_data - post-72.css
	   regenerates without it and the tile collapses to label height (~69px).
	   Held in CSS so the tile height does not depend on that control. */
	min-height: 580px;
}
@media (max-width: 767px) {
	.mcr-tile-col > .elementor-widget-wrap,
	.mcr-tile-col > .elementor-widget-wrap.elementor-element-populated {
		min-height: 320px;
	}
}
.mcr-tile-col .mcr-tile-img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
	z-index: 0;
}
.mcr-tile-col .mcr-tile-img .elementor-widget-container,
.mcr-tile-col .mcr-tile-img figure,
.mcr-tile-col .mcr-tile-img .elementor-image {
	width: 100%;
	height: 100%;
	margin: 0;
}
.mcr-tile-col .mcr-tile-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
	border-radius: 0;
}
.mcr-tile-col::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(6, 8, 10, 0.88) 0%, rgba(6, 8, 10, 0.62) 40%, rgba(6, 8, 10, 0) 100%);
}
.mcr-tile-col .mcr-tile-label {
	position: relative;
	z-index: 2;
}
/* The label is an <a> inside .elementor-heading-title. The Elementor heading
   title_color (#FFFFFF) is emitted onto .elementor-heading-title only, and the
   Kadence global link colour (#1a1a1a) still won on the anchor - measured at
   rgb(26,26,26) on all four tiles. !important is deliberate here. */
.mcr-tile-col .mcr-tile-label .elementor-heading-title,
.mcr-tile-col .mcr-tile-label .elementor-heading-title a,
.mcr-tile-col .mcr-tile-label .elementor-heading-title a:link,
.mcr-tile-col .mcr-tile-label .elementor-heading-title a:visited,
.mcr-tile-col .mcr-tile-label .elementor-heading-title a:hover {
	color: #FFFFFF !important;
	text-decoration: none;
}
/* MCR-04 TILES END */

/* ── MCR-05 · SHOWCASE SEARCH BAR VERTICAL RHYTHM (2026-08-14) ─────────────
   Symptom: on /buy/ the Showcase search bar sat FLUSH against the hero and
   collided with the "HOW WE WORK" eyebrow below it.

   Measured cause (1440x900, live staging, headless Chromium - not guessed):
     hero    cac2c41   58 -> 328
     search  e7ffeec  328 -> 365   (section box, h 37)
     sidx form box    325 -> 368   (h 43)  <- 3px OUTSIDE its section, top AND bottom
     next    4bbfb5d  365 -> 1251
   So the real gaps were -3px and -3px: overlap, not tightness.

   The 3px comes from Showcase's own gutter compensation, `.sidx-basic{margin:-3px}`
   (computed margin read off the live node; the same node on /properties/ computes
   `7px -3px`, which is why /properties/ never showed the defect). The Elementor
   section carried padding 0/0, so that negative margin escaped the section box on
   both edges and ate into the neighbours.

   Fix is SPACING ONLY. Nothing here touches font-size, the [showcaseidx_search]
   shortcode, the Showcase form type, or any Showcase internal - the -3px bleed is
   left exactly as Showcase authors it and is simply given padding to bleed into.

   Why the padding is written as `48px + bleed` rather than `51px`: the bleed is
   Showcase's, not ours. Naming it keeps the DESIGN number (48/72 desktop, 32/48
   mobile) readable and makes the measured gap land on it exactly.

   SELECTOR NOTE - read before "tidying" this:
   The section carries `_css_classes: "mcr-section mcr-buy-search-section"` in
   _elementor_data, and that value NEVER REACHES THE MARKUP on this Elementor Pro
   build (verified: rendered class list is elementor-* only). This is the same trap
   recorded in commit 1403c52. So the rule is keyed structurally instead:

     1. `:has(.sidx-searchform.sidx-widget)` - applies to ANY top-level Elementor
        section that hosts a Showcase search-form WIDGET, so a second page adopting
        this pattern is covered on day one without editing this file.
        `.sidx-widget` is required: the /properties/ IDX app also renders a
        `.sidx-searchform`, but it is not a widget and is not inside an Elementor
        section, so it must not and does not match.
     2. an explicit element-id rule for e7ffeec, as the no-`:has()` fallback.
   Both are listed; they are idempotent with each other.                        */

:root {
	/* Showcase `.sidx-basic` gutter compensation, measured on the live node. */
	--mcr-sidx-bleed: 3px;
	--mcr-sidx-gap-top: 48px;
	--mcr-sidx-gap-bottom: 72px;
}
@media (max-width: 767px) {
	:root {
		--mcr-sidx-gap-top: 32px;
		--mcr-sidx-gap-bottom: 48px;
	}
}

/* ── MCR-15 AMENDMENT (2026-08-16) · SPLIT THE SELECTOR LIST ───────────────
   These two selectors used to be ONE comma-separated list. CSS Syntax 3 says an
   unparseable complex selector invalidates the ENTIRE selector list - only :is()
   and :where() are forgiving. So in any engine that does not implement :has()
   (Firefox < 121, Firefox ESR 115, Safari < 15.4) the element-id selector, which the
   note above calls "the no-:has() fallback", was NOT a fallback: it was discarded
   together with the :has() selector. The section then computed padding 0/0, the
   Showcase -3px bleed re-opened on both edges, and the bar overlapped the hero above
   AND the "HOW WE WORK" eyebrow below - the exact reported symptom.

   Measured, on live /buy/, by deleting this one rule from the CSSOM (which is what a
   non-:has() engine does at parse time): padding 51px/75px -> 0/0, gap hero->bar
   48px -> -3px, gap bar->next 72px -> -3px, bounding-box intersections 0 -> 62.

   Splitting the list changes nothing in a :has()-capable engine and makes the id rule
   an actual fallback everywhere else. Spacing only. No font-size, no eyebrow change,
   no Showcase internals touched, /properties/ unaffected (its form is not a
   .sidx-widget and is not inside an Elementor section).                            */

/* 1. Structural rule. Covers any FUTURE page that hosts a Showcase search WIDGET
      without editing this file. Must stand alone: an engine with no :has() support
      drops this whole rule, and that must not take rule 2 with it. */
body .elementor-section.elementor-top-section:has(.sidx-searchform.sidx-widget) {
	padding-top: calc(var(--mcr-sidx-gap-top) + var(--mcr-sidx-bleed));
	padding-bottom: calc(var(--mcr-sidx-gap-bottom) + var(--mcr-sidx-bleed));
}

/* 2. Explicit element-id rule for /buy/ section e7ffeec. Contains no modern syntax,
      so it parses in every engine. THIS is the real fallback. */
body .elementor-element.elementor-element-e7ffeec {
	padding-top: calc(var(--mcr-sidx-gap-top) + var(--mcr-sidx-bleed));
	padding-bottom: calc(var(--mcr-sidx-gap-bottom) + var(--mcr-sidx-bleed));
}
/* MCR-05 SEARCH BAR END (amended by MCR-15) */

/* ── AGENT AVATAR, NO-PHOTO STATE (2026-08-16) ──
   Replaces a stock portrait that was serving one woman's face to seven licensed agents.
   Initials, not an image. The circular avatar is the one sanctioned border-radius
   exception in the design system; everything else here stays flat - no gradient, no
   shadow at rest. */
.mcr-avatar--initials {
    background-color: #0A0A0C;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mcr-avatar--initials .mcr-avatar__initials {
    font-family: 'Inter Tight', system-ui, sans-serif;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
}


/* ── P0 2026-08-18 · CONTACT SEND BUTTON ──────────────────────────────────
   Rendered #61CE70, Elementor's stock accent green, which is not in the MCR
   palette. Uses the same royal token as .mcr-btn--primary (templates-v2.css).
   !important is required: Elementor emits per-post CSS at
   `.elementor-17 .elementor-element.elementor-element-b385206 .elementor-button`
   (0,4,0) which outspecifies any sane class selector here. Scoped to
   .mcr-contact-form so no other Elementor button is touched. */
.mcr-contact-form .elementor-button,
.mcr-contact-form button.elementor-button {
	background-color: var(--mcr-royal) !important;
	color: #fff !important;
	border-radius: 0;
}
.mcr-contact-form .elementor-button:hover,
.mcr-contact-form button.elementor-button:hover {
	background-color: var(--mcr-royal-hi) !important;
	color: #fff !important;
}