/* ==========================================================================
   Avenor Park — header, footer, buttons, section patterns
   ========================================================================== */

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  font-weight: 500;
  letter-spacing: var(--tracking);
  text-transform: capitalize;
  padding: 14px 24px;
  border-radius: var(--radius-btn-lg);
  background: var(--gold);
  color: var(--white);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--gold) 86%, var(--black)); }
.btn:active { transform: translateY(1px); }

.btn--ui {
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  font-weight: 400;
  text-transform: none;
  padding: 12px 40px;
  border-radius: var(--radius-btn);
}
.btn--ghost {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.btn--ghost:hover { background: var(--gold); color: var(--navy); }

/* ---- header ------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding-inline: var(--s-5);
  color: var(--white);
  /* Solid navy on every page and from first paint: the homepage hero now sits
     BELOW the bar (see .hero margin-top) rather than behind a transparent one, so
     there is no reason to start see-through. */
  background: var(--navy);
  box-shadow: 0 1px 0 rgb(203 165 43 / 0.25);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.site-header.is-stuck {
  background: var(--navy);
  box-shadow: 0 1px 0 rgb(203 165 43 / 0.25);
}
/* The transparent state only reads on the homepage, which opens on the dark
   hero. Every other page starts on marble, where white nav text on a
   transparent header is invisible until the visitor scrolls 40px. Browsers
   without :has() simply keep the old behaviour. */
body:not(:has(section.hero)) .site-header {
  background: var(--navy);
  box-shadow: 0 1px 0 rgb(203 165 43 / 0.25);
}

.site-header__logo { flex: 0 0 auto; }
.site-header__logo img { width: 112px; height: 61px; object-fit: contain; }

.site-nav { margin-inline: auto; }
.site-nav ul {
  display: flex;
  align-items: center;
  list-style: none;
}
.site-nav a {
  display: block;
  font-size: var(--fs-nav);
  font-weight: 600;
  /* nowrap is not cosmetic here: line-height is 50px to centre a single line in
     the header, so a two-word item like "Floor Plans" wrapping produced a 50px
     gap between the words. Items must stay on one line or the header breaks. */
  white-space: nowrap;
  line-height: 50px;
  letter-spacing: var(--tracking);
  padding-inline: var(--s-4);
  position: relative;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: var(--s-4);
  right: var(--s-4);
  bottom: 12px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}
.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }

/* Seven nav items plus the logo and the Call Us button overflow the header
   between the mobile breakpoint and roughly 1200px. Tighten the link padding
   rather than dropping an item. */
@media (min-width: 1025px) and (max-width: 1200px) {
  .site-nav a { padding-inline: var(--s-2); }
  .site-nav a::after { left: var(--s-2); right: var(--s-2); }
}

.site-header__cta { flex: 0 0 auto; }

/* ---- mobile nav ---------------------------------------------------------
   A checkbox-free, JS-enhanced disclosure. With JS off the panel is simply
   always open below the header, so every link stays reachable.
   ------------------------------------------------------------------------ */
.nav-toggle { display: none; }

@media (max-width: 1024px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 5px;
    margin-left: auto;
    padding: var(--s-2);
  }
  .nav-toggle span {
    width: 24px; height: 2px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  }
  .site-nav {
    position: absolute;
    inset: var(--header-h) 0 auto;
    background: var(--navy);
    margin: 0;
    padding: var(--s-3) var(--s-5) var(--s-5);
    border-top: 1px solid var(--hairline);
  }
  .site-nav ul { flex-direction: column; align-items: stretch; }
  .site-nav a { line-height: 44px; padding-inline: 0; }
  .site-header__cta { margin-left: var(--s-3); }
}

@media (max-width: 767px) {
  /* The logo is 112x61 inside a 60px header — it overhung the bottom edge by a
     pixel and read as touching it. The CTA was 124px, roughly a third of a
     390px screen. */
  .site-header { padding-inline: var(--s-3); gap: var(--s-2); }
  .site-header__logo img { width: 84px; height: 46px; }
  .site-header__cta .btn--ui { padding: 9px 14px; font-size: 13px; }
  .site-header__cta { margin-left: var(--s-2); }
}
/* Only collapse the panel when JS is present to reopen it. */
@media (max-width: 1024px) {
  .js .site-nav[hidden] { display: none; }
  .js .site-nav { display: block; }
}

