/* ==========================================================================
   Laguna Phuket Resale — child theme stylesheet
   --------------------------------------------------------------------------
   Section 1  Design tokens (generated from the design system's tokens/*.css —
              139 tokens, verbatim. Regenerate rather than hand-edit.)
   Section 2  Base type and element defaults
   Section 3  Layout primitives (bands, inner containers, auto-fit grids)
   Section 4  Components (cards, chips, spec lists, gallery, forms, nav)
   Section 5  Utilities
   ==========================================================================
   Colours, type, spacing, radii, shadows and motion are final and
   token-backed. Match them exactly.
   ========================================================================== */

/* ===== 1. Design tokens =================================================== */
:root {

  /* ---- Brand core ---- */
  --lg-teal: #14a9a6;
  --lg-magenta: #e6007e;
  --lg-gray: #696968;

  /* ---- Teal scale ---- */
  --teal-50:  #e7f6f5;
  --teal-100: #c5eae9;
  --teal-200: #96dad8;
  --teal-300: #5ec6c3;
  --teal-400: #2fb2af;
  --teal-500: #14a9a6;
  --teal-600: #0f8b89;
  --teal-700: #0d6f6d;
  --teal-800: #0b5352;
  --teal-900: #0a4342;
  --teal-950: #063030;

  /* ---- Magenta scale ---- */
  --magenta-50:  #fce4f1;
  --magenta-100: #fbb9d9;
  --magenta-200: #f77fb8;
  --magenta-300: #f24397;
  --magenta-400: #ee1a83;
  --magenta-500: #e6007e;
  --magenta-600: #c10069;
  --magenta-700: #9c0055;
  --magenta-800: #7a0043;
  --magenta-900: #5c0033;

  /* ---- Neutral / sand scale (warm grey) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f7f6;
  --neutral-100: #eeeeed;
  --neutral-200: #dcdcda;
  --neutral-300: #c2c2bf;
  --neutral-400: #9a9a97;
  --neutral-500: #757573;
  --neutral-600: #696968;
  --neutral-700: #4f4f4e;
  --neutral-800: #383837;
  --neutral-900: #232322;
  --neutral-950: #161615;

  /* ---- Cream / sand (luxury warmth) ---- */
  --cream-50: #fdfcf7;
  --cream-100: #fbf8ee;
  --cream-200: #f3eede;
  --cream-300: #e9e1c9;
  --sand-100: #efe9d8;
  --sand-200: #e3d9bf;

  /* ---- Semantic (kept subtle, coastal) ---- */
  --success-500: #2e9e6b;
  --success-50:  #e6f4ec;
  --warning-500: #d8912a;
  --warning-50:  #fbf1df;
  --error-500:   #cf3a4f;
  --error-50:    #fbe8ea;
  --info-500:    #2f86c4;
  --info-50:     #e7f1fa;

  /* ================= Semantic aliases ================= */
  --color-bg: var(--cream-100);
  --color-bg-white: var(--neutral-0);
  --color-surface: var(--neutral-0);
  --color-surface-cream: var(--cream-100);
  --color-surface-sunk: var(--cream-200);

  --brand-primary: var(--teal-500);
  --brand-primary-hover: var(--teal-600);
  --brand-primary-press: var(--teal-700);
  --brand-accent: var(--magenta-500);
  --brand-accent-hover: var(--magenta-600);

  --text-primary: var(--teal-950);
  --text-heading: var(--teal-900);
  --text-body: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-inverse: var(--neutral-0);
  --text-on-brand: var(--neutral-0);
  --text-link: var(--teal-600);
  --text-link-hover: var(--magenta-500);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-brand: var(--teal-500);

  --focus-ring: var(--teal-400);

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body: 'Lato', 'Open Sans', 'Avenir Next', Avenir, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-ui: var(--font-body);

  /* Weights */
  --fw-light: 300;      /* @kind font */
  --fw-regular: 400;    /* @kind font */
  --fw-medium: 500;     /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */
  --fw-extrabold: 800;  /* @kind font */

  /* Fluid display / heading sizes (serif) */
  --fs-display-1: clamp(3rem, 6vw, 5rem);       /* @kind font */
  --fs-display-2: clamp(2.5rem, 4.5vw, 3.75rem);/* @kind font */
  --fs-h1: clamp(2rem, 3.4vw, 3rem);            /* @kind font */
  --fs-h2: clamp(1.625rem, 2.6vw, 2.25rem);     /* @kind font */
  --fs-h3: clamp(1.375rem, 2vw, 1.75rem);       /* @kind font */
  --fs-h4: 1.375rem;                            /* @kind font */

  /* Body / UI sizes (sans) */
  --fs-lead: 1.25rem;      /* @kind font */
  --fs-body: 1rem;         /* @kind font */
  --fs-sm: 0.875rem;       /* @kind font */
  --fs-xs: 0.75rem;        /* @kind font */
  --fs-eyebrow: 0.8125rem; /* @kind font */

  /* Line heights */
  --lh-tight: 1.08;    /* @kind other */
  --lh-heading: 1.18;  /* @kind other */
  --lh-snug: 1.35;     /* @kind other */
  --lh-body: 1.65;     /* @kind other */

  /* Letter spacing */
  --ls-eyebrow: 0.22em; /* @kind other */
  --ls-caps: 0.14em;    /* @kind other */
  --ls-display: -0.01em;/* @kind other */
  --ls-body: 0;         /* @kind other */

  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* Section rhythm */
  --section-y: clamp(3.5rem, 8vw, 7rem); /* @kind spacing */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem); /* @kind spacing */

  /* Radii — soft, generous corners echoing the rounded wordmark */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Border widths */
  --border-w: 1px;
  --border-w-strong: 1.5px;

  /* Shadows — cool, low, spread (property-card lift) */
  --shadow-xs: 0 1px 2px rgba(6, 48, 48, 0.06);
  --shadow-sm: 0 2px 8px rgba(6, 48, 48, 0.07);
  --shadow-md: 0 8px 24px rgba(6, 48, 48, 0.10);
  --shadow-lg: 0 18px 44px rgba(6, 48, 48, 0.14);
  --shadow-xl: 0 30px 70px rgba(6, 48, 48, 0.18);
  --shadow-focus: 0 0 0 3px rgba(47, 178, 175, 0.45);

  /* Image protection gradient (over photos, for text legibility) */
  --scrim-bottom: linear-gradient(to top, rgba(6,48,48,0.78) 0%, rgba(6,48,48,0.35) 38%, rgba(6,48,48,0) 72%); /* @kind other */
  --scrim-full: linear-gradient(to top, rgba(6,48,48,0.70), rgba(6,48,48,0.15)); /* @kind other */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-med: 260ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */}

/* ==========================================================================
   2. BASE
   This stylesheet loads AFTER Elementor's kit stylesheet, so plain selectors
   win on source order. Nothing here needs !important.
   ========================================================================== */

body {
  background: var(--color-bg);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: var(--text-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); }

:where(a, button, input, select, textarea):focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   Every band is a full-width container holding one boxed inner container, and
   every multi-column block is an auto-fit grid, so it reflows with no
   breakpoint hacks.
   -------------------------------------------------------------------------- */

.lg-band { padding-block: var(--section-y); }
.lg-inner { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }

.lg-surface-cream { background: var(--color-surface-cream); }
.lg-surface-dark { background: var(--teal-950); color: var(--text-inverse); }
.lg-surface-dark :is(h1, h2, h3, h4) { color: var(--text-inverse); }

.lg-grid { display: grid; gap: var(--space-6); }
.lg-grid--cards   { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.lg-grid--tiles   { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.lg-grid--amenity { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-5); }

.lg-split { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) {
  .lg-split { grid-template-columns: minmax(0, 1fr) 380px; }
  .lg-split__aside { align-self: start; position: sticky; top: 132px; }
}

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   4. THE ELEMENTOR CONTRACT
   Elementor puts a widget's custom classes on the WRAPPER div; the real element
   (a.elementor-button, .elementor-heading-title) sits inside it. So a wrapper
   NEVER paints itself - it only lays out - and every visual rule below targets
   the element within. Getting this backwards paints the pill twice.
   -------------------------------------------------------------------------- */

.elementor-widget[class*="lg-"] {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  transform: none;
}

/* A button or chip wrapper shrinks to its content so rows of them sit inline. */
.elementor-widget.lg-btn,
.elementor-widget.lg-chip { width: auto; max-width: 100%; }

/* Elementor sets its own heading sizes from the kit; these components carry
   their own scale, so restate family, size, weight and tracking together. */
.elementor-widget[class*="lg-"] .elementor-heading-title { font-family: var(--font-body); }

/* --------------------------------------------------------------------------
   5. TYPE
   Sizes come from the Elementor kit (the tokens are set there as clamp values).
   These rules cover the pieces the kit has no concept of.
   -------------------------------------------------------------------------- */

.elementor-element.lg-eyebrow .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: var(--brand-primary);
  display: block;
}
.elementor-widget.lg-eyebrow { margin-bottom: var(--space-3); }

/* On a photograph or a dark band the eyebrow reads in pale teal. */
.elementor-element.lg-surface-dark .lg-eyebrow .elementor-heading-title,
.elementor-element.lg-eyebrow--light .elementor-heading-title { color: var(--teal-200); }

/* --------------------------------------------------------------------------
   6. BUTTONS
   Sizes and variants are the Button component's own spec:
     sm 8/18 fs-xs - md 12/26 fs-sm - lg 16/36 fs-body
   -------------------------------------------------------------------------- */

.elementor-element.lg-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 12px 26px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.elementor-element.lg-btn .elementor-button:active { transform: scale(0.97); }

.elementor-element.lg-btn--sm .elementor-button { padding: 8px 18px; font-size: var(--fs-xs); }
.elementor-element.lg-btn--lg .elementor-button { padding: 16px 36px; font-size: var(--fs-body); }

.elementor-element.lg-btn--primary .elementor-button {
  background-color: var(--brand-primary);
  color: var(--text-on-brand);
}
.elementor-element.lg-btn--primary .elementor-button:hover {
  background-color: var(--brand-primary-hover);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-md);
}

.elementor-element.lg-btn--accent .elementor-button {
  background-color: var(--brand-accent);
  color: var(--text-on-brand);
}
.elementor-element.lg-btn--accent .elementor-button:hover {
  background-color: var(--brand-accent-hover);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-md);
}

