/* Twins — AI Property Concierge (v0.3 centered composer)
   Premium, architectural, restrained. Not a generic SaaS chatbot: no bubble tails,
   no avatars, no vivid accent chrome. All selectors namespaced .tcc so nothing
   existing on the site is affected. */

.tcc {
  --tcc-ink:      #14181c;
  --tcc-soft:     #5c6771;
  --tcc-line:     #e4e7e5;
  --tcc-bg:       #fbfcfb;
  --tcc-panel:    #ffffff;
  --tcc-accent:   #1f580c;   /* the site's existing green, reused */
  --tcc-radius:   2px;

  background: var(--tcc-bg);
  border-top: 1px solid var(--tcc-line);
  border-bottom: 1px solid var(--tcc-line);
  padding: 64px 0 68px;
  color: var(--tcc-ink);
  font-family: inherit;
}

.tcc__wrap { max-width: 1280px; margin: 0 auto; padding: 0 20px; }

.tcc__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Centred masthead ─────────────────────────────────────── */

.tcc__h {
  text-align: center;
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.022em;
  font-weight: 500;
  margin: 0 auto 12px;
  max-width: 20ch;
}

.tcc__sub {
  text-align: center;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--tcc-soft);
  margin: 0 auto 30px;
  max-width: 60ch;
}

/* ── The AI composer: a centred pill, not a search field ──── */

.tcc__composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: var(--tcc-panel);
  border: 1px solid var(--tcc-line);
  border-radius: 28px;
  padding: 8px 8px 8px 18px;
  box-shadow: 0 1px 2px rgba(20,24,28,.04), 0 8px 28px rgba(20,24,28,.06);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tcc__spark { display: flex; align-items: center; height: 42px; color: var(--tcc-accent); flex: 0 0 auto; opacity: .85; }

.tcc__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  resize: none;
  font: inherit;
  font-size: 16px;          /* 16px stops iOS zooming on focus */
  line-height: 1.5;
  color: var(--tcc-ink);
  padding: 11px 0;
  max-height: 160px;
  overflow-y: auto;
  min-width: 0;
}
.tcc__input::placeholder { color: #9aa4ac; }

.tcc__send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: var(--tcc-accent);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
}
.tcc__send:hover { opacity: .9; }
.tcc__send:active { transform: scale(.96); }
.tcc__send[disabled] { opacity: .45; cursor: default; }

/* Focus indication never lands on the textarea itself: a rectangular outline inside
   a rounded pill looked broken. The pill carries the state instead, and every other
   control keeps a normal visible ring. */
.tcc :is(button, a, select):focus-visible,
.tcc .tcc__ri:focus-visible {
  outline: 2px solid var(--tcc-accent);
  outline-offset: 2px;
}

.tcc__input,
.tcc__input:focus,
.tcc__input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
  -webkit-appearance: none;
          appearance: none;
}

/* The whole pill takes the focus treatment, so the component reads as one object.
   :focus-within is a real, perceivable focus indicator, so accessibility holds. */
.tcc__composer:focus-within {
  border-color: var(--tcc-accent);
  box-shadow: 0 0 0 3px rgba(31, 88, 12, .12),
              0 1px 2px rgba(20, 24, 28, .05),
              0 10px 34px rgba(31, 88, 12, .10);
}

/* ── Example prompts ──────────────────────────────────────── */

.tcc__examples {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; margin: 16px auto 0; max-width: 720px;
}
.tcc__eg {
  border: 1px solid var(--tcc-line); background: var(--tcc-panel);
  border-radius: 999px; padding: 7px 15px;
  font: inherit; font-size: 13px; color: var(--tcc-soft); cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}
.tcc__eg:hover { border-color: var(--tcc-accent); color: var(--tcc-ink); }

/* ── Context chips + Refine trigger ───────────────────────── */

.tcc__context {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px; margin: 22px auto 0; max-width: 900px;
}
.tcc__chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d6ded2; background: #f2f6f0;
  border-radius: 999px; padding: 6px 8px 6px 14px;
  font-size: 13px; color: #2f4426; font-weight: 500;
}
.tcc__chipx {
  border: 0; background: transparent; cursor: pointer;
  font-size: 15px; line-height: 1; color: #6d7f64; padding: 0 4px;
}
.tcc__chipx:hover { color: var(--tcc-ink); }

.tcc__refbtn {
  border: 1px solid var(--tcc-line); background: var(--tcc-panel);
  border-radius: 999px; padding: 6px 15px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--tcc-ink); cursor: pointer;
}
.tcc__refbtn:hover { border-color: var(--tcc-accent); }

/* ── Refine panel ─────────────────────────────────────────── */