/* ---- section backgrounds ------------------------------------------------ */
.section--marble {
  background-color: var(--marble);
  background-image: var(--bg-marble);
  background-size: cover;
  background-position: center;
}
.section--navy {
  background-color: var(--navy);
  background-image: var(--bg-texture);
  background-size: cover;
  background-position: center;
}

/* ---- centred section headers --------------------------------------------
   The original centres the eyebrow and heading on every full-width section —
   why, courtyards, amenities, gallery, layouts, about — and only left-aligns
   them inside the two-column overview and location blocks. It also puts a gold
   rule on BOTH sides of a centred eyebrow, where the default has one on the
   left. Scoped with > so the nested eyebrows in .split columns keep the
   left-aligned treatment.
   ------------------------------------------------------------------------ */
.section--centered > .container > .eyebrow,
.section--centered > .container > h2,
.section--centered > .container > .lede { text-align: center; }

.section--centered > .container > .lede { margin-inline: auto; max-width: 74ch; }

.section--centered > .container > .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding-left: 0;
}
.section--centered > .container > .eyebrow::before,
.section--centered > .container > .eyebrow::after {
  content: "";
  position: static;          /* the default rule is absolutely positioned */
  flex: 0 0 32px;
  width: 32px;
  height: 1px;
  background: var(--gold);
}

/* ---- feature image (the signature 80/15 corner shape) ------------------- */
.feature-img {
  border-radius: var(--radius-feature);
  overflow: hidden;
}
.feature-img img { width: 100%; height: auto; }

/* The NEO BKC source is portrait (1332x2000), so at 605px wide it renders 908px
   tall and towers over the text beside it. The original crops it to a fixed
   500px box (400px on mobile) with object-fit: cover — matched here, which also
   removes ~400px of the height difference against the live page. */
#overview .feature-img img { height: 500px; object-fit: cover; }
@media (max-width: 1024px) {
  #overview .feature-img img { height: 400px; }
}

/* ---- footer ------------------------------------------------------------- */
.site-footer {
  background-color: var(--marble);
  background-image: var(--bg-marble);
  background-size: cover;
  padding: var(--s-7) var(--section-pad-x) var(--s-4);
  /* Measured off the live footer with getComputedStyle, not eyeballed:
     address lines 10px, headings 15px, copyright 14px. The whole block is
     deliberately small — it is legal boilerplate, not content. */
  font-size: 13px;
  line-height: 1.65;
}
.site-footer__grid {
  max-width: var(--container-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-8);
}
@media (max-width: 1024px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .site-footer__grid { grid-template-columns: 1fr; gap: var(--s-6); } }

.site-footer h2 {
  font-family: var(--font-display);
  color: var(--gold-ink);
  font-size: 15px;
  margin-bottom: var(--s-2);
}
.site-footer p { margin-bottom: var(--s-3); }
.site-footer a { color: var(--gold-ink); }
.site-footer a:hover { text-decoration: underline; }

.footer-social {
  display: flex;
  gap: var(--s-2);
  list-style: none;
  margin: var(--s-3) 0;
}
.footer-social a {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
}
.footer-social svg { width: 14px; height: 14px; fill: currentColor; }

.footer-legal {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  font-weight: 600;
  margin-bottom: var(--s-4);
}

.footer-rera { display: flex; gap: var(--s-3); align-items: flex-start; }
.footer-rera img { width: 56px; height: 56px; }

/* The "150px" in the #render directives is a `sizes` hint for srcset selection,
   NOT a layout constraint — with no CSS width these logos rendered at the full
   column width (measured 373x257 and 373x192), which is why the footer towered
   over its own 10px text. Constrained here. */
