/*
 * Chughtai Estate Advisor redesign — new stylesheet.
 * Design system source: docs/design/Design System.dc.html (project repo).
 * Enqueued from functions.php (cea_redesign_enqueue_assets), loaded after
 * Elementor's generated CSS so overrides here win.
 */

/* Page-load entrance — the design mockup animates every screen in with
   `fadeUp 0.4s ease`; applied here to each redesigned page's root
   wrapper. Pure CSS, no JS/layout cost, skipped entirely for anyone who
   has reduced-motion set. */
@keyframes ceaFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .cea-home, .cea-properties, .cea-about, .cea-contact,
  .cea-blog-archive, .cea-blog-post, .cea-roi, .cea-dash,
  .um-account, .cea-auth {
    animation: ceaFadeUp .4s ease;
  }
}

:root {
  /* Color — 2026-08-14 full redesign, per the Claude Design handoff
     (docs/design/website-redesign-scope). Refined-crimson red over warm
     neutrals, replacing the prior "Warm Paper" palette entirely — this is
     a deliberate rebrand, confirmed with the site owner (including the
     brand red itself moving from #C70509 to this new #D62839). Existing
     token NAMES are kept wherever the semantic role carries over
     unchanged, so the hundreds of selectors already referencing them
     update automatically; only the values change. A handful of usages
     that don't map 1:1 (icon wells, the "Live" status badge, the Listing
     ID tag) are fixed individually where they're declared, not here. */
  --cea-brand-red: #D62839;      /* red-500 */
  --cea-red-deep: #A31621;       /* red-700 — hover/pressed on primary */
  --cea-red-pressed: #C11F2F;    /* red-600 — intermediate active state */
  --cea-red-tint: #FBECEC;       /* blush — icon wells, chips, badges */
  --cea-red-wash: #F4EEEA;       /* warm section wash (hero/page-title bands) */

  /* Warm neutrals — paper to ink */
  --cea-bone: #FAF8F6;           /* paper — page background */
  --cea-surface: #FFFFFF;        /* cards, inputs */
  --cea-ink: #1C1B1A;            /* ink-900 — headings, primary text */
  --cea-ink-strong: #3A3733;     /* ink-700 — strong body */
  --cea-body: #5F5B57;           /* ink-500 — body text */
  --cea-slate: #6B6763;          /* ink-400 — secondary body */
  --cea-muted: #908C88;          /* ink-300 — muted / meta */
  --cea-faint: #B0AAA3;          /* ink-200 — faint / placeholder */

  /* Lines */
  --cea-line: #ECE8E3;           /* default card / divider border */
  --cea-line-soft: #F0ECE7;      /* inner hairline */
  --cea-line-strong: #E0DAD3;    /* input / outline button border */

  /* Dark surfaces — footer, stat bands, auth panels */
  --cea-footer-bg: #1A1512;
  --cea-footer-bg-2: #3A211F;    /* gradient partner (auth panels) */
  --cea-footer-text: #C9C0B8;    /* on-dark-soft — footer body copy */
  --cea-footer-text-muted: #9C948C; /* on-dark-muted — footer links/labels */
  --cea-footer-text-faint: #7C756E; /* on-dark-faint — footer eyebrows */

  /* Neutral tag pill (e.g. "LISTING ID · CEA-00042") — deliberately NOT
     red-tinted; this is an identifier, not an accent. */
  --cea-tag-bg: #F1EDE8;
  --cea-tag-text: #5F5B57;

  /* Semantic status — kept independent of the brand-red decision above,
     same reasoning as every prior pass this session: success/error
     colors are a UI convention, not a branding choice. */
  --cea-evergreen-700: #2E7D46;  /* success text (e.g. "Live" badge, verified) */
  --cea-evergreen-tint: #EAF3EC; /* success tint background */
  /* Repurposed as "a very dark neutral for contrast-critical text" (e.g.
     on the WhatsApp button) now that green is a semantic-only color —
     no longer a real "evergreen" hue, name kept so existing references
     don't need hunting down individually. */
  --cea-evergreen: #1C1B1A;
  --cea-whatsapp: #25D366;       /* real WhatsApp brand green — unchanged */
  --cea-star: #F6A609;           /* rating stars */
  --cea-brass: #A98A5B;          /* helper/annotation text (was #A8874E) */

  /* Dark neutral — footer/dark-panel background (matches --cea-footer-bg)
     and its light-neutral tint counterpart. A few selectors that were
     using this pairing to mean "red well" instead have been fixed
     individually to reference --cea-brand-red / --cea-red-tint directly. */
  --cea-warm-dark: #1A1512;
  --cea-warm-dark-tint: #F1EDE8;

  /* Type scale — Playfair Display replaces Newsreader for all display/
     heading roles (see cea_redesign_enqueue_assets() in functions.php);
     Plus Jakarta Sans is unchanged for body/UI. Sizes kept as before —
     this redesign changes the typeface and color system, not the scale. */
  --cea-text-2xs: 11px;  /* eyebrows, uppercase labels, tiny badges */
  --cea-text-xs: 12px;   /* meta text, hints, spec labels */
  --cea-text-sm: 13px;   /* small UI text — buttons, chips, captions */
  --cea-text-base: 14px; /* inputs, nav, default UI text */
  --cea-text-md: 15px;   /* body copy, descriptions */
  --cea-text-lg: 17px;   /* card/row titles, small headings */
  --cea-text-xl: 19px;   /* property card titles */
  --cea-text-2xl: 22px;  /* section headings */
  --cea-text-3xl: 30px;  /* listing detail title */
  --cea-text-4xl: 32px;  /* page-level heading, price, dashboard stat numbers */
  --cea-text-5xl: 44px;  /* hero stat numbers (Home/About) */

  /* Spacing */
  --cea-space-1: 4px;
  --cea-content-width: 1200px;
  --cea-gutter: 24px;
  --cea-section-padding: 64px;

  /* Radius — per the new design's spec (buttons/inputs 9px, panels/
     thumbnails 12px, cards 16px, feature frames 22px, chips fully pill). */
  --cea-radius-control: 9px;
  --cea-radius-md: 12px;
  --cea-radius-card: 16px;
  --cea-radius-lg: 22px;
  --cea-radius-pill: 999px;

  /* Elevation scale — soft, warm, low-spread per the new spec (never
     harsh black); consolidated to one rgba tint at three elevations,
     referenced everywhere below instead of inline rgba() literals. */
  --cea-shadow-sm: 0 3px 18px rgba(20, 20, 20, .05);
  --cea-shadow-md: 0 10px 30px rgba(20, 20, 20, .08);
  --cea-shadow-lg: 0 18px 40px rgba(20, 20, 20, .12);
}

/*
 * Global heading fix — root cause, not a per-component patch. Elementor's
 * Kit CSS (post-13.css, auto-regenerated by Elementor itself, enqueued on
 * every page even where no Elementor content renders) ships
 * `.elementor-kit-13 h1{color:...;font-family:...;font-size:...;
 * font-weight:...;line-height:...;letter-spacing:...}` for every level
 * h1-h6. That's a genuine compound selector (one class + one element,
 * specificity 0-1-1) — NOT a bare `h1{}` as an earlier version of this
 * comment assumed. It ties or beats any single-class heading rule in this
 * file (0-1-0), and post-13.css loads AFTER redesign.css in <head>, so on
 * a specificity tie Elementor's later rule wins the cascade. Confirmed
 * live: the Home hero H1 was rendering in Elementor's kit font (Roboto)
 * and the About page's dark-band H1 was rendering in Elementor's kit red
 * (#C70509) on a dark background — nearly invisible. Fixed at the root
 * with !important here (sets the sitewide default for every heading) AND
 * on every per-component heading rule below that needs to differ from
 * this default (white-on-dark bands, section heads, etc.) — both use
 * !important, so between two !important rules of equal specificity the
 * one later in this file's source order still wins, giving the expected
 * cascade: this default, then the more specific per-component look.
 */
body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: 'Playfair Display', serif !important;
  color: var(--cea-ink) !important;
}

/*
 * Header — full custom rebuild, 2026-08-14 redesign. inc/site-header.php
 * renders the real header via `wp_body_open`; the old Elementor Theme
 * Builder header template (post 8323) still renders too (untouched, not
 * deleted) but is hidden here rather than unhooking ElementsKit's own
 * render pipeline — lower risk than fighting its internal hook system.
 */
.ekit-template-content-header { display: none !important; }

.cea-site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cea-line);
}

.cea-site-header__inner {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cea-site-header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
}
/* Logo is a single image (icon + "CHUGHTAI / ESTATE ADVISOR" wordmark
   already baked in) -- sized tall enough that the wordmark stays
   legible, not squeezed into an icon-sized box. */
.cea-site-header__logo { height: 56px; width: auto; display: block; }

.cea-site-header__nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
}
.cea-site-header__nav a {
  color: var(--cea-ink-strong) !important;
  text-decoration: none !important;
}
.cea-site-header__nav a:hover { color: var(--cea-brand-red) !important; }

.cea-site-header__actions { display: flex; align-items: center; gap: 12px; }

.cea-site-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cea-radius-control);
  padding: 9px 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all .15s;
}
.cea-site-header__btn--outline {
  background: #fff;
  color: var(--cea-ink) !important;
  border: 1px solid var(--cea-line-strong);
}
.cea-site-header__btn--outline:hover { border-color: var(--cea-brand-red); color: var(--cea-brand-red) !important; }
.cea-site-header__btn--primary {
  background: var(--cea-brand-red);
  color: #fff !important;
  border: none;
  padding: 9px 20px;
}
.cea-site-header__btn--primary:hover { background: var(--cea-red-deep); }

.cea-site-header__login {
  color: var(--cea-ink) !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
}
.cea-site-header__login:hover { color: var(--cea-brand-red) !important; }

.cea-site-header__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--cea-line);
  /* !important: this is a <button>, so Elementor's global kit-CSS button
     reset (background-color: the old pre-rebrand red, #C70509) otherwise
     wins over this plain declaration -- the same recurring pattern behind
     nearly every other button/heading fix this session. Was invisible
     before because that collision's red happened to look intentional. */
  background: var(--cea-bone) !important;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}
.cea-site-header__avatar:hover { border-color: var(--cea-brand-red); }
.cea-site-header__avatar img { width: 100%; height: 100%; object-fit: cover; }
/* Brand-red backdrop only for the no-photo icon fallback -- a real uploaded
   photo (often a PNG with transparent edges) used to sit on this same red
   background, bleeding through and making the photo hard to see. */
.cea-site-header__avatar--icon { background: var(--cea-brand-red) !important; }
.cea-site-header__avatar-icon { display: flex; color: #fff; }

@media (max-width: 900px) {
  .cea-site-header__nav { display: none; }
}

/*
 * Footer — full custom rebuild, 2026-08-14 redesign. inc/site-footer.php
 * renders the real footer via `get_footer` (right after the newsletter
 * band, same hook); the old Elementor Theme Builder footer template
 * (post 8333) still renders too but is hidden, same "hide, don't delete"
 * approach as the header.
 */
.ekit-template-content-footer { display: none !important; }

.cea-site-footer {
  background: var(--cea-footer-bg);
  padding: 56px 24px 30px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cea-site-footer__grid {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}

.cea-site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  margin-bottom: 16px;
}
/* Single-image lockup (icon + wordmark baked in, white-text export for
   this dark background) -- same approach as the header logo. */
.cea-site-footer__logo { height: 72px; width: auto; display: block; }

.cea-site-footer__desc {
  color: var(--cea-footer-text-muted);
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 300px;
}
.cea-site-footer__desc strong { color: var(--cea-footer-text); }

.cea-site-footer__socials { display: flex; gap: 10px; }
.cea-site-footer__socials a {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cea-footer-text) !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: all .15s;
}
.cea-site-footer__socials a:hover { background: var(--cea-brand-red); color: #fff !important; }

.cea-site-footer__heading {
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 16px;
}

.cea-site-footer__col { display: flex; flex-direction: column; gap: 11px; }
.cea-site-footer__col a {
  color: var(--cea-footer-text-muted) !important;
  font-size: 13.5px;
  text-decoration: none !important;
  transition: color .15s;
}
.cea-site-footer__col a:hover { color: var(--cea-brand-red) !important; }

.cea-site-footer__contact { color: var(--cea-footer-text); font-size: 14px; margin-bottom: 6px; }
.cea-site-footer__contact--sm { font-size: 13.5px; line-height: 1.5; }
.cea-site-footer__label {
  color: var(--cea-footer-text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 18px 0 6px;
}
.cea-site-footer__label:first-of-type { margin-top: 0; }

.cea-site-footer__bottom {
  max-width: var(--cea-content-width);
  margin: 34px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--cea-footer-text-faint);
  font-size: 12.5px;
}
.cea-site-footer__legal { display: flex; gap: 20px; }
.cea-site-footer__legal a { color: var(--cea-footer-text-faint) !important; text-decoration: none !important; }
.cea-site-footer__legal a:hover { color: var(--cea-brand-red) !important; }

@media (max-width: 900px) {
  .cea-site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cea-site-footer__grid { grid-template-columns: 1fr; }
}

/*
 * Property card grid — docs/redesign-strategy.md §5, §6.
 * Renders the [cea_listing_grid] shortcode (inc/listing-grid.php), built
 * without Elementor Pro since the Loop Grid widget is silently blocked by
 * the nulled license's empty feature list. Matches docs/design/PropCard.dc.html.
 */
.cea-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: 24px;
}