/* "secondary" in the component: a teal outline that fills with the teal tint. */
.elementor-element.lg-btn--outline .elementor-button {
  background-color: transparent;
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.elementor-element.lg-btn--outline .elementor-button:hover {
  background-color: var(--teal-50);
  color: var(--brand-primary);
}

/* "onPhoto": translucent white over imagery, never a solid fill. */
.elementor-element.lg-btn--ghost-light .elementor-button {
  background-color: rgba(255,255,255,0.16);
  color: #fff;
  border-color: rgba(255,255,255,0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.elementor-element.lg-btn--ghost-light .elementor-button:hover {
  background-color: rgba(255,255,255,0.28);
  color: #fff;
}

/* --------------------------------------------------------------------------
   7. CHIPS - the property-type entry points and the JetSmartFilters facets
   -------------------------------------------------------------------------- */

.elementor-element.lg-chip .elementor-button,
.lg-chips .jet-checkboxes-list__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-default);
  background-color: var(--color-surface);
  color: var(--text-heading);
  transition: background-color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.elementor-element.lg-chip .elementor-button:hover,
.lg-chips .jet-checkboxes-list__item:hover .jet-checkboxes-list__button {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background-color: var(--color-surface);
}

/* JetSmartFilters renders label > input + button; the label IS the chip, so the
   native box and its tick are hidden and the button carries the pill. */
.lg-chips .jet-checkboxes-list { width: 100%; }
.lg-chips .jet-checkboxes-list-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}
.lg-chips .jet-checkboxes-list__row { margin: 0; flex: 0 0 auto; width: auto; max-width: 100%; }
.lg-chips .jet-checkboxes-list__item { margin: 0; display: block; cursor: pointer; position: relative; }
.lg-chips .jet-checkboxes-list__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.lg-chips .jet-checkboxes-list__decorator { display: none; }
.lg-chips .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}
.lg-chips .jet-checkboxes-list__input:focus-visible + .jet-checkboxes-list__button { box-shadow: var(--shadow-focus); }

.jet-filter .jet-filter-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  margin-bottom: var(--space-2);
  display: block;
}

/* --------------------------------------------------------------------------
   8. THE PROJECT CARD
   Straight from the ProjectCard component: a 4:3 crop that scales on hover, the
   sub-brand mark knocked out over a bottom scrim, a hairline rule above the spec
   row, and a footer pairing the price with the View Project action.
   -------------------------------------------------------------------------- */

.lg-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.lg-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.lg-card, .lg-card a, .lg-card a:hover { color: inherit; text-decoration: none; }

/* --- Media ---------------------------------------------------------------- */
.lg-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  flex: none;
  padding: 0;
  display: block;
}
.elementor-element.lg-card__media .elementor-widget-theme-post-featured-image,
.elementor-element.lg-card__media .elementor-widget-theme-post-featured-image .elementor-widget-container,
.elementor-element.lg-card__media .elementor-widget-theme-post-featured-image a {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}
.lg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.lg-card:hover .lg-card__media img { transform: scale(1.06); }

/* The scrim protects the knocked-out sub-brand mark sitting on the photograph. */
.lg-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-bottom);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
}

.elementor-widget.lg-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  width: auto;
}
.elementor-element.lg-badge .elementor-heading-title {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  color: var(--teal-800);
}

.elementor-widget.lg-card__logo {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  width: auto;
}
.lg-card__logo img {
  height: 34px;
  width: auto;
  object-fit: contain;
  /* designer-supplied white logo (logo_white) — no knockout filter, it flattens logos drawn on a solid panel */
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}

/* --- Body ----------------------------------------------------------------- */
.lg-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.elementor-element.lg-card__body > .elementor-element { width: 100%; }

.elementor-element.lg-card__title .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-heading);
  margin: 0;
}

/* --- Icon rows ------------------------------------------------------------ */
.elementor-element.lg-card__loc .elementor-heading-title,
.elementor-element.lg-card__spec .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}
.elementor-element.lg-card__loc .elementor-heading-title { font-size: var(--fs-sm); color: var(--text-secondary); gap: 5px; }
.elementor-element.lg-card__spec .elementor-heading-title { font-size: var(--fs-sm); color: var(--text-body); }

.elementor-element.lg-card__loc .elementor-heading-title::before,
.elementor-element.lg-card__spec .elementor-heading-title::before {
  content: "";
  flex: none;
  display: inline-block;
  background-color: var(--brand-primary);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.elementor-element.lg-card__loc .elementor-heading-title::before { width: 15px; height: 15px; }
.elementor-element.lg-card__spec .elementor-heading-title::before { width: 16px; height: 16px; }

/* The hairline that separates the specs from the title block. */
.lg-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 0;
  border-top: 1px solid var(--border-subtle);
}

/* --- Footer: price and the onward action ---------------------------------- */
.lg-card__foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: 6px;
}
.elementor-element.lg-card__caption .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
}
.elementor-element.lg-card__price .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: var(--fw-extrabold);
  color: var(--brand-primary);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
}
.elementor-element.lg-card__cta .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard);
}
.elementor-element.lg-card:hover .lg-card__cta .elementor-heading-title { color: var(--brand-accent); }
.elementor-element.lg-card__cta .elementor-heading-title::after {
  content: "";
  flex: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* The loop grid must let each card fill its cell so footers align. */
.elementor-loop-container .e-loop-item { display: flex; }
.elementor-loop-container .e-loop-item > .elementor-element { width: 100%; }

/* The card icons, drawn as CSS masks so a single asset takes the brand teal on
   a spec row and currentColor on the View Project action. Paths are the
   component's own. */

.elementor-element.lg-ico--pin .elementor-heading-title::before,
.elementor-element.lg-ico--pin .elementor-heading-title::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200zM12%2010a2.5%202.5%200%201%200%200-5%202.5%202.5%200%200%200%200%205z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200zM12%2010a2.5%202.5%200%201%200%200-5%202.5%202.5%200%200%200%200%205z%22%2F%3E%3C%2Fsvg%3E");
}

.elementor-element.lg-ico--bed .elementor-heading-title::before,
.elementor-element.lg-ico--bed .elementor-heading-title::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%204v16M2%208h18a2%202%200%200%201%202%202v10M2%2017h20M6%208V6a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%204v16M2%208h18a2%202%200%200%201%202%202v10M2%2017h20M6%208V6a2%202%200%200%201%202-2h4a2%202%200%200%201%202%202v2%22%2F%3E%3C%2Fsvg%3E");
}

.elementor-element.lg-ico--bath .elementor-heading-title::before,
.elementor-element.lg-ico--bath .elementor-heading-title::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012V5a2%202%200%200%201%202-2%202%202%200%200%201%202%202M2%2012h20v3a4%204%200%200%201-4%204H6a4%204%200%200%201-4-4zM6%2019l-1%202M18%2019l1%202%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012V5a2%202%200%200%201%202-2%202%202%200%200%201%202%202M2%2012h20v3a4%204%200%200%201-4%204H6a4%204%200%200%201-4-4zM6%2019l-1%202M18%2019l1%202%22%2F%3E%3C%2Fsvg%3E");
}

.elementor-element.lg-ico--home .elementor-heading-title::before,
.elementor-element.lg-ico--home .elementor-heading-title::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209.5L12%203l9%206.5M5%2021V10l7-5%207%205v11H5z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%209.5L12%203l9%206.5M5%2021V10l7-5%207%205v11H5z%22%2F%3E%3C%2Fsvg%3E");
}

.elementor-element.lg-ico--arrow .elementor-heading-title::before,
.elementor-element.lg-ico--arrow .elementor-heading-title::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14M13%206l6%206-6%206%22%2F%3E%3C%2Fsvg%3E");
}

/* --------------------------------------------------------------------------
   9. HEADER
   Per Chrome.jsx: a 76px row on translucent cream that turns near-opaque white
   once the page scrolls, with the wordmark at 40px.
   -------------------------------------------------------------------------- */

.lg-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--dur-med) var(--ease-standard),
              border-color var(--dur-med) var(--ease-standard);
}
.lg-header.is-scrolled,
.elementor-element.lg-header.elementor-sticky--effects {
  background-color: rgba(255,255,255,0.92);
  border-bottom-color: var(--border-subtle);
}
.lg-header__logo img { height: 40px; width: auto; object-fit: contain; }

/* The header nav's own type, colour, spacing and the magenta hover underline all
   live in section 17 - Elementor's nav-menu stylesheet writes item padding on a
   :hover selector, so every state has to be restated in one place or the link
   jumps when the pointer lands on it. Nothing about the nav is set here. */

/* Make an enquiry is the pink button on desktop and the drawer's last item
   below 1025px. Elementor's Hide On Tablet/Mobile control emits a bare
   .elementor-hidden class in this version, which hides at EVERY width, so the
   swap is done with media queries instead. */
@media (max-width: 1024px) {
  .lg-header .lg-btn { display: none; }
}
@media (min-width: 1025px) {
  .lg-header__nav .lg-nav-enquire { display: none; }
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */

.lg-footer { background: var(--teal-950); }
.lg-footer__address p { max-width: 34ch; }

.elementor-element.lg-footer__head .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-200);
}
.elementor-widget.lg-footer__head { margin-bottom: var(--space-2); }

.elementor-element.lg-footer__menu .elementor-item {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
  padding: 0;
}
.elementor-element.lg-footer__menu .elementor-nav-menu--layout-vertical > ul > li { margin-bottom: var(--space-3); }
.lg-footer a { color: rgba(255,255,255,0.75); }
.lg-footer a:hover { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   11. HOMEPAGE BLOCKS
   -------------------------------------------------------------------------- */

.elementor-element.lg-stat__figure .elementor-heading-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand-primary);
}
.elementor-element.lg-stat__label .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}

.lg-pillar {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 340px;
  box-shadow: var(--shadow-md);
}
.elementor-element.lg-pillar__kicker .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-200);
}

.lg-facility {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.lg-facility img { aspect-ratio: 16 / 10; object-fit: cover; display: block; width: 100%; }

.elementor-element.lg-amenity .elementor-icon-box-title,
.elementor-element.lg-amenity .elementor-icon-box-title span {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-body);
}

.lg-benefit {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
}
.elementor-element.lg-benefit .elementor-icon-box-title,
.elementor-element.lg-benefit .elementor-icon-box-title span { color: var(--text-inverse); }
.elementor-element.lg-benefit .elementor-icon-box-description { color: rgba(255,255,255,0.75); }

.lg-logo-strip img { max-height: 54px; width: auto; object-fit: contain; margin-inline: auto; }

/* The listing search bar overlaps the hero by 64px, per the design. */
.lg-searchbar-band { margin-top: -64px; position: relative; z-index: 3; }
@media (max-width: 767px) { .lg-searchbar-band { margin-top: -32px; } }

/* --------------------------------------------------------------------------
   12. FORMS
   -------------------------------------------------------------------------- */

.lg-enquiry { background: var(--color-surface); }
.lg-field { display: flex; flex-direction: column; gap: var(--space-2); }

.wpcf7 label,
.lg-field > label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}
.lg-req { color: var(--error-500); }

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select,
.jet-select select,
.jet-search__field {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  background: var(--color-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  appearance: none;
}
.wpcf7 :is(input, textarea, select):focus,
.jet-select select:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--shadow-focus);
}
.wpcf7 textarea { min-height: 120px; resize: vertical; }
.wpcf7 ::placeholder { color: var(--text-muted); }

