:root {
  --ink: #0d1d15;
  --ink-90: #25332c;
  --ink-70: #55605b;
  --ink-50: #868e8a;
  --gold: #dba73a;
  --gold-80: #dba73a;
  --gold-60: #dba73a;
  --pink: #0e92ef;
  --light-pink: #0e92ef;
  --bg-gray: #222222;
}

.text-pink {color: #0e92ef; }
.text-light-pink{ color: var(--light-pink);}
.text-cream { color: #DED2C4;}
.logo-text{ font-size: 1.25rem; font-weight: 600;}
h6{ color: var(--pink)}
.offcanvas{background-color: var(--bg-gray)};

body { background: #FFFAF7; color: #494949; font-family: xInter, xsystem-ui, -xapple-system, Segoe UI, xRoboto, xArial, Helvetica, sans-serif; }
.brand-serif { font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif; }
.bg-ink { background-color: var(--bg-gray) !important; }
.bg-ink-90 { background-color: var(--bg-gray) !important; }
.text-gold { color: #cc9b36; }
.text-gold-60 { color: var(--pink) !important; }
.text-ink-50 { color: var(--pink) !important; }
.link-gold-80 { color: var(--pink) !important; text-decoration: none; }
.link-gold-80:hover { color: var(--cream) !important; }
.btn-outline-pink { border-color: var(--light-pink) !important; color: var(--light-pink); }
.btn-outline-pink:hover { background-color: var(--light-pink) !important; color: var(--cream) !important; }
.border-gold-20 { border-color: rgba(232, 31, 113, .35) !important; }
.backdrop-blur { backdrop-filter: blur(8px); }

/* Hero */
.hero img { height: clamp(42vh, 60vw, 76vh); object-fit: cover; }
.xhero-overlay { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0.3), rgba(0,0,0,.6)); }
.hero-content { position:absolute; inset:0; display:grid; place-items:end start; padding: min(8vw, 80px); }
.kicker { color: #E83D71; text-transform: uppercase; letter-spacing: .2em; font-size: .85rem; font-weight: 700; }
.display-serif { font-family: 'Libre Baskerville', Georgia, serif; }
.badge-gold { border:1px solid var(--gold); color: var(--gold); border-radius:999px; padding: .35rem .6rem; font-size:.75rem; }

/* Cards */
.card.bg-ink-90 { background: var(--ink-90); border-color: rgba(182,150,88,.35); }
.card img { height: 240px; object-fit: cover; }

/* Forms */
.form-control, .form-select, textarea.form-control {
  background: white;
  background-color: #EEEEEE;
  border-color: rgba(182,150,88,.35);
  color: black;
}
.form-control::placeholder { color: var(--ink-50); }
.form-select { color: black; }

/* Make collapsed menu only as wide as its content */

#adminNav.collapse.navbar-collapse {
  flex-basis: auto;
  width: auto;
}

/* Align to left under the toggler */
.navbar .collapse.show {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #25332c; /* match bg-dark */
  xborder: 1px solid rgba(255,255,255,0.1);
  padding: 0.5rem 1rem;
  z-index: 1000;
}


/* Agent ad */
.agent-card{overflow:hidden; border:1px solid #e6e6e2;}
.agent-card .agent-header{background: var(--muted);}
.btn-brand{background: var(--brand-gold); color:#000; border:none;}
.btn-brand:hover{filter:brightness(0.95);}


/* === Shared Property Hero (used by detail + listing) === */
header.hero {
  position: relative;
  width: 100%;
  height: 48vh;           /* responsive height like detail page */
  min-height: 360px;
  max-height: 520px;
  overflow: hidden;
  border-radius: 0;
}
@media (max-width: 640px){
  header.hero { height: 40vh; min-height: 260px; }
}
header.hero > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;              /* fill area without distortion */
  object-position: center center; /* stay centered */
  display: block;
  border-radius: 0;
}
header.hero .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
  border-radius: 0;
}
header.hero .meta {
  position: absolute;
  left: 16px; right: 16px; bottom: 56px;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  z-index: 2;
}
header.hero .meta h1 {
  margin: .2rem 0 4px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.6rem;
  -webkit-text-stroke: 0.75px #E83D71;
  -webkit-text-fill-color: #FFFDEE; 
  paint-order: stroke fill;
}
header.hero .meta .price {
  display: inline-block;
  background: rgba(0,0,0,.75);
  padding: 6px 10px;
  border-radius: 10px;
  font-weight: 700;
  margin-right: 8px;
  color: #cc9b36;
}
header.hero .chipsbar {
  position: absolute;
  left: 16px; right: 16px; bottom: 12px;
  display: flex; gap: 8px; flex-wrap: wrap;
  z-index: 2;
}
/* Let your site’s .chip styling win; this just ensures inline layout */
header.hero .chip { display: inline-block; }


/* === Shared Property Hero (detail + listing) === */
.hero{
  position:relative;
  height:60vh;
  min-height:360px;
  overflow:hidden;
  background:#000;
  box-shadow:var(--shadow, 0 10px 30px rgba(0,0,0,.06));
  border-radius:0;
}
.hero>img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; display:block; border-radius:0; }
.hero .overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0)); border-radius:0; }
.hero .meta{ position:absolute; left:20px; right:20px; bottom:72px; color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); z-index:2; }
.hero .price{ background:rgba(0,0,0,.5); display:inline-block; padding:6px 10px; border-radius:8px; font-weight:700; }
.chipsbar{ position:absolute; left:20px; right:20px; bottom:18px; display:flex; gap:8px; flex-wrap:wrap; z-index:2; }