@media (max-width: 1000px) {
  .cea-listing-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .cea-listing-grid { grid-template-columns: 1fr; }
}

.cea-card {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--cea-shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  text-decoration: none;
}

.cea-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cea-shadow-lg);
  border-color: var(--cea-line-strong);
}

.cea-card__media {
  position: relative;
  display: block;
  height: 210px;
  background-color: var(--cea-bone);
  background-size: cover;
  background-position: center;
  text-decoration: none;
}

.cea-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,.72) 100%);
  pointer-events: none;
}

.cea-card__type {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .92;
}

.cea-card__badge {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
  background: #fff;
  color: var(--cea-brand-red);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: var(--cea-text-xs);
  letter-spacing: .02em;
  padding: 5px 12px;
  border-radius: var(--cea-radius-pill);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.cea-card__price {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  color: #fff !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}

.cea-card__body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.cea-card a.cea-card__title,
.cea-card a.cea-card__title:link,
.cea-card a.cea-card__title:visited {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-xl) !important;
  line-height: 1.3 !important;
  letter-spacing: -.015em !important;
  color: var(--cea-ink) !important;
  text-decoration: none;
  min-height: 46px;
  display: block;
}

.cea-card a.cea-card__title:hover {
  color: var(--cea-brand-red) !important;
}

.cea-card__loc {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cea-muted);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--cea-text-sm);
}

.cea-card__loc svg { color: var(--cea-brand-red); flex-shrink: 0; }

.cea-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid var(--cea-line);
  margin-top: 2px;
  color: var(--cea-slate);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--cea-text-sm);
  font-weight: 600;
}

.cea-card__specs span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.cea-card__specs svg { color: var(--cea-muted); flex-shrink: 0; }

.cea-card__specs-label {
  color: var(--cea-muted);
  font-weight: 500;
}

/* No special positioning -- flows as just another spec chip alongside
   beds/baths/kitchens, wrapping naturally with them. (A forced
   right-aligned own-line treatment was tried here, but it left the
   size badge looking orphaned, floating alone with nothing tying it
   to the specs above. Button alignment doesn't depend on this at all
   -- that's handled independently via margin-top:auto on the CTA. */

.cea-card a.cea-card__cta,
.cea-card a.cea-card__cta:link,
.cea-card a.cea-card__cta:visited {
  margin-top: auto;
  align-self: flex-start;
  background: var(--cea-brand-red);
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: var(--cea-text-sm);
  padding: 9px 18px;
  border-radius: var(--cea-radius-control);
  text-decoration: none;
  transition: background .15s;
}

.cea-card a.cea-card__cta:hover { background: var(--cea-red-deep); color: #fff !important; }

.cea-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 44px;
}

.cea-pagination a.cea-pagination__link,
.cea-pagination a.cea-pagination__link:link,
.cea-pagination a.cea-pagination__link:visited {
  border: 1px solid var(--cea-line);
  background: #fff;
  color: var(--cea-slate) !important;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--cea-radius-control);
  font-weight: 600;
  font-size: var(--cea-text-base);
  text-decoration: none;
}

.cea-pagination a.cea-pagination__link:hover {
  color: var(--cea-brand-red) !important;
  border-color: var(--cea-brand-red);
}

.cea-pagination a.cea-pagination__link--active,
.cea-pagination a.cea-pagination__link--active:link,
.cea-pagination a.cea-pagination__link--active:visited,
.cea-pagination a.cea-pagination__link--active:hover {
  border: none;
  background: var(--cea-brand-red);
  color: #fff !important;
  font-weight: 700;
}

/*
 * Listings search bar — keyword + price range, reflected in the URL
 * (cea_q / cea_price_min / cea_price_max) alongside the filter chips below.
 * Plain GET form, no JS required to work.
 */
.cea-listing-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.cea-listing-search__input {
  flex: 3;
  min-width: 220px;
}

.cea-listing-search__price {
  flex: 1;
  min-width: 130px;
}

.cea-listing-search__input,
.cea-listing-search__price {
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-control);
  padding: 12px 14px;
  font-size: var(--cea-text-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--cea-ink);
  background: #fff;
}

.cea-listing-search__input:focus,
.cea-listing-search__price:focus {
  outline: none;
  border-color: var(--cea-brand-red);
  box-shadow: 0 0 0 3px rgba(199, 5, 9, .1);
}

.cea-listing-search__btn {
  flex-shrink: 0;
  background: var(--cea-brand-red);
  color: #fff;
  border: none;
  border-radius: var(--cea-radius-control);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: var(--cea-text-base);
  padding: 12px 28px;
  cursor: pointer;
  transition: background .15s;
}
.cea-listing-search__btn:hover { background: var(--cea-red-deep); }

@media (max-width: 600px) {
  .cea-listing-search__input,
  .cea-listing-search__price,
  .cea-listing-search__btn { flex: 1 1 100%; }
}

/*
 * Listings filter bar — category chips + sort, docs/redesign-strategy.md
 * roadmap item 7. Renders inside [cea_listing_grid], reflected in the URL
 * (cea_cat / cea_sort / cea_page) so every filtered view stays linkable
 * and crawlable — plain <a>/<form method="get">, no JS required to work.
 */
.cea-listing-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.cea-listing-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

a.cea-chip, a.cea-chip:link, a.cea-chip:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  border-radius: var(--cea-radius-pill);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: var(--cea-text-sm);
  padding: 9px 16px;
  transition: all .15s;
  border: 1.5px solid var(--cea-line);
  background: #fff;
  color: var(--cea-slate) !important;
  text-decoration: none !important;
}
a.cea-chip:hover { border-color: var(--cea-brand-red); color: var(--cea-brand-red) !important; }

a.cea-chip--active, a.cea-chip--active:link, a.cea-chip--active:visited, a.cea-chip--active:hover {
  border-color: var(--cea-brand-red);
  background: var(--cea-brand-red);
  color: #fff !important;
}

.cea-chip__count {
  font-size: 12px;
  opacity: .75;
}

.cea-listing-filters__meta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cea-listing-filters__count {
  color: var(--cea-muted);
  font-size: var(--cea-text-base);
  font-weight: 600;
  white-space: nowrap;
}

.cea-listing-filters__reset,
.cea-listing-filters__reset:link,
.cea-listing-filters__reset:visited {
  color: var(--cea-brand-red) !important;
  font-size: var(--cea-text-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.cea-listing-filters__reset:hover { text-decoration: underline; }

.cea-listing-grid__empty {
  text-align: center;
  padding: 64px 24px;
  background: var(--cea-bone);
  border: 1px dashed var(--cea-line);
  border-radius: var(--cea-radius-card);
  color: var(--cea-slate);
}
.cea-listing-grid__empty p { margin: 0 0 6px; }
.cea-listing-grid__empty-reset { width: auto !important; display: inline-flex !important; margin: 16px auto 0; padding: 11px 28px; }

.cea-listing-filters__sort select {
  border: 1px solid var(--cea-line) !important;
  border-radius: var(--cea-radius-control);
  padding: 10px 14px;
  font-size: var(--cea-text-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--cea-slate) !important;
  background: #fff !important;
  cursor: pointer;
}
.cea-listing-filters__sort select:focus {
  outline: none;
  border-color: var(--cea-brand-red) !important;
  box-shadow: 0 0 0 3px rgba(199, 5, 9, .1);
}

@media (max-width: 600px) {
  .cea-listing-filters { flex-direction: column; align-items: flex-start; }
  .cea-listing-filters__meta { width: 100%; justify-content: space-between; }
}

/*
 * Listing detail page — docs/redesign-strategy.md §5.2.
 * Renders wordpress/wp-content/themes/kadence-child/single-listing.php.
 */
.cea-listing-detail {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  padding: 26px 24px 80px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cea-listing-detail__breadcrumb {
  color: var(--cea-muted);
  font-size: var(--cea-text-sm);
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
}

.cea-listing-detail__breadcrumb a {
  color: var(--cea-brand-red) !important;
  text-decoration: none;
}

.cea-listing-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.cea-listing-detail__id {
  display: inline-block;
  background: var(--cea-tag-bg);
  color: var(--cea-tag-text);
  font-weight: 700;
  font-size: var(--cea-text-2xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--cea-radius-pill);
  margin-bottom: 12px;
}

/* Kept as an explicit (now-redundant) override — the sitewide `body h1,
   h2, h3, h4 { color: var(--cea-ink) }` rule near the top of this file
   already fixes this, this predates that fix and is harmless left in
   place. */
.cea-listing-detail__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-3xl) !important;
  line-height: 1.2 !important;
  margin: 0;
  max-width: 640px;
  color: var(--cea-ink) !important;
}

.cea-listing-detail__address {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cea-muted);
  font-size: var(--cea-text-base);
  margin-top: 10px;
}

.cea-listing-detail__address svg { color: var(--cea-brand-red); flex-shrink: 0; }

.cea-listing-detail__price-block {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cea-listing-detail__price-label {
  color: var(--cea-muted);
  font-size: var(--cea-text-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* "Important number" emphasis — ink, same role as stat numbers and
   dashboard counts below. It's already the largest, boldest, most serif
   element on the page — size and weight carry the emphasis, not color;
   red stays reserved for buttons/badges/links. */
.cea-listing-detail__price {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-4xl) !important;
  color: var(--cea-ink) !important;
}

.cea-listing-detail__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
}

@media (max-width: 1000px) {
  .cea-listing-detail__grid { grid-template-columns: 1fr; }
}

/* Gallery: real click-to-swap thumbnails, prev/next arrows, and a
   full-screen lightbox (inc/listing-gallery.js). The old markup had
   data-full attributes ready for this but no JS ever wired them up. */
.cea-gallery { min-width: 0; }

.cea-gallery__hero {
  position: relative;
  height: 440px;
  border-radius: var(--cea-radius-card);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--cea-shadow-md);
  cursor: pointer;
}

.cea-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(28, 27, 26, .55) !important;
  border: none !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.cea-gallery__nav:hover { background: rgba(28, 27, 26, .8) !important; }
.cea-gallery__nav--prev { left: 16px; }
.cea-gallery__nav--next { right: 16px; }

.cea-gallery__count {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: rgba(28, 27, 26, .65);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--cea-radius-pill);
}

