/* ==================================================================
   The platform pages: the catalogue, one plot, and the chrome around
   them. Built from the staging preview the client approved.

   The palette, the faces and the 1280 wrap are the same ones home.css
   already uses, so this reads as the same website rather than a second
   one bolted on. home.css and form.css are NOT loaded beside this: each
   of the three is complete on its own, which is the rule that keeps the
   approved pages from drifting.
   ================================================================== */

:root{
  --paper:#FFFFFF;
  --ground:#E9F1FA;
  --ground-2:#D8E7F5;
  --ink:#0A2440;
  --navy:#00447E;
  --navy-2:#1A5FA0;
  --navy-deep:#032F58;
  --mid:#4B5F77;
  --soft:#8296AC;
  --line:#CBDCED;
  --line-2:#E2EDF8;

  --gold:#D69A2C;
  --gold-lt:#F0B03C;
  --gold-deep:#B58121;
  --gold-ink:#8A6614;
  --gold-wash:#FAF1DC;

  --ok:#1B7A53;
  --ok-wash:#E6F4EC;
  --warn:#B0731A;
  --warn-wash:#FBF0DC;
  --live:#1D5B96;
  --live-wash:#E6F0FA;
  --hot:#B02A2A;
  --hot-wash:#FBE9E9;

  --c-blue:#1D5B96;  --rgb-blue:29,91,150;
  --c-grn:#17705A;   --rgb-grn:23,112,90;
  --c-ind:#3B4A87;   --rgb-ind:59,74,135;
  --c-amb:#B0731A;   --rgb-amb:176,115,26;

  --display:"Newsreader",Georgia,"Times New Roman",serif;
  --body:"IBM Plex Sans","Segoe UI",Arial,system-ui,sans-serif;
  --data:"IBM Plex Mono",ui-monospace,Consolas,monospace;

  --wrap:1280px;
}

*{box-sizing:border-box}
figure{margin:0}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;text-wrap:balance;margin:0;letter-spacing:-.01em}
p{margin:0}
ul{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,1.9vw,40px)}
.wrap>*{min-width:0}
.tag{font-family:var(--data);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-ink)}
.mono{font-family:var(--data);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--paper);padding:10px 16px;z-index:99;border-radius:6px}

/* ------------------------------------------------------- one header only */
.head{background:var(--paper);border-bottom:1px solid var(--line);position:relative;z-index:40}
.head .bar{display:flex;align-items:center;gap:clamp(12px,1.5vw,24px);min-height:76px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo img{height:44px;width:auto}
.logo .words{line-height:1.12}
.logo .words b{display:block;font-family:var(--display);font-size:23px;font-weight:500;
  letter-spacing:-.02em;color:var(--navy)}
.logo .words span{display:block;font-family:var(--data);font-size:8.2px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-ink)}
nav.main{display:flex;gap:2px;align-items:center;flex-wrap:nowrap}
nav.main a{font-size:14.5px;font-weight:500;color:var(--ink);padding:9px 11px;
  border-radius:7px;white-space:nowrap}
@media (hover:hover) and (pointer:fine){nav.main a:hover{background:var(--line-2);color:var(--navy)}}
nav.main a[aria-current="page"]{color:var(--navy);background:var(--live-wash)}
.head-acts{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
.callus{display:flex;align-items:center;gap:7px;font-family:var(--data);font-size:13.5px;
  font-weight:600;color:var(--navy);white-space:nowrap}
.callus svg{width:15px;height:15px;fill:none;stroke:var(--gold-deep);stroke-width:1.8;flex:none}
@media (hover:hover) and (pointer:fine){.callus:hover{color:var(--gold-ink)}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;
  border-radius:8px;font-weight:600;font-size:14.5px;background:var(--navy);color:#fff;
  border:1px solid var(--navy);white-space:nowrap}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--navy-2);border-color:var(--navy-2)}}