.site-footer__grid img { width: 110px; height: auto; }
.site-footer__grid section:nth-child(2) img { width: 124px; }
.footer-rera img { width: 56px; }

.footer-address dt { font-weight: 700; display: inline; }
.footer-address dd { display: inline; margin: 0; }
.footer-address div + div { margin-top: 0; }
.footer-address { font-size: 10px; line-height: 1.5; }
.footer-rera p { font-size: 10px; line-height: 1.5; }
.footer-legal { font-size: 12px; }
.site-footer p { margin-bottom: var(--s-2); }

.site-footer__base {
  max-width: var(--container-max);
  margin: var(--s-6) auto 0;
  padding-top: var(--s-3);
  text-align: center;
  font-size: 14px;
}

/* ---- floating contact buttons -------------------------------------------
   Two, not the original's four. The pulse is the same shape as the live site's
   (box-shadow ring expanding to 20px over 2s, infinite), recoloured per button
   so the WhatsApp glyph keeps its own green rather than pulsing gold.
   ------------------------------------------------------------------------ */
.fab {
  position: fixed;
  right: var(--s-4);
  bottom: var(--s-4);
  z-index: 90;              /* under the header (100), over everything else */
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.fab__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.22);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.fab__btn svg { width: 27px; height: 27px; }
.fab__btn:hover { transform: translateY(-2px); }

.fab__btn--agent { background: var(--navy); border: 1px solid var(--gold); }
.fab__btn--agent svg { fill: var(--gold); }
.fab__btn--whatsapp { background: var(--whatsapp); }
.fab__btn--whatsapp svg { fill: var(--white); }

/* The label sits to the left and only exists on pointer devices with room for
   it; the accessible name is on the visually-hidden span either way. */
.fab__btn::after {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + var(--s-2));
  white-space: nowrap;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover: hover) and (min-width: 768px) {
  .fab__btn:hover::after,
  .fab__btn:focus-visible::after { opacity: 1; transform: translateX(0); }
}

/* Pulse: an expanding ring, exactly the live site's timing. Motion is opt-out,
   so it is wrapped rather than bolted on — a visitor who asked for less motion
   gets a static button, not a slower one. */
@keyframes fab-pulse {
  0%   { box-shadow: 0 4px 14px rgb(0 0 0 / 0.22), 0 0 0 0 rgb(var(--fab-rgb) / 0.55); }
  100% { box-shadow: 0 4px 14px rgb(0 0 0 / 0.22), 0 0 0 20px rgb(var(--fab-rgb) / 0); }
}
@media (prefers-reduced-motion: no-preference) {
  .fab__btn--agent    { --fab-rgb: var(--gold-rgb); }
  .fab__btn--whatsapp { --fab-rgb: var(--whatsapp-rgb); }
  .fab__btn { animation: fab-pulse 2s infinite; }
  /* Stagger so the two rings do not fire in lockstep, which reads as flashing
     rather than pulsing. */
  .fab__btn--whatsapp { animation-delay: 1s; }
  .fab__btn:hover { animation-play-state: paused; }
}

@media (max-width: 767px) {
  /* Clear of the fixed CTA bar at the bottom of the viewport. */
  .fab { right: var(--s-3); bottom: calc(var(--s-3) + 56px); gap: var(--s-2); }
  .fab__btn { width: 46px; height: 46px; }
  .fab__btn svg { width: 23px; height: 23px; }
}

/* ---- enquiry lightbox ----------------------------------------------------
   A native <dialog>: the browser handles Esc, focus trapping and inertness.
   Styling only. Hidden entirely without JS, since nothing would open it.
   ------------------------------------------------------------------------ */
.modal {
  padding: 0;
  border: 0;
  background: transparent;
  max-width: min(980px, 94vw);
  /* dvh, not vh. On a phone 100vh is the LARGE viewport — it includes the strip
     behind the browser's URL bar — so a 92vh dialog is taller than anything the
     visitor can actually see and its foot is unreachable. dvh tracks the real
     visible height. vh first as the fallback for browsers without dvh. */
  max-height: 92vh;
  max-height: 92dvh;
  overflow: visible;
}
.modal::backdrop { background: rgb(0 0 0 / 0.62); backdrop-filter: blur(3px); }