.cea-gallery__expand {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(28, 27, 26, .55) !important;
  border: none !important;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.cea-gallery__expand:hover { background: rgba(28, 27, 26, .8) !important; }

.cea-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.cea-gallery__thumb {
  position: relative;
  height: 76px;
  border-radius: var(--cea-radius-md);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  outline: 3px solid transparent;
  transition: outline .15s;
}

.cea-gallery__thumb:hover,
.cea-gallery__thumb--active {
  outline: 3px solid var(--cea-brand-red);
}

.cea-gallery__thumb-more {
  position: absolute;
  inset: 0;
  background: rgba(28, 27, 26, .6);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--cea-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Lightbox */
.cea-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10, 9, 8, .94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cea-lightbox[aria-hidden="true"] { display: none; }
.cea-lightbox__img { max-width: 88vw; max-height: 84vh; object-fit: contain; border-radius: 6px; }
.cea-lightbox__close,
.cea-lightbox__nav {
  position: absolute;
  background: rgba(255, 255, 255, .08) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.cea-lightbox__close:hover,
.cea-lightbox__nav:hover { background: rgba(255, 255, 255, .18) !important; }
.cea-lightbox__close { top: 24px; right: 24px; width: 44px; height: 44px; }
.cea-lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.cea-lightbox__nav--prev { left: 20px; }
.cea-lightbox__nav--next { right: 20px; }
.cea-lightbox__count {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--cea-footer-text);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 640px) {
  .cea-gallery__hero { height: 280px; }
  .cea-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .cea-lightbox__nav { width: 40px; height: 40px; }
}

/* Kept as an explicit (now-redundant) override — see note on
   .cea-listing-detail__title above. */
.cea-listing-detail__section-heading {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-2xl) !important;
  margin: 34px 0 18px;
  color: var(--cea-ink) !important;
}

.cea-listing-detail__specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
}

.cea-listing-detail__spec {
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-md);
  padding: 14px 16px;
  background: var(--cea-surface);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cea-listing-detail__spec-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--cea-red-tint);
  color: var(--cea-brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cea-listing-detail__spec-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.cea-listing-detail__spec-label {
  color: var(--cea-muted);
  font-size: var(--cea-text-xs);
}

.cea-listing-detail__spec-val {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-md) !important;
  color: var(--cea-ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cea-listing-detail__amenities {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px 16px;
}
.cea-listing-detail__amenity {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--cea-text-sm);
  color: var(--cea-ink);
}
.cea-listing-detail__amenity-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cea-red-tint);
  color: var(--cea-brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cea-listing-detail__overview {
  color: var(--cea-body);
  font-size: var(--cea-text-md);
  line-height: 1.75;
}

.cea-listing-detail__sidebar { min-width: 0; }

@media (min-width: 1001px) {
  .cea-listing-detail__sidebar {
    position: sticky;
    top: 94px;
    align-self: flex-start;
  }
}

.cea-listing-detail__agent-card,
.cea-listing-detail__callback-card {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  padding: 24px;
  margin-bottom: 18px;
}

.cea-listing-detail__agent-card { box-shadow: var(--cea-shadow-md); }

.cea-listing-detail__agent-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
}

.cea-listing-detail__agent-name {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-md) !important;
  color: var(--cea-ink) !important;
}

.cea-listing-detail__agent-badge { color: var(--cea-muted); font-size: var(--cea-text-xs); }

.cea-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-weight: 700;
  font-size: var(--cea-text-md);
  padding: 13px;
  border-radius: var(--cea-radius-control) !important;
  margin-bottom: 10px;
  text-decoration: none !important;
  box-sizing: border-box;
  border: none !important;
  cursor: pointer;
}

/* "Dark" secondary button — moved off evergreen to the warm-dark neutral
   (a strong secondary action, not the site's one-off brand-green). */
.cea-btn--dark { background: var(--cea-warm-dark); color: #fff !important; }
.cea-btn--dark:hover { background: #262319; }
/* Dark text, not white — white-on-#25D366 is only 1.98:1, badly failing WCAG
   AA even for large text/UI (needs 3:1). --cea-evergreen on this green is
   7.70:1 and is kept here deliberately: this is the fixed WhatsApp brand
   green, not a theme color, so it doesn't follow the warm-dark migration
   above. */
.cea-btn--whatsapp { background: var(--cea-whatsapp); color: var(--cea-evergreen) !important; }
.cea-btn--outline { background: #fff; color: var(--cea-ink) !important; border: 1.5px solid var(--cea-line); }
.cea-btn--primary { background: var(--cea-brand-red); color: #fff !important; margin-bottom: 0; }
.cea-btn--primary:hover { background: var(--cea-red-deep); }

/* Kept as an explicit (now-redundant) override — see note on
   .cea-listing-detail__title above. */
.cea-listing-detail__callback-card h3 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-lg) !important;
  margin: 0 0 4px;
  color: var(--cea-ink) !important;
}

.cea-listing-detail__callback-card p {
  color: var(--cea-muted);
  font-size: var(--cea-text-sm);
  margin: 0 0 16px;
}

.cea-callback-form { display: flex; flex-direction: column; gap: 10px; }
.cea-callback-form__honeypot { position: absolute; left: -9999px; }

.cea-callback-form input,
.cea-callback-form textarea {
  border: 1px solid var(--cea-line) !important;
  border-radius: var(--cea-radius-control);
  padding: 12px 14px;
  font-size: var(--cea-text-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
}

.cea-callback-form input:focus,
.cea-callback-form textarea:focus {
  border-color: var(--cea-brand-red) !important;
}

/* Status text: success/error are semantic conventions (green/red), kept
   independent of the brand-accent question this whole pass is about. */
.cea-callback-form__status { font-size: var(--cea-text-sm); margin: 8px 0 0; min-height: 1em; }
.cea-callback-form__status--ok { color: var(--cea-evergreen-700); }
.cea-callback-form__status--error { color: var(--cea-brand-red); }

.cea-listing-detail__similar-heading { margin-top: 56px; }

/*
 * Shared dynamic stats block — docs/redesign-strategy.md §4.5/§4.6.
 * Renders [cea_stats] (inc/stats.php). Used on Home + About so the
 * figures can never disagree between pages.
 */
.cea-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  text-align: center;
  max-width: var(--cea-content-width);
  margin: 0 auto;
  padding: 56px 24px;
}

.cea-stats__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cea-stats__num {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-5xl) !important;
  color: var(--cea-ink) !important;
  line-height: 1 !important;
}

.cea-stats__label {
  color: var(--cea-slate);
  font-weight: 600;
  font-size: var(--cea-text-md);
}

/*
 * Sitewide polish pass — docs/redesign-strategy.md §4.4.
 * The Envato template's Elementor widgets (call-to-action / icon-box /
 * image-box cards used across Home, About, etc.) still carry the old
 * 5px corner radius and flat, shadow-less styling instead of the design
 * system's card language. Global overrides here bring every card-like
 * widget in line without hand-editing each one's Elementor settings —
 * consistent with how color/type already cascade from the Kit.
 */
.elementor-widget-call-to-action .elementor-cta,
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-image-box .elementor-image-box-wrapper {
  border-radius: var(--cea-radius-card) !important;
  overflow: hidden;
}

.elementor-widget-call-to-action .elementor-cta {
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--cea-shadow-sm);
}

.elementor-widget-call-to-action .elementor-cta:hover {
  transform: translateY(-4px);
  box-shadow: var(--cea-shadow-lg);
}

.elementor-widget-icon-box .elementor-icon-box-wrapper {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  padding: 8px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
  box-shadow: var(--cea-shadow-md);
  transform: translateY(-3px);
}

.elementor-widget-icon-box .elementor-icon-box-icon .elementor-icon {
  background: var(--cea-red-tint) !important;
  color: var(--cea-brand-red) !important;
  border-radius: var(--cea-radius-control);
}

/* Team photo missing in the source data (see git history) — a plain
   warm-neutral placeholder reads better than a broken image icon. */
.elementor-widget-image-box .elementor-image-box-img img[src=""],
.elementor-widget-image-box .elementor-image-box-img:empty {
  background: var(--cea-tag-bg);
  min-height: 220px;
  display: block;
}

/* Buttons sitewide: match the design system's 10px control radius
   instead of each widget's own default. */
.elementor-button,
.elementor-widget-call-to-action .elementor-button {
  border-radius: var(--cea-radius-control) !important;
}

/* Blog archive — Elementor's free Posts widget (.elementor-post). */
.elementor-post {
  border-radius: var(--cea-radius-card) !important;
  overflow: hidden;
  border: 1px solid var(--cea-line);
  box-shadow: var(--cea-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}

.elementor-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--cea-shadow-lg);
}

.elementor-post__title a { color: var(--cea-ink) !important; }
.elementor-post__title a:hover { color: var(--cea-brand-red) !important; }

/* Card content height fix — found via screenshot review 2026-08-13. The
   grid already gives every card in a row equal height, but .elementor-
   post__meta-data (the date) is a sibling of .elementor-post__text rather
   than pinned to the card's bottom, so shorter excerpts left a large dead
   gap above the date instead of a consistent card silhouette. */
.elementor-post__card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.elementor-post__meta-data { margin-top: auto; padding-top: 10px; }

/* Excerpt removed from cards per request — title + image + date is enough
   for a scannable archive grid, and it further reduces the card-height
   variance the fix above already deals with. */
.elementor-post__excerpt { display: none; }

/* Category badge — repositioned bottom-left instead of the default
   top-left, which was landing directly on top of baked-in title text on
   some featured images (e.g. the "Best Investment Areas" thumbnail),
   making both unreadable. Bottom-left avoids that collision and reads
   clearly against the existing bottom gradient card treatment. */
.elementor-post__badge {
  top: auto !important;
  bottom: 12px;
  left: 12px;
  right: auto !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

/* ─────────────────────────────────────────────────────────────────────────
   Ultimate Member — Login / Register / Password Reset / Account / Members
   Plugin ships its own class framework (.um / .um-field / .um-button); we
   restyle those classes in place rather than touch its templates, so a
   plugin update can't silently drop a rebuilt page.
   ───────────────────────────────────────────────────────────────────────── */

.um { font-family: 'Plus Jakarta Sans', sans-serif !important; color: var(--cea-body); }

/* Auth cards (Login/Register/Password Reset): centered card, like every
   other surface in the redesign (§ radius-card token). */
.um-login, .um-register, .um-password {
  max-width: 460px;
  margin: 40px auto !important;
  padding: 36px 32px !important;
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card) !important;
  box-shadow: var(--cea-shadow-md);
}

.um-field-label label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--cea-slate) !important;
  font-size: var(--cea-text-base) !important;
}
.um-req { color: var(--cea-brand-red) !important; }

.um-form-field,
.um-field-area input[type="text"],
.um-field-area input[type="password"],
.um-field-area input[type="email"],
.um-field-area select,
.um-field-area textarea {
  border-radius: var(--cea-radius-control) !important;
  border: 2px solid var(--cea-line) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  transition: border-color .2s, box-shadow .2s;
}
.um-form-field:focus,
.um-field-area input:focus,
.um-field-area select:focus,
.um-field-area textarea:focus {
  border-color: var(--cea-brand-red) !important;
  box-shadow: 0 0 0 4px rgba(199, 5, 9, .1) !important;
  outline: none !important;
}

.um-button, button.um-button, input.um-button {
  background: var(--cea-brand-red) !important;
  border-color: var(--cea-brand-red) !important;
  color: #fff !important;
  border-radius: var(--cea-radius-control) !important;
  font-weight: 700 !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background .2s;
}
.um-button:hover, button.um-button:hover, input.um-button:hover {
  background: var(--cea-red-deep) !important;
  border-color: var(--cea-red-deep) !important;
}
/* Outline-button convention per the new design: default ink text, hover
   goes red border + red text — same pattern as every other outline
   button (e.g. header "Add Property"), not a dark-neutral hover. */
.um-button.um-alt {
  background: transparent !important;
  color: var(--cea-ink) !important;
  border: 1.5px solid var(--cea-line-strong) !important;
}
.um-button.um-alt:hover {
  background: var(--cea-red-tint) !important;
  border-color: var(--cea-brand-red) !important;
  color: var(--cea-brand-red) !important;
}

/* :not(.um-button) -- otherwise this beats .um-button's own white text color on
   specificity (.um a is 0,1,1 vs .um-button's 0,1,0), turning button labels
   like Account's "Upload" link invisible (red text on red background). */
.um a:not(.um-button), .um .um-link-alt, .um .um-link { color: var(--cea-brand-red) !important; }
.um a:not(.um-button):hover, .um .um-link-alt:hover, .um .um-link:hover { color: var(--cea-red-deep) !important; }

