/* =====================================================================
   Cedar & Stone — decorative utilities (design/design-notes.md §6)
   The ONLY custom CSS in this build. Every rule is decorative or
   behavioural, class-based, and references the Global Kit (no literal
   brand colours, no content, no whole-section layout).
   Kit variables used: --e-global-color-<id>, --e-global-typography-<id>-*.
   Section-specific rules (header swap, chips, dark form, timeline) are
   finalised/verified when their section or template is built.
   ===================================================================== */

/* Motion tokens (mirror global-kit-tokens §8) --------------------------- */
:root {
  --cs-ease: cubic-bezier(.22, .61, .36, 1);
  --cs-dur-hover: 160ms;
  --cs-dur-ui: 320ms;
  --cs-shadow-2: 0 18px 40px rgba(14, 26, 38, .12), 0 4px 10px rgba(14, 26, 38, .08);
}

/* 0. Container + gutter (global-kit-tokens §5; reference
   `.container{max-width:1280px;padding-inline:var(--gutter)}`) ---------- */
/* The Kit's Container padding is 0 (Elementor applies it to every nested container
   and card internal). The gutter is applied once, to each document's top-level
   container box: a top-level boxed section, or the boxed child of a full-width
   section (hero, trust strip, header, footer). Loop cards and popups are excluded. */
:root { --cs-gutter: 20px; --cs-container: 1280px; }
@media (min-width: 768px)  { :root { --cs-gutter: 32px; } }
@media (min-width: 1280px) { :root { --cs-gutter: 48px; } }
.elementor:not([data-elementor-type="loop-item"]):not([data-elementor-type="popup"]) > .e-con.e-con-boxed > .e-con-inner,
.elementor:not([data-elementor-type="loop-item"]):not([data-elementor-type="popup"]) > .e-con.e-con-full > .e-con.e-con-boxed > .e-con-inner {
  padding-inline: var(--cs-gutter);
  box-sizing: border-box;
}
/* widgets placed directly in a full-width section sit on the same container line */
.elementor:not([data-elementor-type="loop-item"]):not([data-elementor-type="popup"]) > .e-con.e-con-full:not(.cs-action-bar) > .elementor-widget {
  width: 100%; max-width: var(--cs-container); margin-inline: auto;
  padding-inline: var(--cs-gutter); box-sizing: border-box;
}

/* 1. Brass hairline eyebrow -------------------------------------------- */
/* 24×2px line + 12px gap before the eyebrow text; inherits the heading's
   colour (Brass 700 on light / Brass 500 on dark, set per widget). */
.cs-eyebrow .elementor-heading-title {
  display: inline-flex;
  align-items: center;
}
.cs-eyebrow .elementor-heading-title::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 2px;
  margin-right: 12px;
  background: currentColor;
}

/* 2. Card lift + image zoom -------------------------------------------- */
/* Applied to loop item roots, service tiles, post cards. */
.cs-card {
  transition: transform var(--cs-dur-ui) var(--cs-ease),
              box-shadow var(--cs-dur-ui) var(--cs-ease);
  will-change: transform;
}
.cs-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cs-shadow-2);
}
.cs-card img {
  transition: transform var(--cs-dur-ui) var(--cs-ease);
}
.cs-card:hover img {
  transform: scale(1.04);
}

/* 3. Arrow link (reference .link-arrow: plain brass text link, 600 14px, 16px icon 7px away) — the Kit's
   global button background/padding must not apply (it rendered as an ink pill); colour = widget global */
.cs-link-arrow .elementor-button, .cs-link-arrow .elementor-button:hover, .cs-link-arrow .elementor-button:focus {
  background: transparent !important; padding: 0 !important; min-height: 0; border: 0; border-radius: 0; box-shadow: none;
}
.cs-link-arrow .elementor-button-content-wrapper { gap: 7px; }
.cs-link-arrow .elementor-button-icon svg { width: 16px; height: 16px; }
.cs-link-arrow .elementor-button-icon {
  transition: transform var(--cs-dur-hover) var(--cs-ease);
}
.cs-link-arrow:hover .elementor-button-icon,
a.cs-link-arrow:hover .elementor-button-icon {
  transform: translateX(4px);
}

/* 4. Decorative pull-quote mark ---------------------------------------- */
/* Applied to the testimonial / about pull-quote card container. */
.cs-quote-mark {
  position: relative;
}
.cs-quote-mark::before {
  content: "\201C"; /* “ — decorative only; the real quote is a native widget */
  position: absolute;
  top: -.25em;
  left: 0;
  font-family: var(--e-global-typography-primary-font-family, "Fraunces"), Georgia, serif;
  font-size: 72px;
  line-height: 1;
  color: var(--e-global-color-secondary);
  pointer-events: none;
}

/* 5. Header transparent → solid swap ----------------------------------- */
/* Transparent over the Home hero (white text + white logo). On scroll,
   Elementor's sticky "effects" state swaps to a solid white, shrunk bar with
   ink text + ink logo. Content stays in native widgets; this only styles state. */
