/* ============================================================
   THE CORALS — Component CSS (from _design-reference)
   Applied to Elementor templates via matching CSS classes.
   Uses the :root palette tokens defined in style.css.
   ============================================================ */

/* ---- footer Explore links: match the other footer link colour (muted cream), sand on hover ---- */
.elementor-location-footer .elementor-widget-icon-list .elementor-icon-list-text,
.elementor-location-footer .elementor-widget-icon-list a{ color:rgba(244,239,230,.65) !important; }
.elementor-location-footer .elementor-widget-icon-list a:hover .elementor-icon-list-text,
.elementor-location-footer .elementor-widget-icon-list a:hover{ color:var(--sand-soft) !important; }

/* ============================================================
   SINGLE LOT template (native widgets)
   ============================================================ */
/* status + collection chips */
.corals-chip .elementor-heading-title{
  display:inline-block; font-family:var(--body);
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px; border-radius:30px;
  background:rgba(168,139,94,.16); color:var(--sand);
}
/* first chip (status) in green tint */
.corals-chip:first-child .elementor-heading-title{ background:rgba(61,84,67,.16); color:var(--green-2); }

/* location line under the title */
.lot-loc .elementor-heading-title{ font-family:var(--body); font-weight:300; }

/* stat labels */
.lot-stat-k{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

/* details key/value rows */
.corals-kv-item .elementor-heading-title{ font-family:var(--body); font-weight:400; font-size:14.5px; }

/* features rendered from a checkbox_list -> <ul> inside a heading */
.corals-feat-label .elementor-heading-title{ font-weight:500; }
.corals-feature-list .elementor-heading-title ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px 0; }
.corals-feature-list .elementor-heading-title li{ flex:1 1 50%; font-family:var(--body); font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; }
.corals-feature-list .elementor-heading-title li::before{ content:'\2713'; color:var(--sand); font-size:13px; }

/* gallery carousel */
.corals-lot-gallery{ margin-top:10px; }

/* Virtual Tour — inline responsive iframe embed (renders like the Video
   section above it; the "Launch Full Tour" button stays below). */
.corals-tour-embed{ position:relative; width:100%; aspect-ratio:16/9; margin-bottom:16px; background:var(--green); }
.corals-tour-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
@supports not (aspect-ratio:1){ .corals-tour-embed{ height:0; padding-bottom:56.25%; } }

@media(max-width:767px){
  .corals-feature-list .elementor-heading-title li{ flex:1 1 100%; }
}

/* breadcrumb + price actions */
.lot-crumb, .lot-crumb .elementor-heading-title,
.crumb-link .elementor-heading-title,
.corals-crumbs .elementor-heading-title{ font-size:15px !important; color:#5A554C !important; letter-spacing:.04em; }
.crumb-link .elementor-heading-title{ cursor:pointer; transition:color .2s; }
.crumb-link:hover .elementor-heading-title{ color:var(--sand) !important; }
.lot-action .elementor-button{ padding:9px 16px !important; font-size:13px !important; }

/* sticky in-page section nav */
.corals-anchor-nav{ position:sticky; top:0; z-index:40; }
.anchor-link .elementor-heading-title{ display:block; padding:17px 22px; font-size:15px !important; letter-spacing:.04em; cursor:pointer; border-bottom:2px solid transparent; transition:color .2s, border-color .2s; }
.anchor-link:hover .elementor-heading-title{ color:var(--sand-soft) !important; border-color:var(--sand); }

/* each lot section as its own collapsible surface block (single-item accordion) */
.corals-acc{ margin-bottom:18px; scroll-margin-top:84px; }
.corals-acc .e-n-accordion-item{ background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:0 !important; }
.corals-acc .e-n-accordion-item-title{ padding:20px 28px !important; }
.corals-acc .e-n-accordion-item-title-text,
.corals-acc .e-n-accordion-item-title .elementor-heading-title{ font-family:var(--display) !important; font-size:24px !important; font-weight:400 !important; color:var(--ink) !important; }
.corals-acc .e-n-accordion-item > .e-con,
.corals-acc .e-con-inner{ padding-left:28px; padding-right:28px; padding-bottom:24px; }

/* ============================================================
   COLLECTION ARCHIVE — lot cards (loop item)
   ============================================================ */
.lot-card{
  background:var(--surface); border:1px solid var(--line); overflow:hidden;
  transition:box-shadow .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);
  height:100%; text-decoration:none;
}
.lot-card:hover{ box-shadow:0 20px 44px rgba(30,36,32,.14); transform:translateY(-4px); }

.lot-card-media{ position:relative; height:220px; overflow:hidden; padding:0;
  /* Graceful fallback shown when a lot has no Featured Image yet (the image
     widget renders nothing in that case) — a subtle brand-toned panel instead
     of a blank white box. */
  background:linear-gradient(135deg,var(--bg-deep),var(--bg)); }
.lot-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.4,0,.2,1); display:block; }
.lot-card:hover .lot-card-media img{ transform:scale(1.07); }
.lot-card-status .elementor-heading-title{
  position:absolute; top:14px; left:14px; z-index:3;
  font-family:var(--body); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 13px; background:var(--green-2); color:#F4EFE6;
}
.lot-card-status{ position:static; }