.hero .chipsbar{
  position:absolute; left:20px; right:20px; bottom:18px;
  display:flex; flex-wrap:wrap; gap:8px; z-index:2;
}
 .hero .chip{
  display:inline-block;
  font-size: .9rem !important;   /* override any parent font-size:0 */
  font-weight: 700;
  line-height: 1.1;
  padding: 6px 10px;
  border-radius: 999px;
  color: #cc9b36;
  background: rgba(0,0,0,.75);
  border: 1px solid rgba(255,255,255,.2);
}

.h1, .h2, h2, .h3, h3{
    color: #696969;
    -webkit-text-stroke: 0.5px #E83D71;
    paint-order: stroke fill;        /* ensures stroke is drawn before fill */

}
     .textstroke1{
        color: #494949;
        -webkit-text-stroke: 0.75px #E83D71;
    }
    .textstroke2{
        font-size: 18px;
        color: var(--pink);
        font-weight: 700;
        -webkit-text-stroke: 0.25px #E83D71;
        line-height: 0.5;
    }


.village-heading {
  font-size: 1.15rem;   /* ~20px */
  font-weight: 600;
  color: #25332c;       /* your brand dark green */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  border-left: 4px solid #FFD878; /* optional gold accent */
  padding-left: 0.5rem;
}


/* === Consolidated page CSS (do not edit inline) === */

/* From properties-for-sale.php */