.cs-header {
  width: 100%;
  transition: background-color var(--cs-dur-ui) var(--cs-ease),
              box-shadow var(--cs-dur-ui) var(--cs-ease),
              min-height var(--cs-dur-ui) var(--cs-ease);
}
/* default = the transparent (Home) header: white nav + white logo over the hero */
.cs-header:not(.cs-header-solid) .cs-logo-ink { display: none; }
.cs-header:not(.cs-header-solid) .cs-nav .elementor-item { color: rgba(255, 255, 255, .88); }
.cs-header:not(.cs-header-solid) .cs-nav .elementor-item:hover,
.cs-header:not(.cs-header-solid) .cs-nav .elementor-item.elementor-item-active { color: #fff; }

/* keep the primary nav on one row */
.cs-nav ul.elementor-nav-menu { flex-wrap: nowrap; }
/* current section (cedar-stone-core nav-active.php → elementor-item-active) = reference .nav-link[aria-current]:
   a 2px brass rule under the word only; hover changes colour only (no underline) */
.cs-nav .elementor-nav-menu--main .elementor-item::after {
  left: 0 !important; right: 0 !important; width: auto !important; bottom: -2px !important; height: 2px !important;
  background-color: var(--e-global-color-secondary, #b08a4e) !important; border-radius: 2px;
}
.cs-nav .elementor-nav-menu--main .elementor-item:not(.elementor-item-active)::after { opacity: 0 !important; }
/* brand + action group size to their content (both were 100%-wide flex items that
   shrank to equal halves: logo wrapped above the wordmark, burger sat mid-bar) */
.cs-header .cs-brand { width: auto !important; flex: 0 0 auto; flex-wrap: nowrap !important; }
.cs-header .e-con-inner > .e-con:last-child { width: auto !important; flex: 0 0 auto; justify-content: flex-end; }

/* the solid header (all pages except Home): white bar + ink content from the start */
.cs-header-solid {
  background: var(--e-global-color-cs_white, #fff);
  box-shadow: 0 4px 16px rgba(14, 26, 38, .06), 0 1px 2px rgba(14, 26, 38, .06);
}
.cs-header-solid .cs-logo-white { display: none; }
.cs-header-solid .cs-nav .elementor-item { color: var(--e-global-color-cs_ink700, #24384e); }
.cs-header-solid .cs-nav .elementor-item:hover,
.cs-header-solid .cs-nav .elementor-item.elementor-item-active { color: var(--e-global-color-primary); }

/* sticky / scrolled: solid white bar, ink content */
.cs-header.elementor-sticky--effects {
  background: var(--e-global-color-cs_white, #fff);
  box-shadow: 0 4px 16px rgba(14, 26, 38, .06), 0 1px 2px rgba(14, 26, 38, .06);
  min-height: 68px !important;
}
.cs-header.elementor-sticky--effects .cs-logo-white { display: none; }
.cs-header.elementor-sticky--effects .cs-logo-ink  { display: inline-block; }
.cs-header.elementor-sticky--effects .cs-brand-name .elementor-heading-title,
.cs-header.elementor-sticky--effects .cs-phone .elementor-heading-title,
.cs-header.elementor-sticky--effects .cs-phone .elementor-heading-title a {
  color: var(--e-global-color-primary) !important;
}
.cs-header.elementor-sticky--effects .cs-nav .elementor-item { color: var(--e-global-color-cs_ink700, #24384e); }
.cs-header.elementor-sticky--effects .cs-nav .elementor-item:hover,
.cs-header.elementor-sticky--effects .cs-nav .elementor-item.elementor-item-active { color: var(--e-global-color-primary); }
.cs-header.elementor-sticky--effects .cs-burger { color: var(--e-global-color-primary); }
.cs-header.elementor-sticky--effects .cs-burger svg { color: var(--e-global-color-primary); stroke: currentColor; }
/* NOTE: .cs-saved is intentionally NOT darkened on the sticky header — the saved-homes heart sits on an
   always-ink pill, so it stays white (via .cs-saved-homes-btn above). Only the burger (on the white bar) darkens. */
/* keep the wordmark on one line (don't let the header grow tall on mobile) */
@media (max-width: 1023px) { .cs-brand-name .elementor-heading-title { white-space: nowrap; } }
/* desktop at its narrowest (1024–~1100): like the reference header, the wordmark and the phone number may wrap
   instead of pushing "Book a consultation" off-screen; the nav, heart and button never shrink */
@media (min-width: 1024px) {
  .cs-header .cs-brand, .cs-header .e-con-inner > .e-con:last-child { flex-shrink: 1; min-width: 0; }
  .cs-header .cs-saved, .cs-header .cs-book { flex-shrink: 0; }
  .cs-header .cs-book .elementor-button { white-space: nowrap; }
}

/* Mobile-menu popup — big Fraunces nav with hairline dividers */
.cs-mobile-nav .elementor-nav-menu,
.cs-mobile-nav .elementor-nav-menu li { width: 100%; }
.cs-mobile-nav .elementor-item {
  font-family: var(--e-global-typography-cs_mobile_menu-font-family, "Fraunces"), serif;
  font-size: var(--e-global-typography-cs_mobile_menu-font-size, 32px);
  font-weight: var(--e-global-typography-cs_mobile_menu-font-weight, 400);
  letter-spacing: var(--e-global-typography-cs_mobile_menu-letter-spacing, -.01em);
  color: var(--e-global-color-cs_white, #fff);
  padding: 12px 0;
  padding-left: 0 !important; padding-right: 0 !important; /* Elementor's widget CSS sets 20px */
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
/* the current item carries aria-current but looks like the rest (the reference mobile menu has no current style) */
.cs-mobile-nav .elementor-item.elementor-item-active { color: var(--e-global-color-cs_white, #fff); }
.cs-mobile-menu .cs-contact .elementor-heading-title,
.cs-mobile-menu .cs-contact .elementor-heading-title a { color: var(--e-global-color-cs_ink300, #9aa6b2); }
.cs-mobile-menu .cs-contact .elementor-heading-title a:hover { color: #fff; }

/* Property card (Loop item) -------------------------------------------- */
.cs-prop-card {
  background: var(--e-global-color-cs_white, #fff);
  border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc);
  border-radius: 16px; overflow: hidden; height: 100%;
}
.cs-card-imgwrap { position: relative; }
.cs-card-img img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.cs-badge { position: absolute; top: 12px; left: 12px; z-index: 2; width: auto !important; }
.cs-oh-badge { position: absolute; top: 12px; right: 44px; z-index: 2; width: auto !important; }
.cs-oh-badge:has(.elementor-heading-title:empty) { display: none !important; }
.cs-card-save { position: absolute; top: 10px; right: 12px; z-index: 3; /* above the card's stretched link */ filter: drop-shadow(0 1px 2px rgba(14,26,38,.3)); }
/* card save button is a bare white heart (reference card heart); fills when saved */
.cs-card-save .cs-save-btn { background: none; border: 0; padding: 4px; min-height: 0; line-height: 0; color: var(--e-global-color-cs_white, #fff); cursor: pointer; display: inline-flex; }
.cs-card-save .cs-save-btn span { display: none; }
.cs-card-save .cs-save-btn svg { width: 20px; height: 20px; }
.cs-card-save .cs-save-btn[aria-pressed="true"] svg { fill: currentColor !important; }
.cs-card-agentimg img { width: 26px; height: 26px; border-radius: 999px; object-fit: cover; }
.cs-meta-row > .e-con { flex: 0 0 auto !important; width: auto !important; }
/* card text rows: block, so each row is its own line-height (as inline spans they sat in the
   inherited 26.4px body line box — price 28.9 / location 26.4 instead of 26.4 / 21) */
.cs-prop-card .elementor-heading-title { display: block; }
/* body fills the card; the hairline + meta + agent sit at the bottom (reference .prop-card__meta margin-top:auto) */
.cs-prop-card > .e-con:not(.cs-card-imgwrap) { flex: 1 1 auto; }
.cs-prop-card .elementor-widget-divider { margin-top: auto; }
/* whole card clickable: the title's link is stretched over the card (reference .prop-card__link);
   heart + compare sit above it, badges let clicks through */
.cs-prop-card { position: relative; }
.cs-prop-card > .e-con:not(.cs-card-imgwrap), .cs-prop-card .cs-card-title { position: static; }
.cs-prop-card .cs-card-title a { color: inherit; text-decoration: none; }
.cs-prop-card .cs-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cs-prop-card .cs-card-title a:focus-visible { outline: none; }
.cs-prop-card:focus-within { box-shadow: 0 0 0 3px var(--e-global-color-secondary, #b08a4e); }
.cs-prop-card .cs-badge, .cs-prop-card .cs-oh-badge { pointer-events: none; }
/* no open house → Elementor drops the heading but keeps the badge container (a 20×8 empty pill) */
.cs-oh-badge:not(:has(.elementor-widget)) { display: none !important; }
.cs-card-compare { position: absolute !important; right: 12px; bottom: 12px; z-index: 3; width: auto !important; }
/* Sold card: diagonal SOLD ribbon (the label is a native Heading; only the band is CSS) */
.cs-sold-ribbon {
  position: absolute; top: 18px; left: -38px; width: 150px;
  transform: rotate(-45deg); padding: 5px 0; z-index: 2;
  box-shadow: 0 2px 6px rgba(14, 26, 38, .2);
}
.cs-sold-ribbon .elementor-heading-title { letter-spacing: .14em; }
.cs-sold-note .elementor-heading-title { font-style: italic; }
.cs-sold-priceline { flex-wrap: nowrap !important; }
.cs-sold-priceline > * { flex: 0 0 auto; }
.cs-sold-priceline .elementor-heading-title { white-space: nowrap; }
.cs-sold-note .elementor-heading-title:not(:empty)::before { content: "\201C"; }
.cs-sold-note .elementor-heading-title:not(:empty)::after { content: "\201D"; }
/* the card image is the only one that should zoom on hover (not the agent photo) */
.cs-card:hover .cs-card-agentimg img { transform: none; }

/* Agent card ----------------------------------------------------------- */
.cs-arch img { border-radius: 999px 999px 16px 16px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; display: block; }
.cs-agent-card .cs-icon-btn .elementor-icon {
  width: 40px; height: 40px; border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc);
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.cs-agent-card .cs-icon-btn .elementor-icon:hover {
  border-color: var(--e-global-color-primary); background: var(--e-global-color-cs_stone100, #f4f3ef);
}

/* Agent mini (compact row) --------------------------------------------- */
.cs-mini-photo img { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; display: block; }
.cs-agent-mini .cs-mini-links { margin-left: auto; }
.cs-agent-mini .cs-icon-btn .elementor-icon {
  width: 32px; height: 32px; border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc);
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.cs-agent-mini .cs-icon-btn .elementor-icon:hover {
  border-color: var(--e-global-color-primary); background: var(--e-global-color-cs_stone100, #f4f3ef);
}

/* Post cards ----------------------------------------------------------- */
.cs-postcard-img img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; }
.cs-post-card .cs-postcard-img img { border-radius: 16px 16px 0 0; }
.cs-post-cat .elementor-heading-title { text-transform: uppercase; letter-spacing: .1em; }
.cs-post-meta > .elementor-widget:not(:first-child) .elementor-heading-title::before { content: "· "; color: var(--e-global-color-cs_ink300, #9aa6b2); }
/* featured (horizontal, reference .featured-post): the image column is 16:10 and sets the card height (it
   stretches if the body runs taller); the image fills the column absolutely; body centred beside it */
.cs-prop-card.cs-feat-post > .e-con.cs-feat-imgcol { position: relative; align-self: stretch; aspect-ratio: 16 / 10; }
.cs-feat-post .cs-feat-imgcol > .cs-feat-img { position: absolute; inset: 0; }
.cs-feat-post .cs-feat-img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
/* Journal (JO2): 48px under the featured post (grid row gap 24 + 24), as the reference .featured-post margin */
.cs-journal-grid .e-loop-item:has(.cs-feat-post) { margin-bottom: 24px; }
/* "Read article" sits above the card's stretched title link (same destination, keeps its own hover) */
.cs-feat-more { position: relative; z-index: 2; }

/* Home valuation teaser: arch image + form card ----------------------- */
.cs-val-imgcol { flex: 0.85 1 0 !important; min-width: 280px; }
.cs-val-right { flex: 1.15 1 0 !important; min-width: 320px; }
.cs-val-img img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: 100%; display: block; }
@media (max-width: 767px) { .cs-val-imgcol, .cs-val-right { flex-basis: 100% !important; } }

/* Home services: 4 icon-box tiles ------------------------------------- */
.cs-services-grid > .e-con-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; width: 100%; align-items: stretch;
}
.cs-service-tile { height: 100%; }
.cs-icon-tile { width: 48px; height: 48px; flex: 0 0 auto; }
@media (max-width: 1023px) { .cs-services-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .cs-services-grid > .e-con-inner { grid-template-columns: 1fr; } }

/* Home recently closed: 2 sold cards + ink stat tile ------------------ */
.cs-sold-grid > .e-con-inner {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; width: 100%;
}
.cs-sold-loop { grid-column: span 2; }
.cs-sold-grid .cs-sold-stat { grid-column: span 1; }
.cs-sold-stat { height: 100%; }
.cs-stat-note { margin-top: 4px; opacity: .85; }
@media (max-width: 1023px) {
  .cs-sold-grid > .e-con-inner { grid-template-columns: 1fr 1fr; }
  .cs-sold-loop { grid-column: span 2; }
  .cs-sold-grid .cs-sold-stat { grid-column: span 2; }
}
@media (max-width: 767px) {
  .cs-sold-grid > .e-con-inner { grid-template-columns: 1fr; }
  .cs-sold-loop, .cs-sold-grid .cs-sold-stat { grid-column: auto; }
}

/* Home testimonials: 3-col grid → swipe carousel on small screens ------ */
@media (max-width: 860px) {
  .cs-testi-loop .elementor-loop-container {
    display: grid; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 85%;
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--cs-gutter, 20px) * -1); padding-inline: var(--cs-gutter, 20px);
    scrollbar-width: none;
  }
  .cs-testi-loop .elementor-loop-container::-webkit-scrollbar { display: none; }
  .cs-testi-loop .elementor-loop-container > * { scroll-snap-align: start; }
}

/* Button variants (global-kit-tokens §9) — reusable site-wide ---------- */
.cs-btn-lg .elementor-button { padding: 17px 28px; min-height: 56px; border-radius: 10px; }
.cs-btn-accent .elementor-button:hover,
.cs-btn-accent .elementor-button:focus {
  background-color: var(--e-global-color-accent); color: var(--e-global-color-cs_white);
}
.cs-btn-ghost .elementor-button {
  background-color: transparent; border: 1px solid rgba(255, 255, 255, .35); color: var(--e-global-color-cs_white);
}
.cs-btn-ghost .elementor-button:hover,
.cs-btn-ghost .elementor-button:focus { background-color: rgba(255, 255, 255, .08); }
.cs-btn-ghost .elementor-button svg { fill: currentColor; }
.cs-btn-outline .elementor-button {
  background-color: var(--e-global-color-cs_white); color: var(--e-global-color-primary);
  border: 1px solid var(--e-global-color-primary);
}
.cs-btn-outline .elementor-button:hover,
.cs-btn-outline .elementor-button:focus { background-color: var(--e-global-color-cs_stone100); }

/* Split hero (inner pages): content + arch image (4:5) ---------------- */
.cs-split-hero > .e-con-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; width: 100%;
}
.cs-split-hero-img img { border-radius: 999px 999px 16px 16px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; display: block; }
.cs-prooflist .elementor-icon-list-icon svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .cs-split-hero > .e-con-inner { grid-template-columns: 1fr; gap: 32px; }
  .cs-split-hero-img { max-width: 420px; }
}

/* Home final CTA: ink band, content + arch image ---------------------- */
.cs-finalcta > .e-con-inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; width: 100%;
}
.cs-finalcta-img img {
  border-radius: 999px 999px 16px 16px; aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block;
}
@media (max-width: 900px) {
  .cs-finalcta > .e-con-inner { grid-template-columns: 1fr; }
  .cs-finalcta-img { display: none; }
}

/* Sell valuation wizard (SE2) ----------------------------------------- */
.cs-valhead, .cs-wizard-card { max-width: 620px; width: 100%; margin-inline: auto; }
.cs-valhead { text-align: center; }
.cs-valhead .cs-val-lead { text-align: center; }
.cs-wizard-form .elementor-field-group > label.elementor-field-label { font-weight: 600; margin-bottom: 6px; }
/* radio chip-groups → pills */
.cs-wizard-form .elementor-field-type-radio .elementor-field-subgroup { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-wizard-form .elementor-field-type-radio .elementor-field-option { position: relative; margin: 0; flex: 0 0 auto; width: auto; display: inline-flex; }
.cs-wizard-form .elementor-field-type-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-wizard-form .elementor-field-type-radio label {
  display: inline-block; border: 1px solid var(--e-global-color-cs_stone300, #d6d0c2); border-radius: 999px;
  padding: 8px 16px; cursor: pointer; line-height: 1.1; color: var(--e-global-color-primary); transition: all .18s ease; white-space: nowrap;
}
.cs-wizard-form .elementor-field-type-radio input:checked + label {
  background-color: var(--e-global-color-primary); color: var(--e-global-color-cs_white); border-color: var(--e-global-color-primary);
}
.cs-wizard-form .elementor-field-type-radio input:focus-visible + label { outline: 2px solid var(--e-global-color-secondary); outline-offset: 2px; }
.cs-wizard-card .elementor-button[type="submit"] { margin-top: 4px; }

/* Sell selling-process timeline (SE3) --------------------------------- */
.cs-timeline > .e-con-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; width: 100%; align-items: start; }
.cs-tl-num { width: 44px !important; height: 44px !important; min-height: 44px; max-width: 44px; flex: 0 0 auto; padding: 0 !important; }
.cs-tl-num > .e-con-inner { padding: 0 !important; }
@media (max-width: 767px) { .cs-timeline > .e-con-inner { grid-template-columns: 1fr; gap: 28px; } }

/* Sell what's-included bento (SE4) ------------------------------------ */
.cs-incl-bento > .e-con-inner { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 16px; width: 100%; }
.cs-incl-wide { grid-column: span 2; }
.cs-incl-tile { min-height: 210px; height: 100%; overflow: hidden; }
.cs-incl-icon { width: 46px; height: 46px !important; min-height: 46px; max-width: 46px; flex: 0 0 auto; padding: 0 !important; }
.cs-incl-icon > .e-con-inner { padding: 0 !important; }
/* image tiles: dark gradient overlay + content above it */
.cs-incl-img { position: relative; }
.cs-incl-img::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(14,26,38,.82), rgba(14,26,38,.12)); border-radius: inherit; }
.cs-incl-img > * { position: relative; z-index: 2; }
@media (max-width: 860px) { .cs-incl-bento > .e-con-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cs-incl-bento > .e-con-inner { grid-template-columns: 1fr; } .cs-incl-wide { grid-column: span 1; } }

/* Sell seller FAQ accordion (SE6, F14) -------------------------------- */
/* reference FAQ container = max-width 820px including the gutter */
.cs-faq-wrap { max-width: calc(820px - 2 * var(--cs-gutter, 48px)); width: 100%; margin-inline: auto; }
.cs-faq .elementor-accordion-item { border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: var(--e-global-color-cs_white, #fff); }
.cs-faq .elementor-tab-title { border: none !important; padding: 18px 20px; }
.cs-faq .elementor-tab-content { border: none !important; padding: 0 20px 18px !important; color: var(--e-global-color-cs_ink500, #55677a); }
.cs-faq .elementor-accordion-icon { width: auto; }
.cs-faq .elementor-accordion-icon svg { width: 16px; height: 16px; transition: transform .2s ease; }
.cs-faq .elementor-tab-title.elementor-active .elementor-accordion-icon svg { transform: rotate(180deg); }

/* Buy buyer-journey vertical timeline (BU2, F18) ---------------------- */
.cs-vtimeline { position: relative; padding-left: 64px; max-width: 720px; width: 100%; }
.cs-vtimeline::before { content: ""; position: absolute; left: 21px; top: 16px; bottom: 16px; width: 2px; background: var(--e-global-color-cs_stone200, #e7e4dc); border-radius: 2px; }
/* F18 (Stage 9) sets --cs-vfill 0→100% on scroll; reduced-motion = full line */
.cs-vtimeline::after { content: ""; position: absolute; left: 21px; top: 16px; width: 2px; height: var(--cs-vfill, 0px); background: var(--e-global-color-secondary, #b08a4e); border-radius: 2px; z-index: 0; transition: height .2s linear; }
.cs-vstep { position: relative; padding-bottom: 40px; }
.cs-vstep:last-child { padding-bottom: 0; }
.cs-vstep-dot { position: absolute !important; left: -64px; top: -4px; width: 44px !important; height: 44px !important; min-height: 44px; max-width: 44px; flex: 0 0 auto; padding: 0 !important; border-radius: 50%; background: var(--e-global-color-cs_white, #fff); border: 2px solid var(--e-global-color-cs_stone200, #e7e4dc); z-index: 1; }
.cs-vstep-dot > .e-con-inner { padding: 0 !important; }
.cs-vstep.is-active .cs-vstep-dot { border-color: var(--e-global-color-secondary); background: var(--e-global-color-cs_brass100); }
@media (prefers-reduced-motion: reduce) { .cs-vtimeline::after { height: calc(100% - 32px); } }
@media (max-width: 520px) { .cs-vtimeline { padding-left: 52px; } .cs-vstep-dot { left: -52px; width: 40px !important; height: 40px !important; } .cs-vtimeline::before, .cs-vtimeline::after { left: 19px; } }

/* Buy mortgage calculator wrap (BU3, F9) ------------------------------ */
.cs-calc-wrap { max-width: 920px; width: 100%; margin-inline: auto; }
.cs-calc-head { max-width: 720px; text-align: center; }
.cs-calc-head .cs-calc-lead { text-align: center; }

/* Buy first-time checklist capture card (BU4, F13) -------------------- */
.cs-capture { overflow: hidden; }
.cs-capture > .e-con-inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; width: 100%; padding: 0; }
.cs-capture-img { min-height: 100%; align-self: stretch; }
.cs-capture-form .elementor-form-fields-wrapper { align-items: flex-end; }
.cs-capture-form .elementor-message, .cs-capture-form .elementor-message-success { color: var(--e-global-color-cs_white, #fff); }
@media (max-width: 760px) { .cs-capture > .e-con-inner { grid-template-columns: 1fr; } .cs-capture-img { display: none; } }

/* Inner-page hero (reusable: About/Contact/Neighborhoods/Journal) ------ */
.cs-page-hero { border-bottom: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); }
.cs-breadcrumb, .cs-breadcrumb p { margin: 0; color: var(--e-global-color-cs_ink500, #55677a); }
.cs-breadcrumb a { color: var(--e-global-color-cs_ink500, #55677a); text-decoration: none; }
.cs-breadcrumb a:hover { color: var(--e-global-color-primary, #0e1a26); }
.cs-breadcrumb .sep { color: var(--e-global-color-cs_ink300, #9aa6b2); margin: 0 6px; }
/* 68ch measured in the paragraph's own font (on the widget wrapper, ch used a smaller inherited size) */
.cs-hero-sub p, .cs-hero-sub .elementor-heading-title { max-width: 68ch; margin: 0; }
.cs-hero-sub { margin: 0; }

/* About story: text + office image (AB2) ------------------------------ */
.cs-about-story > .e-con-inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; width: 100%; }
.cs-about-img img { border-radius: 16px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; }
@media (max-width: 860px) { .cs-about-story > .e-con-inner { grid-template-columns: 1fr; gap: 32px; } }

/* About values: 3 tiles (AB3) ----------------------------------------- */
.cs-values-grid > .e-con-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; align-items: stretch; }
.cs-value-tile { height: 100%; }
@media (max-width: 1023px) { .cs-values-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .cs-values-grid > .e-con-inner { grid-template-columns: 1fr; } }

/* About team agent card: bio (AB4) ------------------------------------ */
.cs-agent-bio p { margin: 4px 0 0; }
.cs-agent-card-about { text-align: left; }

/* About numbers: 3 counters (AB5) ------------------------------------- */
.cs-numbers-grid > .e-con-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; }
.cs-numbers-head { text-align: center; }
.cs-illus-note, .cs-illus-note p { margin: 0; text-align: center; }
@media (max-width: 639px) { .cs-numbers-grid > .e-con-inner { grid-template-columns: 1fr; gap: 28px; } }

/* About pull quote (AB6) ---------------------------------------------- */
.cs-pullquote { max-width: 900px; margin-inline: auto; text-align: center; }
.cs-pullquote-q .elementor-heading-title { line-height: 1.3; }
.cs-pullquote-q .elementor-heading-title::before { content: "\201C"; color: var(--e-global-color-secondary, #b08a4e); }
.cs-pullquote-q .elementor-heading-title::after { content: "\201D"; color: var(--e-global-color-secondary, #b08a4e); }
.cs-pullquote-img img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; }

/* Centered CTA (AB8, reusable) ---------------------------------------- */
.cs-cta-center { max-width: 720px; width: 100%; margin-inline: auto; text-align: center; }
.cs-cta-center .cs-cta-lead { text-align: center; }

/* Contact grid (CO2, F12/F6) ------------------------------------------ */
.cs-contact-grid > .e-con-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: start; width: 100%; }
@media (max-width: 900px) { .cs-contact-grid > .e-con-inner { grid-template-columns: 1fr; gap: 28px; } }
#book { scroll-margin-top: 100px; }
.cs-office-row { width: 100% !important; }
.cs-office-row > .elementor-widget-icon { flex: 0 0 auto; }
.cs-office-row > .elementor-widget-heading { flex: 1 1 0; min-width: 0; }
.cs-office-row .elementor-icon-wrapper { line-height: 0; margin-top: 1px; }
.cs-office-txt .elementor-heading-title a { color: inherit; }
.cs-office-txt .elementor-heading-title a:hover { color: var(--e-global-color-accent, #87672f); }
.cs-contact-map iframe { border-radius: 16px; border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); width: 100%; }
.cs-agent-minis .elementor-loop-container { row-gap: 14px; }
/* form ↔ success swap (cs-forms.js adds .is-sent); always visible in the editor */
.cs-has-success .cs-form-success { display: none !important; }
.cs-has-success.is-sent .cs-form-success { display: flex !important; }
.cs-has-success.is-sent .elementor-widget-form { display: none; }
body.elementor-editor-active .cs-has-success .cs-form-success { display: flex !important; outline: 1px dashed var(--e-global-color-cs_stone300, #d6d0c2); outline-offset: 8px; }
.cs-ok-icon .elementor-icon { background: var(--e-global-color-cs_brass100, #f3ecdf); border-radius: 999px; padding: 10px; }
.cs-contact-formw .elementor-field-type-acceptance label { color: var(--e-global-color-cs_ink500, #55677a); }

/* Neighborhood sticky pills (NB2, F17) -------------------------------- */
.cs-nb-pills {
  background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); z-index: 70;
}
/* pinned bars (pills, filter bar): one layer below the header (Elementor sticky = 99) so they slide UNDER it
   when released at the page end (cedar-stone-core cs-scrollspy.js) */
.cs-sticky-release.elementor-sticky--active { z-index: 98 !important; }

/* Properties filter bar (PR2): reference .filter-bar shadow-1 (two layers — the native shadow control takes one) */
.cs-filter-bar { box-shadow: 0 1px 2px rgba(14, 26, 38, .06), 0 4px 16px rgba(14, 26, 38, .06); }
.cs-nb-pills-row > .e-con-inner { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
.cs-nb-pills-row > .e-con-inner::-webkit-scrollbar { display: none; }
.cs-nb-pills-row .elementor-widget-button { flex: 0 0 auto; width: auto !important; }
.cs-nb-pill .elementor-button {
  background: var(--e-global-color-cs_white, #fff); color: var(--e-global-color-cs_ink700, #24384e);
  border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); border-radius: 999px;
  padding: 9px 16px; min-height: 0; white-space: nowrap;
}
.cs-nb-pill .elementor-button:hover { border-color: var(--e-global-color-primary); }
.cs-nb-pill.is-active .elementor-button {
  background: var(--e-global-color-primary); color: var(--e-global-color-cs_white); border-color: var(--e-global-color-primary);
}

/* Neighborhood guide sections (NB3) ----------------------------------- */
.cs-nb-section { scroll-margin-top: 150px; border-bottom: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); }
.cs-nb-top > .e-con-inner { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 64px; align-items: center; width: 100%; }
.cs-nb-top--alt > .e-con-inner > .cs-nb-img { order: 2; }
.cs-nb-img img { border-radius: 999px 999px 16px 16px; aspect-ratio: 3 / 4; max-height: 560px; object-fit: cover; width: 100%; display: block; }
.cs-nb-one, .cs-nb-one p { font-style: italic; margin: 0; }
.cs-nb-guide p { margin: 0; }
.cs-nb-guide p + p { margin-top: 12px; }
.cs-nb-tags { margin-top: 4px; }
.cs-nb-tag { width: auto !important; flex: 0 0 auto; }
.cs-nb-tag .elementor-heading-title {
  display: inline-block; background: var(--e-global-color-cs_brass100, #f3ecdf); border-radius: 999px;
  padding: 5px 12px; text-transform: none; letter-spacing: 0;
}
/* the new-listing alert only shows when the area's grid has no homes */
.cs-nb-homes:has(.cs-nb-grid .e-loop-item) .cs-nb-alert { display: none; }
.cs-nb-homes:not(:has(.cs-nb-grid .e-loop-item)) .cs-nb-grid { display: none; }
body.elementor-editor-active .cs-nb-homes .cs-nb-alert { display: flex !important; outline: 1px dashed var(--e-global-color-cs_stone300, #d6d0c2); outline-offset: 6px; }
@media (max-width: 860px) {
  .cs-nb-top > .e-con-inner { grid-template-columns: 1fr; gap: 24px; }
  .cs-nb-top--alt > .e-con-inner > .cs-nb-img { order: 0; }
}

/* Home neighborhoods bento -------------------------------------------- */
.cs-bento-grid > .e-con-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 16px; grid-auto-flow: dense; width: 100%;
}
.cs-nb-card { position: relative; overflow: hidden; flex-wrap: nowrap !important; }
.cs-nb-card.cs-nb-2x2 { grid-column: span 2; grid-row: span 2; }
.cs-nb-card.cs-nb-wide { grid-column: span 2; }
.cs-nb-tags .elementor-widget-container { margin-top: 2px; }
@media (max-width: 1023px) {
  .cs-bento-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 200px; }
  .cs-nb-card.cs-nb-2x2 { grid-row: span 2; }
}
@media (max-width: 767px) {
  .cs-bento-grid > .e-con-inner { grid-template-columns: 1fr; }
  .cs-nb-card.cs-nb-2x2, .cs-nb-card.cs-nb-wide { grid-column: span 1; grid-row: span 1; }
}

/* Home two-paths: 2-col card grid → 1 col ≤767 ------------------------ */
.cs-paths-grid > .e-con-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
@media (max-width: 767px) { .cs-paths-grid > .e-con-inner { grid-template-columns: 1fr; } }
.cs-path-card { overflow: hidden; border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); }
.cs-path-img img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; display: block; }

/* Home trust strip: 4-col stat grid → 2 cols ≤1023 -------------------- */
.cs-stats-grid > .e-con-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 16px; width: 100%; }
.cs-stats-grid .e-con-inner > .e-con { width: auto !important; }
@media (max-width: 1023px) { .cs-stats-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }

/* Home hero ------------------------------------------------------------ */
/* Hero background slideshow: Elementor does not render the container's gradient overlay when the
   background type is "slideshow", so re-create the design's dark gradient here, only while the
   slideshow is active (:has) — if the client switches the hero back to a single image, Elementor's
   own overlay takes over and this one stays off. Slideshow=z0, overlay=z1, content=z2. */
.cs-hero:has(.elementor-background-slideshow)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(14, 26, 38, .82) 0%, rgba(14, 26, 38, 0) 78%);
}
.cs-hero:has(.elementor-background-slideshow) > :not(.elementor-background-slideshow) { position: relative; z-index: 2; }
.cs-hero-lead .elementor-heading-title { opacity: .9; max-width: 56ch; }
.cs-hero-call, .cs-hero-call a { color: #fff; }
.cs-hero-call a { font-weight: 600; text-decoration: none; }
.cs-hero-call a:hover { text-decoration: underline; }
/* search panel tabs: pill titles, active = stone 100 */
.cs-search-tabs .e-n-tabs-heading { gap: 4px; border: 0; }
.cs-search-tabs .e-n-tab-title {
  padding: 8px 18px; border-radius: 999px; border: 0;
  font-family: var(--e-global-typography-secondary-font-family, "Manrope"); font-weight: 600; font-size: 14px;
  color: var(--e-global-color-cs_ink500, #55677a); background: transparent;
}
.cs-search-tabs .e-n-tab-title[aria-selected="true"] {
  background: var(--e-global-color-cs_stone100, #f4f3ef); color: var(--e-global-color-primary);
}
.cs-search-tabs .e-n-tabs-content { padding-top: 12px; }
.cs-hero-form .elementor-button { min-height: 48px; }

/* Footer ---------------------------------------------------------------- */
/* Columns = reference `.site-footer__grid` (1.6fr 1fr 1fr 1.4fr, gap 48 → 2 cols ≤1023 → 1 col ≤639).
   The Elementor % widths (34/16/16/30) plus gaps overflowed the 1184px content box, so Office wrapped. */
.cs-footer > .e-con:first-child > .e-con-inner {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.4fr; column-gap: 48px; row-gap: 32px; align-items: start;
}
.cs-footer > .e-con:first-child > .e-con-inner > .e-con { width: auto !important; max-width: none; min-width: 0; }
@media (max-width: 1023px) { .cs-footer > .e-con:first-child > .e-con-inner { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
@media (max-width: 639px)  { .cs-footer > .e-con:first-child > .e-con-inner { grid-template-columns: 1fr; } }
.cs-foot-nav .elementor-nav-menu,
.cs-foot-nav .elementor-nav-menu li { width: 100%; }
.cs-foot-nav .elementor-item {
  color: var(--e-global-color-cs_ink300, #9aa6b2);
  padding: 6px 0; font-size: 14px;
  padding-left: 0 !important; padding-right: 0 !important; /* Elementor's widget CSS sets 20px */
}
.cs-foot-nav .elementor-item:hover,
.cs-foot-nav .elementor-item.elementor-item-active { color: #fff; }
.cs-social .elementor-social-icon {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; width: 40px; height: 40px;
}
.cs-social .elementor-social-icon:hover { background: rgba(255, 255, 255, .08); }
.cs-foot-contact .elementor-heading-title a { color: var(--e-global-color-cs_ink300, #9aa6b2); }
.cs-foot-contact .elementor-heading-title a:hover { color: #fff; }
.cs-foot-bottom { border-color: rgba(255, 255, 255, .1) !important; }
.cs-foot-legal .elementor-heading-title,
.cs-foot-legal .elementor-heading-title a { color: var(--e-global-color-cs_ink300, #9aa6b2); }
.cs-foot-legal .elementor-heading-title a:hover { color: #fff; }
.cs-foot-disclaimer { opacity: .7; }

/* Mobile action bar (fixed, mobile only) */
.cs-action-bar {
  background: var(--e-global-color-cs_white, #fff);
  border-top: 1px solid var(--e-global-color-cs_stone200, #e7e4dc);
  box-shadow: 0 -4px 16px rgba(14, 26, 38, .08);
  gap: 1px;
}
.cs-action-bar .cs-ab-btn { flex: 1 1 0; }
.cs-action-bar .cs-ab-btn .elementor-button {
  width: 100%; min-height: 60px;
  background: var(--e-global-color-cs_white, #fff);
  color: var(--e-global-color-primary); border-radius: 0;
  font-size: 11px; padding: 8px;
}
.cs-action-bar .cs-ab-btn .elementor-button-content-wrapper {
  flex-direction: column; align-items: center; gap: 3px;
}
.cs-action-bar .cs-ab-btn .elementor-button svg { width: 20px; height: 20px; }
.cs-action-bar .cs-ab-book .elementor-button {
  background: var(--e-global-color-primary); color: #fff;
}

/* 6. Buy-journey timeline fill line — superseded by `.cs-vtimeline` (BU2, F18 hooks:
   --cs-vfill / .is-active). The old `.cs-timeline` pseudo-line was removed because the
   Sell process grid (SE3) uses that class name and was drawing a stray line. */

/* 7. Tabular numerals (prices, stats, sqft) ---------------------------- */
.cs-tnum,
.cs-tnum .elementor-heading-title,
.cs-tnum .elementor-counter-number-wrapper {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* 8. Form radios rendered as pills (reference .chip) ------------------- */
/* Applied to an Elementor Form radio field wrapper. Verified at the form. */
.cs-chip-radio .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cs-chip-radio .elementor-field-option {
  position: relative;
}
.cs-chip-radio .elementor-field-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.cs-chip-radio .elementor-field-option label {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--cs-dur-hover) var(--cs-ease),
              background-color var(--cs-dur-hover) var(--cs-ease),
              color var(--cs-dur-hover) var(--cs-ease);
}
.cs-chip-radio .elementor-field-option input[type="radio"]:hover + label {
  border-color: var(--e-global-color-cs_stone300, #d6d0c2);
}
.cs-chip-radio .elementor-field-option input[type="radio"]:checked + label {
  background: var(--e-global-color-primary);
  border-color: var(--e-global-color-primary);
  color: #fff;
}

/* 9. Dark translucent form (footer newsletter) ------------------------- */
/* footer newsletter success on the dark footer (reference .newsletter-success: white, 14px) */
.cs-form-dark .elementor-message, .cs-form-dark .elementor-message-success { color: var(--e-global-color-cs_white, #fff); font-size: 14px; }
.cs-form-dark .elementor-field-group input,
.cs-form-dark .elementor-field-group textarea {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
  color: #fff;
}
.cs-form-dark .elementor-field-group input::placeholder,
.cs-form-dark .elementor-field-group textarea::placeholder {
  color: var(--e-global-color-cs_ink300, rgba(255, 255, 255, .5));
}

/* 10. Keyboard focus ring (brass) — global ----------------------------- */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--e-global-color-secondary);
}

/* 11. Room for the mobile action bar ----------------------------------- */
@media (max-width: 767px) {
  body {
    padding-bottom: 62px;
  }
}

/* 12. Reduced motion — honour the user's OS setting -------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .cs-card:hover,
  .cs-card:hover img {
    transform: none;
  }
}

/* Properties results (PR3) — reference .results-head / .props-layout / .empty ---------- */
.cs-results-match p, .cs-results-match .elementor-heading-title { margin: 0; }
.cs-results-match strong { color: var(--e-global-color-primary, #0e1a26); font-weight: 700; }
.cs-results-head { width: 100%; }
.cs-results-head > .elementor-widget { width: auto !important; }
/* grid view = the Loop Grid's own columns; the map is hidden */
.cs-results-layout .cs-results-map { display: none; }
/* map view: list | sticky map (cards become rows) */
.cs-results-layout.is-map { display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.cs-results-layout.is-map .cs-results-map {
  display: block; position: sticky; top: calc(68px + 70px); height: calc(100vh - 160px);
  border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); border-radius: 16px; overflow: hidden;
}
.cs-results-layout.is-map .cs-results-map > .elementor-widget-container { height: 100%; }
.cs-results-layout.is-map .cs-results-grid .elementor-loop-container {
  display: flex !important; flex-direction: column; gap: 16px; max-height: calc(100vh - 160px); overflow-y: auto; padding-right: 6px;
}
.cs-results-layout.is-map .cs-prop-card { flex-direction: row !important; }
.cs-results-layout.is-map .cs-card-imgwrap { width: 42% !important; flex: none !important; }
.cs-results-layout.is-map .cs-card-img img { height: 100%; }
.cs-results-layout.is-map .cs-prop-card > .e-con:not(.cs-card-imgwrap) { padding: 16px !important; flex: 1 1 auto; min-width: 0; }
.cs-results-layout .e-loop-item.is-active-map .cs-prop-card { box-shadow: 0 0 0 3px var(--e-global-color-secondary, #b08a4e); }
@media (max-width: 900px) {
  .cs-results-layout.is-map { grid-template-columns: 1fr; }
  .cs-results-layout.is-map .cs-results-map { position: relative; top: 0; height: 60vh; order: -1; }
  .cs-results-layout.is-map .cs-results-grid .elementor-loop-container {
    flex-direction: row; max-height: none; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding: 0 0 8px;
  }
  .cs-results-layout.is-map .cs-results-grid .e-loop-item { flex: 0 0 80%; min-width: 80%; scroll-snap-align: start; }
  .cs-results-layout.is-map .cs-prop-card { flex-direction: column !important; }
  .cs-results-layout.is-map .cs-card-imgwrap { width: 100% !important; }
}
/* empty state: shown only when the grid has no homes (always visible in the editor) */
.cs-results-section:has(.cs-results-grid .e-loop-item) .cs-results-empty { display: none; }
.cs-results-section:not(:has(.cs-results-grid .e-loop-item)) .cs-results-layout { display: none !important; }
body.elementor-editor-active .cs-results-section .cs-results-empty { display: flex !important; outline: 1px dashed var(--e-global-color-cs_stone300, #d6d0c2); outline-offset: 6px; }
body.elementor-editor-active .cs-results-section .cs-results-layout { display: flex !important; }
.cs-results-empty { max-width: 420px; margin-inline: auto; text-align: center; }
.cs-results-empty .cs-empty-art img { width: 120px; height: 120px; }
.cs-results-empty p { margin: 0; }
.cs-results-empty-actions { justify-content: center; }
.cs-results-empty-actions > .elementor-widget { width: auto !important; }

/* Single Property (SP1) — native Gallery restyled as the reference .gallery mosaic: 2fr 1fr 1fr × 2 rows, 10px gaps,
   16:9, radius 16, first photo spans both rows, photos 6+ stay in the lightbox only; ≤767 a 4:3 swipe of the first two */
.cs-gallery-wrap { position: relative; }
.cs-prop-gallery .e-gallery-grid {
  grid-template-columns: 2fr 1fr 1fr !important; grid-template-rows: 1fr 1fr; grid-auto-rows: 0;
  aspect-ratio: 16 / 9; gap: 10px !important; border-radius: 16px; overflow: hidden;
}
.cs-prop-gallery .e-gallery-item { height: 100%; margin: 0 !important; overflow: hidden; }
.cs-prop-gallery .e-gallery-item:first-child { grid-row: 1 / span 2; }
.cs-prop-gallery .e-gallery-item:nth-child(n+6) { display: none; }
.cs-prop-gallery .e-gallery-image {
  height: 100%; padding-bottom: 0 !important; background-size: cover; background-position: center;
  transition: transform var(--cs-dur-ui) var(--cs-ease);
}
.cs-prop-gallery .e-gallery-item:hover .e-gallery-image { transform: scale(1.04); }
.cs-gallery-more { position: absolute !important; right: 12px; bottom: 12px; z-index: 2; width: auto !important; }
@media (max-width: 767px) {
  .cs-prop-gallery .e-gallery-grid {
    display: flex !important; flex-flow: row nowrap !important; aspect-ratio: 4 / 3; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .cs-prop-gallery .e-gallery-grid::-webkit-scrollbar { display: none; }
  .cs-prop-gallery .e-gallery-item { flex: 0 0 100%; scroll-snap-align: start; }
  .cs-prop-gallery .e-gallery-item:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cs-prop-gallery .e-gallery-item:hover .e-gallery-image { transform: none; } }
/* breadcrumb left, Share / Save right on one row (reference .prop-top) */
.cs-prop-top > .e-con { width: auto !important; flex: 0 1 auto; }

/* Single Property body (SP2+): reference .property-grid — main 2fr | sidebar 1fr, gap 48; one column ≤980 */
.cs-prop-body > .e-con-inner { display: grid !important; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.cs-prop-body > .e-con-inner > .e-con { width: auto !important; min-width: 0; }
@media (max-width: 980px) { .cs-prop-body > .e-con-inner { grid-template-columns: 1fr; } }
/* SP2 title block (reference .prop-headline) */
.cs-prop-badges > .e-con, .cs-prop-addr > .elementor-widget, .cs-open-banner > .elementor-widget { width: auto !important; }
.cs-pbadge .elementor-heading-title { letter-spacing: .06em; text-transform: uppercase; }
/* no open house → the dynamic heading isn't rendered: hide the soft badge + strip */
.cs-pbadge--soft:not(:has(.elementor-widget-heading)), .cs-open-banner:not(:has(.elementor-widget-heading)) { display: none !important; }
.cs-per { font-family: var(--e-global-typography-text-font-family, "Manrope"), sans-serif; color: var(--e-global-color-cs_ink500, #55677a); }
.cs-prop-price .cs-per { font-size: 1rem; font-weight: 400; }
.cs-prop-card .cs-per { font-size: .9rem; font-weight: 500; }
.cs-keyfacts .elementor-icon-list-text b { font-weight: 700; color: var(--e-global-color-primary, #0e1a26); }
.cs-keyfacts .elementor-icon-list-text span { color: var(--e-global-color-cs_ink500, #55677a); }

/* Outline (Lucide) icons — every uploaded icon SVG declares fill="none" + stroke="currentColor". Elementor paints SVG
   icons with `fill: <icon colour>` (made for filled icon fonts), which turned them into solid blobs. Keep them
   outlined; the stroke follows the widget's icon colour (Icon / Icon Box set `color`; Icon List gets `color` from
   cedar-stone-core inc/elementor-tweaks.php). Filled SVGs (no fill="none") are untouched. */
.elementor-icon svg[fill="none"], .elementor-icon-list-icon svg[fill="none"], .elementor-button-icon svg[fill="none"],
.elementor-social-icon svg[fill="none"] {
  fill: none !important; stroke: currentColor;
}
/* SP3 sections (reference .prop-section, .stack) */
.cs-prop-about p { margin: 0; }
.cs-prop-about p + p { margin-top: 16px; }
/* a listing without features / facts: the widget renders nothing → hide its section (always shown in the editor) */
body:not(.elementor-editor-active) .cs-prop-features:not(:has(.cs-feature-list)),
body:not(.elementor-editor-active) .cs-prop-facts:not(:has(.cs-facts-table)) { display: none; }
/* SP4 — content-gated (C10 / C11): no video URL / floor-plan image → the widget renders nothing → hide the section
   (always shown in the editor) */
body:not(.elementor-editor-active) .cs-prop-video:not(:has(.elementor-wrapper, .elementor-custom-embed-image-overlay)),
body:not(.elementor-editor-active) .cs-prop-plan:not(:has(.cs-plan-img img)) { display: none; }
/* video tour = reference .video-block: 16:9 poster, radius 16, ink 35% veil, frosted 68px play button + label */
.cs-video-wrap { position: relative; }
.cs-prop-video-player .elementor-wrapper, .cs-prop-video-player .elementor-custom-embed-image-overlay { border-radius: 16px; overflow: hidden; }
.cs-prop-video-player .elementor-custom-embed-image-overlay::after { content: ""; position: absolute; inset: 0; background: rgba(14, 26, 38, .35); }
.cs-prop-video-player .elementor-custom-embed-play {
  z-index: 2; width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; margin-top: -14px;
  border-radius: 50%; background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cs-prop-video-player .elementor-custom-embed-play svg { width: 28px; height: 28px; margin-left: 3px; color: #fff; filter: none; }
.cs-video-label { position: absolute !important; left: 0; right: 0; top: calc(50% + 34px); z-index: 3; width: auto !important; text-align: center; pointer-events: none; }
.cs-prop-video:not(:has(.elementor-custom-embed-image-overlay)) .cs-video-label { display: none; }
.cs-floorplan img { width: 100%; height: auto; display: block; }
/* SP5: no coordinates and no nearby places → hide "Location & nearby" (always shown in the editor) */
body:not(.elementor-editor-active) .cs-prop-location:not(:has(.cs-lmap, .cs-nearby-list)) { display: none; }

/* SP6 — finance block: mortgage on homes for sale, move-in costs on rentals; the other hides */
body:not(.elementor-editor-active) .cs-prop-mortgage:not(:has(.cs-mortgage)),
body:not(.elementor-editor-active) .cs-prop-movein:not(:has(.cs-movein)) { display: none; }

/* SP7 — sidebar (reference .prop-sidebar / .booking). Desktop: the sidebar column takes its
   min-content (7 day chips = 490px, as the reference grid does) and the card sticks under the
   scrolled header on screens tall enough to show all of it; ≤980 it stacks below the main column (min-width 0, chips scroll). */
@media (min-width: 981px) {
  .cs-prop-body > .e-con-inner > .cs-prop-sidebar { min-width: auto; align-self: stretch; }
}
/* sticky only when the whole card (≈1080px) fits under the header — never hides "Request viewing" */
@media (min-width: 981px) and (min-height: 1180px) { .cs-booking { position: sticky; top: 88px; } }
#booking { scroll-margin-top: 88px; }
/* reference fields inherit body line-height 1.65: labels 23px, inputs 54px, button min-height 48 */
.cs-booking-form .elementor-field-group > label.elementor-field-label { line-height: 1.65; }
.cs-booking-form .elementor-field-textual { line-height: 1.65; min-height: 48px; }
.cs-booking-form .elementor-button[type="submit"] { min-height: 48px; }
/* reference rhythm: textarea (inline-block) adds a line-box gap; the consent row has 16px + its own spacing */
.elementor .cs-booking-form .elementor-form-fields-wrapper .elementor-field-group.elementor-field-group-message { margin-bottom: 23px; }
.elementor .cs-booking-form .elementor-form-fields-wrapper .elementor-field-group.elementor-field-group-consent { margin-bottom: 20px; }
.cs-booking-form .elementor-field-type-radio input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.cs-booking-form .elementor-field-type-radio .elementor-field-option { position: relative; margin: 0; }
.cs-booking-form .elementor-field-type-radio .elementor-field-option label {
  display: block; margin: 0; cursor: pointer; text-align: center; line-height: 1.65; color: var(--e-global-color-primary);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cs-booking-form .elementor-field-type-radio input:focus-visible + label { outline: 2px solid var(--e-global-color-secondary); outline-offset: 2px; }
/* "Viewing type" / "Consent" labels: for screen readers + the email only */
.cs-booking-form .elementor-field-group-viewing > label.elementor-field-label,
.cs-booking-form .elementor-field-group-consent > label.elementor-field-label {
  position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* In person / Video call → segmented tabs */
.cs-booking-form .elementor-field-group-viewing .elementor-field-subgroup {
  display: flex; gap: 6px; padding: 4px; border-radius: 10px; background: var(--e-global-color-cs_stone100, #f4f3ef); width: 100%;
}
.cs-booking-form .elementor-field-group-viewing .elementor-field-option { flex: 1 1 0; }
.cs-booking-form .elementor-field-group-viewing .elementor-field-option label {
  padding: 9px; border-radius: 7px; font-size: 14px; font-weight: 600; color: var(--e-global-color-cs_ink500, #55677a);
}
.cs-booking-form .elementor-field-group-viewing input:checked + label {
  background: var(--e-global-color-cs_white, #fff); color: var(--e-global-color-primary);
  box-shadow: 0 1px 2px rgba(14, 26, 38, .06), 0 4px 16px rgba(14, 26, 38, .06);
}
/* Pick a day → date chips (weekday + date, inc/forms.php) */
.cs-booking-form .elementor-field-group-day .elementor-field-subgroup {
  display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; width: 100%;
}
.cs-booking-form .elementor-field-group-day .elementor-field-subgroup::-webkit-scrollbar { display: none; }
.cs-booking-form .elementor-field-group-day .elementor-field-option { flex: 0 0 auto; }
.cs-booking-form .elementor-field-group-day .elementor-field-option label {
  min-width: 56px; padding: 8px 6px; font-size: .78rem; border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); border-radius: 10px;
}
.cs-booking-form .cs-dow { display: block; font-weight: 700; }
.cs-booking-form .cs-dnum { display: block; font-family: var(--e-global-typography-primary-font-family), Georgia, serif; font-size: 1.15rem; }
/* Pick a time → 3-column slot chips */
.cs-booking-form .elementor-field-group-time .elementor-field-subgroup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; }
.cs-booking-form .elementor-field-group-time .elementor-field-option label {
  padding: 9px; font-size: 14px; font-weight: 600; border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); border-radius: 8px;
}
.cs-booking-form .elementor-field-group-day input:checked + label,
.cs-booking-form .elementor-field-group-time input:checked + label {
  background: var(--e-global-color-primary); color: var(--e-global-color-cs_white, #fff); border-color: var(--e-global-color-primary);
}
.cs-booking-form .cs-opt { color: var(--e-global-color-cs_ink500, #55677a); }
.cs-booking-form textarea.elementor-field { height: 80px; min-height: 80px; resize: vertical; }
/* consent checkbox (reference .checkbox) */
.cs-booking-form .elementor-field-type-acceptance .elementor-field-option { display: flex; align-items: flex-start; gap: 10px; }
.cs-booking-form .elementor-field-type-acceptance input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--e-global-color-primary); }
.cs-booking-form .elementor-field-type-acceptance .elementor-field-option label { font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--e-global-color-primary); margin: 0; }
/* success panel: green check (reference .booking__success .ok) */
.cs-booking-ok { text-align: center; }
.cs-ok-green .elementor-icon {
  width: 56px; height: 56px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(47, 107, 79, .12);
}
/* listing agent (reference .agent-mini) */
.cs-bk-agent > .elementor-widget-image { width: auto; flex: none; }
.cs-bk-agent-photo img { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; display: block; }
.elementor .cs-booking .cs-bk-agent .cs-bk-agent-name .elementor-heading-title { font-weight: 700; } /* beats the global type rule */
.cs-bk-agent-links > .elementor-widget { width: auto; }
.cs-bk-agent .cs-icon-btn .elementor-icon {
  width: 44px; height: 44px; border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; background: var(--e-global-color-cs_white, #fff);
  transition: background-color .18s ease, transform .18s ease;
}
.cs-bk-agent .cs-icon-btn .elementor-icon:hover { background: var(--e-global-color-cs_stone100, #f4f3ef); transform: translateY(-1px); }

/* Mobile action bar: on property pages "Schedule viewing" (→ #booking) replaces "Book" (reference action bar) */
.cs-action-bar .cs-ab-schedule { display: none; }
body.single-property .cs-action-bar .cs-ab-schedule { display: block; }
body.single-property .cs-action-bar .cs-ab-book:not(.cs-ab-schedule) { display: none; }
body.elementor-editor-active .cs-action-bar .cs-ab-schedule { display: block; }

/* Card scroller (reference .card-grid ≤639px): 3 / 2 columns → a swipe row of 86% cards that bleeds to
   the screen edge. Reusable on any property-card Loop Grid (class cs-card-scroller). */
@media (max-width: 639px) {
  .cs-card-scroller .elementor-loop-container {
    display: grid; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 86%;
    gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px;
    margin-inline: calc(var(--cs-gutter, 20px) * -1); padding-inline: var(--cs-gutter, 20px); scroll-padding-inline: var(--cs-gutter, 20px);
    scrollbar-width: none;
  }
  .cs-card-scroller .elementor-loop-container::-webkit-scrollbar { display: none; }
  .cs-card-scroller .elementor-loop-container > * { scroll-snap-align: start; }
}
/* SP8 — no similar homes (Loop Grid renders nothing) → hide the section */
body:not(.elementor-editor-active) .cs-prop-similar:not(:has(.e-loop-item)) { display: none; }

/* Single · Journal Post (SA1+) — reference .article: 1040px grid, 200px "On this page" | body, gap 64;
   one column ≤980 with the TOC hidden */
.cs-article { display: grid !important; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; max-width: 1040px; width: 100%; margin-inline: auto; align-items: start; }
.cs-article > .e-con { width: auto !important; min-width: 0; }
@media (max-width: 980px) {
  .cs-article { grid-template-columns: minmax(0, 1fr); }
  body:not(.elementor-editor-active) .cs-article-toc { display: none; }
}
.elementor .cs-article-body .cs-article-cat .elementor-heading-title { letter-spacing: .08em; line-height: 1.65; text-transform: uppercase; } /* reference .article-cat (beats the global type rule) */
.cs-article-meta > .elementor-widget { width: auto; font-size: 14px; line-height: 1.65; } /* 23px lines like the reference meta */
.cs-article-meta > .elementor-widget:not(:last-child) .elementor-heading-title::after {
  content: ""; display: inline-block; width: 4px; height: 4px; margin-left: 16px; vertical-align: middle; border-radius: 50%;
  background: var(--e-global-color-cs_ink300, #9aa6b2);
}
.cs-article-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; display: block; }
/* article breadcrumb: one 23px line (reference 14px × 1.65); the heading widget otherwise takes the 26px body line */
.cs-article-sec .cs-breadcrumb-row > .elementor-widget { font-size: 14px; line-height: 1.65; }

/* SA2 — "On this page" (reference .article__toc): sticky column, label, left-rule links, brass active rule */
@media (min-width: 981px) { .cs-article > .cs-article-toc { position: sticky; top: 92px; } }
.cs-toc .elementor-toc__header { padding: 0 !important; border: 0 !important; }
.cs-toc .elementor-toc__header-title { text-transform: uppercase; letter-spacing: .1em !important; line-height: 1.65 !important; margin: 0 0 12px !important; }
.cs-toc .elementor-toc__body { padding: 0 !important; }
.cs-toc .elementor-toc__list-wrapper { margin: 0; padding: 0; list-style: none; }
.cs-toc .elementor-toc__list-item { margin: 0; }
.cs-toc .elementor-toc__list-item-text-wrapper > i, .cs-toc .elementor-toc__list-item-text-wrapper > svg,
.cs-toc .elementor-toc__list-item-text-wrapper::before { display: none !important; }
.cs-toc .elementor-toc__list-item-text {
  display: block; padding: 7px 0 7px 14px; line-height: 1.3 !important;
  border-left: 2px solid var(--e-global-color-cs_stone200, #e7e4dc); text-decoration: none !important;
}
.cs-toc .elementor-toc__list-item-text.elementor-item-active { border-left-color: var(--e-global-color-secondary, #b08a4e); font-weight: 600; }
/* Elementor marks every heading on screen as active; like the reference scroll-spy, keep only the first */
.cs-toc .elementor-toc__list-item:has(.elementor-item-active) ~ .elementor-toc__list-item .elementor-toc__list-item-text.elementor-item-active {
  border-left-color: var(--e-global-color-cs_stone200, #e7e4dc); font-weight: inherit; color: var(--e-global-color-cs_ink500, #55677a) !important;
}

/* SA2 — article text (reference .prose); the client writes it in the block editor */
.cs-prose .elementor-widget-container > *:first-child, .cs-prose > *:first-child { margin-top: 0; }
.cs-article .cs-article-body > .elementor-widget.cs-prose { max-width: 68ch; } /* reference .prose: the whole article column, measured at 16px */
.cs-prose p { margin: 0 0 16px; line-height: 1.75; }
.cs-prose h2 {
  font-family: var(--e-global-typography-primary-font-family), Georgia, serif; font-weight: 500; font-size: 1.6rem; line-height: 1.25;
  letter-spacing: -0.01em; color: var(--e-global-color-primary); margin: 48px 0 12px; scroll-margin-top: 120px;
}
.cs-prose ul.wp-block-list { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.cs-prose ul.wp-block-list li { position: relative; padding-left: 24px; color: var(--e-global-color-cs_ink700, #24384e); line-height: 1.65; }
.cs-prose ul.wp-block-list li::before {
  content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--e-global-color-secondary, #b08a4e);
}
.cs-prose blockquote, .cs-prose .wp-block-quote {
  border-left: 3px solid var(--e-global-color-secondary, #b08a4e); padding: 2px 0 2px 20px; margin: 24px 0;
}
.cs-prose blockquote p {
  margin: 0; font-family: var(--e-global-typography-primary-font-family), Georgia, serif; font-size: 1.3rem; line-height: 1.4;
  color: var(--e-global-color-primary);
}
/* List block with the class "cs-checklist" = the reference .checklist-box (green checks) */
.cs-prose ul.wp-block-list.cs-checklist {
  gap: 12px; margin: 24px 0; padding: 24px 32px; border-radius: 16px;
  background: var(--e-global-color-cs_stone100, #f4f3ef); border: 1px solid var(--e-global-color-cs_stone200, #e7e4dc);
}
.cs-prose ul.wp-block-list.cs-checklist li { padding-left: 32px; font-size: 14px; line-height: 1.65; color: var(--e-global-color-primary); }
.cs-prose ul.wp-block-list.cs-checklist li::before {
  left: 0; top: 1px; width: 20px; height: 20px; border-radius: 0; background: var(--e-global-color-cs_sale, #2f6b4f);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* articles without H2s (e.g. the C12 placeholder posts): no "On this page" box, no "No headings" message */
body:not(.elementor-editor-active) .cs-toc:not(:has(.elementor-toc__list-item)) { display: none; }

/* SA3 — author box (reference .author-box) */
.cs-author-box { align-items: center; gap: 16px; margin-top: 48px; padding: 24px; border-radius: 16px; background: var(--e-global-color-cs_stone100, #f4f3ef); }
.cs-author-box > .elementor-widget-image { width: auto; flex: none; }
.cs-author-photo img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; }
.cs-author-line > .elementor-widget { width: auto; }
.cs-author-name .elementor-heading-title { font-weight: 700; }
.cs-author-bio .elementor-heading-title:empty { display: none; }

/* SA3 — newsletter card (reference .newsletter-card: ink band, centred) */
.cs-newsletter-card { margin-top: 48px; padding: 32px; border-radius: 16px; text-align: center; align-items: center; background: var(--e-global-color-primary, #0e1a26); }
.cs-newsletter-card .cs-nl-title .elementor-heading-title { color: var(--e-global-color-cs_white, #fff); }
.cs-newsletter-card .cs-nl-lead .elementor-heading-title { color: var(--e-global-color-cs_ink300, #9aa6b2); }
.cs-nl-form { width: 100%; max-width: 420px; margin-inline: auto; }
.cs-nl-form .elementor-form-fields-wrapper { display: flex; flex-flow: row nowrap; gap: 8px; align-items: stretch; }
.cs-nl-form .elementor-field-group { margin: 0; flex: 1 1 auto; min-width: 0; }
.cs-nl-form .elementor-field-group.elementor-field-type-submit { flex: 0 0 auto; }
.cs-nl-form .elementor-field-group input { min-height: 48px; }
.cs-nl-form .elementor-button[type="submit"] { min-height: 48px; white-space: nowrap; }
.cs-nl-form .elementor-field-label { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 420px) { .cs-nl-form .elementor-form-fields-wrapper { flex-flow: column nowrap; } .cs-nl-form .elementor-field-group.elementor-field-type-submit .elementor-button { width: 100%; } }

/* F7 — saved-homes drawer, overlay, header count badge (reference .drawer / .overlay / .saved-btn__count) */
/* The saved-homes heart sits on an always-ink pill, so pin it white — don't inherit the header text colour,
   which flips to ink on the scrolled/solid header and made the heart invisible (dark-on-dark). */
.cs-saved-homes-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--e-global-color-cs_white, #fff); line-height: 0; }
.cs-saved-homes-btn svg { width: 22px; height: 22px; }
.cs-saved-count {
  position: absolute; top: -6px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--e-global-color-cs_sold, #9a3b32); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.cs-saved-count[data-count="0"], .cs-saved-count:empty { display: none; }
.cs-overlay { position: fixed; inset: 0; z-index: 290; background: rgba(14, 26, 38, .5); opacity: 0; transition: opacity .3s ease; }
.cs-overlay.is-open { opacity: 1; }
.cs-overlay[hidden] { display: none; }
.cs-saved-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 300; width: min(420px, 100%); background: var(--e-global-color-cs_white, #fff);
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); display: flex; flex-direction: column;
  box-shadow: 0 18px 40px rgba(14, 26, 38, .12), 0 4px 10px rgba(14, 26, 38, .08);
}
.cs-saved-drawer.is-open { transform: translateX(0); }
.cs-saved-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 24px; border-bottom: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); }
.cs-saved-drawer__head h3 { margin: 0; font-family: var(--e-global-typography-primary-font-family), Georgia, serif; font-weight: 500; font-size: 1.25rem; color: var(--e-global-color-primary); }
.cs-saved-close { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 999px; cursor: pointer; color: var(--e-global-color-primary) !important; }
.cs-saved-close:hover { background: var(--e-global-color-cs_stone100, #f4f3ef); }
.cs-saved-drawer__body { padding: 16px 24px; overflow-y: auto; flex: 1; }
.cs-saved-drawer__foot { padding: 24px; border-top: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); }
.cs-saved-drawer__foot[hidden] { display: none; }
.cs-btn-saved-all { display: block; width: 100%; text-align: center; padding: 15px 22px; border-radius: 10px; background: var(--e-global-color-primary); color: var(--e-global-color-cs_white, #fff); font-weight: 600; text-decoration: none; }
.cs-btn-saved-all:hover { background: var(--e-global-color-cs_ink700, #24384e); }
.cs-saved-empty { text-align: center; color: var(--e-global-color-cs_ink500, #55677a); padding: 40px 8px; }
.cs-saved-empty h3 { margin: 0 0 6px; font-family: var(--e-global-typography-primary-font-family), Georgia, serif; font-weight: 500; font-size: 1.1rem; color: var(--e-global-color-primary); }
.cs-saved-empty p { margin: 0; font-size: 14px; }
.cs-saved-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--e-global-color-cs_stone200, #e7e4dc); text-decoration: none; color: var(--e-global-color-primary); position: relative; }
.cs-saved-row:last-child { border-bottom: 0; }
.cs-saved-row__media img { width: 72px; height: 54px; border-radius: 8px; object-fit: cover; display: block; }
.cs-saved-row__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cs-saved-row__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-saved-row__title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-saved-row__loc { font-size: 12px; color: var(--e-global-color-cs_ink500, #55677a); }
.cs-saved-row__x { background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 22px; line-height: 1; color: var(--e-global-color-cs_ink500, #55677a) !important; cursor: pointer; padding: 0 6px; flex: none; min-height: 0; }
.cs-saved-row__x:hover { color: var(--e-global-color-cs_sold, #9a3b32); }

/* Portfolio "concept site" banner (top of every page). Intentionally off-palette rose so it reads as a
   meta notice, not part of the brand. Remove the wp_body_open block in functions.php for a live site. */
.cs-concept-banner {
  background: #be3b57; color: #fff; text-align: center;
  padding: 7px 16px; font-size: 13px; line-height: 1.4; font-weight: 500;
  position: relative; z-index: 100000; letter-spacing: .1px;
}
.cs-concept-banner p { margin: 0 auto; max-width: 820px; }
.cs-concept-banner a, .cs-concept-banner__by { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cs-concept-banner a:hover { opacity: .85; }
@media (max-width: 600px) { .cs-concept-banner { font-size: 12px; padding: 6px 12px; } }