/*
 * Account page — full structural pass, 2026-08-13. Was "lighter touch"
 * (colors/radii only) before; now a proper card layout: profile header
 * with a larger avatar, sidebar tab nav, and a distinct content card,
 * matching the rest of the site's surfaces instead of UM's bare default
 * layout.
 */
.um-account {
  max-width: var(--cea-content-width);
  margin: 40px auto 80px !important;
  padding: 0 24px;
}

/* Profile header: avatar + name card at the top of every account tab. */
.um-account-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card) !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  box-shadow: var(--cea-shadow-sm);
}
.um-account-meta-img img.um-avatar {
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  border: 3px solid var(--cea-surface);
  box-shadow: 0 0 0 2px var(--cea-line);
  object-fit: cover;
}
.um-account-name {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-2xl) !important;
  color: var(--cea-ink) !important;
}
.um-account-title { color: var(--cea-muted) !important; font-size: var(--cea-text-sm) !important; }

/* Two-column layout: sidebar tab nav + main content card. */
.um-account-side {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card) !important;
  padding: 10px !important;
  box-shadow: var(--cea-shadow-sm);
}
.um-account-nav .um-account-link {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 14px !important;
  border-radius: var(--cea-radius-control);
  color: var(--cea-slate) !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-base) !important;
  text-decoration: none !important;
  transition: background .15s;
}
.um-account-nav .um-account-link:hover { background: var(--cea-bone); }
.um-account-nav .um-account-link.current,
.um-account-nav li.current a,
.um-account-side .active a {
  background: var(--cea-brand-red) !important;
  color: #fff !important;
}

.um-account-main {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card) !important;
  padding: 28px !important;
  box-shadow: var(--cea-shadow-sm);
}

.um-account-tab .um-field-label label {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  color: var(--cea-slate) !important;
}

.um-account-tab .um-button, .um-members-header .um-button { border-radius: var(--cea-radius-control) !important; }

/* Members directory cards — kept lighter touch, page has its own grid. */
.um-member-card, .um-members-list .um-member {
  border-radius: var(--cea-radius-card) !important;
  border: 1px solid var(--cea-line) !important;
}

@media (max-width: 600px) {
  .um-login, .um-register, .um-password { margin: 16px !important; padding: 24px 20px !important; }
  .um-account-meta { flex-direction: column; text-align: center; }
  .um-account-main, .um-account-side { padding: 18px !important; }
}
.elementor-post__read-more { color: var(--cea-brand-red) !important; font-weight: 700; }

/*
 * User Dashboard — [cea_dashboard], inc/user-dashboard.php.
 */
.cea-dash {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  padding: 40px 24px 80px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cea-dash__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.cea-dash__eyebrow {
  display: block;
  color: var(--cea-brand-red);
  font-weight: 700;
  font-size: var(--cea-text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cea-dash__welcome h1 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-4xl) !important;
  margin: 0;
  color: var(--cea-ink) !important;
}

.cea-dash__cta { width: auto !important; padding: 13px 26px; }

.cea-dash__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 40px;
}

.cea-dash__stat {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  padding: 20px;
  text-align: center;
}

.cea-dash__stat-num {
  display: block;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-4xl) !important;
  color: var(--cea-ink) !important;
  line-height: 1.1 !important;
}

.cea-dash__stat-label {
  color: var(--cea-slate);
  font-weight: 600;
  font-size: var(--cea-text-sm);
}

.cea-dash__section-title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-2xl) !important;
  margin: 0 0 18px;
  color: var(--cea-ink) !important;
}

.cea-dash__empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--cea-bone);
  border: 1px dashed var(--cea-line);
  border-radius: var(--cea-radius-card);
  color: var(--cea-slate);
}
.cea-dash__empty-cta { width: auto !important; display: inline-flex !important; margin-top: 16px; padding: 12px 28px; }
.cea-dash__empty--filtered { padding: 40px 24px; }

/* Listing status tabs -- filters the list below client-side, no reload.
   !important throughout: a native <button> element, so it's caught by
   Elementor's global kit CSS button-reset (background/border-radius on
   every button sitewide) the same way every other custom button on this
   site has been -- the established, recurring pattern this whole session. */
.cea-dash__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid var(--cea-line); padding-bottom: 0; }
.cea-dash__tab {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 2px solid transparent !important;
  padding: 10px 4px 12px !important;
  margin-right: 22px;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: var(--cea-text-sm) !important;
  font-weight: 600 !important;
  color: var(--cea-muted) !important;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cea-dash__tab:hover { color: var(--cea-ink) !important; }
.cea-dash__tab.active { color: var(--cea-brand-red) !important; border-bottom-color: var(--cea-brand-red) !important; }
.cea-dash__tab-count { color: inherit !important; opacity: .7; }

.cea-dash__list { display: flex; flex-direction: column; gap: 14px; }

.cea-dash__row {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  padding: 14px;
  transition: box-shadow .18s ease;
}
.cea-dash__row:hover { box-shadow: var(--cea-shadow-sm); }

.cea-dash__row-thumb {
  width: 88px;
  height: 66px;
  flex-shrink: 0;
  border-radius: var(--cea-radius-control);
  background: var(--cea-bone) center/cover no-repeat;
}

.cea-dash__row-body { flex: 1; min-width: 0; }

.cea-dash__row-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--cea-radius-pill);
  margin-bottom: 6px;
}
.cea-dash__row-status--publish { background: var(--cea-evergreen-tint); color: var(--cea-evergreen-700); }
.cea-dash__row-status--pending { background: #FDF3E0; color: var(--cea-brass); }
.cea-dash__row-status--draft { background: var(--cea-bone); color: var(--cea-muted); }

.cea-dash__row-title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-lg) !important;
  margin: 0 0 4px;
  color: var(--cea-ink) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cea-dash__row-meta { display: flex; flex-wrap: wrap; row-gap: 4px; gap: 14px; color: var(--cea-muted); font-size: var(--cea-text-sm); }

.cea-dash__row-actions { flex-shrink: 0; }
.cea-dash__row-btn { width: auto !important; padding: 9px 18px; font-size: var(--cea-text-sm); }
.cea-dash__row-note { color: var(--cea-muted); font-size: var(--cea-text-xs); font-style: italic; }

.cea-dash__footer-note {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--cea-line);
  color: var(--cea-muted);
  font-size: var(--cea-text-sm);
}
.cea-dash__footer-note a { color: var(--cea-brand-red) !important; text-decoration: none; }
.cea-dash__footer-note a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .cea-dash__row { flex-wrap: wrap; }
  .cea-dash__row-thumb { width: 72px; height: 56px; }
  .cea-dash__row-actions { width: 100%; }
  .cea-dash__row-btn { width: 100% !important; }
}

/*
 * chughtai-estate-automation plugin tools (.estate-tool family) — the
 * plugin's own assets/style.css imports Google Fonts "Inter" and uses a
 * purple/pink gradient (#667eea/#764ba2/#f093fb) with glassmorphism blur
 * — entirely off-brand, doesn't match anything else on the site.
 * Overriding here (loaded after the plugin's stylesheet) rather than
 * editing that 777-line file directly, which also styles 9 other unused
 * tool shortcodes — this only needs to cover the two currently-live ones
 * (Free Valuation, ROI Calculator; Property Comparison was replaced
 * outright, see property-comparison.php).
 */
.estate-tool {
  background: var(--cea-surface) !important;
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card) !important;
  box-shadow: var(--cea-shadow-md) !important;
  max-width: 720px;
  margin: 40px auto 80px !important;
  padding: 36px !important;
}
.estate-tool::before { background: var(--cea-brand-red) !important; }
.estate-tool:hover { transform: none !important; box-shadow: var(--cea-shadow-md) !important; }

.estate-tool h2 {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-4xl) !important;
  color: var(--cea-ink) !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}
.estate-tool > p { color: var(--cea-slate) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }

.estate-tool input,
.estate-tool select,
.estate-tool textarea {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  border: 1px solid var(--cea-line) !important;
  border-radius: var(--cea-radius-control) !important;
  color: var(--cea-ink) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.estate-tool input:focus,
.estate-tool select:focus,
.estate-tool textarea:focus {
  border-color: var(--cea-brand-red) !important;
  box-shadow: 0 0 0 3px rgba(199, 5, 9, .1) !important;
  outline: none !important;
}

.estate-tool .cta-btn,
.estate-tool .calc-btn,
.estate-tool button[type="submit"] {
  background: var(--cea-brand-red) !important;
  border: none !important;
  border-radius: var(--cea-radius-control) !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .15s;
}
.estate-tool .cta-btn:hover,
.estate-tool .calc-btn:hover,
.estate-tool button[type="submit"]:hover { background: var(--cea-red-deep) !important; }

.estate-tool .result-card {
  background: var(--cea-bone) !important;
  border: 1px solid var(--cea-line) !important;
  border-radius: var(--cea-radius-control) !important;
}
.estate-tool .result-card.highlight {
  background: var(--cea-surface) !important;
  border: 2px solid var(--cea-brand-red) !important;
}
.estate-tool .result-label { color: var(--cea-muted) !important; font-family: 'Plus Jakarta Sans', sans-serif !important; }
.estate-tool .result-value {
  color: var(--cea-ink) !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
}

.estate-tool .breakdown-table { width: 100%; border-collapse: collapse; font-family: 'Plus Jakarta Sans', sans-serif; }
.estate-tool .breakdown-table th,
.estate-tool .breakdown-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--cea-line);
  font-size: var(--cea-text-sm);
  color: var(--cea-ink);
  text-align: left;
}
.estate-tool .breakdown-table th { color: var(--cea-muted); font-weight: 600; }

.estate-tool #val-success {
  background: var(--cea-evergreen-tint) !important;
  color: var(--cea-evergreen-700) !important;
  border-radius: var(--cea-radius-control);
  padding: 14px;
  font-weight: 600;
}

/*
 * Compare Properties — [property_comparison], inc/property-comparison.php.
 */
.cea-compare {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  padding: 48px 24px 80px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cea-compare__intro { text-align: center; margin-bottom: 32px; }

.cea-compare__eyebrow {
  display: block;
  color: var(--cea-brand-red);
  font-weight: 700;
  font-size: var(--cea-text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cea-compare__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-4xl) !important;
  margin: 0 0 12px;
  color: var(--cea-ink) !important;
}

.cea-compare__lede { color: var(--cea-slate); font-size: var(--cea-text-md); max-width: 56ch; margin: 0 auto; }

.cea-compare-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  padding: 24px;
  box-shadow: var(--cea-shadow-sm);
  margin-bottom: 32px;
}

.cea-compare-picker__field { flex: 1 1 220px; min-width: 200px; }
.cea-compare-picker__field label {
  display: block;
  font-weight: 600 !important;
  font-size: var(--cea-text-sm);
  color: var(--cea-slate) !important;
  margin-bottom: 6px;
}
.cea-compare-picker__field select {
  width: 100%;
  border: 1px solid var(--cea-line) !important;
  border-radius: var(--cea-radius-control);
  padding: 12px 14px;
  font-size: var(--cea-text-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--cea-ink) !important;
  background: #fff !important;
  box-sizing: border-box;
}
.cea-compare-picker__submit { flex: 0 0 auto; width: auto !important; padding: 13px 28px; }

.cea-compare-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  background: var(--cea-surface);
  box-shadow: var(--cea-shadow-sm);
}

.cea-compare-table { width: 100%; border-collapse: collapse; min-width: 560px; }

.cea-compare-table th,
.cea-compare-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--cea-line);
  font-size: var(--cea-text-sm);
  vertical-align: top;
}

.cea-compare-table th {
  color: var(--cea-muted);
  font-weight: 600;
  width: 140px;
  white-space: nowrap;
}

.cea-compare-table tr:last-child th,
.cea-compare-table tr:last-child td { border-bottom: none; }

.cea-compare-table__photos td { text-align: center; }
.cea-compare-table__photo {
  display: block;
  height: 110px;
  border-radius: var(--cea-radius-control);
  background: var(--cea-bone) center/cover no-repeat;
  margin-bottom: 8px;
}
.cea-compare-table__name {
  display: block;
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-lg) !important;
  color: var(--cea-ink) !important;
  text-decoration: none;
}
.cea-compare-table__view { width: auto !important; padding: 9px 18px; font-size: var(--cea-text-sm); }

