/* Watermelon Estates — pitch demo, Direction B "Editorial".

   Structure, palette, layout and photography grading follow the approved
   the approved visual pass. The type system is the corrected
   specification from the build note, not the one in the mockup screenshots:

     - Interface is sans, always. Inter Tight (fallback Archivo) carries
       navigation, search fields, filter options, buttons, facts, labels,
       prices and every number. No serif inside a control or form field.
     - Serif is headings only. Source Serif 4 at 400: page and section
       headings, and the property name. Nothing else.
     - Headings cap at 44px mobile, 64px desktop.
     - Small caps tracking is .08em, never .22em.
     - Weights 400 and 600 only. Prices sans 600 with tabular figures.
     - Italic once per page at most, never in interface text.

   Rule one: if a component looks like a default, it is wrong. No border
   radius above 0 anywhere except the 5px status and feed dots. No pills,
   chips, badges, card shadows, solid green fills or grey rounded inputs.
   Structure comes from 1px rules and space. */

:root{
  /* Perumnas tokens, measured via get_design_context on node 0:35, not estimated */
  --ink:#12161D;          /* Neutral/900, headings */
  --ink-60:#61656E;       /* Neutral/600, body */
  --ink-40:#767676;  /* 4.54:1 on white, AA for normal text; was #969696 at 2.96:1 */
  --ground:#FFFFFF;       /* KC 17 Sep: the Perumnas grey is rejected, ground is pure white */
  --surface:#FFFFFF;      /* white blocks; on a white ground they are separated by --line */
  --line:#E6E6E6;         /* card border on white. 1px, radius 0, never a shadow */
  --rule:rgba(18,22,29,.14);
  --rule-on-ink:rgba(255,255,255,.22);
  --green-brand:#188A39; /* brand green of record, sampled from the logo */
  --green:#188738;       /* applied. White on #188A39 computes to 4.437:1, which
                            fails AA for normal text; Task F's stated 4.55 is wrong.
                            Same hue and saturation, lightness .318 -> .312, giving
                            4.604:1. The shift is 0.6% and is not perceptible. */
  --red:#E94F51;         /* brand red, sampled from the logo */

  --sans:"Inter Tight","Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* type scale. Base carries the 375 mobile values; 768 and 1080 step up. */
  --t-h1:28px;  --lh-h1:32px;
  --t-h2:24px;  --lh-h2:28px;
  --t-b:18px;   --lh-b:26px;
  --w-display:500;

  --sec-pad:60px;         /* section top padding, 120 at desktop */
  --pad:20px;
  --max:1440px;
  --hd:56px;
  --grade:grayscale(.12) saturate(.95) contrast(1.07);
  --ease:cubic-bezier(.16,.8,.24,1);
  --motion-reveal:900ms;
  --motion-ui:250ms;
  --motion-sheet:380ms;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;overflow-x:clip}
body{font-family:var(--sans);font-size:var(--t-b);line-height:calc(var(--lh-b)/var(--t-b));
  color:var(--ink-60);background:var(--ground);-webkit-font-smoothing:antialiased;
  font-synthesis-weight:none}
img{display:block;max-width:100%;height:auto}
.responsive-picture{display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0;margin:0}
button{cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
strong,b{font-weight:600}
ul{padding:0;list-style:none}
:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.ft :focus-visible,.hero :focus-visible{outline-color:#fff}

/* wrappers rendered by demo.js must not become a sticky containing block */
#site-header,#site-footer{display:contents}

.in{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.num{font-variant-numeric:tabular-nums lining-nums}
.dsp{font-family:var(--sans);font-weight:var(--w-display);line-height:1.08;letter-spacing:-.018em;
  color:var(--ink)}

.eyebrow,.caps{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-60)}
.caps--ink{color:var(--ink)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;
  padding:12px 18px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.skip-link:focus{left:0}

/* ---------- prototype notice ---------- */

.prototype-strip{border-bottom:1px solid var(--rule);padding:9px var(--pad);text-align:center;
  font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);
  line-height:1.45}

/* ---------- header ---------- */

.nav{position:sticky;top:0;z-index:60;background:var(--surface);
  border-bottom:1px solid transparent;transition:border-bottom-color var(--motion-ui) var(--ease)}
body.past-first-image .nav{border-bottom-color:var(--rule)}
.nav-in{max-width:var(--max);margin:0 auto;min-height:var(--hd);padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:8px}
.mk{width:17px;height:17px;flex:none;display:block}
.logo span{font-family:var(--sans);font-size:21px;font-weight:400;letter-spacing:-.012em;line-height:1}
.logo em{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-60)}
.mobile-menu .logo span{font-size:24px}
.nav nav{display:none}
.nav nav ul{display:flex;gap:26px}
.nav nav a{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding-bottom:2px;border-bottom:1px solid transparent}
.nav nav a[aria-current]{border-bottom-color:var(--ink)}
.nav-r{display:flex;align-items:center;gap:20px}
.burger,.btn.b-sm{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.nav-r .btn{display:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.burger{border-bottom:1px solid var(--ink);padding-bottom:3px}

.mobile-menu{position:fixed;inset:0;z-index:95;background:var(--surface);
  display:flex;flex-direction:column;padding:0 var(--pad) calc(24px + env(safe-area-inset-bottom))}
.mobile-menu[hidden]{display:none}
.menu-head{display:flex;align-items:center;justify-content:space-between;min-height:var(--hd);
  border-bottom:1px solid var(--rule)}
.close-menu{font-size:22px;line-height:1;padding:6px 0 6px 16px}
.mobile-menu nav{display:flex;flex-direction:column;flex:1}
.mobile-menu nav a{font-family:var(--sans);font-size:30px;font-weight:400;padding:18px 0;
  border-bottom:1px solid var(--rule)}
.mobile-menu>.btn{display:flex;width:100%;text-align:center;background:var(--green);color:#FFFFFF;
  border-color:var(--green);padding:0;margin-top:20px;font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
.menu-note{margin-top:16px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40)}

/* ---------- buttons: black or an underline, never a pill ---------- */

.btn{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-radius:0}
.b-pri{background:var(--green);color:#FFFFFF;padding:17px 26px;text-align:center}
.b-out{border-bottom:1px solid var(--ink);padding-bottom:3px}
.tlink{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px}

/* ---------- search row ---------- */

.search-section{position:sticky;top:var(--hd);z-index:80;background:var(--surface);
  border-bottom:1px solid var(--rule);padding-top:0;padding-bottom:0}
.department-tabs{display:flex;gap:22px;padding:10px 0 8px}
.department-tabs button{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40);padding-bottom:4px;border-bottom:1px solid transparent}
.department-tabs button[aria-pressed="true"],
.department-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
.search-primary{display:flex;align-items:center;gap:16px;border-top:1px solid var(--rule);padding:9px 0}
.search-primary .field{flex:1;min-width:0;display:flex}
.search-primary .field label{position:absolute;left:-9999px}
.search-primary input,.search-primary select{flex:1;min-width:0;font-size:17px;padding:5px 0}
.search-primary input::placeholder{color:var(--ink-40)}
.search-primary select{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  appearance:none;-webkit-appearance:none;padding-right:14px;
  background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 3px top 55%/5px 5px no-repeat}
.filter-toggle,.search-primary .btn{font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;white-space:nowrap;border-bottom:1px solid var(--ink);padding-bottom:3px;
  background:none;color:inherit}
.filter-toggle span[aria-hidden]{display:none}
#filter-count{font-variant-numeric:tabular-nums}

/* ---------- filters: a full screen, options are underlined words ---------- */

.more-filters{position:fixed;inset:0;z-index:90;background:var(--surface);
  display:flex;flex-direction:column;padding:0 var(--pad) calc(20px + env(safe-area-inset-bottom));
  overflow:auto}
.more-filters[hidden]{display:none}
.more-filters::before{content:"Filters";display:block;font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;min-height:var(--hd);line-height:var(--hd);
  border-bottom:1px solid var(--ink)}
.more-filters .field{padding:18px 0;border-bottom:1px solid var(--rule)}
.more-filters label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60)}
.more-filters input,.more-filters select{width:100%;font-size:19px;padding:9px 0 0}
.more-filters select{appearance:none;-webkit-appearance:none;
  background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 3px top 70%/6px 6px no-repeat}
.more-filters input::placeholder{color:var(--ink-40)}
.sheet-act{display:flex;margin-top:auto;padding-top:20px;gap:0}
.sheet-act button{flex:1;padding:18px 0;font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--ink)}
.sheet-act button+button{border-left:0;background:var(--green);color:#FFFFFF;flex:1.6}
.form-feedback{padding:12px 0;font-size:13px;color:var(--red)}
.form-feedback[hidden]{display:none}
#filter-error{grid-column:1/-1}

/* ---------- results meta ---------- */

.sync-line,.feed{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green);
  margin:0}
