/* ============================================================================
   Fixitezy — public website theme (modernised brand: forest green + orange + cream)
   ==========================================================================*/
:root{
  /* Brand: logo navy + white (orange kept as the logo's accent) */
  --green:#0d2443;      /* primary navy — the logo background blue */
  --green-2:#17395f;    /* lighter navy / hover */
  --green-d:#081a33;    /* deep navy */
  --orange:#f47a20; --orange-d:#dd6712;
  --cream:#eef3f9;      /* soft blue-tinted section surface */
  --cream-2:#ffffff;    /* page background: white */
  --paper:#ffffff;
  --ink:#16233a; --muted:#5b6b82; --line:#dde5ee;
  --shadow:0 10px 34px rgba(13,36,67,.10); --shadow-sm:0 4px 16px rgba(13,36,67,.07);
  /* The banner scrim: one blue gradient over every uploaded banner picture,
     so all three slides tint their photo identically and the wording keeps the
     same contrast whatever is uploaded. */
  --hero-scrim:linear-gradient(100deg,rgba(8,20,38,.93) 0%,rgba(8,20,38,.80) 42%,rgba(8,20,38,.42) 100%);
  --r:16px; --r-sm:10px; --maxw:1200px;
}
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{scroll-behavior:smooth}
/* `clip` (not `hidden`) — overflow-x:hidden on a scrolling ancestor silently
   disables position:sticky, which stopped the mobile header from sticking.
   `clip` prevents sideways scroll without creating a scroll container. */