.wpcf7 .wpcf7-checkbox,
.wpcf7 .wpcf7-radio { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.wpcf7 .wpcf7-list-item { margin: 0; }
.wpcf7 .wpcf7-list-item-label { font-weight: var(--fw-regular); font-size: var(--fs-sm); }

.wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 14px 26px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: var(--text-on-brand);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.wpcf7 input[type="submit"]:hover { background: var(--brand-accent-hover); }

.wpcf7 .wpcf7-not-valid-tip { color: var(--error-500); font-size: var(--fs-xs); }
.wpcf7 .wpcf7-response-output {
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  background: var(--info-50);
  color: var(--info-500);
  margin: var(--space-4) 0 0;
}
.wpcf7 form.sent .wpcf7-response-output { background: var(--success-50); color: var(--success-500); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output { background: var(--error-50); color: var(--error-500); }

/* --------------------------------------------------------------------------
   13. PROJECT PAGE
   -------------------------------------------------------------------------- */

.lg-sectionnav {
  position: sticky;
  top: 76px;
  z-index: 20;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-block: 1px solid var(--border-subtle);
}
.lg-sectionnav__list {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  max-width: var(--container-max);
}
.lg-sectionnav__list::-webkit-scrollbar { display: none; }
.lg-sectionnav a {
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
/*  letter-spacing: var(--ls-caps);
   text-transform: uppercase; */
  color: var(--text-secondary);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}
.lg-sectionnav a:hover { color: var(--brand-primary); }
.lg-sectionnav a[aria-current="true"] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }

[id^="section-"] { scroll-margin-top: 150px; }

.lg-project-hero__logo img { max-height: 84px; width: auto; }

/* The Residence: large icon stats. The Development: a plain definition list.
   Two different components on purpose - one varies by unit, one is reference. */
.lg-specrow { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
.lg-spec { text-align: center; }
.lg-spec__icon { color: var(--brand-primary); font-size: 1.75rem; margin-bottom: var(--space-2); }
.lg-spec__value { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-heading); }
.lg-spec__label { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }

.lg-speclist { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.lg-speclist dt,
.lg-speclist dd {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
  font-size: var(--fs-sm);
}
.lg-speclist dt { color: var(--text-muted); letter-spacing: var(--ls-caps); text-transform: uppercase; font-size: var(--fs-xs); }
.lg-speclist dd { color: var(--text-body); font-weight: var(--fw-semibold); }

/* Never invent a number: an unconfirmed spec reads "On request", quietly. */
.lg-on-request { color: var(--text-muted); font-weight: var(--fw-regular); font-style: italic; }
.lg-pending-notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--warning-50);
  border-left: 3px solid var(--warning-500);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--neutral-700);
}
.lg-illustrative { font-size: var(--fs-xs); color: var(--text-muted); font-style: italic; margin-top: var(--space-2); }

.lg-panel {
  background: var(--color-surface-cream);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}
.lg-panel p { margin: 0 0 var(--space-3); }
.lg-panel p:last-child { margin-bottom: 0; }

.lg-amenity { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.lg-amenity__icon { color: var(--brand-primary); width: 1.5rem; text-align: center; flex: none; }

/* Tabs: unit types and the gallery panes. These are real <button> elements for
   accessibility, so they must be stripped of the theme's button styling. */
.lg-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); border-bottom: 1px solid var(--border-subtle); }
.lg-tabs .lg-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
}
.lg-tabs .lg-tab:hover { color: var(--brand-primary); }
.lg-tabs .lg-tab[aria-selected="true"] { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.lg-tabpanel[hidden] { display: none; }

.lg-unit { padding-top: var(--space-5); }
.lg-unit__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.lg-unit__label { display: block; font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-muted); }
.lg-unit__value { display: block; font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-heading); margin-top: 2px; }
.lg-unit__prose { max-width: 68ch; color: var(--text-secondary); }
.lg-unit__plan { margin: var(--space-5) 0 0; }
.lg-unit__plan img { border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

.lg-plan { margin: 0; }
.lg-plan img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); cursor: zoom-in; }

/* --- Gallery: Slick main frame paired to a synced thumbnail strip ---------- */
.lg-gallery { position: relative; margin-top: var(--space-5); }
.lg-gallery__main { border-radius: var(--radius-lg); overflow: hidden; background: var(--neutral-100); }
.lg-gallery__main .slick-slide img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lg-gallery__counter {
  position: absolute;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  background: rgba(6,48,48,0.7);
  color: var(--text-inverse);
  font-size: var(--fs-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.lg-gallery__thumbs { margin-top: var(--space-3); }
.lg-gallery__thumbs .slick-list { margin: 0 calc(var(--space-1) * -1); }
.lg-gallery__thumbs .slick-slide { padding: 0 var(--space-1); cursor: pointer; }
.lg-gallery__thumbs .slick-slide img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  opacity: 0.55;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.lg-gallery__thumbs .slick-current img,
.lg-gallery__thumbs .slick-slide:hover img { opacity: 1; }

/* Slick hides its arrow labels with font-size:0; the kit re-inflates every bare
   button on the site, so the words Previous and Next appear over the photo. */
.lg-gallery .slick-prev,
.lg-gallery .slick-next,
.lg-hero-slides .slick-prev,
.lg-hero-slides .slick-next {
  width: 44px;
  height: 44px;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  z-index: 2;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  color: transparent;
  text-transform: none;
}
.lg-gallery .slick-prev { left: var(--space-4); }
.lg-gallery .slick-next { right: var(--space-4); }
.lg-gallery .slick-prev::before,
.lg-gallery .slick-next::before {
  font-family: "slick", sans-serif;
  font-size: 20px;
  line-height: 1;
  color: var(--teal-800);
  opacity: 1;
}

.lg-gallery__video {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius-lg);
  display: block;
  margin-top: var(--space-5);
  background: var(--neutral-900);
}

/* --- Location, benefits, FAQ ---------------------------------------------- */
.lg-location { display: grid; gap: var(--space-6); }
.lg-location__item h3 { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-heading); margin: 0 0 var(--space-2); }
.lg-location__item p { max-width: 72ch; color: var(--text-secondary); margin: 0; }
.lg-location__map { margin-top: var(--space-6); }
.lg-location__map iframe { width: 100%; min-height: 380px; border: 0; border-radius: var(--radius-lg); }

.lg-benefit--plain {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.lg-benefit__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.lg-benefit__title { font-family: var(--font-display); font-size: var(--fs-h4); color: var(--text-heading); margin: 0 0 var(--space-2); }
.lg-benefit__text { font-size: var(--fs-sm); color: var(--text-secondary); margin: 0; }

.lg-faq { border-top: 1px solid var(--border-subtle); }
.lg-faq__item { border-bottom: 1px solid var(--border-subtle); }
.lg-faq .lg-faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-heading);
  cursor: pointer;
}
.lg-faq .lg-faq__q:hover { color: var(--brand-primary); }
.lg-faq__marker { flex: none; font-family: var(--font-body); font-size: 1.5rem; line-height: 1; color: var(--brand-primary); transition: transform var(--dur-med) var(--ease-standard); }
.lg-faq__q[aria-expanded="true"] .lg-faq__marker { transform: rotate(45deg); }
.lg-faq__a { padding-bottom: var(--space-5); color: var(--text-secondary); max-width: 68ch; }
.lg-faq__a[hidden] { display: none; }

.lg-aside { display: grid; gap: var(--space-5); }

/* The empty state, so a filter combination that matches nothing still reads. */
.jet-filters-not-found,
.lg-empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   14. FIDELITY CORRECTIONS - measured against the design system's own render
   (Chromium, 1440px). Every value below is a number taken from that render,
   not an estimate. These sit last so they win on order as well as weight.
   -------------------------------------------------------------------------- */

/* The eyebrow carries a short rule before the words - Eyebrow.jsx draws it as
   a 28x1 line in the current colour, set half a line above the baseline. */
.elementor-element.lg-eyebrow .elementor-heading-title::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background-color: currentColor;
  opacity: 0.9;
}

/* Hero lede: Lato Light 20/27 at 620px, never the body weight. */
.elementor-element.lg-hero-lead .elementor-widget-container,
.elementor-element.lg-hero-lead p {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
  color: rgba(255,255,255,0.92);
  max-width: 620px;
  margin: 0;
}

/* A second badge on a card is the magenta tint, per ProjectCard's tone rule. */
.elementor-element.lg-badge--magenta .elementor-heading-title {
  background: var(--magenta-50);
  color: var(--magenta-700);
}

/* Elementor's own horizontal-menu rule is .a .b > li, so the enquiry item needs
   an element in the selector too or it stays visible next to the button. */
@media (min-width: 1025px) {
  .lg-header__nav .elementor-nav-menu > li.lg-nav-enquire { display: none; }
}
@media (max-width: 1024px) {
  .lg-header .elementor-widget.lg-btn { display: none; }
}

/* Badges now live in their own row inside the media frame, so the pill itself
   no longer positions - the row does, and a second pill sits beside the first. */

.elementor-widget.lg-badge { position: static; width: auto; }

/* The design's boxed band is 1280 wide with a 48px gutter inside it, so the
   text column starts 128px in at 1440 - not hard against the 1280 edge. */
.e-con.e-con-boxed > .e-con-inner { padding-inline: var(--gutter); }
.e-con-boxed .e-con-boxed > .e-con-inner { padding-inline: 0; }

/* The footer column heads are eyebrows in weight and colour but not in shape -
   the design draws no rule beside them. */
.elementor-element.lg-footer__head .elementor-heading-title::before { content: none; }

/* Legal line: a hairline, then two quiet lines of sentence-case text. */
.elementor-element.lg-footer__legal {
  border-top: 1px solid rgba(255,255,255,0.12);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.elementor-element.lg-footer__legal p { margin: 0; }

/* --- Listing filter panel, measured off the design's ResaleListing render ---
   Labels are 12/700 caps at 0.12em in the muted grey, not sentence-case body
   text; the chips are 600 not bold; the active facet is magenta, the way the
   listing page draws it (the homepage's type links stay teal). */
.jet-filter .jet-filter-label,
.jet-filters-group .jet-filter-label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.elementor-element.lg-chips .jet-checkboxes-list__button,
.elementor-element.lg-chip .elementor-button { font-weight: var(--fw-semibold); }

.elementor-element.lg-chips .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--text-on-brand);
}

/* Selects: 48px tall on an 8px radius, with the caret drawn rather than left to
   the platform, so Location and Price match the chips beside them. */
.jet-select select,
.jet-sorting select,
.jet-filter select {
  min-height: 48px;
  padding: 0 42px 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background-color: var(--color-surface);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23757573" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  font-size: var(--fs-body);
  color: var(--text-muted);
  appearance: none;
}

/* The sorting control sits on the row above the grid, right aligned. */
.jet-sorting { display: flex; justify-content: flex-end; }
.jet-sorting select { min-width: 200px; }

/* Facet selects fill their column rather than shrink to their longest option. */
.jet-filter select,
.jet-select select { width: 100%; max-width: 340px; }
@media (max-width: 880px) {
}
.jet-filter, .jet-select, .jet-select__control { width: 100%; }

/* Elementor lays containers out as columns and stretches every child to full
   width, so the spec row and the card footer need both the direction and the
   child width said out loud or bed/bath/type stack and the price sits above
   the action instead of beside it. */