.modal__inner {
  position: relative;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  background: var(--navy);
  background-image: var(--bg-texture);
  background-size: cover;
  border: 1px solid var(--gold);
  border-radius: var(--radius-card);
  overflow: hidden;
  max-height: 92vh;
  max-height: 92dvh;
  /* max-height on a GRID CONTAINER does not make its auto row shrink: the row
     is still sized to content, and overflow:hidden then just clips it. That is
     why min-height:0 alone did nothing here — there was no shrinking to allow.
     The real clamp is max-height on .modal__body below, which caps the tall
     item and therefore the row. */
  min-height: 0;
}
@media (max-width: 767px) {
  .modal__inner { grid-template-columns: 1fr; }
}

.modal__brand {
  display: grid;
  place-content: center;
  justify-items: center;      /* the logo was left-aligned in its column */
  gap: var(--s-3);
  padding: var(--s-6);
  border-right: 1px solid var(--hairline);
  text-align: center;
  min-height: 0;
}
/* MUST come after the base rule above, not before it. When the hide lived in an
   earlier media query it lost to this unconditional `display: grid` on equal
   specificity, so the brand panel kept rendering on phones — 218px of logo that
   pushed the submit button past the dialog's clipped bottom edge and made it
   unreachable. On a phone the form is the only thing that matters. */
@media (max-width: 767px) {
  .modal__brand { display: none; }
}
.modal__brand picture { display: block; }
.modal__brand img { display: block; width: 190px; height: auto; margin-inline: auto; }
.modal__rera {
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
  color: var(--gold);
}

.modal__body {
  padding: var(--s-5);
  overflow-y: auto;
  min-height: 0;
  /* This is what actually bounds the dialog — see .modal__inner. Slightly under
     the container's 92vh so the border and radius are never overrun. */
  max-height: 90vh;
  max-height: 90dvh;
  overscroll-behavior: contain;   /* don't scroll the page behind the dialog */
  -webkit-overflow-scrolling: touch;
  color: var(--white);
}
/* h2 is --teal globally, which is close to invisible on the navy panel. */
.modal__body h2 { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--white); }
.modal__body .eyebrow { color: var(--gold); }
.modal__lede { margin: var(--s-1) 0 var(--s-3); font-size: var(--fs-body); }

/* The form is the reason the dialog exists, so it is laid out to FIT rather
   than to scroll: paired fields side by side, tighter gaps, smaller consent
   text. Measured at 1280x720 — the shortest laptop worth designing for — the
   submit button must be visible without touching the scrollbar. */
@media (min-width: 768px) {
  .modal__body .enquiry {
    max-width: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2) var(--s-3);
  }
  /* Direct child only. As a descendant selector this also caught .linkish and
     every button inside the verify card, turning each into its own full-width
     grid row — the chooser pills would stack instead of sitting side by side.
     The submit button is the only button that is a direct child of the form. */
  .modal__body .enquiry .field--consent,
  .modal__body .enquiry .hp,
  .modal__body .enquiry .otp-card,
  .modal__body .enquiry > button,
  .modal__body .enquiry .form__status { grid-column: 1 / -1; }

  /* The card costs real height against a dialog that was measured with only
     about 75px of slack, so it is tightened as far as it goes here: padding
     down, pills down, title down. Colour is not touched — that all comes from
     the card's own palette tokens, which .modal__body .otp-card redefines.
     What is left does not fit. The body still scrolls at 1280x720 and Submit
     sits just below the fold until the visitor scrolls. Accepted rather than
     designed around: verification is a step now, the code box adds height again
     once a code is away, and no compaction keeps a three-stage form inside
     720px. The dialog scrolls; nothing is clipped, and Send OTP — the actual
     next action — is visible. */
  .modal__body .otp-card { padding: var(--s-2); gap: var(--s-1); }
  .modal__body .otp-card__title { font-size: var(--fs-body); }
  .modal__body .otp-seg__opt { padding: 6px 12px; font-size: 13px; }
}
.modal__body .field label { font-size: 13px; }
.modal__body .field input,
.modal__body .field select { padding: 9px 12px; }
.modal__body .field--consent label { font-size: 11.5px; line-height: 1.45; }
.modal__body .enquiry button[type="submit"] { padding: 11px 24px; }
.modal__body label { color: var(--white); }