html,body{overflow-x:clip;max-width:100%}
body{font-family:'Inter',system-ui,Arial,sans-serif;color:var(--ink);background:var(--cream-2);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display{font-family:'Sora',sans-serif;color:var(--green);line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:76px 0}
.eyebrow{display:inline-block;font-family:'Sora';font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.sec-head{max-width:640px;margin:0 auto 40px;text-align:center}
.sec-head.left{margin-left:0;text-align:left}
.sec-head h2{font-size:clamp(26px,3.4vw,40px);font-weight:800}
.sec-head p{color:var(--muted);margin-top:10px;font-size:16px}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:'Sora';font-weight:600;font-size:15px;padding:13px 24px;border-radius:999px;border:0;cursor:pointer;transition:.18s;white-space:nowrap}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-2);transform:translateY(-1px)}
.btn-accent{background:var(--orange);color:#fff}
.btn-accent:hover{background:var(--orange-d);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--green);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--green);background:#fff}
.btn-wa{background:#25D366;color:#fff}
.btn-block{width:100%;justify-content:center}

/* ---- header ---- */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.90);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand img{height:60px;width:auto}
.main-nav{display:flex;align-items:center;gap:6px}
.main-nav a{font-weight:600;font-size:15px;color:var(--ink);padding:9px 14px;border-radius:999px;transition:.15s}
.main-nav a:hover{color:var(--green)}
.main-nav a.active{color:var(--green);background:rgba(13,36,67,.08)}
.main-nav .nav-cta{background:var(--green);color:#fff;margin-left:8px}
.main-nav .nav-cta:hover{background:var(--green-2);color:#fff}
.nav-toggle{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2.5px;background:var(--green);border-radius:2px;transition:.2s}

/* ---- hero ---- */
.hero{position:relative;background:var(--cream);overflow:hidden}
.hero:before{content:"";position:absolute;right:-8%;top:-30%;width:52%;height:150%;background:radial-gradient(circle at 60% 40%,rgba(244,122,32,.14),transparent 60%)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-top:64px;padding-bottom:76px;position:relative}
.hero h1{font-size:clamp(34px,4.6vw,58px);font-weight:800}
.hero h1 .hl{color:var(--orange)}
.hero .lede{color:var(--muted);font-size:18px;margin:18px 0 8px;max-width:520px}
.hero-badges{display:flex;gap:22px;margin-top:26px;flex-wrap:wrap}
.hero-badges .b{display:flex;flex-direction:column}
.hero-badges .b b{font-family:'Sora';font-size:24px;color:var(--green);font-weight:800}
.hero-badges .b span{font-size:13px;color:var(--muted)}
.hero-art{position:relative}
.hero-art img{border-radius:22px;box-shadow:var(--shadow);width:100%;height:440px;object-fit:cover}
.hero-art .float{position:absolute;left:-18px;bottom:22px;background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px 18px;display:flex;align-items:center;gap:12px}
.hero-art .float i{color:var(--orange);font-size:20px}
.hero-art .float b{font-family:'Sora';color:var(--green)}
.hero-art .float span{display:block;font-size:12px;color:var(--muted)}

/* ---- search bar ---- */
.searchbar{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:14px;margin-top:30px;position:relative;z-index:5}
.search-tabs{display:flex;gap:6px;margin-bottom:12px}
.search-tabs button{font-family:'Sora';font-weight:600;font-size:14px;border:0;background:var(--cream);color:var(--muted);padding:9px 20px;border-radius:999px;cursor:pointer}
.search-tabs button.on{background:var(--green);color:#fff}
/* row 1: location | type | bedrooms   ·   row 2: budget from | budget to | search */
.search-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.budget-inputs{display:flex;gap:6px}
.budget-inputs input{flex:1 1 0;min-width:0}
.budget-inputs select{flex:1.2 1 0;min-width:0}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.field select,.field input{width:100%;max-width:100%;border:1px solid var(--line);background:var(--cream-2);border-radius:var(--r-sm);padding:12px 12px;font-size:15px;font-family:inherit;color:var(--ink);text-overflow:ellipsis}
.field select:focus,.field input:focus{outline:none;border-color:var(--green);background:#fff}
.search-fields .go{align-self:end}
.search-fields .go .btn{height:46px}

/* ---- hot property tabs ---- */
.hot-tabs{display:flex;justify-content:center;gap:8px;margin:-18px 0 28px}
.hot-tabs button{font-family:'Sora';font-weight:600;font-size:14px;border:1.5px solid var(--line);background:#fff;color:var(--muted);padding:10px 26px;border-radius:999px;cursor:pointer;transition:.18s}
.hot-tabs button:hover{border-color:var(--green);color:var(--green)}
.hot-tabs button.on{background:var(--green);color:#fff;border-color:var(--green)}
/* :not(.on) has 2-class specificity so it beats the later `.cards{display:grid}`
   rule — without it both panes stayed visible and the Rent/Sale tabs did nothing. */
.hot-pane:not(.on){display:none}
.hot-pane.on{display:grid}

/* ---- property cards ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s;display:flex;flex-direction:column}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.pcard .thumb{position:relative;aspect-ratio:16/11;background:linear-gradient(135deg,#e8eef6,#f2f6fb);overflow:hidden}
.pcard .thumb img{width:100%;height:100%;object-fit:cover}
.pcard .thumb.ph{display:flex;align-items:center;justify-content:center}
.pcard .thumb.ph img{width:58%;height:auto;object-fit:contain;opacity:.5}
.pcard .tag{position:absolute;top:12px;left:12px;background:var(--green);color:#fff;font-family:'Sora';font-weight:600;font-size:12px;padding:5px 12px;border-radius:999px}
.pcard .tag.hot{background:var(--orange)}
.pcard .tag.purpose{left:auto;right:12px;background:rgba(13,36,67,.86)}
.pcard .body{padding:16px 17px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .price{font-family:'Sora';font-weight:800;color:var(--green);font-size:20px}
.pcard .ptitle{font-family:'Sora';font-weight:600;font-size:16px;color:var(--ink);line-height:1.3}
.pcard .loc{color:var(--muted);font-size:13.5px;display:flex;align-items:center;gap:6px}
.pcard .loc i{color:var(--orange)}
.pcard .facts{display:flex;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:auto;padding-top:12px;font-size:13px;color:var(--muted)}
.pcard .facts span{display:inline-flex;align-items:center;gap:6px}
.pcard .facts i{color:var(--green-2)}
.pcard .cta{margin-top:12px;display:flex;gap:8px}
.pcard .cta .btn{flex:1;justify-content:center;padding:10px;font-size:14px}

/* ---- listings layout ---- */
.list-head{background:var(--green);color:#fff;padding:40px 0 30px}
.list-head h1{color:#fff;font-size:clamp(26px,3.4vw,38px)}
.list-head p{color:rgba(255,255,255,.8);margin-top:6px}
/* Two rows so the ads can sit under the filters in the left column while the
   results span both. On a phone the areas re-stack and the ads drop below the
   listings — see the 900px block further down.

   grid-template-rows matters: with both rows on "auto", the tall .results
   spanning them has its extra height shared between the two, which inflated
   the filters row and left a large empty gap above the ads. Making row 2
   flexible means the spanning item is skipped when sizing row 1, so row 1 is
   exactly as tall as the filter box and the ads start right underneath it. */
.list-layout{display:grid;grid-template-columns:290px 1fr;grid-template-areas:"filters results" "ads results";grid-template-rows:auto 1fr;gap:28px;padding-top:30px;padding-bottom:70px;align-items:start}
.list-layout>aside{grid-area:filters}
.list-layout>.results{grid-area:results}
.list-layout>.side-ads{grid-area:ads}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;position:sticky;top:90px}
.filters h3{font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.filters .field{margin-bottom:14px}
.filters .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.results-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px}
.results-top .count{font-family:'Sora';font-weight:600;color:var(--green)}
.results .cards{grid-template-columns:repeat(2,1fr)}
.empty{background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:50px 20px;text-align:center;color:var(--muted)}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.pager a,.pager b{min-width:40px;text-align:center;padding:9px 12px;border:1px solid var(--line);border-radius:10px;font-weight:600;font-size:14px;color:var(--ink);background:#fff}
.pager b{background:var(--green);color:#fff;border-color:var(--green)}
.pager a:hover{border-color:var(--green)}

/* ---- property detail ---- */
.detail-head{padding-top:26px;padding-bottom:0}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--green)}
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.gallery .main{height:440px;border-radius:var(--r);overflow:hidden;background:#e8eef6;min-width:0}
.gallery .main img{width:100%;height:100%;object-fit:cover;display:block}
.gallery .main.ph{display:flex;align-items:center;justify-content:center}
.gallery .main.ph img{width:40%;height:auto;opacity:.5;object-fit:contain}
.gallery .side{display:grid;grid-template-rows:214px 214px;gap:12px;min-width:0}
.gallery .side img,.gallery .side>div{width:100%;height:214px;object-fit:cover;border-radius:var(--r);overflow:hidden}
.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:34px;padding-top:28px;padding-bottom:70px;align-items:start}
.d-title{font-size:clamp(24px,3vw,34px);font-weight:800}
.d-loc{color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:8px}
.d-loc i{color:var(--orange)}
.d-price{font-family:'Sora';font-weight:800;color:var(--green);font-size:30px;margin:16px 0}
.d-price small{font-size:14px;color:var(--muted);font-weight:500}
.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}
.keyfacts .kf{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;display:flex;gap:12px;align-items:center}
.keyfacts .kf i{font-size:20px;color:var(--orange);width:26px;text-align:center}
.keyfacts .kf b{font-family:'Sora';display:block;color:var(--green);font-size:15px}
.keyfacts .kf span{font-size:12px;color:var(--muted)}
.d-block{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:20px}
.d-block h3{font-size:18px;margin-bottom:12px}
.feature-chips{display:flex;flex-wrap:wrap;gap:9px}
.feature-chips span{background:var(--cream);border:1px solid var(--line);color:var(--green);font-size:13px;font-weight:500;padding:7px 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.feature-chips i{color:var(--orange)}
.enquiry{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px}
.enquiry h3{font-size:19px}
.enquiry .sub{color:var(--muted);font-size:14px;margin:2px 0}
.enquiry .sub:last-of-type{margin-bottom:16px}
/* Posted-on continues the Ref line in the SAME plain style (not bold/highlighted) */
.enquiry .sub .posted{color:inherit;font-weight:inherit;font-size:inherit}
.enquiry .field{margin-bottom:12px}
.enquiry textarea{width:100%;border:1px solid var(--line);background:var(--cream-2);border-radius:var(--r-sm);padding:12px;font-family:inherit;font-size:15px;min-height:90px;resize:vertical}
.enquiry .field input{width:100%;border:1px solid var(--line);background:var(--cream-2);border-radius:var(--r-sm);padding:12px;font-size:15px;font-family:inherit}
.enquiry .field input:focus,.enquiry textarea:focus{outline:none;border-color:var(--green);background:#fff}
.enq-alt{text-align:center;color:var(--muted);font-size:13px;margin-top:14px}
/* Approximate-location map, under the enquiry form in the detail sidebar.
   The form alone used to be the sticky element; with a sibling below it the
   map scrolled up OVER the stuck form. Stick the whole sidebar instead, so the
   form and map travel together. */
.detail-grid>aside{position:sticky;top:90px}
.detail-grid>aside .enquiry{position:static;top:auto}
.d-map{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.d-map h3{font-size:17px;margin:0 0 12px}
.d-map-frame{position:relative;aspect-ratio:4/3;min-height:220px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);background:var(--cream-2)}
.d-map-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;display:block}
.d-map-note{color:var(--muted);font-size:12.5px;line-height:1.5;margin:10px 0 0}
.d-map-note a{color:var(--green);font-weight:600;white-space:nowrap}
.flash{padding:14px 16px;border-radius:var(--r-sm);font-weight:600;margin-bottom:16px}
.flash.ok{background:#e6f4ea;color:#1a7f37;border:1px solid #b7dfc2}
.flash.err{background:#fdecea;color:#c0392b;border:1px solid #f5c6c0}

/* ---- generic sections ---- */
.band{background:var(--green);color:#fff}
.band .display{color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stats .s b{font-family:'Sora';font-size:clamp(30px,4vw,46px);font-weight:800;color:#fff;display:block}
.stats .s span{color:rgba(255,255,255,.75);font-size:14px}
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;box-shadow:var(--shadow-sm);transition:.2s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc .ico{width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px}
.svc h3{font-size:19px;margin-bottom:8px}
.svc p{color:var(--muted);font-size:14.5px}
/* The card text is written in the CRM editor, so it arrives as paragraphs that
   may carry their own colour or alignment. It reads like .svc p by default and
   the editor's own choices sit on top. */
.svc .rich{color:var(--muted);font-size:14.5px}
.svc .rich p{color:inherit;font-size:inherit}
/* The only service on the Property Management page: left-aligned, roomier. */
.svc-solo{text-align:left;padding:32px}
.svc-solo h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px;line-height:1.25}
.svc-solo .rich{font-size:16px;line-height:1.75;color:var(--muted)}
.svc-solo:hover{transform:none}

/* Rich text written with the content toolbar: real paragraph spacing, and the
   formatting the editor allows (bold, colour, links, lists, inline pictures). */
.rich>p{margin:0 0 14px}
.rich>p:last-child{margin-bottom:0}
.rich ul,.rich ol{margin:0 0 14px 22px}
.rich li{margin-bottom:6px}
.rich a{color:var(--green);font-weight:600;text-decoration:underline}
.rich .cms-fig{position:relative;margin:16px 0;border-radius:var(--r-sm);overflow:hidden}
.rich .cms-fig img{display:block;width:100%;height:auto}
.rich .cms-fig figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:16px;
  background:linear-gradient(to top,rgba(6,14,28,.82),rgba(6,14,28,0));
  color:#fff;font-weight:700;text-align:center}
.sec-head .rich{color:var(--muted);margin-top:10px;font-size:16px}
.cta-band .rich{color:rgba(255,255,255,.9)}
.cta-band .rich a{color:#fff}
.page-hero .rich{max-width:60ch}
/* pictures of the services, under the How it works steps */
.how-shots{margin-top:34px}

/* ---- managed image slider (Property Management + Ongoing Projects) ---- */
.fx-slider{position:relative}
.fx-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px;
  scrollbar-width:none;-ms-overflow-style:none}
.fx-track::-webkit-scrollbar{display:none}
.fx-track:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:var(--r)}
.fx-slide{scroll-snap-align:start;margin:0;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.fx-shot{display:block;padding:0;border:0;background:var(--cream-2);cursor:zoom-in;width:100%}
.fx-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .25s}
.fx-slide:hover .fx-shot img{transform:scale(1.03)}
/* Captions read as titles for the picture: bold and centred. */
.fx-slide figcaption{padding:14px 16px;color:var(--ink);font-size:14.5px;line-height:1.5;font-weight:700;text-align:center}
.fx-slide figcaption p{margin:0 0 8px;font-weight:inherit}
.fx-slide figcaption p:last-child{margin-bottom:0}
.fx-slide figcaption a{color:var(--green);text-decoration:underline}
/* Ongoing Projects carry a paragraph of detail, so those are justified. */
.fx-justify .fx-slide figcaption{text-align:justify;hyphens:auto}
.fx-justify .fx-slide figcaption p:first-child{font-weight:700;text-align:center}
.fx-nav{position:absolute;top:calc(50% - 34px);transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
  cursor:pointer;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:16px;transition:.15s}
.fx-nav:hover{background:var(--green);color:#fff;border-color:var(--green)}
.fx-nav.prev{left:-14px} .fx-nav.next{right:-14px}
.fx-nav.off{opacity:.35;pointer-events:none}
/* lightbox */
.fx-lb{position:fixed;inset:0;z-index:9999;background:rgba(6,14,28,.94);
  display:flex;align-items:center;justify-content:center;flex-direction:column;padding:24px}
.fx-lb[hidden]{display:none}
.fx-lb img{max-width:92vw;max-height:78vh;border-radius:8px;object-fit:contain}
.fx-lb p{color:#fff;margin-top:16px;font-size:15px;text-align:center;max-width:70ch}
.fx-lb-x{position:absolute;top:16px;right:22px;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer}
.fx-lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;
  color:#fff;width:52px;height:52px;border-radius:50%;font-size:20px;cursor:pointer}
.fx-lb-nav:hover{background:rgba(255,255,255,.25)}
.fx-lb-nav.prev{left:14px} .fx-lb-nav.next{right:14px}
@media(max-width:900px){
  .fx-track{grid-auto-columns:calc((100% - 20px)/2);gap:20px}
  .fx-nav.prev{left:-6px} .fx-nav.next{right:-6px}
}
@media(max-width:600px){
  /* One thumbnail fills the screen on a phone — 88% left the next card poking
     in at the edge, which read as a cut-off picture rather than a hint. */
  .fx-track{grid-auto-columns:100%;gap:14px}
  .fx-nav{width:38px;height:38px}
  .svc-solo{padding:24px 20px}
}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:step}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 18px 20px}
.step:before{counter-increment:step;content:counter(step);position:absolute;top:-16px;left:20px;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font-family:'Sora';font-weight:700;display:flex;align-items:center;justify-content:center}
.step p{color:var(--muted);font-size:14px;margin-top:6px}
.chips-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.chips-row .c{background:#fff;border:1px solid var(--line);border-radius:999px;padding:11px 18px;font-weight:600;color:var(--green);display:flex;align-items:center;gap:9px;font-size:14px}
.chips-row .c i{color:var(--orange)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.quote .stars{color:var(--orange);margin-bottom:10px}
.quote p{color:var(--muted);font-size:14.5px}
.quote .who{font-family:'Sora';font-weight:700;color:var(--green);margin-top:14px}
.team{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.member{text-align:center}
.member .av{aspect-ratio:1;border-radius:20px;background:linear-gradient(135deg,var(--green),var(--green-2));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Sora';font-weight:800;font-size:34px;margin-bottom:12px}
.member b{font-family:'Sora';color:var(--green);display:block}
.member span{color:var(--muted);font-size:13px}
.cta-band{background:linear-gradient(120deg,var(--green),var(--green-2));border-radius:24px;padding:44px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta-band h2{color:#fff;font-size:clamp(24px,3vw,34px)}
.cta-band p{color:rgba(255,255,255,.82);margin-top:6px;max-width:520px}

.page-hero{background:var(--green);color:#fff;padding:56px 0}
.page-hero h1{color:#fff;font-size:clamp(30px,4vw,46px)}
.page-hero p{color:rgba(255,255,255,.8);margin-top:10px;max-width:640px}
.prose{max-width:820px;margin:0 auto}
.prose p{color:var(--muted);margin-bottom:16px;font-size:16.5px}
.info-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.info-cards .ic-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.info-cards .ic-card i{font-size:24px;color:var(--orange);margin-bottom:10px}
.info-cards .ic-card h4{margin-bottom:6px}
.info-cards .ic-card a{color:var(--green);font-weight:600}

/* ---- footer ---- */
.site-footer{background:var(--green-d);color:#c9d6e6;margin-top:20px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:34px;padding-top:56px;padding-bottom:40px}
.footer-logo{height:58px;background:#fff;padding:8px 12px;border-radius:10px;width:auto}
.footer-brand p{margin:16px 0;font-size:14px;color:#9fb2ca}
.footer-col h4{color:#fff;font-family:'Sora';font-size:15px;margin-bottom:14px}
.footer-col a{display:block;color:#b6c6da;font-size:14px;padding:5px 0;transition:.15s}
.footer-col a:hover{color:var(--orange)}
.footer-col .addr{font-size:13px;color:#9fb2ca;margin-top:10px}
.wa-btn{display:inline-flex;align-items:center;gap:9px;background:#25D366;color:#fff;font-weight:600;padding:10px 18px;border-radius:999px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;font-size:13px;color:#8296b0}

/* ---- responsive ---- */
@media(max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:24px}
  .hero-art{order:-1}.hero-art img{height:300px}
  .cards,.svc-cards,.quotes,.info-cards{grid-template-columns:repeat(2,1fr)}
  .results .cards{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);gap:30px}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:30px}
  .team{grid-template-columns:repeat(3,1fr)}
  /* three stacked rows here, all content-sized — reset the desktop 1fr */
  .list-layout{grid-template-columns:1fr;grid-template-areas:"filters" "results" "ads";grid-template-rows:auto auto auto}
  .filters{position:static}
  .detail-grid{grid-template-columns:1fr}
  .enquiry{position:static}
  .gallery{grid-template-columns:1fr}
  .gallery .side{grid-template-rows:auto;grid-template-columns:1fr 1fr}
  .gallery .side img,.gallery .side>div{height:150px}
  .gallery .main{height:260px}
}
@media(max-width:760px){
  .main-nav{position:fixed;inset:88px 0 auto 0;background:var(--cream-2);flex-direction:column;align-items:stretch;padding:14px 18px 22px;gap:2px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(-140%);transition:.28s;z-index:99}
  .main-nav.open{transform:translateY(0)}
  .main-nav a{padding:12px 10px}
  .main-nav .nav-cta{margin:8px 0 0;justify-content:center}
  .nav-toggle{display:flex}
  .search-fields{grid-template-columns:1fr 1fr}
  .search-fields .go{grid-column:1/-1}
  .hero h1{font-size:30px}
  .hero-badges{gap:16px}
  .section{padding:52px 0}
  .cards,.svc-cards,.quotes,.info-cards,.results .cards,.keyfacts{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .team{grid-template-columns:repeat(2,1fr)}
  .cta-band{padding:30px;text-align:center;justify-content:center}
}
@media(max-width:560px){
  .search-fields{grid-template-columns:1fr}
  .wrap{padding:0 16px}
}


/* ============================================================================
   Interactive / modern layer — image-led hero, lightbox, motion
   ==========================================================================*/

/* --- photo count chip on cards + image zoom on hover --- */
.pcard .tag.shots{left:12px;top:auto;bottom:12px;background:rgba(0,0,0,.62);font-weight:600;display:inline-flex;align-items:center;gap:5px}
.pcard .thumb img{transition:transform .55s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .thumb img{transform:scale(1.07)}
.pcard .thumb:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.30),transparent 46%);opacity:.85}
.pcard .thumb.ph:after{display:none}

/* --- image hero banner --- */
.hero-banner{position:relative;min-height:560px;display:block;overflow:hidden;background:var(--green-d)}
.hero-banner .hero-inner{position:relative;z-index:2;display:block;padding-top:70px;padding-bottom:64px}
.hero-banner h1{color:#fff;font-size:clamp(34px,4.6vw,58px);font-weight:800;max-width:16ch}
.hero-banner h1 .hl{color:var(--orange)}
.hero-banner .lede{color:rgba(255,255,255,.86);font-size:18px;margin:18px 0 6px;max-width:560px}
.hero-banner .eyebrow{color:var(--orange)}
.hero-banner .hero-badges .b b{color:#fff}
.hero-banner .hero-badges .b span{color:rgba(255,255,255,.7)}
.hero-banner .searchbar{max-width:900px}

/* --- "view all photos" + more badge --- */
.gallery{position:relative}
.view-all-btn{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.96);color:var(--green);border:0;border-radius:999px;padding:11px 20px;
  font-family:'Sora';font-weight:600;font-size:14px;cursor:pointer;box-shadow:var(--shadow);transition:.18s}
.view-all-btn:hover{background:#fff;transform:translateY(-2px)}
.gallery .main{cursor:zoom-in}
.gallery .side img{cursor:zoom-in;transition:filter .25s}
.gallery .side img:hover{filter:brightness(1.06)}
.more-wrap{position:relative;height:214px;border-radius:var(--r);overflow:hidden;cursor:zoom-in}
.more-wrap img{width:100%;height:100%;object-fit:cover}
.more-badge{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,38,.58);color:#fff;font-family:'Sora';font-weight:700;font-size:18px}

/* --- lightbox --- */
.fxlb{position:fixed;inset:0;background:rgba(6,16,32,.97);z-index:9999;display:none;align-items:center;justify-content:center}
.fxlb.open{display:flex}
.fxlb-stage{max-width:88vw;max-height:74vh;display:flex;align-items:center;justify-content:center}
.fxlb-stage img{max-width:88vw;max-height:74vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.fxlb-close{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:40px;line-height:1;cursor:pointer;opacity:.8}
.fxlb-close:hover{opacity:1}
.fxlb-count{position:absolute;top:26px;left:26px;color:#fff;font-family:'Sora';font-weight:600;font-size:14px;background:rgba(255,255,255,.14);padding:6px 14px;border-radius:999px}
.fxlb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:0;color:#fff;font-size:22px;width:50px;height:50px;border-radius:50%;cursor:pointer;transition:.2s}
.fxlb-nav:hover{background:var(--orange)}
.fxlb-nav.prev{left:22px}.fxlb-nav.next{right:22px}
.fxlb-thumbs{position:absolute;bottom:16px;left:0;right:0;display:flex;gap:8px;overflow-x:auto;padding:10px 22px;justify-content:flex-start;scrollbar-width:thin}
.fxlb-thumbs img{width:88px;height:62px;object-fit:cover;border-radius:7px;cursor:pointer;opacity:.5;border:2px solid transparent;transition:.18s;flex:0 0 auto}
.fxlb-thumbs img:hover{opacity:.85}
.fxlb-thumbs img.on{opacity:1;border-color:var(--orange)}

/* --- scroll reveal + hover lift --- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.svc,.quote,.step{transition:transform .25s,box-shadow .25s}
.svc:hover,.quote:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.btn{position:relative;overflow:hidden}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.pcard:hover .thumb img{transform:none}}

@media(max-width:980px){
  .hero-banner{min-height:auto}
  .hero-banner .hero-inner{padding-top:48px;padding-bottom:44px}
  .fxlb-thumbs img{width:64px;height:46px}
  .fxlb-nav{width:42px;height:42px;font-size:18px}
  .view-all-btn{right:12px;bottom:12px;padding:9px 15px;font-size:13px}
  .more-wrap{height:150px}
}

/* Logo presence: bigger + crisper on the white header/footer */
.brand{display:flex;align-items:center}
.brand img{border-radius:8px;transition:transform .2s}
.brand:hover img{transform:scale(1.03)}
.footer-logo{padding:10px 14px}
@media(max-width:760px){ .brand img{height:50px} .header-inner{height:76px} .main-nav{inset:76px 0 auto 0} }


/* ============================================================================
   Mobile polish — 2026-07-20
   Fixes: banner/detail side padding, 4-column footer, sticky header,
   larger logo, gallery→title spacing, header call/WhatsApp actions.
   ==========================================================================*/

/* --- Logo: larger across the board, and noticeably larger on phones --- */
.brand img{height:68px}
.header-inner{height:92px}

/* --- Header quick actions (call + WhatsApp), phone-only --- */
.header-actions{display:none;align-items:center;margin-left:auto;margin-right:10px}
.header-actions .hdr-post{display:inline-flex;align-items:center;gap:6px;
    padding:9px 14px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:700;
    background:var(--orange);color:#fff;border:0;white-space:nowrap;flex:0 0 auto}
.header-actions .hdr-post i{font-size:12px}
.header-actions .hdr-post:active{transform:scale(.96)}

@media(max-width:760px){
    /* sticky, compact, and still roomy enough for a bigger logo */
    .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);
        box-shadow:0 2px 10px rgba(13,36,67,.07)}
    .brand img{height:60px}
    .header-inner{height:84px}
    .main-nav{inset:84px 0 auto 0}
    .header-actions{display:flex}
    .nav-toggle{margin-left:0}
    /* the nav's phone CTA is redundant once the header has a call button */
    .main-nav .nav-cta{margin-top:10px}

    /* Footer: 4 columns at phone width was unreadable */
    .footer-grid{grid-template-columns:1fr 1fr;gap:26px 22px;
        padding-top:38px;padding-bottom:28px}

    /* Detail page: give the title room to breathe under the gallery */
    .detail-head{padding-top:16px}
    .gallery{margin-bottom:6px}
    .detail-grid{padding-top:26px}
    .d-title{font-size:24px;line-height:1.25}
}

@media(max-width:560px){
    /* single column — stacked and readable */
    .footer-grid{grid-template-columns:1fr;gap:24px;padding-top:34px}
    .brand img{height:56px}
    .header-inner{height:78px}
    .main-nav{inset:78px 0 auto 0}
    .header-actions .hdr-post{padding:8px 12px;font-size:13px}
    .d-title{font-size:22px}
    .detail-grid{padding-top:24px}
}

/* --- Share row on the property detail page --- */
.share-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.share-row .sbtn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;
    border-radius:10px;font-size:14px;font-weight:600;text-decoration:none;
    border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
    font-family:inherit;line-height:1}
.share-row .sbtn:hover{background:var(--cream);border-color:#c9d4e2}
.share-row .sbtn.ig{background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);
    color:#fff;border:0}
.share-row .sbtn.ig:hover{filter:brightness(1.07)}
.share-row .sbtn.wa{background:#25D366;color:#fff;border:0}
.share-row .sbtn.wa:hover{filter:brightness(1.05)}
.share-note{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.5}
@media(max-width:560px){ .share-row .sbtn{flex:1 1 100%;justify-content:center} }

/* toast used by the Instagram/copy actions */
.fx-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
    background:var(--green-d);color:#fff;padding:13px 20px;border-radius:10px;font-size:14px;
    z-index:9999;opacity:0;transition:.25s;max-width:90vw;text-align:center;pointer-events:none;
    box-shadow:0 8px 26px rgba(8,20,38,.3)}
.fx-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* Share block: third child of .detail-grid.
   Desktop — pinned to column 1 so it sits under the property details, clear of
   the sticky enquiry form. Mobile — the grid is one column, so it simply falls
   after the enquiry form in DOM order. */
.detail-share{grid-column:1;margin-top:-6px}
@media(max-width:980px){ .detail-share{grid-column:auto;margin-top:0} }

/* Overview prose */
.d-overview{color:var(--muted);font-size:15.5px;line-height:1.8;margin-bottom:12px}
.d-overview:last-child{margin-bottom:0}
.d-overview strong{color:var(--ink);font-weight:600}
.d-overview.subtle{font-size:14px;color:var(--muted);opacity:.85;
    border-top:1px solid var(--line);padding-top:12px;margin-top:14px}

/* Footer WhatsApp button.
   It lives inside .footer-col, and `.footer-col a` (0,1,1) outranks `.wa-btn`
   (0,1,0) — so the link was inheriting display:block and the muted link colour,
   rendering as a full-width bar with grey, left-aligned text on green.
   Qualifying the selector restores the intended pill. */
.footer-col a.wa-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    background:#25D366; color:#fff; font-weight:600;
    padding:11px 20px; border-radius:999px; width:auto; margin-top:4px;
    transition:background .18s, transform .18s;
}
.footer-col a.wa-btn:hover{ background:#1eb855; color:#fff; transform:translateY(-1px); }
.footer-col a.wa-btn i{ font-size:17px; line-height:1; }
@media(max-width:560px){
    /* full width reads better on a phone — but centred, not left-aligned */
    .footer-col a.wa-btn{ display:flex; width:100%; }
}

/* ---- Header "Social Media" dropdown ---- */
.main-nav .has-drop{ position:relative; display:flex; align-items:center; }
.main-nav .drop-toggle{
    font-family:inherit; font-weight:600; font-size:15px; color:var(--ink);
    padding:9px 14px; border-radius:999px; background:none; border:0; cursor:pointer;
    display:inline-flex; align-items:center; gap:7px; transition:.15s; white-space:nowrap;
}
.main-nav .drop-toggle:hover{ color:var(--green); }
.main-nav .drop-toggle i{ font-size:11px; transition:transform .2s; }
.main-nav .has-drop.open .drop-toggle{ color:var(--green); background:rgba(13,36,67,.08); }
.main-nav .has-drop.open .drop-toggle i{ transform:rotate(180deg); }

.main-nav .drop-menu{
    position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-6px);
    min-width:190px; background:#fff; border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:7px; z-index:120;
    opacity:0; visibility:hidden; transition:.18s;
}
.main-nav .has-drop.open .drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.main-nav .drop-menu a{
    display:flex; align-items:center; gap:11px; padding:10px 13px; border-radius:8px;
    font-size:14.5px; font-weight:600; color:var(--ink); white-space:nowrap;
}
.main-nav .drop-menu a:hover{ background:var(--cream); color:var(--green); }
.main-nav .drop-menu a i{ width:18px; text-align:center; font-size:16px; }
/* pointer on desktop */
.main-nav .drop-menu:before{
    content:""; position:absolute; top:-6px; left:50%; margin-left:-6px;
    width:12px; height:12px; background:#fff; border-left:1px solid var(--line);
    border-top:1px solid var(--line); transform:rotate(45deg);
}
@media(hover:hover) and (min-width:761px){
    .main-nav .has-drop:hover .drop-menu{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
    .main-nav .has-drop:hover .drop-toggle i{ transform:rotate(180deg); }
}

@media(max-width:760px){
    /* inside the stacked mobile panel it expands inline instead of floating */
    .main-nav .has-drop{ display:block; }
    .main-nav .drop-toggle{ width:100%; justify-content:space-between; padding:12px 10px; }
    .main-nav .drop-menu{
        position:static; transform:none; opacity:1; visibility:visible;
        min-width:0; border:0; box-shadow:none; padding:0 0 6px 12px;
        max-height:0; overflow:hidden; transition:max-height .25s;
    }
    .main-nav .drop-menu:before{ display:none; }
    .main-nav .has-drop.open .drop-menu{ max-height:240px; transform:none; }
}
.share-row .sbtn.fb{ background:#1877F2; color:#fff; border:0; }
.share-row .sbtn.fb:hover{ background:#0f63d4; color:#fff; }

/* ---- "Verified by Fixitezy" marks ---- */
/* listing card: sits under the HOT tag so both can show at once */
.pcard .tag.verified{
    top:12px; left:12px; background:#12a150; color:#fff;
    display:inline-flex; align-items:center; gap:6px;
}
/* verified is rendered first, so push HOT down when both are present */
.pcard .tag.verified + .tag.hot{ top:48px; }
/* detail page: icon before the property name */
.d-title .d-verified{ color:#12a150; font-size:.82em; vertical-align:baseline; margin-right:2px; }

/* team member photo (falls back to initials when none is uploaded) */
.team .member .av.has-photo{ padding:0; overflow:hidden; }
.team .member .av.has-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* team member short bio (About page) */
.member .member-bio{ color:var(--muted); font-size:13px; line-height:1.55; margin-top:8px; }

/* footer social icons */
.footer-social{ display:flex; gap:10px; margin-top:16px; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.10);
    color:#fff; font-size:16px; transition:.18s; }
.footer-social a:hover{ background:var(--orange); color:#fff; transform:translateY(-2px); }

/* ---- Post Property nav button + FREE badge ---- */
.main-nav .nav-post{ position:relative; display:inline-flex; align-items:center; gap:6px;
    font-weight:700; font-size:15px; color:var(--green); background:rgba(244,122,32,.12);
    padding:9px 16px; border-radius:999px; border:1.5px solid rgba(244,122,32,.4); margin-left:8px; }
.main-nav .nav-post:hover{ background:var(--orange); color:#fff; border-color:var(--orange); }
.main-nav .nav-post .free-badge{ font-family:'Sora',sans-serif; font-size:9.5px; font-weight:800;
    letter-spacing:.5px; background:var(--orange); color:#fff; padding:2px 6px; border-radius:6px;
    line-height:1.2; text-transform:uppercase; }
.main-nav .nav-post:hover .free-badge{ background:#fff; color:var(--orange); }

/* ---- Post Property page ---- */
.pp-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.pp-form{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:26px; }
.pp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.pp-grid .pp-full{ grid-column:1 / -1; }
.pp-form .field label{ font-size:13px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; }
.pp-form .field .req{ color:#e0533b; }
.pp-form .field .opt{ color:var(--muted); font-weight:400; }
.pp-radios{ display:flex; gap:20px; padding:11px 2px; }
.pp-radios label{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--ink); cursor:pointer; }
.pp-submit{ margin-top:22px; }
.pp-note{ color:var(--muted); font-size:12.5px; text-align:center; margin-top:12px; }
.pp-done{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-sm);
    padding:44px 30px; text-align:center; }
.pp-done i{ font-size:52px; color:#12a150; }
.pp-done h2{ margin:16px 0 8px; }
.pp-done p{ color:var(--muted); max-width:480px; margin:0 auto 22px; }
.pp-done .btn{ margin:0 6px; }
@media(max-width:600px){ .pp-grid{ grid-template-columns:1fr; } }

/* Client Feedback page grid */
.feedback-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .feedback-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:600px){ .feedback-grid{grid-template-columns:1fr} }

/* ---- Multi-select location dropdown ---- */
.loc-ms{position:relative}
.loc-ms-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
    border:1px solid var(--line);background:var(--cream-2);border-radius:var(--r-sm);
    padding:12px 12px;font-size:15px;font-family:inherit;color:var(--ink);cursor:pointer;text-align:left}
.loc-ms-toggle .loc-ms-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-ms-toggle i{font-size:11px;color:var(--muted);flex:0 0 auto;transition:transform .2s}
.loc-ms.open .loc-ms-toggle{border-color:var(--green);background:#fff}
.loc-ms.open .loc-ms-toggle i{transform:rotate(180deg)}
.loc-ms-panel{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;background:#fff;
    border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;
    display:none;max-height:300px;overflow:hidden}
.loc-ms.open .loc-ms-panel{display:block}
.loc-ms-search{width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font-size:14px;font-family:inherit;margin-bottom:6px}
.loc-ms-list{max-height:230px;overflow-y:auto;display:flex;flex-direction:column}
.loc-ms-item{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:7px;cursor:pointer;font-size:14px;color:var(--ink);font-weight:400}
.loc-ms-item:hover{background:var(--cream)}
/* width:auto — the global .field input{width:100%} otherwise stretches the
   checkbox and forces the label onto a new line. */
.loc-ms-item input[type=checkbox]{margin:0;flex:0 0 auto;width:auto;min-width:0}
.loc-ms-item span{flex:1}
.loc-ms-none{padding:10px 8px;color:var(--muted);font-size:13px}
/* Mobile: while the location list is open, hide the other search fields and let
   the list flow in-page so only the list + Search button show (no overlap). */
@media(max-width:760px){
  .searchbar.loc-open .search-fields{grid-template-columns:1fr}
  .searchbar.loc-open .search-fields .field:not(.field-location):not(.go):not(:has(.loc-ms)){display:none!important}
  .searchbar.loc-open .loc-ms-panel{position:static;box-shadow:none;margin-top:8px;max-height:none;overflow:visible}
  .searchbar.loc-open .loc-ms-list{max-height:56vh}
}

/* Post Property — features flow inline like the backend Add Property form, so
   every option is visible at a glance (no inner scrollbar). */
.pp-features{display:flex;flex-wrap:wrap;gap:8px 10px;
    border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;background:var(--cream-2)}
.pp-feat{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);
    font-weight:500;cursor:pointer;background:#fff;border:1px solid var(--line);
    padding:7px 12px;border-radius:999px;transition:.15s;white-space:nowrap}
.pp-feat:hover{border-color:var(--green)}
/* width:auto — the global .field input{width:100%} would otherwise stretch the box */
.pp-feat input[type=checkbox]{margin:0;flex:0 0 auto;width:auto;min-width:0}
/* checked state: highlighted pill */
.pp-feat:has(input:checked){background:var(--green);border-color:var(--green);color:#fff}
.pp-hint{display:block;color:var(--muted);font-size:12px;margin-top:5px}

/* ---- "Our Clients" logo carousel (About page) ---- */
.client-carousel{display:flex;gap:40px;align-items:center;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);width:100%}
.client-carousel .client-logo{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
    height:80px;width:170px;background:#fff;border:1px solid var(--line);border-radius:12px;
    padding:14px 18px;animation:client-marquee 40s linear infinite}
.client-carousel:hover .client-logo{animation-play-state:paused}
/* Logos show in full colour by default; a slight lift on hover. */
.client-carousel .client-logo img{max-width:100%;max-height:100%;object-fit:contain;transition:.25s}
.client-carousel .client-logo:hover img{transform:scale(1.04)}
@keyframes client-marquee{ from{transform:translateX(0)} to{transform:translateX(calc(-210px * var(--n,6)))} }
@media(max-width:600px){
  .client-carousel .client-logo{height:64px;width:130px;padding:10px 14px}
  @keyframes client-marquee{ from{transform:translateX(0)} to{transform:translateX(calc(-170px * var(--n,6)))} }
}

/* Justify the body/paragraph content on the main info pages (home, services,
   about, contact). Headings are left as-is — justify on a wrapping heading
   stretches its lines and looks broken. */
.prose p,
.svc p,
.step p,
.d-block p,
.page-hero p,
.member-bio,
.info-cards .ic-card p{ text-align:justify; text-justify:inter-word; }

/* …except where the column is too narrow for it. Justifying a ~150px card (the
   How it works steps are 5 across) stretches four or five words across the
   full line and leaves rivers of white space between them. Same for text
   written in the content editor: it should read as typed. */
.step p,
.svc-solo .rich,
.svc-solo .rich p,
.svc-solo .rich li,
.sec-head .rich p,
.cta-band .rich p{ text-align:left; text-justify:auto; }

/* ---- Free consultation modal + FREE pill ---- */
.free-pill{display:inline-block;background:var(--orange);color:#fff;font-family:'Sora',sans-serif;
    font-size:.5em;font-weight:800;letter-spacing:.5px;padding:3px 8px;border-radius:8px;
    vertical-align:middle;margin-left:6px;text-transform:uppercase}
.consult-overlay{position:fixed;inset:0;background:rgba(8,20,38,.6);backdrop-filter:blur(3px);
    display:none;align-items:center;justify-content:center;z-index:200;padding:20px}
.consult-overlay.open{display:flex}
.consult-box{background:#fff;border-radius:18px;box-shadow:var(--shadow);max-width:440px;width:100%;
    position:relative;overflow:hidden;animation:consultIn .22s ease}
@keyframes consultIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.consult-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:28px;line-height:1;
    color:var(--muted);cursor:pointer;z-index:2}
.consult-body{padding:30px 28px 28px}
.consult-body h3{font-size:24px}
.consult-sub{color:var(--muted);font-size:14.5px;margin:8px 0 18px}
.consult-body .field{margin-bottom:12px}
.consult-body .field input{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);
    padding:12px 13px;font-size:15px;font-family:inherit;background:var(--cream-2)}
.consult-body .field input:focus{outline:none;border-color:var(--green);background:#fff}
.consult-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consult-msg{margin-top:10px;font-size:13.5px;text-align:center}
.consult-msg.err{color:#c0392b}
.consult-done{display:none;padding:44px 28px;text-align:center}
.consult-done i{font-size:52px;color:#12a150}
.consult-done h3{margin:14px 0 8px}
.consult-done p{color:var(--muted);margin-bottom:20px}

/* Post Property — two-step */
.pp-steps{display:flex;gap:10px;margin-bottom:20px}
.pp-step{flex:1;display:flex;align-items:center;gap:9px;font-weight:600;font-size:14px;color:var(--muted);
    background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.pp-step span{width:26px;height:26px;border-radius:50%;background:var(--cream);color:var(--muted);
    display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:0 0 auto}
.pp-step.on{color:var(--green);border-color:var(--green)}
.pp-step.on span{background:var(--green);color:#fff}
.pp-agree{display:flex;align-items:flex-start;gap:9px;font-weight:500;font-size:14px;color:var(--ink);
    background:var(--cream);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer}
.pp-agree input[type=checkbox]{margin:2px 0 0;flex:0 0 auto;width:auto}
.pp-form textarea{width:100%;border:1px solid var(--line);background:var(--cream-2);border-radius:var(--r-sm);
    padding:12px;font-size:15px;font-family:inherit;color:var(--ink)}
.pp-form textarea:focus{outline:none;border-color:var(--green);background:#fff}
.pp-msg{margin-top:10px;font-size:13.5px;text-align:center}
.pp-msg.err{color:#c0392b}

/* ---- Property Management Service: icon + text + photo cards, two across ---- */
.sec-head .svc-sub{color:var(--muted);font-size:17px;margin-top:8px}
.sec-head .sec-rule{display:block;width:88px;height:4px;border-radius:2px;background:var(--orange);margin:18px auto 0}
.sec-head.left .sec-rule{margin-left:0}
/* Same card shape as "Our work in pictures": a 4:3 picture on top with the
   wording under it. auto-fit adapts the column count on its own — 3 across on a
   wide screen, 2 on a tablet, 1 on a phone — so there is no separate mobile
   layout to keep in step. */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.svc-item{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden;transition:.2s}
.svc-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.svc-item-body{display:flex;gap:14px;padding:20px}
.svc-ico{flex:0 0 auto;width:56px;height:56px;border-radius:50%;background:#fdece0;color:var(--orange);
  display:flex;align-items:center;justify-content:center;font-size:22px}
.svc-item h3{font-size:18px;line-height:1.3;margin:4px 0 8px;color:var(--green)}
.svc-item .rich{color:var(--muted);font-size:14.5px;line-height:1.6}
.svc-item .rich p{margin:0 0 6px;text-align:left}
.svc-item .rich p:last-child{margin-bottom:0}
.svc-item-photo{position:relative;width:100%;aspect-ratio:4/3;background:var(--cream-2);overflow:hidden}
.svc-item-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* trust strip + closing tagline */
.svc-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:26px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);padding:22px 10px}
.svc-trust .t{display:flex;align-items:center;gap:12px;justify-content:center;padding:4px 14px;
  border-right:1px solid var(--line);color:var(--green);font-weight:600;font-size:14.5px;line-height:1.35}
.svc-trust .t:last-child{border-right:0}
.svc-trust .t i{color:var(--orange);font-size:26px;flex:0 0 auto}
.svc-tagline{text-align:center;margin:24px 0 0;color:var(--green);font-family:'Sora',sans-serif;
  font-weight:800;letter-spacing:2.5px;font-size:14px;text-transform:uppercase}
@media(max-width:900px){
  .svc-trust{grid-template-columns:repeat(2,1fr);gap:16px 0}
  .svc-trust .t:nth-child(2n){border-right:0}
}
@media(max-width:560px){
  .svc-trust{grid-template-columns:1fr}
  .svc-trust .t{border-right:0;justify-content:flex-start}
}

/* ---- Home banner carousel: slide 1 = search hero, 2 & 3 = promos ---- */
.hero-banner{position:relative}
.hero-slide{display:none}
.hero-slide.on{display:block}
.hero-promo{position:relative;min-height:520px;display:none;align-items:center}
.hero-promo.on{display:flex}
.hero-promo:before{content:"";position:absolute;inset:0;background-image:var(--slide-bg);
  background-size:cover;background-position:center;opacity:.9}
.hero-promo:after{content:"";position:absolute;inset:0;
  background:var(--hero-scrim)}
.hero-promo-inner{position:relative;z-index:2;padding:80px 22px;max-width:var(--maxw);width:100%}
.hero-promo .eyebrow{color:var(--orange)}
.hero-promo h1{color:#fff;font-size:clamp(32px,4.4vw,54px);font-weight:800;max-width:16ch}
.hero-promo .lede{color:rgba(255,255,255,.92);font-size:18px;margin:18px 0 28px;max-width:60ch}
.hero-promo .lede p{margin:0 0 10px;text-align:left}
.hero-promo .lede p:last-child{margin-bottom:0}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:46px;height:46px;border-radius:50%;
  border:0;background:rgba(255,255,255,.9);color:var(--green);cursor:pointer;box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:center;font-size:16px;transition:.15s}
.hero-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.hero-nav.prev{left:14px} .hero-nav.next{right:14px}
.hero-pager{position:absolute;left:0;right:0;bottom:16px;z-index:6;display:flex;justify-content:center;gap:9px}
.hero-pager button{width:26px;height:5px;border-radius:3px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.45);transition:.18s}
.hero-pager button.on{background:var(--orange);width:34px}
@media(max-width:900px){
  .hero-promo{min-height:430px}
  .hero-promo-inner{padding:60px 22px}
  .hero-nav{width:38px;height:38px}
  .hero-nav.prev{left:6px} .hero-nav.next{right:6px}
}

/* ---- Search card: sits below the banner, clear of it ---- */
.search-strip{padding:38px 0 60px;position:relative;z-index:20}
.search-strip .searchbar{margin:0 auto;max-width:1040px;box-shadow:0 18px 50px rgba(13,36,67,.18)}
/* Nothing overlaps the banner any more, so each slide keeps only its own
   ordinary bottom padding — no bare strip reserved underneath the copy. */
.hero-banner .hero-inner{padding-bottom:64px}
.hero-promo-inner{padding-bottom:74px}
/* breathing room on the left of the banner copy, per the design */
.hero-inner,.hero-promo-inner{padding-left:clamp(22px,5vw,72px)}
.hero-promo h1,.hero-promo .lede{max-width:52ch}
@media(max-width:900px){
  .search-strip{padding-top:30px}
  .hero-banner .hero-inner{padding-bottom:56px}
  .hero-promo-inner{padding-bottom:62px}
}
@media(max-width:600px){
  .search-strip{padding:24px 0 36px}
}

/* promo slides paint their own photo above the shared rotator + scrim */
.hero-promo{background-size:cover;background-position:center;z-index:3}
.hero-promo:before{content:none}
.hero-promo:after{content:"";position:absolute;inset:0;z-index:1;
  background:var(--hero-scrim)}
.hero-banner .hero-slide.on{position:relative}

/* The banner must be exactly as tall as the slide showing in it. Its own
   min-height left a strip below the slide where the shared photo rotator
   showed through, under the promo's gradient. */
.hero-banner{min-height:0}                 /* height comes from the active slide */
.hero-banner .hero-slide.on{min-height:600px}  /* …and every slide is the same height,
                                                  so the banner doesn't jump as it rotates */

/* Promo slides were vertically centred while slide 1 flows from the top, so
   their copy started lower. Align all three the same way. */
.hero-promo{align-items:flex-start}
.hero-promo-inner{padding-top:70px}
@media(max-width:900px){ .hero-promo-inner{padding-top:56px} }

/* Service-card photo: a button so it can open the lightbox, on every size. */
.svc-item-photo .fx-shot{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.svc-item-photo .fx-shot img{transition:transform .25s}
.svc-item:hover .svc-item-photo .fx-shot img{transform:scale(1.04)}

/* ---- Phones/tablets: the banner is only as tall as its content ----
   The fixed 600px slide height keeps all three slides level on desktop, but on
   a narrow screen the copy wraps to roughly that height anyway, so the fixed
   value just left dead space under the text. Below 900px the height follows
   the content. Desktop is deliberately untouched. */
@media(max-width:900px){
  .hero-banner .hero-slide.on{min-height:0}
  .hero-promo{min-height:0}
  .hero-banner .hero-inner{padding-bottom:52px}
  .hero-promo-inner{padding-bottom:58px}
}
@media(max-width:600px){
  .hero-banner .hero-inner{padding-bottom:40px}
  .hero-promo-inner{padding-bottom:46px}
  /* On a phone the prev/next arrows land right on top of the headline, so they
     become faint glass discs instead of solid white ones — still tappable, but
     the wording underneath stays readable. */
  .hero-nav{width:34px;height:34px;font-size:13px;box-shadow:none;
    background:rgba(255,255,255,.20);color:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .hero-nav:hover,.hero-nav:active,.hero-nav:focus-visible{background:rgba(255,255,255,.38);color:#fff}
  .hero-nav.prev{left:4px} .hero-nav.next{right:4px}
}

/* ---- Long body copy written in the CRM editor ----
   .sec-head is a narrow (640px) centred box built for a one-line sub-heading.
   Several pages now carry a few paragraphs of editor-written copy under the
   heading, which read as a squeezed, centred column in there. .page-copy takes
   that copy out of the header and runs it the full width of the wrap. Alignment
   chosen in the editor is written as an inline style on each paragraph, so it
   still wins over the justify default here. */
.sec-head.tight{margin-bottom:18px}
.page-copy{max-width:none;margin:0 auto 34px;color:var(--muted);
  font-size:16px;line-height:1.75;text-align:justify;text-justify:inter-word}
.page-copy p{text-align:inherit}
.page-copy p:last-child{margin-bottom:0}

/* ---- Banner slide 1 paints its own background ----
   The banner used to have one shared photo layer (.bg) cross-fading on its own
   5-second timer while the slides changed on a 7-second one, so the picture on
   screen had nothing to do with the wording over it. Each slide now carries its
   own background, exactly like the two promo slides, and .bg/.scrim are gone. */
.hero-slide.hero-shot{position:relative;z-index:3;background-size:cover;background-position:center}
.hero-slide.hero-shot:after{content:"";position:absolute;inset:0;z-index:1;
  background:var(--hero-scrim)}
.hero-slide.hero-shot .hero-inner{position:relative;z-index:2}

/* ---- Sidebar ads (properties.php, hot.php) ----
   Stacked one below another under the filters. An ad with words is a card with
   the picture on top; an ad without them is just the picture, so a plain banner
   never sits in an empty-looking frame. */
.side-ads{display:flex;flex-direction:column;gap:16px}
.ad-card{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow-sm);text-decoration:none;color:inherit;transition:.18s}
a.ad-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#cbd7e6}
.ad-card .ad-shot{display:block;background:var(--cream)}
.ad-card .ad-shot img{display:block;width:100%;height:auto}
.ad-card .ad-body{padding:14px 16px;color:var(--muted);font-size:14px;line-height:1.6}
.ad-card .ad-body p{margin:0 0 8px}
.ad-card .ad-body p:last-child{margin-bottom:0}
/* picture-only: no card chrome competing with the artwork */
.ad-card.ad-plain{border:0;box-shadow:none;background:none;border-radius:var(--r-sm)}
.ad-card.ad-plain .ad-shot{border-radius:var(--r-sm);overflow:hidden;background:none}
a.ad-card.ad-plain:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm)}
@media(max-width:900px){
  /* below the listings — give it some air and cap the width so a tall ad
     doesn't dominate the page on a phone */
  .side-ads{margin-top:8px;gap:14px}
  .side-ads .ad-card{max-width:420px;margin-left:auto;margin-right:auto;width:100%}
}