/*
Theme Name: JB French Houses
Theme URI: https://jbfrenchhouses.co.uk
Author: SC Web Solutions
Description: Custom standalone property-portal theme for JB French Houses. Replicates the legacy /jbp/{region}/{town}/{reference}/{id} URL structure, property CPT templates, Leaflet map, IFP feed and buyer mailshot system.
Version: 0.84.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: jbfrench
*/

/* ------------------------------------------------------------------
   Palette: limestone, slate, and the blue-grey of French shutters.
   Deliberately not cream + terracotta.
------------------------------------------------------------------ */
:root{
  --paper:      #FAF9F6;  /* warm white, not cream */
  --limestone:  #EEEBE3;  /* surface / cards */
  --ink:        #262B2C;  /* slate near-black */
  --ink-soft:   #5C6466;
  --hairline:   #D8D3C8;
  --shutter:    #4A6670;  /* the volet blue-grey — the accent */
  --shutter-dk: #2E464F;
  --brass:      #9C7A3C;  /* used once, sparingly */

  --display: "Cormorant Garamond", Georgia, serif;
  --body:    "Karla", -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1120px;
  --gap: clamp(1.5rem, 3vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--shutter-dk); }

.jbf-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 1.25rem; }

/* ---------------- property gallery (mosaic) ---------------- */
.jbf-gallery{
  position:relative;
  display:grid; gap:6px;
  grid-template-columns:1fr;
  max-width:var(--wrap); margin:var(--gap) auto var(--gap); padding:0 1.25rem;
}
@media (min-width:760px){
  .jbf-gallery{ grid-template-columns:2fr 1fr; }
}
.jbf-gallery button{
  padding:0; border:0; background:none; cursor:pointer; display:block;
  overflow:hidden; border-radius:2px;
}
.jbf-gal-main img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
@media (min-width:760px){ .jbf-gal-main img{ aspect-ratio:auto; height:420px; } }

.jbf-gal-side{ display:none; }
@media (min-width:760px){
  .jbf-gal-side{ display:grid; grid-template-rows:1fr 1fr; gap:6px; }
  .jbf-gal-thumb img{ width:100%; height:207px; object-fit:cover; }
}
.jbf-gallery button img{ transition:transform .35s ease; }
.jbf-gallery button:hover img{ transform:scale(1.02); }

.jbf-gal-count{
  position:absolute; right:2rem; bottom:1rem;
  background:rgba(38,43,44,.82); color:#fff;
  font-family:var(--mono); font-size:.75rem;
  padding:.4rem .7rem !important; border-radius:20px !important;
  backdrop-filter:blur(4px);
}
.jbf-gal-count:hover{ background:rgba(38,43,44,.95); }

/* ---------------- lightbox ---------------- */
.jbf-lightbox{
  position:fixed; inset:0; z-index:999;
  background:rgba(24,28,29,.96);
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto 1fr;
  align-items:center;
}
.jbf-lightbox[hidden]{ display:none; }
.jbf-lb-bar{
  grid-column:1 / -1;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
}
.jbf-lb-counter{ font-family:var(--mono); font-size:.8125rem; color:#C9D1D3; }
.jbf-lb-close{
  background:none; border:0; color:#fff; font-size:2rem; line-height:1;
  cursor:pointer; padding:.25rem .5rem;
}
.jbf-lb-stage{ margin:0; padding:0 .5rem 2rem; text-align:center; }
.jbf-lb-stage img{
  max-width:100%; max-height:calc(100vh - 8rem);
  margin:0 auto; object-fit:contain; border-radius:2px;
}
.jbf-lb-nav{
  background:none; border:0; color:#fff; cursor:pointer;
  font-size:3rem; line-height:1; padding:1rem; opacity:.7;
}
.jbf-lb-nav:hover{ opacity:1; }
@media (max-width:600px){
  .jbf-lb-nav{ font-size:2rem; padding:.5rem; }
}

/* =========== property page v2 =========== */

/* headings pick up the teal */
.jbf-title, .jbf-h2, .jbf-building dt{ color:var(--shutter-dk); }

/* --- head: title left, price panel right --- */
.jbf-fiche-head{
  display:grid; gap:1.5rem var(--gap);
  grid-template-columns:1fr;
  padding-bottom:2rem; border-bottom:1px solid var(--hairline);
}
@media (min-width:860px){
  .jbf-fiche-head{ grid-template-columns:minmax(0,1.6fr) minmax(240px,auto); align-items:start; }
  .jbf-head-right{ justify-self:end; width:100%; max-width:290px; }
}
.jbf-title{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.25rem,4vw,3.4rem); line-height:1.05;
  letter-spacing:-0.012em; margin:0; max-width:18ch;
}

/* price sits in a panel shaped like the button, but is not clickable */
.jbf-price-panel{
  display:block; text-align:center;
  background:var(--limestone); border:1px solid var(--hairline);
  border-radius:3px; padding:.9rem 1.25rem; margin-bottom:.6rem;
}
.jbf-price-eur{
  display:block; font-family:var(--body); font-weight:600;
  font-size:clamp(1.5rem,2.4vw,1.95rem); line-height:1.15;
  letter-spacing:-0.01em; color:var(--shutter-dk);
}
.jbf-price-gbp{ display:block; font-size:.8125rem; color:var(--ink-soft); margin-top:.15rem; }
.jbf-btn--enquire{ width:100%; }

/* --- overview band: glance left, description right --- */
.jbf-overview{
  margin:var(--gap) 0 0;
  background:var(--limestone);
  border:1px solid var(--hairline);
  border-radius:4px;
}
.jbf-overview-inner{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  padding:clamp(1.25rem,3vw,2rem);
}
@media (min-width:860px){
  .jbf-overview-inner{ grid-template-columns:minmax(240px,1fr) minmax(0,2fr); }
}
.jbf-glance dl{ margin:0; }
.jbf-glance dl > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--hairline);
}
.jbf-glance dl > div:last-child{ border-bottom:0; }
.jbf-glance dt{ color:var(--ink-soft); font-size:.9375rem; }
.jbf-glance dd{ margin:0; font-weight:500; text-align:right; }
.jbf-desc .jbf-prose{ max-width:none; }
.jbf-desc .jbf-prose p:last-child{ margin-bottom:0; }


/* --- two-column body, resumes below the overview band --- */
.jbf-fiche-body{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  padding-block:var(--gap);
}
@media (min-width:900px){
  .jbf-fiche-body{ grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr); }
  .jbf-fiche-side{ position:sticky; top:2rem; align-self:start; }
}

.jbf-h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.25rem,4vw,3.4rem); line-height:1.05;
  letter-spacing:-0.012em; margin:0 0 1.25rem;
}

/* buildings */
.jbf-building-list{ margin:0; }
.jbf-building{ padding:1.1rem 0; border-top:1px solid var(--hairline); }
.jbf-building:last-child{ border-bottom:1px solid var(--hairline); }
.jbf-building dt{ font-family:var(--display); font-size:1.25rem; font-weight:600; margin-bottom:.25rem; }
.jbf-building dd{ margin:0; color:var(--ink-soft); max-width:64ch; }

/* sidebar cards */
.jbf-features, .jbf-dpe{
  background:var(--limestone);
  border:1px solid var(--hairline);
  border-radius:3px;
  padding:1.25rem;
  margin-bottom:1.25rem;
}

/* features, now with icons */
.jbf-feature-list{ margin:0; padding:0; list-style:none; }
.jbf-feature-list li{
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem 0; font-size:.9375rem;
  border-bottom:1px solid var(--hairline);
}
.jbf-feature-list li:last-child{ border-bottom:0; padding-bottom:0; }
.jbf-feature-list svg{ color:var(--shutter); flex:0 0 auto; }

/* ---------------- signature: the DPE ladder ----------------
   The A–G diagnostic bar required on every French listing.    */
