/* ==================================================================
   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}


.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%}

/* ----------------------------------------------------------------- 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:88px}
.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}

/* ------------------------------------------ the kinds, and the map view
   The type of property as tabs above the search card, from the approved
   preview, and a list or map switch beside the count. */
.segs-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.segs{display:flex;gap:4px;flex-wrap:wrap;background:var(--ground);border:1px solid var(--line);border-radius:9px;padding:4px}
.segs a{font-size:13.2px;font-weight:600;padding:7px 13px;border-radius:6px;color:var(--mid)}
@media (hover:hover) and (pointer:fine){.segs a:hover{color:var(--navy);background:var(--paper)}}
.segs a[aria-current="true"]{background:var(--navy);color:#fff}
.fields{grid-template-columns:repeat(5,1fr) auto}
.viewswitch{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.viewswitch a{font-size:13px;font-weight:600;padding:6px 13px;color:var(--mid);background:var(--paper)}
.viewswitch a+a{border-left:1px solid var(--line)}
.viewswitch a[aria-current="true"]{background:var(--navy);color:#fff}
.b-new{background:var(--gold);color:#22190A}
.b-resale{background:#fff;color:var(--navy);border:1px solid var(--line)}
.mapview{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.mapview-map{height:520px;background:var(--ground-2)}
.mapview-note{font-size:12.8px;color:var(--soft);padding:10px 14px;border-top:1px solid var(--line)}
.areamap{height:260px;border-radius:10px;overflow:hidden;background:var(--ground-2);border:1px solid var(--line)}
.pinpop{font-family:var(--body);min-width:200px}
.pinpop img{width:100%;height:110px;object-fit:cover;border-radius:6px;margin-bottom:8px}
.pinpop small{display:block;font-family:var(--data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.pinpop b{display:block;font-size:14px;line-height:1.3;color:var(--ink);margin:2px 0}
.pinpop span{display:block;font-size:12.5px;color:var(--mid)}
.pinpop em{display:block;font-style:normal;font-family:var(--display);font-size:18px;color:var(--navy);margin-top:4px}
.pinpop a{display:inline-block;margin-top:8px;font-weight:600;color:var(--navy)!important}
@media (max-width:680px){.mapview-map{height:400px}}

/* ------------------------------------------- the heart and the visit
   Two small buttons over the photograph of every card, from the approved
   preview. Pressed, the heart fills red and the car fills gold. */
.plot{position:relative}
.plot .marks{position:absolute;top:10px;right:10px;display:flex;gap:7px;z-index:2}
.plot .marks form{margin:0}
.act{width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.94);display:grid;place-items:center;
  border:1px solid rgba(10,36,64,.1);box-shadow:0 2px 8px rgba(8,30,54,.18)}
@media (hover:hover) and (pointer:fine){.act:hover{background:#fff;border-color:var(--navy-2)}}
.act svg{width:18px;height:18px;fill:none;stroke:var(--mid);stroke-width:1.8}
.act[aria-pressed="true"] svg{stroke:var(--hot);fill:var(--hot)}
.act.visit[aria-pressed="true"]{background:var(--gold-wash)}
.act.visit[aria-pressed="true"] svg{stroke:var(--gold-deep);fill:var(--gold-lt)}
.act.busy{opacity:.55}
.mark-form{margin:0}
.btn[aria-pressed="true"].gold{background:var(--ok);border-color:var(--ok);color:#fff}
.btn[aria-pressed="true"].ghost{background:var(--hot-wash);border-color:#EBC4C4;color:var(--hot)}
.savesearch{margin:0}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:10px;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.28);max-width:calc(100% - 32px)}
.toast a{color:var(--gold-lt);text-decoration:underline;margin-left:6px}

/* ------------------------------------------------------------ site visits
   The list on the left and the planner on the right, from the approved
   preview; and one visit, its stops numbered in the order of the trip. */
.visit-plan{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.panel h2 .count{font-family:var(--data);font-size:12px;color:var(--soft);margin-left:8px}
.vrow{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line-2)}
.vrow:last-child{border-bottom:0}
.vshot{display:block;height:72px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#BBD8EE 0 40%,#8FBF7E 40% 72%,#5E8F55 100%)}
.vshot img{width:100%;height:100%;object-fit:cover}
.vrow h3{font-size:16.5px;line-height:1.25}
.vrow p{font-size:12.8px;color:var(--mid)}
.vright{text-align:right;display:grid;gap:4px;justify-items:end}
.vright .p{font-family:var(--display);font-size:18px;color:var(--navy)}
.linkish{font-size:12.6px;color:var(--hot);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.planner{position:sticky;top:88px}
.pinbox.small{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:-4px 0 14px}
.pinbox.small .pin-map{height:200px;background:var(--ground-2)}
.pinbox.small .pin-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;background:var(--ground);font-size:12.4px}
.pinbox.small .pin-say{margin-right:auto;color:var(--mid)}
.visits{list-style:none;padding:0;margin:0}
.visits li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line-2);padding:4px 0}
.visits li:last-child{border-bottom:0}
.visits a,.visits .rowbtn{display:grid;gap:2px;padding:9px 0;flex:1;text-align:left;min-width:0}
.visits .grow{flex:1;margin:0}
.visits b{font-size:15px}
.visits small{font-size:12.8px;color:var(--mid)}
@media (hover:hover) and (pointer:fine){.visits a:hover b,.visits .rowbtn:hover b{color:var(--navy);text-decoration:underline}}
.stops{list-style:none;padding:0;margin:0;display:grid;gap:0}
.stop{display:grid;grid-template-columns:30px 1fr;gap:12px;padding:10px 0;position:relative}
.stop:not(:last-child)::before{content:"";position:absolute;left:14px;top:40px;bottom:-4px;width:2px;background:var(--line)}
.stop .n{width:30px;height:30px;border-radius:99px;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-family:var(--data);font-size:12px;font-weight:600;z-index:1}
.stop.pickup .n{background:var(--gold);color:#22190A}
.stop b{font-size:15px;display:block}
.stop small{display:block;font-size:12.8px;color:var(--mid)}
.stop .eta{color:var(--ok);font-weight:500}
.verdicts{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.verdicts button{font-size:12.4px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--mid)}
.verdicts button[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
.route-num span{display:grid;place-items:center;width:30px;height:30px;border-radius:99px;background:#00447E;color:#fff;
  font:600 12px/1 "IBM Plex Mono",monospace;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.route-num.gold span{background:#D69A2C;color:#22190A}
@media (max-width:1080px){.visit-plan{grid-template-columns:minmax(0,1fr)}.planner{position:static}}
@media (max-width:680px){.vrow{grid-template-columns:72px 1fr}.vright{grid-column:1/-1;justify-items:start;text-align:left;grid-auto-flow:column;align-items:center}}

/* ------------------------------------------------------------ projects
   The price list of a project, and the rows of unit types on the form. */
.units{display:grid;gap:10px}
/* the unit types of a home project, one card each (owner, 19 October 2026) */
.ucards{display:grid;gap:14px;margin-bottom:12px}
.ucard{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.ucard[hidden]{display:none}
.ucard.bad{border-color:var(--hot)}
.uc-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:var(--ground);border-bottom:1px solid var(--line)}
.uc-h b{font-size:15px;color:var(--navy)}
.uc-do{display:flex;gap:10px;align-items:center}
.uc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 12px;padding:12px 14px 0}
.uc-grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:0 14px}
.uc-grid .fld,.uc-grid2 .fld{margin-bottom:10px;min-width:0}
.uc-grid input,.uc-grid select{width:100%;min-width:0}
.uc-ticks{display:flex;gap:10px;flex-wrap:wrap}
.uc-rooms{padding:0 14px 14px}
.uc-rooms textarea{width:100%}
.rm-table{display:grid;gap:6px;margin:6px 0 8px}
.rm-h,.rm-row{display:grid;grid-template-columns:minmax(0,1fr) 72px 14px 72px 36px;gap:6px;align-items:center}
.rm-h span{font-family:var(--data);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.rm-row select,.rm-row input{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:8px;padding:7px 8px;background:var(--paper);color:var(--ink);min-width:0;width:100%}
.rm-row input{text-align:center}
.rm-row>span{text-align:center;color:var(--soft)}
.rm-x{width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--soft);font-size:18px;cursor:pointer}
@media (max-width:760px){.uc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.uc-grid2{grid-template-columns:minmax(0,1fr)}
  .rm-h,.rm-row{grid-template-columns:minmax(0,1fr) 56px 10px 56px 34px}}
.unitrow{display:grid;grid-template-columns:2fr .7fr 1fr 1fr .8fr 1fr 1.2fr 1.2fr .7fr auto;gap:8px;align-items:end;
  background:var(--ground);border:1px solid var(--line);border-radius:10px;padding:10px 10px 0}
.unitrow.bad{border-color:var(--hot)}
.unitrow .fld{margin-bottom:10px}
.unitrow .fld input,.unitrow .fld select{padding:8px 9px;font-size:14px}
.u-del{margin-bottom:14px;font-size:13px}
.ticks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 14px}
.table-wrap{overflow-x:auto}
.pricelist,.unittable{width:100%;border-collapse:collapse;font-size:14.4px;min-width:460px}
.pricelist th,.unittable th{text-align:left;font-family:var(--data);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);padding:8px 10px;border-bottom:1px solid var(--line)}
.pricelist td,.unittable td{padding:11px 10px;border-bottom:1px solid var(--line-2)}
.pricelist td.p{font-family:var(--display);font-size:18px;color:var(--navy);white-space:nowrap}
.soldout{font-family:var(--data);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--hot)}
@media (max-width:1080px){.unitrow{grid-template-columns:repeat(4,1fr)}.unitrow .u-label{grid-column:1/-1}.ticks{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.unitrow{grid-template-columns:1fr 1fr}.ticks{grid-template-columns:1fr}}

/* ---------------------------------------------------- fencing and quotes */
.fence-kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fence-kinds .panel{margin:0}
.fence-kinds h2{font-size:20px;margin:6px 0 8px}
.fence-kinds p{font-size:14px;color:var(--mid)}
.journey-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.journey-row div{display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:13.6px;color:var(--mid)}
.journey-row b{width:28px;height:28px;border-radius:99px;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--data);font-size:12px}
.journey-row strong{display:block;color:var(--ink)}
.quote-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line-2)}
.quote-row:last-child{border-bottom:0}
.quote-row>div{flex:1;min-width:200px;display:grid}
.quote-row small{font-size:12.8px;color:var(--mid)}
.quote-row .p{font-family:var(--display);font-size:20px;color:var(--navy)}
@media (max-width:1080px){.fence-kinds,.journey-row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fence-kinds,.journey-row{grid-template-columns:1fr}}

/* ------------------------------------------------------------- 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:88px;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}

/* ------------------------------------------------------ notes at the top
   What the page has just done, or why it could not. One line, coloured
   by what kind of news it is. */
.notes{display:grid;gap:8px;margin:0 0 18px}
.note{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--navy-2);
  border-radius:8px;padding:11px 14px;font-size:14.2px;line-height:1.5}
.note.ok{border-left-color:var(--ok);background:var(--ok-wash)}
.note.warn{border-left-color:var(--warn);background:var(--warn-wash)}
.note.bad{border-left-color:var(--hot);background:var(--hot-wash)}
.note b{display:block}
.note a{color:var(--navy);text-decoration:underline}
.flash{padding-top:18px}
.flash .notes{margin:0}

/* ------------------------------------------------------------ form boxes
   The buyer and seller pages share one way of drawing a box: the label in
   the small gold capitals the search card uses, the box below it, what it
   is for underneath, and a refusal in red under that. */
.fld{margin-bottom:14px;min-width:0}
.fld>label,.fld>.lbl{display:block;font-family:var(--data);font-size:10.4px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px;font-weight:600}
.fld>label .req{color:var(--hot);margin-left:2px}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld input[type=password],
.fld input[type=number],.fld input[type=date],.fld input[type=time],.fld input[type=url],
.fld select,.fld textarea{width:100%;font:inherit;font-size:15px;padding:11px 12px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink)}
.fld textarea{min-height:92px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--navy-2);
  box-shadow:0 0 0 3px rgba(26,95,160,.14)}
.fld .help{font-size:12.6px;color:var(--soft);margin-top:5px;line-height:1.45}
.fld .err{font-size:13px;color:var(--hot);margin-top:5px;line-height:1.45;font-weight:500}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--hot);background:#FFFBFB}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.span2{grid-column:1/-1}
.radios{display:grid;gap:8px}
.radios label{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);
  border-radius:9px;padding:12px 14px;font-size:14.4px;cursor:pointer;background:var(--paper);
  text-transform:none;letter-spacing:0;font-family:var(--body);color:var(--ink);font-weight:500}