.elementor-element.lg-card__specs > .elementor-element,
.elementor-element.lg-card__foot > .elementor-element,
.elementor-element.lg-badges > .elementor-element {
  width: auto;
  max-width: 100%;
  flex: 0 0 auto;
}
.elementor-element.lg-card__foot > .elementor-element:first-child { flex: 1 1 auto; }

/* --- Project page: The Residence / The Development read as white cards ------
   24/32 inside an 18px radius, with a quiet grey label rather than a heading. */
.elementor-element.lg-factcard {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
}
.elementor-element.lg-factcard__label .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
}

/* The badge row is a plain flex row; only the card's copy of it is pinned into
   the photograph, so the project hero can reuse the same pills. */

/* Project hero: the facts sit left, the price block right, both on the baseline. */
.elementor-element.lg-project-hero__meta {
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-5);
  padding: 0;
  width: 100%;
}
.elementor-element.lg-project-hero__facts {
  --flex-direction: row;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 8px;
  padding: 0;
  width: auto;
}
.elementor-element.lg-project-hero__facts > .elementor-element { width: auto; flex: 0 0 auto; }
.elementor-element.lg-project-hero__price {
  align-items: flex-end;
  text-align: right;
  padding: 0;
  width: auto;
}
.elementor-element.lg-hero-meta .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255,255,255,0.92);
}
.elementor-element.lg-hero-meta .elementor-heading-title::before {
  content: '';
  flex: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.elementor-element.lg-project-hero__kicker .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-200);
  line-height: 1.4;
}
.elementor-element.lg-project-hero__price .elementor-heading-title {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: var(--fw-extrabold);
  letter-spacing: 0;
  text-transform: none;
  color: #FFFFFF;
  line-height: 1.2;
}

/* The kicker sits inside the price block, so it has to outrank the price rule
   that follows it in the cascade. */
.elementor-element.lg-project-hero__price .elementor-element.lg-project-hero__kicker .elementor-heading-title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--teal-200);
  line-height: 1.4;
}

/* A project with no badges leaves the row empty; an empty row still eats a gap. */
.elementor-element.lg-badges:empty { display: none; }

/* The hero's scroll affordance: centred on the fold, quiet, with a chevron. */
.elementor-element.lg-scrollcue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: auto;
  padding: 0;
  align-items: center;
  z-index: 2;
  pointer-events: none;
}
.elementor-element.lg-scrollcue__label .elementor-heading-title {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,0.82);
  line-height: 1.4;
  text-align: center;
}
.elementor-element.lg-scrollcue__label .elementor-heading-title::after {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  margin: 6px auto 0;
  background-color: currentColor;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
@media (max-width: 767px) { .elementor-element.lg-scrollcue { display: none; } }

/* Mobile header: the nav collapses to a toggle, which belongs on the far right
   once the enquiry button has stepped aside. */
@media (max-width: 1024px) {
  .elementor-element.lg-header__nav { margin-left: auto; width: auto; }
  .elementor-element.lg-header__nav .elementor-menu-toggle { margin-left: auto; }
}

/* A boxed container lays its children out on .e-con-inner, not on itself. */
@media (max-width: 1024px) {
  .elementor-element.lg-header__nav { margin-left: auto; }
}

/* The flexible spacer between the nav and the enquiry button has nothing to
   separate once the button steps aside, and it was holding the toggle left. */
@media (max-width: 1024px) { }
.elementor-element.lg-amenity {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 22px 14px;
}
.elementor-element.lg-amenity .elementor-icon-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.elementor-element.lg-amenity .elementor-icon-box-icon { margin: 0; }
.elementor-element.lg-amenity .elementor-icon-box-title,
.elementor-element.lg-amenity .elementor-icon-box-title span {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-body);
  margin: 0;
}
.elementor-element.lg-benefit {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: 16px 24px;
}
.elementor-element.lg-benefit .elementor-icon-box-wrapper {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  text-align: left;
}
.elementor-element.lg-benefit .elementor-icon-box-icon { margin: 0; }
.elementor-element.lg-benefit .elementor-icon-box-title,
.elementor-element.lg-benefit .elementor-icon-box-title span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: #FFFFFF;
  margin: 0 0 5px;
}
.elementor-element.lg-benefit .elementor-icon-box-description {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

/* The icon chip: a 52px tint circle with the glyph masked into it. */
.elementor-element[class*="lg-ic--"] .elementor-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  color: var(--brand-primary);
  font-size: 0;
  line-height: 0;
}
.elementor-element[class*="lg-ic--"] .elementor-icon > * { display: none; }
.elementor-element[class*="lg-ic--"] .elementor-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.elementor-element.lg-benefit .elementor-icon { background: rgba(255,255,255,0.10); color: var(--teal-200); }

.elementor-element.lg-ic--waves .elementor-icon::before,
.lg-ic--waves .lg-amenity__icon::before,
.lg-ic--waves .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012q2.5%202%205%200t5%200%205%200%205%200%22%2F%3E%3Cpath%20d%3D%22M2%2019q2.5%202%205%200t5%200%205%200%205%200%22%2F%3E%3Cpath%20d%3D%22M2%205q2.5%202%205%200t5%200%205%200%205%200%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2012q2.5%202%205%200t5%200%205%200%205%200%22%2F%3E%3Cpath%20d%3D%22M2%2019q2.5%202%205%200t5%200%205%200%205%200%22%2F%3E%3Cpath%20d%3D%22M2%205q2.5%202%205%200t5%200%205%200%205%200%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--dumbbell .elementor-icon::before,
.lg-ic--dumbbell .lg-amenity__icon::before,
.lg-ic--dumbbell .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.596%2012.768a2%202%200%201%200%202.829-2.829l-1.768-1.767a2%202%200%200%200%202.828-2.829l-2.828-2.828a2%202%200%200%200-2.829%202.828l-1.767-1.768a2%202%200%201%200-2.829%202.829z%22%2F%3E%3Cpath%20d%3D%22m2.5%2021.5%201.4-1.4%22%2F%3E%3Cpath%20d%3D%22m20.1%203.9%201.4-1.4%22%2F%3E%3Cpath%20d%3D%22M5.343%2021.485a2%202%200%201%200%202.829-2.828l1.767%201.768a2%202%200%201%200%202.829-2.829l-6.364-6.364a2%202%200%201%200-2.829%202.829l1.768%201.767a2%202%200%200%200-2.828%202.829z%22%2F%3E%3Cpath%20d%3D%22m9.6%2014.4%204.8-4.8%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.596%2012.768a2%202%200%201%200%202.829-2.829l-1.768-1.767a2%202%200%200%200%202.828-2.829l-2.828-2.828a2%202%200%200%200-2.829%202.828l-1.767-1.768a2%202%200%201%200-2.829%202.829z%22%2F%3E%3Cpath%20d%3D%22m2.5%2021.5%201.4-1.4%22%2F%3E%3Cpath%20d%3D%22m20.1%203.9%201.4-1.4%22%2F%3E%3Cpath%20d%3D%22M5.343%2021.485a2%202%200%201%200%202.829-2.828l1.767%201.768a2%202%200%201%200%202.829-2.829l-6.364-6.364a2%202%200%201%200-2.829%202.829l1.768%201.767a2%202%200%200%200-2.828%202.829z%22%2F%3E%3Cpath%20d%3D%22m9.6%2014.4%204.8-4.8%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--flower .elementor-icon::before,
.lg-ic--flower .lg-amenity__icon::before,
.lg-ic--flower .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205a3%203%200%201%201%203%203m-3-3a3%203%200%201%200-3%203m3-3v1M9%208a3%203%200%201%200%203%203M9%208h1m5%200a3%203%200%201%201-3%203m3-3h-1m-2%203v-1%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2010v12%22%2F%3E%3Cpath%20d%3D%22M12%2022c4.2%200%207-1.667%207-5-4.2%200-7%201.667-7%205Z%22%2F%3E%3Cpath%20d%3D%22M12%2022c-4.2%200-7-1.667-7-5%204.2%200%207%201.667%207%205Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205a3%203%200%201%201%203%203m-3-3a3%203%200%201%200-3%203m3-3v1M9%208a3%203%200%201%200%203%203M9%208h1m5%200a3%203%200%201%201-3%203m3-3h-1m-2%203v-1%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%2010v12%22%2F%3E%3Cpath%20d%3D%22M12%2022c4.2%200%207-1.667%207-5-4.2%200-7%201.667-7%205Z%22%2F%3E%3Cpath%20d%3D%22M12%2022c-4.2%200-7-1.667-7-5%204.2%200%207%201.667%207%205Z%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--concierge .elementor-icon::before,
.lg-ic--concierge .lg-amenity__icon::before,
.lg-ic--concierge .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020a1%201%200%200%201-1-1v-1a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v1a1%201%200%200%201-1%201Z%22%2F%3E%3Cpath%20d%3D%22M20%2016a8%208%200%201%200-16%200%22%2F%3E%3Cpath%20d%3D%22M12%204v4%22%2F%3E%3Cpath%20d%3D%22M10%204h4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2020a1%201%200%200%201-1-1v-1a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v1a1%201%200%200%201-1%201Z%22%2F%3E%3Cpath%20d%3D%22M20%2016a8%208%200%201%200-16%200%22%2F%3E%3Cpath%20d%3D%22M12%204v4%22%2F%3E%3Cpath%20d%3D%22M10%204h4%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--shield .elementor-icon::before,
.lg-ic--shield .lg-amenity__icon::before,
.lg-ic--shield .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2013c0%205-3.5%207.5-7.66%208.95a1%201%200%200%201-.67-.01C7.5%2020.5%204%2018%204%2013V6a1%201%200%200%201%201-1c2%200%204.5-1.2%206.24-2.72a1.17%201.17%200%200%201%201.52%200C14.51%203.81%2017%205%2019%205a1%201%200%200%201%201%201z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--utensils .elementor-icon::before,
.lg-ic--utensils .lg-amenity__icon::before,
.lg-ic--utensils .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h4a2%202%200%200%200%202-2V2%22%2F%3E%3Cpath%20d%3D%22M7%202v20%22%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h4a2%202%200%200%200%202-2V2%22%2F%3E%3Cpath%20d%3D%22M7%202v20%22%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--trees .elementor-icon::before,
.lg-ic--trees .lg-amenity__icon::before,
.lg-ic--trees .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2010v.2A3%203%200%200%201%208.9%2016H5a3%203%200%200%201-1-5.8V10a3%203%200%200%201%206%200Z%22%2F%3E%3Cpath%20d%3D%22M7%2016v6%22%2F%3E%3Cpath%20d%3D%22M13%2019v3%22%2F%3E%3Cpath%20d%3D%22M12%2019h8.3a1%201%200%200%200%20.7-1.7L18%2014h.3a1%201%200%200%200%20.7-1.7L16%209h.2a1%201%200%200%200%20.8-1.7L13%203l-1.4%201.5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2010v.2A3%203%200%200%201%208.9%2016H5a3%203%200%200%201-1-5.8V10a3%203%200%200%201%206%200Z%22%2F%3E%3Cpath%20d%3D%22M7%2016v6%22%2F%3E%3Cpath%20d%3D%22M13%2019v3%22%2F%3E%3Cpath%20d%3D%22M12%2019h8.3a1%201%200%200%200%20.7-1.7L18%2014h.3a1%201%200%200%200%20.7-1.7L16%209h.2a1%201%200%200%200%20.8-1.7L13%203l-1.4%201.5%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--car .elementor-icon::before,
.lg-ic--car .lg-amenity__icon::before,
.lg-ic--car .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%208-2%202-1.5-3.7A2%202%200%200%200%2015.646%205H8.4a2%202%200%200%200-1.903%201.257L5%2010%203%208%22%2F%3E%3Cpath%20d%3D%22M7%2014h.01%22%2F%3E%3Cpath%20d%3D%22M17%2014h.01%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%228%22%20x%3D%223%22%20y%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2018v2%22%2F%3E%3Cpath%20d%3D%22M19%2018v2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%208-2%202-1.5-3.7A2%202%200%200%200%2015.646%205H8.4a2%202%200%200%200-1.903%201.257L5%2010%203%208%22%2F%3E%3Cpath%20d%3D%22M7%2014h.01%22%2F%3E%3Cpath%20d%3D%22M17%2014h.01%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%228%22%20x%3D%223%22%20y%3D%2210%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%2018v2%22%2F%3E%3Cpath%20d%3D%22M19%2018v2%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--percent .elementor-icon::before,
.lg-ic--percent .lg-amenity__icon::before,
.lg-ic--percent .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.85%208.62a4%204%200%200%201%204.78-4.77%204%204%200%200%201%206.74%200%204%204%200%200%201%204.78%204.78%204%204%200%200%201%200%206.74%204%204%200%200%201-4.77%204.78%204%204%200%200%201-6.75%200%204%204%200%200%201-4.78-4.77%204%204%200%200%201%200-6.76Z%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22M9%209h.01%22%2F%3E%3Cpath%20d%3D%22M15%2015h.01%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.85%208.62a4%204%200%200%201%204.78-4.77%204%204%200%200%201%206.74%200%204%204%200%200%201%204.78%204.78%204%204%200%200%201%200%206.74%204%204%200%200%201-4.77%204.78%204%204%200%200%201-6.75%200%204%204%200%200%201-4.78-4.77%204%204%200%200%201%200-6.76Z%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206%22%2F%3E%3Cpath%20d%3D%22M9%209h.01%22%2F%3E%3Cpath%20d%3D%22M15%2015h.01%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--repeat .elementor-icon::before,
.lg-ic--repeat .lg-amenity__icon::before,
.lg-ic--repeat .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m17%202%204%204-4%204%22%2F%3E%3Cpath%20d%3D%22M3%2011v-1a4%204%200%200%201%204-4h14%22%2F%3E%3Cpath%20d%3D%22m7%2022-4-4%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2013v1a4%204%200%200%201-4%204H3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m17%202%204%204-4%204%22%2F%3E%3Cpath%20d%3D%22M3%2011v-1a4%204%200%200%201%204-4h14%22%2F%3E%3Cpath%20d%3D%22m7%2022-4-4%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2013v1a4%204%200%200%201-4%204H3%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--network .elementor-icon::before,
.lg-ic--network .lg-amenity__icon::before,
.lg-ic--network .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M5%2016v-3a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v3%22%2F%3E%3Cpath%20d%3D%22M12%2012V8%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%2216%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%222%22%20width%3D%226%22%20height%3D%226%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M5%2016v-3a1%201%200%200%201%201-1h12a1%201%200%200%201%201%201v3%22%2F%3E%3Cpath%20d%3D%22M12%2012V8%22%2F%3E%3C%2Fsvg%3E"); }
.elementor-element.lg-ic--users .elementor-icon::before,
.lg-ic--users .lg-amenity__icon::before,
.lg-ic--users .lg-benefit__icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2021a8%208%200%200%200-16%200%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M22%2020c0-3.37-2-6.5-4-8a5%205%200%200%200-.45-8.3%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%2021a8%208%200%200%200-16%200%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%228%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M22%2020c0-3.37-2-6.5-4-8a5%205%200%200%200-.45-8.3%22%2F%3E%3C%2Fsvg%3E"); }