.jbf-ladder + .jbf-ladder{ margin-top:1.25rem; }
.jbf-ladder-label{ margin:0 0 .5rem; font-size:.8125rem; color:var(--ink-soft); }
.jbf-ladder-scale{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(7,1fr); gap:3px;
}
.jbf-grade{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:2rem; border-radius:2px;
  font-family:var(--mono); font-size:.75rem; font-weight:500;
  color:#fff; opacity:.28;
  transition:opacity .2s ease, transform .2s ease;
}
.jbf-grade--a{ background:#3B8C4B; }
.jbf-grade--b{ background:#57A03F; }
.jbf-grade--c{ background:#93B93B; }
.jbf-grade--d{ background:#D9C531; }
.jbf-grade--e{ background:#DE9A2E; }
.jbf-grade--f{ background:#D4682C; }
.jbf-grade--g{ background:#C1332B; }
.jbf-grade.is-current{
  opacity:1;
  transform:scaleY(1.35);
  box-shadow:0 0 0 2px var(--limestone), 0 0 0 3px var(--ink);
  z-index:1;
}

/* ---------------- CTA ---------------- */
.jbf-btn{
  display:block; text-align:center;
  background:var(--shutter-dk); color:#fff;
  text-decoration:none; font-weight:600; font-size:.9375rem;
  padding:.9rem 1.25rem; border-radius:3px;
  transition:background .18s ease;
}
.jbf-btn:hover, .jbf-btn:focus-visible{ background:var(--shutter); }

/* ---------------- a11y floor ---------------- */
:focus-visible{ outline:2px solid var(--shutter-dk); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .jbf-grade.is-current{ transform:none; }
}

/* ================= homepage ================= */
.jbf-hero-home{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:clamp(420px,72vh,720px);
  padding:clamp(3rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem);
  overflow:hidden;
}
.jbf-hero-media{ position:absolute; inset:0; z-index:-1; }
.jbf-hero-img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
/* scrim: darkest at the bottom where the copy sits, so the sky stays open */
.jbf-hero-scrim{
  position:absolute; inset:0; display:block;
  background:
    linear-gradient(to top, rgba(20,26,28,.86) 0%, rgba(20,26,28,.62) 38%, rgba(20,26,28,.22) 72%, rgba(20,26,28,.12) 100%),
    linear-gradient(to right, rgba(20,26,28,.42) 0%, rgba(20,26,28,0) 62%);
}
.jbf-hero-inner{ position:relative; width:100%; }
.jbf-hero-home .jbf-eyebrow{ color:#C6D0D3; }
.jbf-home-title{
  font-family:var(--display); font-weight:500; color:#FAF9F6;
  font-size:clamp(2.6rem,7vw,5rem); line-height:1.02;
  letter-spacing:-0.015em; margin:.5rem 0 1.25rem;
  text-wrap:balance;
}
.jbf-home-lede{ max-width:54ch; font-size:1.125rem; color:#DCE2E3; margin:0 0 2rem; }
.jbf-hero-actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:0; }
a.jbf-link-arrow--light{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.4); }
a.jbf-link-arrow--light:hover{ color:#fff; border-bottom-color:#fff; }
.jbf-btn--inline{ display:inline-block; }
.jbf-btn--light{ background:var(--paper); color:var(--shutter-dk); }
.jbf-btn--light:hover{ background:var(--limestone); }
.jbf-link-arrow{
  color:var(--shutter-dk); text-decoration:none; font-weight:600; font-size:.9375rem;
  border-bottom:1px solid transparent;
}
.jbf-link-arrow:hover{ border-bottom-color:var(--shutter); }

.jbf-sec-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:1.5rem;
}
.jbf-sec-lede{ color:var(--ink-soft); margin:0; }

/* --- 60 a week --- */
.jbf-stats{ border-top:1px solid var(--hairline); padding-block:clamp(1.25rem,2.5vw,1.75rem); }
.jbf-stats-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.25rem; }
.jbf-stat{ display:flex; align-items:center; justify-content:center; gap:1rem; }
.jbf-stat-num{
  font-family:var(--display); font-weight:600; color:var(--shutter-dk);
  font-size:clamp(3.5rem,8vw,5.5rem); line-height:.9;
}
.jbf-stat-label{ font-size:.9375rem; color:var(--ink-soft); line-height:1.3; text-align:left; }
.jbf-stats-note{ margin:0; color:var(--ink-soft); max-width:60ch; }

/* --- map --- */
.jbf-mapsec{ padding-block:clamp(2.5rem,6vw,4.5rem); }
.jbf-mapsec-head{ max-width:60ch; margin-bottom:2rem; }
.jbf-mapsec-lede{ color:var(--ink-soft); margin:.5rem 0 0; }
.jbf-mapsec-body{ display:grid; gap:var(--gap); grid-template-columns:1fr; align-items:start; }
@media (min-width:860px){ .jbf-mapsec-body{ grid-template-columns:minmax(0,1.3fr) minmax(260px,1fr); } }

.jbf-map-svg{ width:100%; height:auto; display:block; }
.jbf-map-other path{ fill:#E6E3DB; stroke:var(--paper); stroke-width:.6; }
.jbf-map-region{ cursor:pointer; outline:none; }
.jbf-map-region path{
  fill:var(--shutter); stroke:var(--paper); stroke-width:.6;
  transition:fill .18s ease;
}
.jbf-map-region:hover path,
.jbf-map-region.is-active path,
.jbf-map-region:focus-visible path{ fill:var(--shutter-dk); }

.jbf-map-list{ list-style:none; margin:0; padding:0; }
.jbf-map-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.75rem .5rem; border-bottom:1px solid var(--hairline);
  text-decoration:none; color:var(--ink); transition:background .15s ease;
}
.jbf-map-list a:hover, .jbf-map-list a.is-active{ background:var(--limestone); }
.jbf-map-list-name{ font-family:var(--display); font-size:1.15rem; font-weight:600; color:var(--shutter-dk); }
.jbf-map-list-count{ font-family:var(--mono); font-size:.75rem; color:var(--ink-soft); white-space:nowrap; }
.jbf-map-list-week{ color:var(--brass); }

.jbf-latest{ padding-block:clamp(2rem,5vw,3.5rem); }

/* --- services: 2 x 3 tiles, first tile is the heading --- */
.jbf-services{ padding-block:clamp(2.5rem,6vw,4rem); }
.jbf-service-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1.25rem;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .jbf-service-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .jbf-service-grid{ grid-template-columns:repeat(3,1fr); } }

.jbf-service{
  background:var(--limestone); border:1px solid var(--hairline);
  border-radius:3px; padding:1.5rem;
  display:flex; flex-direction:column;
}
.jbf-service svg{ color:var(--shutter); margin-bottom:.9rem; }
.jbf-service-title{
  font-family:var(--display); font-size:1.25rem; font-weight:600;
  color:var(--shutter-dk); margin:0 0 .4rem;
}
.jbf-service-body{ margin:0; font-size:.9375rem; color:var(--ink-soft); }

/* the heading tile: same shape, no border, lets the type carry it */
.jbf-service--title{
  background:transparent; border-color:transparent;
  justify-content:center; padding-left:0; padding-top:0;
}
.jbf-service-heading{
  font-family:var(--display); font-weight:500; color:var(--shutter-dk);
  font-size:clamp(1.9rem,3vw,2.4rem); line-height:1.05;
  letter-spacing:-0.01em; margin:0 0 .75rem;
}
.jbf-service-sub{ margin:0; color:var(--ink-soft); font-size:.9375rem; max-width:34ch; }
@media (max-width:639px){
  .jbf-service--title{ padding-left:0; }
}

/* --- process: dark teal band --- */
.jbf-process{
  background:var(--shutter-dk); color:var(--paper);
  padding-block:clamp(2.75rem,6vw,4.5rem);
}
.jbf-process .jbf-h2{ color:var(--paper); margin-bottom:1.75rem; }

.jbf-steps{
  list-style:none; margin:0 0 clamp(2rem,5vw,3rem); padding:0;
  display:grid; gap:var(--gap); grid-template-columns:1fr;
}
@media (min-width:760px){ .jbf-steps{ grid-template-columns:repeat(3,1fr); } }
.jbf-step{ border-top:2px solid rgba(250,249,246,.35); padding-top:1rem; }
.jbf-step-n{
  display:block;
  font-family:var(--mono); font-size:1.5rem; font-weight:500;
  letter-spacing:.06em; line-height:1; color:#D8B978;
}
.jbf-step-title{
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--paper); margin:.4rem 0 .5rem;
}
.jbf-step-body{ margin:0; color:#C9D4D7; font-size:.9375rem; }

/* "worth knowing" panel, lifted off the teal */
.jbf-notes{
  background:rgba(250,249,246,.07);
  border:1px solid rgba(250,249,246,.16);
  border-radius:4px; padding:clamp(1.25rem,3vw,2rem);
}
.jbf-notes .jbf-eyebrow{ color:#A9BAC0; margin-bottom:1.25rem; }
.jbf-note-list{ margin:0; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px){ .jbf-note-list{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.jbf-note-list dt{
  font-family:var(--display); font-size:1.1rem; font-weight:600;
  color:var(--paper); margin-bottom:.3rem;
}
.jbf-note-list dd{ margin:0; font-size:.9375rem; color:#C9D4D7; }

/* --- closing strip --- */
.jbf-strip{ background:var(--shutter-dk); color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.5rem); }
.jbf-strip-title{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.75rem); margin:0 0 .75rem; line-height:1.1; }
.jbf-strip-body{ max-width:50ch; color:#D6DEE1; margin:0 0 1.75rem; }
.jbf-strip-actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:0; }
.jbf-strip-contact{ color:#D6DEE1; font-size:.9375rem; }

/* ================= header ================= */
.jbf-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--shutter-dk);
  padding:.75rem 1rem; font-weight:600;
}
.jbf-skip:focus{ left:1rem; top:1rem; }

.jbf-site-header{
  position:sticky; top:0; z-index:100;
  background:var(--shutter-dk);
  transition:box-shadow .2s ease;
}
.jbf-site-header.is-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.18), 0 6px 18px -12px rgba(0,0,0,.5); }

.jbf-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:68px;
}

/* wordmark */
.jbf-logo{
  display:inline-flex; align-items:baseline; gap:.55rem;
  text-decoration:none; color:var(--paper); white-space:nowrap;
}
.jbf-logo-mark{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:.02em; line-height:1;
  border:1.5px solid rgba(250,249,246,.55);
  border-radius:2px; padding:.15rem .35rem;
}
.jbf-logo-text{
  font-family:var(--display); font-size:1.35rem; font-weight:500;
  letter-spacing:.01em;
}

/* nav */
.jbf-nav{ display:flex; align-items:center; gap:2rem; }
.jbf-menu{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.jbf-menu a{
  color:rgba(250,249,246,.86); text-decoration:none;
  font-size:.9375rem; font-weight:500; letter-spacing:.005em;
  padding:.35rem 0; border-bottom:1.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.jbf-menu a:hover,
.jbf-menu .current-menu-item > a{ color:#fff; border-bottom-color:var(--brass); }

.jbf-header-actions{ display:flex; align-items:center; gap:1.25rem; }
.jbf-header-tel{
  display:inline-flex; align-items:center; gap:.45rem;
  color:rgba(250,249,246,.72); text-decoration:none;
  font-family:var(--mono); font-size:.8125rem;
  transition:color .15s ease;
}
.jbf-header-tel:hover{ color:#fff; }
.jbf-header-cta{
  display:inline-block; text-decoration:none; white-space:nowrap;
  color:var(--paper); border:1.5px solid rgba(250,249,246,.4);
  border-radius:3px; padding:.55rem 1rem;
  font-size:.875rem; font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.jbf-header-cta:hover{ background:var(--paper); color:var(--shutter-dk); border-color:var(--paper); }

/* burger */
.jbf-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.jbf-burger span{
  display:block; height:1.5px; width:22px; margin-inline:auto;
  background:var(--paper); transition:transform .22s ease, opacity .18s ease;
}
.jbf-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.jbf-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.jbf-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:899px){
  .jbf-burger{ display:flex; }
  .jbf-nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--shutter-dk);
    padding:.5rem 1.25rem 1.5rem;
    border-top:1px solid rgba(250,249,246,.14);
    max-height:calc(100dvh - 68px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .jbf-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .jbf-menu{ flex-direction:column; align-items:stretch; gap:0; }
  .jbf-menu a{
    display:block; padding:.9rem 0; font-size:1.05rem;
    border-bottom:1px solid rgba(250,249,246,.12);
  }
  .jbf-menu a:hover{ border-bottom-color:rgba(250,249,246,.12); }
  .jbf-header-actions{
    flex-direction:column; align-items:stretch; gap:1rem;
    margin-top:1.25rem;
  }
  .jbf-header-tel{ justify-content:center; font-size:.9375rem; }
  .jbf-header-cta{ text-align:center; padding:.8rem 1rem; }
  body.jbf-nav-open{ overflow:hidden; }
}

/* the hero sits directly under a solid header, so no extra top padding */
.jbf-hero-home{ margin-top:0; }

/* ================= footer ================= */
.jbf-site-footer{
  margin-top:0; background:var(--limestone);
  border-top:1px solid var(--hairline);
  padding-block:2rem; color:var(--ink-soft); font-size:.875rem;
}
.jbf-site-footer a{ color:var(--shutter-dk); }

/* ---------------- property cards (tile) ---------------- */
.jbf-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:3px;
  background:var(--paper); overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.jbf-card:hover{ border-color:var(--shutter); transform:translateY(-2px); }

.jbf-card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--limestone); }
.jbf-card-media img{ width:100%; height:100%; object-fit:cover; }
.jbf-card-noimg{ display:block; width:100%; height:100%; background:var(--limestone); }

.jbf-card-body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:.9rem 1rem 1rem;
}
.jbf-card-place{
  font-family:var(--body); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.jbf-card-title{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  line-height:1.2; color:var(--shutter-dk); margin:.2rem 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jbf-card-meta{
  margin:0 0 .65rem; font-size:.8125rem; color:var(--ink-soft);
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.jbf-card-price{
  margin-top:auto;
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--shutter-dk);
}

/* archive keeps a plain grid */
.jbf-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}

/* ---------------- carousel: 3 across, scroll for more ---------------- */
.jbf-carousel-nav{ display:flex; align-items:center; gap:.5rem; }
.jbf-cbtn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hairline); background:var(--paper);
  color:var(--shutter-dk); font-size:1.35rem; line-height:1;
  cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.jbf-cbtn:hover:not(:disabled){ background:var(--limestone); border-color:var(--shutter); }
.jbf-cbtn:disabled{ opacity:.32; cursor:default; }
.jbf-carousel-nav .jbf-link-arrow{ margin-left:.75rem; }

.jbf-carousel{ position:relative; }
.jbf-carousel-track{
  list-style:none; margin:0; padding:.25rem 0 .75rem;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc(100% - 2.5rem);
  column-gap:1.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
@media (min-width:640px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 1.5rem) / 2); } }
@media (min-width:980px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 3rem) / 3); } }
.jbf-carousel-item{ scroll-snap-align:start; display:flex; }
.jbf-carousel-item > .jbf-card{ width:100%; }
@media (max-width:639px){ .jbf-carousel-nav .jbf-cbtn{ display:none; } }

/* ================= restored / corrected ================= */

/* Small sub-block labels: simple face, uppercase, letterspaced.
   Section headings use .jbf-h2 (display face). This pairing is the hierarchy. */
.jbf-eyebrow{
  font-family:var(--body); font-size:1.03rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}

/* 60 new properties: two lines, one size, centred, tight */
.jbf-stats-inner{ display:block; text-align:center; }
.jbf-stat{ margin:0; }
.jbf-stat-line,
.jbf-stat-sub{
  display:block;
  font-family:var(--display); font-weight:600; color:var(--shutter-dk);
  font-size:clamp(2rem,3.5vw,2.6rem); line-height:1.12;
}

/* "worth knowing" panel, lifted off the teal */
.jbf-notes{
  background:rgba(250,249,246,.07);
  border:1px solid rgba(250,249,246,.16);
  border-radius:4px; padding:clamp(1.25rem,3vw,2rem);
}
.jbf-notes .jbf-eyebrow{ color:#A9BAC0; margin-bottom:1.25rem; }
.jbf-note-list{ margin:0; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px){ .jbf-note-list{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.jbf-note-list dt{
  font-family:var(--display); font-size:1.1rem; font-weight:600;
  color:var(--paper); margin-bottom:.3rem;
}
.jbf-note-list dd{ margin:0; font-size:.9375rem; color:#C9D4D7; }

/* --- closing strip --- */
.jbf-strip{ background:var(--shutter-dk); color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.5rem); }
.jbf-strip-title{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.75rem); margin:0 0 .75rem; line-height:1.1; }
.jbf-strip-body{ max-width:50ch; color:#D6DEE1; margin:0 0 1.75rem; }
.jbf-strip-actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:0; }
.jbf-strip-contact{ color:#D6DEE1; font-size:.9375rem; }

/* ================= header ================= */
.jbf-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--shutter-dk);
  padding:.75rem 1rem; font-weight:600;
}
.jbf-skip:focus{ left:1rem; top:1rem; }

.jbf-site-header{
  position:sticky; top:0; z-index:100;
  background:var(--shutter-dk);
  transition:box-shadow .2s ease;
}
.jbf-site-header.is-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.18), 0 6px 18px -12px rgba(0,0,0,.5); }

.jbf-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:68px;
}

/* wordmark */
.jbf-logo{
  display:inline-flex; align-items:baseline; gap:.55rem;
  text-decoration:none; color:var(--paper); white-space:nowrap;
}
.jbf-logo-mark{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:.02em; line-height:1;
  border:1.5px solid rgba(250,249,246,.55);
  border-radius:2px; padding:.15rem .35rem;
}
.jbf-logo-text{
  font-family:var(--display); font-size:1.35rem; font-weight:500;
  letter-spacing:.01em;
}

/* nav */
.jbf-nav{ display:flex; align-items:center; gap:2rem; }
.jbf-menu{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.jbf-menu a{
  color:rgba(250,249,246,.86); text-decoration:none;
  font-size:.9375rem; font-weight:500; letter-spacing:.005em;
  padding:.35rem 0; border-bottom:1.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.jbf-menu a:hover,
.jbf-menu .current-menu-item > a{ color:#fff; border-bottom-color:var(--brass); }

.jbf-header-actions{ display:flex; align-items:center; gap:1.25rem; }
.jbf-header-tel{
  display:inline-flex; align-items:center; gap:.45rem;
  color:rgba(250,249,246,.72); text-decoration:none;
  font-family:var(--mono); font-size:.8125rem;
  transition:color .15s ease;
}
.jbf-header-tel:hover{ color:#fff; }
.jbf-header-cta{
  display:inline-block; text-decoration:none; white-space:nowrap;
  color:var(--paper); border:1.5px solid rgba(250,249,246,.4);
  border-radius:3px; padding:.55rem 1rem;
  font-size:.875rem; font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.jbf-header-cta:hover{ background:var(--paper); color:var(--shutter-dk); border-color:var(--paper); }

/* burger */
.jbf-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.jbf-burger span{
  display:block; height:1.5px; width:22px; margin-inline:auto;
  background:var(--paper); transition:transform .22s ease, opacity .18s ease;
}
.jbf-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.jbf-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.jbf-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:899px){
  .jbf-burger{ display:flex; }
  .jbf-nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--shutter-dk);
    padding:.5rem 1.25rem 1.5rem;
    border-top:1px solid rgba(250,249,246,.14);
    max-height:calc(100dvh - 68px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .jbf-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .jbf-menu{ flex-direction:column; align-items:stretch; gap:0; }
  .jbf-menu a{
    display:block; padding:.9rem 0; font-size:1.05rem;
    border-bottom:1px solid rgba(250,249,246,.12);
  }
  .jbf-menu a:hover{ border-bottom-color:rgba(250,249,246,.12); }
  .jbf-header-actions{
    flex-direction:column; align-items:stretch; gap:1rem;
    margin-top:1.25rem;
  }
  .jbf-header-tel{ justify-content:center; font-size:.9375rem; }
  .jbf-header-cta{ text-align:center; padding:.8rem 1rem; }
  body.jbf-nav-open{ overflow:hidden; }
}

/* the hero sits directly under a solid header, so no extra top padding */
.jbf-hero-home{ margin-top:0; }

/* ================= footer ================= */
.jbf-site-footer{
  margin-top:0; background:var(--limestone);
  border-top:1px solid var(--hairline);
  padding-block:2rem; color:var(--ink-soft); font-size:.875rem;
}
.jbf-site-footer a{ color:var(--shutter-dk); }

/* ---------------- property cards (tile) ---------------- */
.jbf-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:3px;
  background:var(--paper); overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.jbf-card:hover{ border-color:var(--shutter); transform:translateY(-2px); }

.jbf-card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--limestone); }
.jbf-card-media img{ width:100%; height:100%; object-fit:cover; }
.jbf-card-noimg{ display:block; width:100%; height:100%; background:var(--limestone); }

.jbf-card-body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:.9rem 1rem 1rem;
}
.jbf-card-place{
  font-family:var(--body); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.jbf-card-title{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  line-height:1.2; color:var(--shutter-dk); margin:.2rem 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jbf-card-meta{
  margin:0 0 .65rem; font-size:.8125rem; color:var(--ink-soft);
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.jbf-card-price{
  margin-top:auto;
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--shutter-dk);
}

/* archive keeps a plain grid */
.jbf-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}

/* ---------------- carousel: 3 across, scroll for more ---------------- */
.jbf-carousel-nav{ display:flex; align-items:center; gap:.5rem; }
.jbf-cbtn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hairline); background:var(--paper);
  color:var(--shutter-dk); font-size:1.35rem; line-height:1;
  cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.jbf-cbtn:hover:not(:disabled){ background:var(--limestone); border-color:var(--shutter); }
.jbf-cbtn:disabled{ opacity:.32; cursor:default; }
.jbf-carousel-nav .jbf-link-arrow{ margin-left:.75rem; }

.jbf-carousel{ position:relative; }
.jbf-carousel-track{
  list-style:none; margin:0; padding:.25rem 0 .75rem;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc(100% - 2.5rem);
  column-gap:1.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
@media (min-width:640px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 1.5rem) / 2); } }
@media (min-width:980px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 3rem) / 3); } }
.jbf-carousel-item{ scroll-snap-align:start; display:flex; }
.jbf-carousel-item > .jbf-card{ width:100%; }
@media (max-width:639px){ .jbf-carousel-nav .jbf-cbtn{ display:none; } }