.tcc__refine {
  max-width: 720px; margin: 14px auto 0;
  border: 1px solid var(--tcc-line); background: var(--tcc-panel);
  border-radius: 10px; padding: 16px 18px;
}
.tcc__refhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; }
.tcc__refclose { border: 0; background: transparent; font: inherit; font-size: 13px; color: var(--tcc-soft); cursor: pointer; }
.tcc__refgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.tcc__rl {
  display: flex; flex-direction: column; gap: 6px; position: relative;
  font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tcc-soft); font-weight: 600;
}
.tcc__ri {
  border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
  background: var(--tcc-bg); padding: 11px 12px;
  font: inherit; font-size: 16px; color: var(--tcc-ink);
  text-transform: none; letter-spacing: normal; font-weight: 400; width: 100%;
}
.tcc__ri:focus { outline: 0; border-color: var(--tcc-accent); }
.tcc__rc { position: absolute; right: 10px; bottom: 12px; font-size: 11px; color: var(--tcc-soft); }
.tcc__refapply {
  margin-top: 14px; border: 0; border-radius: var(--tcc-radius);
  background: var(--tcc-accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; padding: 11px 22px; cursor: pointer;
}

/* ── Conversation thread ──────────────────────────────────── */

/* A conversation, not a document: a centred column, bubbles, and no full-width
   horizontal rules between turns. */
.tcc__thread { max-width: 780px; margin: 30px auto 0; display: flex; flex-direction: column; gap: 20px; }
.tcc__turn { padding: 0; border: 0; display: flex; flex-direction: column; }
.tcc__turn p { margin: 0 0 6px; font-size: 15px; line-height: 1.6; }
.tcc__turn p:last-child { margin-bottom: 0; }

.tcc__who {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tcc-soft); font-weight: 600; margin-bottom: 7px;
}

.tcc__bubble {
  border-radius: 16px;
  padding: 14px 17px;
  max-width: 84%;
  border: 1px solid var(--tcc-line);
}

/* Visitor: right-aligned, tinted, corner notched toward them. */
.tcc__turn--you { align-items: flex-end; }
.tcc__turn--you .tcc__who { align-self: flex-end; }
.tcc__bubble--you {
  background: #f2f6f0;
  border-color: #dde5d9;
  border-bottom-right-radius: 5px;
  color: var(--tcc-ink);
}

/* Concierge: left-aligned, white card, notched toward the sparkle mark. */
.tcc__turn--ai { align-items: flex-start; }
.tcc__bubble--ai {
  background: var(--tcc-panel);
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(20,24,28,.03), 0 6px 20px rgba(20,24,28,.04);
}
.tcc__turn--ai .tcc__who { color: var(--tcc-accent); }

/* Results break out of the bubble: cards need the full column width. */
.tcc__turn .tcc-grid { width: 100%; max-width: none; margin-top: 14px; }
.tcc__q { color: var(--tcc-ink); }
.tcc__qchips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

.tcc__loading { color: var(--tcc-soft); display: flex; align-items: center; gap: 9px; }
.tcc__dots { display: inline-flex; gap: 3px; }
.tcc__dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--tcc-accent);
  opacity: .35; animation: tccPulse 1.1s infinite ease-in-out;
}
.tcc__dots i:nth-child(2) { animation-delay: .16s; }
.tcc__dots i:nth-child(3) { animation-delay: .32s; }
@keyframes tccPulse { 0%,80%,100% { opacity:.25; transform:translateY(0); } 40% { opacity:1; transform:translateY(-3px); } }