.sync-dot{width:5px;height:5px;background:var(--green);border-radius:50%;flex:none}
.sync-off{color:var(--ink-40)}
.sec .sync-line{margin-top:14px}
.sync-explanation{margin-top:7px;font-size:12px;color:var(--ink-40);letter-spacing:0;text-transform:none;
  font-weight:400}

.results-toolbar{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-top:15px}
.results-toolbar h1{font-size:var(--t-h2);line-height:calc(var(--lh-h2)/var(--t-h2))}
.meta-line{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;
  flex-wrap:wrap;padding-top:9px}
#result-count{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40)}
#result-count strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sort-control{display:flex;align-items:baseline;gap:8px}
.sort-control label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40)}
.sort-control select{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  appearance:none;-webkit-appearance:none;padding-right:13px;text-align:right;
  background:linear-gradient(45deg,transparent 50%,var(--ink) 50%) right 2px top 58%/5px 5px no-repeat}

.active-filters{display:flex;flex-wrap:wrap;gap:8px 20px;padding-top:12px}
.active-filters:empty{padding-top:0}
.chip,.clear-chip{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:3px;background:none}
.clear-chip{color:var(--ink-40);border-bottom-color:var(--rule)}

.collection-disclosure,.home-stock-note{font-size:11.5px;line-height:1.5;color:var(--ink-40);
  max-width:70ch;padding-top:9px}
.active-filters{padding-top:10px}

/* ---------- listing rows: a page, not a card ---------- */

.cards{display:grid;gap:0;padding-top:12px}

.card{position:relative;display:block;border-top:1px solid var(--rule);padding:12px 0 26px}
.card:last-child{border-bottom:1px solid var(--rule)}
.card .m{position:relative;overflow:hidden;margin-bottom:13px}
.card .m img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:var(--grade);
  transition:transform .9s cubic-bezier(.16,.8,.24,1)}