/* ================= restored / corrected ================= */

/* Small sub-block labels: simple face, uppercase, letterspaced.
   Section headings use .jbf-h2 (display face). This pairing is the hierarchy. */
.jbf-eyebrow{
  font-family:var(--body); font-size:1.03rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}

/* 60 new properties: two clean lines, centred against the note opposite */
.jbf-stats-inner{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1.5rem;
}
@media (min-width:860px){
  .jbf-stats-inner{ flex-direction:row; justify-content:center; align-items:center; gap:3rem; }
}
.jbf-stat{ margin:0; }
.jbf-stat-line,
.jbf-stat-sub{
  display:block;
  font-family:var(--display); font-weight:600; color:var(--shutter-dk);
  font-size:clamp(2rem,3.5vw,2.6rem); line-height:1.1;
}
.jbf-stat-num{ font-weight:600; }
.jbf-stat-label{ font-weight:600; }
.jbf-stats-note{
  margin:0; color:var(--ink-soft); max-width:46ch;
  font-size:.9375rem; text-align:center;
}
@media (min-width:860px){ .jbf-stats-note{ text-align:left; } }

/* "worth knowing" panel, lifted off the teal */
.jbf-notes{
  background:rgba(250,249,246,.07);
  border:1px solid rgba(250,249,246,.16);
  border-radius:4px; padding:clamp(1.25rem,3vw,2rem);
}
.jbf-notes .jbf-eyebrow{ color:#A9BAC0; margin-bottom:1.25rem; }
.jbf-note-list{ margin:0; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:860px){ .jbf-note-list{ grid-template-columns:repeat(3,1fr); gap:2rem; } }
.jbf-note-list dt{
  font-family:var(--display); font-size:1.1rem; font-weight:600;
  color:var(--paper); margin-bottom:.3rem;
}
.jbf-note-list dd{ margin:0; font-size:.9375rem; color:#C9D4D7; }

/* --- closing strip --- */
.jbf-strip{ background:var(--shutter-dk); color:var(--paper);
  padding-block:clamp(2.5rem,6vw,4.5rem); }
.jbf-strip-title{ font-family:var(--display); font-weight:500;
  font-size:clamp(1.8rem,4vw,2.75rem); margin:0 0 .75rem; line-height:1.1; }
.jbf-strip-body{ max-width:50ch; color:#D6DEE1; margin:0 0 1.75rem; }
.jbf-strip-actions{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; margin:0; }
.jbf-strip-contact{ color:#D6DEE1; font-size:.9375rem; }

/* ================= header ================= */
.jbf-skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--paper); color:var(--shutter-dk);
  padding:.75rem 1rem; font-weight:600;
}
.jbf-skip:focus{ left:1rem; top:1rem; }

.jbf-site-header{
  position:sticky; top:0; z-index:100;
  background:var(--shutter-dk);
  transition:box-shadow .2s ease;
}
.jbf-site-header.is-stuck{ box-shadow:0 1px 0 rgba(0,0,0,.18), 0 6px 18px -12px rgba(0,0,0,.5); }

.jbf-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; min-height:68px;
}

/* wordmark */
.jbf-logo{
  display:inline-flex; align-items:baseline; gap:.55rem;
  text-decoration:none; color:var(--paper); white-space:nowrap;
}
.jbf-logo-mark{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  letter-spacing:.02em; line-height:1;
  border:1.5px solid rgba(250,249,246,.55);
  border-radius:2px; padding:.15rem .35rem;
}
.jbf-logo-text{
  font-family:var(--display); font-size:1.35rem; font-weight:500;
  letter-spacing:.01em;
}

/* nav */
.jbf-nav{ display:flex; align-items:center; gap:2rem; }
.jbf-menu{
  display:flex; align-items:center; gap:1.75rem;
  list-style:none; margin:0; padding:0;
}
.jbf-menu a{
  color:rgba(250,249,246,.86); text-decoration:none;
  font-size:.9375rem; font-weight:500; letter-spacing:.005em;
  padding:.35rem 0; border-bottom:1.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.jbf-menu a:hover,
.jbf-menu .current-menu-item > a{ color:#fff; border-bottom-color:var(--brass); }

.jbf-header-actions{ display:flex; align-items:center; gap:1.25rem; }
.jbf-header-tel{
  display:inline-flex; align-items:center; gap:.45rem;
  color:rgba(250,249,246,.72); text-decoration:none;
  font-family:var(--mono); font-size:.8125rem;
  transition:color .15s ease;
}
.jbf-header-tel:hover{ color:#fff; }
.jbf-header-cta{
  display:inline-block; text-decoration:none; white-space:nowrap;
  color:var(--paper); border:1.5px solid rgba(250,249,246,.4);
  border-radius:3px; padding:.55rem 1rem;
  font-size:.875rem; font-weight:600;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.jbf-header-cta:hover{ background:var(--paper); color:var(--shutter-dk); border-color:var(--paper); }

/* burger */
.jbf-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.jbf-burger span{
  display:block; height:1.5px; width:22px; margin-inline:auto;
  background:var(--paper); transition:transform .22s ease, opacity .18s ease;
}
.jbf-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.jbf-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.jbf-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:899px){
  .jbf-burger{ display:flex; }
  .jbf-nav{
    position:fixed; inset:68px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--shutter-dk);
    padding:.5rem 1.25rem 1.5rem;
    border-top:1px solid rgba(250,249,246,.14);
    max-height:calc(100dvh - 68px); overflow-y:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .jbf-nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .jbf-menu{ flex-direction:column; align-items:stretch; gap:0; }
  .jbf-menu a{
    display:block; padding:.9rem 0; font-size:1.05rem;
    border-bottom:1px solid rgba(250,249,246,.12);
  }
  .jbf-menu a:hover{ border-bottom-color:rgba(250,249,246,.12); }
  .jbf-header-actions{
    flex-direction:column; align-items:stretch; gap:1rem;
    margin-top:1.25rem;
  }
  .jbf-header-tel{ justify-content:center; font-size:.9375rem; }
  .jbf-header-cta{ text-align:center; padding:.8rem 1rem; }
  body.jbf-nav-open{ overflow:hidden; }
}

/* the hero sits directly under a solid header, so no extra top padding */
.jbf-hero-home{ margin-top:0; }

/* ================= footer ================= */
.jbf-site-footer{
  margin-top:0; background:var(--limestone);
  border-top:1px solid var(--hairline);
  padding-block:2rem; color:var(--ink-soft); font-size:.875rem;
}
.jbf-site-footer a{ color:var(--shutter-dk); }

/* ---------------- property cards (tile) ---------------- */
.jbf-card{
  display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:3px;
  background:var(--paper); overflow:hidden;
  transition:border-color .18s ease, transform .18s ease;
}
.jbf-card:hover{ border-color:var(--shutter); transform:translateY(-2px); }

.jbf-card-media{ aspect-ratio:4/3; overflow:hidden; background:var(--limestone); }
.jbf-card-media img{ width:100%; height:100%; object-fit:cover; }
.jbf-card-noimg{ display:block; width:100%; height:100%; background:var(--limestone); }

.jbf-card-body{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding:.9rem 1rem 1rem;
}
.jbf-card-place{
  font-family:var(--body); font-size:.6875rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);
}
.jbf-card-title{
  font-family:var(--display); font-weight:600; font-size:1.2rem;
  line-height:1.2; color:var(--shutter-dk); margin:.2rem 0 .35rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.jbf-card-meta{
  margin:0 0 .65rem; font-size:.8125rem; color:var(--ink-soft);
  display:flex; gap:.4rem; flex-wrap:wrap;
}
.jbf-card-price{
  margin-top:auto;
  font-family:var(--display); font-size:1.35rem; font-weight:600;
  color:var(--shutter-dk);
}

/* archive keeps a plain grid */
.jbf-grid{
  display:grid; gap:2rem;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
}

/* ---------------- carousel: 3 across, scroll for more ---------------- */
.jbf-carousel-nav{ display:flex; align-items:center; gap:.5rem; }
.jbf-cbtn{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--hairline); background:var(--paper);
  color:var(--shutter-dk); font-size:1.35rem; line-height:1;
  cursor:pointer; display:grid; place-items:center;
  transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
.jbf-cbtn:hover:not(:disabled){ background:var(--limestone); border-color:var(--shutter); }
.jbf-cbtn:disabled{ opacity:.32; cursor:default; }
.jbf-carousel-nav .jbf-link-arrow{ margin-left:.75rem; }

.jbf-carousel{ position:relative; }
.jbf-carousel-track{
  list-style:none; margin:0; padding:.25rem 0 .75rem;
  display:grid; grid-auto-flow:column;
  grid-auto-columns:calc(100% - 2.5rem);
  column-gap:1.5rem;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
@media (min-width:640px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 1.5rem) / 2); } }
@media (min-width:980px){ .jbf-carousel-track{ grid-auto-columns:calc((100% - 3rem) / 3); } }
.jbf-carousel-item{ scroll-snap-align:start; display:flex; }
.jbf-carousel-item > .jbf-card{ width:100%; }
@media (max-width:639px){ .jbf-carousel-nav .jbf-cbtn{ display:none; } }

/* ================= restored / corrected ================= */

/* Small sub-block labels: simple face, uppercase, letterspaced.
   Section headings use .jbf-h2 (display face). This pairing is the hierarchy. */
.jbf-eyebrow{
  font-family:var(--body); font-size:1.03rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); margin:0 0 1rem;
}

/* 60 new properties: "60 new properties" on one line, "every week" below,
   vertically centred against the note opposite */
.jbf-stats-inner{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:1.25rem;
}
@media (min-width:860px){
  .jbf-stats-inner{ flex-direction:row; justify-content:center; align-items:center; gap:2.5rem; }
}
.jbf-stat{ display:flex; flex-direction:column; align-items:center; margin:0; line-height:1.05; }
.jbf-stat-line{
  font-family:var(--display); font-weight:600; color:var(--shutter-dk);
  font-size:clamp(2rem,4vw,2.9rem); white-space:nowrap;
}
.jbf-stat-num{ font-size:1.35em; }
.jbf-stat-label{ font-family:var(--display); font-weight:500; }
.jbf-stat-sub{
  font-family:var(--display); font-weight:500; color:var(--ink-soft);
  font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.1;
}
.jbf-stats-note{
  margin:0; color:var(--ink-soft); max-width:46ch;
  font-size:.9375rem; text-align:center;
}
@media (min-width:860px){ .jbf-stats-note{ text-align:left; } }

/* "worth knowing" panel: no heading, tighter */
.jbf-notes{
  background:rgba(250,249,246,.07);
  border:1px solid rgba(250,249,246,.16);
  border-radius:4px;
  padding:1.25rem clamp(1rem,2.5vw,1.5rem);
}
.jbf-note-list{ gap:1.25rem; }
@media (min-width:860px){ .jbf-note-list{ gap:1.75rem; } }
.jbf-note-list dt{ font-size:1rem; margin-bottom:.25rem; }
.jbf-note-list dd{ font-size:.875rem; }

/* --- restored: reference badge + location breadcrumb --- */
.jbf-fiche-meta{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.75rem 1.25rem; margin-bottom:1rem;
}
.jbf-ref{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--hairline); border-radius:2px;
  padding:.25rem .5rem; background:var(--limestone);
}
.jbf-place{ font-size:.875rem; color:var(--ink-soft); }
.jbf-place a{ color:var(--ink-soft); text-decoration:none; }
.jbf-place a:hover{ color:var(--shutter-dk); text-decoration:underline; }
.jbf-place span{ margin:0 .4rem; }