.cea-compare__empty { text-align: center; color: var(--cea-muted); padding: 24px; }

@media (max-width: 640px) {
  .cea-compare-picker { flex-direction: column; align-items: stretch; }
  .cea-compare-picker__submit { width: 100% !important; }
}

/*
 * Newsletter signup — inc/newsletter.php, injected via the `get_footer`
 * action so it sits between page content and the footer on every page.
 */
.cea-newsletter {
  background: var(--cea-warm-dark);
  padding: 40px 24px;
}

.cea-newsletter__inner {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.cea-newsletter__copy { flex: 1 1 340px; }

.cea-newsletter__eyebrow {
  display: block;
  color: #fff;
  opacity: .7;
  font-weight: 700;
  font-size: var(--cea-text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cea-newsletter__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-2xl) !important;
  color: #fff !important;
  margin: 0 0 8px;
}

.cea-newsletter__lede {
  color: var(--cea-footer-text);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--cea-text-sm);
  margin: 0;
  max-width: 48ch;
}

.cea-newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1 1 380px;
}

.cea-newsletter-form__honeypot { position: absolute; left: -9999px; }

.cea-newsletter-form__name,
.cea-newsletter-form__email {
  flex: 1 1 160px;
  border: none;
  border-radius: var(--cea-radius-control);
  padding: 12px 14px;
  font-size: var(--cea-text-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--cea-ink);
  background: #fff;
  box-sizing: border-box;
}
.cea-newsletter-form__name:focus,
.cea-newsletter-form__email:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(199, 5, 9, .35);
}

.cea-newsletter-form__submit { flex: 0 0 auto; width: auto !important; padding: 12px 26px; }

.cea-newsletter-form__status {
  max-width: var(--cea-content-width);
  margin: 12px auto 0;
  padding: 0 24px;
  font-size: var(--cea-text-sm);
  color: var(--cea-footer-text);
  text-align: right;
}
.cea-newsletter-form__status--ok { color: #fff; font-weight: 600; }
.cea-newsletter-form__status--error { color: #FCA5A5; font-weight: 600; }

@media (max-width: 700px) {
  .cea-newsletter-form__status { text-align: left; }
}

/*
 * Unsubscribe — [cea_unsubscribe], inc/newsletter.php.
 */
.cea-unsubscribe {
  max-width: 560px;
  margin: 60px auto;
  padding: 0 24px;
  text-align: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--cea-slate);
}
.cea-unsubscribe__title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 600 !important;
  font-size: var(--cea-text-2xl) !important;
  color: var(--cea-ink) !important;
  margin: 0 0 12px;
}

/*
 * Header avatar dropdown panel — inc/site-header.php renders the trigger
 * (.cea-site-header__avatar) directly now; this panel is shared with
 * that new header (the old Elementor-element-targeting rules this
 * section used to have are gone along with the Elementor header itself,
 * see the "Header" section near the top of this file).
 */
.cea-user-menu {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 240px;
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  box-shadow: var(--cea-shadow-lg);
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.cea-user-menu.cea-user-menu--open { display: block; }

.cea-user-menu__header {
  padding: 16px;
  background: var(--cea-bone);
  border-bottom: 1px solid var(--cea-line);
}
.cea-user-menu__name { display: block; font-weight: 700; color: var(--cea-ink); font-size: var(--cea-text-base); }
.cea-user-menu__email {
  display: block;
  color: var(--cea-muted);
  font-size: var(--cea-text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.cea-user-menu__item {
  display: block;
  padding: 12px 16px;
  color: var(--cea-slate) !important;
  font-size: var(--cea-text-base);
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid var(--cea-line);
  transition: background .12s;
}
.cea-user-menu__item:last-child { border-bottom: none; }
.cea-user-menu__item:hover { background: var(--cea-bone); color: var(--cea-brand-red) !important; }
/* No longer specially colored red — "log out" isn't a destructive action
   in this flow (no data loss), so it follows the same hover state as
   every other menu item instead of implying danger. */
.cea-user-menu__item--logout { color: var(--cea-slate) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   HOME PAGE — template-parts/redesign/home.php, 2026-08-14 redesign.
   ═══════════════════════════════════════════════════════════════════════ */

.cea-home { font-family: 'Plus Jakarta Sans', sans-serif; }

.cea-section { max-width: var(--cea-content-width); margin: 0 auto; padding: 56px 24px; }
.cea-section--bordered { background: var(--cea-surface); border-top: 1px solid var(--cea-line); border-bottom: 1px solid var(--cea-line); max-width: none; padding: 64px 24px; }
.cea-section--bordered > * { max-width: var(--cea-content-width); margin-left: auto; margin-right: auto; }

.cea-section__head { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.cea-section__head h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  margin: 0 0 12px;
  color: var(--cea-ink) !important;
}
.cea-section__head p { color: var(--cea-slate); font-size: 15px; line-height: 1.6; margin: 0; }

.cea-section__cta { text-align: center; margin-top: 36px; }
.cea-btn-pill-outline {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--cea-brand-red);
  color: var(--cea-brand-red) !important;
  border-radius: var(--cea-radius-pill);
  padding: 12px 34px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: all .15s;
}
.cea-btn-pill-outline:hover { background: var(--cea-brand-red); color: #fff !important; }

/* --- Hero --- */
.cea-hero { background: linear-gradient(180deg, var(--cea-red-wash) 0%, var(--cea-bone) 100%); padding: 64px 24px 72px; }
.cea-hero__inner {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 48px;
  align-items: center;
}
.cea-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cea-red-tint);
  color: var(--cea-red-deep);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--cea-radius-pill);
  margin-bottom: 22px;
}
.cea-hero__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 52px !important;
  line-height: 1.08 !important;
  font-weight: 800 !important;
  margin: 0 0 18px;
  color: var(--cea-ink) !important;
  letter-spacing: -.01em !important;
}
.cea-hero__title span { color: var(--cea-brand-red); }
.cea-hero__lede { font-size: 16px; line-height: 1.7; color: var(--cea-slate); max-width: 460px; margin: 0 0 28px; }

.cea-hero__search {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--cea-line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: var(--cea-shadow-md);
  max-width: 520px;
  gap: 8px;
}
.cea-hero__search-field { display: flex; align-items: center; gap: 10px; flex: 1; padding: 0 12px; color: var(--cea-faint); }
.cea-hero__search-field input { border: none !important; background: transparent !important; font-size: 14.5px; color: var(--cea-ink) !important; width: 100%; padding: 12px 0; }
.cea-hero__search-field input:focus { outline: none; }
.cea-hero__search button {
  background: var(--cea-brand-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cea-radius-control) !important;
  padding: 13px 30px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cea-hero__search button:hover { background: var(--cea-red-deep) !important; }

.cea-hero__stats { display: flex; gap: 34px; margin-top: 34px; }
.cea-hero__stat-num { font-family: 'Playfair Display', serif !important; font-size: 28px !important; font-weight: 800 !important; color: var(--cea-ink) !important; }
.cea-hero__stat-label { font-size: 12.5px; color: var(--cea-muted); margin-top: 2px; }

.cea-hero__visual { position: relative; height: 460px; }
.cea-hero__photo-frame {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  border: 10px solid #fff;
  box-shadow: var(--cea-shadow-lg);
  background: var(--cea-red-wash) center/cover no-repeat;
}
.cea-hero__photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.cea-hero__chip {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--cea-shadow-md);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cea-hero__chip--top { top: 24px; right: -6px; }
.cea-hero__chip--bottom { bottom: 40px; left: -14px; }
.cea-hero__chip-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--cea-red-tint);
  color: var(--cea-brand-red);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}
.cea-hero__chip-icon--star { background: var(--cea-evergreen-tint); color: var(--cea-evergreen-700); }
.cea-hero__chip-num { font-weight: 800; font-size: 15px; color: var(--cea-ink); }
.cea-hero__chip-label { font-size: 11px; color: var(--cea-muted); }

@media (max-width: 900px) {
  .cea-hero__inner { grid-template-columns: 1fr; }
  .cea-hero__visual { display: none; }
}

/* --- Categories --- */
.cea-categories {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  padding: 56px 24px 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.cea-categories__item {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--cea-shadow-sm);
  text-decoration: none !important;
  transition: border-color .15s;
}
.cea-categories__item:hover { border-color: var(--cea-brand-red); }
.cea-categories__name { font-weight: 700; font-size: 16px; color: var(--cea-brand-red); }
.cea-categories__count { font-size: 13px; color: var(--cea-muted); margin-top: 3px; }
.cea-categories__icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--cea-red-tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
@media (max-width: 900px) { .cea-categories { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cea-categories { grid-template-columns: 1fr; } }

/* --- Stats band --- */
.cea-stats-band { background: var(--cea-footer-bg); padding: 52px 24px; }
/* Flex + natural widths instead of a 4-column grid stretched to
   max-width -- the grid spread each stat across an equal 275px column
   regardless of its actual (much narrower) content, reading as
   inconsistent, oversized gaps. */
.cea-stats-band__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 72px;
  text-align: center;
}
.cea-stats-band__num { font-family: 'Playfair Display', serif !important; font-size: 44px !important; font-weight: 800 !important; color: #fff !important; }
.cea-stats-band__label { font-size: 13.5px; color: var(--cea-footer-text-muted); margin-top: 6px; }
@media (max-width: 700px) { .cea-stats-band__inner { gap: 20px 40px; } }

/* --- Find an agent --- */
.cea-agent-section {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cea-agent-section h2 { font-family: 'Playfair Display', serif !important; font-size: 38px !important; font-weight: 700 !important; margin: 0 0 16px; color: var(--cea-ink) !important; }
.cea-agent-section > div:first-child > p { color: var(--cea-slate); font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
.cea-agent-types { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.cea-agent-types__item { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--cea-ink-strong); line-height: 1.5; }
.cea-agent-types__check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--cea-red-tint);
  color: var(--cea-brand-red);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
  font-size: 12px; font-weight: 800;
}

.cea-agent-visual { position: relative; background: linear-gradient(135deg, var(--cea-evergreen-tint) 0%, var(--cea-red-wash) 100%); border-radius: 22px; height: 400px; overflow: hidden; }
.cea-agent-visual__photo-full { width: 100%; height: 100%; object-fit: cover; display: block; }
.cea-agent-visual__dot { position: absolute; top: 24px; right: 30px; width: 52px; height: 52px; border-radius: 50%; background: var(--cea-star); opacity: .55; }

@media (max-width: 900px) {
  .cea-agent-section { grid-template-columns: 1fr; }
  .cea-agent-visual { display: none; }
}

/* --- Loan CTA --- */
.cea-loan-cta {
  max-width: var(--cea-content-width);
  margin: 0 auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: .85fr 1fr;
  gap: 56px;
  align-items: center;
}
.cea-loan-cta__visual { height: 340px; border-radius: 22px; overflow: hidden; background: var(--cea-red-wash); }
.cea-loan-cta__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cea-loan-cta__eyebrow { display: inline-flex; background: var(--cea-red-tint); color: var(--cea-red-deep); font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: var(--cea-radius-pill); margin-bottom: 18px; }
.cea-loan-cta h2 { font-family: 'Playfair Display', serif !important; font-size: 40px !important; line-height: 1.12 !important; font-weight: 700 !important; margin: 0 0 16px; color: var(--cea-ink) !important; }
.cea-loan-cta p { color: var(--cea-slate); font-size: 15px; line-height: 1.7; margin: 0 0 26px; max-width: 460px; }
@media (max-width: 900px) { .cea-loan-cta { grid-template-columns: 1fr; } .cea-loan-cta__visual { height: 220px; } }

/* --- Testimonials --- */
.cea-testimonials { background: var(--cea-red-wash); padding: 72px 24px; }
.cea-testimonials .cea-section__head { margin-bottom: 44px; }
.cea-testimonials > div:not(.cea-section__head) { max-width: var(--cea-content-width); margin: 0 auto; }

/* --- Blog grid (Home's "Latest Blog" section — the full archive grid
   lives in template-parts/redesign/blog-archive.php) --- */
.cea-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cea-blog-card {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  overflow: hidden;
  text-decoration: none !important;
  box-shadow: var(--cea-shadow-sm);
  transition: box-shadow .2s ease;
  display: block;
}
.cea-blog-card:hover { box-shadow: var(--cea-shadow-lg); }
.cea-blog-card__img { height: 190px; background: var(--cea-bone) center/cover no-repeat; }
.cea-blog-card__body { padding: 20px; }
.cea-blog-card__meta { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.cea-blog-card__tag { background: var(--cea-red-tint); color: var(--cea-brand-red); font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 4px 10px; border-radius: 6px; }
.cea-blog-card__meta span:last-child { font-size: 12px; color: var(--cea-muted); }
.cea-blog-card__title { font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--cea-ink); margin-bottom: 12px; }
.cea-blog-card__more { color: var(--cea-brand-red); font-size: 13px; font-weight: 600; }

@media (max-width: 900px) { .cea-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cea-blog-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   HOME — Helpful Tools grid + FAQ accordion. Both link/reference only
   real, already-existing pages and content (the calculator pages already
   linked in the footer; FAQ answers point to Add Property, Contact Us,
   Free Valuation and WhatsApp, all real).
   ═══════════════════════════════════════════════════════════════════════ */
.cea-tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: var(--cea-content-width); margin: 0 auto; }
.cea-tools-grid__item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  padding: 24px;
  text-decoration: none !important;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.cea-tools-grid__item:hover { border-color: var(--cea-brand-red); box-shadow: var(--cea-shadow-md); transform: translateY(-2px); }
.cea-tools-grid__icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--cea-radius-control);
  background: var(--cea-red-tint);
  color: var(--cea-brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cea-tools-grid__body { flex: 1; min-width: 0; }
.cea-tools-grid__title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 17px; color: var(--cea-ink); margin-bottom: 4px; }
.cea-tools-grid__desc { font-size: 13.5px; color: var(--cea-slate); line-height: 1.5; }
.cea-tools-grid__arrow { flex-shrink: 0; color: var(--cea-muted); font-size: 20px; transition: transform .2s, color .2s; }
.cea-tools-grid__item:hover .cea-tools-grid__arrow { color: var(--cea-brand-red); transform: translateX(4px); }
@media (max-width: 700px) { .cea-tools-grid { grid-template-columns: 1fr; } }