/* From inc_featured_property.php */
/* === Minimal CSS copied from properties-for-sale listing === */
  .list a.hero-link{ display:block; color:inherit; text-decoration:none; }
  .list a.hero-link + a.hero-link{ margin-top:24px; }

  .hero{
    position:relative;
    height:60vh;                /* same as detail page */
    min-height:360px;
    overflow:hidden;
    background:#000;
    box-shadow:var(--shadow, 0 10px 30px rgba(0,0,0,.06));
    border-radius:0; /* ensure square */
  }
  .hero>img{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center center; display:block; border-radius:0;
  }
  .hero .meta{
    position:absolute; left:20px; right:20px; bottom:72px;
    color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5); z-index:2;
  }
  .hero .meta h1{ margin:.2rem 0 .35rem; font-size:1.6rem; line-height:1.2; }
  .hero .price{ background:rgba(0,0,0,.5); display:inline-block; padding:6px 10px; border-radius:8px; font-weight:700; }
  .chipsbar{
    position:absolute; left:20px; right:20px; bottom:18px;
    display:flex; gap:8px; flex-wrap:wrap; z-index:2;
  }
  .chip{ display:inline-block; } /* visuals come from your global CSS */
  @media (max-width: 640px){
    .hero{ min-height:260px; }
  }

  /* Keep card-summary text size consistent */
  .card-summary p{ font-size:.95rem; color:#475569; }

/* From property-for-sale.php (takes precedence) */
:root{
    --ink:#0f172a;
    --muted:#64748b;
    --rule:#e5e7eb;
    --bg:#ffffff;
    --chip:#f1f5f9;
    --shadow:0 10px 30px rgba(0,0,0,.06);
    --radius:14px;
  }
  html,body{margin:0;padding:0;background:var(--bg);color: #494949;font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
  .wrap{
      max-width:1100px;
      margin:0 auto;
      padding:0px 0px 0px 0px; 
      background-color: #FFFDEE
  }
  .muted{color:var(--muted)}
  .rule{border:0;border-top:1px solid var(--rule);margin:28px 0}
  h1{font-size:clamp(28px,4vw,40px);margin:.2em 0 .2em}
  h2{font-size:clamp(22px,3vw,28px);margin:0 0 .5em}
  h3{font-size:18px;margin:.3em 0}
  p{line-height:1.6}
  figure{margin:0}
  figcaption{color:var(--muted);font-size:.9rem;margin-top:.4rem}
  .grid{display:grid;gap:18px}
  .cols-2{grid-template-columns:1.1fr 1fr}
  @media (max-width: 900px){ .cols-2{grid-template-columns:1fr} }

  /* HERO */
.hero{
  position:relative;
  height:60vh;                /* you asked for 60vh */
  min-height:360px;
  overflow:hidden;
  background:#000;
  box-shadow:var(--shadow);
}
.hero>img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));}