/* --------------------------------------------------------------------------
   16. BOXED CONTAINERS, FILTER CHROME AND PAGINATION
   -------------------------------------------------------------------------- */

/* A boxed Elementor container is a wrapper around .e-con-inner, and the inner
   is what holds the children - so a two-column layout set on the wrapper puts
   the inner in column one and leaves column two empty. The project page's
   split is boxed (that is where its 1280 cap comes from), so the grid belongs
   on the inner. Full-width containers keep it on themselves. */

@media (min-width: 1024px) {
  
}
.elementor-element.lg-split__aside { width: 100%; align-self: start; position: sticky; top: 132px; }

/* JetSmartFilters gives its own buttons the kit's display-serif typography by
   default, which is how Reset filters arrived as a 48px Cormorant pill. */
.jet-remove-all-filters__button {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
  background: transparent;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 8px 18px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.jet-remove-all-filters__button:hover { border-color: var(--brand-primary); background: var(--teal-50); }

/* Active facets read as small removable pills beside a quiet label. */
.jet-active-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.jet-active-tags__label {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--space-1);
}
.jet-active-tags__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.jet-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  color: var(--teal-800);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.jet-active-tag:hover { background: var(--teal-100, #D3ECEB); }
.jet-active-tag__remove { font-size: 12px; line-height: 1; color: var(--brand-primary); }

/* Pagination: numbered pills, the current page filled. */
.elementor-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.elementor-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.elementor-pagination a.page-numbers:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.elementor-pagination .page-numbers.current {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}
.elementor-pagination .page-numbers.prev,
.elementor-pagination .page-numbers.next { color: var(--text-secondary); }
.elementor-pagination span.page-numbers.prev,
.elementor-pagination span.page-numbers.next { opacity: 0.45; }
.elementor-pagination .elementor-screen-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The old section-3 .lg-split rule still lands on the wrapper; a boxed split
   must lay out on its inner only, or the wrapper squeezes it into one column. */

/* The aside stack reads as white cards on the cream page, like the design. */
.elementor-element.lg-aside > .elementor-element {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
}

/* JetSmartFilters emits its own two-class rule for these buttons, so the reset
   control needs three classes to be reachable at all. */
.elementor-widget.elementor-widget-jet-smart-filters-remove-filters .jet-remove-all-filters__button,
.elementor-widget[class*="jet-smart-filters"] .apply-filters__button,
.elementor-widget[class*="jet-smart-filters"] .jet-filter-items-dropdown__apply-button {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand-primary);
  background-color: transparent;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  cursor: pointer;
}
.elementor-widget.elementor-widget-jet-smart-filters-remove-filters .jet-remove-all-filters__button:hover {
  border-color: var(--brand-primary);
  background-color: var(--teal-50);
  color: var(--brand-primary);
}
.elementor-widget[class*="jet-smart-filters"] .apply-filters__button {
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: var(--text-on-brand);
  font-size: var(--fs-sm);
  padding: 12px 26px;
}

/* JetSmartFilters names the label __title, not __label, and adds its own Clear
   pill - which duplicates the reset button sitting next to it. */
.jet-active-tags__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.jet-active-tags__title {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--space-1);
}
.jet-active-tag--clear { display: none; }
.jet-active-tag__val { line-height: 1.4; }
.jet-active-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--brand-primary);
}

/* Elementor sets a container's flex shorthand at two classes (.e-con.e-flex),
   so the card body needs the same weight to grow - and without it the footer's
   margin-top:auto has no free space to push into and the price rows across a
   row of cards stop lining up. */
.elementor-element.lg-card__body { flex: 1 1 auto; }
.elementor-element.lg-card__foot { margin-top: auto; margin-block-start: auto; }
.elementor-element.lg-card { flex: 1 1 auto; height: 100%; }

/* The icon box keeps its own alignment on the wrapper, so centre the icon in
   its own cell rather than relying on the wrapper's align-items alone. */
.elementor-element.lg-amenity .elementor-icon-box-wrapper { align-items: center; justify-items: center; }
.elementor-element.lg-amenity .elementor-icon-box-icon {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}
.elementor-element.lg-amenity .elementor-icon-box-content { width: 100%; text-align: center; }

/* --------------------------------------------------------------------------
   17. NAV MENUS
   One place for every nav link on the site. Three things force the shape of
   this section:

   a) Elementor's nav-menu stylesheet writes the item padding on four selectors
      at once - a, a.highlighted, a:focus, a:hover - and the :hover one carries
      a pseudo-class, so a plain three-class rule loses to it and the link jumps
      13px/20px the moment the pointer lands on it. Every state is therefore
      written out on one selector list, at the full chain.
   b) Elementor puts the pointer classes (.e--pointer-underline) on
      nav.elementor-nav-menu--main only, never on the dropdown nav. Scoping the
      desktop row to --main is what keeps the magenta underline out of the
      mobile drawer, which stays teal (section 25).
   c) The footer link columns never collapse - three burgers in a footer reads
      as a bug - so the toggle and dropdown nav are held off there.

   The header widget panel carries the same pointer and colours; both are set so
   a re-saved widget cannot quietly change the result.
   -------------------------------------------------------------------------- */

/* --- header, desktop row ------------------------------------------------- */
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item,
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item:hover,
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item:focus,
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item.highlighted,
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item.elementor-item-active {
  padding: 8px 0;                 /* 0 inline: menu_space_between owns the gap.
                                     8px block: the underline's breathing room. */
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  text-transform: none;
  background-color: transparent;
  border: 0;
  fill: currentColor;
  transition: color var(--dur-fast) var(--ease-standard);
}
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item:hover,
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item:focus,
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item.highlighted {
  color: var(--brand-accent);
}
.elementor-element.lg-header__nav .elementor-nav-menu--main .lg-nav-current > a.elementor-item,
.elementor-element.lg-header__nav .elementor-nav-menu--main a.elementor-item.elementor-item-active {
  color: var(--brand-primary);
  font-weight: var(--fw-bold);
}

/* The underline itself. Elementor's base rule is
     .e--pointer-underline .elementor-item:after { height:3px; background:#3f444b }   (0,2,0)
   and it hides the pseudo at rest with four :not()s, so only the paint is
   restated here - never the opacity, or the fade stops working. */
.elementor-element.lg-header__nav .e--pointer-underline .elementor-nav-menu a.elementor-item:after {
  height: 2px;
  border-radius: 2px;
  background-color: var(--brand-accent);
}
.elementor-element.lg-header__nav .e--pointer-underline .elementor-nav-menu .lg-nav-current > a.elementor-item:after,
.elementor-element.lg-header__nav .e--pointer-underline .elementor-nav-menu a.elementor-item.elementor-item-active:after {
  background-color: var(--brand-primary);
  opacity: 1;
}