/* Task D: preserve the full stamped photograph on hover and keyboard focus. */
.tagpill{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:7px;
  background:var(--surface);padding:7px 12px 7px 10px;
  font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.tagpill::before{content:"";width:5px;height:5px;background:var(--red);border-radius:50%}
.card .b{display:block}
.card .hdln{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.card .ad{font-family:var(--sans);font-weight:var(--w-display);font-size:clamp(24px,6.6vw,32px);line-height:1;
  letter-spacing:-.008em}
.card .ad em{font-style:normal;font-size:.58em;color:var(--ink-40);letter-spacing:.01em}
.card .pr{font-size:clamp(17px,4.4vw,20px);font-weight:600;white-space:nowrap;line-height:1.1;
  font-variant-numeric:tabular-nums lining-nums}
.card .sub{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:8px;
  font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
.card .sub .n{font-variant-numeric:tabular-nums;color:var(--ink-40)}
.card .sp{display:flex;gap:18px;margin-top:13px;font-size:10.5px;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60)}
.card .sp b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.card .ar{display:block;margin-top:11px;font-size:14.5px;color:var(--ink-60);max-width:52ch;
  letter-spacing:0;text-transform:none}
.card .more{display:inline-block;margin-top:13px;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px}

.empty-state{border-top:1px solid var(--rule);padding:40px 0 24px;max-width:46ch}
.empty-state[hidden]{display:none}
.empty-mark{display:none}
.empty-state h2{font-size:clamp(26px,6.4vw,36px)}
.empty-state h2 em{font-style:normal;color:var(--ink-40)}
.empty-state p{margin:12px 0 18px;color:var(--ink-60)}
.error-note{padding:26px 0;color:var(--red);font-size:14px}
.loading{padding:40px 0;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40)}

.results-section{padding-bottom:44px}

/* ---------- homepage ---------- */

.hero{position:relative;height:min(84vh,700px);overflow:hidden;background:var(--ink)}
.hero>picture{position:absolute;inset:0}
.hero>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  filter:grayscale(.15) saturate(.92) contrast(1.08) brightness(.94)}
.scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,12,16,.94) 0,rgba(10,12,16,.86) 34%,rgba(10,12,16,.58) 66%,rgba(10,12,16,.30) 100%)}
.hero-in{position:absolute;inset:auto 0 0 0;z-index:2;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) calc(60px + env(safe-area-inset-bottom));color:#fff}
.hero h1{font-size:clamp(32px,8.2vw,44px);max-width:14ch}
.hero h1 em{font-style:italic}
.lede{margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.72);max-width:40ch}
.hero .search{margin-top:22px}
.hero .tabs{display:flex;gap:22px;padding-bottom:9px}
.hero .tabs button{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);padding-bottom:4px;border-bottom:1px solid transparent}
.hero .tabs button[aria-selected="true"]{color:#fff;border-bottom-color:#fff}
.hero .f{display:flex;align-items:center;gap:16px;border-top:1px solid rgba(255,255,255,.35);
  padding-top:11px;flex-wrap:wrap}
.hero .f>div:first-child{flex:1;min-width:150px}
.hero .f label{position:absolute;left:-9999px}
.hero .f input{width:100%;font-size:17px;color:#fff;padding:4px 0}
.hero .f input::placeholder{color:rgba(255,255,255,.5)}
.hero .f>div:nth-child(2),.hero .f>div:nth-child(3){display:none}
.hero .f .go .btn{background:none;color:#fff;padding:0 0 3px;border-bottom:1px solid #fff}

.entry{display:none}

.sec{padding:var(--sec-pad) 0 0}
.sec-hd{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--rule);padding-bottom:12px;flex-wrap:wrap}
.sec-hd .rule{display:none}
.sec-hd h2{font-size:var(--t-h2);line-height:calc(var(--lh-h2)/var(--t-h2));margin-top:8px}
.sec-hd h2 em{font-style:normal;color:var(--ink-40)}
.sec-hd .desc{font-size:13.5px;color:var(--ink-60);max-width:34ch}
.center{padding-top:18px;display:flex;align-items:baseline;gap:20px;flex-wrap:wrap}
.portal{font-size:12px;color:var(--ink-40)}
.portal a{border-bottom:1px solid var(--rule)}

.sec.alt{background:var(--ink);color:#fff;margin-top:var(--sec-pad);padding:var(--sec-pad) 0}
.sec.alt .sec-hd{border-bottom-color:var(--rule-on-ink)}
.sec.alt .eyebrow{color:rgba(255,255,255,.55)}
.sec.alt .desc{color:rgba(255,255,255,.6)}
.svc{display:grid;gap:0}
.svc>div{border-top:1px solid var(--rule-on-ink);padding:18px 0}
.svc h3{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-family:var(--sans)}
.svc ul{margin-top:11px;display:grid;gap:6px}
.svc li{font-size:14px;color:rgba(255,255,255,.66)}
.svc .a{margin-top:14px}
.svc .a .btn{border-bottom:1px solid #fff;padding:0 0 3px;background:none;color:#fff}

.steps{display:grid;gap:0}
.steps>div{border-top:1px solid var(--rule);padding:18px 0;display:grid;
  grid-template-columns:3.5ch 1fr;gap:0 16px;align-items:baseline}
.steps .n{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--ink-40);
  font-variant-numeric:tabular-nums;font-family:var(--sans)}
.steps h3{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.steps h3+p{grid-column:2;margin-top:8px;font-size:14px;color:var(--ink-60);max-width:48ch}

.cta{background:var(--ink);color:#fff;margin-top:44px;padding:44px 0}
.cta h2{font-size:clamp(26px,6.4vw,40px);max-width:16ch}
.cta h2 em{font-style:normal;color:rgba(255,255,255,.55)}
.cta p{margin-top:12px;font-size:14px;color:rgba(255,255,255,.66);max-width:44ch}
.acts{display:flex;gap:0;margin-top:24px;flex-wrap:wrap}
.acts .btn{border:1px solid rgba(255,255,255,.45);padding:16px 24px;background:none;color:#fff}
.acts .b-pri{background:var(--green);color:#FFFFFF;border-color:var(--green)}

/* ---------- property detail ---------- */

.property-main{padding-top:14px;padding-bottom:44px}
.back-link{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60)}
.property-layout{display:grid;gap:26px;margin-top:14px;
  grid-template-areas:"media" "side" "body" "cta"}
.pd-media{grid-area:media}
.pd-side{grid-area:side;align-self:start}
.pd-body{grid-area:body}
.pd-cta{grid-area:cta;align-self:start}

.gallery{position:relative;margin:0}
.gallery-button{display:block;width:100%;padding:0;overflow:hidden}
.gallery-button img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:var(--grade)}
.gallery-caption{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid var(--rule);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-40)}
.view-photo{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:1px solid var(--ink);padding-bottom:2px;color:var(--ink)}

.property-heading h1{font-size:var(--t-h1);line-height:calc(var(--lh-h1)/var(--t-h1));margin-top:18px}
.property-heading h1 em{font-style:normal;color:var(--ink-40);font-size:.5em;letter-spacing:.01em}
.property-heading .location{margin-top:12px;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60)}
.property-price{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--rule);
  font-size:24px;font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.property-price small{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40);order:2}
.property-specs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.property-specs div{padding:15px 0}
.property-specs div+div{border-left:1px solid var(--rule);padding-left:15px}
.property-specs strong{display:block;font-size:22px;font-weight:600;line-height:1;
  font-variant-numeric:tabular-nums}
.property-specs span{display:block;margin-top:7px;font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-40)}

.property-section{margin-top:28px}
.property-section h2{font-size:clamp(22px,5vw,28px)}
.property-section h2 em{font-style:normal;color:var(--ink-40)}
.property-section>p{margin-top:12px;font-size:15.5px;line-height:1.62;color:var(--ink-60);max-width:60ch}
.feature-list{margin-top:14px}
.feature-list li{display:flex;gap:14px;padding:12px 0;border-top:1px solid var(--rule);font-size:14.5px}
.feature-list li::before{content:counter(f,decimal-leading-zero);counter-increment:f;
  font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--ink-40);padding-top:4px;
  font-variant-numeric:tabular-nums}
.feature-list{counter-reset:f}
.property-source{border-top:1px solid var(--rule);margin-top:24px;padding-top:14px;
  font-size:12.5px;color:var(--ink-40);max-width:60ch}
.property-source a{border-bottom:1px solid var(--rule)}

.property-status{display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-40)}


.enquiry-card{border-top:1px solid var(--ink);margin-top:4px;padding-top:18px}
.status-dot{width:5px;height:5px;background:var(--red);border-radius:50%;flex:none}
.enquiry-card h2{font-family:var(--sans);font-weight:var(--w-display);font-size:clamp(24px,6vw,32px);margin-top:8px;
  line-height:1.02}
.enquiry-card h2 em{font-style:normal;color:var(--ink-40)}
.enquiry-card>p{margin-top:12px;font-size:14px;color:var(--ink-60);max-width:44ch}
.enquiry-card .field{padding:14px 0;border-bottom:1px solid var(--rule)}
.enquiry-card label{display:block;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60)}
.enquiry-card input,.enquiry-card textarea{width:100%;font-size:16px;padding:8px 0 0;resize:vertical}
.enquiry-card form{margin-top:6px}
.enquiry-card .btn{width:100%;margin-top:20px;border:0;background:var(--green);color:#FFFFFF;
  padding:18px 0}
.enquiry-note{margin-top:14px;font-size:12px;color:var(--ink-40)}
.enquiry-card .form-feedback[role=status]{color:var(--ink-60)}

/* ---------- footer and rail ---------- */

footer#site-contact{background:var(--green);color:#FFFFFF;margin-top:0;
  padding:34px 0 calc(70px + env(safe-area-inset-bottom));font-size:14px}
.f-g{display:grid;gap:30px}
.f-brand{display:flex;align-items:center;gap:9px;color:#fff;line-height:1}
.f-brand .mk{width:22px;height:22px}
.f-brand span{font-family:var(--sans);font-size:26px;font-weight:400;letter-spacing:-.012em}
.f-brand em{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.f-sign{margin-top:10px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55)}
.f-held{margin-top:12px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.55);max-width:38ch}
footer h4{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff}
footer ul{margin-top:12px;display:grid;gap:7px}
footer li a{border-bottom:1px solid transparent}
footer li a:hover{border-bottom-color:transparent}
.f-legal{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:34px;padding-top:16px;
  border-top:1px solid var(--rule-on-ink);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;background:var(--surface);
  border-top:1px solid var(--rule);padding-bottom:env(safe-area-inset-bottom)}