/* move the meta slightly up to make room for chips at the very bottom */
.hero .meta{
  position:absolute; left:20px; right:20px; bottom:72px;
  color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero .price{background:rgba(0,0,0,.5); display:inline-block; padding:6px 10px; border-radius:8px; font-weight:700}

/* chips bar inside the hero, near the bottom edge */
.hero .chipsbar{
  position:absolute; left:20px; right:20px; bottom:18px;
  display:flex; gap:8px; flex-wrap:wrap;
}
.hero .chip{background:rgba(232,63,113,.75); color:#DEDC24; border:1px solid rgba(232,61,213,.2);}

  /* MEDIA sizing */
  .img-wide{width:100%; height:auto; display:block;  box-shadow:var(--shadow)}
  .img-cover{width:100%; height:100%; object-fit:cover; display:block}
  .mosaic{display:grid; grid-template-columns:repeat(12,1fr); gap:6px} /* tight gaps */
  .mosaic img{width:100%; height:100%; object-fit:cover; display:block; border-radius:0} /* square edges */
  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px}
  @media (max-width: 900px){ .two-col{grid-template-columns:1fr} }

  /* Chips */
  .chips{display:flex; gap:8px; flex-wrap:wrap}
  .chip{background:#E83D71; color: #FFFFFF; padding:6px 10px; border-radius:999px; font-size:.9rem; transparency: 0.75}
  
  
  
  
  

  /* Map box (Location & Connectivity) — square corners */
  .mapbox{aspect-ratio:16/9; border:1px solid var(--rule); border-radius:0; overflow:hidden}
  .mapbox img{width:100%; height:100%; object-fit:cover; display:block}

  /* Timeline */
  .timeline{border-left:2px solid var(--rule); margin-left:10px; padding-left:18px}
  .timeline .item{position:relative; margin:18px 0}
  .timeline .item:before{content:''; position:absolute; left:-11px; top:4px; width:10px; height:10px; border-radius:50%; background:#93c5fd}

  /* Highlights */
  .highlights{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
  .highlight{background:#fff; border:1px solid var(--rule); border-radius:14px; padding:14px; box-shadow:var(--shadow)}
  .highlight img{width:28px; height:28px; object-fit:contain; display:block; margin-bottom:6px}

  /* Accordion */
  .accordion .item{border-top:1px solid var(--rule); padding:12px 0}
  .accordion .q{font-weight:600; cursor:pointer}
  .accordion .a{display:none; color:var(--muted); margin-top:8px}

  /* Before/After (fallback side-by-side) */
  .before-after{display:grid; gap:12px; grid-template-columns:1fr 1fr}
  .before-after figure img{width:100%; display:block; border-radius:14px; box-shadow:var(--shadow)}
  @media (max-width: 900px){ .before-after{grid-template-columns:1fr} }

  /* Floorplan */
  .floorplan{display:grid; gap:16px; grid-template-columns:1.3fr 1fr}
  .floorplan .callouts li{margin:6px 0}
  @media (max-width: 900px){ .floorplan{grid-template-columns:1fr} }


/* === Overrides for property-for-sale: square edges + no overlay === */
.hero img{ border-radius:0 !important; }
.hero .overlay{ display:none !important; background:none !important; }
.hero-summary p.lead{ font-size:1.05rem; color:#334155; }



  /* PDF button (hidden in print) */
  .pdf-btn{
    position:fixed; right:16px; top:100px; z-index:9999;
    background:#0f172a; color:#fff; text-decoration:none;
    padding:10px 14px; border-radius:999px; font-weight:700;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
  }
  .pdf-btn:hover{ opacity:.9 }

  /* Print: A4 and no section splits */
  @page { size: A4; margin: 14mm 12mm; }

  @media print {
    .pdf-btn, .hide-print { display:none !important; }
    /* Strong “don’t split” rules – tune selectors to your markup if needed */
    section, article, .section, .card, .panel, .grid, .row, .col, figure, figcaption,
    header, footer, nav, .hero, .gallery, .features, .timeline, .mapbox, .video-box {
      break-inside: avoid; page-break-inside: avoid;
    }
    img, iframe, video { break-inside: avoid; page-break-inside: avoid; }
    body { font-size: 12pt; line-height: 1.4; }
    h1 { font-size: 20pt; }
    h2 { font-size: 15pt; }
  }
  
/* Print-only: de-absolute the hero image so it renders at full height */
@media print {
  header.hero, .hero {
    position: relative !important;
    height: auto !important;     /* let the image set the height */
    min-height: 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  /* Your markup uses .hero > img */
  .hero > img {
    position: static !important; /* <-- key: not absolute in print */
    display: block !important;
    width: 100% !important;
    height: auto !important;     /* natural aspect ratio */
    max-height: none !important; /* avoid being squashed to 1px */
    object-fit: cover !important;
    z-index: 0 !important;
  }
  /* Keep overlay/meta on top of the now static image */
  .hero .overlay {
    position: absolute !important;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 1 !important;
  }
  .hero .meta, .hero .chipsbar {
    position: absolute !important;
    z-index: 2 !important;
  }
}



/* --- PDF cover & print rules (surgical insert) --- */
.brochure-cover{position:relative;min-height:260mm;height:calc(100vh - 0mm);background:#25332c;color:#d8c69c;overflow:hidden}
.brochure-cover .brand-bar{position:absolute;left:0;right:0;top:0;height:10mm;background:#25332c}
.brochure-cover .content{position:absolute;left:20mm;right:20mm;bottom:28mm}
.brochure-cover .logo{position:absolute;left:20mm;top:18mm}
.brochure-cover .doc-title{font-weight:800;font-size:28pt;margin:0 0 6mm;letter-spacing:-.02em}
.brochure-cover .addr-line{font-size:14pt;opacity:.95}
.page-break{break-after:page;page-break-after:always}
.pdf-btn{position:fixed;right:16px;top:100px;z-index:9999;background:#0f172a;color:#fff;text-decoration:none;padding:10px 14px;border-radius:999px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.pdf-btn:hover{opacity:.9}

@page{size:A4;margin:14mm 12mm}
@media print{
  .pdf-btn,.hide-print{display:none!important}
  section,article,.section,.card,.panel,.grid,.row,.col,figure,figcaption,header,footer,nav,.hero,.gallery,.features,.timeline,.mapbox,.video-box{break-inside:avoid;page-break-inside:avoid}
  /* Ensure hero images visible in print (vh can be 0) */
  header.hero .hero-img, .hero img{height:auto!important;min-height:0!important;object-fit:contain!important;max-height:110mm!important}
}



/* Print-only: ensure hero image has a real height in PDF */
@media print {
  header.hero .hero-img,
  .hero .hero-img,
  .hero img {
    height: auto !important;
    min-height: 0 !important;
    max-height: 110mm !important; /* fits nicely on A4 */
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}
* Print-only fallback: show an injected hero image behind the hero content */
.hero-print { display: none; }
@media print {
  header.hero, .hero { position: relative; }
  .hero-print {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: auto;
    max-height: 110mm;          /* keeps it tidy on A4 */
    object-fit: cover;
    z-index: 0;
  }
  /* ensure existing hero content/overlay sits on top of the image */
  header.hero > *, .hero > * { position: relative; z-index: 1; }
}

/* Show a simple duplicate hero only in print; keep the live hero for screen */
@media screen {
  .print-hero-only { display: none !important; }
}
@media print {
  /* Hide the complex hero that uses vh/absolute (causes collapse in print) */
  header.hero, .hero { display: none !important; }

  /* Print-only duplicate hero */
  .print-hero-only {
    display: block !important;
    position: relative !important;
    margin: 0 0 8mm 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .print-hero-only img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 120mm !important;   /* adjust if you want taller/shorter */
    object-fit: cover !important;
  }
  .print-hero-meta {
    position: absolute !important;
    left: 0; right: 0; bottom: 12mm;   /* similar feel to web */
    color: #fff !important;
    padding: 0 16px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,1) !important;
    z-index: 1 !important;
  }
}


/* PRINT ONLY: duplicate hero visual with lighter text + chips */
@media screen {
  .print-hero-only { display: none !important; }
}
@media print {
  /* Hide complex live hero; use simple print duplicate */
  header.hero, .hero { display: none !important; }

  .print-hero-only {
    display: block !important;
    position: relative !important;
    margin: 0 0 8mm 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .print-hero-only img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 120mm !important;     /* tweak 100–130mm to taste */
    object-fit: cover !important;
  }

  /* Soft gradient tint to lift legibility on top of the photo */
  .print-hero-tint {
    position: absolute !important;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
    z-index: 1 !important;
  }

  /* Meta (title/price/address) — lighter text */
  .print-hero-meta {
    position: absolute !important;
    left: 0; right: 0; bottom: 14mm;
    padding: 0 16px !important;
    color: #ff0000 !important;          /* lighter than before */
    text-shadow: 0 2px 12px rgba(0,0,0,.6) !important;
    z-index: 2 !important;
  }

  /* Chips row */
  .print-hero-chips {
    position: absolute !important;
    left: 0; right: 0; bottom: 6mm;
    padding: 0 16px !important;
    z-index: 2 !important;
  }
  .print-hero-chips .chip {
    display: inline-block !important;
    margin: 0 6px 4px 0 !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    /* Outline ensures visibility even when background printing is off */
    border: 1px solid #f5f8f7 !important;
    color: #E83D71 !important;
    background: transparent !important;  /* relies on outline + text */
    font-size: 11pt !important;
    line-height: 1 !important;
  }
}





/* PRINT ONLY: show a simple duplicate hero; keep exact chip styles */
@media screen { .print-hero-only { display: none !important; } }
@media print {
  /* Hide complex live hero which collapses in print */
  header.hero, .hero { display: none !important; }

  /* Ask browser to preserve colors/backgrounds exactly */
  .print-hero-only, .print-hero-only * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .print-hero-only {
    display: block !important;
    position: relative !important;
    margin: 0 0 8mm 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .print-hero-only img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: 120mm !important;  /* tweak 100–130mm if you want */
    object-fit: cover !important;
  }

  /* Keep the same overlay look/stacking as web, but don’t restyle chips */
  .print-hero-overlay,
  .print-hero-meta,
  .print-hero-chips {
    position: absolute !important;
    left: 0; right: 0;
    z-index: 2 !important;
    padding: 0 16px !important;
  }
  .print-hero-overlay { top: 0; bottom: 0; z-index: 1 !important; }
  .print-hero-meta { bottom: 14mm; }

  /* Force hero text to white, as requested (keep sizes/weight from your CSS) */
  .print-hero-meta, .print-hero-meta * { color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.5) !important; }

  /* Chips row sits near the bottom; the .chip elements keep their original styles */
  .print-hero-chips { bottom: 6mm; }
}



@media print {
  /* keep backgrounds/colors exactly */
  .print-hero-only, .print-hero-only * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }
  /* chips row position; don't restyle chips, just ensure they are visible inline */
  .print-hero-chips { position: absolute !important; left: 0; right: 0; bottom: 6mm; padding: 0 16px !important; z-index: 2 !important; }
  .print-hero-chips .chip { display: inline-block !important; }
}



@media print {
  /* Make the duplicate hero stretch into the page margins horizontally */
  .print-hero-only.edge-to-edge {
    margin-left: -12mm !important;      /* match your left page margin */
    margin-right: -12mm !important;     /* match your right page margin */
    width: calc(100% + 24mm) !important;/* 2 × side margin */
  }
  .print-hero-only.edge-to-edge img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
  }
}



  /* --- PDF header tweaks (print only) --- */
  @media print {
    /* Ensure background colours render in print/PDF */
    html, body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

    /* Give the site header/navbar the brand background and white text */
    .navbar, header.site-header, .topbar, .header, .site-header {
      background: #25332c !important;
      color: #ffffff !important;
      box-shadow: none !important;
      border: 0 !important;
    }

    /* Make sure brand/logo text stays visible on the dark background */
    .navbar a, .navbar .navbar-brand, .site-header a, .site-header .navbar-brand,
    .topbar a, .header a {
      color: #ffffff !important;
      text-decoration: none !important;
    }

    /* Hide menu items, dropdowns, and burger/toggler in the PDF */
    .navbar .navbar-nav,
    .navbar .nav,
    .navbar .menu,
    .navbar .navbar-collapse,
    .navbar .dropdown,
    .navbar .navbar-toggler,
    header.site-header .navbar-nav,
    header.site-header .menu,
    header.site-header .nav,
    .topbar .menu,
    .topbar .nav,
    .burger, .hamburger, .menu-toggle {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      width: 0 !important;
      overflow: hidden !important;
    }

    /* Give the header a comfortable vertical padding for the PDF cover line */
    .navbar .container, .navbar .container-fluid,
    header.site-header .container, header.site-header .container-fluid,
    .topbar .container, .topbar .container-fluid {
      padding-top: 6mm !important;
      padding-bottom: 6mm !important;
    }

    /* Optional: remove any sticky behavior in print so it only appears on page 1 */
    .navbar, header.site-header, .topbar, .header, .site-header {
      position: static !important;
    }
    
    .pdf-section,
section,
article,
.card,
.property-section,
.mosaic-gallery,
.floorplans,
.agent-card,
.map-section {
  break-inside: avoid !important;          /* modern */
  page-break-inside: avoid !important;     /* legacy */
}

/* 2) Keep headings with the content that follows (avoid dangling headings at bottom) */
h1, h2, h3, h4 {
  break-after: avoid !important;
  page-break-after: avoid !important;
}

/* 3) Prevent images, figures, tables from being split */
img, figure, table, .table, .ratio, .embed-responsive, iframe {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

/* 4) Trim big gaps that can appear at page tops when using break-inside:avoid */
section, article, .card, .property-section {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* 5) Optional: utility classes for manual control if ever needed */
.page-break { break-before: page !important; page-break-before: always !important; }
.avoid-break { break-inside: avoid !important; page-break-inside: avoid !important; }

/* 6) A4 page margins (tweak to taste) */
@page {
  size: A4;
  margin: 12mm 12mm 14mm 12mm;
}

/* Ensure colors render in PDF */
html, body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  }
  
  
.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
}
.two-col figure{ margin:0; }
.img-wide{ display:block; width:100%; height:auto; }

/* Stack only when truly narrow (tune the max-width if you like) */
@media (max-width: 320px){
  .two-col{ grid-template-columns: 1fr; }
}  
  
  
  



#lb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:9999}
#lb-backdrop.show{display:flex}
#lb-wrap{max-width:92vw;max-height:92vh;position:relative}
#lb-wrap img{max-width:92vw;max-height:92vh;display:block}
#lb-close,#lb-prev,#lb-next{position:absolute;top:8px;border:0;background:rgba(0,0,0,.5);color:#fff;font-size:20px;padding:8px 10px;cursor:pointer}
#lb-close{right:8px}
#lb-prev{left:8px;top:50%;transform:translateY(-50%)}
#lb-next{right:8px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){#lb-prev,#lb-next{top:auto;bottom:8px;transform:none}}



/* Mobile: make hero truly edge-to-edge and visibly sized */
@media (max-width: 576px) {
  header.hero, .hero {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    aspect-ratio: 16 / 9 !important;   /* ensures visible height */
    height: auto !important;
    min-height: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }
  header.hero img, .hero img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}



/* Mobile: make the summary description a little wider than main content */
@media (max-width: 576px) {
  .hero-summary {
    /* bleed 8px each side to feel wider but not full-bleed */
    margin-left: -8px !important;
    margin-right: -8px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    width: calc(100% + 16px) !important;
  }
}


/* === PRINT: keep hero chips exactly like screen === */
@media print {
  /* Preserve background colours in PDF output */
  html, body, .hero, .hero *, .print-hero-only, .print-hero-only * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Chips inside the live hero (if it prints) */
  .hero .chipsbar .chip {
    background: rgba(69,69,69,.75) !important;
    color: #cc9b36 !important;
    border: 1px solid rgba(232,61,113,.2) !important;
  }

  /* Chips inside the print-only duplicate hero (if you use it) */
  .print-hero-chips .chip {
    background: rgba(0,0,0,.75) !important;
    color: #cc9b36 !important;
    border: 1px solid rgba(255,255,255,.2) !important;
  }
}


/* === PRINT: make hero image full-width === */
@media print {
  /* Strip horizontal padding/margins inside the hero only */
  .hero,
  .hero .container,
  .hero .container-fluid,
  .hero .row,
  .hero [class*="col-"] {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* If the hero uses an <img>/<picture> */
  .hero img,
  .hero picture,
  .hero .hero-img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;       /* keep aspect ratio */
  }

  /* If the hero uses a background-image on a wrapper */
  .hero,
  .hero .hero-bg,
  .hero .hero-image,
  .hero .hero-banner {
    background-size: cover !important;
    background-position: center !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* Optional: uncomment to remove browser PDF margins for true edge-to-edge
@page { margin: 0; }
*/

/* === Global: keep margins everywhere; only the hero breaks out === */
:root { --page-margin: 24px; }       /* screen margin; tweak to match your design */

.wrap {
  /* margin: var(--page-margin) auto !important;*/
  margin: 3px auto 24px auto;
}

/* Make only the first hero inside .wrap go full-bleed */
.wrap > .hero:first-child {
  width: calc(100% + (2 * var(--page-margin))) !important;
  max-width: none !important;
  margin-left: calc(-1 * var(--page-margin)) !important;
  margin-right: calc(-1 * var(--page-margin)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Flatten grid/gutters inside that hero only */
.wrap > .hero:first-child .container,
.wrap > .hero:first-child .container-fluid,
.wrap > .hero:first-child .row,
.wrap > .hero:first-child [class*="col-"] {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure the visual fills edge-to-edge within the hero */
.wrap > .hero:first-child img,
.wrap > .hero:first-child picture,
.wrap > .hero:first-child .hero-img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* If your hero uses a background-image */
.wrap > .hero:first-child,
.wrap > .hero:first-child .hero-bg,
.wrap > .hero:first-child .hero-image,
.wrap > .hero:first-child .hero-banner {
  background-size: cover !important;
  background-position: center !important;
}

/* PDF/print: set a different physical page margin if desired */
@media print {
  :root { --page-margin: 12mm; }     /* pick your print page margin */
  /* keep chip colours in PDF as before */
  .hero .chipsbar .chip,
  .print-hero-chips .chip {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

section{
    padding-left: 16px;
    padding-right: 16px;
}

/* Remove margin between navbar and hero */
header.hero, .hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* === Utility classes generated from inline styles === */
.u-e93de6d1 { background-color: #FFFDEE; }
.u-f61bb131 { text-transform:uppercase; letter-spacing:.06em; font-weight:600; font-size:.8rem; opacity:.9; }
.u-984881a7 { max-width:1100px;margin:0 auto;padding:12px 16px 0 16px; }
.u-bfec3dce { margin:0; text-align: justify; }
.u-44a2f4b6 { height:20px; }
.u-dfb21652 { align-items:start; }
.u-c0e2fdc5 { margin-top: 15px; }
.u-6ec10b0c { grid-column: span <?= (int)$span ?>; }
.u-d2c171b1 { margin-top:10px; }
.u-3d218541 { border-left:3px solid var(--rule); padding-left:10px; margin-top:12px; font-style:italic; }
.u-9a8dcf5f { grid-template-columns:1fr 1fr; gap:12px; }
.u-30ca53b5 { grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.u-07b8fb18 { font-weight:600; font-size:.95rem; }
.u-d84af8fb { max-width:460px; }
.u-9bcd21d2 { font-size:.85rem; }
.u-457823e1 { font-weight:700; font-size:1.05rem; }
.u-66bb9956 { position:relative; padding-top:56.25%; background:#000; border-radius:14px; overflow:hidden; box-shadow:var(--shadow); }
.u-4e420aff { margin-bottom:6px; }
.u-6d5de424 { background-color: #FFFDEE !impportant; }
.u-2ee3ac7d { background-color: #FFFDEE; }
.u-360677f2 { font-size:2rem; letter-spacing:-.01em; margin:6px 0 18px; color: #DBA73A; }
.u-6a4d3445 { font-size: 30px; }
.u-c5b5f049 { padding:10px 12px 0 12px; }
.u-11696618 { margin:0; }
.u-39ae4db6 { margin-bottom: 10px; }


/* Image tint overlay for area cards */
.card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 220px; /* adjust as needed for your layout */
  border-top-left-radius: 0.375rem; /* matches Bootstrap card corners */
  border-top-right-radius: 0.375rem;
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crops to fill evenly */
  display: block;
}

.card-img-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(253, 180, 213, 0.99); /* subtle dusk tint */
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: background 0.3s ease;
}

/* Optional: stronger tint on hover for hero effect */
.card:hover .card-img-wrap::after {
  background: rgba(253, 180, 213, 0.30);
}

.nav-link{
	color: var(--pink);
}
.nav-pills {
    --bs-nav-pills-border-radius: var(--pink) !important;
    --bs-nav-pills-link-active-color: var(--pink);
    --bs-nav-pills-link-active-bg: rgba(73,73,73,0.1);
}