.lot-card-body{ padding:24px 24px 26px; }
.lc-chip .elementor-heading-title{
  display:inline-block; font-family:var(--body); font-size:11px; letter-spacing:.04em;
  padding:5px 11px; border-radius:30px; border:1px solid var(--line); color:var(--ink-soft); background:#fff;
}
.lot-card-blurb .elementor-heading-title{ font-family:var(--body); font-weight:300; }
.lot-card-foot{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.lot-card-size small{ font-family:var(--body); }
.lc-btn .elementor-heading-title{
  font-family:var(--body); font-size:12.5px; letter-spacing:.04em;
  background:var(--green); color:#F4EFE6; padding:10px 18px; display:inline-block;
}
.eyebrow-sand .elementor-heading-title{ font-family:var(--body); }
.lot-card h3 .elementor-heading-title{ font-family:var(--display) !important; }

/* ---- archive toolbar (count | native taxonomy filters + JS sort/view) ---- */
.corals-lot-count strong{ font-weight:600; color:var(--ink); }
/* keep the whole toolbar on a single row: count (left) | filters | sort+view (right) */
.corals-archive-toolbar{ font-family:var(--body); flex-wrap:nowrap !important; align-items:center !important; gap:18px !important; }
.corals-archive-toolbar > .corals-lot-count{ flex:0 0 auto; white-space:nowrap; }
.corals-archive-toolbar > .e-con{ flex:1 1 auto; display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:14px; }
.corals-archive-toolbar > .e-con > .corals-tf{ flex:0 0 auto; }
.corals-archive-toolbar > .e-con > .corals-archive-tools{ flex:0 0 auto; margin-left:auto; }
/* native Taxonomy Filter rendered as compact inline links */
.corals-tf{ font-family:var(--body); font-size:13px; }
.corals-tf .e-filter, .corals-tf ul{ display:flex; flex-wrap:nowrap; gap:6px; list-style:none; margin:0; padding:0; }
.corals-tf .e-filter-item{ padding:7px 13px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); border-radius:30px; cursor:pointer; font-size:12.5px; transition:all .2s; }
.corals-tf .e-filter-item:hover{ border-color:var(--sand); color:var(--sand); }
.corals-tf .e-filter-item.e-filter-item-active{ background:var(--green); border-color:var(--green); color:#F4EFE6; }
/* JS-built Sort + grid/list toggle */
.corals-archive-tools{ display:flex !important; flex-direction:row !important; width:auto !important; flex:0 0 auto; flex-wrap:nowrap; align-items:center; gap:14px; white-space:nowrap; }
.ca-sort{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.06em; color:var(--muted); }
.ca-sort-sel{ font-family:var(--body); font-size:13px; padding:8px 10px; border:1px solid var(--line); background:#fff; color:var(--ink); }
.ca-view{ display:flex; }
.ca-view button{ width:38px; height:38px; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; font-size:15px; }
.ca-view button.is-active{ background:var(--green); color:#F4EFE6; border-color:var(--green); }
.ca-view button + button{ border-left:none; }

/* list view: stack card image left, body right */
.elementor-widget-loop-grid.corals-list .elementor-grid{ grid-template-columns:1fr !important; }
.corals-list .lot-card{ flex-direction:row; }
.corals-list .lot-card-media{ flex:0 0 300px; height:auto; min-height:200px; }
.corals-list .lot-card-body{ flex:1; }
@media(max-width:767px){ .corals-list .lot-card{ flex-direction:column; } .corals-list .lot-card-media{ flex-basis:auto; height:220px; } }

/* ---- anchor-scroll offset (sticky nav + possible admin bar) ---- */
html{ scroll-behavior:smooth; scroll-padding-top:90px; }

/* ---- anchor nav inner aligns to the boxed content column ---- */
.anchor-nav-inner{ max-width:1240px; margin:0 auto; display:flex; justify-content:flex-start; overflow-x:auto; }

/* ============================================================
   HOME PAGE sections (from index.html)
   ============================================================ */
.sec-head{ text-align:center; max-width:640px; margin:0 auto 56px; }
.sec-head h2{ font-size:50px; margin:14px 0; }
.sec-head p{ font-size:17px; color:var(--ink-soft); }

/* hero floating enquiry bar */
.hero-bar{ margin:36px auto 0; max-width:720px; background:rgba(28,36,28,.5); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); text-align:left; }
.hero-bar-tabs{ display:flex; }
.hero-bar-tabs button{ flex:1; padding:14px; background:transparent; border:none; cursor:pointer; font-family:var(--body); font-size:13px; letter-spacing:.06em; color:rgba(255,255,255,.72); transition:all var(--fast); }
.hero-bar-tabs button.active{ background:rgba(168,139,94,.9); color:#fff; }
.hero-bar-fields{ display:flex; align-items:stretch; }
.hero-bar-field{ flex:1; padding:18px 22px; border-right:1px solid rgba(255,255,255,.12); }
.hero-bar-field label{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand-soft); margin-bottom:5px; }
.hero-bar-field span{ color:#F4EFE6; font-size:15px; }
.hero-bar-go{ width:64px; background:var(--sand); border:none; color:#fff; font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; text-decoration:none; transition:background var(--fast); }
.hero-bar-go:hover{ background:var(--sand-soft); }
@media(max-width:700px){ .hero-bar-fields{ flex-wrap:wrap; } }

/* location split */
.home-split{ display:flex; gap:64px; align-items:center; }
.home-split-media{ flex:1 1 50%; overflow:hidden; }
.home-split-media img{ width:100%; height:560px; object-fit:cover; }
.home-split-text{ flex:1 1 45%; }
.home-split-text h2{ font-size:48px; margin:14px 0 22px; }
.home-split-text p{ font-size:17px; margin-bottom:18px; color:var(--ink-soft); }
.tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.tag{ font-size:12.5px; padding:8px 16px; border:1px solid var(--line); color:var(--ink-soft); border-radius:30px; background:var(--surface); }
@media(max-width:900px){ .home-split{ flex-direction:column; } .home-split-media img{ height:340px; } }

/* full-bleed image (placeholder scenes are sky-heavy — bias crop to the hills) */
.home-bleed{ height:48vh; min-height:360px; max-height:520px; overflow:hidden; }
.home-bleed img{ width:100%; height:100%; object-fit:cover; object-position:center 72%; }

/* pillars */
.home-pillars{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); }
.pillar{ flex:1 1 240px; padding:52px 36px; border-right:1px solid var(--line); }
.pillar:last-child{ border-right:none; }
.pillar .pnum{ font-family:var(--display); font-size:46px; color:var(--sand); line-height:1; }
.pillar h3{ font-size:24px; margin:16px 0 12px; }
.pillar p{ font-size:15px; color:var(--ink-soft); }
@media(max-width:900px){ .pillar{ flex:1 1 100%; border-right:none; border-bottom:1px solid var(--line); } }

/* vision band */
.home-vision{ text-align:center; }
.home-vision h2{ font-size:46px; color:#F4EFE6; font-style:italic; line-height:1.25; margin:0; }
.home-vision p{ color:rgba(244,239,230,.8); font-size:17px; margin:28px auto 34px; max-width:600px; font-weight:300; }

/* investment cards */
.home-inv{ display:flex; flex-wrap:wrap; gap:24px; }
.inv-card{ flex:1 1 300px; background:var(--surface); padding:42px 34px; border-top:2px solid var(--sand); }
.inv-card h3{ font-size:24px; margin:18px 0 14px; }
.inv-card p{ font-size:15px; color:var(--ink-soft); }

/* ============================================================
   RESIDENCES (units.html)
   ============================================================ */
.unit-tabs{ position:sticky; top:0; z-index:40; background:var(--ink); display:flex; justify-content:center; }
.unit-tabs a{ padding:18px 30px; font-size:14px; letter-spacing:.04em; color:rgba(244,239,230,.7); border-bottom:2px solid transparent; transition:all var(--fast); }
.unit-tabs a:hover{ color:var(--sand-soft); border-color:var(--sand); }
.unit-sec h2{ font-size:46px; }
.unit-media{ display:flex; gap:14px; margin-top:34px; }
.unit-plan{ flex:1 1 46%; position:relative; }
.unit-plan .planbox{ height:420px; background:var(--bg-deep); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); text-align:center; padding:20px; font-size:14px; }
.unit-plan .badge{ position:absolute; top:14px; left:14px; background:var(--green); color:#F4EFE6; font-size:12px; letter-spacing:.08em; padding:8px 14px; }
.unit-grid{ flex:1 1 54%; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.unit-ph{ height:203px; background:var(--bg-deep); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; letter-spacing:.08em; text-align:center; }
.unit-specs{ display:flex; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); margin:30px 0; }
.unit-specs .s{ flex:1; padding:22px; text-align:center; border-right:1px solid var(--line); }
.unit-specs .s:last-child{ border-right:none; }
.unit-specs .s b{ display:block; font-family:var(--display); font-size:24px; color:var(--green); }
.unit-specs .s span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
@media(max-width:900px){ .unit-media{ flex-direction:column; } .unit-grid .unit-ph{ height:150px; } }

/* ============================================================
   ABOUT (about.html)
   ============================================================ */
.letter{ display:flex; gap:54px; align-items:flex-start; }
.letter-cap{ font-family:var(--display); font-size:180px; line-height:.7; color:var(--green); flex:0 0 auto; }
.letter-body p{ font-size:17px; margin-bottom:18px; max-width:640px; color:var(--ink-soft); }
.letter-sign{ font-family:var(--display); font-style:italic; font-size:22px; color:var(--sand); margin-top:10px; }
.setting-grid{ display:flex; flex-wrap:wrap; gap:40px; }
.setting-col{ flex:1 1 240px; }
.setting-col .eyebrow{ color:var(--sand-soft); }
.setting-col h3{ font-size:30px; color:#F4EFE6; margin:10px 0; }
.setting-col p{ color:rgba(244,239,230,.8); font-size:15px; }
.team-grid{ display:flex; flex-wrap:wrap; gap:24px; }
.team-card{ flex:1 1 320px; background:var(--surface); border:1px solid var(--line); padding:40px; }
.team-card h3{ font-size:26px; margin:8px 0 14px; }
.team-card p{ font-size:14.5px; margin-bottom:8px; color:var(--ink-soft); }
@media(max-width:900px){ .letter{ flex-direction:column; gap:10px; } .letter-cap{ font-size:120px; } }

/* ============================================================
   CONTACT (contact.html)
   ============================================================ */
.contact-head{ background:var(--green); color:#F4EFE6; text-align:center; }
.contact-head h1{ font-size:58px; color:#F4EFE6; margin:14px 0; }
.contact-head p{ color:rgba(244,239,230,.82); font-size:18px; font-weight:300; }
.contact-wrap{ display:flex; gap:54px; align-items:flex-start; }
.contact-form{ flex:1 1 55%; }
.contact-form .fld{ width:100%; padding:14px 16px; border:1px solid var(--line); font-family:var(--body); font-size:15px; margin-bottom:14px; background:var(--surface); }
.contact-form textarea.fld{ min-height:130px; resize:vertical; }
.contact-info{ flex:1 1 40%; background:var(--surface); border:1px solid var(--line); padding:40px; }
.contact-info h3{ font-size:26px; margin-bottom:20px; }
.info-block{ margin-bottom:26px; }
.info-block .eyebrow{ display:block; margin-bottom:8px; }
.info-block p{ font-size:15px; margin-bottom:4px; color:var(--ink-soft); }
.map-ph{ height:420px; background:var(--bg-deep); border:1px dashed var(--line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; }
@media(max-width:900px){ .contact-wrap{ flex-direction:column; } }

/* ---- shared bits ---- */
.corals .eyebrow,
.eyebrow{ font-family:var(--body); font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--sand); }
.corals-display{ font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:-.5px; }

/* ---- chips / pills ---- */
.chip{ display:inline-block; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; border-radius:30px; }
.chip-coll, .lc-coll{ background:rgba(44,61,50,.10); color:var(--green); }
.chip-type, .lc-type{ background:rgba(168,139,94,.16); color:var(--sand); }
.chip-avail{ background:rgba(61,84,67,.16); color:var(--green-2); }
.chip-res{ background:rgba(168,139,94,.18); color:#8a6d3b; }

/* ============================================================
   SINGLE LOT
   ============================================================ */
.lot-crumb{ font-size:13px; color:var(--muted); letter-spacing:.04em; }
.lot-crumb a:hover{ color:var(--sand); }
.lot-price{ font-family:var(--display); font-size:40px; color:var(--sand); line-height:1; }
.lot-price small{ display:block; font-family:var(--body); font-size:12px; letter-spacing:.1em; color:var(--muted); text-transform:uppercase; }
.lot-loc{ color:var(--muted); font-size:15px; }

/* gallery: big + 2x2 (Elementor gallery lightbox handles "see all") */
.lot-gallery .gallery-main img{ width:100%; height:520px; object-fit:cover; }
.lot-gallery .gallery-side img{ width:100%; height:254px; object-fit:cover; }
@media(max-width:900px){ .lot-gallery .gallery-main img{ height:300px; } }

.lot-gallery .see-all{ position:absolute; inset:0; background:rgba(20,28,20,.5); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; letter-spacing:.05em; }
.lot-gallery a{ display:block; height:100%; }
@media(max-width:900px){ .lot-gallery{ flex-direction:column; } }

/* lightbox */
.corals-lightbox{ position:fixed; inset:0; z-index:99999; background:rgba(15,20,15,.95); display:none; align-items:center; justify-content:center; }
.corals-lightbox .clb-img{ max-width:80%; max-height:78%; object-fit:contain; }
.corals-lightbox .clb-close{ position:absolute; top:24px; right:34px; color:#fff; font-size:40px; cursor:pointer; }
.corals-lightbox .clb-nav{ position:absolute; color:#fff; font-size:46px; cursor:pointer; user-select:none; }
.corals-lightbox .clb-prev{ left:30px; } .corals-lightbox .clb-next{ right:30px; }

/* stats strip */
.lot-stats{ display:flex; background:var(--surface); border:1px solid var(--line); }
.lot-stats .s{ flex:1; padding:24px; text-align:center; border-right:1px solid var(--line); }
.lot-stats .s:last-child{ border-right:none; }
.lot-stats .s .v{ font-family:var(--display); font-size:28px; color:var(--green); }
.lot-stats .s .k{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

/* anchor nav (sticky dark bar, full-bleed; inner is the centered flex row) */
.anchor-nav{ background:var(--ink); }
.anchor-nav a{ padding:16px 22px; font-size:13px; letter-spacing:.04em; color:rgba(244,239,230,.7); white-space:nowrap; transition:color var(--fast); border-bottom:2px solid transparent; }
.anchor-nav a:hover{ color:var(--sand-soft); border-color:var(--sand); }

/* key/value detail grid */
.kv{ display:flex; flex-wrap:wrap; gap:18px 0; }
.kv .item{ flex:1 1 50%; font-size:14.5px; }
.kv .item b{ color:var(--ink); font-weight:500; }
.kv .item span{ color:var(--ink-soft); }
@media(max-width:900px){ .kv .item{ flex:1 1 100%; } }

/* sidebar enquiry card */
.side-card{ background:#fff; border:1px solid var(--line); box-shadow:0 14px 40px rgba(30,36,32,.08); }
.side-inner{ padding:26px; }
.agent{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.agent-img{ width:54px; height:54px; border-radius:50%; background:var(--green); color:#F4EFE6; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:22px; }
.agent b{ font-size:16px; } .agent span{ font-size:13px; color:var(--muted); }
.side-banner{ background:var(--green-2); color:#F4EFE6; text-align:center; padding:11px; font-size:13px; letter-spacing:.04em; margin-bottom:18px; }

/* feature lists (also styled inline by shortcode; kept here for override) */
.corals-feature-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
.corals-feature-list li{ flex:1 1 33%; min-width:160px; font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.corals-feature-list li::before{ content:'\2713'; color:var(--sand); font-size:13px; }
@media(max-width:768px){ .corals-feature-list li{ flex:1 1 50%; } }

/* ============================================================
   COLLECTION DETAIL — lot cards (Loop Grid)
   The SAME cards switch between grid and list via .lots.grid / .lots.list
   ============================================================ */
.lots.grid{ display:flex; flex-wrap:wrap; gap:26px; }

/* base card — flex applies in BOTH grid and list views */
.lot-card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); overflow:hidden; color:inherit; text-decoration:none; transition:box-shadow var(--fast), transform var(--fast); }
.lots.grid .lot-card{ flex:1 1 calc(33.333% - 18px); min-width:280px; }
.lot-card:hover{ box-shadow:0 20px 44px rgba(30,36,32,.14); }
.lots.grid .lot-card:hover{ transform:translateY(-4px); }

.lot-card-media{ position:relative; height:220px; overflow:hidden; }
.lot-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform var(--slow) var(--ease); }
.lot-card:hover .lot-card-media img{ transform:scale(1.07); }
.lot-card-status{ position:absolute; top:14px; left:14px; z-index:3; font-size:11px; letter-spacing:.08em; text-transform:uppercase; padding:6px 13px; }
.st-avail{ background:rgba(44,61,50,.92); color:#F4EFE6; }
.st-res{ background:rgba(168,139,94,.95); color:#fff; }

.lot-card-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.lot-card-body h3{ font-family:var(--display); font-size:28px; line-height:1; }
.lot-card-meta{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 14px; }
.lc-chip{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:5px 11px; border-radius:30px; }
.lot-card-body p{ font-size:14px; color:var(--ink-soft); margin-bottom:16px; }
.lot-card-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; border-top:1px solid var(--line); }
.lot-card-size{ font-family:var(--display); font-size:22px; color:var(--green); }
.lot-card-size small{ font-family:var(--body); font-size:10px; letter-spacing:.1em; color:var(--muted); display:block; }

/* LIST VIEW — wide boxed rows: image left (full height), padded body */
.lots.list{ display:flex; flex-direction:column; gap:24px; }
.lots.list .lot-card{ flex-direction:row; align-items:stretch; }
.lots.list .lot-card-media{ flex:0 0 320px; align-self:stretch; height:auto; min-height:220px; }
.lots.list .lot-card-body{ padding:28px 32px; }
.lots.list .lot-card-body h3{ font-size:32px; }
@media(max-width:900px){
  .lots.grid .lot-card{ flex:1 1 100%; }
  .lots.list .lot-card{ flex-direction:column; }
  .lots.list .lot-card-media{ flex:0 0 auto; width:100%; height:220px; min-height:0; align-self:auto; }
}

/* toolbar + view toggle */
.cd-toolbar{ background:var(--surface); border-bottom:1px solid var(--line); }
.view-toggle{ display:inline-flex; border:1px solid var(--line); }
.view-toggle button{ width:44px; height:42px; background:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted); transition:all var(--fast); }
.view-toggle button.active{ background:var(--green); color:#F4EFE6; }
.view-toggle button svg{ width:18px; height:18px; }
.cd-count{ font-size:14px; color:var(--ink-soft); }
.cd-count b{ font-family:var(--display); font-size:20px; color:var(--green); }
.cd-select{ padding:10px 14px; border:1px solid var(--line); background:#fff; font-family:var(--body); font-size:13.5px; color:var(--ink); cursor:pointer; }
/* Hero — centered (shared pattern for all page heroes) */
.cd-hero{ position:relative; display:flex; align-items:center; justify-content:center; text-align:center; min-height:440px; overflow:hidden; }
.cd-hero::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,28,20,.78), rgba(20,28,20,.4)); }
.cd-hero-inner{ position:relative; z-index:5; max-width:760px; margin:0 auto; width:100%; padding:56px 20px; text-align:center; }
.cd-hero-inner > *{ margin-left:auto; margin-right:auto; }
.cd-hero .crumb{ color:rgba(244,239,230,.7); font-size:13px; letter-spacing:.04em; margin-bottom:16px; }
.cd-hero .crumb a:hover{ color:var(--sand-soft); }

/* amenities cards */
.amen-card{ flex:1 1 200px; background:var(--surface); padding:34px 26px; border:1px solid var(--line); }
.amen-letter{ width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:var(--green); color:#F4EFE6; font-family:var(--display); font-size:24px; margin-bottom:16px; }
.amen-scene{ width:100%; height:90px; display:block; }

/* ============================================================
   COLLECTIONS OVERVIEW (rows on Collections page, cards on Home)
   ============================================================ */
.coll-overview{ display:flex; flex-direction:column; gap:28px; }
.coll-row{ display:flex; background:var(--surface); overflow:hidden; border:1px solid var(--line); color:inherit; text-decoration:none; transition:box-shadow var(--fast), transform var(--fast); }
.coll-row:hover{ box-shadow:0 18px 40px rgba(30,36,32,.12); transform:translateY(-3px); }
.coll-row-media{ flex:0 0 40%; overflow:hidden; }
.coll-row-media img{ width:100%; height:100%; min-height:280px; object-fit:cover; transition:transform var(--slow) var(--ease); }
.coll-row:hover .coll-row-media img{ transform:scale(1.06); }
.coll-row-body{ flex:1; padding:42px 44px; display:flex; flex-direction:column; justify-content:center; }
.coll-row-body h3{ font-size:36px; margin:8px 0 14px; }
.coll-row-body p{ font-size:15.5px; max-width:480px; color:var(--ink-soft); }
.coll-badge{ display:inline-block; margin-top:20px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); background:rgba(44,61,50,.08); padding:8px 16px; align-self:flex-start; }
.coll-row-link{ margin-top:22px; font-size:14px; letter-spacing:.06em; color:var(--sand); }

.coll-grid{ display:flex; flex-wrap:wrap; gap:24px; }
.coll-card{ flex:1 1 calc(50% - 12px); position:relative; height:420px; overflow:hidden; background-size:cover; background-position:center; color:#fff; text-decoration:none; }
.coll-card::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,28,20,.84) 0%, rgba(20,28,20,.1) 60%); }
.coll-card-body{ position:absolute; left:0; bottom:0; z-index:3; padding:34px; color:#fff; width:100%; }
.coll-card-body h3{ font-size:34px; color:#F7F3EA; margin:8px 0; }
.coll-card-body .count{ font-size:14px; color:rgba(255,255,255,.82); }
.coll-card-body .more{ margin-top:14px; font-size:13px; letter-spacing:.08em; color:var(--sand-soft); opacity:0; transform:translateY(8px); transition:all var(--base); }
.coll-card:hover .more{ opacity:1; transform:translateY(0); }
@media(max-width:900px){
  .coll-row{ flex-direction:column; } .coll-row-media{ flex:0 0 auto; height:220px; }
  .coll-card{ flex:1 1 100%; }
}

/* ============================================================
   ACCORDIONS / floor-plan tabs / sidebar form / buttons / embeds
   ============================================================ */
.acc{ background:var(--surface); border:1px solid var(--line); margin-bottom:18px; scroll-margin-top:90px; }
.acc-head{ display:flex; justify-content:space-between; align-items:center; padding:22px 28px; cursor:pointer; }
.acc-head h3{ font-family:var(--display); font-weight:400; font-size:24px; margin:0; }
.acc-head .chev{ transition:transform var(--fast); color:var(--sand); font-size:18px; }
.acc.open .chev{ transform:rotate(180deg); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height var(--base) var(--ease); }
.acc.open .acc-body{ max-height:2200px; }
.acc-inner{ padding:0 28px 28px; }
.acc-inner p{ font-size:15.5px; color:var(--ink-soft); }
.feat-group{ margin-bottom:22px; }
.feat-group h4{ font-family:var(--body); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--sand); margin-bottom:14px; }
.corals-embed iframe, .corals-embed img{ width:100%; display:block; }
.media-label{ height:300px; background:var(--bg-deep); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; border:1px dashed var(--line); text-align:center; padding:20px; }

/* floor plan tabs */
.fp-tabs{ display:flex; gap:0; border-bottom:1px solid var(--line); margin-bottom:24px; flex-wrap:wrap; }
.fp-tab{ padding:14px 22px; background:transparent; border:none; border-bottom:2px solid transparent; font-family:var(--body); font-size:14px; cursor:pointer; color:var(--muted); }
.fp-tab.active{ color:var(--green); border-color:var(--sand); }
.fp-panel{ display:none; }
.fp-panel.active{ display:block; }
.fp-panel img{ width:100%; height:auto; }
.fp-specs{ display:flex; gap:0; background:var(--surface); border:1px solid var(--line); margin:18px 0; }
.fp-specs .s{ flex:1; padding:16px; text-align:center; border-right:1px solid var(--line); font-size:14px; }
.fp-specs .s:last-child{ border-right:none; }
.fp-specs .s b{ display:block; font-family:var(--display); font-size:22px; color:var(--green); }

/* sidebar form */
.side-tabs{ display:flex; }
.side-tabs button{ flex:1; padding:16px; background:var(--surface); border:none; border-bottom:1px solid var(--line); font-family:var(--body); font-size:14px; cursor:pointer; color:var(--muted); }
.side-tabs button.active{ background:#fff; color:var(--ink); border-bottom:2px solid var(--sand); }
.fld{ width:100%; padding:13px 15px; border:1px solid var(--line); font-family:var(--body); font-size:14px; margin-bottom:12px; background:var(--surface); }
.fld:focus{ outline:none; border-color:var(--sand); }
textarea.fld{ resize:vertical; min-height:90px; }

/* buttons */
.corals-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; font-family:var(--body); font-size:14px; font-weight:500; letter-spacing:.04em; padding:14px 26px; cursor:pointer; border:1px solid transparent; margin-bottom:10px; transition:all var(--fast); text-align:center; }
.corals-btn.sand{ background:var(--sand); color:#fff; } .corals-btn.sand:hover{ background:var(--sand-soft); }
.corals-btn.ghost{ background:transparent; border:1px solid var(--ink); color:var(--ink); } .corals-btn.ghost:hover{ background:var(--ink); color:var(--bg); }
.corals-btn.primary{ background:var(--green); color:#F4EFE6; } .corals-btn.primary:hover{ background:var(--green-2); }
.corals-enquiry-form .corals-btn{ margin-top:4px; }

/* lot action buttons (share/save/print) */
.lot-actions{ display:flex; gap:10px; }
.lot-actions button{ background:#fff; border:1px solid var(--line); padding:9px 18px; font-family:var(--body); font-size:13px; cursor:pointer; transition:all var(--fast); }
.lot-actions button:hover{ border-color:var(--sand); color:var(--sand); }

/* ============================================================
   SureForms contact form — match the brand field styling (wide cream fields)
   ============================================================ */
.elementor-widget-sureforms_form .srfm-input-common,
.elementor-widget-sureforms_form input:not([type=submit]):not([type=checkbox]):not([type=radio]):not(.srfm-input-phone),
.elementor-widget-sureforms_form textarea,
.elementor-widget-sureforms_form select{
  width:100% !important; background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:0 !important; padding:13px 15px !important; font-family:var(--body) !important;
  font-size:14px !important; color:var(--ink) !important; box-shadow:none !important;
}
/* Phone input: same cream look, but reserve room on the left for the flag +
   dial code (the broad rule's 15px left padding caused them to overlap the
   placeholder). This selector is more specific so the left padding sticks. */
.elementor-widget-sureforms_form input.srfm-input-phone{
  width:100% !important; background:var(--surface) !important; border:1px solid var(--line) !important;
  border-radius:0 !important; padding:13px 15px 13px 62px !important;
  font-family:var(--body) !important; font-size:14px !important; color:var(--ink) !important; box-shadow:none !important;
}
.elementor-widget-sureforms_form textarea{ min-height:120px !important; resize:vertical !important; }
.elementor-widget-sureforms_form input:focus,
.elementor-widget-sureforms_form textarea:focus,
.elementor-widget-sureforms_form select:focus{ border-color:var(--sand) !important; outline:none !important; }
.elementor-widget-sureforms_form label,
.elementor-widget-sureforms_form .srfm-block-label{ font-family:var(--body) !important; color:var(--ink-soft) !important; font-size:13px !important; }
.elementor-widget-sureforms_form .srfm-submit-button,
.elementor-widget-sureforms_form button[type=submit]{
  background:var(--sand) !important; border:1px solid var(--sand) !important; color:#fff !important;
  border-radius:0 !important; padding:14px 30px !important; font-family:var(--body) !important;
  letter-spacing:.04em !important;
}
.elementor-widget-sureforms_form .srfm-submit-button:hover,
.elementor-widget-sureforms_form button[type=submit]:hover{ background:var(--sand-soft) !important; border-color:var(--sand-soft) !important; }

/* ============================================================
   COLLECTIONS page — sticky filter / search bar
   ============================================================ */
.filterbar{ position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line); }
.filterbar-inner{ max-width:1240px; margin:0 auto; padding:18px 32px; display:flex; gap:18px; align-items:flex-end; flex-wrap:wrap; font-family:var(--body); }
.filterbar .filt{ flex:1 1 200px; }
.filterbar label{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.filterbar select{ width:100%; padding:12px 14px; border:1px solid var(--line); background:#fff; font-family:var(--body); font-size:14px; color:var(--ink); cursor:pointer; }
.filterbar .cf-search{ background:var(--sand); color:#fff; border:none; padding:13px 30px; font-family:var(--body); font-size:14px; letter-spacing:.04em; cursor:pointer; transition:background .2s; }
.filterbar .cf-search:hover{ background:var(--sand-soft); }

/* ============================================================
   PAGE HEROES — full-bleed background, content boxed to the 1240
   content column so the heading aligns with the rest of the page.
   (class `corals-hero` is added to the hero's outer container.)
   ============================================================ */
.corals-hero{ padding-left:0 !important; padding-right:0 !important; }
.corals-hero > .e-con{
  max-width:1240px !important; width:100% !important;
  margin-left:auto !important; margin-right:auto !important;
}
@media(max-width:1300px){
  .corals-hero > .e-con{ padding-left:32px !important; padding-right:32px !important; }
}

/* Centered CTA / vision blocks that were pinned to the left of their
   column (class `corals-center-block` added to the content container). */
.corals-center-block{ margin-left:auto !important; margin-right:auto !important; }

/* ============================================================
   HOME — Collections cards: whole card clickable + Explore on hover
   (class `corals-coll-card` + a container link added in Elementor data)
   ============================================================ */
.corals-coll-card{ cursor:pointer; }
.corals-coll-card::after{
  content:'Explore \2192'; display:block; margin-top:14px;
  font-family:var(--body); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sand-soft); opacity:0; transform:translateY(8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
  position:relative; z-index:3; pointer-events:none;
}
.corals-coll-card:hover::after{ opacity:1; transform:translateY(0); }
/* lift the card slightly on hover to echo the design-reference cards */
.corals-coll-card{ transition:box-shadow .3s var(--ease), transform .3s var(--ease); }
.corals-coll-card:hover{ transform:translateY(-4px); box-shadow:0 22px 48px rgba(20,28,20,.28); }

/* ============================================================
   HEADER NAV — bump menu link size by 2px (14 -> 16)
   ============================================================ */
.elementor-location-header .elementor-button .elementor-button-text{ font-size:16px !important; }

/* Keep every nav item (esp. the "Book a Viewing" button) on a single line.
   The label was wrapping to two lines; nowrap + don't-shrink fixes it, and we
   trim the nav button padding/gap a touch so the row still fits the boxed width. */
.elementor-location-header .elementor-button,
.elementor-location-header .elementor-button .elementor-button-text{ white-space:nowrap; }
.elementor-location-header .elementor-button{ flex-shrink:0; }
/* Let the nav row use the full width it needs and sit hard against the right,
   pulling left for more space (as requested) instead of crowding the button. */
.elementor-location-header .elementor-widget-button{ flex-shrink:0; }

/* ============================================================
   CONTACT FORM (SureForms) — drop the default white panel (the approved
   design places cream fields directly on the page) + tighten the spacing
   ============================================================ */
.elementor-widget-sureforms_form .srfm-form-container,
.elementor-widget-sureforms_form .srfm-bg-color{ background:transparent !important; box-shadow:none !important; }

/* Drive the gaps through SureForms' own spacing variables so the fields sit
   closer together (they were spread ~50px apart). */
.elementor-widget-sureforms_form .srfm-form{
  --srfm-row-gap-between-blocks:14px;
  --srfm-input-field-margin-top:6px;
  --srfm-input-field-margin-bottom:0px;
  --srfm-gap-below-address-label:6px;
}
.elementor-widget-sureforms_form .srfm-block{ margin-bottom:0 !important; }
.elementor-widget-sureforms_form .srfm-block-single + .srfm-block-single{ margin-top:14px !important; }
.elementor-widget-sureforms_form label,
.elementor-widget-sureforms_form .srfm-block-label{ display:inline-block; margin-bottom:6px !important; }
.elementor-widget-sureforms_form .srfm-block-wrap{ margin-top:0 !important; }
.elementor-widget-sureforms_form .srfm-submit-richtext-container,
.elementor-widget-sureforms_form .srfm-submit-btn-container,
.elementor-widget-sureforms_form .srfm-submit-container{ margin-top:8px !important; }

/* Phone field: our forced field padding was overriding intl-tel-input's
   left padding, so the flag + dial code overlapped the placeholder. Restore
   room for the flag and make the intl wrapper fill the field width. */
.elementor-widget-sureforms_form .iti{ display:block !important; width:100% !important; }
/* keep the flag/dial-code button compact and on the left so it doesn't span
   the whole field; intl-tel-input pads the input to clear it. */
.elementor-widget-sureforms_form .iti__country-container{ width:auto !important; }
.elementor-widget-sureforms_form .iti__selected-country{ background:transparent !important; }

/* ============================================================
   RESPONSIVE — let the archive toolbar wrap again on small screens
   ============================================================ */
@media(max-width:1024px){
  .corals-archive-toolbar{ flex-wrap:wrap !important; }
  .corals-archive-toolbar > .e-con{ flex-wrap:wrap !important; justify-content:flex-start !important; }
  .corals-tf .e-filter, .corals-tf ul{ flex-wrap:wrap; }
}

/* ============================================================
   MOBILE READINESS — safety nets only.
   Responsive layout (header hamburger, column stacking, heading
   sizes) is driven by Elementor's own tablet/mobile settings in the
   element data so the client can keep editing it visually. We do NOT
   force those with !important here (that would override the editor).
   These rules are only non-destructive guards.
   ============================================================ */
@media(max-width:1024px){
  /* No element may trigger horizontal page scroll. */
  html,body{ overflow-x:hidden; }
  /* Media never exceeds its column. */
  img, iframe, video, .corals-tour-embed{ max-width:100%; height:auto; }
}

/* ============================================================
   HEADER HAMBURGER — mobile + tablet (<=1024px)
   The nav stays as the existing Elementor button widgets (fully
   editable); JS adds the .corals-nav-links class + a toggle button.
   No !important so per-widget Elementor styling still applies.
   ============================================================ */
.corals-hamburger{ display:none; }
@media(max-width:1024px){
  .elementor-location-header .e-con-inner{ position:relative; }
  /* the toggle */
  .corals-hamburger{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:10px; margin-left:auto;
    background:transparent; border:0; cursor:pointer;
  }
  .corals-hamburger span{ display:block; width:100%; height:2px; background:var(--surface);
    border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  .corals-nav-open .corals-hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .corals-nav-open .corals-hamburger span:nth-child(2){ opacity:0; }
  .corals-nav-open .corals-hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  /* collapse the inline nav; reveal it as a dropdown panel when open */
  .elementor-location-header .corals-nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:60;
    flex-direction:column; align-items:stretch;
    background:var(--green); padding:10px 20px 18px; gap:2px;
    box-shadow:0 20px 44px rgba(20,28,20,.4);
  }
  .corals-nav-open .elementor-location-header .corals-nav-links,
  .elementor-location-header.is-nav-open .corals-nav-links,
  .corals-nav-open .corals-nav-links{ display:flex; }
  .elementor-location-header .corals-nav-links .elementor-widget-button{ width:100%; }
  .elementor-location-header .corals-nav-links .elementor-button{ width:100%; justify-content:flex-start; }
}

/* ============================================================
   LOT DETAIL — anchor section-nav: uniform 3-up grid on phones
   (was wrapping unevenly, e.g. "Virtual Tour" orphaning a row).
   This is a fixed UI component, so it's styled here rather than via
   the per-widget responsive editor.
   ============================================================ */
@media(max-width:767px){
  /* the flex row that holds the 9 links -> a clean 3-column grid */
  .corals-anchor-nav .e-con:has(> .anchor-link){
    display:grid; grid-template-columns:repeat(3,1fr); gap:2px;
  }
  .corals-anchor-nav .anchor-link{ max-width:none; }
  .corals-anchor-nav .anchor-link .elementor-heading-title{ padding:13px 4px; text-align:center; }
}