.bar a{flex:1;padding:16px 0;text-align:center;font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase}
.bar a+a{border-left:1px solid var(--rule)}
.bar a.g{background:var(--green);color:#FFFFFF;flex:1.5}

/* ---------- dialogs ---------- */

.dialog{border:0;border-radius:0;padding:26px var(--pad);max-width:min(440px,calc(100vw - 32px));
  background:var(--surface);color:var(--ink)}
.dialog::backdrop{background:rgba(18,22,29,.72)}
.dialog h2{font-size:30px;margin-top:8px}
.dialog h2 em{font-style:normal;color:var(--ink-40)}
.dialog p{margin-top:12px;font-size:14px;color:var(--ink-60)}
.dialog .btn{margin-top:22px}
.dialog-close{position:absolute;top:12px;right:14px;font-size:20px;line-height:1}
.photo-dialog{padding:0;width:min(94vw,900px);max-width:min(94vw,900px)}
.photo-dialog img{width:100%;height:auto;filter:var(--grade)}
.photo-dialog .dialog-close{z-index:1;background:var(--surface);width:36px;height:36px;top:0;right:0}

/* ---------- 768 ---------- */

@media (min-width:768px){
  :root{--pad:32px;--t-h1:36px;--lh-h1:44px;--t-h2:30px;--lh-h2:38px}
  .cards{grid-template-columns:1fr 1fr;column-gap:40px}
  .card:last-child{border-bottom:0}
  .cards>.card:nth-last-child(-n+2){border-bottom:1px solid var(--rule)}
  .property-layout{grid-template-columns:1.2fr .8fr;column-gap:44px;row-gap:0;
    grid-template-areas:"media side" "media cta" "body cta";align-items:start}
  .pd-body{margin-top:34px}
  .property-heading h1{margin-top:0}
  .f-g{grid-template-columns:1.4fr 1fr 1fr}
  .svc{grid-template-columns:repeat(2,1fr);column-gap:40px}
  .steps{grid-template-columns:repeat(2,1fr);column-gap:40px}
}

/* ---------- 1080 and up ---------- */

@media (min-width:1080px){
  :root{--pad:80px;--hd:64px;--t-h1:44px;--lh-h1:52px;--t-h2:36px;--lh-h2:48px;
    --sec-pad:120px}
  .nav nav{display:block}
  .nav-r .btn{display:inline-block}
  .burger,.bar{display:none}
  footer#site-contact{padding-bottom:38px}
  .cards{grid-template-columns:repeat(3,1fr);column-gap:36px}
  .cards>.card:nth-last-child(-n+2){border-bottom:0}
  .cards>.card:nth-last-child(-n+3){border-bottom:1px solid var(--rule)}
  .card .ad{font-size:28px}
  .card .pr{font-size:18px}
  .hero{height:min(88vh,760px)}
  .hero h1{font-size:min(5.2vw,64px)}
  .hero-in{padding-bottom:48px}




  .search-primary{padding:12px 0}
  .search-section .in,.search-section{padding-top:0}
  #listing-search{display:flex;align-items:center;gap:34px}
  .department-tabs{padding:0;flex:none}
  .search-primary{flex:1;border-top:0}
  .more-filters{position:static;inset:auto;padding:0 0 20px;background:none;
    border-bottom:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,1fr);
    column-gap:36px;overflow:visible}
  .more-filters::before{display:none}
  .more-filters .field{border-bottom:0}
  .more-filters{grid-template-columns:repeat(5,1fr)}
  .sheet-act{display:none}
  #listing-search{flex-wrap:wrap}
  .more-filters{flex-basis:100%;order:3}
  .svc{grid-template-columns:repeat(4,1fr);column-gap:36px}
  .steps{grid-template-columns:repeat(4,1fr);column-gap:36px}
  .cta .in{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
  .acts{margin-top:0}
  .property-section h2{font-size:32px}
}


/* Content expansion uses Direction B fonts, rules, spacing and square edges. */
.content-page{padding-top:40px;padding-bottom:80px}.content-page>h1{font-size:var(--t-h1);line-height:calc(var(--lh-h1)/var(--t-h1));margin:32px 0 40px}.content-page>p,.content-section>p,.content-page>aside{max-width:780px}.content-page p{line-height:1.7;margin:16px 0}.content-section{border-top:1px solid var(--rule);padding:32px 0}.content-section h2,.content-page>h2{font-size:var(--t-h2);line-height:calc(var(--lh-h2)/var(--t-h2));margin-bottom:20px}.content-note{border-left:2px solid #155f2c;padding:12px 20px;margin:24px 0;line-height:1.7;font-size:14px}.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-bottom:48px}.team-grid img{width:100%;height:auto;display:block}.team-grid h2{font-size:28px;margin-top:20px}.content-form{max-width:650px}.content-form .field{margin:20px 0}.content-form input,.content-form textarea{width:100%}.f-legal{gap:16px;flex-wrap:wrap}@media(max-width:1079px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:767px){.team-grid{grid-template-columns:1fr}}


/* ============================================================
   MOTION
   Deliberate only. Every duration uses --ease, cubic-bezier(.16,.8,.24,1).
   Not present, by design: fade-up on sections/headings/paragraphs, card
   lift or shadow on hover, bounce, spring, overshoot, skeleton shimmer,
   spinners, parallax, and anything over 1s except the 900ms image reveal.
   ============================================================ */

/* 1 · Property photographs reveal once as they enter the viewport.
       Images only. The row, its type and its rules never move.
       Deliberately a one-shot animation, not a resting transform: an
       un-revealed photograph sits at its true size with the whole stamp
       showing, so a starved observer or JS being off can never leave an
       image held at 1.06 with the stamp cropped. animation-fill-mode is
       left at none so the .9s hover scale still applies afterwards. */
@keyframes img-reveal{from{transform:scale(1.06)}to{transform:scale(1)}}
.reveal.is-in img{animation:img-reveal var(--motion-reveal) var(--ease)}

/* 2 · The approved .9s hover scale is unchanged and still outranks
       the reveal's resting state, so hovering mid-reveal is not a fight. */

/* 3 · Links with no resting rule draw their underline in from the left.
       250ms, no colour change. Actions that Direction B already draws
       with a static rule keep it exactly as it is. */
.nav nav a:not([aria-current]),
footer li a,
.f-legal a,
.property-source a,
.portal a,
.content-page a:not(.tlink):not(.btn),
.content-section a:not(.tlink):not(.btn){position:relative}
.nav nav a:not([aria-current])::after,
footer li a::after,
.f-legal a::after,
.property-source a::after,
.portal a::after,
.content-page a:not(.tlink):not(.btn)::after,
.content-section a:not(.tlink):not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:currentColor;pointer-events:none;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--motion-ui) var(--ease)}
.nav nav a:not([aria-current]):hover::after,
.nav nav a:not([aria-current]):focus-visible::after,
footer li a:hover::after,footer li a:focus-visible::after,
.f-legal a:hover::after,.f-legal a:focus-visible::after,
.property-source a:hover::after,.property-source a:focus-visible::after,
.portal a:hover::after,.portal a:focus-visible::after,
.content-page a:not(.tlink):not(.btn):hover::after,
.content-page a:not(.tlink):not(.btn):focus-visible::after,
.content-section a:not(.tlink):not(.btn):hover::after,
.content-section a:not(.tlink):not(.btn):focus-visible::after{transform:scaleX(1)}

