/* ============================================================================
   MCR marketing shell — layout (Ocean Editorial)
   Ports the inline styles of _design-reference/mocks/MCR Marketing Page.dc.html
   into a real stylesheet, keyed off .mcr-mkt + [data-dark]. Light is the default;
   the dark "Midnight Miami" variant swaps a handful of design tokens. Mobile
   overrides + the sticky CTA bar live in 04-mobile.css.
   ========================================================================== */

.mcr-mkt{
  --acc:#0a7286; --title:#13243b; --sub:#4a5568; --muted:#6b6557;
  --hero-bg:linear-gradient(180deg,#fbf8f2,#f3efe8); --hero-border:1px solid #e7e2d8;
  --glow:radial-gradient(circle,#7fe3f0,transparent 66%); --glow-op:.5; --glow-size:440px; --glow-blur:24px; --glow-top:-140px; --glow-right:-100px;
  --cta-bg:#0a7286; --cta-fg:#fff; --cta-sh:0 8px 22px rgba(10,138,160,.28);
  --ghost-fg:#13243b; --ghost-bd:#c9c2b4;
  --rail-card-bg:#fffefb; --rail-card-bd:#e7e2d8; --rail-card-sh:0 10px 30px rgba(19,36,59,.07);
  --rail-acc:#0a7286; --rail-title:#13243b; --rail-sub:#5f6b7a; --rail-fine:#9aa0aa;
  --rail-in-bg:#f6f2ea; --rail-in-bd:#d8d2c6; --rail-btn-bg:#06b6d4; --rail-btn-fg:#04222b;
  --mbar-btn-bg:#0a7286; --mbar-btn-fg:#fff;
  display:block; font-family:'Plus Jakarta Sans',system-ui,sans-serif; color:var(--title);
}
.mcr-mkt[data-dark="1"]{
  --acc:#e8cf92; --title:#fff; --sub:rgba(255,255,255,.86); --muted:rgba(255,255,255,.6);
  --hero-bg:linear-gradient(135deg,#0b1530 0%,#15233f 55%,#3a1f44 100%); --hero-border:0;
  --glow:radial-gradient(circle,#d9b65a,transparent 68%); --glow-op:.32; --glow-size:420px; --glow-blur:20px; --glow-top:-120px; --glow-right:-80px;
  --cta-bg:#d9b65a; --cta-fg:#1a1206; --cta-sh:none;
  --ghost-fg:#fff; --ghost-bd:rgba(255,255,255,.3);
  --rail-card-bg:linear-gradient(160deg,#13233f,#0b1530); --rail-card-bd:rgba(255,255,255,.14); --rail-card-sh:0 18px 44px rgba(0,0,0,.3);
  --rail-acc:#e8cf92; --rail-title:#fff; --rail-sub:rgba(255,255,255,.78); --rail-fine:rgba(255,255,255,.5);
  --rail-in-bg:rgba(255,255,255,.06); --rail-in-bd:rgba(255,255,255,.18); --rail-btn-bg:#d9b65a; --rail-btn-fg:#1a1206;
  --mbar-btn-bg:#d9b65a; --mbar-btn-fg:#1a1206;
}
.mcr-mkt *{box-sizing:border-box}

/* ── HERO ── */
.mcr-mkt-hero{position:relative;overflow:hidden;background:var(--hero-bg);border-bottom:var(--hero-border);padding:clamp(38px,7vw,84px) clamp(16px,4vw,40px)}
.mcr-mkt-hero__glow{position:absolute;top:var(--glow-top);right:var(--glow-right);width:var(--glow-size);height:var(--glow-size);border-radius:50%;background:var(--glow);filter:blur(var(--glow-blur));opacity:var(--glow-op);pointer-events:none}
.mcr-mkt-hero__inner{position:relative;z-index:2;max-width:1360px;margin:0 auto;width:100%}
/* live rotating hero backdrop — recent (<12h) listings behind the dark "blue area", under a scrim */
.mcr-mkt-hero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#13243b}
.mcr-mkt-hero__slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.4s ease;will-change:opacity}
.mcr-mkt-hero__slide.is-on{opacity:1;animation:mcrKen 10s ease-out both}
@keyframes mcrKen{from{transform:scale(1.015)}to{transform:scale(1.09)}}
.mcr-mkt-hero__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(11,21,48,.94) 0%,rgba(21,35,63,.87) 52%,rgba(58,31,68,.9) 100%)}
/* Bright hero: keep a soft gradient behind the left-aligned type for legibility, let the slideshow read bright on the right */
.mcr-mkt-hero__scrim.is-light{background:linear-gradient(105deg,rgba(7,15,30,.8) 0%,rgba(7,15,30,.42) 40%,rgba(7,15,30,.08) 72%,rgba(7,15,30,0) 100%)}
.mcr-mkt-hero--media .mcr-mkt-hero__glow{z-index:1;mix-blend-mode:screen}
.mcr-mkt-hero__attr{position:absolute;right:clamp(14px,4vw,40px);bottom:14px;z-index:2;margin:0;max-width:62%;font:600 11px/1.35 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.02em;color:rgba(255,255,255,.74);text-align:right;text-shadow:0 1px 8px rgba(3,18,32,.65);text-decoration:none;pointer-events:auto;transition:color .15s ease}
.mcr-mkt-hero__attr:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.mcr-mkt-hero__slide.is-on{animation:none}}
.mcr-mkt-crumbs{margin:0 0 20px}
.mcr-mkt-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;font-size:12px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.mcr-mkt-crumbs li{display:flex;gap:8px;align-items:center;color:var(--muted)}
.mcr-mkt-crumbs a{text-decoration:none;color:var(--muted)}
.mcr-mkt-crumbs li span{opacity:.4;color:var(--muted)}
.mcr-mkt-crumbs li.is-current{color:var(--acc);font-weight:700}
.mcr-mkt-eyebrow{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 16px;color:var(--acc);font-weight:700;display:inline-flex;align-items:center;gap:9px}
.mcr-mkt-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--acc)}
.mcr-mkt-h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(32px,5.6vw,56px);line-height:1.04;letter-spacing:-.025em;margin:0 0 18px;max-width:18ch;text-wrap:balance;color:var(--title)}
.mcr-mkt-herosub{font-size:clamp(16px,2.1vw,20px);line-height:1.5;max-width:50ch;margin:0 0 28px;color:var(--sub)}
.mcr-mkt-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mcr-mkt-btn{display:inline-flex;align-items:center;height:50px;border-radius:13px;text-decoration:none;font-weight:800;font-size:15.5px}
.mcr-mkt-btn--primary{padding:0 26px;background:var(--cta-bg);color:var(--cta-fg);box-shadow:var(--cta-sh)}
.mcr-mkt-btn--ghost{padding:0 22px;background:transparent;color:var(--ghost-fg);border:1px solid var(--ghost-bd);font-weight:700;font-size:15px}
.mcr-mkt-btcnote{display:inline-flex;align-items:center;gap:9px;margin:22px 0 0;font-size:13px;font-family:'JetBrains Mono',monospace;color:var(--sub)}
.mcr-mkt-btcnote__b{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:#f7931a;color:#fff;font-weight:700;font-size:11px}

/* ── BODY GRID ── */
.mcr-mkt-body{max-width:1360px;margin:0 auto;padding:clamp(34px,5vw,68px) clamp(16px,4vw,40px) clamp(90px,8vw,72px);display:grid;gap:clamp(26px,4vw,52px);align-items:start;grid-template-columns:minmax(0,1fr) 384px}
.mcr-mkt-main{min-width:0}
.mcr-mkt-sect{margin-top:clamp(34px,5vw,54px)}
.mcr-mkt-sect:first-child{margin-top:0}
.mcr-mkt-h2{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(23px,3.4vw,33px);line-height:1.12;letter-spacing:-.02em;margin:0 0 13px;color:#13243b}
.mcr-mkt-h2--sm{font-size:clamp(19px,2.6vw,25px);margin-bottom:15px}
.mcr-mkt-lead{font-size:16.5px;line-height:1.6;color:#4a5568;margin:0 0 24px;max-width:62ch}

/* covers */
.mcr-mkt-covers{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr))}
.mcr-mkt-cover{display:flex;gap:12px;align-items:flex-start;padding:15px;background:#fffefb;border:1px solid #e7e2d8;border-radius:13px}
.mcr-mkt-cover__i{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:#e9f6f8;color:#0a7286;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;font-family:'JetBrains Mono',monospace}
.mcr-mkt-cover__t{margin:0;font-weight:700;font-size:14.5px;color:#13243b}
.mcr-mkt-cover__d{margin:3px 0 0;font-size:13px;color:#5f6b7a;line-height:1.45}

/* steps */
.mcr-mkt-steps{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,208px),1fr))}
.mcr-mkt-step{padding:22px 20px 18px;background:#fffefb;border:1px solid #e7e2d8;border-radius:15px}
.mcr-mkt-step__n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;color:#0a7286;margin:0 0 11px}
.mcr-mkt-step__t{font-family:'Fraunces',serif;font-weight:600;font-size:18px;margin:0 0 6px;color:#13243b}
.mcr-mkt-step__d{margin:0;font-size:13.5px;line-height:1.5;color:#5f6b7a}

/* area chips */
.mcr-mkt-chips{display:flex;flex-wrap:wrap;gap:10px}
.mcr-mkt-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fffefb;border:1px solid #d8d2c6;text-decoration:none;color:#13243b;font-size:14px;font-weight:600;transition:border-color .15s,color .15s}
.mcr-mkt-chip:hover{border-color:#0a7286;color:#0a7286}
.mcr-mkt-chip__m{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#6b6557}

/* listings rail */
.mcr-mkt-railhead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:0 0 16px;flex-wrap:wrap}
.mcr-mkt-browseall{font-size:14px;font-weight:700;color:#0a7286;text-decoration:none;white-space:nowrap}
.mcr-mkt-listings{display:flex;gap:14px;overflow-x:auto;margin:0 -4px;padding:4px 4px 8px;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
.mcr-mkt-listings::-webkit-scrollbar{height:0;width:0;display:none}
.mcr-mkt-lcard{flex:0 0 auto;width:255px;scroll-snap-align:start;background:#fffefb;border:1px solid #e7e2d8;border-radius:15px;overflow:hidden;text-decoration:none;color:#13243b}
.mcr-mkt-lcard__img{display:block;height:150px;background:#e9eef0 center/cover no-repeat}
.mcr-mkt-lcard__b{padding:13px 15px 15px}
.mcr-mkt-lcard__hood{margin:0 0 4px;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#0a7286;font-weight:700}
.mcr-mkt-lcard__price{margin:0;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:19px;color:#13243b}
.mcr-mkt-lcard__specs{margin:7px 0 0;font-size:12.5px;color:#5f6b7a}

/* FAQ accordion (native <details> — DOM-present, schema-safe) */
.mcr-mkt-faq{border:1px solid #e7e2d8;border-radius:15px;overflow:hidden;background:#fffefb}
.mcr-mkt-faq__i{border-bottom:1px solid #eee8dd}
.mcr-mkt-faq__i:last-child{border-bottom:0}
.mcr-mkt-faq__i>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 20px;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:15.5px;color:#13243b}
.mcr-mkt-faq__i>summary::-webkit-details-marker{display:none}
.mcr-mkt-faq__sign{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:#eef1f0;color:#0a7286;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1}
.mcr-mkt-faq__i[open] .mcr-mkt-faq__sign{transform:rotate(45deg)}
.mcr-mkt-faq__i>p{margin:0;padding:0 20px 18px;font-size:14.5px;line-height:1.6;color:#4a5568}

/* related */
.mcr-mkt-related{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.mcr-mkt-relcard{position:relative;display:block;padding:17px 17px 36px;background:#fffefb;border:1px solid #e7e2d8;border-radius:13px;text-decoration:none;color:#13243b;transition:border-color .15s}
.mcr-mkt-relcard:hover{border-color:#0a7286}
.mcr-mkt-relcard h3{font-family:'Fraunces',serif;font-weight:600;font-size:17px;margin:0 0 4px}
.mcr-mkt-relcard p{margin:0;font-size:13px;color:#5f6b7a;line-height:1.45}
.mcr-mkt-relcard__arrow{position:absolute;right:15px;bottom:12px;color:#0a7286;font-size:16px}

/* compliance */
.mcr-mkt-compliance{margin-top:clamp(34px,5vw,54px);padding-top:22px;border-top:1px solid #e0dacd}
.mcr-mkt-compliance p{margin:0;font-size:12.5px;line-height:1.65;color:#6b6557}
.mcr-mkt-compliance strong{color:#6b6557}

/* sticky lead rail */
.mcr-mkt-rail-wrap{position:sticky;top:78px}
.mcr-mkt-rail{background:var(--rail-card-bg);border:1px solid var(--rail-card-bd);border-radius:18px;padding:22px 22px 20px;box-shadow:var(--rail-card-sh)}
.mcr-mkt-rail__eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rail-acc);font-weight:700;margin:0 0 8px}
.mcr-mkt-rail__title{font-family:'Fraunces',serif;font-weight:600;font-size:21px;line-height:1.15;margin:0 0 7px;color:var(--rail-title)}
.mcr-mkt-rail__sub{margin:0 0 16px;font-size:13.5px;line-height:1.5;color:var(--rail-sub)}
.mcr-mkt-rail__form{display:flex;flex-direction:column;gap:9px}
.mcr-mkt-rail__form input,.mcr-mkt-rail__form select,.mcr-mkt-rail__form textarea{width:100%;height:44px;padding:0 14px;border:1px solid var(--rail-in-bd);border-radius:11px;font-size:14.5px;font-family:inherit;background:var(--rail-in-bg);color:var(--rail-title)}
.mcr-mkt-rail__form textarea{height:auto;min-height:88px;padding:11px 14px;resize:vertical}
.mcr-mkt-rail__btn,.mcr-mkt-rail__form button[type="submit"],.mcr-mkt-rail__form .button{width:100%;height:48px;margin-top:2px;border:0;border-radius:12px;background:var(--rail-btn-bg);color:var(--rail-btn-fg);font-family:inherit;font-weight:800;font-size:15px;cursor:pointer}
.mcr-mkt-rail__fine{margin:12px 0 0;font-size:11.5px;line-height:1.5;color:var(--rail-fine)}

/* A lead-form shortcode ([mcr_buyer_lead_form] etc.) injected into the rail carries its own
   light-page CSS (light card, dark labels, cyan submit). Inside the DARK rail that renders
   illegibly / off-brand, so re-skin it to the rail's dark tokens by design (not by accident). */
.mcr-mkt-rail__form .mcr-buyer-form{background:transparent;border:0;border-left:0;padding:0;margin:0;max-width:none;border-radius:0}
.mcr-mkt-rail__form .mcr-buyer-form__row{gap:9px;margin:0 0 9px}
.mcr-mkt--dark .mcr-mkt-rail__form .mcr-buyer-form__form label{color:var(--rail-title);font-weight:700;margin-bottom:8px}
.mcr-mkt--dark .mcr-mkt-rail__form .mcr-buyer-form__form label span{color:var(--rail-sub)!important}
.mcr-mkt--dark .mcr-mkt-rail__form .mcr-buyer-form__form input,
.mcr-mkt--dark .mcr-mkt-rail__form .mcr-buyer-form__form select,
.mcr-mkt--dark .mcr-mkt-rail__form .mcr-buyer-form__form textarea{background:var(--rail-in-bg);border:1px solid var(--rail-in-bd);color:var(--rail-title)}
.mcr-mkt--dark .mcr-mkt-rail__form .mcr-buyer-form__form select option{color:#13243b}
.mcr-mkt-rail__form .mcr-buyer-form__submit{width:100%;background:var(--rail-btn-bg);color:var(--rail-btn-fg);margin-top:4px}
.mcr-mkt--dark .mcr-mkt-rail__form .mcr-buyer-form__result{color:var(--rail-sub)}
/* keep the honeypot hidden even though the rail input rule sets width:100% */
.mcr-mkt-rail__form .mcr-buyer-form__honeypot{display:none!important}

/* reveal */
@keyframes mcrReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mcr-mkt [data-reveal]{animation:mcrReveal .6s both}

/* mobile CTA bar is hidden on desktop (shown in 04-mobile.css) */
.mcr-mkt-mobilebar{display:none}

/* Houzez's Elementor "advanced search" header widget bleeds onto listing DETAIL pages
   (building / event / pro singles) — it belongs on the property search page, not a detail
   page. Hide it on every hp_listing single; the real /properties/ search keeps its bar
   (that page is not .single-hp_listing). Matches the pro single's existing suppression. */
.single-hp_listing .advanced-search-v1,
.single-hp_listing .advanced-search-nav,
.single-hp_listing .houzez-search-form-js { display: none !important; }

/* Page-level horizontal-overflow guard — contains stray wide children (Leaflet zoom-proxy,
   horizontal card rails) so the page never scrolls sideways on desktop. Sits below the sticky
   header (which is outside .mcr-page-main), so it doesn't break position:sticky. */
.mcr-page-main{overflow-x:clip}