.cea-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.cea-faq__item {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  overflow: hidden;
  transition: border-color .2s;
}
.cea-faq__item[open] { border-color: var(--cea-brand-red); }
.cea-faq__question {
  list-style: none;
  cursor: pointer;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--cea-ink);
}
.cea-faq__question::-webkit-details-marker { display: none; }
.cea-faq__question::marker { content: ''; }
.cea-faq__icon { flex-shrink: 0; width: 22px; height: 22px; position: relative; }
.cea-faq__icon::before, .cea-faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--cea-brand-red);
  border-radius: 2px;
  transform: translate(-50%, -50%);
}
.cea-faq__icon::before { width: 14px; height: 2px; }
.cea-faq__icon::after { width: 2px; height: 14px; transition: opacity .15s; }
.cea-faq__item[open] .cea-faq__icon::after { opacity: 0; }
.cea-faq__answer { padding: 0 24px 20px; font-size: 14.5px; line-height: 1.7; color: var(--cea-slate); }
.cea-faq__answer a { color: var(--cea-brand-red); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
   SHARED PAGE-TITLE BAND — used by Properties, Blog archive, ROI
   Calculator, Dashboard, Account (any page whose mockup shows a centered
   gradient-wash title band at the top).
   ═══════════════════════════════════════════════════════════════════════ */
.cea-page-title {
  background: linear-gradient(180deg, var(--cea-red-wash), var(--cea-bone));
  padding: 54px 24px 38px;
  text-align: center;
}
.cea-page-title h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  margin: 0 0 12px;
  color: var(--cea-ink) !important;
}
.cea-page-title p {
  color: var(--cea-slate);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 620px;
}

/* ═══════════════════════════════════════════════════════════════════════
   PROPERTIES ARCHIVE — template-parts/redesign/properties.php.
   ═══════════════════════════════════════════════════════════════════════ */
.cea-properties__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.cea-properties__head h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  margin: 0 0 6px;
  color: var(--cea-ink) !important;
  max-width: 460px;
  line-height: 1.2 !important;
}
.cea-properties__count { color: var(--cea-muted); font-size: 13.5px; }

/* ═══════════════════════════════════════════════════════════════════════
   Dark page-title variant — Blog archive, About hero (no stock photo
   exists for either in this site's media library, so this renders as a
   plain dark gradient band instead of a photo with a dark scrim, which
   is what the mockup shows over an image that doesn't exist here).
   ═══════════════════════════════════════════════════════════════════════ */
.cea-page-title--dark {
  background: linear-gradient(160deg, var(--cea-footer-bg), var(--cea-footer-bg-2));
  padding: 70px 24px;
}
.cea-page-title--dark h1 { color: #fff !important; }
.cea-page-title--dark p { color: var(--cea-footer-text); }

/* ═══════════════════════════════════════════════════════════════════════
   BLOG ARCHIVE — template-parts/redesign/blog-archive.php. Reuses
   .cea-blog-card from the Home page's "Latest Blog" section with two
   layout tweaks: title comes before the meta row here (not after), and
   cards render in the full listing-style grid.
   ═══════════════════════════════════════════════════════════════════════ */
.cea-blog-grid--archive { grid-template-columns: repeat(3, 1fr); gap: 26px; }
.cea-blog-card__title--lg { min-height: 48px; }
.cea-blog-card__meta--bottom {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cea-line-soft);
}
.cea-blog-card__meta--bottom span:last-child { font-size: 12px; color: var(--cea-muted); }

@media (max-width: 900px) { .cea-blog-grid--archive { grid-template-columns: 1fr 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   BLOG POST — single.php. the_content() renders real post HTML inside
   .cea-blog-post__content, styled generically for headings/paragraphs/
   blockquotes/lists rather than the mockup's hardcoded section array.
   ═══════════════════════════════════════════════════════════════════════ */
.cea-blog-post {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}
.cea-blog-post__breadcrumb {
  font-size: var(--cea-text-sm);
  color: var(--cea-faint);
  margin-bottom: 18px;
}
.cea-blog-post__breadcrumb a { color: var(--cea-brand-red) !important; text-decoration: none; }
.cea-blog-post__breadcrumb a:hover { text-decoration: underline; }
.cea-blog-post__tag {
  display: inline-block;
  background: var(--cea-red-tint);
  color: var(--cea-brand-red);
  font-size: var(--cea-text-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--cea-radius-control);
}
.cea-blog-post__title {
  font-family: 'Playfair Display', serif !important;
  font-size: 42px !important;
  line-height: 1.12 !important;
  font-weight: 800 !important;
  margin: 16px 0 14px;
  color: var(--cea-ink) !important;
}
.cea-blog-post__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cea-faint);
  font-size: 13.5px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.cea-blog-post__meta-dot { display: flex; align-items: center; gap: 6px; }
.cea-blog-post__meta-dot span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cea-brand-red);
  display: inline-block;
}
.cea-blog-post__hero {
  height: 400px;
  border-radius: var(--cea-radius-card);
  overflow: hidden;
  margin-bottom: 32px;
  background-size: cover;
  background-position: center;
}
.cea-blog-post__content {
  color: var(--cea-ink-strong);
  font-size: 16.5px;
  line-height: 1.85;
}
.cea-blog-post__content p { margin: 0 0 26px; }
.cea-blog-post__content h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 27px !important;
  font-weight: 700 !important;
  color: var(--cea-brand-red) !important;
  margin: 36px 0 14px;
  line-height: 1.2 !important;
}
.cea-blog-post__content h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 21px !important;
  font-weight: 700 !important;
  color: var(--cea-ink) !important;
  margin: 30px 0 12px;
  line-height: 1.25 !important;
}
.cea-blog-post__content ul,
.cea-blog-post__content ol { margin: 0 0 26px; padding-left: 22px; }
.cea-blog-post__content li { margin-bottom: 8px; }
.cea-blog-post__content a { color: var(--cea-brand-red) !important; }
.cea-blog-post__content img { max-width: 100%; border-radius: var(--cea-radius-md); }
.cea-blog-post__content blockquote {
  background: var(--cea-red-wash);
  border-left: 4px solid var(--cea-brand-red);
  border-radius: 0 var(--cea-radius-md) var(--cea-radius-md) 0;
  padding: 20px 24px;
  margin: 32px 0;
  font-size: 15px;
  color: var(--cea-ink-strong);
  line-height: 1.7;
}
.cea-blog-post__share {
  display: flex;
  gap: 12px;
  margin: 36px 0 44px;
}
.cea-blog-post__share-btn {
  flex: 1;
  border-radius: var(--cea-radius-control);
  padding: 12px;
  text-align: center;
  font-size: var(--cea-text-sm);
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.cea-blog-post__share-btn--fb { background: #1877F2; }
.cea-blog-post__share-btn--tw { background: #1DA1F2; }
.cea-blog-post__share-btn--email { background: var(--cea-brand-red); }
.cea-blog-post__related-title {
  font-family: 'Playfair Display', serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: var(--cea-ink) !important;
  margin: 0 0 22px;
  text-align: center;
}
.cea-blog-post__related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cea-blog-post__related-card {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-md);
  overflow: hidden;
  display: block;
  text-decoration: none;
}
.cea-blog-post__related-img {
  height: 130px;
  background-size: cover;
  background-position: center;
  background-color: var(--cea-red-wash);
}
.cea-blog-post__related-body { padding: 14px; }
.cea-blog-post__related-name {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cea-ink);
}
.cea-blog-post__related-date { font-size: var(--cea-text-2xs); color: var(--cea-faint); margin-top: 8px; }

@media (max-width: 700px) {
  .cea-blog-post__title { font-size: 30px; }
  .cea-blog-post__hero { height: 240px; }
  .cea-blog-post__related-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ABOUT PAGE — template-parts/redesign/about.php. Sections that call for
   interior/consultation photography we don't have (no real stock in the
   media library, only a generic placeholder) render as plain gradient or
   neutral-tint blocks instead of a faked photo, matching the convention
   already used for Home's agent-visual frames.
   ═══════════════════════════════════════════════════════════════════════ */
.cea-about { font-family: 'Plus Jakarta Sans', sans-serif; }

.cea-section__eyebrow {
  color: var(--cea-brand-red);
  font-size: var(--cea-text-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}

.cea-about-intro {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.cea-about-intro h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 38px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  margin: 0;
  color: var(--cea-brand-red) !important;
}
.cea-about-intro p { color: var(--cea-body); font-size: var(--cea-text-md); line-height: 1.8; margin: 0 0 22px; }
.cea-about-intro p b { color: var(--cea-ink); }

.cea-about-banner { max-width: var(--cea-content-width); margin: 0 auto; padding: 64px 24px; }
.cea-about-banner__frame {
  position: relative;
  height: 380px;
  border-radius: var(--cea-radius-lg);
  overflow: hidden;
  background-color: var(--cea-footer-bg-2);
  background-size: cover;
  background-position: center;
}
/* Dark scrim over the photo so the white copy stays legible. */
.cea-about-banner__scrim {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(20, 17, 15, .82), rgba(20, 17, 15, .25));
}
.cea-about-banner__copy { padding: 0 56px; max-width: 520px; }
.cea-about-banner__copy h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 14px;
  line-height: 1.15 !important;
}
.cea-about-banner__copy p { color: var(--cea-footer-text); font-size: 14.5px; line-height: 1.7; margin: 0 0 20px; }

.cea-about-eyebrow-block { max-width: 1000px; margin: 0 auto; padding: 0 24px 40px; text-align: center; }
.cea-about-eyebrow-block__eyebrow { color: var(--cea-brand-red); font-size: var(--cea-text-2xs); font-weight: 700; letter-spacing: 0.16em; margin-bottom: 12px; }
.cea-about-eyebrow-block h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: var(--cea-ink) !important;
  margin: 0;
}