.btn.gold{background:var(--gold);border-color:var(--gold-deep);color:#22190A}
@media (hover:hover) and (pointer:fine){.btn.gold:hover{background:var(--gold-lt)}}
.btn.ghost{background:transparent;color:var(--navy);border-color:var(--line)}
@media (hover:hover) and (pointer:fine){.btn.ghost:hover{background:var(--live-wash);border-color:var(--navy-2)}}
.btn.sm{padding:8px 14px;font-size:13.5px}
.btn.wide{width:100%}
.head-acts .btn.sm{height:40px;padding:0 15px}

/* ----------------------------------------------------------------- bands */
.band{padding:clamp(30px,3.6vw,52px) 0}
.band.paper{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.crumb{font-size:13px;color:var(--mid);margin-bottom:14px}
.crumb a{color:var(--navy)}
@media (hover:hover) and (pointer:fine){.crumb a:hover{text-decoration:underline}}
.head-2{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;
  flex-wrap:wrap;margin-bottom:24px}
.head-2 h1,.head-2 h2{font-size:clamp(26px,2.7vw,36px)}
.head-2 p{color:var(--mid);font-size:15px;max-width:60ch;margin-top:6px}
.rule{height:1px;background:var(--line);position:relative;margin:20px 0}
.rule::before{content:"";position:absolute;top:-3px;left:0;width:56px;height:7px;background:var(--gold-lt)}

/* ------------------------------------------------------- the search band */
.searchband{position:relative;overflow:hidden;padding:24px 0 28px;border-bottom:3px solid var(--gold);
  background:linear-gradient(160deg,#0A3A69 0%,#042C51 58%,#02243F 100%)}
.searchband::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(255,255,255,.07) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(110% 90% at 16% 4%,#000 0%,transparent 70%);
  mask-image:radial-gradient(110% 90% at 16% 4%,#000 0%,transparent 70%)}
.searchband .wrap{position:relative}
.sb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:15px}
.sb-head h1,.sb-head h2{color:#fff;font-size:clamp(21px,2.1vw,28px);line-height:1.15}
.sb-head em{font-style:italic;font-weight:300;color:var(--gold-lt)}
.sb-head p{color:#9FBBD6;font-size:13.6px;margin-top:5px}
.searchcard{background:var(--paper);border-radius:12px;padding:17px 18px 18px;
  box-shadow:0 22px 46px -22px rgba(0,0,0,.62)}
.fields{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:12px;align-items:end}
.f label{display:block;font-family:var(--data);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px}
.f select,.f input{width:100%;font:inherit;font-size:14.5px;padding:11px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
@media (hover:hover) and (pointer:fine){.f select:hover,.f input:hover{border-color:var(--navy-2)}}

/* -------------------------------------------------------- the plot cards */
.plots{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plot{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column}
@media (hover:hover) and (pointer:fine){.plot:hover{box-shadow:0 10px 30px rgba(10,36,64,.1)}}
.plot .shot{height:168px;position:relative;overflow:hidden;background:var(--ground-2)}
.plot .shot img{width:100%;height:100%;object-fit:cover}
.plot .shot .none{position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(180deg,#BBD8EE 0 40%,#8FBF7E 40% 72%,#5E8F55 100%);
  font-family:var(--data);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.9)}
.plot .stamp{position:absolute;left:10px;top:10px;display:flex;gap:6px;flex-wrap:wrap}
.badge{font-family:var(--data);font-size:9.8px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 8px;border-radius:5px}
.b-appr{background:var(--navy);color:#fff}
.b-rera{background:var(--ok);color:#fff}
.b-hot{background:var(--hot);color:#fff}
.plot .body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:10px;flex:1}
.plot .id{font-family:var(--data);font-size:10.5px;letter-spacing:.1em;color:var(--soft)}
.plot h3{font-size:19px;line-height:1.2}
.plot .where{font-size:13px;color:var(--mid);display:flex;align-items:center;gap:6px}
.plot .where svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--gold-deep);stroke-width:1.7}
.specs{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line-2);
  border-radius:8px;overflow:hidden;background:var(--ground);margin:0}
.specs div{padding:8px 9px;border-right:1px solid var(--line-2)}
.specs div:last-child{border-right:0}
.specs dt{font-family:var(--data);font-size:9.6px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.specs dd{margin:2px 0 0;font-size:13.6px;font-weight:600;font-variant-numeric:tabular-nums}
.price{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;
  padding-top:11px;border-top:1px solid var(--line-2)}
.price .tot{font-family:var(--display);font-size:23px;color:var(--navy);line-height:1.1;display:block}
.price .per{font-family:var(--data);font-size:11.5px;color:var(--mid);margin-top:3px;display:block}
.price .neg{font-size:11px;font-family:var(--data);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ok);background:var(--ok-wash);padding:4px 8px;border-radius:5px;white-space:nowrap}

/* ------------------------------------------------------------- the browse */
.browse{display:grid;grid-template-columns:294px 1fr;gap:22px;align-items:start}
.filters{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  position:sticky;top:16px}
.filters .fh{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line)}
.filters .fh h2{font-size:17px}
.filters .fh a{font-size:12.5px;color:var(--navy);font-weight:600}
.fgroup{padding:14px 16px;border-bottom:1px solid var(--line-2)}
.fgroup:last-of-type{border-bottom:0}
.fgroup>strong{display:block;font-family:var(--data);font-size:10.4px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:10px;font-weight:600}
.fgroup label{display:flex;align-items:center;gap:9px;font-size:13.6px;color:var(--mid);
  padding:3.5px 0;cursor:pointer}
.fgroup label.on{color:var(--ink);font-weight:600}
.fgroup label .n{margin-left:auto;font-family:var(--data);font-size:11.5px;color:var(--soft)}
.fgroup input[type=checkbox],.fgroup input[type=radio]{width:15px;height:15px;accent-color:var(--navy);flex:none}
.fgroup input[type=number]{width:100%;font:inherit;font-size:14px;padding:9px 11px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pills label{padding:0}
.pills input{position:absolute;opacity:0;width:0;height:0}
.pills span{display:block;font-size:12.4px;padding:5px 10px;border:1px solid var(--line);
  border-radius:6px;color:var(--mid);background:var(--paper);cursor:pointer}
.pills label.on span,.pills input:checked+span{background:var(--navy);border-color:var(--navy);
  color:#fff;font-weight:600}
.pills input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px}
.fdo{padding:14px 16px;display:grid;gap:8px;border-top:1px solid var(--line-2)}

.resbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:16px}
.resbar h2{font-size:19px}
.resbar .n{font-family:var(--data);color:var(--navy);font-weight:600}
.applied{display:flex;gap:6px;flex-wrap:wrap}
.applied a{font-size:12.2px;background:var(--live-wash);color:var(--navy);border-radius:99px;
  padding:4px 10px;display:flex;gap:6px;align-items:center}
@media (hover:hover) and (pointer:fine){.applied a:hover{background:var(--navy);color:#fff}}
.applied a b{font-weight:400;opacity:.65}
.browse .plots{grid-template-columns:repeat(2,1fr)}
.pager{display:flex;justify-content:center;gap:10px;margin-top:22px;align-items:center}
.pager .at{font-family:var(--data);font-size:13px;color:var(--mid)}
.nothing{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:44px 30px;text-align:center}
.nothing h2{font-size:22px;margin-bottom:8px}
.nothing p{color:var(--mid);font-size:14.5px;max-width:52ch;margin:0 auto 18px}

/* ------------------------------------------------------------- one plot */
.detail{display:grid;grid-template-columns:1fr 348px;gap:26px;align-items:start}
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:8px;border-radius:12px;overflow:hidden}
.gallery figure{position:relative;background:var(--ground-2);overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery .big{height:330px}
.gallery .side{display:grid;gap:8px}
.gallery .side figure{height:161px}
.gallery .more{position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(3,36,64,.55);color:#fff;font-family:var(--data);font-size:12px;letter-spacing:.1em;
  text-transform:uppercase}
/* one photograph, or none at all, takes the whole width rather than
   leaving a third of the row empty beside it */
.gallery.only{grid-template-columns:1fr}
.gallery .none{grid-column:1/-1;height:330px;display:grid;place-items:center;
  background:linear-gradient(180deg,#BBD8EE 0 40%,#8FBF7E 40% 72%,#5E8F55 100%);
  font-family:var(--data);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.dtitle{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin:20px 0 6px}
.dtitle h1{font-size:clamp(27px,3vw,38px);line-height:1.1}
.dtitle .marks{display:flex;gap:8px;flex-wrap:wrap}
.dtitle .marks .badge{padding:7px 11px}
.keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:20px 0}
.keyfacts div{background:var(--paper);padding:13px 15px}
.keyfacts dt{font-family:var(--data);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft)}
.keyfacts dd{margin:3px 0 0;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;margin-bottom:16px}
.panel>h2{font-size:21px;margin-bottom:14px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:14px;margin:0}
.kv dt{color:var(--soft);font-size:12.6px;padding-top:1px}
.kv dd{margin:0;font-weight:500;text-align:right}
.kv.wide{grid-template-columns:170px 1fr}
.kv.wide dd{text-align:left}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips span{font-size:13px;padding:6px 11px;border-radius:7px;background:var(--ok-wash);
  color:#125E3F;border:1px solid #C4E4D3}
.compass{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:center}
.compass svg{width:100%;height:auto}
.dist{display:grid;gap:9px}
.dist .row{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:center;font-size:13.6px}
.dist .bar{height:7px;background:var(--line-2);border-radius:99px;overflow:hidden}
.dist .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--navy-2),var(--gold))}
.dist b{font-family:var(--data);font-size:13px;font-variant-numeric:tabular-nums}
.aside{position:sticky;top:16px;display:grid;gap:14px}
.buybox{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.buybox .top{background:linear-gradient(160deg,var(--navy-deep),var(--navy));color:#fff;padding:18px 20px}
.buybox .top .tot{font-family:var(--display);font-size:31px;line-height:1.1}
.buybox .top .per{font-family:var(--data);font-size:12.5px;color:#A9C7E2;margin-top:4px}
.buybox .mid{padding:16px 20px 20px;display:grid;gap:9px}
.buybox .note{font-size:12.3px;color:var(--soft);text-align:center;line-height:1.45}
.mini{background:var(--gold-wash);border:1px solid #EBD9AE;border-radius:12px;padding:16px 18px}
.mini h2{font-size:16px;margin-bottom:7px}
.mini p{font-size:13.2px;color:#6A5312;line-height:1.5}

/* ---------------------------------------------------------------- footer */
.foot{background:var(--navy-deep);color:#B6CFE6;padding:44px 0 0}
.foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:32px}
.foot h2{color:#fff;font-size:16px;margin-bottom:12px}
.foot ul{list-style:none;padding:0;display:grid;gap:8px;font-size:13.6px}
@media (hover:hover) and (pointer:fine){.foot a:hover{color:var(--gold-lt)}}
.foot img{height:44px;width:auto}
.foot .about{font-size:13.4px;line-height:1.6;margin-top:14px;max-width:38ch}
.foot .end{border-top:1px solid #12385F;padding:16px 0;font-size:12.6px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;color:#8FADC9}

/* ------------------------------------------------------------ narrower */
@media (max-width:1180px){
  .head .bar{flex-wrap:wrap;min-height:0;padding-top:12px;padding-bottom:10px;gap:12px}
  .callus{display:none}
  nav.main{order:3;width:100%;flex-wrap:wrap;border-top:1px solid var(--line-2);
    padding-top:8px;margin:0 -11px}
}
@media (max-width:1080px){
  .fields{grid-template-columns:repeat(2,1fr)}
  .plots,.browse .plots,.keyfacts{grid-template-columns:repeat(2,1fr)}
  .browse,.detail,.two,.compass{grid-template-columns:1fr}
  .filters,.aside{position:static}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .plots,.browse .plots,.keyfacts,.fields,.foot .cols{grid-template-columns:1fr}
  .head-acts .btn.ghost.sm{display:none}
  .gallery{grid-template-columns:1fr}
  .dist .row{grid-template-columns:110px 1fr auto}
}

/* ------------------------------------------------------------ the phone menu
   Below 760px the links fold away behind a button at the right of the logo
   and drop down over the page when it is pressed (menu.js), as they do on
   the home page. The call and register buttons keep a row underneath. This
   comes after the narrower rules above so that it wins over them */
.menu-btn{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid var(--line);border-radius:8px;color:var(--navy);background:var(--paper)}
.menu-btn .bars{position:relative;display:block;width:20px;height:14px}
.menu-btn i{position:absolute;left:0;width:100%;height:2px;border-radius:1px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease}
.menu-btn i:nth-child(1){top:0}
.menu-btn i:nth-child(2){top:6px}
.menu-btn i:nth-child(3){top:12px}
.head.open .menu-btn i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.head.open .menu-btn i:nth-child(2){opacity:0}
.head.open .menu-btn i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:760px){
  .menu-btn{display:inline-flex;order:1;margin-left:auto}
  /* the logo already carries the words, and beside it they push the
     button onto a row of its own on a small phone */
  .head .logo .words{display:none}
  .head-acts{order:2;flex-basis:100%;margin-left:0}
  .head-acts .callus{display:flex}
  nav.main{display:none;position:absolute;left:0;right:0;top:100%;order:0;width:auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:4px 0 10px;background:var(--paper);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px -20px rgba(8,30,54,.45)}
  .head.open nav.main{display:flex}
  nav.main a{font-size:16px;padding:14px 16px;border-radius:0;border-bottom:1px solid var(--line-2)}
  nav.main a:last-child{border-bottom:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}