.tcc__err { color: #a3341f; }
.tcc__retry {
  border: 1px solid var(--tcc-line); background: var(--tcc-panel); border-radius: var(--tcc-radius);
  padding: 9px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tcc__retry:hover { border-color: var(--tcc-accent); }

.tcc__choices { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tcc__choice {
  text-align: left; border: 1px solid var(--tcc-line); background: var(--tcc-panel);
  border-radius: var(--tcc-radius); padding: 12px 15px;
  font: inherit; font-size: 14px; color: var(--tcc-ink); cursor: pointer;
}
.tcc__choice:hover { border-color: var(--tcc-accent); }

/* ── Result cards ─────────────────────────────────────────── */

.tcc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 18px; margin-top: 18px;
}
.tcc-card {
  border: 1px solid var(--tcc-line); border-radius: 6px; background: var(--tcc-panel);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.tcc-card:hover { box-shadow: 0 8px 26px rgba(20,24,28,.09); transform: translateY(-2px); }
.tcc-card__img { display: block; aspect-ratio: 4/3; background: #eef1ee center/cover no-repeat; }
.tcc-card__b { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tcc-card__b h4 { margin: 0; font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.tcc-card__loc { margin: 0; font-size: 12.5px; color: var(--tcc-soft); }
.tcc-card__f { margin: 0; font-size: 12.5px; color: var(--tcc-soft); }
/* Price sits in its own static row above the actions and can never overlap them.
   position:static defensively undoes any absolute positioning inherited from the
   theme's listing-card price rules. */
.tcc-price {
  margin: 4px 0 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  background: none !important;
  padding: 0 !important;
  z-index: auto !important;
}
.tcc-price span {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  background: none !important;
  color: inherit !important;
  font: inherit !important;
  padding: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* Hover must not move or reveal the price; it is always readable. */
.tcc-card:hover .tcc-price,
.tcc-card:focus-within .tcc-price { opacity: 1; transform: none; }

/* Tier is stated in words, never by colour alone. */
.tcc-tier {
  align-self: flex-start; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px; border: 1px solid;
}
.tcc-tier--exact { color: #1f580c; border-color: #bcd3b2; background: #f1f7ee; }
.tcc-tier--strong { color: #7a5a12; border-color: #e2d3a8; background: #fbf6e9; }
.tcc-tier--alternative { color: #4a5560; border-color: #d8dee4; background: #f5f7f9; }

.tcc-why { margin: 4px 0 0; padding: 0 0 0 14px; font-size: 12px; color: var(--tcc-soft); line-height: 1.5; }
.tcc-why li { margin: 1px 0; }
.tcc-why--con { color: #8a6a5e; }

.tcc-card__a {
  margin-top: auto;
  padding-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  position: relative; z-index: 2;   /* CTAs always sit above any decorative layer */
}
.tcc-view { font-size: 13px; font-weight: 600; color: var(--tcc-accent); text-decoration: none; }
.tcc-view:hover { text-decoration: underline; }
.tcc-save {
  border: 1px solid var(--tcc-line); background: transparent; border-radius: 999px;
  padding: 5px 12px; font: inherit; font-size: 12px; color: var(--tcc-soft); cursor: pointer;
}
.tcc-save.is-on { border-color: var(--tcc-accent); color: var(--tcc-accent); font-weight: 600; }
.tcc-fb { margin: 4px 0 0; font-size: 11px; color: #9aa4ac; }

/* ── Mobile ───────────────────────────────────────────────── */

@media (max-width: 700px) {
  .tcc { padding: 40px 0 44px; }
  .tcc__wrap { padding: 0 16px; }
  .tcc__h { font-size: 25px; max-width: 17ch; }
  .tcc__sub { font-size: 14.5px; margin-bottom: 22px; }
  .tcc__composer { border-radius: 22px; padding: 7px 7px 7px 14px; }
  .tcc__send { width: 40px; height: 40px; }
  .tcc__refgrid { grid-template-columns: 1fr; }
  .tcc__refapply { width: 100%; }
  .tcc-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .tcc-card__b { padding: 11px 12px 13px; }
  .tcc-card__b h4 { font-size: 13.5px; }
}
@media (max-width: 400px) { .tcc-grid { grid-template-columns: 1fr; } }

/* RTL, so the existing /ar/ work is not regressed. */
[dir="rtl"] .tcc__composer { padding: 8px 18px 8px 8px; }
[dir="rtl"] .tcc-why { padding: 0 14px 0 0; }

@media (prefers-reduced-motion: reduce) {
  .tcc *, .tcc *::before { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE VIDEO HERO
   ═══════════════════════════════════════════════════════════════ */

.twins-hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 46vh, 520px);
  overflow: hidden;
  background: #0e1210;
}
.twins-hero__v,
.twins-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.twins-hero__v { object-fit: cover; object-position: center 55%; z-index: 1; }
.twins-hero__img { background: center 55%/cover no-repeat; z-index: 0; }
/* Keeps the header legible over bright footage without dulling the image. */
.twins-hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,14,12,.34) 0%, rgba(10,14,12,.06) 42%, rgba(10,14,12,.16) 100%);
}

@media (max-width: 700px) {
  .twins-hero { height: clamp(240px, 34vh, 340px); }
}
@media (prefers-reduced-motion: reduce) {
  .twins-hero__v { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ONE SEARCH ON THE HOMEPAGE
   The legacy Elementor hero image and the legacy filter bar are hidden on the
   front page only. Markup is untouched, so /sales/ and archive pages keep them.
   ═══════════════════════════════════════════════════════════════ */

.tcc-home body.home .elementor-element-deea008,
html.tcc-home body.home .elementor-element-deea008 { display: none !important; }

.tcc-home body.home .elementor-widget-Wprentals_Advanced_Search,
html.tcc-home body.home .elementor-widget-Wprentals_Advanced_Search { display: none !important; }