.modal__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgb(1 31 51 / 0.7);
  color: var(--gold);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__close:hover { background: var(--gold); color: var(--navy); }
.modal__close svg { width: 18px; height: 18px; }

/* Stop the page behind from scrolling while the dialog is up. */
.modal-open, .modal-open body { overflow: hidden; }

/* ---- E-Brochure button ---------------------------------------------------
   Two CTAs plus eight nav items overflow the header below ~1400px, so the
   padding tightens there and the brochure drops out of the header entirely on
   tablet and phone — where it reappears inside the nav panel instead. It is
   never simply removed: the download stays reachable at every width.
   ------------------------------------------------------------------------ */
.site-header__cta { display: flex; align-items: center; gap: var(--s-2); }
.btn--brochure { white-space: nowrap; }

/* Between the mobile breakpoint and ~1400px the full label will not fit
   alongside eight nav items, so it shortens rather than disappearing. */
.btn__short { display: none; }
@media (min-width: 1025px) and (max-width: 1400px) {
  .site-header__cta .btn--ui { padding-inline: 14px; }
  .btn__long { display: none; }
  .btn__short { display: inline; }
}
@media (min-width: 1025px) and (max-width: 1150px) {
  .site-nav a { padding-inline: 7px; }
  .site-nav a::after { left: 7px; right: 7px; }
}
/* Just above the hamburger breakpoint the bold, non-wrapping nav needs about
   1076px of header. Squeeze the last ~50px out of the link and button padding
   rather than letting anything wrap. */
@media (min-width: 1025px) and (max-width: 1099px) {
  .site-nav a { padding-inline: 4px; }
  .site-nav a::after { left: 4px; right: 4px; }
  .site-header { gap: var(--s-3); padding-inline: var(--s-3); }
  .site-header__cta .btn--ui { padding-inline: 10px; }
}

/* In the header only above 1024; in the nav panel at or below it. */
.site-nav__brochure { display: none; }
@media (max-width: 1024px) {
  .btn--brochure { display: none; }
  .site-nav__brochure { display: block; }
  .site-nav__brochure a { color: var(--gold); font-weight: 600; }
}

/* On a phone the brand panel is already gone and the fields cannot pair up, so
   the remaining savings come from the header block. The lede is the first thing
   to go: it repeats what the heading already says. */
@media (max-width: 767px) {
  .modal__body { padding: var(--s-4); max-height: 88vh; max-height: 88dvh; }
  .modal__body h2 { font-size: 20px; margin-bottom: 4px; }
  .modal__lede { display: none; }
  .modal__body .enquiry { gap: var(--s-2); }
  .modal__body .field input,
  .modal__body .field select { padding: 8px 11px; }
}

/* ---- chat panel ----------------------------------------------------------
   Opened by the floating advisor button. No model behind it yet — see
   js/chat.js for where to wire one in.
   ------------------------------------------------------------------------ */
.chat {
  position: fixed;
  right: var(--s-4);
  bottom: calc(var(--s-4) + 124px);   /* clear of the two floating buttons */
  z-index: 95;
  display: flex;
  flex-direction: column;
  width: min(370px, calc(100vw - var(--s-5)));
  max-height: min(560px, calc(100vh - 180px));
  background: var(--white);
  border: 1px solid var(--gold);
  border-radius: var(--radius-card);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.26);
  overflow: hidden;
}
.chat[hidden] { display: none; }