.radios input{margin-top:4px;accent-color:var(--navy);flex:none}
.radios label:has(input:checked){border-color:var(--navy);background:var(--live-wash);font-weight:600}
.tick{display:flex;gap:10px;align-items:flex-start;font-size:14.2px;color:var(--ink);cursor:pointer}
.fld>label.tick{font-family:var(--body);font-size:14.2px;letter-spacing:0;text-transform:none;color:var(--ink);font-weight:500;margin:6px 0 0}
.tick input{margin-top:4px;width:17px;height:17px;accent-color:var(--navy);flex:none}
.pw{position:relative}
.pw input{padding-right:48px!important}
.pw-eye{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:38px;height:38px;
  display:grid;place-items:center;border-radius:7px;color:var(--soft)}
.pw-eye[hidden]{display:none}
.pw-eye svg{width:19px;height:19px}
.pw-eye .ic-shown{display:none}
.pw-eye[aria-pressed="true"] .ic-shown{display:block}
.pw-eye[aria-pressed="true"] .ic-hidden{display:none}
@media (hover:hover) and (pointer:fine){.pw-eye:hover{color:var(--navy);background:var(--ground)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

.card-form{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.card-form .ch{padding:20px 24px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--paper),var(--ground))}
.card-form .ch h1,.card-form .ch h2{font-size:25px}
.card-form .ch p{font-size:13.8px;color:var(--mid);margin-top:4px}
.card-form .cb{padding:22px 24px 10px}
.card-form fieldset{border:0;padding:0;margin:0 0 8px;min-width:0}
.card-form legend{font-family:var(--display);font-size:19px;color:var(--navy);padding:0;margin-bottom:12px}
.card-form .sep{height:1px;background:var(--line-2);margin:6px 0 20px}
.formfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;
  border-top:1px solid var(--line);background:var(--ground);flex-wrap:wrap}
.formfoot small{font-size:12.8px;color:var(--soft)}

/* -------------------------------------------- what is being registered
   Four cards for the kind and two for new or resale. The radio is the card:
   the whole card is the label, and a ticked one turns navy. */
