/**
 * PropAI CRM — supplementary styles.
 *
 * Tailwind handles layout and colour. This file covers only what utility
 * classes cannot: focus rings, print rules, scrollbars and reduced motion.
 */

:root {
  --brand-600: #001550;
  --brand-700: #000c33;
}

/* ---------------------------------------------------------------------
   Mobile safety net
   --------------------------------------------------------------------- */

/* Grid and flex items default to min-width:auto, so one long name or a row
   of buttons inside a card could push the whole page wider than a phone.
   Letting them shrink keeps every card inside the screen; `truncate` then
   does its job.

   Two details matter here (both used to squeeze text into a one-letter-wide
   column on phones):
   - :where() keeps this rule at zero specificity, so a deliberate utility such
     as `min-w-[11rem]` on the same element still wins;
   - a `flex-1` item in a `flex-wrap` row must NOT shrink to nothing, or it can
     never wrap onto the next line: it keeps its natural minimum width. */
:where(.grid) > :where(*),
:where(.flex) > :where(.min-w-0),
:where(.flex:not(.flex-wrap)) > :where(.flex-1) { min-width: 0; }

/* Long words (emails, URLs, reference codes) wrap instead of overflowing.
   `break-word`, not `anywhere`: `anywhere` also lowers the minimum width of the
   box to a single letter, which let headings and labels collapse letter by letter. */
main, article, section, td, dd, p { overflow-wrap: break-word; }

/* No sideways page scroll on phones, even if one element misbehaves. */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: clip; }

  /* 16px inputs stop iOS Safari zooming in on focus. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea { font-size: 16px !important; }
}

/* Consistent, visible focus for keyboard users only. */
:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The mobile menu and its menu button keep their short animation on purpose. */
  *:not(.mobile-menu, .mobile-menu *, .mobile-backdrop, .burger, .burger *), *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Slimmer scrollbars in scrolling panels (assistant log, sidebars). */
[data-assistant-messages],
[data-sidebar] nav,
.overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

[data-assistant-messages]::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-x-auto::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-assistant-messages]::-webkit-scrollbar-thumb,
.overflow-y-auto::-webkit-scrollbar-thumb,
.overflow-x-auto::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

/* Strip the native search-cancel control so it does not clash with our icons. */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Native dialog backdrop for the report modal. */
dialog::backdrop {
  background: rgb(15 23 42 / 0.5);
  backdrop-filter: blur(2px);
}

dialog[open] {
  animation: dialog-in 0.16s ease-out;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------------------------------------------------------------------
   Hero background
   Drifting colour orbs that stand in for a background video until one is
   uploaded. Pure CSS so there is no extra request and nothing to buffer.
   --------------------------------------------------------------------- */
.hero-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  will-change: transform;
}

.hero-orb--a {
  width: 38rem; height: 38rem;
  top: -12rem; left: -8rem;
  background: radial-gradient(circle, rgba(29,102,242,.75), transparent 68%);
  animation: orb-drift-a 22s ease-in-out infinite;
}

.hero-orb--b {
  width: 32rem; height: 32rem;
  top: -6rem; right: -6rem;
  background: radial-gradient(circle, rgba(139,92,246,.6), transparent 68%);
  animation: orb-drift-b 27s ease-in-out infinite;
}

.hero-orb--c {
  width: 30rem; height: 30rem;
  bottom: -14rem; left: 32%;
  background: radial-gradient(circle, rgba(16,185,129,.45), transparent 68%);
  animation: orb-drift-c 31s ease-in-out infinite;
}

@keyframes orb-drift-a {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(7rem,4rem,0) scale(1.12); }
}
@keyframes orb-drift-b {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(-6rem,5rem,0) scale(1.18); }
}
@keyframes orb-drift-c {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50%      { transform: translate3d(4rem,-5rem,0) scale(1.1); }
}

/* Hero entrance: each block rises in, one after another (style="--d: n"). */
.hero-rise {
  opacity: 0;
  animation: hero-rise .7s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--d, 0) * 110ms);
}
@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* A light sweep across the search button every few seconds. */
.hero-shine { position: relative; overflow: hidden; }
.hero-shine::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: hero-shine 4.5s ease-in-out 1.5s infinite;
}
@keyframes hero-shine {
  0%, 60% { transform: translateX(-120%); }
  80%, 100% { transform: translateX(120%); }
}