.cea-about-value {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 72px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.cea-about-value__visual { height: 300px; border-radius: var(--cea-radius-lg); background-color: var(--cea-red-wash); background-size: cover; background-position: center; }
.cea-about-value h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: var(--cea-brand-red) !important;
  margin: 0 0 16px;
}
.cea-about-value p { color: var(--cea-body); font-size: var(--cea-text-md); line-height: 1.8; margin: 0; }

.cea-about-team { background: var(--cea-footer-bg); padding: 64px 24px; }
.cea-about-team__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.cea-about-team__eyebrow { color: var(--cea-footer-text-faint); font-size: var(--cea-text-2xs); font-weight: 700; letter-spacing: 0.16em; margin-bottom: 12px; }
.cea-about-team__copy h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  color: #fff !important;
  margin: 0 0 16px;
}
.cea-about-team__copy p { color: var(--cea-footer-text-muted); font-size: 14.5px; line-height: 1.7; margin: 0; }
/* Portrait photo (1393x1705) inside a landscape column -- object-fit:
   contain instead of a cover/crop treatment so the full, respectful
   portrait always shows intact, never cropped at the head or shoulders. */
.cea-about-team__photo-frame {
  height: 420px;
  border-radius: var(--cea-radius-lg);
  overflow: hidden;
  background: var(--cea-footer-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cea-about-team__photo { width: 100%; height: 100%; object-fit: contain; object-position: center top; display: block; }

@media (max-width: 860px) {
  .cea-about-intro,
  .cea-about-value,
  .cea-about-team__inner { grid-template-columns: 1fr; }
  .cea-about-banner__frame { height: auto; padding: 40px 0; }
  .cea-about-banner__copy { padding: 0 28px; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTACT PAGE — template-parts/redesign/contact.php. Form posts to
   inc/contact-form.php (real wp_mail(), same nonce+honeypot shape as
   .cea-callback-form on the listing detail page).
   ═══════════════════════════════════════════════════════════════════════ */
.cea-contact { font-family: 'Plus Jakarta Sans', sans-serif; }

.cea-contact__map { height: 300px; background: #E8EDE9; }
.cea-contact__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.cea-contact__panel {
  max-width: 1150px;
  margin: -90px auto 72px;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
.cea-contact__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  border-radius: var(--cea-radius-lg);
  overflow: hidden;
  box-shadow: var(--cea-shadow-lg);
}

.cea-contact__info { background: var(--cea-footer-bg); padding: 48px 40px; color: #fff; }
.cea-contact__info h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  margin: 0 0 6px;
  color: #fff !important;
}
.cea-contact__rule { width: 44px; height: 3px; background: var(--cea-brand-red); border-radius: 3px; margin-bottom: 32px; }
.cea-contact__label { color: var(--cea-footer-text-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 8px; }
.cea-contact__value { font-size: var(--cea-text-md); line-height: 1.5; color: var(--cea-footer-text); margin-bottom: 26px; }
.cea-contact__value--tight { margin-bottom: 6px; }
.cea-contact__socials { display: flex; gap: 10px; }
.cea-contact__socials a {
  width: 36px;
  height: 36px;
  border-radius: var(--cea-radius-control);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cea-footer-text-muted) !important;
  font-size: var(--cea-text-sm);
  text-decoration: none;
  text-transform: uppercase;
}
.cea-contact__socials a:hover { background: var(--cea-brand-red); color: #fff !important; }

.cea-contact__form-side { background: var(--cea-surface); padding: 48px 40px; }
.cea-contact__form-side h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 34px !important;
  font-weight: 700 !important;
  color: var(--cea-brand-red) !important;
  margin: 0 0 14px;
}
.cea-contact__form-side > p { color: var(--cea-body); font-size: var(--cea-text-base); line-height: 1.7; margin: 0 0 26px; }

.cea-contact-form { display: flex; flex-direction: column; gap: 4px; }
.cea-contact-form__honeypot { position: absolute; left: -9999px; }
.cea-contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 0; }
.cea-contact-form label {
  font-size: var(--cea-text-sm);
  font-weight: 600 !important;
  color: var(--cea-ink) !important;
  display: block;
  margin: 14px 0 6px;
}
.cea-contact-form input,
.cea-contact-form textarea {
  width: 100%;
  border: 1px solid var(--cea-line-strong) !important;
  border-radius: var(--cea-radius-control);
  padding: 12px 14px;
  font-size: var(--cea-text-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  outline: none;
  box-sizing: border-box;
}
.cea-contact-form textarea { min-height: 110px; resize: vertical; }
.cea-contact-form input:focus,
.cea-contact-form textarea:focus { border-color: var(--cea-brand-red) !important; }
.cea-contact-form button {
  width: 100%;
  background: var(--cea-brand-red) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cea-radius-control) !important;
  padding: 14px;
  font-size: var(--cea-text-md);
  font-weight: 600;
  cursor: pointer;
  margin-top: 18px;
}
.cea-contact-form button:hover { background: var(--cea-red-deep) !important; }
.cea-contact-form button:disabled { opacity: 0.7; cursor: default; }
.cea-contact-form__status { font-size: var(--cea-text-sm); margin: 10px 0 0; min-height: 1em; }
.cea-contact-form__status--ok { color: var(--cea-evergreen-700); }
.cea-contact-form__status--error { color: var(--cea-brand-red); }

@media (max-width: 860px) {
  .cea-contact__grid { grid-template-columns: 1fr; }
  .cea-contact__panel { margin-top: -60px; }
  .cea-contact-form__row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   KADENCE DEFAULT PAGE-TITLE BAND — pages that keep the theme's normal
   template (not routed through inc/redesign-templates.php) still render
   Kadence's own .entry-hero.page-hero-section title band: ROI Calculator,
   Add Property, Dashboard, Account, Free Valuation, Compare Properties,
   Unsubscribe. Restyled once here, globally, to the same light-gradient/
   Playfair treatment as the new design instead of the old corporate-blue
   Kadence default — every one of those pages picks it up automatically.
   ═══════════════════════════════════════════════════════════════════════ */
.entry-hero.page-hero-section {
  background: linear-gradient(180deg, var(--cea-red-wash), var(--cea-bone)) !important;
}
.entry-hero.page-hero-section .entry-title {
  font-family: 'Playfair Display', serif !important;
  font-weight: 800 !important;
  color: var(--cea-brand-red) !important;
  font-size: 42px !important;
}
/* Account page -- takes up too much space above a form users land on
   directly from the header dropdown. UM adds the .um-page-account body
   class on this page automatically. */
.um-page-account .entry-hero.page-hero-section { display: none; }
/* Public profile page (/user/{username}/, including its ?um_action=edit
   mode -- both share this same body class) -- same reasoning: a generic
   "User" title band adds nothing above content that already identifies
   the user via their name/avatar right below it. */
.um-page-user .entry-hero.page-hero-section { display: none; }
/* Dashboard (page ID 11315) -- [cea_dashboard] renders its own "Welcome
   back" header immediately below, so the generic band is pure duplication
   on top of it. Page-ID-scoped since this page has no UM/custom body
   class of its own. */
.page-id-11315 .entry-hero.page-hero-section { display: none; }
/* Kadence adds an 80px top margin on .content-area to clear the title
   band -- once that band is display:none above, the margin becomes bare
   dead space with nothing to clear. Zero it out on exactly the pages
   where the band is hidden. */
.um-page-account .content-area,
.um-page-user .content-area,
.page-id-11315 .content-area { margin-top: 0 !important; }

/* Public profile cover photo -- UM's own empty state is a huge aspect-ratio
   box (full card width, ~400px tall) holding nothing but a bare "+" icon,
   which reads as broken rather than an intentional upload prompt. Capped
   to a much shorter strip and given a soft brand-tinted background so it
   looks like a deliberate call-to-action; a real uploaded cover photo
   (.has-cover) is untouched. */
.um-cover:not(.has-cover) {
  max-height: 120px !important;
  background: var(--cea-red-tint, #FBECEC) !important;
  overflow: hidden;
}
.um-cover:not(.has-cover) .um-cover-e { display: flex !important; align-items: center; justify-content: center; }
.um-cover:not(.has-cover) .um-cover-add,
.um-cover:not(.has-cover) [class*="icon"] { color: var(--cea-brand-red, #D62839) !important; font-size: 20px !important; }

/* Account page's "Change your profile photo" field -- UM inline-styles its
   wrapper text-align:center, which centers the Upload button by itself in
   a wide empty area with nothing to anchor it to (every other field on
   this form is left-aligned, full width). Left-aligns it to match. */
.um-field-profile_photo .um-field-area { text-align: left !important; }
.um-field-profile_photo .um-button.um-btn-auto-width { display: inline-flex !important; align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════
   ACCOUNT — profile photo upload modal. UM ships this with its own hardcoded
   blue color scheme (none of it behind !important), completely unrelated to
   the site brand. Selectors mirror UM's own specificity (div.um-modal ...)
   where its rules use that prefix, so these don't need excessive !important
   stacking to win the cascade.
   ═══════════════════════════════════════════════════════════════════════ */
.um-modal {
  border-radius: var(--cea-radius-card) !important;
  box-shadow: var(--cea-shadow-lg) !important;
  overflow: hidden;
}
.um-modal-header {
  background: linear-gradient(120deg, var(--cea-footer-bg), var(--cea-footer-bg-2)) !important;
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  font-size: 19px !important;
}
.um-modal-body {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

div.um-modal .ajax-upload-dragdrop {
  /* !important here also suppresses the plugin's own inline border-color
     swap on dragover (jquery.uploadfile.js sets a plain, non-!important
     inline style, so an !important rule still wins over it). */
  border-color: var(--cea-line) !important;
  border-radius: var(--cea-radius-card) !important;
  background: var(--cea-bone) !important;
  transition: background .2s;
}
div.um-modal .ajax-upload-dragdrop span.icon { color: var(--cea-brand-red) !important; }
div.um-modal .ajax-upload-dragdrop span.str {
  color: var(--cea-ink) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
div.um-modal .ajax-upload-dragdrop span.help { color: var(--cea-muted) !important; }

div.um-modal .upload,
.um-modal-btn.um-finish-upload {
  background: var(--cea-brand-red) !important;
  border-radius: var(--cea-radius-control) !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 600 !important;
}
div.um-modal .upload:hover,
.um-modal-btn.um-finish-upload:not(.disabled):hover { background: var(--cea-red-deep) !important; }
.um-modal-btn.um-finish-upload.disabled {
  background: var(--cea-line) !important;
  color: var(--cea-muted) !important;
  cursor: wait !important;
}

.um-modal-btn.alt {
  background: transparent !important;
  color: var(--cea-slate) !important;
  border: 1.5px solid var(--cea-line-strong) !important;
  border-radius: var(--cea-radius-control) !important;
}
.um-modal-btn.alt:hover {
  background: var(--cea-bone) !important;
  color: var(--cea-ink) !important;
}

/* Upload progress bar -- jquery.uploadfile plugin's own markup, default
   flat green (#7ACF58), swapped for the brand accent with a touch of
   height/radius polish so it reads as a deliberate progress indicator
   rather than a leftover default. */
div.um-modal .upload-statusbar {
  background: var(--cea-bone) !important;
  border-radius: var(--cea-radius-control) !important;
  padding: 10px 14px !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  color: var(--cea-slate) !important;
}
div.um-modal .upload-progress {
  background: var(--cea-line) !important;
  border-radius: 999px !important;
  overflow: hidden;
  height: 8px !important;
}
div.um-modal .upload-bar {
  background: var(--cea-brand-red) !important;
  height: 100% !important;
  border-radius: 999px !important;
  transition: width .2s ease;
}

/* The crop preview's "X" cancel button (top-right circle on the photo
   upload modal) was hard to see -- a light grey X on a barely-darker grey
   circle. Also pins the glyph itself with !important: CDP's matched-styles
   inspector reported a same-specificity, same-source-line "content: ''"
   duplicate of UM's own rule for this exact selector while debugging (a
   DevTools display quirk for escaped-Unicode content values, not a second
   real rule -- confirmed by screenshotting the actual rendered pixels
   before/after), but keeping the explicit value here is harmless insurance
   either way. */
.um-icon-close::before { content: "\f12a" !important; }
.um-single-image-preview a.cancel {
  background: var(--cea-ink) !important;
  opacity: .85 !important;
}
.um-single-image-preview a.cancel:hover { opacity: 1 !important; }
.um-single-image-preview a.cancel i { color: #fff !important; }

/* Public profile page nav bar (About / Posts / Comments) -- UM's own
   accent-color setting (the same blue used site-wide in its modals,
   already restyled above) rather than the brand palette. */
.um-profile-nav { background: var(--cea-footer-bg) !important; }
.um-profile-nav-item a:hover { background: var(--cea-footer-bg-2) !important; }
.um-profile-nav-item.active a { background: var(--cea-brand-red) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   ROI CALCULATOR — chughtai-estate-automation/tools/roi-calculator.php
   ([roi_calculator] shortcode). Real client-side compound-interest math,
   unchanged from before this pass — only the presentation is new.
   ═══════════════════════════════════════════════════════════════════════ */
.cea-roi { font-family: 'Plus Jakarta Sans', sans-serif; max-width: 1000px; margin: 0 auto; padding: 8px 0 24px; }

.cea-roi__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
  align-items: start;
}

.cea-roi__form-card {
  background: var(--cea-surface);
  border: 1px solid var(--cea-line);
  border-radius: var(--cea-radius-card);
  overflow: hidden;
  box-shadow: var(--cea-shadow-md);
}
.cea-roi__form-card-bar { height: 5px; background: var(--cea-brand-red); }
.cea-roi__form-card-body { padding: 30px; }
.cea-roi__form-card-body h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--cea-ink) !important;
  margin: 0 0 6px;
}
.cea-roi__form-card-body > p { color: var(--cea-muted); font-size: 13.5px; margin: 0 0 26px; }

.cea-roi__field { margin-bottom: 20px; }
.cea-roi__field label { font-size: var(--cea-text-sm); font-weight: 600 !important; color: var(--cea-ink) !important; display: block; margin-bottom: 7px; }
.cea-roi__field input,
.cea-roi__field select {
  width: 100%;
  border: 1px solid var(--cea-line-strong) !important;
  border-radius: var(--cea-radius-control);
  padding: 13px 14px;
  font-size: var(--cea-text-base);
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-sizing: border-box;
  background: #fff !important;
}
.cea-roi__field input:focus,
.cea-roi__field select:focus { outline: none; border-color: var(--cea-brand-red) !important; }
.cea-roi__hint { font-size: var(--cea-text-xs); color: var(--cea-brass); margin-top: 6px; }

.cea-roi__calc-btn {
  width: 100%;
  background: var(--cea-brand-red);
  color: #fff;
  border: none;
  border-radius: var(--cea-radius-control);
  padding: 14px;
  font-size: var(--cea-text-md);
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}
.cea-roi__calc-btn:hover { background: var(--cea-red-deep); }

.cea-roi__results-panel {
  background: var(--cea-footer-bg);
  border-radius: var(--cea-radius-card);
  padding: 30px;
  color: #fff;
}
.cea-roi__results-eyebrow { color: var(--cea-footer-text-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 20px; }
.cea-roi__result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cea-roi__result-row--last { border-bottom: none; }
.cea-roi__result-row > span:first-child { color: var(--cea-footer-text); font-size: var(--cea-text-base); }
.cea-roi__result-value {
  font-family: 'Playfair Display', serif !important;
  font-size: var(--cea-text-2xl) !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.cea-roi__result-value--accent { color: #F0A8AE; }

.cea-roi__total-box {
  background: rgba(214, 40, 57, 0.16);
  border-radius: var(--cea-radius-md);
  padding: 18px;
  margin-top: 24px;
  text-align: center;
}
.cea-roi__total-box > div:first-child { font-size: var(--cea-text-xs); color: #E0A6AB; margin-bottom: 4px; }
.cea-roi__total-box > div:last-child {
  font-family: 'Playfair Display', serif !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.cea-roi__breakdown { margin-top: 40px; }
.cea-roi__breakdown h3 {
  font-family: 'Playfair Display', serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--cea-ink) !important;
  margin: 0 0 18px;
}
.cea-roi__breakdown-table-wrap { overflow-x: auto; border: 1px solid var(--cea-line); border-radius: var(--cea-radius-md); }
.cea-roi__breakdown-table { width: 100%; border-collapse: collapse; font-size: var(--cea-text-sm); }
.cea-roi__breakdown-table th,
.cea-roi__breakdown-table td { padding: 12px 16px; text-align: left; white-space: nowrap; }
.cea-roi__breakdown-table th {
  background: var(--cea-red-wash);
  color: var(--cea-ink);
  font-weight: 700;
  font-size: var(--cea-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cea-roi__breakdown-table td { color: var(--cea-body); border-top: 1px solid var(--cea-line-soft); }

.cea-roi__cta {
  text-align: center;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--cea-line);
}
.cea-roi__cta p { color: var(--cea-ink); font-size: var(--cea-text-md); margin: 0 0 16px; }

@media (max-width: 860px) {
  .cea-roi__grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SIGN IN / SIGN UP — ultimate-member/templates/login.php + register.php
   (theme overrides). Split dark-brand / light-form screen. The actual
   <form> markup inside .um-form is still 100% real Ultimate Member
   output (same do_action() hooks as stock) — only the outer chrome is
   new. Resets the older centered-card .um-login/.um-register treatment
   (still used as-is on /password-reset/, which isn't part of this pass)
   so the form sits flush inside the new form-side panel instead of
   double-boxing.
   ═══════════════════════════════════════════════════════════════════════ */
.cea-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 200px);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cea-auth__panel {
  position: relative;
  background: linear-gradient(160deg, var(--cea-footer-bg), var(--cea-footer-bg-2));
  color: #fff;
  padding: 56px 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.cea-auth__panel-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(214, 40, 57, 0.18);
}
.cea-auth__panel-glow--alt { top: auto; right: auto; bottom: -90px; left: -70px; width: 280px; height: 280px; background: rgba(214, 40, 57, 0.16); }

.cea-auth__brand { display: flex; align-items: center; position: relative; }
/* Single-image lockup (icon + wordmark baked in, white-text export),
   same approach as the header/footer logo. */
.cea-auth__brand-icon { height: 58px; width: auto; display: block; }

.cea-auth__panel-copy { position: relative; }
.cea-auth__panel-copy h2 {
  font-family: 'Playfair Display', serif !important;
  font-size: 38px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  margin: 0 0 16px;
  color: #fff !important;
}
.cea-auth__panel-copy p { color: var(--cea-footer-text); font-size: 15px; line-height: 1.7; margin: 0; }
.cea-auth__perks { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.cea-auth__perks div { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--cea-footer-text); }
.cea-auth__perks span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(214, 40, 57, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.cea-auth__copyright { position: relative; color: var(--cea-footer-text-faint); font-size: 12.5px; }

.cea-auth__form-side { display: flex; align-items: center; justify-content: center; padding: 56px 40px; background: var(--cea-bone); }
.cea-auth__form-inner { width: 100%; max-width: 400px; }
.cea-auth__form-inner--wide { max-width: 420px; }
.cea-auth__form-inner h1 {
  font-family: 'Playfair Display', serif !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: var(--cea-ink) !important;
  margin: 0 0 8px;
}
.cea-auth__lede { color: var(--cea-slate); font-size: var(--cea-text-base); margin: 0 0 30px; }
.cea-auth__switch { text-align: center; font-size: var(--cea-text-base); color: var(--cea-body); margin: 22px 0 0; }
.cea-auth__switch a { color: var(--cea-brand-red) !important; font-weight: 600 !important; text-decoration: none; }
.cea-auth__switch a:hover { text-decoration: underline; }
.cea-auth__back { text-align: center; font-size: var(--cea-text-sm); margin: 16px 0 0; }
.cea-auth__back a { color: var(--cea-faint) !important; text-decoration: none; }
.cea-auth__back a:hover { color: var(--cea-brand-red) !important; }

/* Flatten the form: no floating card inside the already-framed panel. */
.cea-auth .um-login,
.cea-auth .um-register {
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
  background: none;
  border: none;
  box-shadow: none;
}
.cea-auth .um-row { margin-bottom: 6px !important; }
.cea-auth .um-field { margin-bottom: 16px; }

/* Register field layout: pair First/Last Name into one row (matching
   the site owner's reference), drop Gender (not needed for a property
   site sign-up), everything else stays full width. Fields are direct
   siblings inside .um-col-1, targeted by their real data-key so this
   doesn't depend on UM's generated class names. */
.cea-auth .um-col-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cea-auth .um-col-1 > [data-key] { grid-column: 1 / -1; }
.cea-auth .um-col-1 > [data-key="first_name"] { grid-column: 1; }
.cea-auth .um-col-1 > [data-key="last_name"] { grid-column: 2; }
.cea-auth .um-col-1 > [data-key="gender"] { display: none; }

/* Remember-me / register-inline row: the register button here duplicates
   the "Sign Up" link already added below the form, so it's hidden and
   Login goes full width. */
.cea-auth .um-col-alt { display: flex; flex-direction: column; gap: 4px; }
.cea-auth .um-field-c { order: 1; margin-bottom: 4px; }
.cea-auth .um-left.um-half,
.cea-auth .um-right.um-half { width: 100% !important; order: 2; }
.cea-auth .um-right.um-half { display: none !important; }
.cea-auth .um-center { order: 2; }
.cea-auth .um-button { width: 100%; padding: 14px !important; font-size: var(--cea-text-md) !important; }

/* UM hides the native checkbox input (opacity:0) and renders the
   visible box via an icon-font glyph swapped by its own JS between
   "outline-blank" (unchecked) and "outline" (checked) -- so the fix is
   to style that icon, not the invisible input, and not hide it. */
.cea-auth .um-field-checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding-left: 26px;
  color: var(--cea-body);
  font-size: var(--cea-text-sm);
  cursor: pointer;
}
.cea-auth .um-field-checkbox-state { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; }
.cea-auth .um-field-checkbox-state i { font-size: 18px; line-height: 18px; height: 18px; color: var(--cea-faint); }
.cea-auth .um-field-checkbox:hover .um-field-checkbox-state i { color: var(--cea-brand-red); }
.cea-auth .um-field-checkbox-option { margin: 0 !important; }
.cea-auth .um-icon-android-checkbox-outline { color: var(--cea-brand-red) !important; }

.cea-auth .um-col-alt-b { text-align: center; margin-top: 18px; }
.cea-auth .um-col-alt-b .um-link-alt { font-size: var(--cea-text-sm); font-weight: 600; }

.cea-auth .um_request_name { display: none; }

/* Password show/hide toggle + live strength meter (inc/auth-password-
   strength.js), Sign Up only. Advisory only -- doesn't change UM's own
   password validation. */
.cea-auth .um-field-password input[type="password"],
.cea-auth .um-field-password input[type="text"] { padding-right: 44px !important; }
.cea-pw-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px;
  color: var(--cea-faint) !important;
  cursor: pointer;
  line-height: 0;
}
.cea-pw-toggle:hover { color: var(--cea-brand-red) !important; }

.cea-pw-meter { display: none; margin: 8px 0 0; }
.cea-pw-meter--visible { display: block; }
.cea-pw-meter__bars { display: flex; gap: 5px; margin-bottom: 6px; }
.cea-pw-meter__bars span { flex: 1; height: 4px; border-radius: 2px; background: var(--cea-line-strong); }
.cea-pw-meter__bar--weak.cea-pw-meter__bar--on { background: #D64545; }
.cea-pw-meter__bar--fair.cea-pw-meter__bar--on { background: var(--cea-brass); }
.cea-pw-meter__bar--good.cea-pw-meter__bar--on { background: #2E8B57; }
.cea-pw-meter__bar--strong.cea-pw-meter__bar--on { background: var(--cea-evergreen-700); }
.cea-pw-meter__label { font-size: 12px; color: var(--cea-muted); }

@media (max-width: 900px) {
  .cea-auth { grid-template-columns: 1fr; min-height: auto; }
  .cea-auth__panel { padding: 40px 28px; }
  .cea-auth__form-side { padding: 40px 24px; }
}
@media (max-width: 560px) { .cea-blog-grid--archive { grid-template-columns: 1fr; } }