/* 4 · The phone filter screen slides up from the bottom. Not a fade.
       Only where it is a full screen; above 1080 it is an inline panel. */
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (max-width:1079px){
  .more-filters:not([hidden]){animation:sheet-up var(--motion-sheet) var(--ease) both}
}

/* 5 · prefers-reduced-motion switches all of it off. The header hairline
       still appears, it just stops fading; it is information, not motion. */
@media (prefers-reduced-motion:reduce){
  .card .m img,.nav{transition:none}
  .reveal.is-in img{animation:none}
  .card:hover .m img,.card:focus-visible .m img{transform:none}
  .more-filters:not([hidden]){animation:none}
  .nav nav a::after,footer li a::after,.f-legal a::after,
  .property-source a::after,.portal a::after,
  .content-page a::after,.content-section a::after{display:none}
}

/* ============================================================
   DIRECTION B — AMENDED, 10 September 2026
   The earlier spec was written as prohibitions and produced
   unstructured pages. These rules say what each section IS.
   Border radius stays 0 everywhere.
   ============================================================ */

:root{--btn-h:48px}

/* ---------- buttons: filled is primary, outline is secondary,
              underline drops to tertiary ---------- */

.btn{display:inline-flex;align-items:center;justify-content:center;height:var(--btn-h);
  padding:0 24px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-radius:0;border:1px solid transparent;white-space:nowrap;text-align:center}
.b-pri{background:var(--green);color:#FFFFFF;border-color:var(--green)}
.b-sec{background:none;color:var(--ink);border-color:var(--ink)}
.b-out{display:inline-flex;align-items:center;height:var(--btn-h);padding:0 24px;
  background:none;color:var(--ink);border:1px solid var(--ink);border-bottom-width:1px}
.dark .b-pri,.sec.alt .b-pri{background:var(--green);color:#FFFFFF;border-color:var(--green)}

/* 1 · header: FREE VALUATION is a solid ink button, square, right */
.nav-r{gap:24px}
.nav-r .btn{border-bottom:0;padding-bottom:0}
@media (min-width:1080px){
  .nav-r .btn{display:inline-flex;background:var(--green);color:#FFFFFF;border-color:var(--green)}
}

/* 2 · hero headline: exactly two lines, never three */
.hero h1{font-size:var(--t-h1);line-height:calc(var(--lh-h1)/var(--t-h1));max-width:none;
  letter-spacing:-.018em}
.hero h1 .ln{display:block;white-space:nowrap}

/* 3 · hero search: a solid white control over the photograph */
.hero .search{background:var(--surface);max-width:720px;margin-top:24px;
  border:1px solid var(--rule);display:flex;flex-direction:column}
.hero .tabs{display:flex;gap:0;padding:0;border-bottom:1px solid var(--rule)}
.hero .tabs button{flex:1;height:44px;padding:0 14px;color:var(--ink-40);border-bottom:0;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.hero .tabs button[aria-selected="true"]{color:var(--ink);background:rgba(18,22,29,.05)}
.hero .tabs button+button{border-left:1px solid var(--rule)}
.hero .f{display:flex;align-items:stretch;gap:0;border-top:0;padding:0;flex-wrap:nowrap}
.hero .f>div:first-child{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
  padding:8px 14px}
.hero .f label{position:static;font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60)}
.hero .f input{width:100%;font-size:15px;color:var(--ink);padding:2px 0 0;background:none}
.hero .f input::placeholder{color:var(--ink-40)}
.hero .f>div:nth-child(2),.hero .f>div:nth-child(3){display:none}
.hero .f .go{display:flex}
.hero .f .go .btn{height:auto;min-height:56px;align-self:stretch;padding:0 22px;
  background:var(--green);color:#FFFFFF;border:0}
@media (min-width:1080px){
  .hero .search{flex-direction:row;align-items:stretch;height:72px;margin-top:28px}
  .hero .tabs{border-bottom:0;border-right:1px solid var(--rule);flex:none}
  .hero .tabs button{height:auto;padding:0 20px}
  .hero .f{flex:1;min-width:0}
  .hero .f>div:first-child{padding:0 18px}
  .hero .f .go .btn{min-height:0;padding:0 30px}
}

/* 4 · property cards: four across, bordered, square */
.cards{display:grid;gap:24px;padding-top:20px;grid-template-columns:1fr}
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:0;padding:0}
.card:last-child,.cards>.card:nth-last-child(-n+2),.cards>.card:nth-last-child(-n+3){border-bottom:0}
.card .m{margin:0;background:var(--surface)}
/* 4:3 frame. The sources are 1080x1080 so contain is the only fit that keeps
   the whole photograph and the occupied stamp, as specified. */
.card .m img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--surface)}
.tagpill{top:10px;left:10px;border:1px solid var(--rule);padding:6px 10px 6px 9px;font-size:9px}
.card .b{display:flex;flex-direction:column;padding:14px 15px 16px;gap:0}
.card .ttl{font-family:var(--sans);font-size:14px;font-weight:600;line-height:1.35;letter-spacing:0}
.card .pr{display:flex;align-items:baseline;gap:9px;margin-top:9px;font-size:22px;font-weight:600;
  font-variant-numeric:tabular-nums lining-nums;line-height:1.1;white-space:normal}
.card .pr small{font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-40)}
.card .ico{display:flex;gap:16px;margin-top:11px;padding-top:11px;border-top:1px solid var(--rule)}
.card .ico span{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-60)}
.card .ico svg{width:15px;height:15px;flex:none;stroke:var(--ink-60);fill:none;stroke-width:1.4}
.card .adr{margin-top:10px;font-size:13px;color:var(--ink-40);letter-spacing:0;text-transform:none}
@media (min-width:768px){.cards{grid-template-columns:repeat(2,1fr);gap:24px}}
@media (min-width:1080px){.cards{grid-template-columns:repeat(4,1fr);gap:24px}
  .card .ttl{font-size:14px}.card .pr{font-size:22px}}

/* 5 · three ways to let: real cards on the dark band */
.sec.alt .svc{display:grid;gap:20px;grid-template-columns:1fr}
.sec.alt .svc>div{background:var(--surface);border:1px solid var(--rule);color:var(--ink);
  padding:26px 24px 24px;display:flex;flex-direction:column;height:100%}
.sec.alt .svc h3{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink)}
.sec.alt .svc ul{margin-top:16px;display:grid;gap:9px}
.sec.alt .svc li{font-size:14px;color:var(--ink-60);line-height:1.5}
.sec.alt .svc .a{margin-top:auto;padding-top:22px}
.sec.alt .svc .a .btn{width:100%;background:var(--green);color:#FFFFFF;border-color:var(--green);
  padding:0 18px}