/* --- footer link columns -------------------------------------------------- */
.elementor-element.lg-footer__menu .elementor-nav-menu a.elementor-item,
.elementor-element.lg-footer__menu .elementor-nav-menu a.elementor-item:hover,
.elementor-element.lg-footer__menu .elementor-nav-menu a.elementor-item:focus,
.elementor-element.lg-footer__menu .elementor-nav-menu a.elementor-item.highlighted,
.elementor-element.lg-footer__menu .elementor-nav-menu a.elementor-item.elementor-item-active {
  padding: 0;
  background-color: transparent;
  border: 0;
  color: rgba(255,255,255,0.75);
}
.elementor-element.lg-footer__menu .elementor-nav-menu a.elementor-item:hover,
.elementor-element.lg-footer__menu .elementor-nav-menu a.elementor-item:focus {
  color: #FFFFFF;
}
.elementor-element.lg-footer__menu .elementor-menu-toggle,
.elementor-element.lg-footer__menu nav.elementor-nav-menu--dropdown { display: none; }
.elementor-element.lg-footer__menu nav.elementor-nav-menu--main { display: block; }


/* --------------------------------------------------------------------------
   18. JETSMARTFILTERS PAGINATION
   Elementor's own loop pagination is not re-rendered when JetSmartFilters
   swaps the grid over AJAX, so a filtered page ended up showing the new
   pagination and the stale one together. The Loop Grid now has no pagination
   of its own and JSF's pagination widget drives it, styled to match.
   -------------------------------------------------------------------------- */

.jet-filters-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}
.jet-filters-pagination__item { margin: 0; }
.jet-filters-pagination__link,
.jet-filters-pagination__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-heading);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.jet-filters-pagination__dots { border-color: transparent; background: none; cursor: default; }
.jet-filters-pagination__item:hover .jet-filters-pagination__link { border-color: var(--brand-primary); color: var(--brand-primary); }
.jet-filters-pagination__item.jet-filters-pagination__current .jet-filters-pagination__link {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-on-brand);
}
.jet-filters-pagination__item.prev-next .jet-filters-pagination__link {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.jet-filters-pagination__item.disabled { opacity: 0.4; pointer-events: none; }

/* JetSmartFilters' public.css is enqueued AFTER the theme stylesheet and sets
   .jet-smart-filters-select .jet-select__control { height:auto; min-height:auto }
   at two classes - which is why the Location and Price selects collapsed to a
   21px line while their border, radius and padding all applied. Three classes
   to reach it. */
.elementor-widget[class*="jet-smart-filters"] select.jet-select__control,
.elementor-widget[class*="jet-smart-filters"] select.jet-sorting-select {
  height: 48px;
  min-height: 48px;
  line-height: 48px;
  padding: 0 42px 0 14px;
  border-radius: 8px;
  border: 1px solid var(--border-default);
  background-color: var(--color-surface);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  appearance: none;
  cursor: pointer;
}
.elementor-widget[class*="jet-smart-filters"] select.jet-select__control:focus,
.elementor-widget[class*="jet-smart-filters"] select.jet-sorting-select:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--shadow-focus);
}

/* Header is one boxed container laid out in Elementor (row, space-between,
   76px min-height; 64px and still one row on a phone, with the burger on the
   right). Nothing about that layout is restated here on purpose. */

/* --------------------------------------------------------------------------
   19. CARD BADGE INSET
   The badge row is pinned inside the photograph, level with the sub-brand mark
   below it. Elementor's own Position control does not survive on a grid child
   here, so this one stays in CSS - it is part of the card skin, and changing it
   once changes all 37 cards.
   -------------------------------------------------------------------------- */
.elementor-element.lg-card__media { position: relative; }
.elementor-element.lg-card__media > .elementor-element.lg-badges {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  bottom: auto;
  z-index: 2;
  width: auto;
  max-width: calc(100% - 28px);
  padding: 0;
}

/* --------------------------------------------------------------------------
   20. PROJECT PAGE, BROUGHT TO THE DESIGN
   Every section on a project page now reads eyebrow > serif headline > content,
   and the blocks the shortcodes render carry the same skins as the homepage.
   All 37 project pages share this template and these rules, so a change here is
   a change everywhere.
   -------------------------------------------------------------------------- */

/* Amenities: the same white tile as the homepage, from shortcode markup. */
.lg-grid--amenity { grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 16px; }
.lg-grid--amenity .lg-amenity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 22px 14px;
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
.lg-grid--amenity .lg-amenity__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--teal-50);
  color: var(--brand-primary);
  font-size: 1.1rem;
}
.lg-grid--amenity .lg-amenity__label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--text-body);
}
/* The glyph is a span filled by laguna-icons.css, not a ::before. */
.lg-grid--amenity .lg-amenity__icon .lg-glyph { width: 22px; height: 22px; }

/* Owner benefits sit in one white panel, tiles centred three across. */
.elementor-element.lg-panelcard {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.lg-grid--tiles { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-5); }
.lg-benefit--plain {
  background: none;
  border: 0;
  padding: 0;
  text-align: center;
}
.lg-benefit--plain .lg-benefit__icon { margin-inline: auto; }
.lg-benefit--plain .lg-benefit__title {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  margin: 0 0 var(--space-2);
}
.lg-benefit--plain .lg-benefit__text { font-size: var(--fs-xs); line-height: 1.55; }

