/* ===========================================================================
   Search Your Suburb — brought into line with the home page.

   The hero now uses the same photograph and the same overlay recipe as the home
   page hero (homecrowd-hero-market.jpg, radial + linear wash down to navy),
   the same gradient-border badge and the same white search card, so the two
   pages read as one site rather than two.

   Below the hero the page stays light. The suburb grid is a scanning task —
   ~180 cards — and light backgrounds are easier to scan than the home page's
   dark panels. It picks up the rest of the new language instead: gradient
   tints, mint accents, bolder type, hover lift.

   Whole-pixel sizes and hairline borders throughout, which is what keeps text
   and edges crisp.
   All ids, classes and behaviour are unchanged — the script below is untouched.
=========================================================================== */
:root{
  --navy:#002753;--navy2:#0e2536;--ink:#1a2e38;--mint:#3da65d;--mint-lt:#4db56e;
  --muted:#5a7a88;--line:#e0eaed;--page:#f0f5f7;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;color:var(--ink);background:var(--page);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* ---- nav: same lockup and pill links as the home page ------------------- */
/* Same nav as the home page: transparent, absolute over the hero, centred on
   a 1140px inner rail, and it scrolls away rather than sticking. */
.nav{background:0 0;border-bottom:none;padding:0 40px;display:flex;align-items:center;justify-content:center;height:76px;position:absolute;top:0;left:0;right:0;z-index:9999}
.nav-inner{width:100%;max-width:1140px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px}
.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a{text-shadow:0 1px 10px rgba(4,14,22,.55);color:rgba(255,255,255,.72);font-size:14px;font-weight:500;white-space:nowrap;padding:8px 14px;border-radius:999px;transition:.18s}
.nav-links a:hover,.nav-links a.active{color:#fff;background:rgba(0,39,83,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.nav-mobile{display:none;cursor:pointer;background:none;border:none;padding:8px;-webkit-tap-highlight-color:transparent}
.nav-mobile svg{pointer-events:none}
.mobile-menu{display:none;background:var(--navy2);padding:8px 24px 20px;flex-direction:column;gap:2px;border-top:1px solid rgba(255,255,255,.1);position:fixed;top:76px;left:0;right:0;z-index:9998;max-height:calc(100vh - 76px);overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 24px 40px rgba(0,0,0,.4)}
.mobile-menu a{color:rgba(255,255,255,.85);font-size:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);display:block}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu.open{display:flex}
.mm-sub{padding-left:30px!important;font-size:.95em;opacity:.9;position:relative}
.mm-sub::before{content:'\21B3';position:absolute;left:14px;opacity:.5}
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop>a{display:inline-flex;align-items:center;gap:5px}
.nav-caret{font-size:9px;opacity:.65;transition:transform .15s}
.nav-drop:hover .nav-caret{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:100%;left:0;margin-top:8px;background:var(--navy2);border:1px solid rgba(61,166,93,.25);border-radius:12px;padding:6px;min-width:184px;box-shadow:0 16px 34px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:300}
.nav-drop-menu::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:8px;white-space:nowrap;color:#d3ecd9;font-size:14px}
.nav-drop-menu a:hover{background:rgba(61,166,93,.14);color:#fff}

/* ---- hero: the home page's photograph and overlay ---------------------- */
/* Top padding clears the absolute nav, matching the home page hero. */
.sb-hero{position:relative;text-align:center;padding:128px 24px 108px;overflow:hidden;background:var(--navy)}
.sb-hero::before{content:'';position:absolute;inset:0;
  background:url('https://endearing-cranachan-edc4a3.netlify.app/homecrowd-hero-market.jpg') center/cover no-repeat;
  filter:saturate(1.08) contrast(1.05)}
/* Bottom blend, 14 Aug 2026. Two faults, both visible as a hard edge where the
   navy met the section below:
     1. the wash ended at var(--page) (#f0f5f7) but .sb-filters directly beneath
        starts at #fff — so hero-bottom and section-top were different colours
        and the seam between them was the "blue into the white" line;
     2. it ramped rgba(0,39,83,.92) at 86% straight to opaque at 100%, i.e. navy
        to near-white across 14% of the hero HEIGHT. Because that's a percentage
        it compresses on mobile (bottom padding drops 108px -> 76px), so the
        shorter the hero the harsher the band.
   Now the fade-to-white is its own layer measured in PIXELS, so it looks the
   same at every hero height, and it ends on #fff to meet .sb-filters exactly
   (seam delta 0). It's a single white->transparent veil rather than a chain of
   colour stops: compositing white at falling alpha over the navy wash is
   LINEAR in output colour, so the step per pixel is constant (~2/px over
   120px) and it cannot band. Multi-stop versions of the same fade peaked at
   4.3/px in their steepest segment. The % layer beneath now only carries the
   navy wash and no longer tries to reach the page colour. */
.sb-hero::after{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 92% 64% at 50% 34%,rgba(6,16,25,.74) 0,rgba(6,16,25,.46) 52%,rgba(6,16,25,0) 78%),
             linear-gradient(to top,#fff 0,rgba(255,255,255,0) 120px),
             linear-gradient(180deg,rgba(6,16,25,.66) 0,rgba(0,39,83,.34) 20%,rgba(0,39,83,.42) 52%,rgba(0,39,83,.74) 86%,rgba(0,39,83,.86) 100%)}
.sb-hero-inner{position:relative;z-index:2;max-width:660px;margin:0 auto}

/* the badge, matching the home page's gradient-border treatment */
.sb-pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;
  font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#f4faf6;
  border:1px solid transparent;border-radius:999px;padding:10px 22px;margin-bottom:24px;
  background:linear-gradient(135deg,rgba(16,41,62,.62),rgba(0,39,83,.55)) padding-box,
             linear-gradient(120deg,rgba(61,166,93,.95),rgba(255,255,255,.6) 45%,rgba(62,165,94,.95)) border-box;
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  box-shadow:0 10px 34px rgba(4,14,22,.4),0 0 26px rgba(61,166,93,.24),inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:0 1px 8px rgba(4,14,22,.45);white-space:nowrap}
.sb-hero h1{font-family:'DM Serif Display',serif;font-size:clamp(36px,5vw,54px);color:#fff;
  margin-bottom:16px;line-height:1.08;letter-spacing:-.5px;
  text-shadow:0 3px 34px rgba(3,11,18,.75),0 1px 4px rgba(3,11,18,.5)}
.sb-hero h1 em{color:var(--mint);font-style:italic}
.sb-hero p{font-size:17px;font-weight:500;color:#eef6f8;max-width:500px;margin:0 auto 30px;line-height:1.6;
  text-shadow:0 2px 18px rgba(3,11,18,.8),0 1px 3px rgba(3,11,18,.5)}

/* the search card, matching the home page */
.search-wrap{max-width:560px;margin:0 auto}
.search-bar{display:flex;background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 26px 74px rgba(2,10,18,.5),0 6px 18px rgba(2,10,18,.28);
  border:2px solid transparent;transition:border-color .18s,box-shadow .18s}
.search-bar:focus-within{border-color:rgba(61,166,93,.65);box-shadow:0 26px 74px rgba(2,10,18,.5),0 0 0 4px rgba(61,166,93,.22)}
.search-input{flex:1;padding:17px 20px;font-size:16px;font-family:'DM Sans',sans-serif;border:none;outline:none;color:var(--ink);min-width:0}
.search-input::placeholder{color:#8aa0aa}
.search-btn{padding:12px 26px;background:var(--mint);color:#fff;border:none;font-size:15px;font-weight:800;
  cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:.3px;transition:background .15s}
.search-btn:hover{background:var(--mint-lt)}
#sb-ac{display:none;background:#fff;border-radius:16px;padding:6px;text-align:left;
  box-shadow:0 14px 44px rgba(0,0,0,.3);max-height:290px;overflow-y:auto;margin-top:10px}

/* ---- filters ----------------------------------------------------------- */
.sb-filters{background:linear-gradient(180deg,#fff,#f7fbfc);border-bottom:1px solid var(--line);padding:18px 40px}
.sb-rollout-note{max-width:1100px;margin:0 auto 14px;text-align:center;font-size:14px;font-weight:600;color:var(--navy);
  display:flex;align-items:center;justify-content:center;gap:9px}
.sb-live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#2ec28a;
  box-shadow:0 0 0 4px rgba(46,194,138,.18);flex:none}
.sf-btn{padding:9px 18px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;
  font-weight:700;cursor:pointer;color:var(--muted);transition:all .18s;font-family:'DM Sans',sans-serif}
.sf-btn:hover{border-color:var(--mint);color:var(--navy)}
.sf-btn.sf-active{background:linear-gradient(135deg,var(--navy),#053a72);color:#fff;border-color:var(--navy);
  box-shadow:0 4px 14px rgba(0,39,83,.22)}
.sf-soon{opacity:.42;cursor:not-allowed}
.sf-soon:hover{opacity:.5;border-color:var(--line);color:var(--muted)}
.sf-soon-tag{font-size:10px;letter-spacing:.04em;text-transform:uppercase;opacity:.85;margin-left:6px}

/* ---- body and cards ---------------------------------------------------- */
.sb-body{max-width:1100px;margin:0 auto;padding:52px 40px 84px}
.sb-count{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:26px}
.sb-count strong{color:var(--navy);font-weight:900}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:20px}
.sb-card{background:linear-gradient(168deg,#fff 0%,#f8fcfd 58%,#f3f9fb 100%);border:1px solid var(--line);
  border-radius:18px;padding:26px 24px;color:inherit;display:block;position:relative;overflow:hidden;
  box-shadow:0 2px 12px rgba(0,39,83,.05);transition:transform .2s,box-shadow .2s,border-color .2s}
.sb-card:hover{box-shadow:0 14px 40px rgba(0,39,83,.16);transform:translateY(-3px);border-color:var(--mint)}
.sb-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--navy),var(--mint))}
.sb-name{font-family:'DM Serif Display',serif;font-size:23px;color:var(--navy);margin-bottom:4px;line-height:1.15}
.sb-state{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:14px}
.sb-postcode{background:linear-gradient(135deg,var(--navy),#053a72);color:#fff;border-radius:9px;
  padding:5px 12px;font-size:13px;font-weight:800;flex:none}
.sb-stats{display:flex;gap:24px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.sb-stat-num{font-family:'DM Serif Display',serif;font-size:27px;color:var(--navy);line-height:1}
.sb-stat-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;margin-top:3px}
.sb-link{color:var(--navy);font-size:14px;font-weight:800;display:inline-flex;align-items:center;gap:5px;transition:gap .18s,color .18s}
.sb-card:hover .sb-link{color:var(--mint);gap:9px}

/* ---- postcode picker --------------------------------------------------- */
.pc-picker{display:none;background:linear-gradient(168deg,#fff,#f4fbf6);border:1px solid var(--mint);
  border-radius:18px;padding:26px 24px;margin-bottom:26px;box-shadow:0 10px 36px rgba(0,39,83,.12)}
.pc-picker h3{font-family:'DM Serif Display',serif;font-size:21px;color:var(--navy);margin-bottom:6px}
.pc-picker p{font-size:14px;color:var(--muted);margin-bottom:18px}
.pc-picker-opts{display:flex;flex-wrap:wrap;gap:10px}
.pc-opt{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--line);
  border-radius:12px;color:var(--navy);font-weight:700;font-size:14px;background:#fff;transition:all .18s}
.pc-opt:hover{border-color:var(--mint);background:#eaf7ef;transform:translateY(-1px)}
.pc-opt .pc-opt-meta{font-size:12px;color:var(--muted);font-weight:600}

/* ---- footer: the home page's dark footer ------------------------------ */
.footer{background:#08131d;color:#fff;padding:66px 40px 34px;border-top:1px solid rgba(255,255,255,.1)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;max-width:1100px;margin:0 auto 46px}
.footer-brand p{font-size:14px;color:#7a9aaa;line-height:1.7;margin-top:12px;max-width:260px}
.footer-col h4{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;color:#5a7a88;margin-bottom:16px}
.footer-col a{display:block;font-size:14px;color:#7a9aaa;margin-bottom:10px;transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:24px;max-width:1100px;margin:0 auto;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:13px;color:#4a6a78}

/* ---- logo lockup ------------------------------------------------------- */
.logo-pill{display:inline-flex;align-items:center;gap:12px}
.logo-pill img{height:56px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(3,11,18,.5))}
.logo-stack{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.logo-word{font-family:'Fredoka',sans-serif;font-weight:600;font-size:26px;letter-spacing:-.015em;color:#fff;line-height:1;text-shadow:0 1px 12px rgba(3,11,18,.6)}
.logo-word b{color:var(--mint);font-weight:600}
.logo-tag{font-family:'Fredoka',sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.012em;
  color:rgba(255,255,255,.78);white-space:nowrap;margin-top:4px;text-shadow:0 1px 8px rgba(3,11,18,.6)}
.footer-logo{display:inline-flex}
.footer-logo .logo-pill img{height:46px;filter:none}
.footer-logo .logo-word{font-size:22px}

:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .sb-card:hover,.pc-opt:hover{transform:none}}
@media (max-width:920px){.nav-links{display:none}.nav-mobile{display:block}}
@media (max-width:768px){
  .nav{padding:0 16px}
  .sb-hero{padding:112px 18px 76px}
  /* shorter hero: keep the veil proportional so it doesn't creep up behind the
     search bar (the fade is px-based by design, so it needs its own value here) */
  .sb-hero::after{background:radial-gradient(ellipse 92% 64% at 50% 34%,rgba(6,16,25,.74) 0,rgba(6,16,25,.46) 52%,rgba(6,16,25,0) 78%),
             linear-gradient(to top,#fff 0,rgba(255,255,255,0) 88px),
             linear-gradient(180deg,rgba(6,16,25,.66) 0,rgba(0,39,83,.34) 20%,rgba(0,39,83,.42) 52%,rgba(0,39,83,.74) 86%,rgba(0,39,83,.86) 100%)}
  .sb-hero p{font-size:16px}
  .sb-body{padding:36px 18px 56px}
  .sb-filters{padding:14px 16px}
  .search-btn{padding:12px 18px;font-size:14px}
  .logo-pill img{height:48px}.logo-word{font-size:23px}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer{padding:42px 20px 24px}
}