@media (min-width:768px){.sec.alt .svc{grid-template-columns:repeat(3,1fr);gap:22px}}

/* 6 · valuation to let agreed: a connected timeline */
.steps{position:relative;display:grid;grid-template-columns:1fr;row-gap:26px;margin-top:26px}
.steps::before{content:"";position:absolute;background:var(--rule);left:4px;top:6px;bottom:6px;width:1px}
.steps>div{position:relative;padding:0 0 0 30px;display:block;border-top:0}
.steps .n{font-family:var(--sans);font-size:48px;line-height:1;font-weight:400;color:var(--ink-40);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.steps>div::before{content:"";position:absolute;left:0;top:20px;width:9px;height:9px;background:var(--ink)}
.steps h3{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.steps h3+p{grid-column:auto;margin-top:8px;font-size:14px;line-height:1.55;color:var(--ink-60);max-width:34ch}
@media (min-width:1080px){
  .steps{grid-template-columns:repeat(4,1fr);column-gap:28px;row-gap:0}
  .steps::before{left:0;right:0;top:62px;bottom:auto;width:auto;height:1px}
  .steps>div{padding:0}
  .steps>div::before{left:0;top:57.5px}
  .steps h3{margin-top:30px}
}

/* 7 · valuation band: big headline left, button right, shorter band */
.cta{margin-top:44px;padding:44px 0}
.cta h2{font-size:var(--t-h1);line-height:calc(var(--lh-h1)/var(--t-h1));max-width:none}
.acts{margin-top:22px}
.acts .btn{border:1px solid #fff}
.acts .b-pri{background:var(--green);color:#FFFFFF;border-color:var(--green)}
@media (min-width:1080px){
  .cta{padding:48px 0;margin-top:52px}
  .cta .in{display:flex;align-items:center;justify-content:space-between;gap:48px}
  .cta h2{font-size:var(--t-h1);line-height:calc(var(--lh-h1)/var(--t-h1));flex:0 1 66%;max-width:66%}
  .acts{margin-top:0;flex:none}
}

/* 8 · services: a two-column grid of bordered, numbered cards */
.svc-grid{display:grid;gap:20px;grid-template-columns:1fr;margin-top:28px}
.svc-grid article{border:1px solid var(--rule);padding:24px 22px 22px;display:flex;flex-direction:column}
.svc-grid .n{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.08em;
  color:var(--ink-40);font-variant-numeric:tabular-nums}
.svc-grid h2{font-family:var(--sans);font-weight:var(--w-display);font-size:26px;margin:12px 0 0;line-height:1.05}
.svc-grid p{font-size:14.5px;line-height:1.6;color:var(--ink-60);margin:12px 0 0;max-width:46ch}
.svc-grid .a{margin-top:auto;padding-top:20px}
.svc-foot{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:30px}
@media (min-width:768px){.svc-grid{grid-template-columns:repeat(2,1fr);gap:22px}}

/* 8 · about: single-column editorial, its own vertical rhythm */
.about-page>*{max-width:760px}
.about-page>h1{font-size:var(--t-h1);line-height:calc(var(--lh-h1)/var(--t-h1));margin:26px 0 0}
.about-lede{font-size:19px;line-height:1.55;color:var(--ink);margin-top:18px;max-width:44ch}
.about-page .content-section{border-top:0;padding:34px 0 0}
.about-page .content-section h2{font-family:var(--sans);font-weight:var(--w-display);font-size:28px;margin-bottom:14px}
.about-page p{font-size:16px;line-height:1.72;max-width:62ch}
.team-col{margin-top:44px;display:grid;gap:44px}
.team-col figure{margin:0}
.team-col img{width:100%;max-width:420px;height:auto;display:block;border:1px solid var(--rule)}
.team-col figcaption{margin-top:14px}
.team-col .nm{font-family:var(--sans);font-weight:var(--w-display);font-size:30px;line-height:1.05}
.team-col .rl{margin-top:7px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60)}
@media (min-width:1080px){
  .about-page>*{max-width:820px}

  .team-col{gap:56px}
  .team-col img{max-width:480px}
}


/* listings search bar: SEARCH is a primary action, FILTERS stays tertiary */
.search-primary .btn.b-pri{background:var(--green);color:#FFFFFF;border:1px solid var(--green);padding:0 22px}
.search-primary{gap:18px}
.hero .tabs button{flex:none;white-space:nowrap;padding:0 18px}
@media (max-width:1079px){
  .hero .tabs button{flex:1}
  .search-primary{padding:8px 0}
  .search-primary .btn.b-pri{height:40px;padding:0 16px;font-size:11px}
}
.sheet-act{gap:12px;padding-top:22px}
.sheet-act .btn{flex:1;height:var(--btn-h)}
.sheet-act .btn+.btn{flex:1.4}

/* ============================================================
   TASK A — Perumnas token layer, homepage
   Ground #F5F5F5 with white surfaces; Inter Tight Medium 500 display;
   44/52 H1 desktop, 28/32 mobile; 1280 content in a 1440 canvas.
   ============================================================ */

/* point 4 · Estatery card anatomy: price largest, address secondary,
   bed and bath as small square chips along the bottom */
.card .b{padding:18px 18px 18px;gap:0}
.card .pr{order:1;margin-top:0;font-size:24px;font-weight:600;color:var(--ink);
  align-items:baseline;gap:8px}
.card .pr small{color:var(--ink-40)}
.card .ttl{order:2;margin-top:6px;font-size:15px;font-weight:400;color:var(--ink-60);line-height:1.45}
.card .adr{order:3;margin-top:2px;font-size:14px;color:var(--ink-40)}
.card .ico{order:4;margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);gap:8px}
.card .ico span{border:1px solid var(--rule);padding:5px 9px;font-size:12px;gap:6px;color:var(--ink-60)}
.card .ico b{font-weight:600;color:var(--ink)}
.cards{gap:24px}
@media (min-width:1080px){.cards{gap:28px}}

/* point 3 · the hero search reads as a raised white object, not a bar */
.hero .search{background:var(--surface);border:0;
  box-shadow:0 14px 34px rgba(18,22,29,.16);max-width:720px}
.hero .tabs{border-bottom:1px solid var(--rule)}
.hero .tabs button[aria-selected="true"]{background:transparent;color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--ink)}
.hero .f>div:first-child{border-right:1px solid var(--rule)}
.hero .f .go .btn{font-size:12px;letter-spacing:.08em}
@media (min-width:1080px){
  .hero .search{height:76px;box-shadow:0 18px 44px rgba(18,22,29,.20)}
  .hero .tabs{border-bottom:0;border-right:1px solid var(--rule)}
}

/* point 2 · hero wording and spacing over the photograph */
.hero{height:min(78vh,620px)}
.hero .eyebrow{color:rgba(255,255,255,.84)}
.hero h1{margin-top:16px;color:#fff}
.lede{margin-top:14px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.86);max-width:42ch}
.hero-in{padding-bottom:calc(46px + env(safe-area-inset-bottom))}
@media (min-width:1080px){
  .hero{height:min(84vh,700px)}
  .hero h1{margin-top:20px}
  .lede{font-size:var(--t-b);line-height:calc(var(--lh-b)/var(--t-b));max-width:46ch}
  .hero-in{padding-bottom:56px}
}

/* white blocks on the grey ground stop needing hairlines to be legible */
.sec-hd{border-bottom-color:var(--rule)}
.svc-grid article,.sec.alt .svc>div{border:0;background:var(--surface)}
.collection-disclosure,.home-stock-note{color:var(--ink-40)}
.prototype-strip{background:var(--surface)}
.dsp em{font-style:normal;color:var(--ink-40)}
.hero h1 em{font-style:italic;color:#fff}

/* ============================================================
   TASK F — brand colour restored, logo introduced, footer rebuilt
   White on #188A39 measures 4.55:1, which clears AA but only just,
   so every footer value below is pure #FFFFFF at full opacity and
   nothing drops below 14px.
   ============================================================ */

footer#site-contact a,footer#site-contact li,footer#site-contact span,
footer#site-contact p,footer#site-contact h4{color:#FFFFFF}
footer#site-contact .f-held{color:#FFFFFF;font-size:14px;line-height:1.5;max-width:40ch}
footer#site-contact h4{font-size:14px;letter-spacing:.06em}
footer#site-contact ul{gap:9px}
footer#site-contact li,footer#site-contact li a{font-size:14px}
.f-sign{color:#FFFFFF;font-size:14px;letter-spacing:.06em;margin-top:12px}
.f-legal{border-top:1px solid var(--rule-on-ink);color:#FFFFFF;font-size:14px;
  letter-spacing:.04em;margin-top:26px;padding-top:16px}
.f-legal span,.f-legal a{color:#FFFFFF}
.f-g{gap:26px}
@media (min-width:1080px){footer#site-contact{padding-bottom:34px}}

/* the reversed lockup replaces the footer text wordmark entirely */
.f-brand{display:block}
.f-brand img{display:block;width:auto;height:96px}
@media (min-width:1080px){.f-brand img{height:112px}}

/* the header carries the real mark. The supplied lockup is stacked: its
   wordmark cap measures 32px in a 300px file, so rendering that cap at the
   specified 21px needs a 197px-tall image and the header is 56-64px. The
   mark is cropped from the same file and the 21px text wordmark is kept. */
.logo .mk{width:30px;height:30px;background:url(logo.png) no-repeat -9px 0;
  background-size:46px auto}
.logo span{font-weight:500}

/* red has exactly one recurring job */
.dot-red{color:var(--red)}

/* ============================================================
   TASK E — structure on listings, services, about and valuation,
   plus the remaining local type and spacing overrides.
   ============================================================ */

/* --- REGRESSION FIX from Task A. `.dsp` gained `color:var(--ink)`, which on
   the two dark bands rendered the headings ink-on-ink and invisible: only the
   grey <em> was legible. Dark surfaces are an explicit token exception. --- */
.sec.alt .dsp,.cta .dsp,.dark .dsp,.sec.alt h2,.cta h2{color:#FFFFFF}
.sec.alt .dsp em,.cta .dsp em,.dark .dsp em{color:rgba(255,255,255,.58)}
.sec.alt .desc,.cta .desc{color:rgba(255,255,255,.72)}

/* --- declared token extension. Perumnas publishes H1 44/52, H2 36/48 and
   P1 18/26 only. Compact repeated components need a step below H2 or a 36px
   title lands in a 4-up grid cell. This is an invention, declared, not a
   measured Perumnas value. --- */
:root{--t-h3:24px;--lh-h3:32px}
@media (min-width:1080px){:root{--t-h3:26px;--lh-h3:34px}}

/* --- local overrides that outranked the token layer --- */
.content-page p{font-size:var(--t-b);line-height:calc(var(--lh-b)/var(--t-b))}
.content-section{padding:var(--sec-pad) 0 0}
.about-page .content-section{padding:var(--sec-pad) 0 0}
.about-page p{font-size:var(--t-b);line-height:calc(var(--lh-b)/var(--t-b));max-width:62ch}
.about-page .content-section h2{font-size:var(--t-h2);line-height:calc(var(--lh-h2)/var(--t-h2));
  margin-bottom:18px}
.svc-grid h2{font-size:var(--t-h2);line-height:calc(var(--lh-h2)/var(--t-h2));margin:14px 0 0}
.svc-grid p{font-size:var(--t-b);line-height:calc(var(--lh-b)/var(--t-b));max-width:40ch}
.property-section h2{font-size:var(--t-h2);line-height:calc(var(--lh-h2)/var(--t-h2))}
.property-section>p{font-size:var(--t-b);line-height:calc(var(--lh-b)/var(--t-b))}
.team-col .nm{font-size:var(--t-h2);line-height:calc(var(--lh-h2)/var(--t-h2))}
.results-toolbar h1{font-size:var(--t-h1);line-height:calc(var(--lh-h1)/var(--t-h1))}
.lede{font-size:var(--t-b);line-height:calc(var(--lh-b)/var(--t-b))}
/* compact components, on the declared --t-h3 step */
.enquiry-card h2,.dialog h2,.team-grid h2{font-size:var(--t-h3);
  line-height:calc(var(--lh-h3)/var(--t-h3))}

/* --- point 5 · three ways to let: real cards in a full-bleed #12161D band --- */
.sec.alt{padding:var(--sec-pad) 0}
.sec.alt .sec-hd{border-bottom-color:var(--rule-on-ink);padding-bottom:20px}
.sec.alt .svc{margin-top:34px}
.sec.alt .svc>div{padding:30px 26px 26px}
.sec.alt .svc h3{font-size:var(--t-h3);line-height:calc(var(--lh-h3)/var(--t-h3));
  letter-spacing:-.01em;text-transform:none;font-weight:var(--w-display)}
.sec.alt .svc li{font-size:16px;line-height:1.5}
.sec.alt .svc ul{margin-top:18px;gap:10px}

/* --- point 6 · valuation roadmap: set numerals with hairline connectors --- */
.steps .n{font-size:56px;line-height:1;color:var(--ink-40);font-weight:400;letter-spacing:-.03em}
.steps::before{background:var(--rule)}
.steps>div::before{width:7px;height:7px}
.steps h3{font-size:var(--t-h3);line-height:calc(var(--lh-h3)/var(--t-h3));
  text-transform:none;letter-spacing:-.01em;font-weight:var(--w-display);color:var(--ink)}
.steps h3+p{font-size:16px;line-height:1.55;max-width:30ch}
@media (min-width:1080px){
  .steps .n{font-size:72px}
  .steps::before{top:86px}
  .steps>div::before{top:82.5px}
  .steps h3{margin-top:30px}
}

/* --- point 7 · valuation band, full bleed with an internal grid --- */
.cta{padding:0;margin-top:var(--sec-pad)}
.cta .in{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
@media (min-width:1080px){
  .cta .in{display:grid;grid-template-columns:2fr 1fr;align-items:center;gap:0;
    border-top:1px solid var(--rule-on-ink);border-bottom:1px solid var(--rule-on-ink);
    padding-top:64px;padding-bottom:64px}
  .cta .in>div:first-child{padding-right:56px;border-right:1px solid var(--rule-on-ink)}
  .cta h2{flex:none;max-width:22ch}
  .acts{padding-left:56px;justify-content:flex-start}
}

/* --- point 8 · About gets a two-column editorial rhythm so it stops reading
   as a long empty single column, and stays clearly unlike the Services grid --- */
@media (min-width:1080px){
  .about-page>*{max-width:none}
  .about-page>h1{max-width:20ch}
  .about-page .about-lede{max-width:34ch}
  .about-page .content-section{display:grid;grid-template-columns:320px 1fr;gap:0 80px;
    border-top:1px solid var(--rule);padding-top:56px}
  .about-page .content-section h2{grid-column:1;margin:0;position:sticky;top:96px}
  .about-page .content-section>*:not(h2){grid-column:2}
  .about-page .content-section p{max-width:62ch}
  .team-col{grid-column:2;grid-template-columns:1fr 1fr;gap:48px 40px}
  .team-col img{max-width:none}
  .team-col .nm{font-size:var(--t-h3);line-height:calc(var(--lh-h3)/var(--t-h3))}
  .about-lede{font-size:26px;line-height:1.3;color:var(--ink)}
}

/* ============================================================
   TASK G — footer contact block
   Same size and colour as the footer links; tel and mailto
   underline on hover only, never at rest.
   ============================================================ */
.f-contact{color:#FFFFFF;font-size:14px;line-height:1.7;margin-top:12px}
.f-contact+.f-contact{margin-top:14px}
.f-contact a{color:#FFFFFF;text-decoration:none;border-bottom:0}
.f-contact a:hover,.f-contact a:focus-visible{text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}

/* ============================================================
   KC 17 Sep — pure white ground
   The grey that separated white blocks is gone, so every block that
   relied on grey-on-white gets a 1px #E6E6E6 border instead. Radius
   stays 0 and nothing gains a shadow. The dark bands are unaffected.
   ============================================================ */

.card,.svc-grid article{border:1px solid var(--line)}
.card .m{border-bottom:1px solid var(--line)}
.card .ico{border-top-color:var(--line)}

/* cards sitting on the dark band separate themselves; a light border there
   would be invisible, so they stay borderless */
.sec.alt .svc>div{border:0}

/* with no grey behind it the header no longer reads as a bar on pages that
   open with content rather than the hero, so it keeps a resting hairline */
body:not([data-page="home"]) .nav{border-bottom-color:var(--line)}
body.past-first-image .nav{border-bottom-color:var(--line)}

/* hairlines that used to sit on grey */
.sec-hd,.content-section,.about-page .content-section,.results-toolbar,
.gallery-caption,.property-specs,.feature-list li,.property-source,
.enquiry-card .field,.more-filters .field,.search-section,
.prototype-strip{border-color:var(--line)}
.enquiry-card{border-top-color:var(--ink)}
.steps::before,.steps>div{border-color:var(--line)}
.steps::before{background:var(--line)}

/* KC 17 Sep — legal row reads as a sentence, not a shout */
.f-legal{text-transform:none;letter-spacing:0;font-size:14px}
.f-legal span,.f-legal a{text-transform:none;letter-spacing:0}

/* ============================================================
   Defects found by looking at the rendered pages, 17 Sep
   ============================================================ */

/* the content forms had no affordance at all once the grey ground went:
   border:0 from the reset on a white page meant invisible input fields */
.content-form .field{margin:22px 0}
.content-form label{display:block;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:6px}
.content-form input,.content-form textarea{width:100%;font-size:16px;color:var(--ink);
  border:1px solid var(--line);background:var(--surface);padding:12px 14px;border-radius:0}
.content-form textarea{resize:vertical;min-height:120px}
.content-form input:focus-visible,.content-form textarea:focus-visible{outline:1px solid var(--ink);
  outline-offset:-2px;border-color:var(--ink)}
.content-form .btn{margin-top:4px}
#contact-feedback{margin-top:14px;font-size:14px;color:var(--ink-60)}

/* phone and email on the contact page must read as links */
.content-section a[href^="tel:"],.content-section a[href^="mailto:"]{
  border-bottom:1px solid var(--line)}
.content-section a[href^="tel:"]:hover,.content-section a[href^="mailto:"]:hover{
  border-bottom-color:var(--ink)}
.content-section strong{display:inline-block;margin-bottom:2px;color:var(--ink);font-weight:600}
.content-section p+p{margin-top:16px}

/* Kiran has no photograph, so he is a text card in the same grid rather than
   a stray section hanging off the bottom of the page */
.tm-text{display:flex;flex-direction:column}
.tm-panel{aspect-ratio:1080/1350;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;padding:16px;text-align:center;background:var(--surface)}
.tm-panel span{font-family:var(--sans);font-weight:var(--w-display);font-size:64px;
  letter-spacing:-.01em;text-transform:none;color:var(--ink-40)}
.tm-text h2{margin-top:20px}
.tm-role,.tm-quals{margin-top:6px;font-size:14px;color:var(--ink-60);line-height:1.5}
.tm-quals{color:var(--ink-40);font-size:13px}
.team-grid article>h2,.tm-text>h2{font-size:var(--t-h3);line-height:calc(var(--lh-h3)/var(--t-h3))}
.team-col img,.team-grid img{border:1px solid var(--line)}

/* the first section on a content page sat 120px below the intro hairline and
   read as an empty band; the full rhythm resumes from the second section */
.content-page .content-section:first-of-type,
.about-page .content-section:first-of-type{padding-top:56px}
@media (max-width:1079px){
  .content-page .content-section:first-of-type,
  .about-page .content-section:first-of-type{padding-top:40px}
}

/* ============================================================
   22 Sep — two corrections found in the Task K review
   ============================================================ */

/* (a) Property cards were losing their bottom edge. The rule at line 654
   removes border-bottom from the last three cards; it dates from the grey
   ground, where cards were separated by rules rather than boxed. Since the
   17 Sep white pass every card is a bordered box, so that exception now
   just deletes one edge from 24 of 36 cards. Same selectors, restored. */
.card:last-child,
.cards>.card:nth-last-child(-n+2),
.cards>.card:nth-last-child(-n+3){border-bottom:1px solid var(--line)}

/* (b) The founder's monogram card read as a failed image: a portrait-sized
   white box, a hairline, and small grey letters floating in the middle. It
   keeps the same slot and proportions so the grid still lines up, but it is
   now filled and the monogram is sized to carry the space, so it reads as a
   deliberate treatment rather than something that did not load. */
.tm-panel{background:#F2F2F2;border-color:#DCDCDC}
.tm-panel span{font-size:104px;color:var(--ink-60);letter-spacing:.02em}
@media (max-width:1079px){.tm-panel span{font-size:88px}}