/* --- overview band on dark teal --- */
.jbf-overview{
  background:var(--shutter-dk);
  border-color:transparent;
  color:var(--paper);
}
.jbf-overview .jbf-eyebrow{ color:#A9BAC0; }

.jbf-overview .jbf-glance dl > div{ border-bottom-color:rgba(250,249,246,.18); }
.jbf-overview .jbf-glance dt{ color:#A9BAC0; }
.jbf-overview .jbf-glance dd{ color:var(--paper); }

.jbf-overview .jbf-desc .jbf-prose{ color:#D3DBDD; }
.jbf-overview .jbf-desc .jbf-prose a{ color:#fff; }

/* a hairline between the two columns on wide screens */
@media (min-width:860px){
  .jbf-overview .jbf-desc{
    border-left:1px solid rgba(250,249,246,.16);
    padding-left:var(--gap);
  }
}

/* ================================================================
   ARCHIVE + LOCATION PAGES  (v0.12.0)
   Appended as ONE block at the END of style.css on purpose: the
   cascade means these always win over the older duplicated sections
   above, and keeping them in a single marked section makes the
   coming dedupe pass easier, not harder. Do not scatter edits.
   ================================================================ */

/* ---- page head ---- */
.jbf-archive{ padding-top: clamp(1.5rem, 4vw, 3rem); }
.jbf-archive-title{
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.05;
  margin: .25rem 0 .5rem;
}
.jbf-archive-tools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .75rem 0 0;
}
.jbf-archive-count{
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.jbf-location-strap{
  font-family: var(--display);
  font-size: 1.35rem;
  color: var(--shutter-dk);
  margin: 0 0 .25rem;
}
.jbf-term-intro{ max-width: 70ch; color: var(--ink-soft); }
.jbf-term-intro p{ margin: .4rem 0; }

/* ---- filters + results layout ---- */
.jbf-archive-layout{
  display: grid;
  gap: var(--gap);
  align-items: start;
  margin: var(--gap) 0;
}
@media (min-width: 900px){
  .jbf-archive-layout{ grid-template-columns: 272px 1fr; }
  .jbf-archive-layout--nofilters{ grid-template-columns: 1fr; }
}
.jbf-filters{
  background: #fff;
  border: 1px solid var(--hairline);
  padding: 1.25rem 1.25rem 1rem;
}
@media (min-width: 900px){
  .jbf-filters{ position: sticky; top: 96px; }
}
.jbf-filter-block{ margin: 1rem 0 1.25rem; }
.jbf-filter-label{
  font-family: var(--body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .4rem;
}
.jbf-selections{ margin: 0 0 1rem; }
.jbf-selections .facetwp-selections li{
  display: inline-block;
  background: var(--limestone);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: .2rem .7rem;
  margin: 0 .35rem .35rem 0;
  font-size: .85rem;
}

/* ---- light FacetWP skinning (inherits the palette) ---- */
.facetwp-facet{ margin-bottom: 0; font-size: .95rem; }
.facetwp-facet select,
.facetwp-facet input[type="text"],
.facetwp-facet input[type="number"]{
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--hairline);
  background: var(--paper);
  font-family: var(--body);
  font-size: .95rem;
  color: var(--ink);
}
.facetwp-checkbox{ margin-bottom: .3rem; }
.facetwp-checkbox.checked{ color: var(--shutter-dk); font-weight: 700; }

/* ---- town quick-links (region pages) ---- */
.jbf-town-links{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 var(--gap);
}
.jbf-town-link{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 1px solid var(--hairline);
  background: #fff;
  border-radius: 999px;
  padding: .35rem .85rem;
  font-size: .9rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease;
}
.jbf-town-link:hover{ border-color: var(--shutter); }
.jbf-town-count{
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--ink-soft);
}

/* ---- empty state + pagination ---- */
.jbf-none{
  grid-column: 1 / -1;
  background: var(--limestone);
  padding: 2rem;
  text-align: center;
  color: var(--ink-soft);
}
.jbf-pagination{ margin: var(--gap) 0; }
.jbf-pagination .page-numbers,
.jbf-pagination .facetwp-page{
  display: inline-block;
  min-width: 2.2rem;
  text-align: center;
  padding: .4rem .6rem;
  margin: 0 .3rem .3rem 0;
  border: 1px solid var(--hairline);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: .85rem;
  cursor: pointer;
}
.jbf-pagination .page-numbers.current,
.jbf-pagination .facetwp-page.active{
  background: var(--shutter);
  border-color: var(--shutter);
  color: #fff;
}
.jbf-pagination .page-numbers.dots{ border: 0; background: none; }

/* ================================================================
   REGION SVG MAP  (v0.14.0) — appended block; additions live at the
   END of this file only, same rule as before.
   ================================================================ */
/* Region intro copy under the heading. */
.jbf-region-copy{ max-width: 68ch; color: var(--ink); margin-top: .5rem; }
.jbf-region-copy p{ margin: 0 0 .8rem; }

/* Region map section: big map + town list beside it, homepage proportions. */
.jbf-rmapsec{
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  align-items: start;
  margin: var(--gap) 0;
}
@media (min-width: 860px){
  .jbf-rmapsec{ grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); }
}
.jbf-rmap{ margin: 0; }
.jbf-rmap svg{
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 620px;          /* tall regions scale down, ratio preserved */
  margin: 0 auto;
  overflow: visible;
}
.jbf-rmap-shape path{ fill:#DADFDE; stroke:#C3CAC9; stroke-width:1; }

/* Dots */
.jbf-rmap-dot circle{ transition: r .15s ease, opacity .15s ease; }
.jbf-rmap-dot.is-muted circle{ fill:#fff; opacity:.6; }
.jbf-rmap-dot.is-active{ cursor:pointer; }
.jbf-rmap-dot.is-active circle{ fill:#fff; }
.jbf-rmap-dot.is-active.is-hl circle,
.jbf-rmap-dot.is-active:hover circle{ fill:#fff; r: 8.5; }
.jbf-rmap-dot.is-muted.is-hl circle{ fill:#fff; opacity:1; r: 8.5; }

/* Town list — mirrors the homepage region list. */
.jbf-rmap-list{
  list-style:none; margin:0; padding:0;
  column-gap: 1.5rem;
}
@media (min-width: 1100px){
  .jbf-rmap-list{ columns: 2; }        /* long town lists stay compact */
}
.jbf-rmap-list li{ break-inside: avoid; }
.jbf-rmap-list a,
.jbf-rmap-list .jbf-rmap-list-static{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.5rem .5rem; border-bottom:1px solid var(--hairline);
  text-decoration:none; color:var(--ink);
  transition: background .15s ease;
}
.jbf-rmap-list a{ cursor:pointer; }
.jbf-rmap-list a:hover, .jbf-rmap-list a.is-hl{ background: var(--limestone); }
.jbf-rmap-list-name{ font-family:var(--display); font-size:1.05rem; }
.jbf-rmap-list li.is-active .jbf-rmap-list-name{ color: var(--shutter-dk); font-weight:600; }
.jbf-rmap-list li.is-muted .jbf-rmap-list-name{ color: var(--ink-soft); }
.jbf-rmap-list-count{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); white-space:nowrap; }
.jbf-rmap-list .jbf-rmap-list-static.is-hl{ background: var(--limestone); }

/* NA note on the three traditional-region pages (v0.15.0). */
.jbf-na-note{
  background: var(--limestone);
  border-left: 3px solid var(--shutter);
  padding: .6rem .9rem;
  margin: .75rem 0 0;
  max-width: 70ch;
  font-size: .95rem;
  color: var(--ink-soft);
}
.jbf-na-note a{ color: var(--shutter-dk); font-weight: 700; }

/* Softer map backdrop (v0.15.1): non-covered departements as a pale tint
   of the shutter blue instead of warm grey — gentler contrast, regions
   still clearly the highlight. Applies to homepage + region maps. */
.jbf-map-other path{ fill: #C5CDCE; }
.jbf-rmap-shape path{ fill: var(--shutter); stroke: var(--shutter-dk); stroke-width:1; }

/* ================================================================
   HEADER DROPDOWN — "Useful information" submenu (v0.20.0)
   ================================================================ */
.jbf-has-sub, .jbf-menu .menu-item-has-children{ position:relative; }
.jbf-submenu, .jbf-menu .sub-menu{ list-style:none; margin:0; padding:0; }
.jbf-sub-toggle{ display:none; background:none; border:0; color:inherit; cursor:pointer; }
@media (min-width:900px){
  .jbf-submenu, .jbf-menu .sub-menu{
    position:absolute; top:100%; left:0; min-width:210px;
    background:var(--shutter-dk); border:1px solid rgba(250,249,246,.14);
    padding:.4rem 0; margin-top:.5rem;
    opacity:0; visibility:hidden; transform:translateY(4px);
    transition:opacity .15s ease, transform .15s ease, visibility .15s;
    z-index:60; box-shadow:0 12px 32px rgba(0,0,0,.20);
  }
  .jbf-has-sub:hover .jbf-submenu,
  .jbf-has-sub:focus-within .jbf-submenu,
  .jbf-menu .menu-item-has-children:hover .sub-menu,
  .jbf-menu .menu-item-has-children:focus-within .sub-menu{
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .jbf-submenu a, .jbf-menu .sub-menu a{
    display:block; padding:.5rem 1rem; white-space:nowrap; border-bottom:0 !important;
  }
  .jbf-submenu a:hover, .jbf-menu .sub-menu a:hover{ color:#fff; }
}
@media (max-width:899px){
  .jbf-submenu, .jbf-menu .sub-menu{ padding-left:1rem; }
  .jbf-submenu a, .jbf-menu .sub-menu a{ opacity:.82; }
}

/* ================================================================
   v0.21.0 — logo image, region bar, list stat + weekly tags,
   journey STAGE COLOURS. Appended block, additions at END only.
   ================================================================ */

/* Logo image (white artwork on the dark header). */
.jbf-logo-img{ display:block; height:26px; width:auto; }
@media (min-width:900px){ .jbf-logo-img{ height:30px; } }

/* Region bar — the second header row, brass against the blue. */
.jbf-region-bar{ background:var(--brass); }
.jbf-region-bar-inner{
  display:flex; gap:1.75rem; align-items:center;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  white-space:nowrap; padding-top:.4rem; padding-bottom:.4rem;
}
.jbf-region-bar a{
  color:rgba(250,249,246,.94); text-decoration:none;
  font-size:.8125rem; font-weight:600; letter-spacing:.02em;
  flex:0 0 auto; padding:.1rem 0; border-bottom:1.5px solid transparent;
}
.jbf-region-bar a:hover{ color:#fff; border-bottom-color:rgba(250,249,246,.8); }

/* "60 new properties every week" at the top of the region list. */
.jbf-map-list-stat{
  padding:.7rem .5rem; border-bottom:2px solid var(--shutter-dk);
  font-family:var(--display); font-size:1.3rem; color:var(--shutter-dk);
}
.jbf-map-list-stat strong{ font-weight:600; }
.jbf-map-list-meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:.1rem;
}
.jbf-map-list-week{
  font-family:var(--mono); font-size:.7rem; color:var(--brass); white-space:nowrap;
}

/* STAGE COLOURS — where you are in the journey.
   Stage 1 (home / region / department): shutter blue — the default.
   Stage 2 (town): olive green.  Stage 3 (property): terracotta.
   The whole accent system re-tints via these two variables. */
body.jbf-stage-town{
  --shutter:    #5E6F4E;
  --shutter-dk: #3E4B32;
}
body.jbf-stage-property{
  --shutter:    #96543F;
  --shutter-dk: #67392B;
}

/* Area headings in the merged-region town list (v0.23.0). */
.jbf-rmap-list-group{
  break-inside: avoid;
  margin-top: 1.1rem;
  padding: .35rem .5rem;
  border-bottom: 2px solid var(--shutter-dk);
}
.jbf-rmap-list-group:first-child{ margin-top: 0; }
.jbf-rmap-list-group a{
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--shutter-dk);
  text-decoration: none;
}
.jbf-rmap-list-group a:hover{ text-decoration: underline; }

/* ================================================================
   v0.24.0 — taller header, centred region PILLS, NA area chooser.
   Appended so it wins over the earlier header rules.
   ================================================================ */
/* Region bar: centred, larger, pill-shaped quick links. */
.jbf-region-bar{ background: #C5CDCE; }   /* matches the France-map backdrop */
.jbf-region-bar-inner{
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  overflow: visible;
  padding-top: .7rem; padding-bottom: .7rem;
}
.jbf-region-bar a{
  background: #fff;
  border: 1px solid #fff;
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .85rem;
  color: var(--shutter-dk);
  font-weight: 600;
}
.jbf-region-bar a:hover{
  background: #f2f1ee;
  color: var(--ink);
}

/* Nouvelle-Aquitaine area chooser — cap the tall map, tidy the list. */
.jbf-choose-title{ font-family:var(--display); font-weight:500; font-size:1.5rem; color:var(--shutter-dk); margin:0 0 .2rem; }
.jbf-na-chooser .jbf-map svg{
  display:block; width:auto; height:auto;
  max-width:100%; max-height:600px; margin:0 auto;
}
.jbf-na-chooser .jbf-map-list a{ padding:.6rem .5rem; }
.jbf-na-chooser .jbf-map-list-name{ font-family:var(--display); font-size:1.15rem; color:var(--ink); }
.jbf-na-chooser .jbf-map-list a:hover .jbf-map-list-name,
.jbf-na-chooser .jbf-map-list a.is-active .jbf-map-list-name{ color:var(--shutter-dk); }

/* ================================================================
   v0.26.0 — region bar as plain white | links, darker + wider hero,
   NA chooser title over the list, homepage "way we work" band.
   Appended so it wins over the earlier header/region-bar rules.
   ================================================================ */

/* Region bar: drop the pills. White text on the same dark as the
   header above it (re-tints with the stage colour), links divided by
   a thin vertical rule instead of a chip. */
.jbf-region-bar{
  background: var(--shutter-dk);
  border-top: 1px solid rgba(250,249,246,.14);
}
.jbf-region-bar-inner{
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;                       /* spacing comes from the separators */
  overflow: visible;
  padding-top: .55rem; padding-bottom: .55rem;
}
.jbf-region-bar a{
  background: none;
  border: 0;
  border-radius: 0;
  padding: .1rem 0;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(250,249,246,.94);
  border-bottom: 1.5px solid transparent;
}
.jbf-region-bar a:hover{
  background: none;
  color: #fff;
  border-bottom-color: rgba(250,249,246,.75);
}
/* thin " | " between consecutive links, centred in the space */
.jbf-region-bar-inner a + a::before{
  content: "|";
  margin: 0 1.1rem;
  color: rgba(250,249,246,.4);
  font-weight: 400;
}

/* Hero: wider lede column and a deeper scrim so the copy reads. */
.jbf-home-lede{ max-width: 64ch; }
.jbf-hero-scrim{
  background:
    linear-gradient(to top, rgba(18,23,25,.94) 0%, rgba(18,23,25,.78) 38%, rgba(18,23,25,.44) 72%, rgba(18,23,25,.26) 100%),
    linear-gradient(to right, rgba(18,23,25,.55) 0%, rgba(18,23,25,0) 66%);
}

/* NA chooser: the title + subtitle now live in the right column,
   directly above the area list (map stays on the left). */
.jbf-na-listcol{ min-width: 0; }
.jbf-na-chooser .jbf-mapsec-head{
  max-width: none;
  margin-bottom: 1rem;
}

/* Homepage "The way we work" band. */
.jbf-howwork{
  padding-block: clamp(2.5rem,6vw,4.5rem);
  border-top: 1px solid var(--hairline);
}
.jbf-howwork-inner{
  display: grid;
  gap: clamp(1.5rem,4vw,3.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width:820px){
  .jbf-howwork-inner{ grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); }
}
.jbf-howwork-head{ max-width: 46ch; }
.jbf-howwork-note{ color: var(--ink-soft); margin: .75rem 0 0; }
.jbf-howwork-body p{ color: var(--ink-soft); margin: 0 0 1rem; max-width: 60ch; }
.jbf-howwork-sub{
  font-family: var(--display); font-weight: 600; color: var(--shutter-dk);
  font-size: 1.25rem; margin: 0 0 .6rem;
}
.jbf-howwork-list{
  list-style: none; margin: 0 0 1rem; padding: 0; max-width: 60ch;
}
.jbf-howwork-list li{
  position: relative; padding-left: 1.35rem; margin: 0 0 .55rem;
  color: var(--ink-soft);
}
.jbf-howwork-list li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--shutter);
}

/* Below phone width the long merged label wraps; swap the vertical
   rules for plain spacing so no stray "|" starts a wrapped line. */
@media (max-width:600px){
  .jbf-region-bar-inner{ gap: .35rem 1.1rem; }
  .jbf-region-bar-inner a + a::before{ content: none; }
}

/* ================================================================
   v0.27.0 — per-region colour on the region-page maps.
   Jean wants each region's view to have its own map colour. Scoped
   to the region-map component (silhouette + its town list) via a
   --rmap / --rmap-dk pair, so the header, region bar and the France
   homepage map are all untouched. Dots stay white throughout.
   Colours are a first pass for Jean — tweak the pairs below.
   Deliberately avoid the olive (town) and terracotta (property)
   stage hues so the map colour never reads as a journey stage.
   ================================================================ */

/* Region map keys off its own vars, falling back to the shutter blue
   so any region without a colour below still renders as before. */
.jbf-rmap-shape path{
  fill:   var(--rmap,    var(--shutter));
  stroke: var(--rmap-dk, var(--shutter-dk));
}
/* Keep the list beside the map in step with its silhouette. */
.jbf-rmapsec .jbf-rmap-list li.is-active .jbf-rmap-list-name{ color: var(--rmap-dk, var(--shutter-dk)); }
.jbf-rmapsec .jbf-rmap-list-group a{ color: var(--rmap-dk, var(--shutter-dk)); }

/* One pair per legacy region id. mid = fill, dk = stroke + list text. */
body.jbf-region-1  { --rmap:#2F7273; --rmap-dk:#1E5455; } /* Brittany — Atlantic teal */
body.jbf-region-3  { --rmap:#4F6E86; --rmap-dk:#33485A; } /* Normandy & Nord-Pas-de-Calais — slate blue */
body.jbf-region-2  { --rmap:#A9822F; --rmap-dk:#6B501C; } /* Poitou-Charentes / Loire / Vendée — golden ochre */
body.jbf-region-7  { --rmap:#4A7A55; --rmap-dk:#2E5136; } /* Limousin — forest green */
body.jbf-region-10 { --rmap:#8E4A5B; --rmap-dk:#5C2E3A; } /* Aquitaine — claret */
body.jbf-region-8  { --rmap:#6E5A8A; --rmap-dk:#453956; } /* Midi-Pyrénées — violet (off-nav) */
body.jbf-region-9  { --rmap:#4A5C8A; --rmap-dk:#2F3C5C; } /* Languedoc "Dordogne & Lot" — indigo (off-nav) */

/* ================================================================
   v0.29.0 — region colour identity, card redesign, gallery contain,
   howwork band, region-bar underline fix.
   ================================================================ */

/* --- REGION PALETTE follows through region → town → property.
   The old journey-stage tints (town olive / property terracotta) are
   retired: reset them to the default blue first, then let the
   region class re-tint everything via the accent variables. The
   header therefore only changes colour BETWEEN regions. */
body.jbf-stage-town,
body.jbf-stage-property{
  --shutter:    #4A6670;
  --shutter-dk: #2E464F;
}
body.jbf-region-1  { --shutter:#2F7273; --shutter-dk:#1E5455; } /* Brittany */
body.jbf-region-3  { --shutter:#4F6E86; --shutter-dk:#33485A; } /* Normandy & NPdC */
body.jbf-region-2  { --shutter:#A9822F; --shutter-dk:#6B501C; } /* P-C / Loire / Vendée */
body.jbf-region-7  { --shutter:#4A7A55; --shutter-dk:#2E5136; } /* Limousin */
body.jbf-region-10 { --shutter:#8E4A5B; --shutter-dk:#5C2E3A; } /* Aquitaine */
body.jbf-region-8  { --shutter:#6E5A8A; --shutter-dk:#453956; } /* Midi-Pyrénées (off-nav) */
body.jbf-region-9  { --shutter:#4A5C8A; --shutter-dk:#2F3C5C; } /* Languedoc "D&L" (off-nav) */

/* --- Region bar: fix the underline spilling across the "|".
   The separator is a ::before INSIDE each link, so the old
   border-bottom underline ran underneath it. Switch the hover
   underline to text-decoration (which skips atomic inlines) and
   make the separator inline-block so it is never underlined. */
.jbf-region-bar a{
  border-bottom: 0;
  text-decoration: none;
}
.jbf-region-bar a:hover{
  border-bottom: 0;
  text-decoration: underline;
  text-underline-offset: .4em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(250,249,246,.75);
}
.jbf-region-bar-inner a + a::before{
  display: inline-block;
  text-decoration: none;
}

/* --- Property card: reference as the heading; footer row with the
   condition at a glance (left) and the price stack (right). */
.jbf-card-title{ letter-spacing:.02em; }
.jbf-card-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:.75rem; margin-top:auto; padding-top:.75rem;
}
.jbf-card-cond{
  font-size:.72rem; font-weight:600; letter-spacing:.04em;
  color:var(--ink-soft);
  padding:.25rem .5rem; border:1px solid var(--hairline); border-radius:2px;
  max-width: 55%;
}
.jbf-card-cond-3{ color:#8a5a2b; border-color:#D9C6A8; background:#F6EFE2; } /* to renovate */
.jbf-card-cond-2{ color:#3f5560; border-color:#C3D0D6; background:#EAF0F2; } /* partly habitable */
.jbf-card-cond:empty{ border:0; padding:0; }
.jbf-card-price{ display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.jbf-card-gbp{
  font-size:.72rem; color:var(--ink-soft); font-weight:400; letter-spacing:.01em;
}
/* the card body should flex so the footer pins to the bottom */
.jbf-card-body{ display:flex; flex-direction:column; }

/* --- Gallery: never upscale. The real photo is CONTAINED at up to
   its true size; a blurred copy of itself fills the letterbox space
   behind, so the frame still reads as a full gallery tile. */
.jbf-gal-main{ position:relative; overflow:hidden; background:#1f2425; }
.jbf-gal-main img.jbf-gal-blur{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:blur(22px) saturate(.85) brightness(.72);
  transform:scale(1.12);              /* hide blur edge fringing */
  aspect-ratio:auto;
}
.jbf-gal-main img.jbf-gal-photo{
  position:relative; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
  aspect-ratio:auto;
}
@media (min-width:760px){
  .jbf-gal-main img.jbf-gal-photo{ height:420px; }
}
/* side thumbs stay cover (small frames, mild crop reads fine) */

/* --- "The way we work": designed band. Limestone surface, three
   numbered panels divided by hairlines; the viewing panel carries
   its checklist. */
.jbf-howwork{
  background:var(--limestone);
  border-top:1px solid var(--hairline);
  padding-block: clamp(2.75rem,6vw,4.5rem);
}
.jbf-howwork-head{ margin-bottom: clamp(1.5rem,3vw,2.5rem); }
.jbf-how-grid{
  display:grid; grid-template-columns:1fr;
  border-top:1px solid var(--hairline);
}
@media (min-width:820px){
  .jbf-how-grid{ grid-template-columns:1fr 1fr 1.35fr; border-left:1px solid var(--hairline); }
}
.jbf-how-item{
  padding: clamp(1.25rem,2.5vw,2rem);
  border-bottom:1px solid var(--hairline);
}
@media (min-width:820px){
  .jbf-how-item{ border-right:1px solid var(--hairline); }
}
.jbf-how-num{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.12em;
  color:var(--brass);
  display:block; margin-bottom:.9rem;
}
.jbf-how-title{
  font-family:var(--display); font-weight:600; font-size:1.35rem;
  color:var(--shutter-dk); margin:0 0 .6rem;
}
.jbf-how-item p{ color:var(--ink-soft); margin:0 0 .8rem; }
.jbf-how-item p:last-child{ margin-bottom:0; }
.jbf-how-list{ list-style:none; margin:0 0 .8rem; padding:0; }
.jbf-how-list li{
  position:relative; padding-left:1.2rem; margin-bottom:.45rem;
  color:var(--ink-soft);
}
.jbf-how-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.4rem; height:.4rem; border-radius:50%;
  background:var(--shutter);
}
.jbf-how-note{ font-size:.9rem; }

/* ================================================================
   v0.33.0 — horizontal filter bar (Rightmove-style dropdowns),
   scoped on town/region/archive, + homepage headline "windows".
   ================================================================ */

/* --- Filter bar --- */
.jbf-filterbar{
  margin: 0 0 1.5rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--paper);
}
.jbf-fb-row{
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: .4rem;
  padding: .55rem;
}
.jbf-fb-item{ position: relative; }
.jbf-fb-toggle{
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: .9rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--hairline); border-radius: 3px;
  padding: .55rem .8rem; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, background .15s ease;
}
.jbf-fb-toggle:hover{ border-color: var(--shutter); }
.jbf-fb-toggle.is-active{
  border-color: var(--shutter); background: var(--shutter); color: var(--paper);
}
.jbf-fb-caret{
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; opacity: .7; transition: transform .15s ease;
}
.jbf-fb-item.is-open .jbf-fb-caret{ transform: rotate(180deg); }

/* the popover panel */
.jbf-fb-panel{
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  min-width: 240px; max-width: 340px; max-height: 60vh; overflow: auto;
  background: #fff; border: 1px solid var(--hairline); border-radius: 4px;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.35);
  padding: 1rem;
}
.jbf-fb-panel[hidden]{ display: none; }
/* price slider needs a bit of breathing room inside the panel */
.jbf-fb-panel .facetwp-facet{ margin: 0; }
.jbf-fb-panel .facetwp-slider-wrap{ padding: .5rem .4rem 0; }

.jbf-fb-tail{ margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.jbf-fb-sort .facetwp-facet{ margin: 0; }
.jbf-fb-sort select{
  font-family: var(--body); font-size: .9rem; padding: .5rem .6rem;
  border: 1px solid var(--hairline); border-radius: 3px; background: #fff;
}

/* active-selection chips under the bar */
.jbf-fb-active{ padding: 0 .55rem; }
.jbf-fb-active:empty{ display: none; }
.jbf-fb-active .facetwp-selection-value{
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--limestone); border: 1px solid var(--hairline); border-radius: 999px;
  padding: .25rem .7rem; margin: 0 .4rem .55rem 0; font-size: .82rem;
}

@media (max-width: 640px){
  .jbf-fb-row{ gap: .35rem; position: relative; }   /* anchor panels to the row */
  .jbf-fb-toggle{ padding: .5rem .65rem; font-size: .85rem; }
  .jbf-fb-tail{ margin-left: 0; width: 100%; }
  /* the panel was inheriting the button's width (item was the positioned
     ancestor); anchor it to the whole row so it opens full-width beneath
     the filters and nothing gets clipped. */
  .jbf-fb-item{ position: static; }
  .jbf-fb-panel{
    left: 0; right: 0; top: calc(100% + 6px);
    min-width: 0; max-width: none;
  }
}

.jbf-archive-layout--bar{ display: block; }

/* --- Homepage headline "windows" --- */
.jbf-windows{ padding-block: clamp(2rem,5vw,3.5rem); }
.jbf-window-grid{
  list-style: none; margin: 1.5rem 0 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px){ .jbf-window-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px){ .jbf-window-grid{ grid-template-columns: 1fr 1fr 1fr 1fr; } }
.jbf-window{
  display: flex; flex-direction: column; gap: .2rem;
  height: 100%; padding: 1.1rem 1.2rem;
  background: var(--limestone); border: 1px solid var(--hairline); border-radius: 4px;
  text-decoration: none; color: var(--ink);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.jbf-window:hover{ transform: translateY(-2px); border-color: var(--shutter); background: #fff; }
.jbf-window-title{ font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--shutter-dk); line-height: 1.2; }
.jbf-window-sub{ font-size: .85rem; color: var(--ink-soft); }
.jbf-window-arrow{ margin-top: .5rem; color: var(--shutter); font-weight: 700; }

/* ================================================================
   v0.34.0 — design polish batch:
   card price beside beds (body font, larger); square selection
   chips; quick-filters head; blue "way we work" tiles; region bar
   as white buttons; ONE colour identity (blue everywhere, green
   region maps, lighter-blue NA chooser map).
   ================================================================ */

/* --- Card: title + price in the body font; price up beside beds. */
.jbf-card-title{
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .04em;
}
.jbf-card-mid{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .75rem;
}
.jbf-card-mid .jbf-card-meta{ margin: 0; }
.jbf-card-mid .jbf-card-price{ margin-left: auto; }
.jbf-card-eur{
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.3rem;          /* ~20% up */
  line-height: 1.15;
  color: var(--ink);
}
.jbf-card-foot{
  justify-content: flex-start;
}

/* --- Filter selection chips: square, with the ✕ inside the chip.
   Style the whole selection item as the chip so label, value and the
   remove icon all sit inside one box. */
.jbf-fb-active .facetwp-selections li{
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--limestone);
  border: 1px solid var(--hairline);
  border-radius: 3px;                 /* square, like the buttons */
  padding: .35rem .65rem;
  margin: 0 .45rem .55rem 0;
  font-size: .82rem;
}
.jbf-fb-active .facetwp-selection-value{
  background: none; border: 0; border-radius: 0;
  padding: 0 .15rem 0 0; margin: 0;
  display: inline-flex; align-items: center; gap: .4rem;
}

/* --- Quick filters head: title left, label right. */
.jbf-windows-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.jbf-windows-head .jbf-eyebrow{ margin: 0; }

/* --- "The way we work": blue tiles, white writing. */
.jbf-how-grid{
  border: 0; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width:820px){
  .jbf-how-grid{ grid-template-columns: 1fr 1fr 1.35fr; border-left: 0; }
}
.jbf-how-item{
  background: var(--shutter-dk);
  border: 0; border-radius: 4px;
}
.jbf-how-item .jbf-how-title{ color: var(--paper); }
.jbf-how-item p,
.jbf-how-item .jbf-how-list li{ color: rgba(250,249,246,.85); }
.jbf-how-num{ color: #C9A85C; }
/* square bullets, centred to the middle of each point */
.jbf-how-list li{ padding-left: 1.3rem; }
.jbf-how-list li::before{
  border-radius: 0;
  width: .45rem; height: .45rem;
  background: rgba(250,249,246,.85);
  top: 50%; transform: translateY(-50%);
}

/* --- Region bar: white square buttons with blue text. */
.jbf-region-bar a{
  background: #fff;
  color: var(--shutter-dk);
  border-radius: 3px;
  padding: .45rem .95rem;
  font-weight: 600;
  text-decoration: none;
}
.jbf-region-bar a:hover{
  background: var(--limestone);
  color: var(--shutter-dk);
  text-decoration: none;
}
.jbf-region-bar-inner{ gap: .6rem; }
.jbf-region-bar-inner a + a::before{ content: none; }   /* buttons need no "|" */

/* --- ONE colour identity.
   Header/nav/accents: ALWAYS the blue — the per-region --shutter
   overrides from v0.29 are reset here (later block wins).
   Region-page dots-maps: ALL green.
   (The homepage France map is untouched; the NA chooser map gets its
   own lighter blue below.) */
body.jbf-region-1, body.jbf-region-2, body.jbf-region-3,
body.jbf-region-7, body.jbf-region-8, body.jbf-region-9,
body.jbf-region-10{
  --shutter:    #4A6670;
  --shutter-dk: #2E464F;
  --rmap:       #4A7A55;   /* the green — all region maps */
  --rmap-dk:    #2E5136;
}

/* --- NA chooser map: slightly lighter blue than the France map,
   keeping the hover/active darkening intact. */
.jbf-na-chooser .jbf-map-region path{
  fill: #62808C;
}
.jbf-na-chooser .jbf-map-region:hover path,
.jbf-na-chooser .jbf-map-region.is-active path,
.jbf-na-chooser .jbf-map-region:focus-visible path{
  fill: #44626E;
}

/* ================================================================
   v0.36.0 — region Town dropdown (real town list) + legacy
   filter-family redirects (PHP only).
   ================================================================ */
.jbf-fb-panel--towns{ min-width: 300px; max-width: 420px; }
.jbf-fb-towns{
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 1.25rem;
}
.jbf-fb-towns li{ break-inside: avoid; }
.jbf-fb-towns a{
  display: block; padding: .35rem .3rem;
  text-decoration: none; color: var(--ink);
  border-radius: 3px; font-size: .9rem;
}
.jbf-fb-towns a:hover{ background: var(--limestone); color: var(--shutter-dk); }
@media (max-width: 640px){ .jbf-fb-towns{ columns: 1; } }

/* ================================================================
   v0.39.0 — page templates: Register your search, About, Contact
   + shared native form styling.
   ================================================================ */
.jbf-page{ padding-block: clamp(2rem,5vw,3.5rem); }
.jbf-page-narrow{ max-width: 860px; }
.jbf-page-head{ margin-bottom: 1.75rem; }
.jbf-page-title{ font-family: var(--display); font-weight: 600; font-size: clamp(2rem,5vw,2.9rem); color: var(--shutter-dk); margin: .2rem 0 .6rem; line-height: 1.08; }
.jbf-page-lede{ font-size: 1.1rem; color: var(--ink-soft); max-width: 60ch; }

.jbf-page .jbf-prose p{ margin: 0 0 1.1rem; line-height: 1.7; color: var(--ink); }
.jbf-page .jbf-prose a{ color: var(--shutter-dk); text-decoration: underline; text-underline-offset: .2em; }

/* --- Forms --- */
.jbf-form{ margin-top: .5rem; }
.jbf-form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
@media (max-width: 560px){ .jbf-form-grid{ grid-template-columns: 1fr; } }
.jbf-field{ margin: 0 0 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.jbf-field--wide{ grid-column: 1 / -1; }
.jbf-field label,
.jbf-field legend{ font-family: var(--body); font-weight: 600; font-size: .9rem; color: var(--ink); }
.jbf-field label span,
.jbf-consent span{ color: var(--brass); }
.jbf-form input[type=text],
.jbf-form input[type=email],
.jbf-form input[type=tel],
.jbf-form select,
.jbf-form textarea{
  font-family: var(--body); font-size: 1rem; color: var(--ink);
  padding: .65rem .75rem; border: 1px solid var(--hairline); border-radius: 3px;
  background: #fff; width: 100%;
}
.jbf-form input:focus,
.jbf-form select:focus,
.jbf-form textarea:focus{ outline: none; border-color: var(--shutter); box-shadow: 0 0 0 3px rgba(74,102,112,.15); }
.jbf-checks{ display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; margin-top: .5rem; }
@media (max-width: 560px){ .jbf-checks{ grid-template-columns: 1fr; } }
.jbf-checks label,
.jbf-consent label{ font-weight: 400; display: flex; align-items: flex-start; gap: .5rem; }
fieldset.jbf-field{ border: 0; padding: 0; margin: 0 0 1.1rem; }
.jbf-consent{ background: var(--limestone); border: 1px solid var(--hairline); border-radius: 3px; padding: .8rem 1rem; }
.jbf-form-actions{ margin-top: .5rem; }
.jbf-btn{
  font-family: var(--body); font-weight: 700; font-size: 1rem; letter-spacing: .02em;
  color: var(--paper); background: var(--shutter-dk);
  border: 0; border-radius: 3px; padding: .8rem 1.6rem; cursor: pointer;
  transition: background .15s ease;
}
.jbf-btn:hover{ background: var(--shutter); }
.jbf-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.jbf-form-note{ padding: .9rem 1.1rem; border-radius: 4px; margin: 0 0 1.25rem; font-size: .95rem; }
.jbf-form-note--ok{ background: #EBF1E8; border: 1px solid #C4D2C0; color: #2E5136; }
.jbf-form-note--err{ background: #F6ECEC; border: 1px solid #E0C4C4; color: #8A3B3B; }

/* --- Contact layout --- */
.jbf-contact-cols{ display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 800px){ .jbf-contact-cols{ grid-template-columns: 0.8fr 1.2fr; gap: 3rem; } }
.jbf-contact-list{ list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.jbf-contact-list li{ margin-bottom: 1rem; display: flex; flex-direction: column; }
.jbf-contact-k{ font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.jbf-contact-list a{ font-family: var(--display); font-size: 1.35rem; color: var(--shutter-dk); text-decoration: none; }
.jbf-contact-note{ font-size: .88rem; color: var(--ink-soft); line-height: 1.6; }

/* ================================================================
   v0.40.0 — landscape listing ROWS (Rightmove/JB-list style) with
   an in-row mini gallery. Replaces the square tile grid on the
   archive + all location pages. 10 per page.
   ================================================================ */

/* stacked, full-width rows (override the tile grid) */
.jbf-list{
  display: block !important;
  grid-template-columns: none !important;
}
.jbf-row{
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.jbf-row:hover{ box-shadow: 0 12px 30px -18px rgba(0,0,0,.4); border-color: #cfc9bd; }
@media (max-width: 720px){
  .jbf-row{ grid-template-columns: 1fr; }
}

/* --- media / mini gallery --- */
.jbf-row-media{ position: relative; background: #1f2425; min-height: 240px; }
.jbf-row-gallery{ position: relative; width: 100%; height: 100%; }
.jbf-row-slide{
  position: absolute; inset: 0; display: none;
}
.jbf-row-slide.is-current{ display: block; }
.jbf-row-slide img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
@media (max-width: 720px){
  .jbf-row-media{ min-height: 0; aspect-ratio: 3 / 2; }
  .jbf-row-slide{ position: absolute; }
}
.jbf-row-nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--ink);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s ease; z-index: 2;
}
.jbf-row:hover .jbf-row-nav,
.jbf-row-media:focus-within .jbf-row-nav{ opacity: 1; }
.jbf-row-prev{ left: 10px; }
.jbf-row-next{ right: 10px; }
.jbf-row-nav:hover{ background: #fff; }
@media (max-width: 720px){ .jbf-row-nav{ opacity: 1; } }
.jbf-row-count{
  position: absolute; bottom: 10px; right: 10px; z-index: 2;
  background: rgba(38,43,44,.82); color: #fff;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  padding: .2rem .5rem; border-radius: 3px;
}

/* --- body --- */
.jbf-row-body{
  display: flex; flex-direction: column;
  padding: 1.25rem 1.4rem;
}
.jbf-row-main{ text-decoration: none; color: inherit; display: block; }
.jbf-row-body .jbf-card-place{
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.jbf-row-title{
  font-family: var(--body); font-weight: 700; font-size: 1.08rem; line-height: 1.3;
  color: var(--ink); margin: .2rem 0 .55rem;
  /* one or two lines max */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jbf-row-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .7rem; color: var(--ink-soft); font-size: .92rem;
}
.jbf-row-meta .jbf-card-cond{ margin-left: .25rem; }
.jbf-row-desc{
  color: var(--ink-soft); font-size: .92rem; line-height: 1.6; margin: 0 0 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.jbf-row-foot{
  margin-top: auto; padding-top: .5rem;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.jbf-row-foot .jbf-card-price{ display: flex; flex-direction: column; }
.jbf-row-cta{
  font-family: var(--body); font-weight: 600; font-size: .88rem;
  color: var(--shutter-dk); text-decoration: none;
  border: 1px solid var(--shutter); border-radius: 3px; padding: .55rem 1rem;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.jbf-row-cta:hover{ background: var(--shutter-dk); color: var(--paper); border-color: var(--shutter-dk); }

/* ================================================================
   v0.41.0 — row reference, homepage carousel mini-card, fiche
   description colour re-asserted, land/house title fix (PHP).
   ================================================================ */

/* re-assert the fiche description as light-on-blue (the About-page
   .jbf-page .jbf-prose p rule is now scoped away from it, but make it
   explicit on the paragraph so nothing global can flip it to black). */
.jbf-overview .jbf-desc .jbf-prose,
.jbf-overview .jbf-desc .jbf-prose p{ color: #D3DBDD; }
.jbf-overview .jbf-desc .jbf-prose a{ color: #fff; }

/* reference, top-right of a listing row */
.jbf-row-body{ position: relative; }
.jbf-row-ref{
  position: absolute; top: 1.25rem; right: 1.4rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--limestone);
  border: 1px solid var(--hairline); border-radius: 3px; padding: .2rem .5rem;
}
.jbf-row-main{ padding-right: 6.5rem; }   /* keep the H1 clear of the ref */

/* --- Homepage "Latest properties" carousel mini-card --- */
.jbf-mini{
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--hairline); border-radius: 5px;
  overflow: hidden; text-decoration: none; color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.jbf-mini:hover{ box-shadow: 0 12px 30px -18px rgba(0,0,0,.4); border-color: #cfc9bd; }
.jbf-mini-media{ aspect-ratio: 4 / 3; background: #1f2425; }
.jbf-mini-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.jbf-mini-body{ display: flex; flex-direction: column; padding: .9rem 1rem 1.1rem; gap: .1rem; }
.jbf-mini-body .jbf-card-place{ font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.jbf-mini-title{
  font-family: var(--body); font-weight: 700; font-size: .98rem; line-height: 1.3;
  color: var(--ink); margin: .15rem 0 .45rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.jbf-mini-meta{ margin: 0 0 .7rem; color: var(--ink-soft); font-size: .88rem; display: flex; gap: .5rem; }
.jbf-mini-foot{ margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.jbf-mini-foot .jbf-card-eur{ font-family: var(--body); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.jbf-mini-foot .jbf-card-cond{ font-size: .68rem; }

/* ================================================================
   v0.42.0 — homepage "Latest properties" carousel now scrolls the
   REAL landscape rows (same tile as archive/towns), one per view
   with the next peeking, instead of a 3-up card grid.
   ================================================================ */
.jbf-latest .jbf-carousel-track{
  grid-auto-columns: calc(100% - 2.5rem);   /* one full row per view + peek */
}
@media (min-width: 640px){
  .jbf-latest .jbf-carousel-track{ grid-auto-columns: calc(100% - 3rem); }
}
@media (min-width: 980px){
  .jbf-latest .jbf-carousel-track{ grid-auto-columns: calc(100% - 5rem); }
}
/* the slide holds a .jbf-row now, not a .jbf-card */
.jbf-latest .jbf-carousel-item > .jbf-row{ width: 100%; margin-bottom: 0; }

/* ================================================================
   v0.43.0 — price stack side-by-side (larger £), row meta reorder,
   homepage carousel = preview image only (no in-row gallery).
   ================================================================ */

/* £ approx sits to the RIGHT of the € price, larger than before */
.jbf-card-price{ flex-direction: row !important; align-items: baseline; gap: .5rem; }
.jbf-card-gbp{ font-size: .95rem !important; color: var(--ink-soft); font-weight: 400; }

/* Homepage carousel = preview image only (NOT the in-row gallery). The
   base rules already show just the first slide; here we hide the gallery
   arrows + counter on the homepage so each card is a clean single preview
   that links to the property. (v0.52 briefly enabled the gallery here;
   reverted in v0.53 per client preference.) */
.jbf-latest .jbf-row-nav,
.jbf-latest .jbf-row-count{ display: none !important; }

/* ================================================================
   v0.44.0 — white register button, "Apply filters" arrow, and a
   proper multi-column footer with site map.
   ================================================================ */

/* the light button variant must beat the later plain .jbf-btn rule */
.jbf-btn.jbf-btn--light{ background: var(--paper); color: var(--shutter-dk); }
.jbf-btn.jbf-btn--light:hover{ background: var(--limestone); color: var(--shutter-dk); }

/* the quick-filter "Apply filters →" label */
.jbf-window-arrow{
  margin-top: .6rem; color: var(--shutter); font-weight: 600; font-size: .9rem;
  display: inline-flex; align-items: center; gap: .35rem;
}

/* --- Footer --- */
.jbf-site-footer{ margin-top: clamp(3rem,7vw,5rem); background: var(--shutter-dk); color: rgba(250,249,246,.82); }
.jbf-footer-grid{
  display: grid; gap: 2rem clamp(1.5rem,4vw,3.5rem);
  grid-template-columns: 1fr; padding-block: clamp(2.5rem,5vw,3.5rem);
}
@media (min-width: 620px){ .jbf-footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px){ .jbf-footer-grid{ grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.jbf-footer-name{ font-family: var(--display); font-size: 1.4rem; color: var(--paper); margin: 0 0 .5rem; }
.jbf-footer-tag{ font-size: .92rem; line-height: 1.6; max-width: 34ch; margin: 0 0 1rem; }
.jbf-footer-contact{ list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.jbf-footer-contact li{ margin-bottom: .35rem; }
.jbf-footer-contact span{ color: rgba(250,249,246,.55); font-size: .85rem; }

.jbf-footer-h{
  font-family: var(--body); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(250,249,246,.55); margin: 0 0 .9rem; font-weight: 600;
}
.jbf-footer-col ul{ list-style: none; margin: 0; padding: 0; }
.jbf-footer-col li{ margin-bottom: .55rem; }
.jbf-site-footer a{ color: rgba(250,249,246,.82); text-decoration: none; transition: color .15s ease; }
.jbf-site-footer a:hover{ color: var(--paper); text-decoration: underline; text-underline-offset: .2em; }

.jbf-footer-bar{ border-top: 1px solid rgba(250,249,246,.14); }
.jbf-footer-bar-inner{
  display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; justify-content: space-between;
  padding-block: 1.1rem; font-size: .82rem; color: rgba(250,249,246,.6);
}
.jbf-footer-bar-inner p{ margin: 0; }
.jbf-footer-fineprint{ color: rgba(250,249,246,.45); }

/* ================================================================
   v0.45.0 — "way we work" tiles WHITE with dark text + natural
   height; "Tell us what you're looking for" strip becomes a
   contained blue box (not full-bleed).
   ================================================================ */

/* tiles: white, contrasting text, only as tall as their content */
.jbf-how-grid{ align-items: start; }
.jbf-how-item{
  background: #fff;
  border: 1px solid var(--hairline);
}
.jbf-how-item .jbf-how-title{ color: var(--shutter-dk); }
.jbf-how-item p,
.jbf-how-item .jbf-how-list li{ color: var(--ink-soft); }
.jbf-how-num{ color: #B08D57; }               /* brass, readable on white */
.jbf-how-list li::before{ background: var(--shutter); }

/* strip: blue lives on a contained, rounded box inside the wrap
   (page background shows at the sides) instead of full-bleed */
.jbf-strip{ background: transparent; color: inherit; padding-block: clamp(2rem,5vw,3.5rem); }
.jbf-strip > .jbf-wrap{
  background: var(--shutter-dk);
  color: var(--paper);
  border-radius: 6px;
  padding: clamp(2rem,5vw,3.25rem) clamp(1.5rem,4vw,3rem);
}

/* ================================================================
   v0.47.0 — NA parent page uses landscape rows (PHP); "the way we
   work" section flips to WHITE bg with OFF-WHITE tiles.
   ================================================================ */
.jbf-howwork{ background: #fff; }
.jbf-how-item{ background: var(--limestone); border: 1px solid var(--hairline); }

/* ================================================================
   v0.48.0 — hero +20% taller; "way we work" section back to the
   page background; NA parent page gets the filter bar (4 areas as
   the location control).
   ================================================================ */
.jbf-hero-home{ min-height: clamp(504px, 86vh, 864px); }

/* section blends into the page like the others; tiles stay off-white */
.jbf-howwork{ background: transparent; border-top: 0; }

/* ================================================================
   v0.49.0 — region + town intros (and the NA callout) run full
   content-width instead of a narrow ~68ch column.
   ================================================================ */
.jbf-region-copy,
.jbf-term-intro,
.jbf-na-note{ max-width: none; }

/* ================================================================
   v0.51.0 — mobile polish. Hero copy starts below the header (was
   pinned to the bottom of a tall hero), with the scrim re-weighted
   so it stays legible higher up. Property tile (used on archive,
   town, region AND the homepage carousel): reference now stacks
   above the town instead of overlapping it top-right; dropping the
   ref's clearance padding lets the title/meta/description use the
   full tile width; the condition tag sits inline to the right of
   the size/beds; the price block is centred against the CTA. The
   register strip is inset from the screen edges on small screens.
   ================================================================ */

/* register strip: keep the blue box off the screen edges (a small
   page-background gutter shows each side). No effect on desktop,
   where the box is already centred within the wrap. */
.jbf-strip{ padding-inline: 1.25rem; }

@media (max-width: 720px){

  /* hero: copy starts just under the header, not at the foot of a
     tall hero. Re-weight the scrim darker at the top so the higher
     copy keeps its contrast over the brighter part of the photo. */
  /* copy starts below the header AND the hero is only as tall as its
     content — no dead image space under the buttons (was 86vh). */
  .jbf-hero-home{ align-items: flex-start; min-height: auto; }
  /* darker overlay on mobile so the copy reads over the photo */
  .jbf-hero-scrim{
    background:
      linear-gradient(to bottom,
        rgba(18,23,25,.86) 0%,
        rgba(18,23,25,.70) 42%,
        rgba(18,23,25,.62) 78%,
        rgba(18,23,25,.68) 100%);
  }

  /* reference: out of the top-right corner, onto its own line at the
     top of the text stack (it already sits first in the markup). */
  .jbf-row-ref{
    position: static; align-self: flex-start;
    margin: 0 0 .55rem;
  }
  /* with the ref no longer overlaid, the body no longer needs the
     right gutter — title, meta and description fill the tile width. */
  .jbf-row-main{ padding-right: 0; }

  /* condition tag: inline, to the right of the size/beds, centred. */
  .jbf-row-meta{ flex-wrap: wrap; align-items: center; }
  .jbf-row-meta .jbf-card-cond{ margin-left: .4rem; }

  /* price: € centred against the two-line "approx £", and the whole
     price block centred against the View-property button. */
  .jbf-row-foot{ align-items: center; }
  .jbf-row-foot .jbf-card-price{ align-items: center; }
}

/* ================================================================
   v0.52.0 — mobile: hero trimmed to its content with a darker
   overlay; homepage "Latest properties" now shows the full
   region-style tile (working in-row photo gallery) one per view
   with arrow buttons below to signal the horizontal scroll; the
   sticky header slides away on scroll-down and returns on scroll-up.
   ================================================================ */

/* header hide/reveal is driven inline by nav.js — scroll-linked on mobile so
   it tracks the gesture and settles when scrolling stops; desktop stays put.
   Only the shadow transition lives in CSS (nav.js sets the transform one). */
.jbf-site-header{ transition: box-shadow .2s ease; }

/* homepage carousel: one FULL-WIDTH card per view on phones (no peek). */
@media (max-width: 639px){
  .jbf-latest .jbf-carousel-track{ grid-auto-columns: 100%; }
}

/* carousel arrows below the track — shown on phones only, where the
   header arrows are hidden, to make the horizontal scroll obvious. */
.jbf-carousel-nav--below{ display: none; }
@media (max-width: 639px){
  .jbf-carousel-nav--below{
    display: flex; justify-content: center; align-items: center;
    gap: 1.25rem; margin-top: 1.1rem;
  }
  /* display:grid (not inline-flex) so the base .jbf-cbtn place-items:center
     keeps the glyph centred; slightly larger for a clean tap target. */
  .jbf-carousel-nav--below .jbf-cbtn{ display: grid; width: 44px; height: 44px; }
}

/* ================================================================
   v0.56.0 — Jean's feedback round, batch 1. Original yellow logo in
   the header; cloud-sky page background on the homepage and region
   pages (his original site's background, tiled); new hero photo via
   the theme fallback; exchange-rate note + search-by-reference in
   the listing toolbars; floor-by-floor description formatting is in
   inc/format.php (display-time only).
   ================================================================ */

/* Jean's yellow logo is a wide lockup (446x65) — a touch taller than
   the old white wordmark so the lettering stays legible. */
.jbf-logo-img{ height: 32px; }
@media (min-width: 900px){ .jbf-logo-img{ height: 38px; } }

/* cloud-sky background (tiled) on the homepage + region pages. The
   image is light, so default dark text stays readable; sections with
   their own solid backgrounds are unaffected. */
body.home,
body.jbf-stage-region{
  background-color: #eef4fb;
  /* cloud strong at the top, washed almost to white through the main body
     of the page, then strong again at the foot (v0.57.0). The white-ish
     gradient is one layer sized to the whole page; the cloud tiles beneath. */
  background-image:
    linear-gradient(to bottom,
      rgba(240,246,252,0)   0,
      rgba(240,246,252,.55) 16%,
      rgba(240,246,252,.88) 40%,
      rgba(240,246,252,.88) 60%,
      rgba(240,246,252,.55) 84%,
      rgba(240,246,252,0)   100%),
    url('assets/cloud-bg.jpg');
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 300px 300px;
  background-position: 0 0, 0 0;
}

/* toolbar additions: rate note + reference search */
.jbf-archive-tools{ display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.jbf-rate-note{
  font-family: var(--font-mono, monospace);
  font-size: .78rem; letter-spacing: .04em;
  color: var(--ink-soft, #5a6a72);
  white-space: nowrap;
}
.jbf-ref-search{
  display: inline-flex; align-items: center;
  border: 1px solid var(--line, #d8d4cb); border-radius: 999px;
  background: #fff; overflow: hidden;
}
.jbf-ref-search input{
  border: 0; outline: 0; background: transparent;
  padding: .45rem .2rem .45rem .85rem;
  font-size: .85rem; width: 11.5em;
  text-transform: uppercase;
}
.jbf-ref-search .jbf-ref-go{
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.25rem; line-height: 1; padding: .3rem .7rem .4rem .4rem;
  color: var(--blue, #2c4a55);
}
.jbf-ref-search .jbf-ref-go:hover{ color: var(--ink, #1d2b31); }

/* reference-not-found notice on the archive */
.jbf-ref-missing{
  margin: 0 0 1.2rem; padding: .8rem 1rem;
  background: #fff8e6; border: 1px solid #eadfbc; border-radius: 8px;
  font-size: .92rem;
}

@media (max-width: 720px){
  .jbf-town-tools{ margin: .5rem 0 .75rem; }
  .jbf-ref-search input{ width: 9.5em; }
}

/* ================================================================
   v0.57.0 — harmonising Jean's brand cues with the theme. Surfaces
   go crisp white (cards were already white; the beige limestone
   bands/tiles are lifted to white); the header deepens to a richer
   navy that flatters the yellow/red logo; and the logo sits in a
   white plaque so it reads as a framed nameplate, not pasted on.
   The cloud-background fade lives with the body rule above.
   ================================================================ */

:root{
  --paper:      #FFFFFF;   /* was #FAF9F6 — crisp white surfaces + light text */
  --shutter-dk: #213B4A;   /* was #2E464F — deeper navy; complements the logo */
}

/* beige (limestone) bands + tiles → white. Cards (.jbf-row) are already
   #fff; small chips/badges/hovers keep the limestone tint so they stay
   legible on the now-white surfaces. */
.jbf-how-item{ background: #fff; }
.jbf-howwork{ background: transparent; }
.jbf-consent{ background: #fff; }

/* --- logo: Jean's new self-framed design (blue-gradient badge baked into
   the image); the theme just displays it cleanly, no CSS frame. (v0.60) --- */
.jbf-logo{ display: inline-flex; align-items: center; }
.jbf-logo-img{ height: 40px; width: auto; box-shadow: 0 1px 5px -2px rgba(0,0,0,.3); }
@media (min-width: 900px){ .jbf-logo-img{ height: 46px; } }

/* ================================================================
   v0.58.0 — logo style A (pale-blue square badge, above); register
   form gains land-size range, gîte count and a water group, and
   loses the free-text "anything else" field.
   ================================================================ */
.jbf-range{ display: inline-flex; align-items: center; gap: .4rem; }
.jbf-range input{ width: 100%; min-width: 0; }
.jbf-range-sep{ color: var(--ink-soft); }

/* ================================================================
   v0.59.0 — toolbars unified (count + rate + reference) across
   archive/region/town, reference search is a larger pill pinned
   right, duplicate sort removed; town pages get a sage cloud
   background with the same fade; region bar becomes a "Regions"
   dropdown on mobile; logo re-framed (blue frame / white trim).
   ================================================================ */

/* reference search: bigger pill, pinned to the far right of the tools line */
.jbf-archive-tools .jbf-ref-search{ margin-left: auto; }
.jbf-ref-search input{ width: 15.5em; padding: .55rem .3rem .55rem 1rem; }
.jbf-ref-search .jbf-ref-go{ font-size: 1.4rem; padding: .4rem .9rem .5rem .4rem; }

/* town pages: sage cloud texture, same top/bottom-strong wash as home/region */
body.jbf-stage-town{
  background-color: #eef2ea;
  background-image:
    linear-gradient(to bottom,
      rgba(238,242,234,0)   0,
      rgba(238,242,234,.55) 16%,
      rgba(238,242,234,.88) 40%,
      rgba(238,242,234,.88) 60%,
      rgba(238,242,234,.55) 84%,
      rgba(238,242,234,0)   100%),
    url('assets/cloud-sage.jpg');
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, 300px 300px;
  background-position: 0 0, 0 0;
}

/* region bar: inline pills on desktop; a compact "Regions" dropdown on mobile */
.jbf-region-bar-inner{ display: flex; }
.jbf-region-toggle{ display: none; }
.jbf-region-links{ display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

@media (max-width: 720px){
  .jbf-region-bar-inner{ justify-content: flex-start; flex-wrap: wrap; }
  .jbf-region-toggle{
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--body); font-size: .82rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--paper);
    padding: .55rem 0;
  }
  .jbf-region-caret{ transition: transform .18s ease; }
  .jbf-region-toggle[aria-expanded="true"] .jbf-region-caret{ transform: rotate(90deg); }
  .jbf-region-links{ display: none; width: 100%; flex-direction: column; }
  .jbf-region-links.is-open{ display: flex; padding-bottom: .55rem; }
}

/* ================================================================
   v0.60.0 — Jean's new self-framed logo (displayed clean); region
   pills re-spaced (gap restored); breathing room between the
   count/rate/reference line and the filter bar beneath it.
   ================================================================ */
.jbf-archive-tools{ margin-bottom: 1.1rem; }

/* ================================================================
   v0.61.0 — newest self-framed logo (logo-jb3.png); reference
   search added to the hero, under the buttons.
   ================================================================ */
.jbf-hero-search{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .6rem .85rem; margin-top: 1.15rem;
}
.jbf-hero-search-label{
  color: var(--paper); font-size: .85rem; opacity: .92;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
/* the pill sits on the dark hero photo — keep it crisp white */
.jbf-hero-search .jbf-ref-search{ box-shadow: 0 2px 8px -2px rgba(0,0,0,.35); }

/* ================================================================
   v0.62.0 — region/town page titles lifted into a white box so they
   read as titles against the textured background; reference search
   moved from the hero to under the region list on the home map;
   logo reverted to the blue-border version (header.php).
   ================================================================ */
body.jbf-stage-region .jbf-archive-title,
body.jbf-stage-town .jbf-archive-title{
  display: inline-block;
  background: #fff;
  padding: .3rem 1rem .4rem;
  border-radius: 6px;
  box-shadow: 0 1px 6px -2px rgba(0,0,0,.18);
}

/* reference search under the region list on the home map */
.jbf-map-search{
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .75rem; margin: 1.1rem 0 0;
}
.jbf-map-search-label{ font-size: .82rem; color: var(--ink-soft); }

/* ================================================================
   v0.63.0 — region name labels on the homepage France map; town
   dots on the region/NA maps show the town name in a small white
   box above the dot on hover (avoids permanent-label overlap);
   About/Register/Contact templates made assignable (Template Name).
   ================================================================ */

/* region labels on the France map */
.jbf-map-label{
  fill: #fff;
  font-family: var(--head, Georgia, 'Times New Roman', serif);
  font-size: 11px; font-weight: 600; letter-spacing: .01em;
  pointer-events: none;
}
.jbf-map-label-sub{ font-size: 8px; font-weight: 500; }

/* town-dot hover tooltip on the region/NA maps */
.jbf-rmap{ position: relative; }
.jbf-rmap-tip{
  position: absolute; z-index: 5; left: 0; top: 0;
  transform: translate(-50%, calc(-100% - 9px));
  background: #fff; color: var(--ink, #262b2c);
  font-size: .78rem; line-height: 1; white-space: nowrap;
  padding: .35rem .6rem; border-radius: 5px;
  box-shadow: 0 3px 10px -2px rgba(0,0,0,.32);
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.jbf-rmap-tip::after{
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #fff;
}
.jbf-rmap-tip.is-shown{ opacity: 1; }

/* ================================================================
   v0.65.0 — Jean's confirmed batch: 5 region nav buttons + new
   homepage lede; two-way exchange rate under the property price;
   gallery lightbox is now a single vertical scroll of every photo
   (opens at the clicked one) instead of a flick-through.
   ================================================================ */

/* two-way rate under the price */
.jbf-price-rate{
  display: block; margin-top: .3rem;
  font-family: var(--font-mono, monospace);
  font-size: .72rem; letter-spacing: .02em;
  color: var(--ink-soft, #5c6466); white-space: nowrap;
}

/* lightbox: vertical scroll of all photos */
.jbf-lb-scroll{
  position: absolute; inset: 3.2rem 0 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; align-items: center;
  gap: .75rem; padding: .75rem 1rem 2rem;
  scroll-behavior: smooth;
}
.jbf-lb-item{
  max-width: min(1100px, 100%); width: auto; height: auto;
  border-radius: 4px; box-shadow: 0 6px 20px -8px rgba(0,0,0,.5);
}

/* ================================================================
   v0.66.0 — curated strips: "Properties of the week" (region + town
   pages) and "Bargain properties" (region pages), hand-picked via the
   ACF toggles, shown between the map and the listing. Reuses the
   carousel card in a horizontal scroll (native swipe, no arrows).
   Gîte filter slot added to the filter bars (needs its FacetWP facet).
   ================================================================ */
.jbf-curated{ margin: 1.5rem 0 2rem; }
.jbf-curated-title{ margin: 0 0 .9rem; }
.jbf-curated .jbf-carousel{ overflow: visible; }
.jbf-curated-carousel .jbf-carousel-track{
  display: flex; gap: 1.1rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: .25rem .25rem 1rem; margin: 0; list-style: none;
}
.jbf-curated-carousel .jbf-carousel-item{
  scroll-snap-align: start;
  flex: 0 0 clamp(240px, 78%, 300px);
}
@media (min-width: 900px){
  .jbf-curated-carousel .jbf-carousel-item{ flex-basis: 300px; }
}
/* a subtle tint so the "Bargain" strip reads as its own thing */
.jbf-curated--bargain .jbf-curated-title::before{
  content: ""; display: inline-block; width: .6rem; height: .6rem;
  margin-right: .5rem; border-radius: 2px; background: var(--brass, #9c7a3c);
  transform: translateY(-1px);
}

/* ================================================================
   v0.67.0 — homepage map: the region list + reference search now
   share the right column (.jbf-map-side) instead of the search
   dropping into a new grid row under the map, which left a big gap
   before the "quick filters" section.
   ================================================================ */
.jbf-map-side{ display: flex; flex-direction: column; gap: 1rem; }
.jbf-map-side .jbf-map-search{ margin-top: .25rem; }

/* ================================================================
   v0.68.0 — region browse quick-links (option 1): condition + price
   band tiles that deep-link into the filtered archive. The curated
   "Properties of the week" / "Bargains" strips stay as they are.
   ================================================================ */
.jbf-browse{ margin: 1.5rem 0 2rem; }
.jbf-browse-title{ margin: 0 0 .9rem; }
.jbf-browse-grid{
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.jbf-browse-tile{
  display: block; padding: .7rem .9rem;
  background: #fff; border: 1px solid var(--hairline, #d8d3c8);
  border-radius: 6px; text-decoration: none;
  color: var(--shutter-dk, #213b4a);
  font-size: .9rem; line-height: 1.25;
  transition: border-color .15s ease, background .15s ease;
}
.jbf-browse-tile:hover{
  background: var(--limestone, #eeebe3);
  border-color: var(--shutter, #4a6670);
}
/* condition tiles get a brass edge so they read as their own group */
.jbf-browse-tile--cond{
  border-left: 3px solid var(--brass, #9c7a3c);
  font-weight: 600;
}

/* ================================================================
   v0.69.0 — region pages: the property strips + 12 browse tiles are
   replaced by two quick-link tiles (Properties of the week, Bargains)
   pointing at Jean's legacy browse URLs; price/condition browsing now
   lives in Advanced Search. Homepage map labels nudged; Normandy list
   name updated to the new region title.
   ================================================================ */
.jbf-quicklinks{
  display: grid; gap: .75rem; margin: 1.4rem 0 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.jbf-quicklink{
  display: flex; align-items: center; justify-content: center;
  text-align: center; min-height: 3.8rem;
  padding: .95rem 1.1rem;
  background: var(--shutter-dk, #213b4a); color: #fff;
  border-radius: 8px; text-decoration: none;
  font-family: var(--display, Georgia, serif); font-size: 1.3rem; font-weight: 600;
  transition: background .15s ease, transform .12s ease;
}
.jbf-quicklink:hover{ background: var(--shutter, #4a6670); transform: translateY(-1px); }
.jbf-quicklink--bargain{ background: var(--brass, #9c7a3c); }
.jbf-quicklink--bargain:hover{ background: #b08f4f; }

/* ================================================================
   v0.72.0 — curated views actually filter: the bargain /
   property_of_week facets are rendered hidden on the archive so
   their URL variables apply, and those views get their own titles.
   NA sub-area labels on the homepage map; Brittany/Normandy labels
   nudged once more; bridge department added to the Normandy
   region-page map (region-maps.json).
   ================================================================ */
.jbf-hidden-facets{ display: none !important; }
.jbf-map-sublabel{
  fill: #fff; opacity: .85;
  font-family: var(--body, 'Inter', sans-serif);
  font-size: 8px; font-weight: 500; letter-spacing: .03em;
  pointer-events: none;
}

/* ================================================================
   v0.74.0 — NA-page map labels match the homepage visually (that
   map's viewBox is ~1.7x taller, so the shared 11px renders small);
   scale them up on that map only.
   ================================================================ */
.jbf-na-chooser .jbf-map-label{ font-size: 19px; }

/* ================================================================
   v0.75.0 — Nouvelle-Aquitaine page map: bring the four area labels
   up to the homepage map's visual size. That map's viewBox is much
   taller (600x962 vs 600x558) so the shared 11px reads tiny; scope a
   larger size to this map only.
   ================================================================ */
.jbf-na-chooser .jbf-map-label{ font-size: 19px; }

/* ================================================================
   v0.76.0 — WPML language switcher in the header actions. Compact,
   flags-only (code kept for screen readers), active flag ringed.
   Renders only when WPML is active (header.php guards it).
   ================================================================ */
.jbf-langs{
  display: flex; align-items: center; gap: .45rem;
  list-style: none; margin: 0 .15rem 0 0; padding: 0;
}
.jbf-lang a{
  display: block; line-height: 0; border-radius: 2px;
  opacity: .5; transition: opacity .15s ease, box-shadow .15s ease;
}
.jbf-lang a:hover, .jbf-lang a:focus-visible{ opacity: 1; }
.jbf-lang.is-active a{ opacity: 1; box-shadow: 0 0 0 1.5px var(--paper, #fff); }
.jbf-lang-flag{ display: block; width: 20px; height: auto; border-radius: 2px; }
.jbf-lang-code{
  position: absolute !important; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* on mobile the switcher sits in the opened menu with the phone + CTA */
@media (max-width: 720px){
  .jbf-langs{ margin: .2rem 0 .4rem; gap: .6rem; }
  .jbf-lang-flag{ width: 24px; }
}

/* =========================================================================
   v0.80.0 — no CSS changes (follows v0.79.0).
   PHP only this release: property-title i18n + barn-as-outbuilding fix
   (inc/seo.php), card "1 bed / 4 bedrooms" wording (content-property-card.php),
   facet option labels translated at render (inc/archive.php), IFP feed
   features mapped by legacy ID (inc/ifp-feed.php).
   ========================================================================= */

/* v0.80.0 — PHP only: split the bed-count property title into distinct
   singular ("1 bed ...") and plural ("%d bed ...") strings in inc/seo.php so
   WPML String Translation lists each as its own entry (the identical-form _n
   collapsed to a single box). No other changes since v0.79.0. */

/* =========================================================================
   v0.81.0 — MOBILE: language switcher moved into the top header bar (was in
   the burger menu). The switcher is rendered twice by header.php via
   jbf_language_switcher(); this CSS shows the .jbf-langs--bar copy on mobile
   and keeps the actions-block copy on desktop, so only one is ever visible
   and the desktop header is unchanged. Burger breakpoint is 899px.
   ========================================================================= */
.jbf-langs--bar{ display:none; }            /* desktop: hidden; actions copy shows */
@media (max-width:899px){
  .jbf-langs--bar{ display:flex; margin:0 .15rem 0 auto; }  /* sit right, next to burger */
  .jbf-header-actions .jbf-langs{ display:none; }           /* drop the in-menu copy */
}

/* =========================================================================
   v0.82.0 — FOOTER: rebuilt into four columns with no repeated links (was
   showing About + "About us" and Contact twice via a menu-fallback column),
   region list refreshed to the confirmed 5-set, text wordmark replaced with
   the logo image, and the em dash removed from the tagline.
   ========================================================================= */
.jbf-footer-logo{ display:inline-block; line-height:0; margin:0 0 .85rem; }
.jbf-footer-logo img{ height:48px; width:auto; display:block; }

/* v0.83.0 — homepage: quick-filters section title changed to "Quick filters"
   and its eyebrow removed (front-page.php); NA region map count 25 -> 31 a
   week so the three regions total the advertised 60 (home-map.php). No CSS. */

/* v0.84.0 — IFP feed: a ticked Gite feature now surfaces as a 'gite' entry in
   attributes.types (IFP classes gite as a type, not a feature), so gites are
   no longer dropped from the feed. inc/ifp-feed.php only. No CSS. */