/* FAQ: one white card per question, chevron rather than a plus. */
.lg-faq { border-top: 0; display: grid; gap: 12px; }
.lg-faq__item {
  background: var(--color-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0 24px;
}
.lg-faq .lg-faq__q {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
  padding: 20px 0;
}
.lg-faq__marker { font-size: 0; width: 18px; height: 18px; background-color: var(--brand-primary); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; }
.lg-faq__q[aria-expanded="true"] .lg-faq__marker { transform: rotate(180deg); }
.lg-faq__a { padding-bottom: 20px; }

/* Plans: a rounded frame with a zoom pill, and the caption beneath it. */
.lg-plan a { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; }
.lg-plan img { border-radius: 0; box-shadow: none; display: block; }
.lg-plan__zoom {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: rgba(6,48,48,0.78);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  backdrop-filter: blur(4px);
}

.lg-faq__marker { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%2F%3E%3C%2Fsvg%3E"); }

/* The shortcode-rendered benefit tiles draw their glyph the same way. */
.lg-benefit--plain .lg-benefit__icon .lg-glyph { width: 22px; height: 22px; }
.lg-benefit--plain .lg-benefit__icon { display: grid; place-items: center; }

/* --------------------------------------------------------------------------
   21. BREADCRUMBS AND BACK TO TOP
   Both come from functions.php. Their presentation lives here so the brand
   colours, type and radii stay with the rest of the design system.
   -------------------------------------------------------------------------- */

.lg-crumbs { display: block; }
.lg-crumbs ol {
  display: flex;
  width: max-content;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 14px;
  list-style: none;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.16);
  border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.lg-crumbs li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.lg-crumbs,
.lg-crumbs a,
.lg-crumbs .cur,
.lg-crumbs .sep {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
}
.lg-crumbs a { color: rgba(255,255,255,0.82); text-decoration: none; }
.lg-crumbs a:hover { color: #FFFFFF; }
.lg-crumbs .sep { color: rgba(255,255,255,0.45); }
.lg-crumbs .cur { color: #FFFFFF; }

/* On a light page the pill inverts to the cream/ink pairing. */
.lg-crumbs--light ol { background: var(--teal-50); border-color: var(--border-subtle); }
.lg-crumbs--light a { color: var(--text-secondary); }
.lg-crumbs--light a:hover { color: var(--brand-primary); }
.lg-crumbs--light .sep { color: var(--text-muted); }
.lg-crumbs--light .cur { color: var(--text-heading); }

.lg-totop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.lg-totop::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-color: #FFFFFF;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5%22%2F%3E%3Cpath%20d%3D%22m5%2012%207-7%207%207%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2019V5%22%2F%3E%3Cpath%20d%3D%22m5%2012%207-7%207%207%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lg-totop:hover { background-color: var(--brand-primary-hover); transform: translateY(-2px); }
.lg-totop:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (max-width: 767px) { .lg-totop { right: 14px; bottom: 14px; width: 42px; height: 42px; } }


/* ---------------------------------------------------------------------------
   22. Gallery tabs as pills
   The residence unit-type tabs stay underlined; the media switcher
   (Photos / Video / 360 Tour) is a pill row, as in the design.
   --------------------------------------------------------------------------- */

.lg-tabs.lg-tabs--pills { gap: 8px; margin-bottom: 18px; border-bottom: 0; }
.lg-tabs.lg-tabs--pills .lg-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-heading);
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.lg-tabs.lg-tabs--pills .lg-tab:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.lg-tabs.lg-tabs--pills .lg-tab[aria-selected="true"] { background: var(--brand-primary); border-color: var(--brand-primary); color: #FFFFFF; }
.lg-tab__icon {
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lg-ic--image > .lg-tab__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%20ry%3D%222%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%229%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22m21%2015-3.086-3.086a2%202%200%200%200-2.828%200L6%2021%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--play > .lg-tab__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%205a2%202%200%200%201%203.008-1.728l11.997%206.998a2%202%200%200%201%20.003%203.458l-12%207A2%202%200%200%201%205%2019z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%205a2%202%200%200%201%203.008-1.728l11.997%206.998a2%202%200%200%201%20.003%203.458l-12%207A2%202%200%200%201%205%2019z%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--orbit > .lg-tab__icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.341%206.484A10%2010%200%200%201%2010.266%2021.85%22%2F%3E%3Cpath%20d%3D%22M3.659%2017.516A10%2010%200%200%201%2013.74%202.152%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2219%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.341%206.484A10%2010%200%200%201%2010.266%2021.85%22%2F%3E%3Cpath%20d%3D%22M3.659%2017.516A10%2010%200%200%201%2013.74%202.152%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2219%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); }

/* Pill row already carries the gap below it, so the pane starts flush and the
   media keeps the design's 16:8 frame. */
.lg-gallery-wrap .lg-gallery { margin-top: 0; }
.lg-gallery-wrap .lg-gallery__video { margin-top: 0; aspect-ratio: 16 / 8; box-shadow: var(--shadow-md); }
.lg-gallery-wrap .lg-gallery__main .slick-slide img { aspect-ratio: 16 / 8; }
.lg-gallery-wrap .lg-gallery__main { box-shadow: var(--shadow-md); }


/* ---------------------------------------------------------------------------
   23. Form rows, choice chips and the select caret
   wpautop is switched off for the resale forms in functions.php, so the form
   itself carries the rhythm and .lg-field-row can pair two fields per row.
   The row collapses on its own when the column is narrow (the aside), so no
   breakpoint is needed.
   --------------------------------------------------------------------------- */

.wpcf7 .wpcf7-form { display: grid; gap: var(--space-4); }
.wpcf7 .wpcf7-form > .hidden-fields-container { display: none; }
.lg-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--space-4); }

/* Contact preference and interest lists read as the design's filter chips. */
.lg-field--chips .wpcf7-radio,
.lg-field--chips .wpcf7-checkbox { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-field--chips .wpcf7-list-item { margin: 0; }
.lg-field--chips .wpcf7-list-item > label { position: relative; display: inline-flex; cursor: pointer; }
.lg-field--chips .wpcf7-list-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lg-field--chips .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.lg-field--chips .wpcf7-list-item > label:hover .wpcf7-list-item-label { background: var(--cream-200); }
.lg-field--chips .wpcf7-list-item input:checked + .wpcf7-list-item-label { background: var(--brand-accent); border-color: var(--brand-accent); color: #FFFFFF; }
.lg-field--chips .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label { box-shadow: var(--shadow-focus); }

/* appearance:none removes the native caret, so draw it back. */
.wpcf7 select {
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23063030%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}

/* jet-caret-added: the facet selects lose their native caret to appearance:none too. */
.elementor-widget[class*="jet-smart-filters"] select.jet-select__control,
.elementor-widget[class*="jet-smart-filters"] select.jet-sorting-select {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23063030%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}



/* The 360 tour opens on the Banyan Group site, which will not be framed, so the
   panel is the design's still with a launch overlay. */
.lg-tourcard {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background-color: var(--teal-950, #052322);
  background-size: cover;
  background-position: center;
  text-decoration: none;
}
.lg-tourcard__scrim {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: var(--space-5);
  text-align: center;
  color: #FFFFFF;
  background: linear-gradient(180deg, rgba(6,48,48,0.42) 0%, rgba(6,48,48,0.72) 100%);
}
.lg-tourcard__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.92);
  color: var(--teal-800, #0A4342);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.lg-tourcard__icon::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.341%206.484A10%2010%200%200%201%2010.266%2021.85%22%2F%3E%3Cpath%20d%3D%22M3.659%2017.516A10%2010%200%200%201%2013.74%202.152%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2219%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.341%206.484A10%2010%200%200%201%2010.266%2021.85%22%2F%3E%3Cpath%20d%3D%22M3.659%2017.516A10%2010%200%200%201%2013.74%202.152%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%225%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2219%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lg-tourcard:hover .lg-tourcard__icon { transform: scale(1.06); }
.lg-tourcard__label { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: 0.04em; }
.lg-tourcard__note { font-family: var(--font-body); font-size: var(--fs-xs); color: rgba(255,255,255,0.72); }

/* The header wraps to two rows below 1024px, so the sticky section nav and the
   anchor offsets follow one variable instead of a hard-coded 76px. */
:root { --header-h: 76px; }
@media (max-width: 1024px) { :root { --header-h: 124px; } }
.lg-sectionnav { top: var(--header-h); }
[id^="section-"] { scroll-margin-top: calc(var(--header-h) + 74px); }
.lg-crumbs-slot { margin-bottom: var(--space-2); }

/* The multi-select list keeps the design's 20px square with a drawn tick. */
.lg-field--checks .wpcf7-checkbox { display: grid; gap: 7px; }
.lg-field--checks .wpcf7-list-item { margin: 0; }
.lg-field--checks .wpcf7-list-item > label { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: var(--fw-regular); font-size: var(--fs-sm); color: var(--text-body); }
.lg-field--checks .wpcf7-list-item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lg-field--checks .wpcf7-list-item-label::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background-color: #FFFFFF;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.lg-field--checks .wpcf7-list-item-label { display: inline-flex; align-items: center; font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.lg-field--checks .wpcf7-list-item input:checked + .wpcf7-list-item-label::before { border-color: var(--brand-primary); background-color: var(--brand-primary); -webkit-mask-image: none; mask-image: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%2220%206%209%2017%204%2012%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: 13px 13px; }
.lg-hint { color: var(--text-muted); font-weight: var(--fw-regular); }


/* The still is a real image so the pane contributes a real height; the scrim sits
   over it. */
.lg-tourcard__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 8;
  object-fit: cover;
}
.lg-tourcard { min-height: 180px; }


/* ---------------------------------------------------------------------------
   24. Fact cards, nearby row and the aside search
   .lg-glyph is the reusable mask span: put lg-ic--<name> on an ancestor.
   --------------------------------------------------------------------------- */

.lg-glyph {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.lg-ic--search .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%2021-4.34-4.34%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--plane .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.8%2019.2%2016%2011l3.5-3.5C21%206%2021.5%204%2021%203c-1-.5-3%200-4.5%201.5L13%208%204.8%206.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1%201%20.3%201.3L9%2012l-2%203H4l-1%201%203%202%202%203%201-1v-3l3-2%203.5%205.3c.3.4.8.5%201.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.8%2019.2%2016%2011l3.5-3.5C21%206%2021.5%204%2021%203c-1-.5-3%200-4.5%201.5L13%208%204.8%206.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1%201%20.3%201.3L9%2012l-2%203H4l-1%201%203%202%202%203%201-1v-3l3-2%203.5%205.3c.3.4.8.5%201.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--shopping-bag .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%2F%3E%3Cpath%20d%3D%22M3.103%206.034h17.794%22%2F%3E%3Cpath%20d%3D%22M3.4%205.467a2%202%200%200%200-.4%201.2V20a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6.667a2%202%200%200%200-.4-1.2l-2-2.667A2%202%200%200%200%2017%202H7a2%202%200%200%200-1.6.8z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2010a4%204%200%200%201-8%200%22%2F%3E%3Cpath%20d%3D%22M3.103%206.034h17.794%22%2F%3E%3Cpath%20d%3D%22M3.4%205.467a2%202%200%200%200-.4%201.2V20a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2V6.667a2%202%200%200%200-.4-1.2l-2-2.667A2%202%200%200%200%2017%202H7a2%202%200%200%200-1.6.8z%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--graduation-cap .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--stethoscope .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%202v2%22%2F%3E%3Cpath%20d%3D%22M5%202v2%22%2F%3E%3Cpath%20d%3D%22M5%203H4a2%202%200%200%200-2%202v4a6%206%200%200%200%2012%200V5a2%202%200%200%200-2-2h-1%22%2F%3E%3Cpath%20d%3D%22M8%2015a6%206%200%200%200%2012%200v-3%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%202v2%22%2F%3E%3Cpath%20d%3D%22M5%202v2%22%2F%3E%3Cpath%20d%3D%22M5%203H4a2%202%200%200%200-2%202v4a6%206%200%200%200%2012%200V5a2%202%200%200%200-2-2h-1%22%2F%3E%3Cpath%20d%3D%22M8%2015a6%206%200%200%200%2012%200v-3%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--calendar-check .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v3%22%2F%3E%3Cpath%20d%3D%22M16%202v3%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18%22%2F%3E%3Cpath%20d%3D%22m9%2015%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v3%22%2F%3E%3Cpath%20d%3D%22M16%202v3%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18%22%2F%3E%3Cpath%20d%3D%22m9%2015%202%202%204-4%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--ruler .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.3%2015.3a2.4%202.4%200%200%201%200%203.4l-2.6%202.6a2.4%202.4%200%200%201-3.4%200L2.7%208.7a2.41%202.41%200%200%201%200-3.4l2.6-2.6a2.41%202.41%200%200%201%203.4%200Z%22%2F%3E%3Cpath%20d%3D%22m14.5%2012.5%202-2%22%2F%3E%3Cpath%20d%3D%22m11.5%209.5%202-2%22%2F%3E%3Cpath%20d%3D%22m8.5%206.5%202-2%22%2F%3E%3Cpath%20d%3D%22m17.5%2015.5%202-2%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.3%2015.3a2.4%202.4%200%200%201%200%203.4l-2.6%202.6a2.4%202.4%200%200%201-3.4%200L2.7%208.7a2.41%202.41%200%200%201%200-3.4l2.6-2.6a2.41%202.41%200%200%201%203.4%200Z%22%2F%3E%3Cpath%20d%3D%22m14.5%2012.5%202-2%22%2F%3E%3Cpath%20d%3D%22m11.5%209.5%202-2%22%2F%3E%3Cpath%20d%3D%22m8.5%206.5%202-2%22%2F%3E%3Cpath%20d%3D%22m17.5%2015.5%202-2%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--sun .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2%22%2F%3E%3Cpath%20d%3D%22M12%2020v2%22%2F%3E%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%2F%3E%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%2F%3E%3Cpath%20d%3D%22M2%2012h2%22%2F%3E%3Cpath%20d%3D%22M20%2012h2%22%2F%3E%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%2F%3E%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M12%202v2%22%2F%3E%3Cpath%20d%3D%22M12%2020v2%22%2F%3E%3Cpath%20d%3D%22m4.93%204.93%201.41%201.41%22%2F%3E%3Cpath%20d%3D%22m17.66%2017.66%201.41%201.41%22%2F%3E%3Cpath%20d%3D%22M2%2012h2%22%2F%3E%3Cpath%20d%3D%22M20%2012h2%22%2F%3E%3Cpath%20d%3D%22m6.34%2017.66-1.41%201.41%22%2F%3E%3Cpath%20d%3D%22m19.07%204.93-1.41%201.41%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--building .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2010h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%206h.01%22%2F%3E%3Cpath%20d%3D%22M16%2010h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%206h.01%22%2F%3E%3Cpath%20d%3D%22M8%2010h.01%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%206h.01%22%2F%3E%3Cpath%20d%3D%22M9%2022v-3a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v3%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2010h.01%22%2F%3E%3Cpath%20d%3D%22M12%2014h.01%22%2F%3E%3Cpath%20d%3D%22M12%206h.01%22%2F%3E%3Cpath%20d%3D%22M16%2010h.01%22%2F%3E%3Cpath%20d%3D%22M16%2014h.01%22%2F%3E%3Cpath%20d%3D%22M16%206h.01%22%2F%3E%3Cpath%20d%3D%22M8%2010h.01%22%2F%3E%3Cpath%20d%3D%22M8%2014h.01%22%2F%3E%3Cpath%20d%3D%22M8%206h.01%22%2F%3E%3Cpath%20d%3D%22M9%2022v-3a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v3%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%222%22%20width%3D%2216%22%20height%3D%2220%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--bed-double .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2020v-8a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v8%22%2F%3E%3Cpath%20d%3D%22M4%2010V6a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v4%22%2F%3E%3Cpath%20d%3D%22M12%204v6%22%2F%3E%3Cpath%20d%3D%22M2%2018h20%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2%2020v-8a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v8%22%2F%3E%3Cpath%20d%3D%22M4%2010V6a2%202%200%200%201%202-2h12a2%202%200%200%201%202%202v4%22%2F%3E%3Cpath%20d%3D%22M12%204v6%22%2F%3E%3Cpath%20d%3D%22M2%2018h20%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--bath .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204%208%206%22%2F%3E%3Cpath%20d%3D%22M17%2019v2%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3Cpath%20d%3D%22M7%2019v2%22%2F%3E%3Cpath%20d%3D%22M9%205%207.621%203.621A2.121%202.121%200%200%200%204%205v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-5%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%204%208%206%22%2F%3E%3Cpath%20d%3D%22M17%2019v2%22%2F%3E%3Cpath%20d%3D%22M2%2012h20%22%2F%3E%3Cpath%20d%3D%22M7%2019v2%22%2F%3E%3Cpath%20d%3D%22M9%205%207.621%203.621A2.121%202.121%200%200%200%204%205v12a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-5%22%2F%3E%3C%2Fsvg%3E"); }
.lg-ic--map-pin .lg-glyph { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%204.993-5.539%2010.193-7.399%2011.799a1%201%200%200%201-1.202%200C9.539%2020.193%204%2014.993%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); }

/* The Residence card: icon, figure, label — left aligned, three columns. */
.lg-specrow { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
.lg-spec { text-align: left; }
.lg-spec__icon {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--brand-primary);
  margin-bottom: var(--space-3);
}
.lg-spec__value { line-height: 1.15; }
.lg-spec__label { margin-top: 2px; font-weight: var(--fw-semibold); }

/* The Development card: three columns of label over value, no hairlines. */
.elementor-element.lg-factcard--cream { background: var(--color-surface-cream, #FBF8EE); }
.lg-devgrid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  gap: var(--space-4) var(--space-5);
}
.lg-devgrid__row { min-width: 0; }
.lg-devgrid dt {
  margin: 0 0 4px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lg-devgrid dd {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
}

/* Overview facts and the nearby row share one icon-plus-two-lines shape. */
.lg-factrow,
.lg-nearrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: var(--space-4);
}
.lg-fact,
.lg-near {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: center;
  min-width: 0;
}
.lg-fact__icon,
.lg-near__icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--brand-primary);
}
.lg-fact__body,
.lg-near__body { display: block; min-width: 0; }
.lg-fact__label,
.lg-near__place {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lg-near__place { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.lg-fact__value,
.lg-near__time {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--text-heading);
}

/* Search residences: field plus a round teal button, as in the design. */
.lg-findsearch { display: flex; gap: 8px; align-items: stretch; }
.lg-findsearch input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-body);
  background: var(--color-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  appearance: none;
}
.lg-findsearch input[type="search"]:focus {
  outline: none;
  border-color: var(--border-brand);
  box-shadow: var(--shadow-focus);
}
.lg-findsearch input[type="search"]::placeholder { color: var(--text-muted); }
.lg-findsearch__btn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--brand-primary);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.lg-findsearch__btn:hover { background-color: var(--brand-primary-hover, #0F8F8C); }
.lg-findsearch__btn .lg-glyph { width: 18px; height: 18px; }


/* ---------------------------------------------------------------------------
   25. Header burger and drawer
   Below 1025px the desktop row becomes a burger and a full-width panel.
   Elementor paints that panel white, so it is restated in the estate's
   cream/ink pairing here.

   The drawer keeps TEAL hover on purpose. The magenta underline of section 17
   is scoped to nav.elementor-nav-menu--main, which is where Elementor puts the
   pointer classes, so it cannot reach the dropdown nav - desktop gets the
   underline, tablet and mobile get the cream drawer.
   --------------------------------------------------------------------------- */

/* --- the toggle ----------------------------------------------------------- */
.elementor-element.lg-header__nav .elementor-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background-color: rgba(255, 255, 255, 0.55);
  color: var(--text-heading);
  box-shadow: none;
}
.elementor-element.lg-header__nav .elementor-menu-toggle:hover,
.elementor-element.lg-header__nav .elementor-menu-toggle:focus {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background-color: #FFFFFF;
}
.elementor-element.lg-header__nav .elementor-menu-toggle svg { fill: currentColor; width: 22px; height: 22px; }

/* --- the drawer ----------------------------------------------------------- */
.elementor-element.lg-header__nav nav.elementor-nav-menu--dropdown {
  background-color: var(--color-bg, #FBF8EE);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 10px;
}
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown a.elementor-item,
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown a.elementor-item:focus,
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown a.elementor-item.highlighted {
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-heading);
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
}
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown li:last-child a.elementor-item { border-bottom: 0; }
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown a.elementor-item:focus {
  color: var(--brand-primary);
  background-color: var(--teal-50);
}
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown li.lg-nav-current > a.elementor-item {
  color: var(--brand-primary);
}

/* Make an enquiry becomes the drawer's last item and reads as the action. */
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown li.lg-nav-enquire > a.elementor-item,
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown li.lg-nav-enquire > a.elementor-item:hover,
.elementor-element.lg-header__nav .elementor-nav-menu--dropdown li.lg-nav-enquire > a.elementor-item:focus {
  color: var(--brand-accent);
  font-weight: var(--fw-bold);
}

/* --- which layout shows ---------------------------------------------------- */
/* One row on a phone: logo left, burger right. The toggle's display has to stay
   inside the query - Elementor hides it above the breakpoint at one class, so an
   unqualified rule at this specificity would put a burger on desktop too. */
@media (max-width: 1024px) {
  .elementor-element.lg-header__nav { flex: 0 0 auto; }
  .elementor-element.lg-header__nav .elementor-widget-container { display: flex; justify-content: flex-end; }
  .elementor-element.lg-header__nav .elementor-menu-toggle { display: flex; }
}
@media (min-width: 1025px) {
  .elementor-element.lg-header__nav .elementor-menu-toggle,
  .elementor-element.lg-header__nav nav.elementor-nav-menu--dropdown { display: none; }
}


/* ---------------------------------------------------------------------------
   26. Plain buttons vs the kit's button skin
   Site Settings paints EVERY bare <button> as a teal pill:
     .elementor-kit-6 button { background:#14A9A6; padding:12px 32px; radius:999px }   (0,1,1)
     .elementor-kit-6 button:hover { background:… }                                    (0,2,1)
   So a control we draw ourselves needs two classes in the selector, and it needs
   its hover and focus states written out - a rule that only sets colour leaves
   the kit's teal background showing on hover. Every such control carries the
   extra class lg-unbutton for exactly this purpose.
   --------------------------------------------------------------------------- */

.lg-unbutton.lg-totop,
.lg-unbutton.lg-totop:hover,
.lg-unbutton.lg-totop:focus {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  background-color: var(--brand-primary);
}
.lg-unbutton.lg-totop:hover { background-color: var(--brand-primary-hover, #0F8F8C); }
@media (max-width: 767px) {
  .lg-unbutton.lg-totop,
  .lg-unbutton.lg-totop:hover,
  .lg-unbutton.lg-totop:focus { width: 42px; height: 42px; }
}

.lg-unbutton.lg-findsearch__btn,
.lg-unbutton.lg-findsearch__btn:hover,
.lg-unbutton.lg-findsearch__btn:focus {
  width: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background-color: var(--brand-primary);
  color: #FFFFFF;
}
.lg-unbutton.lg-findsearch__btn:hover { background-color: var(--brand-primary-hover, #0F8F8C); }

.lg-unbutton.lg-faq__q,
.lg-unbutton.lg-faq__q:hover,
.lg-unbutton.lg-faq__q:focus {
  padding: var(--space-5) 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}
.lg-unbutton.lg-faq__q { color: var(--text-heading); }
.lg-unbutton.lg-faq__q:hover,
.lg-unbutton.lg-faq__q:focus { color: var(--brand-primary); }

/* Underlined unit-type tabs keep no background in any state. */
.lg-unbutton.lg-tab,
.lg-unbutton.lg-tab:hover,
.lg-unbutton.lg-tab:focus { background-color: transparent; }
.lg-tabs--pills .lg-unbutton.lg-tab,
.lg-tabs--pills .lg-unbutton.lg-tab:hover,
.lg-tabs--pills .lg-unbutton.lg-tab:focus { background-color: #FFFFFF; }
.lg-tabs--pills .lg-unbutton.lg-tab[aria-selected="true"],
.lg-tabs--pills .lg-unbutton.lg-tab[aria-selected="true"]:hover,
.lg-tabs--pills .lg-unbutton.lg-tab[aria-selected="true"]:focus { background-color: var(--brand-primary); }

/* Reset Filters is JetSmartFilters' own <button>, so it needs the same care. */
.elementor-widget[class*="jet-smart-filters"] .jet-remove-all-filters__button:hover,
.elementor-widget[class*="jet-smart-filters"] .jet-remove-all-filters__button:focus {
  background-color: var(--teal-50);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

/* popup-padding: the mobile gutter preset in style.css targets every e-parent
   container, and a popup's content container is one - so the brochure modal lost
   its inset on a phone. Restated here above that rule's weight. */
@media (max-width: 767px) {
  .elementor-popup-modal .e-con.e-parent.e-con-full,
  .elementor-popup-modal .e-con.e-parent > .e-con-inner { padding-inline: 24px; }
}

/* --------------------------------------------------------------------------
   27. AMENITY NOTES, THE BENEFIT STATEMENT AND THE PLAN PAIR
   Round 5. Amenity and facility rows now share one grid, and the glyph is a
   <span class="lg-glyph"> filled by laguna-icons.css, which is generated from
   inc/icon-data.php. To add an icon, add its Lucide body there and a label in
   laguna_resale_icon_choices() - nothing here needs touching.
   -------------------------------------------------------------------------- */

/* Facilities carry a one-line description; plain amenities do not. */
.lg-grid--amenity .lg-amenity__note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-top: -4px;
}

/* A single owner benefit is a statement, not a card. The paragraph carries it,
   so the icon sits beside the prose rather than above a lonely centred tile. */
.lg-grid--statement { grid-template-columns: 1fr; }
.lg-grid--statement .lg-benefit--plain {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas: "icon title" "icon text";
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  text-align: left;
  max-width: 76ch;
}
.lg-grid--statement .lg-benefit__icon { grid-area: icon; margin: 0; }
.lg-grid--statement .lg-benefit__title {
  grid-area: title;
  margin: 0;
  align-self: center;
  font-size: var(--fs-body);
}
.lg-grid--statement .lg-benefit__text {
  grid-area: text;
  font-size: var(--fs-sm);
  line-height: 1.7;
}
@media (max-width: 575px) {
  .lg-grid--statement .lg-benefit--plain {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "icon" "title" "text";
  }
}

/* Master plan and aerial are two different crops, so left to themselves they
   came out two different heights. Frame both to one ratio and let the image
   cover it; the caption, when there is one, still sits below. */
.lg-plangrid { align-items: stretch; }
.lg-plangrid > .elementor-widget,
.lg-plangrid > .elementor-widget > .elementor-widget-container,
.lg-plangrid .elementor-shortcode { display: flex; flex-direction: column; width: 100%; }
.lg-plangrid .lg-plan { display: flex; flex-direction: column; width: 100%; margin: 0; }
.lg-plangrid .lg-plan a {
  aspect-ratio: 16 / 10;
  width: 100%;
  background: var(--color-surface-cream, #FBF8EE);
}
/* contain, not cover: a site plan and a location map lose their meaning the
   moment an edge is cropped off, so the frame letterboxes instead. */
.lg-plangrid .lg-plan img { width: 100%; height: 100%; object-fit: contain; }