/* JR Plus Property. Palette sampled from the logo: indigo #3C3CC0, gold #F0D86C.
   System fonts only, nothing loaded from any third party. */
:root{
  --navy-900:#0A1230; --navy-800:#101C42; --navy-700:#1A2A5E; --navy-600:#26397A;
  --brand:#3C3CC0;
  --gold:#C9A227; --gold-light:#F0D86C; --gold-dark:#8A6B2A;
  --ink:#16192B; --muted:#5A6076; --line:#E3E5EC;
  --paper:#FFFFFF; --sand:#F7F5EF;
  --wrap:1150px; --radius:10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  line-height:1.65;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3{line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(1.8rem,4vw,2.6rem)}
h2{font-size:clamp(1.4rem,3vw,1.9rem)}
h3{font-size:1.15rem}

/* header */
.site-head{background:var(--navy-900);color:#fff;position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;gap:18px;min-height:74px}
.site-head img{height:46px;width:auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-weight:700;
  letter-spacing:.02em}
.brand span{font-size:1.05rem}
nav.main{margin-left:auto}
nav.main ul{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav.main a{display:block;padding:9px 14px;color:#E7E9F5;text-decoration:none;border-radius:6px;
  font-weight:600;font-size:.95rem}
nav.main a:hover,nav.main a[aria-current="page"]{background:var(--navy-700);color:var(--gold-light)}
.head-call{background:var(--gold);color:var(--navy-900)!important;font-weight:700}
.head-call:hover{background:var(--gold-light)}
/* The header button opens WhatsApp rather than dialling. Adam's call, 19 Aug 2026: messaging
   beats calling for this audience, and a language barrier is far less painful in text. Green
   because that is what WhatsApp looks like everywhere else and it needs no explaining. */
.head-wa{background:#25D366;color:#fff!important;font-weight:700}
.head-wa:hover{background:#1FBE5A}
.head-wa .num{font-weight:400;opacity:.95}

/* hero */
.hero{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));color:#fff;
  padding:64px 0 58px}
.hero h1{color:#fff;max-width:16ch}
.hero p{color:#C9CFE8;font-size:1.12rem;max-width:60ch;margin:0 0 26px}
.hero .rule{width:74px;height:4px;background:var(--gold);border-radius:2px;margin:0 0 22px}
.btn{display:inline-block;padding:13px 24px;border-radius:8px;text-decoration:none;font-weight:700;
  border:2px solid transparent}
.btn-gold{background:var(--gold);color:var(--navy-900)}
.btn-gold:hover{background:var(--gold-light)}
.btn-ghost{border-color:#8792BE;color:#fff;margin-left:10px}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-light)}

/* sections */
section{padding:52px 0}
.sand{background:var(--sand)}
.lede{max-width:70ch;color:var(--muted)}

/* listing cards */
.grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
.card:hover{box-shadow:0 10px 26px rgba(10,18,48,.13);transform:translateY(-2px)}
.card a.thumb{display:block;aspect-ratio:4/3;background:var(--sand);overflow:hidden}
.card a.thumb img{width:100%;height:100%;object-fit:cover}
.card-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card h3{margin:0 0 8px;font-size:1.05rem}
.card h3 a{color:var(--navy-800);text-decoration:none}
.card h3 a:hover{color:var(--brand)}
.price{font-weight:800;color:var(--navy-900);font-size:1.18rem;margin:0 0 4px}
.price .per{font-weight:600;color:var(--muted);font-size:.85rem}
.meta{color:var(--muted);font-size:.9rem;margin:0 0 10px}
.tag{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase}
.tag-sale{background:#E8EBF9;color:var(--brand)}
.tag-rent{background:#FBF1D5;color:var(--gold-dark)}

/* listing detail */
.gallery{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:22px 0}
.gallery a{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:8px;border:1px solid var(--line)}
.gallery img{width:100%;height:100%;object-fit:cover}
.lead-img{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin:0 0 20px}
.facts{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.facts li{background:var(--sand);border-radius:8px;padding:11px 14px;font-size:.94rem}
.facts b{display:block;color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;
  letter-spacing:.05em}
.enquire{background:var(--navy-800);color:#fff;border-radius:var(--radius);padding:26px 28px;margin:30px 0}
.enquire h2{color:#fff;margin-top:0}
.enquire p{color:#C9CFE8}
.enquire a{color:var(--gold-light)}

/* contact */
.contact-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* LINE and WhatsApp buttons. These are the main way customers make contact now that the
   contact form is gone, and most of them are on a phone, so they are real tap targets
   (48px tall) rather than small text links sitting next to each other. Brand colours are
   the official ones, and the text is white on both, which passes contrast. */
.chat-row{margin:0 0 18px}
.chat-row .who{display:block;font-weight:700;margin:0 0 8px}
.chat-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 20px;
  margin:0 10px 10px 0;border-radius:8px;text-decoration:none;font-weight:700;color:#fff;
  transition:filter .15s}
.chat-btn:hover{filter:brightness(1.08)}
.chat-btn.line{background:#06C755}
.chat-btn.wa{background:#25D366}
@media(max-width:520px){
  .chat-btn{display:flex;justify-content:center;width:100%;margin-right:0}
}
form label{display:block;font-weight:600;margin:0 0 6px}
form input,form textarea{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:8px;
  font:inherit;margin:0 0 16px;background:#fff}
form textarea{min-height:130px}
form button{background:var(--gold);color:var(--navy-900);border:0;padding:13px 26px;border-radius:8px;
  font:inherit;font-weight:800;cursor:pointer}
form button:hover{background:var(--gold-light)}

/* footer */
.site-foot{background:var(--navy-900);color:#B9C0DA;padding:44px 0 30px;margin-top:40px;font-size:.94rem}
.site-foot a{color:#DCE1F2;text-decoration:none}
.site-foot a:hover{color:var(--gold-light)}
.foot-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.foot-grid h3{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:0 0 7px}
.legal{border-top:1px solid #24305C;margin-top:28px;padding-top:18px;color:#8B93B4;font-size:.86rem}

@media(max-width:640px){
  .site-head .wrap{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  nav.main{margin-left:0;width:100%}
  .btn-ghost{margin-left:0;margin-top:10px}
}

/* Taken properties: kept on the site, clearly marked, sorted below the available ones. */
.card.is-taken .thumb{position:relative}
.card.is-taken .thumb img{filter:grayscale(.75) brightness(.82)}
.card.is-taken .thumb::after{
  content:attr(data-status);position:absolute;top:14px;left:-38px;
  transform:rotate(-38deg);background:#B4462F;color:#fff;
  font-weight:800;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 46px;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.card.is-taken h3 a{color:var(--muted)}
.card.is-taken .price{color:var(--muted);text-decoration:line-through}
.taken-head{margin:46px 0 6px;padding-top:26px;border-top:2px solid var(--line)}
.taken-head h2{margin:0 0 4px;color:var(--muted)}
.banner-taken{background:#B4462F;color:#fff;border-radius:10px;padding:14px 20px;margin:0 0 22px;
  font-weight:700;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.banner-taken span{font-weight:400;opacity:.92}
.tag-gone{background:#F1E0DC;color:#B4462F}

/* Two clear paths on the homepage: buying or renting. */
.paths{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:0 0 8px}
.path{position:relative;display:block;text-decoration:none;color:inherit;border-radius:12px;
  overflow:hidden;border:1px solid var(--line);background:#fff;
  transition:box-shadow .15s,transform .15s}
.path:hover{box-shadow:0 14px 34px rgba(10,18,48,.16);transform:translateY(-3px)}
.path .pic{aspect-ratio:16/9;overflow:hidden;background:var(--sand)}
.path .pic img{width:100%;height:100%;object-fit:cover}
.path .txt{padding:20px 22px 22px}
.path h2{margin:0 0 6px;color:var(--navy-800);font-size:1.35rem}
.path p{margin:0 0 12px;color:var(--muted)}
.path .go{display:inline-block;font-weight:800;color:var(--brand)}
.path .count{display:inline-block;background:var(--navy-800);color:#fff;font-weight:800;
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px;
  margin:0 0 10px}
.path.rent .count{background:var(--gold-dark)}

/* Guides: a quotable answer up top, then detail, then questions. */
.quick{background:var(--navy-800);color:#fff;border-radius:12px;padding:24px 26px;margin:0 0 30px}
.quick h2{color:var(--gold-light);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin:0 0 10px}
.quick p{margin:0;font-size:1.1rem;line-height:1.6;color:#EDF0FA}
.guide h2{margin-top:34px}
.guide p{max-width:74ch}
.faq{border-top:1px solid var(--line);padding:18px 0}
.faq h3{margin:0 0 6px;font-size:1.05rem;color:var(--navy-800)}
.faq p{margin:0;color:var(--muted);max-width:74ch}
.stat-table{width:100%;border-collapse:collapse;margin:20px 0}
.stat-table th,.stat-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.stat-table th{background:var(--sand);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.stat-table td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.guide-links{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin:26px 0}
.guide-links a{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:10px;
  text-decoration:none;background:#fff}
.guide-links a:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(10,18,48,.08)}
.guide-links strong{display:block;color:var(--navy-800);margin:0 0 4px}
.guide-links span{color:var(--muted);font-size:.92rem}

/* ---- Google reviews ------------------------------------------------------ */
.rating-line{margin-bottom:26px}
.rating-line a{color:var(--navy-800);text-underline-offset:3px}
.reviews{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.review{margin:0;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 22px 18px;display:flex;flex-direction:column}
.review blockquote{margin:0 0 16px;flex:1}
.review blockquote p{margin:0;color:var(--ink);line-height:1.6}
.review blockquote::before{content:"\201C";display:block;font-size:44px;line-height:.6;
  color:var(--gold);margin-bottom:10px}
.review figcaption{border-top:1px solid var(--line);padding-top:12px;font-size:15px}
.review figcaption b{display:block;color:var(--navy-900)}
.review figcaption span{color:var(--muted);font-size:14px}

/* ---- area landing page description ---------------------------------------- */
.area-intro{max-width:62ch;margin:22px 0 0}
.area-intro p{margin:0 0 14px;line-height:1.7;color:var(--ink)}
.area-intro p.meta{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:15px}

/* ---- area chips: links that behave like filters ---------------------------- */
.area-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:22px 0 0}
.area-chips-label{font-size:14px;color:var(--muted);margin-right:4px}
.area-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--paper);
  color:var(--navy-800);text-decoration:none;font-size:15px;line-height:1.2;
  transition:border-color .15s,background .15s}
.area-chip:hover,.area-chip:focus-visible{border-color:var(--gold);background:var(--sand)}
.area-chip span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.area-chip.on{border-color:var(--gold);background:var(--sand);font-weight:600}
.area-chip.on span{color:var(--navy-700)}

.note-small{font-size:.85rem;color:var(--muted)}