.chat__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background: var(--navy);
  color: var(--white);
}
.chat__avatar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  flex: 0 0 auto;
}
.chat__avatar svg { width: 18px; height: 18px; fill: var(--gold); }
.chat__title {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
}
.chat__title small { font-size: 11px; font-weight: 400; color: var(--gold); }
.chat__close {
  margin-left: auto;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--white);
}
.chat__close:hover { background: rgb(255 255 255 / 0.14); }
.chat__close svg { width: 16px; height: 16px; }

.chat__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--marble);
}
.chat__msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.chat__msg--bot {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--hairline);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.chat__msg--me {
  align-self: flex-end;
  background: var(--navy);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.chat__msg a { color: var(--gold-ink); text-decoration: underline; }
.chat__msg--me a { color: var(--gold); }

.chat__dots { display: inline-flex; gap: 4px; }
.chat__dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-muted);
  animation: chat-dot 1.1s infinite;
}
.chat__dots i:nth-child(2) { animation-delay: 0.15s; }
.chat__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-dot { 0%,60%,100% { opacity: 0.25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat__dots i { animation: none; } }

.chat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--hairline);
  background: var(--white);
}
.chat__chip {
  padding: 5px 11px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  font-size: 12px;
  color: var(--gold-ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.chat__chip:hover { background: var(--gold); color: var(--navy); }

/* Retry sits inside a bot bubble rather than the chip row, so it needs its own
   background — the chip rule above inherits one from .chat__chips. */
.chat__retry {
  display: inline-block;
  margin: 0 2px;
  background: var(--white);
  vertical-align: baseline;
}
.chat__msg-alt { color: var(--ink-muted); }

.chat__form {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border-top: 1px solid var(--hairline);
  background: var(--white);
}
.chat__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 9px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--ink);
  background: transparent;
}
.chat__send {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--gold);
}
.chat__send svg { width: 17px; height: 17px; fill: var(--white); }
.chat__send:hover { background: color-mix(in srgb, var(--gold) 86%, var(--black)); }

@media (max-width: 480px) {
  .chat {
    right: var(--s-2); left: var(--s-2);
    width: auto;
    bottom: calc(var(--s-3) + 168px);   /* above the FABs, which are above the CTA bar */
    max-height: calc(100vh - 250px);
  }
}

/* ---- footer quick links + social ---------------------------------------- */
.footer-links {
  list-style: none;
  columns: 2;
  column-gap: var(--s-4);
}
.footer-links li { margin-bottom: 4px; break-inside: avoid; }
.footer-links a { color: var(--ink); }
.footer-links a:hover { color: var(--gold-ink); text-decoration: underline; }

.footer-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px var(--s-2);
  list-style: none;
  margin: 0 0 var(--s-3);
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto; height: auto;
  border-radius: 0;
  background: none;
  color: var(--ink);
  font-weight: 600;
}
.footer-social svg { width: 17px; height: 17px; flex: 0 0 auto; }
.footer-social--ig svg { fill: var(--brand-instagram); }
.footer-social--fb svg { fill: var(--brand-facebook); }
.footer-social--li svg { fill: var(--brand-linkedin); }
.footer-social--wa svg { fill: var(--whatsapp); }
.footer-social a:hover { text-decoration: underline; }

.footer-contact a { color: var(--gold-ink); font-weight: 600; }

/* ---- footer brand column -------------------------------------------------
   The logo sat 125px left of its column centre and the RERA block was flush
   against it (measured gap: 0px), so the QR read as part of the logo lockup.
   Centre the logo and give the block real separation.
   ------------------------------------------------------------------------ */
.site-footer__grid section[aria-labelledby="ft-brand"] { text-align: center; }
.site-footer__grid section[aria-labelledby="ft-brand"] > picture { display: block; }
.site-footer__grid section[aria-labelledby="ft-brand"] > picture img { margin-inline: auto; }

.site-footer .footer-rera {
  margin-top: var(--s-5);
  text-align: left;
  justify-content: center;
}
/* Re-assert over .site-footer__grid section:nth-child(2) img, which is more
   specific than .footer-rera img and would otherwise size the QR like a logo. */
.site-footer .footer-rera img { width: 56px; height: 56px; }