.kinds{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kinds.two{grid-template-columns:repeat(2,1fr)}
.kindcard{position:relative;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;
  padding:16px 16px 15px;background:var(--paper);cursor:pointer;min-height:100%}
.kindcard input{position:absolute;top:14px;right:14px;width:18px;height:18px;accent-color:var(--navy)}
.kindcard b{font-size:16px;color:var(--ink)}
.kindcard small{font-size:13px;color:var(--mid);line-height:1.45}
.kc-ic{width:44px;height:44px;border-radius:10px;background:var(--live-wash);color:var(--navy);display:grid;place-items:center;margin-bottom:4px}
.kc-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
.kindcard:has(input:checked){border-color:var(--navy);background:var(--live-wash);box-shadow:0 0 0 2px var(--navy) inset}
.kindcard:has(input:checked) .kc-ic{background:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){.kindcard:hover{border-color:var(--navy-2)}}
@media (max-width:860px){.kinds{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.kinds,.kinds.two{grid-template-columns:1fr}}

/* ------------------------------------------------ registering and signing in
   A navy panel that says what the account is for, beside the card with the
   boxes in it. On a phone the panel goes underneath, the boxes first. */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:26px;align-items:start;
  max-width:1060px;margin:0 auto}
.auth.wide{grid-template-columns:minmax(0,1fr) minmax(0,640px);max-width:1180px}
.pitch{background:linear-gradient(160deg,#0A3A69 0%,#042C51 58%,#02243F 100%);color:#C7DCEF;
  border-radius:14px;padding:28px 28px 30px;position:relative;overflow:hidden}
.pitch .tag{color:var(--gold-lt)}
.pitch h1,.pitch h2{color:#fff;font-size:clamp(25px,2.6vw,33px);line-height:1.12;margin:10px 0 12px}
.pitch h1 em,.pitch h2 em{font-style:italic;font-weight:300;color:var(--gold-lt)}
.pitch p{font-size:14.6px;line-height:1.6}
.pitch ol{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:13px}
.pitch li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:14px;line-height:1.5}
.pitch li b{font-family:var(--data);font-size:11.5px;color:#22190A;background:var(--gold-lt);
  width:24px;height:24px;border-radius:99px;display:grid;place-items:center;margin-top:1px}
.pitch li strong{color:#fff;display:block;font-weight:600}
.pitch .switch{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:13.8px}
.pitch .switch a{color:var(--gold-lt);font-weight:600}
.auth .below{font-size:13.8px;color:var(--mid);text-align:center;margin-top:14px}
.auth .below a{color:var(--navy);font-weight:600}
/* one sign in and one registration (owner, 18 October 2026): two tabs on top of the card */
.auth-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;padding:6px;background:var(--line-2,#E2EDF8);border-radius:12px;margin:16px 16px 0}
.auth-tabs a{display:block;text-align:center;padding:9px 10px;border-radius:9px;font-weight:600;font-size:14.4px;color:var(--mid);text-decoration:none}
.auth-tabs a[aria-current="page"]{background:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){.auth-tabs a:not([aria-current]):hover{background:#fff;color:var(--navy)}}

.choose{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:980px;margin:0 auto}
.choice{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:26px 26px 24px;
  display:flex;flex-direction:column;gap:12px}
@media (hover:hover) and (pointer:fine){.choice:hover{border-color:var(--navy-2);box-shadow:0 14px 34px -22px rgba(8,30,54,.5)}}
.choice .ic{width:52px;height:52px;border-radius:12px;display:grid;place-items:center;background:var(--live-wash);color:var(--navy)}
.choice.sell .ic{background:var(--gold-wash);color:var(--gold-deep)}
.choice .ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7}
.choice h2{font-size:26px}
.choice p{font-size:14.4px;color:var(--mid)}
.choice ul{padding:0;list-style:none;display:grid;gap:7px;font-size:14px;color:var(--ink);margin:4px 0 8px}
.choice li{display:flex;gap:9px}
.choice li::before{content:"";width:7px;height:7px;background:var(--gold-lt);transform:rotate(45deg);flex:none;margin-top:8px}
.choice .acts{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ------------------------------------------------------------ the account
   The side list of the buyer's and seller's own pages, and the page beside
   it. From the approved preview. */
.acct{display:grid;grid-template-columns:250px 1fr;gap:22px;align-items:start}
.acct>div{min-width:0}
.side-nav{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;
  position:sticky;top:88px}
.side-nav .who{padding:12px 12px 14px;border-bottom:1px solid var(--line-2);margin-bottom:8px}
.side-nav .who b{display:block;font-size:15.5px;line-height:1.3}
.side-nav .who small{font-family:var(--data);font-size:11.2px;color:var(--soft);letter-spacing:.04em}
.side-nav .grp{display:block;font-family:var(--data);font-size:9.8px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);padding:12px 12px 4px;font-weight:600}
.side-nav a,.side-nav button{display:flex;align-items:center;justify-content:space-between;width:100%;
  padding:9px 12px;border-radius:8px;font-size:14.2px;color:var(--mid);text-align:left}
@media (hover:hover) and (pointer:fine){.side-nav a:hover,.side-nav button:hover{background:var(--ground);color:var(--ink)}}
.side-nav a[aria-current="page"]{background:var(--live-wash);color:var(--navy);font-weight:600}
.side-nav i{font-style:normal;font-family:var(--data);font-size:11px;color:var(--soft)}
.side-nav i.hot{background:var(--hot);color:#fff;border-radius:99px;padding:1px 7px}
.side-nav form{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:18px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:15px 16px;display:block}
.stat b{display:block;font-family:var(--display);font-size:31px;line-height:1;color:var(--navy);font-weight:400}
.stat span{font-family:var(--data);font-size:10.4px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soft);display:block;margin-top:7px}
.stat.gold b{color:var(--gold-deep)}
@media (hover:hover) and (pointer:fine){a.stat:hover{border-color:var(--navy-2)}}
.empty{background:var(--paper);border:1px dashed var(--line);border-radius:12px;padding:30px 26px;text-align:center}
.empty h2,.empty h3{font-size:21px;margin-bottom:6px}
.empty p{color:var(--mid);font-size:14.4px;max-width:54ch;margin:0 auto 16px}
.empty .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* As many across as fit, so three cards fill a wide row and none is left alone beside a hole */
.welcome{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-bottom:18px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  display:flex;flex-direction:column;gap:8px}
.tile h3{font-size:19px}
.tile p{font-size:13.8px;color:var(--mid)}
.tile .acts{margin-top:auto;padding-top:6px;display:flex;gap:8px;flex-wrap:wrap}
.tile.sell{background:var(--gold-wash);border-color:#EBD9AE}

/* ------------------------------------------- the account on a wide screen
   The page is wide now; what is on it should not stretch to fill it. The
   side list keeps its own width. The number tiles keep their size, the
   cards and panels are tight, a form stops at a width a person can read
   across, and property cards stay three to a row so none is squeezed. */
/* Only the account pages (the ones with the side list) go wide, and only below the header: the
   header and footer keep the website's 1280 on every page, so they never jump about when My
   account is opened (owner, 10 October 2026). */
body:has(.acct) main .wrap{max-width:1720px}
.band:has(>.wrap>.acct){padding:28px 0 52px}
.acct .head-2 h1{font-size:clamp(26px,2.3vw,32px)}
.acct .head-2 p{font-size:14.5px;margin-top:4px}
.stats{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:14px}
.stat{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px}
.stat b{font-size:26px}
.stat span{margin-top:0;font-size:10px;line-height:1.35}
.welcome{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-bottom:16px}
.welcome .tile{padding:16px 18px;gap:6px}
.welcome .tile h3{font-size:18px}
.welcome .tile p{font-size:13.6px;line-height:1.5}
.welcome .tile .acts{gap:7px;padding-top:4px}
.acct .panel{padding:18px 20px;margin-bottom:14px}
.acct .panel>h2,.acct .panel h2{font-size:19px;margin-bottom:10px}
.acct .card-form,.acct .panel.narrow{max-width:1080px}
/* Every card in a row is the same height. The price follows the details
   directly and the spare room goes above the footer, not into the middle. */
.acct .plots{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.acct .plot .price{margin-top:0}
.acct .plot .cardfoot{margin-top:auto}
@media (max-width:1280px){.acct .plots{grid-template-columns:repeat(2,minmax(0,1fr))}}
.acct .empty{padding:24px 22px}
.acct .empty h2,.acct .empty h3{font-size:19px}


/* -------------------------------------------------------- my properties
   One card for each property, with the seven step track from the approved
   preview, and the seller's page for one property: what the office needs,
   the papers, the photographs, the price and the conversation. */
.myplot{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:17px 18px;margin-bottom:13px}
.myplot.needs{border-color:#E7B7B7;box-shadow:inset 4px 0 0 var(--hot)}
.myplot .r1{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;flex-wrap:wrap}
.myplot h1{font-size:clamp(23px,2.4vw,30px);line-height:1.15;margin-top:2px}
.myplot h2{font-size:20px;line-height:1.2;margin-top:2px}
@media (hover:hover) and (pointer:fine){.myplot h2 a:hover{color:var(--navy);text-decoration:underline}}
.myplot .id{font-family:var(--data);font-size:11px;color:var(--soft);letter-spacing:.06em}
.myplot .where{font-size:13.4px;color:var(--mid);margin-top:3px}
.state{font-family:var(--data);font-size:10.6px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:6px;white-space:nowrap}
.s-live{background:var(--live-wash);color:var(--live)}
.s-ver{background:var(--warn-wash);color:var(--warn)}
.s-ok{background:var(--ok-wash);color:var(--ok)}
.s-hot{background:var(--hot-wash);color:var(--hot)}
.track{display:flex;gap:3px;margin:15px 0 8px}
.track i{flex:1;height:6px;border-radius:99px;background:var(--line)}
.track i.done{background:var(--ok)}
.track i.now{background:var(--gold)}
.tracklabels{display:flex;justify-content:space-between;gap:6px;list-style:none;padding:0;margin:0;
  font-family:var(--data);font-size:9.6px;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.tracklabels li{flex:1;text-align:center}
.tracklabels li:first-child{text-align:left}
.tracklabels li:last-child{text-align:right}
.tracklabels b{color:var(--gold-ink);font-weight:600}
.myfoot{display:flex;gap:10px 20px;flex-wrap:wrap;padding-top:13px;margin-top:13px;border-top:1px solid var(--line-2);
  font-size:13.4px;color:var(--mid);align-items:center}
.myfoot .say{flex:1 1 280px}
.myplot.needs .myfoot .say{color:var(--hot);font-weight:500}
.myfoot .wanted{font-size:12.8px;color:var(--hot)}
.myfoot .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.myfoot .num{font-family:var(--data);font-weight:600;color:var(--ink)}
.unread{font-size:12px;font-weight:600;color:#fff;background:var(--hot);border-radius:99px;padding:3px 10px}
.stat.hot b{color:var(--hot)}
.verdict{margin-top:16px;border-radius:10px;padding:13px 16px;border:1px solid var(--line)}
.verdict b{display:block;font-size:14.4px;margin-bottom:3px}
.verdict p{font-size:14.2px;line-height:1.55}
.verdict small{display:block;font-size:12px;color:var(--soft);margin-top:6px}
.verdict.s-hot{background:var(--hot-wash);border-color:#EBC4C4;color:#6E1E1E;font-family:var(--body);text-transform:none;letter-spacing:0}
.verdict.s-ver,.verdict.s-ok,.verdict.s-live{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:400}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start;margin-top:16px}
.panel .lede{font-size:13.4px;color:var(--mid);margin:-8px 0 14px}
.asked{background:var(--hot-wash);border:1px solid #EBC4C4;border-radius:9px;padding:11px 14px;margin-bottom:14px}
.asked b{font-size:13.8px;color:#6E1E1E}
.asked ul{margin:6px 0 0;padding-left:18px;font-size:14px;color:#6E1E1E}
.sendbox{border:1px dashed var(--line);border-radius:10px;padding:14px;background:var(--ground)}
.sendbox input[type=file]{font-size:13.6px;max-width:100%}
.filelist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.filelist li{display:flex;justify-content:space-between;gap:10px;font-size:14px;border-bottom:1px solid var(--line-2);padding-bottom:7px}
.filelist a{color:var(--navy);font-weight:500}
.filelist small{color:var(--soft);font-size:12px;white-space:nowrap}
.minithumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;margin-bottom:12px}
.minithumbs figure{position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--ground-2)}
.minithumbs img{width:100%;height:100%;object-fit:cover}
.minithumbs figcaption{position:absolute;left:0;right:0;bottom:0;font-size:10.5px;background:rgba(3,36,64,.72);color:#fff;padding:3px 6px}

.thread{display:flex;flex-direction:column;gap:10px;max-height:520px;overflow-y:auto;padding:4px 2px 12px}
.msg{display:flex;flex-direction:column;max-width:86%}
.msg.me{align-self:flex-end;align-items:flex-end}
.msg.them{align-self:flex-start}
.msg.sys{align-self:center;align-items:center;max-width:94%}
.bubble{padding:10px 13px;border-radius:12px;font-size:14.2px;line-height:1.5;word-wrap:break-word}
.msg.me .bubble{background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.msg.them .bubble{background:var(--ground);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.sys .bubble{background:var(--gold-wash);border:1px solid #EBD9AE;color:#6A5312;font-size:13.4px;text-align:center}
.msg .when{font-size:11.2px;color:var(--soft);margin-top:3px}
.attach{display:block;margin-top:8px;font-size:13px;text-decoration:underline}
.msg.me .attach{color:#fff}
.attach img{max-width:220px;border-radius:8px;margin-bottom:4px}
.thread-empty{font-size:14px;color:var(--mid);text-align:center;padding:26px 10px}
.reply{border-top:1px solid var(--line-2);padding-top:12px}
.reply-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.attach-pick{font-size:12.8px;color:var(--mid);display:grid;gap:4px}
.attach-pick input{font-size:12.8px;max-width:230px}
.threads{list-style:none;padding:0;margin:0;display:grid}
.threads li{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line-2)}
.threads a{display:grid;gap:2px;padding:11px 4px;flex:1;min-width:0}
.threads b{font-size:14.4px}
.threads small{font-family:var(--data);font-size:11px;color:var(--soft)}
.threads span{font-size:13.2px;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.threads i.hot{font-style:normal;background:var(--hot);color:#fff;border-radius:99px;padding:1px 8px;font-size:12px}
@media (hover:hover) and (pointer:fine){.threads a:hover b{color:var(--navy);text-decoration:underline}}
@media (max-width:1080px){.split{grid-template-columns:1fr}}
@media (max-width:680px){.tracklabels{font-size:8px;letter-spacing:0}.msg{max-width:94%}}

/* ------------------------------------------------------------ narrower */
@media (max-width:1080px){
  .auth,.auth.wide,.acct{grid-template-columns:minmax(0,1fr)}
  .auth .pitch{order:2}
  .side-nav{position:static}
  .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}
}
@media (max-width:680px){
  .grid2,.grid3,.choose,.welcome{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .card-form .ch,.card-form .cb,.formfoot{padding-left:16px;padding-right:16px}
  .formfoot .btn{flex:1 1 auto}
  .plots,.browse .plots,.acct .plots,.keyfacts,.fields{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .dist .row{grid-template-columns:110px 1fr auto}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------------
   Services: the history of a request, the money on it, the service
   history page.
   ------------------------------------------------------------------ */
.history{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--line-2)}
.history li{position:relative;padding:0 0 14px 6px}
.history li:last-child{padding-bottom:0}
.history li::before{content:"";position:absolute;left:-25px;top:5px;width:10px;height:10px;border-radius:50%;
  background:var(--paper);border:2px solid var(--soft)}
.history li.k-quote::before,.history li.k-invoice::before{border-color:var(--live)}
.history li.k-answer::before,.history li.k-payment::before{border-color:var(--ok);background:var(--ok)}
.history li.k-asked::before{border-color:var(--gold)}
.history p{margin:0;font-size:14.4px}
.history small{font-family:var(--data);font-size:11px;color:var(--soft)}
.paybar{display:block;height:6px;background:var(--line-2);border-radius:3px;overflow:hidden;margin-top:6px;max-width:260px}
.paybar i{display:block;height:100%;background:var(--ok)}
.svc .svc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 12px;flex-wrap:wrap}
.svc .svc-head>div{min-width:0;flex:1 1 200px}
.svc .svc-head>.state{flex:none}
.svc .id{font-family:var(--data);font-size:11px;color:var(--soft);letter-spacing:.06em}
.svc h2{font-size:21px;margin:2px 0 0}
.svc h2 a{color:var(--ink)}
.svc .where{font-size:13.4px;color:var(--mid);margin:3px 0 0}
.svc-money{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line-2)}
.svc-money dt{font-family:var(--data);font-size:10.4px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft)}
.svc-money dd{margin:2px 0 0;font-size:14px}
.svc-money dd small{display:block;color:var(--mid);font-size:12.5px}
.svc-money a{color:var(--navy);font-weight:600}
.svc-hist{margin-top:12px}
.svc-hist summary,.cancelbox summary{cursor:pointer;font-weight:600;color:var(--navy);font-size:14px}
.svc-hist .history{margin-top:12px}
.cancelbox form{display:grid;gap:8px;margin-top:12px;max-width:520px}
.cancelbox label{font-size:13.8px;font-weight:600}
.cancelbox textarea{font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px}
.cancelbox .btn{justify-self:start}
@media (max-width:640px){.svc-money{grid-template-columns:1fr 1fr}}

/* Site visits: adding to a visit already asked for, finding the way. */
.addto{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:6px}
.addto h2{margin-bottom:2px}
.addto form{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.addto .btn{white-space:normal;min-width:0}
.addto small{font-size:12.4px;color:var(--mid);text-align:center}
.or{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:12.4px;margin:6px 0 14px}
.or::before,.or::after{content:"";flex:1;border-top:1px solid var(--line-2)}
.gnav p{font-size:14px;color:var(--mid)}
.gnav .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gnav .small-note{font-size:12.4px;color:var(--soft);margin-top:10px}
.stop .glinks{display:block;font-size:12.8px;margin-top:3px}
.stop .glinks a{color:var(--navy);font-weight:600}
.inline-off{margin-top:4px}
.inline-off .linkish{font-size:12.6px;color:var(--hot)}
.gmaps-area{display:inline-block;margin-top:8px;font-size:13px;font-weight:600;color:var(--navy)}

/* ------------------------------------------------------------------
   One property or project: the photographs, the title and price, the
   section bar that stays at the top, the details table, the amenities,
   what is around it. And the full screen photograph viewer.
   ------------------------------------------------------------------ */
.preview-bar{background:#FFF6E4;border-bottom:1px solid var(--gold);font-size:14px;padding:10px 0}
.preview-bar a{color:var(--navy);font-weight:600;margin-left:8px}
.pd .crumb{margin-bottom:14px}
.pd-gallery{position:relative;display:grid;gap:8px;grid-template-columns:2fr 1fr 1fr;grid-template-rows:180px 180px;
  border-radius:14px;overflow:hidden;background:var(--ground-2)}
.pd-gallery.n1{grid-template-columns:1fr;grid-template-rows:380px}
.pd-gallery.n2{grid-template-columns:2fr 1fr;grid-template-rows:380px}
.pd-gallery.n3,.pd-gallery.n4{grid-template-columns:2fr 1fr}
.pd-shot{position:relative;padding:0;border:0;cursor:zoom-in;overflow:hidden;background:var(--ground-2);display:block}
.pd-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
@media (hover:hover) and (pointer:fine){.pd-shot:hover img{transform:scale(1.035)}}
.pd-shot.big{grid-row:1 / span 2}
.pd-gallery.n4 .pd-shot:nth-child(4){display:none}
.pd-shot .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(3,47,88,.55);color:#fff;
  font-family:var(--display);font-size:22px}
.pd-all{position:absolute;right:12px;bottom:12px;border:0;border-radius:8px;background:rgba(255,255,255,.95);color:var(--ink);
  font-weight:600;font-size:13px;line-height:1;padding:10px 14px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.pd-none{grid-column:1/-1;grid-row:1/-1;display:grid;place-items:center;color:var(--mid);min-height:240px}
.pd-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:20px;flex-wrap:wrap}
.pd-title{flex:1;min-width:260px}
.pd-title .marks{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.pd-title h1{font-size:clamp(26px,3.2vw,36px);line-height:1.15}
.pd-where{color:var(--mid);font-size:15px;margin-top:6px}
.pd-where a{color:var(--navy);font-weight:600}
.pd-meta{font-size:11.5px;color:var(--soft);letter-spacing:.06em;margin-top:6px}
.pd-price{text-align:right;display:grid;gap:2px}
.pd-price b{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,40px);color:var(--navy);line-height:1}
.pd-price span{font-size:13.6px;color:var(--mid)}
.pd-price small{font-size:12.4px;color:var(--ok)}
.pd-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;margin:18px 0 0;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.pd-facts div{padding:14px 16px;border-right:1px solid var(--line-2)}
.pd-facts div:last-child{border-right:0}
.pd-facts dt{font-family:var(--data);font-size:10.4px;letter-spacing:.11em;text-transform:uppercase;color:var(--soft)}
.pd-facts dd{margin:4px 0 0;font-size:16px;font-weight:600;color:var(--ink)}
.pd-tabs{position:sticky;top:72px;z-index:40;background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 6px 14px -12px rgba(10,36,64,.4)}
.pd-tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.pd-tabs a{padding:14px 14px 12px;font-size:14px;font-weight:600;color:var(--mid);white-space:nowrap;border-bottom:3px solid transparent}
@media (hover:hover) and (pointer:fine){.pd-tabs a:hover{color:var(--navy);border-bottom-color:var(--gold)}}
.pd-tabs-price{margin-left:auto;align-self:center;font-family:var(--display);font-size:20px;color:var(--navy);padding-left:14px;white-space:nowrap}
.pd-body{padding-top:24px}
.pd-body .panel{scroll-margin-top:140px}
.pd-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--line-2)}
.pd-table div{display:grid;grid-template-columns:44% 1fr;gap:10px;padding:11px 4px;border-bottom:1px solid var(--line-2)}
.pd-table div:nth-child(odd){padding-right:18px}
.pd-table dt{color:var(--mid);font-size:13.8px}
.pd-table dd{margin:0;font-size:14.2px;font-weight:600}
.pd-highlights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.pd-highlights li{position:relative;padding-left:28px;font-size:14.6px}
.pd-highlights li::before{content:"\2713";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;
  background:var(--ok-wash);color:var(--ok);font-size:11px;font-weight:700;display:grid;place-items:center}
.pd-about p{font-size:15px;line-height:1.7}
.pd-sub{font-family:var(--data);font-size:10.6px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);margin:16px 0 10px}
.pd-sub:first-of-type{margin-top:4px}
.pd-amen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.pd-amen li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;font-size:13.8px;background:#FBFDFF}
.pd-amen li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--gold)}
.pd-video{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000}
.pd-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pd-note{font-size:13px;color:var(--soft);margin-top:10px}
.pd-near{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 22px;margin-top:16px}
.pd-near ul{list-style:none;margin:0;padding:0}
.pd-near li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line-2);font-size:14px}
.pd-near li b{font-family:var(--data);font-size:12.6px;color:var(--navy);white-space:nowrap}
.pd-units{width:100%;border-collapse:collapse;font-size:14px}
.pd-units th{text-align:left;font-family:var(--data);font-size:10.4px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);
  padding:10px 8px;border-bottom:2px solid var(--line)}
.pd-units td{padding:12px 8px;border-bottom:1px solid var(--line-2)}
.pd-units td b{color:var(--navy)}
.pd-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;margin:0}
.pd-specs div{padding:10px 0;border-bottom:1px solid var(--line-2)}
.pd-specs dt{font-weight:600;font-size:13.8px}
.pd-specs dd{margin:2px 0 0;color:var(--mid);font-size:13.8px}
.pd-stickybar{display:none}
@media (max-width:760px){
  .pd-gallery,.pd-gallery.n2,.pd-gallery.n3,.pd-gallery.n4{grid-template-columns:1fr 1fr;grid-template-rows:230px 110px}
  .pd-shot.big{grid-column:1/-1;grid-row:auto}
  .pd-shot:nth-child(n+4){display:none}
  .pd-gallery.n1{grid-template-rows:260px}
  .pd-price{text-align:left}
  .pd-table,.pd-highlights,.pd-specs{grid-template-columns:1fr}
  .pd-table div:nth-child(odd){padding-right:4px}
  .pd-tabs{top:64px}
  .pd-tabs-price{display:none}
  .pd-stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;align-items:center;justify-content:space-between;
    gap:12px;padding:10px 16px;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 18px -10px rgba(10,36,64,.35)}
  .pd-stickybar span{font-family:var(--display);font-size:22px;color:var(--navy)}
  .pd-body{padding-bottom:70px}
}

/* The viewer */
html.lb-lock{overflow:hidden}
.lb{position:fixed;inset:0;z-index:200;display:none;flex-direction:column;background:rgba(6,14,26,.96);color:#fff}
.lb.open{display:flex}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
.lb-count{font-family:var(--data);font-size:13px;letter-spacing:.08em;color:#C9D6E6}
.lb-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;
  font-size:28px;line-height:1;cursor:pointer}
.lb-stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px}
.lb-img{max-width:min(1200px,calc(100% - 120px));max-height:100%;object-fit:contain;border-radius:6px;user-select:none}
.lb-nav{flex:none;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:34px;
  line-height:1;cursor:pointer}
@media (hover:hover) and (pointer:fine){.lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.24)}}
.lb-cap{text-align:center;font-size:14px;color:#DDE6F1;min-height:22px;margin:10px 16px 6px}
/* zoom in the viewer (client, 19 October 2026) */
.lb-tools{display:flex;align-items:center;gap:6px}
.lb-tool{min-width:44px;height:44px;padding:0 12px;border-radius:22px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;
  font:600 18px/1 var(--body,inherit);cursor:pointer}
.lb-tool.lb-fit{font-size:14px}
.lb-pct{min-width:52px;text-align:center;font-family:var(--data);font-size:13px;color:#C9D6E6}
@media (hover:hover) and (pointer:fine){.lb-tool:hover{background:rgba(255,255,255,.24)}}
.lb-tool:focus-visible,.lb-close:focus-visible,.lb-nav:focus-visible{outline:3px solid var(--gold-lt);outline-offset:2px}
.lb-stage{touch-action:none;overflow:hidden}
.lb-stage.zoomed .lb-img{cursor:grab}
.lb-stage.zoomed.dragging .lb-img{cursor:grabbing}
.lb-img{transform-origin:center;will-change:transform;-webkit-user-drag:none}
.lb-img.lb-plan{background:#F7F5EF}
.lb-nav{position:relative;z-index:2}
@media (max-width:640px){.lb-top{flex-wrap:wrap;gap:8px}.lb-tool{min-width:40px;height:40px;padding:0 10px}}
/* the moving boxes on a property page (client, 19 October 2026) */
.pd-shot img{transition:transform .35s ease,opacity .28s ease}
.pd-shot img.pd-fading{opacity:0}
@media (prefers-reduced-motion:reduce){.pd-shot img{transition:none}}
.lb-strip{display:flex;gap:6px;overflow-x:auto;padding:8px 16px 16px;justify-content:safe center}
.lb-thumb{flex:none;width:76px;height:56px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;
  background:#1b2738;cursor:pointer;opacity:.6}
.lb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lb-thumb.on{border-color:var(--gold);opacity:1}
@media (max-width:640px){.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;font-size:28px}
  .lb-prev{left:8px}.lb-next{right:8px}.lb-img{max-width:100%}.lb-thumb{width:58px;height:44px}}

/* ------------------------------------------------------------------
   The search: type tabs over the results, how many are shown, numbered
   pages, and the richer card.
   ------------------------------------------------------------------ */
.kindtabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px;padding-bottom:2px}
.kindtabs a{flex:none;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);
  font-size:13.6px;font-weight:600;color:var(--mid);white-space:nowrap}
.kindtabs a i{font-style:normal;font-family:var(--data);font-size:11.5px;color:var(--soft);margin-left:4px}
.kindtabs a[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.kindtabs a[aria-current="true"] i{color:#BFD3EA}
@media (hover:hover) and (pointer:fine){.kindtabs a:not([aria-current="true"]):hover{border-color:var(--navy);color:var(--navy)}}
.resbar .showing{font-family:var(--data);font-size:12px;color:var(--soft)}
.pager.numbered{gap:6px;flex-wrap:wrap}
.pager .pg{min-width:40px;height:40px;padding:0 12px;display:inline-grid;place-items:center;border:1px solid var(--line);
  border-radius:9px;background:var(--paper);font-weight:600;font-size:14px;color:var(--ink)}
.pager .pg.on{background:var(--navy);border-color:var(--navy);color:#fff}
.pager .gap{color:var(--soft);padding:0 4px}
@media (hover:hover) and (pointer:fine){.pager a.pg:hover{border-color:var(--navy);color:var(--navy)}}
.plot .shot .count{position:absolute;right:10px;bottom:10px;background:rgba(6,14,26,.72);color:#fff;font-size:11.5px;
  font-weight:600;padding:4px 8px;border-radius:6px}
.plot .cardfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--line-2)}
.plot .cardfoot small{font-size:12px;color:var(--soft)}
.office-kinds{margin-top:12px;font-size:13.6px;color:var(--mid);background:var(--ground);border-radius:10px;padding:10px 14px}
.office-kinds a{color:var(--navy);font-weight:600}
/* the pick up without a map: a button and a line saying it is saved */
.herebox{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-4px 0 14px}
.herebox[hidden]{display:none}
.here-say{font-size:13px;color:var(--ok,#1B7A53)}


/* ------------------------------------------------------------------
   A property page, as drawn on 10 October 2026 (plot_detail.html,
   designs/2026-10-10-property-and-account). pp- for "property page".
   ------------------------------------------------------------------ */
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
@media (hover:hover) and (pointer:fine){.btn.navy:hover{background:var(--navy-2)}}
.pp .crumb{margin-bottom:14px}
/* the photographs: one large and four small, about 430 px, whatever their own sizes */
.pp-gallery{grid-template-rows:211px 211px;border-radius:16px}
.pp-gallery .pd-shot img{position:absolute;inset:0}
.pp-gallery.n1{grid-template-columns:1fr;grid-template-rows:430px}
.pp-gallery.n1 .pd-shot.big{grid-row:auto}
.pp-gallery.n2{grid-template-columns:2fr 1fr;grid-template-rows:430px}
.pp-gallery.n2 .pd-shot.big{grid-row:auto}
.pp-gallery.n3{grid-template-columns:2fr 1fr}
.pp-gallery.n4{grid-template-columns:2fr 1fr 1fr}
.pp-gallery.n4 .pd-shot:nth-child(4){display:block}
.pp-gallery.n4 .pd-shot:nth-child(2){grid-row:1 / span 2}
.pp-gallery .pd-all{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:10px}
.pp-gallery .pd-all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.pp-head{margin-top:22px}
.pp-head .pd-title .marks{margin-bottom:10px}
.pp-badge{font-family:var(--data);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:6px}
.pp-badge.gold{background:var(--gold-wash);color:var(--gold-ink)}
.pp-badge.blue{background:var(--live-wash);color:var(--navy)}
.pp-badge.green{background:var(--ok-wash);color:var(--ok)}
.pp-badge.red{background:var(--hot-wash);color:var(--hot)}
.pp-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:var(--mid);font-size:15px;margin-top:8px}
.pp-where svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:2}
.pp-where .mono{font-size:12px;color:var(--soft);margin-left:6px}
.pp-links{display:flex;gap:4px;margin-top:20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pp-links a{padding:12px 14px;font-size:15px;font-weight:600;color:var(--mid);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.pp-links a[aria-current="true"]{color:var(--navy);border-bottom-color:var(--gold)}
@media (hover:hover) and (pointer:fine){.pp-links a:hover{color:var(--navy)}}
/* the slim bar that joins the header after the title scrolls away */
.pp-bar{position:fixed;left:0;right:0;top:72px;z-index:55;background:var(--paper);border-bottom:1px solid var(--line);
  box-shadow:0 8px 20px -14px rgba(10,36,64,.35);transform:translateY(-120%);opacity:0;transition:transform .22s ease,opacity .22s ease;pointer-events:none}
.pp-bar.on{transform:none;opacity:1;pointer-events:auto}
.pp-bar .wrap{display:flex;align-items:center;gap:6px;height:56px}
.pp-bar-t{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px;margin-right:12px}
.pp-bar nav{display:flex;gap:2px}
.pp-bar nav a{padding:8px 10px;font-size:14px;font-weight:600;color:var(--mid)}
@media (hover:hover) and (pointer:fine){.pp-bar nav a:hover{color:var(--navy)}}
.pp-bar-p{margin-left:auto;font-family:var(--display);font-size:22px;color:var(--navy);white-space:nowrap}
.pp-bar .btn{margin-left:12px}
/* the two columns */
.pp-cols{display:flex;gap:28px;align-items:flex-start;margin-top:24px}
.pp-main{flex:1 1 640px;min-width:0;display:flex;flex-direction:column;gap:20px}
.pp-main>*{scroll-margin-top:150px}
/* a venture's one header: Land, Plots, Approvals, TG RERA (owner, 19 October 2026) */
.vt-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:4px 0 14px}
.vt-head>div{padding:14px 16px;border-left:1px solid var(--line-2);display:grid;gap:3px;align-content:start;min-width:0}
.vt-head>div:first-child{border-left:0}
.vt-head span{display:flex;gap:6px;align-items:center;font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.vt-head span .ic{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vt-head b{font-size:18px;color:var(--navy)}
.vt-head small{font-family:var(--data);font-size:12px;color:var(--mid);overflow-wrap:anywhere}
@media (max-width:760px){.vt-head{grid-template-columns:repeat(2,minmax(0,1fr))}.vt-head>div:nth-child(3){border-left:0}.vt-head>div:nth-child(n+3){border-top:1px solid var(--line-2)}}
/* the venture's price list: the rates, the sizes, the calculator */
.vp-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:18px;align-items:start}
.vp-cols h3{font-size:16px;color:var(--navy);margin-bottom:8px}
.vp-rates{background:var(--ground);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px}
.vp-rates dl{margin:0}
.vp-rates dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.vp-rates dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ok);white-space:nowrap}
.vp-rates .vp-base dd{color:var(--navy);font-size:16px}
.vp-h{margin:10px 0 0;font-family:var(--data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.vp-table{width:100%;border-collapse:collapse;font-size:14px}
.vp-table th{text-align:left;font-family:var(--data);font-size:10.4px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);font-weight:600;padding:8px;border-bottom:1px solid var(--line)}
.vp-table td{padding:10px 8px;border-bottom:1px solid var(--line-2);vertical-align:top;font-variant-numeric:tabular-nums}
.vp-table td b{color:var(--navy)}
.vp-table .r{text-align:right;white-space:nowrap}
.vp-fs{display:flex;flex-wrap:wrap;gap:4px}
.vp-f{display:inline-block;font-size:12px;border:1px solid var(--line);border-radius:6px;padding:0 6px;color:var(--mid)}
.vp-table td:first-child,.vp-table td[data-l="Road"],.vp-table td[data-l="Area"]{white-space:nowrap}
.vp-calc{margin-top:14px;background:var(--ground);border:1px solid var(--line-2);border-radius:12px;padding:14px;display:grid;gap:12px}
.vp-calc[hidden]{display:none}
.vp-cr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.vp-cr label{display:grid;gap:4px;font-size:12px;font-weight:600;color:var(--mid);min-width:0}
.vp-cr select{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--paper);color:var(--ink);min-width:0;width:100%}
.vp-cr .vp-ck{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--ink);padding-bottom:9px}
.vp-sum{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px}
.vp-sum small{font-family:var(--data);font-size:12px;color:var(--mid);overflow-wrap:anywhere;min-width:0}
.vp-sum b{font-family:var(--display);font-size:26px;font-weight:500;color:var(--navy);white-space:nowrap}
@media (max-width:900px){.vp-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .vp-table thead{display:none}
  .vp-table,.vp-table tbody,.vp-table tr{display:block}
  .vp-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:4px}
  .vp-table td{display:grid;gap:2px;border:0;padding:6px 10px}
  .vp-table td::before{content:attr(data-l);font-family:var(--data);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
  .vp-table .r{text-align:left}
  .vp-cr{grid-template-columns:minmax(0,1fr)}
}
/* a home project's unit types, a tab for each BHK (owner, 19 October 2026) */
.hm-group{display:grid;gap:14px}
.hm-group[hidden]{display:none}
.hm-gh{font-size:16px;color:var(--navy);margin-top:6px}
.hm-tabbed .hm-gh{display:none}
.hm-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px;border:1px solid var(--line);border-radius:12px;padding:14px}
.hm-plan{aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:10px;background:var(--ground);display:grid;place-items:center;overflow:hidden;color:var(--soft);font-size:13px}
.hm-plan img{width:100%;height:100%;object-fit:contain;background:#fff}
.hm-body{display:grid;gap:10px;align-content:start;min-width:0}
.hm-t{font-size:17px;color:var(--ink)}
.hm-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0}
.hm-facts div{background:var(--ground);border-radius:9px;padding:6px 10px;min-width:0}
.hm-facts dt{font-size:11.5px;color:var(--soft)}
.hm-facts dd{margin:2px 0 0;font-weight:600;font-size:14px;overflow-wrap:anywhere}
.hm-facts .hm-price dd{color:var(--navy);font-size:16px}
.hm-rooms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;margin:0}
.hm-rooms div{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dotted var(--line);font-size:13.5px;min-width:0}
.hm-rooms dt{color:var(--mid)}
.hm-rooms dd{margin:0;font-family:var(--data);font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:700px){.hm-card{grid-template-columns:minmax(0,1fr)}}
@media (max-width:400px){.hm-rooms{grid-template-columns:minmax(0,1fr)}}
/* location highlights, one under another, the picture under them */
.lh-list{list-style:none;margin:0;padding:0;display:grid}
.lh-list li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:15px}
.lh-list i{width:26px;height:26px;border-radius:8px;background:var(--live-wash);display:grid;place-items:center}
.lh-list svg{width:15px;height:15px;fill:none;stroke:var(--navy);stroke-width:1.8}
.lh-list b{font-family:var(--data);font-size:13px;font-weight:500;color:var(--mid);white-space:nowrap}
.lh-img{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:12px;margin-top:14px;border:1px solid var(--line)}
.pp-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pp-facts div{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.pp-facts svg{width:20px;height:20px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-facts span{display:block;font-family:var(--data);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-top:8px}
.pp-facts b{display:block;font-size:15px;margin-top:2px}
.pp-card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:0 1px 2px rgba(10,36,64,.05),0 10px 30px rgba(10,36,64,.06)}
.pp-card h2{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 14px}
.pp-card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pp-card-h h2{margin:0}
/* the plot's 3D drawing, a still in the office's chosen view (12 October 2026) */
.pp-3d .stage{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,#E8EFF8 0%,#D3E1F0 100%)}
.pp-3d #plot3d{display:block;width:100%;height:520px}
.pp-3d #plotlabels{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pp-3d .p3-compass{position:absolute;right:14px;top:12px;width:56px;height:56px;pointer-events:none}
.pp-3d .noglmsg{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;color:var(--mid)}
.pp-3d-size{font-family:var(--data);font-size:11.5px;letter-spacing:.06em;color:var(--ok,#1B7A53);background:var(--ok-wash,#E6F4EC);border-radius:6px;padding:4px 9px}
/* the plot drawn flat and even, in a 4 by 3 frame (owner, 19 October 2026) */
.pp-plan{aspect-ratio:4/3;max-width:640px;width:100%;margin:0 auto;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#F7F5EF}
.pp-plan img{display:block;width:100%;height:100%;object-fit:contain}
.pp-plan-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px auto 0;max-width:640px}
.pp-plan-facts div{background:var(--ground);border:1px solid var(--line-2);border-radius:9px;padding:7px 10px;min-width:0}
.pp-plan-facts dt{font-size:11.5px;color:var(--soft)}
.pp-plan-facts dd{margin:2px 0 0;font-size:14px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
@media (max-width:560px){.pp-plan-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pp-3d-open{display:flex;margin:14px auto 0}
.pp-3d-box{margin-top:12px}
.pd-shot.pd-plan img{object-fit:contain;background:#F7F5EF}
.pp-sides{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:14px 0 0}
.pp-sides div{border:1px solid var(--line-2);border-radius:8px;padding:8px 10px;min-width:0}
.pp-sides dt{font-size:11.5px;color:var(--soft)}
.pp-sides dd{margin:2px 0 0;font-size:15px;font-weight:600;color:var(--ink)}
@media (max-width:640px){.pp-3d #plot3d{height:280px}.pp-sides{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pp-sub{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-ink)}
.pp-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pp-groups dl{margin:8px 0 0}
.pp-groups dl div{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.pp-groups dt{color:var(--mid)}
.pp-groups dd{margin:0;font-weight:600;text-align:right}
.pp-about{margin:0;color:var(--mid);font-size:15px;line-height:1.65}
.pp-ticks{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.pp-ticks li{display:flex;align-items:center;gap:10px;font-size:14.5px}
.pp-ticks i{width:24px;height:24px;flex:none;border-radius:50%;background:var(--ok-wash);color:var(--ok);display:inline-flex;align-items:center;justify-content:center}
.pp-ticks svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6}
.pp-seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--ground);padding:4px;border-radius:10px}
.pp-seg button{font:inherit;font-size:13px;font-weight:600;height:32px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--mid);cursor:pointer}
.pp-seg button[aria-pressed="true"]{background:var(--paper);color:var(--navy);box-shadow:0 1px 3px rgba(10,36,64,.12)}
.pp-amen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px}
.pp-amen li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2);font-size:14px;font-weight:500}
.pp-amen li[hidden]{display:none}
.pp-amen i{width:36px;height:36px;flex:none;border-radius:10px;background:var(--live-wash);color:var(--navy);display:inline-flex;align-items:center;justify-content:center}
.pp-amen svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-place{margin:-8px 0 16px;color:var(--mid);font-size:14px}
.pp-dist{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.pp-dist div{flex:1 1 170px;background:var(--ground);border-radius:12px;padding:14px 16px}
.pp-dist span{font-size:13px;color:var(--mid)}
.pp-dist b{display:block;font-family:var(--display);font-weight:500;font-size:26px;color:var(--navy);margin-top:2px}
.pp-near{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
.pp-near-h{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.pp-near-h svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.8}
.pp-near ul{list-style:none;margin:4px 0 0;padding:0}
.pp-near li{display:flex;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.pp-near li b{font-family:var(--data);font-size:12px;font-weight:500;color:var(--navy);background:var(--live-wash);padding:2px 8px;border-radius:99px;white-space:nowrap}
/* the price and the buttons beside it */
.pp-aside{width:340px;flex:none;position:sticky;top:150px;display:flex;flex-direction:column;gap:14px}
.pp-buy{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 1px 2px rgba(10,36,64,.05),0 10px 30px rgba(10,36,64,.08)}
.pp-buy-top{padding:20px 22px;border-bottom:1px solid var(--line-2);display:grid;gap:2px}
.pp-buy-top span{font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.pp-buy-top b{font-family:var(--display);font-weight:400;font-size:36px;line-height:1.05;color:var(--navy);margin-top:2px}
.pp-buy-top small{font-size:13px;color:var(--mid)}
.pp-buy-top em{font-style:normal;justify-self:start;font-family:var(--data);font-size:11px;letter-spacing:.06em;text-transform:uppercase;background:var(--ok-wash);color:var(--ok);padding:3px 8px;border-radius:4px;margin-top:4px}
.pp-buy-do{padding:18px 22px;display:flex;flex-direction:column;gap:10px}
.pp-buy-do form{margin:0}
.pp-buy-do .btn{min-height:46px}
.pp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pp-fav[aria-pressed="true"]{color:var(--hot);border-color:var(--hot)}
.pp-small{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 22px}
.pp-small>b{font-size:15px}
.pp-small p{margin:6px 0 0;font-size:14px;color:var(--mid)}
.pp-small dl{margin:10px 0 0;display:grid;gap:8px}
.pp-small dl div{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.pp-small dt{color:var(--mid)}.pp-small dd{margin:0;font-weight:600;text-align:right}
@media (max-width:1100px){.pp-amen{grid-template-columns:repeat(3,minmax(0,1fr))}.pp-groups{grid-template-columns:1fr 1fr}}
@media (max-width:980px){
  .pp-cols{flex-direction:column;align-items:stretch}
  .pp-main{width:100%}
  .pp-groups dd,.pp-amen li,.pp-near li span{overflow-wrap:anywhere}
  .pp-aside{width:auto;position:static}
  .pp-bar{display:none}
  .pp-gallery,.pp-gallery.n2,.pp-gallery.n3,.pp-gallery.n4{grid-template-columns:1fr 1fr;grid-template-rows:240px 120px}
  .pp-gallery .pd-shot.big,.pp-gallery.n4 .pd-shot:nth-child(2){grid-column:1/-1;grid-row:auto}
  .pp-gallery .pd-shot:nth-child(n+4){display:none}
  .pp-gallery.n1{grid-template-rows:260px}
}
@media (max-width:640px){.pp-groups,.pp-ticks{grid-template-columns:minmax(0,1fr)}.pp-amen{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------------------------
   Every width from a 320 px phone to a 1920 px screen (10 October 2026,
   tools/responsive_audit.py checks sixteen of them).
   ------------------------------------------------------------------ */
/* the key facts: two to a row on a phone, and a last odd one runs the full width */
@media (max-width:640px){
  .pp-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-facts div:last-child:nth-child(odd){grid-column:1/-1}
}
@media (min-width:641px) and (max-width:1100px){
  .pp-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* the steps under a plot: on a small phone only the step it is at keeps its name */
@media (max-width:420px){
  .tracklabels li{display:none}
  .tracklabels li.now{display:block;flex:1;text-align:left}
}

/* ------------------------------------------------------------ 11 October 2026
   The owner's review (designs/2026-10-11-owner-review): icons with words on
   the buttons, Request a call back, and its boxes and window. */
.btn .ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.btn .ic-wa{fill:#1FA855;stroke:none}
.btn .ic-heart{stroke:var(--hot)}
.btn[aria-pressed="true"] .ic-heart{fill:var(--hot)}
.btn.sv[aria-pressed="true"]{border-color:var(--hot);color:var(--hot);background:var(--hot-wash)}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pair form{margin:0;min-width:0}
.pair .btn{width:100%;padding-left:10px;padding-right:10px}
.cbk{margin:0}
.btn.cbk-done,.btn.cbk-done:disabled{background:var(--ok-wash);border-color:var(--ok);color:var(--ok);opacity:1;cursor:default}
.btn:disabled{cursor:progress}
.cbk-trap{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.cbk-fields{display:grid;gap:12px;margin-bottom:12px}
.cbk-fields[hidden]{display:none}
.cbk-fields .fld{margin:0}
.cbk-hint{font-size:13.6px;color:var(--mid)}
.fld>label i{font-style:normal;font-family:var(--body);letter-spacing:0;text-transform:none;color:var(--soft);font-weight:400;font-size:12px}
.fld .req{color:var(--hot);margin-left:2px}
.inp{width:100%;height:46px;font:inherit;font-size:15px;padding:0 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.inp:focus{outline:none;border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(26,95,160,.14)}
.inp::placeholder,.affix input::placeholder{color:var(--soft)}
.inp.bad,.affix.bad{border-color:var(--hot);background:#FFFBFB}
.affix{display:flex;align-items:stretch;height:46px;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden;
  transition:border-color .15s,box-shadow .15s}
.affix:focus-within{border-color:var(--navy-2);box-shadow:0 0 0 3px rgba(26,95,160,.14)}
.affix>span{display:grid;place-items:center;padding:0 12px;background:var(--ground);color:var(--mid);font-family:var(--data);font-size:13.5px;border-right:1px solid var(--line-2)}
.affix input{flex:1;min-width:0;border:0!important;background:none!important;box-shadow:none!important;outline:0;padding:0 13px!important;font:inherit;font-size:15px;color:var(--ink)}
.fld-err{display:block;font-size:12.8px;color:var(--hot);font-weight:500;margin-top:5px}
.fld-err[hidden]{display:none}

html.cbk-open{overflow:hidden}
.cbk-back{position:fixed;inset:0;z-index:900;background:rgba(4,22,42,.5);display:grid;place-items:center;padding:16px;animation:cbk-fade .15s ease-out}
.cbk-back[hidden]{display:none}
@keyframes cbk-fade{from{opacity:0}to{opacity:1}}
.cbk-dlg{background:var(--paper);border-radius:18px;width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;
  box-shadow:0 30px 60px rgba(4,22,42,.3);animation:cbk-rise .18s ease-out}
@keyframes cbk-rise{from{transform:translateY(10px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cbk-back,.cbk-dlg{animation:none}}
.cbk-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:22px 24px 4px}
.cbk-h h2{font-size:25px;color:var(--navy)}
.cbk-h p{font-size:14px;color:var(--mid);margin-top:4px}
.cbk-x{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;flex:none}
.cbk-x svg{width:16px;height:16px;fill:none;stroke:var(--mid);stroke-width:2.2;stroke-linecap:round}
@media (hover:hover){.cbk-x:hover{border-color:var(--navy)}}
.cbk-b{padding:16px 24px 24px;display:grid;gap:14px}
.cbk-prop{display:flex;gap:12px;align-items:center;background:var(--ground);border-radius:11px;padding:10px}
.cbk-prop[hidden]{display:none}
.cbk-prop img{width:60px;height:46px;border-radius:7px;object-fit:cover;flex:none}
.cbk-prop img[hidden]{display:none}
.cbk-prop b{display:block;font-size:14px;line-height:1.3}
.cbk-prop small{font-family:var(--data);font-size:12px;color:var(--mid)}
.cbk-inner{display:grid;gap:12px}
.cbk-inner .cbk-fields{margin:0}
.pp-buy-dl{margin:12px 0 0;display:grid;gap:6px}
.pp-buy-dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.6px;color:var(--mid)}
.pp-buy-dl dd{margin:0;color:var(--ink);font-weight:600;text-align:right}
.pp-buy-do .pair .btn{min-height:46px}

/* Property details: each group a full width table of four equal boxes a
   row, the name above the value; What is around it in boxes, every
   distance the same pill on the same edge (owner, 11 October 2026). */
.pp-grp{margin-top:20px}
.pp-grp-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
/* a plot's details, every fact in its own card (client's sketch, 19 October 2026) */
.pp-fcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,178px),1fr));gap:10px}
.pp-fc{display:flex;flex-direction:column;gap:3px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--paper)}
.pp-fc span{font-size:12.5px;color:var(--soft)}
.pp-fc b{font-size:15.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.pp-fc b.no{color:#B4232C}
.pp-fc small{font-family:var(--data);font-size:12px;color:var(--ok);overflow-wrap:anywhere}
.pp-grp + .pp-grp{margin-top:20px}
/* Project highlights: the layout's features and our team's lines, ticked */
.pp-hl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:10px}
.pp-hl li{display:flex;align-items:center;gap:10px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:var(--paper);font-size:14.5px}
.pp-hl li::before{content:"¹3";flex:none;width:22px;height:22px;border-radius:50%;background:var(--ok-wash);color:var(--ok);font-weight:700;font-size:13px;display:grid;place-items:center}
.pp-grp-h i,.pp-near-h i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none}
.pp-grp-h i{background:var(--gold-wash);color:var(--gold-ink)}
.pp-grp-h svg,.pp-near-h svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border:1px solid var(--line-2);border-bottom:0;border-radius:12px;overflow:hidden}
.pp-grid>div{min-width:0;min-height:68px;padding:12px 16px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.pp-grid>div:nth-child(4n){border-right:0}
.pp-grid dt{font-size:12.8px;color:var(--soft)}
.pp-grid dd{margin:3px 0 0;font-weight:600;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.pp-grid .pp-pad{background:var(--ground)}
@media (max-width:820px){
  .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-grid>div:nth-child(4n){border-right:1px solid var(--line-2)}
  .pp-grid>div:nth-child(2n){border-right:0}
  .pp-grid .pp-pad{display:none}
  .pp-grid>div:nth-last-child(1 of :not(.pp-pad)):nth-child(odd){grid-column:1/-1;border-right:0}
}
@media (max-width:420px){.pp-grid>div{padding:11px 12px}}
.pp-near{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.pp-near-col{border:1px solid var(--line-2);border-radius:12px;overflow:hidden;min-width:0}
.pp-near .pp-near-h{padding:11px 14px;background:var(--ground);gap:10px}
.pp-near-h i{background:var(--paper);color:var(--gold-deep);border:1px solid var(--line-2)}
.pp-near-h small{margin-left:auto;font-weight:400;font-size:12.4px;color:var(--soft)}
.pp-near ul{margin:0;padding:0 14px}
.pp-near li{display:grid;grid-template-columns:minmax(0,1fr) 68px;align-items:center;gap:12px;min-height:48px;padding:6px 0;border-bottom:0;border-top:1px solid var(--line-2)}
.pp-near li:first-child{border-top:0}
.pp-near li b{display:grid;place-items:center;height:28px;padding:0;border-radius:7px;font-size:12.4px;font-weight:600;font-variant-numeric:tabular-nums}
.pp-near li b.none{background:none}
@media (max-width:1100px){.pp-near{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pp-near{grid-template-columns:minmax(0,1fr)}}

/* The fencing page as drawn on 11 October 2026: the steps in one box, Ask
   for a quotation as a band, the form the full width in four parts. */
.steps-box{list-style:none;margin:18px 0 0;padding:28px 14px;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));box-shadow:0 1px 2px rgba(10,36,64,.05),0 10px 30px rgba(10,36,64,.06)}
.steps-box li{position:relative;padding:0 14px;text-align:center;min-width:0}
.steps-box b{width:40px;height:40px;margin:0 auto;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;
  font-family:var(--data);font-size:14px;position:relative;z-index:1;box-shadow:0 0 0 6px var(--paper)}
.steps-box li:not(:last-child)::before{content:"";position:absolute;top:19px;left:calc(50% + 30px);right:calc(-50% + 30px);height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 14px)}
.steps-box strong{display:block;margin-top:14px;font-size:16px;color:var(--ink)}
.steps-box span{display:block;max-width:30ch;margin:4px auto 0;font-size:14px;color:var(--mid);text-wrap:balance}
.askband{margin-top:18px;border-radius:16px;background:linear-gradient(120deg,#032F58,#00447E);color:#fff;padding:26px 30px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;scroll-margin-top:90px}
.askband .tag{color:var(--gold-lt)}
.askband h2{color:#fff;font-size:clamp(26px,2.6vw,34px);margin-top:6px}
.askband h2 em{font-style:italic;font-weight:300;color:var(--gold-lt)}
.askband p{color:rgba(255,255,255,.84);margin-top:8px;max-width:72ch;font-size:15px}
.askband-mine{display:grid;gap:2px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:14px 20px;
  font-size:13.6px;color:#E4EEF8;min-width:220px}
.askband-mine b{font-family:var(--display);font-weight:400;font-size:22px;color:#fff}
.askband-mine span{color:var(--gold-lt);font-weight:600}
@media (hover:hover) and (pointer:fine){.askband-mine:hover{background:rgba(255,255,255,.16)}}
.fform{margin-top:18px;background:var(--paper);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 2px rgba(10,36,64,.05),0 10px 30px rgba(10,36,64,.06)}
.fform-h{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;padding:22px 30px;border-bottom:1px solid var(--line-2)}
.fform-h h2{font-size:28px;margin-top:4px}
.fform-h p{font-size:14px;color:var(--mid);margin-top:4px}
.fform-h small{font-size:13px;color:var(--mid)}
.fform-h .req{color:var(--hot)}
.fform-note{padding:16px 30px 0}
.fform-note .note{margin:0}
.fsec{display:grid;grid-template-columns:240px minmax(0,1fr);gap:30px;padding:26px 30px;border-bottom:1px solid var(--line-2)}
.fsec-l b{display:flex;gap:10px;align-items:center;font-size:16px}
.fsec-l b span{width:26px;height:26px;border-radius:50%;background:var(--gold-wash);color:var(--gold-ink);font-family:var(--data);font-size:12px;display:grid;place-items:center;flex:none}
.fsec-l p{font-size:13.6px;color:var(--mid);margin-top:6px;padding-left:36px}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-content:start;min-width:0}
.fgrid>*{min-width:0}
.fgrid .full{grid-column:1/-1}
.fgrid .fld,.fgrid .full>.fld{margin:0}
.fgrid .fld input:not([type=checkbox]):not([type=radio]):not([type=file]),.fgrid .fld select,.fgrid .sk-btn{min-height:48px;border-radius:10px}
.fgrid .fld.off{opacity:.5}
.fform-f{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 30px}
.fform-f small{font-size:14px;color:var(--mid)}
.fform-btns{display:flex;gap:10px;flex-wrap:wrap}
.fform-out .fform-f .cbk{flex:0 0 auto}
.worktiles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.worktile{position:relative;display:grid!important;gap:10px;align-content:start;padding:14px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--paper);cursor:pointer;font-family:var(--body)!important;font-size:14px!important;font-weight:600!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--ink)!important;line-height:1.3;transition:border-color .15s,box-shadow .15s;margin:0!important}
.worktile input{position:absolute;opacity:0;pointer-events:none}
.worktile i{width:38px;height:38px;border-radius:10px;background:var(--ground);color:var(--navy);display:grid;place-items:center}
.worktile svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.worktile:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,95,160,.14)}
.worktile:has(input:checked) i{background:var(--navy);color:#fff}
.worktile:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.fld.bad .worktile{border-color:var(--hot)}
.switch-row{display:flex!important;align-items:center;gap:12px;min-height:48px;border:1px solid var(--line);border-radius:10px;padding:0 14px;
  background:var(--paper);cursor:pointer;font-family:var(--body)!important;font-size:15px!important;font-weight:500!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--ink)!important;margin:0!important}
.switch-in{-webkit-appearance:none;appearance:none;width:40px;height:24px;border-radius:12px;background:var(--line);position:relative;margin:0;cursor:pointer;flex:none;transition:background .15s}
.switch-in::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.switch-in:checked{background:var(--ok)}
.switch-in:checked::after{transform:translateX(16px)}
.switch-in:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:1080px){.worktiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:980px){
  .steps-box{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}
  .steps-box li:nth-child(2)::before{display:none}
  .askband{grid-template-columns:minmax(0,1fr)}
  .fsec{grid-template-columns:minmax(0,1fr);gap:16px}
  .fsec-l p{padding-left:0}
}
@media (max-width:700px){
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .fld-blank{display:none}
  .worktiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fsec,.fform-h,.fform-f{padding-left:18px;padding-right:18px}
  .askband{padding:22px 20px}
}
@media (max-width:520px){
  .steps-box{grid-template-columns:minmax(0,1fr)}
  .steps-box li::before{display:none}
}

/* the price bar at the foot of a property on a phone: the call back button fits beside the price */
.pd-stickybar .cbk{flex:none}
/* a price range (a venture) wraps rather than pushing the button off a phone */
.pd-stickybar span{min-width:0;flex:1 1 auto;line-height:1.1;overflow-wrap:anywhere}
@media (max-width:380px){.pd-stickybar .btn{padding:8px 11px;font-size:13px;gap:6px}.pd-stickybar span{font-size:19px}}

/* a card opens its property wherever it is pressed (client, 16 October 2026):
   the name's link is stretched over the card; marks and buttons sit above */
.plot-click{position:relative}
.plot-click .body h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.plot-click .marks,.plot-click .cardfoot .btn,.plot-click form,.plot-click button{position:relative;z-index:2}