/* Motion sensitivity: hold the orbs still rather than removing the colour. */
@media (prefers-reduced-motion: reduce) {
  .hero-orb { animation: none !important; }
  .hero-rise { animation: none !important; opacity: 1; }
  .hero-shine::after { display: none; }
}

/* A background video must never compete with the search box for attention. */
section video {
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   City rail — one horizontal line, scrolled rather than wrapped
   --------------------------------------------------------------------- */
.city-rail {
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;            /* the tiles are the affordance */
}

.city-rail::-webkit-scrollbar { display: none; }

.city-rail > * { scroll-snap-align: start; }

/* Fade the right edge so it is obvious there is more to scroll to. */
@media (min-width: 640px) {
  .city-rail {
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  }
}

/* ---------------------------------------------------------------------
   Category tiles — one accent per property category
   --------------------------------------------------------------------- */
.tile-accent {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tile-accent::before {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 8rem;
  height: 8rem;
  border-radius: 9999px;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  transform: scale(.6);
  z-index: -1;
}

.tile-accent:hover::before {
  opacity: .16;
  transform: scale(1);
}

.tile-accent--residential::before { background: #0757e6; }
.tile-accent--commercial::before  { background: #8b5cf6; }
.tile-accent--land::before        { background: #f59e0b; }
.tile-accent--project::before     { background: #10b981; }

/* ---------------------------------------------------------------------
   "Post Property" call to action — the one element meant to pop.
   A brand gradient, a light sweep every few seconds and a soft pulsing
   glow. Motion is decorative, so reduced-motion users get the static style.
   --------------------------------------------------------------------- */
.btn-pop {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: linear-gradient(135deg, #001550 0%, #0757e6 55%, #0274eb 100%);
  background-size: 180% 180%;
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(7, 87, 230, .65);
  animation: pop-gradient 6s ease infinite, pop-glow 2.4s ease-in-out infinite;
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Light sweep across the button. */
.btn-pop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: pop-shine 3.2s ease-in-out infinite;
}

/* Hover only deepens the glow; the button itself stays still. */
.btn-pop:hover {
  box-shadow: 0 10px 26px -6px rgba(7, 87, 230, .8);
  filter: brightness(1.08);
}

.btn-pop:active { transform: translateY(0) scale(.98); }

.btn-pop .btn-pop__icon {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .22);
  animation: pop-bounce 2.4s ease-in-out infinite;
}

@keyframes pop-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes pop-glow {
  0%, 100% { box-shadow: 0 6px 18px -6px rgba(7, 87, 230, .55), 0 0 0 0 rgba(7, 87, 230, .45); }
  50%      { box-shadow: 0 8px 22px -6px rgba(7, 87, 230, .8), 0 0 0 6px rgba(7, 87, 230, 0); }
}
@keyframes pop-shine {
  0%, 60% { transform: translateX(-120%); }
  100%    { transform: translateX(120%); }
}
@keyframes pop-bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* Floating AI button: a breathing ring so it is noticed, never intrusive. */
.ai-fab::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9999px;
  border: 2px solid rgba(7, 87, 230, .55);
  animation: ai-ring 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes ai-ring {
  0%   { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Toast countdown bar: shrinks over the toast's lifetime, pauses on hover. */
.toast-bar { animation: toast-countdown linear forwards; }
.toast-paused .toast-bar { animation-play-state: paused; }
@keyframes toast-countdown {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* Phones: compact toasts — smaller card, text and icon, at most two on screen. */
@media (max-width: 639px) {
  #toast-stack { max-width: 21rem; left: auto; right: .75rem; padding: 0; width: calc(100% - 1.5rem); gap: .375rem; }
  #toast-stack > .toast-card:nth-child(n+3) { display: none; }
  .toast-card { gap: .5rem; padding: .5rem 2rem .625rem .625rem; border-radius: .875rem; font-size: .78rem; box-shadow: 0 8px 20px -6px rgb(15 23 42 / .25); }
  .toast-card > span:first-child { width: 1.5rem; height: 1.5rem; }
  .toast-card > span:first-child svg { width: .875rem; height: .875rem; }
  .toast-card [data-toast-title] { font-size: .78rem; line-height: 1.1rem; }
  .toast-card [data-toast-message] { margin-top: 0; font-size: .74rem; line-height: 1.05rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .toast-card > button { top: .25rem; right: .25rem; width: 1.5rem; height: 1.5rem; }
  .toast-card > button svg { width: .75rem; height: .75rem; }
  .toast-card .toast-bar { height: 2px; }
}

/* Featured listings: a gold badge and a gold-framed card, so paid
   placements stand apart from the rest of the grid. */
.badge-featured {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  background: linear-gradient(135deg, #fde68a 0%, #f5b82e 45%, #c98a06 100%);
  color: #3f2a00;
  box-shadow: 0 2px 8px -2px rgba(201, 138, 6, .6), inset 0 1px 0 rgba(255, 255, 255, .55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.card-featured {
  border-color: #e9c46a;
  background: linear-gradient(180deg, #fffaeb 0%, #ffffff 38%);
  box-shadow: 0 0 0 1px rgba(233, 196, 106, .55), 0 10px 28px -12px rgba(201, 138, 6, .45);
}
.card-featured:hover {
  border-color: #d9a520;
  box-shadow: 0 0 0 1px rgba(217, 165, 32, .8), 0 16px 36px -12px rgba(201, 138, 6, .55);
}

@media (prefers-reduced-motion: reduce) {
  .btn-pop, .btn-pop::after, .btn-pop .btn-pop__icon, .ai-fab::before, .toast-bar { animation: none !important; }
}

/* ---------------------------------------------------------------------
   Live form validation ([data-validate] forms)
   --------------------------------------------------------------------- */
.is-invalid,
.is-invalid:focus {
  border-color: #e11d48 !important;
  --tw-ring-color: rgba(225, 29, 72, .35) !important;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .12);
}
.is-valid,
.is-valid:focus {
  border-color: #16a34a !important;
  --tw-ring-color: rgba(22, 163, 74, .35) !important;
}
.field-error {
  margin-top: .375rem;
  font-size: .8rem;
  line-height: 1.35;
  color: #e11d48;
}
.form-error {
  border-radius: .75rem;
  background: #fff1f2;
  border: 1px solid #fecdd3;
  padding: .7rem .9rem;
  font-size: .85rem;
  color: #be123c;
}

/* Skeleton placeholder used while AJAX results load. */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: skeleton 1.3s ease-in-out infinite;
  border-radius: 8px;
}

@keyframes skeleton {
  from { background-position: 100% 50%; }
  to   { background-position: 0 50%; }
}

/* Pages with the mobile contact bar: lift the floating buttons above it. */
@media (max-width: 1023px) {
  body:has([data-contact-bar]) main { padding-bottom: 5.5rem; }
  body:has([data-contact-bar]) [data-assistant-root],
  body:has([data-contact-bar]) [data-scroll-top] { bottom: 6rem; }
  body:has([data-contact-bar]) #toast-stack { bottom: 10rem; }
}

/* Long listing descriptions collapse until expanded. */
[data-expandable] {
  max-height: 14rem;
  overflow: hidden;
  position: relative;
  transition: max-height .3s ease;
}

[data-expandable].is-expanded {
  max-height: none;
}

[data-expandable]:not(.is-expanded)::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4rem;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}

@media print {
  header, footer, nav,
  [data-assistant-root], [data-compare-tray], #toast-stack,
  [data-sidebar] {
    display: none !important;
  }

  body { background: #fff; }
  main { padding: 0 !important; }

  /* Print the destination of every link so a printed listing stays useful. */
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    color: #64748b;
  }
}

/*
 * Tables that turn into stacked cards on phones. Add "table-cards" to the
 * <table>; app.js copies each column heading into data-label so every value
 * keeps its name once the header row is hidden.
 */
@media (max-width: 639px) {
  table.table-cards,
  table.table-cards tbody { display: block; width: 100%; }
  table.table-cards thead { display: none; }
  table.table-cards tbody { border: 0; }
  table.table-cards tr {
    display: block;
    margin: 0.625rem;
    padding: 0.5rem 0.125rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
  }
  table.table-cards td:not(.hidden) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem 0.75rem;
    padding: 0.4rem 0.75rem !important;
    border: 0;
    text-align: right;
    white-space: normal;
  }
  table.table-cards td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    flex-shrink: 0;
    padding-top: 0.1rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #94a3b8;
    text-align: left;
    margin-right: auto;
  }
  /* The first cell is the row's title: full width, no label. */
  table.table-cards td:first-child { display: block; text-align: left; }
  table.table-cards td:first-child[data-label]::before { content: none; }
  table.table-cards td:first-child + td { border-top: 1px solid #f1f5f9; margin-top: 0.35rem; padding-top: 0.6rem !important; }
  table.table-cards td > * { min-width: 0; }
  table.table-cards td .justify-end,
  table.table-cards td.text-right > div { justify-content: flex-end; }
}

/*
 * Phones: iOS zooms the page into any field whose text is under 16px, and
 * the page stays zoomed after typing. 16px fields keep the layout steady.
 */
@media (max-width: 639px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }
}
/* No grey flash when tapping links and buttons on phones. */
a, button, [role="button"], label { -webkit-tap-highlight-color: transparent; }

/* Range sliders in the home page calculators: filled track up to the thumb (--pct set by app.js). */
.calc-range {
  --pct: 50%;
  --fill: #0757e6;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  border-radius: 9999px;
  background: linear-gradient(to right, var(--fill) 0 var(--pct), #e2e8f0 var(--pct) 100%);
  cursor: pointer;
  touch-action: pan-y;
}
/* In RTL (Urdu) the thumb starts from the right, so the fill must grow from the right too. */
[dir="rtl"] .calc-range { background: linear-gradient(to left, var(--fill) 0 var(--pct), #e2e8f0 var(--pct) 100%); }
.calc-range--green { --fill: #10b981; }
.calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px; height: 24px;
  border-radius: 9999px;
  background: #fff;
  border: 5px solid var(--fill);
  box-shadow: 0 4px 12px -2px rgb(0 21 80 / .35);
  transition: transform .15s;
}
.calc-range::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 9999px;
  background: #fff;
  border: 5px solid var(--fill);
  box-shadow: 0 4px 12px -2px rgb(0 21 80 / .35);
}
.calc-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc-range:focus-visible { outline: 2px solid var(--fill); outline-offset: 4px; }
[data-marla][aria-pressed="true"] { background: #fff; color: #047857; box-shadow: 0 1px 2px rgb(15 23 42 / .1); }
[data-area-card].is-source { background: #ecfdf5; box-shadow: inset 0 0 0 1.5px #34d399; }

/*
 * Page scrollbar in the brand colours: a slim navy-to-blue pill on a soft
 * track that widens on hover. Chrome, Edge and Safari use the ::-webkit
 * rules; Firefox gets matching colours through scrollbar-color.
 */
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: #eef2f9; }
html::-webkit-scrollbar-thumb {
  border: 3px solid #eef2f9;
  border-radius: 9999px;
  background: linear-gradient(180deg, #001550 0%, #0757e6 100%);
  min-height: 48px;
}
html::-webkit-scrollbar-thumb:hover { border-width: 2px; background: linear-gradient(180deg, #06257a 0%, #3a8ff2 100%); }
html::-webkit-scrollbar-thumb:active { background: #001550; }
html::-webkit-scrollbar-corner { background: #eef2f9; }
@-moz-document url-prefix() {
  html { scrollbar-color: #0757e6 #eef2f9; scrollbar-width: thin; }
}

/* Highlighted text in the brand blue. */
::selection { background: #0757e6; color: #fff; }

/*
 * Home page card rows on phones.
 */
@media (max-width: 639px) {
  /* Property cards are compact list rows on phones, so a rail is a short
     vertical list: the first four, with "View all" for the rest. */
  .mobile-rail {
    display: flex !important;   /* beats Tailwind's .grid */
    flex-direction: column;
    gap: 0.625rem;
  }
  .mobile-rail > :nth-child(n + 5) { display: none; }

  /* Small cards (agencies) swipe sideways on phones instead of stacking.
     The next card peeks in so it is obvious the row scrolls. */
  .mobile-swipe {
    display: flex !important;   /* beats Tailwind's .grid */
    gap: 0.75rem;
    margin-inline: -1rem;
    padding: 0.25rem 1rem 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 1rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-swipe::-webkit-scrollbar { display: none; }
  .mobile-swipe > * {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

/* Assistant page: fit the visible screen on phones, where 100vh includes the hidden address bar. */
.assistant-panel { height: calc(100vh - 10rem); }
@supports (height: 100dvh) {
  .assistant-panel { height: calc(100dvh - 9rem); }
}
@media (max-width: 639px) {
  .assistant-panel { height: calc(100dvh - 6.5rem); min-height: 26rem; }
}

/* ── Mobile menu: slides down from under the header ───────────────── */
/* A slow curtain: the panel is revealed from the top down while it drops into place. */
.mobile-menu {
  visibility: hidden;
  opacity: 0;
  transform: translateY(-24px);
  clip-path: inset(0 0 100% 0);
  transition: opacity .45s ease, transform .6s cubic-bezier(.22, 1, .36, 1),
              clip-path .65s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .65s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 -40px 0);   /* leave room for the shadow */
  transition-delay: 0s;
}
/* Links follow one after another. */
.mobile-menu nav > * {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.mobile-menu.is-open nav > * { opacity: 1; transform: none; }
.mobile-menu.is-open nav > :nth-child(1) { transition-delay: .12s; }
.mobile-menu.is-open nav > :nth-child(2) { transition-delay: .18s; }
.mobile-menu.is-open nav > :nth-child(3) { transition-delay: .24s; }
.mobile-menu.is-open nav > :nth-child(4) { transition-delay: .30s; }
.mobile-menu.is-open nav > :nth-child(5) { transition-delay: .36s; }
.mobile-menu.is-open nav > :nth-child(6) { transition-delay: .42s; }
.mobile-menu.is-open nav > :nth-child(7) { transition-delay: .48s; }
.mobile-menu.is-open nav > :nth-child(8) { transition-delay: .54s; }

/* Soft blur over the page behind the open menu. Absolute (not fixed): the
   header's own backdrop-blur would otherwise trap a fixed child inside it. */
.mobile-backdrop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 1;
  height: 100vh; height: 100dvh;
  background: rgba(15, 23, 42, .28);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.mobile-menu.is-open + .mobile-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }

/* Hamburger → cross, in two steps: the bars slide together, then turn into an X,
   while the whole icon spins half a turn. Closing plays it in reverse. */
.burger {
  position: relative; display: block; width: 22px; height: 16px;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.burger > span {
  position: absolute; left: 0; width: 100%; height: 2.5px; border-radius: 3px;
  background: currentColor;
  /* closing: straighten first, then spread apart */
  transition: top .25s ease .25s, transform .25s ease 0s, opacity .15s ease .25s;
}
.burger > span:nth-child(1) { top: 0; }
.burger > span:nth-child(2) { top: 7px; }
.burger > span:nth-child(3) { top: 14px; }
[aria-expanded="true"] > .burger { transform: rotate(180deg); }
[aria-expanded="true"] > .burger > span {
  /* opening: come together first, then rotate into the cross */
  transition: top .25s ease 0s, transform .3s cubic-bezier(.34, 1.56, .64, 1) .25s, opacity .15s ease .1s;
}
[aria-expanded="true"] > .burger > span:nth-child(1) { top: 7px; transform: rotate(45deg); }
[aria-expanded="true"] > .burger > span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] > .burger > span:nth-child(3) { top: 7px; transform: rotate(-45deg); }
[data-mobile-menu-trigger] { transition: background-color .3s ease, color .3s ease; }
[data-mobile-menu-trigger][aria-expanded="true"] { color: #0f172a; background: #f1f5f9; }


/* Rich text (blog editor and article page). Tailwind's reset removes heading
   sizes and list bullets, so the formatting is restored here. */
.rich-content > * + * { margin-top: 1.1em; }
.rich-content h2 { font-size: 1.5em; line-height: 1.3; font-weight: 800; color: #001550; letter-spacing: -0.01em; scroll-margin-top: 6rem; padding-top: .3em; }
.rich-content h3 { font-size: 1.2em; line-height: 1.35; font-weight: 700; color: #001550; }
.rich-content h4 { font-size: 1.05em; font-weight: 700; color: #0f172a; }
.rich-content strong { font-weight: 700; color: #0f172a; }
.rich-content em { font-style: italic; }
.rich-content u { text-decoration: underline; }
.rich-content a { color: #0757e6; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rich-content ul { list-style: disc; padding-inline-start: 1.5em; }
.rich-content ol { list-style: decimal; padding-inline-start: 1.5em; }
.rich-content li + li { margin-top: .35em; }
.rich-content li::marker { color: #0757e6; }
.rich-content blockquote { border-inline-start: 4px solid #0757e6; background: #f1f5ff; padding: .75em 1em; border-radius: .75rem; color: #334155; font-style: italic; }
.rich-content:empty::before { content: 'Start writing…'; color: #94a3b8; }
.article-body > p:first-child { font-size: 1.1em; color: #1e293b; }

/* ── Cookie consent ─────────────────────────────────────────────── */
.cc-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 16px max(16px, 4vw); padding-bottom: max(16px, env(safe-area-inset-bottom)); background: #fff; color: #1e293b; font-size: 14px; line-height: 1.5; box-shadow: 0 -6px 28px rgba(15, 23, 42, .14); }
.cc-bar[hidden], .cc-overlay[hidden] { display: none; }
.cc-text { margin: 0; flex: 1 1 380px; }
.cc-text a { color: #0757e6; font-weight: 600; }
.cc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cc-btn { border: 0; cursor: pointer; border-radius: 999px; padding: 10px 22px; font: inherit; font-weight: 600; line-height: 1.2; transition: background .15s, transform .15s; }
.cc-btn:hover { transform: translateY(-1px); }
.cc-btn-soft { background: #f1f5f9; color: #1e293b; }
.cc-btn-soft:hover { background: #e2e8f0; }
.cc-btn-primary { background: #0757e6; color: #fff; }
.cc-btn-primary:hover { background: #0646bd; }
.cc-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .55); }
.cc-modal { width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; border-radius: 20px; background: #fff; padding: 24px; color: #1e293b; box-shadow: 0 24px 60px rgba(15, 23, 42, .35); }
.cc-modal h2 { margin: 0; font-size: 20px; font-weight: 700; color: #001550; }
.cc-sub { margin: 6px 0 14px; font-size: 14px; color: #64748b; }
.cc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #e2e8f0; }
.cc-row strong { display: block; font-size: 15px; }
.cc-row span { display: block; margin-top: 2px; font-size: 13px; color: #64748b; }
.cc-switch { position: relative; flex: none; width: 46px; height: 26px; }
.cc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.cc-switch i { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .15s; }
.cc-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.cc-switch input:checked + i { background: #0757e6; }
.cc-switch input:checked + i::after { transform: translateX(20px); }
.cc-switch input:disabled { cursor: not-allowed; }
.cc-switch input:disabled + i { opacity: .55; }
[dir="rtl"] .cc-switch i::after { left: auto; right: 3px; }
[dir="rtl"] .cc-switch input:checked + i::after { transform: translateX(-20px); }
.cc-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
@media (max-width: 640px) { .cc-actions { width: 100%; } .cc-actions .cc-btn { flex: 1 1 auto; } }

/* ── Property map pin (logo marker) ─────────────────────────────── */
.ee-pin { background: none; border: 0; }
.ee-pin-badge { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 3px solid #0757e6; box-shadow: 0 8px 20px rgba(15, 23, 42, .4); }
.ee-pin-badge img { width: 54px; height: auto; display: block; }
.ee-pin-tip { position: absolute; left: 50%; top: 66px; width: 18px; height: 18px; margin-left: -9px; background: #0757e6; transform: rotate(45deg); border-radius: 0 0 4px 0; box-shadow: 4px 4px 8px rgba(15, 23, 42, .25); }