/* RWD — what the project sheet gained.
   pages.css already dresses the hero, the rail, the rule, the gallery, the
   plans and the map. This is only the sections the brief's §08 template added
   on top of them: reasons, availability, grouped amenities and landmarks,
   specifications, the construction timeline, downloads and the FAQ — plus the
   note that marks a section as not yet confirmed. Same tokens throughout, so
   it reads as one sheet rather than two. */

/* ---------- pending confirmation ---------- */
/* Deliberately plain and slightly uncomfortable: it should be obvious in a
   client review, and obvious that it is meant to come off. */
.pj-prov{
  display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  margin:0 0 20px; padding:10px 14px;
  border-left:3px solid #C9A227; background:#FBF6E4;
  font-size:16px; line-height:1.55; color:#5A4A12;
}
.pj-prov b{
  font-family:var(--mono); font-size:16px; letter-spacing:.14em;
  text-transform:uppercase; color:#8A6D12;
}

/* ---------- reasons to buy ---------- */
.pj-reasons{ list-style:none; counter-reset:r; display:grid; gap:2px }
.pj-reasons li{
  counter-increment:r; position:relative;
  padding:18px 0 18px 54px; border-bottom:1px solid var(--line);
  font-size:16.5px; line-height:1.62;
}
.pj-reasons li:last-child{ border-bottom:0 }
.pj-reasons li::before{
  content:counter(r,decimal-leading-zero); position:absolute; left:0; top:19px;
  font-family:var(--mono); font-size:16px; letter-spacing:.1em; color:var(--green);
}

/* ---------- availability & price ---------- */
.pj-avail{ width:100%; border-collapse:collapse; margin-bottom:18px }
.pj-avail th{
  text-align:left; padding:0 14px 10px 0; border-bottom:1px solid var(--ink);
  font-family:var(--mono); font-size:16px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); font-weight:500;
}
.pj-avail td{ padding:15px 14px 15px 0; border-bottom:1px solid var(--line); font-size:16px }
.pj-avail td b{ font-weight:600 }
.pj-pill{
  display:inline-block; padding:4px 11px; border-radius:100px;
  font-family:var(--mono); font-size:16px; letter-spacing:.1em; text-transform:uppercase;
}
.pj-pill.available{ background:#E9F5D9; color:#3D6413 }
.pj-pill.few-left{ background:#FDF0D8; color:#8A5B00 }
.pj-pill.sold-out{ background:#EFEFEA; color:var(--grey) }

/* On a phone the table becomes a stack of labelled rows rather than a grid
   that has to be scrolled sideways. */
@media(max-width:640px){
  .pj-avail thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
  .pj-avail tr{ display:block; padding:12px 0; border-bottom:1px solid var(--line) }
  .pj-avail td{ display:flex; justify-content:space-between; gap:16px; padding:4px 0; border:0 }
  .pj-avail td::before{
    content:attr(data-th); font-family:var(--mono); font-size:16px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--grey);
  }
}

/* ---------- grouped lists: amenities, landmarks ---------- */
.pj-groups{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px 32px }
.pj-group h3{
  font-family:var(--mono); font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--line);
  font-weight:500;
}
.pj-group ul{ list-style:none; display:grid; gap:8px }
.pj-group li{ font-size:16px; line-height:1.5 }
.pj-mins{ font-family:var(--mono); font-size:16px; color:var(--grey); white-space:nowrap }

/* ---------- specifications ----------
   One card per heading, its points as a list rather than one run-on line. */
.pj-specs{ columns:2 400px; column-gap:18px }
.pj-spec{ break-inside:avoid; margin-bottom:18px; padding:26px 28px 24px; background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold,#B08D57) }
.pj-spec ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px }
.pj-spec li{ position:relative; padding-left:18px; font-size:17px; line-height:1.55 }
.pj-spec li::before{ content:''; position:absolute; left:0; top:.62em; width:6px; height:6px; background:var(--gold,#B08D57) }
.pj-spec li b{ display:block; font-weight:600 }

/* ---------- construction timeline ---------- */
/* The rule the months hang from sits under the dates, so the newest entry is
   at the top and the line reads downward into the past. */
.pj-timeline{ list-style:none; position:relative; padding-left:26px }
.pj-timeline::before{
  content:''; position:absolute; left:4px; top:8px; bottom:8px; width:1px; background:var(--line);
}
.pj-timeline li{ position:relative; padding:0 0 30px }
.pj-timeline li::before{
  content:''; position:absolute; left:-26px; top:6px; width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:2px solid var(--green);
}
.pj-timeline li:first-child::before{ background:var(--green) }
.pj-when{
  display:block; font-family:var(--mono); font-size:16px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grey); margin-bottom:6px;
}
.pj-mile{ font-size:16.5px; font-weight:500; line-height:1.5 }
.pj-bar{ display:flex; align-items:center; gap:12px; margin-top:10px }
.pj-bar i{ display:block; height:4px; background:var(--green); border-radius:2px; max-width:100% }
.pj-bar::before{
  content:''; position:absolute; left:0; right:0; height:4px; background:var(--line);
  border-radius:2px; z-index:-1;
}
.pj-bar b{ font-family:var(--mono); font-size:16px; color:var(--grey); font-weight:500 }
.pj-gate{
  margin-top:10px; padding:11px 14px; background:var(--white); border:1px solid var(--line);
  font-size:16px; line-height:1.55; color:var(--grey);
}
.pj-gate a{ color:var(--ink); font-weight:600; border-bottom:1px solid var(--green) }

/* ---------- gallery groups ---------- */
.pj-galgroup + .pj-galgroup{ margin-top:34px }
.pj-galgroup h3{
  font-family:var(--mono); font-size:16px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); margin-bottom:14px; font-weight:500;
}

/* ---------- downloads ---------- */
.pj-dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px }
.pj-dl-item{
  display:block; padding:20px 22px; background:var(--white); border:1px solid var(--line);
  transition:border-color .2s, transform .2s;
}
.pj-dl-item:hover{ border-color:var(--ink); transform:translateY(-2px) }
.pj-dl-item b{ display:block; font-size:16px; font-weight:600; margin-bottom:5px }
.pj-dl-item span{ font-family:var(--mono); font-size:16px; letter-spacing:.1em; color:var(--grey) }
.pj-dl-item.gated span::before{ content:'↗ '; color:var(--green) }

/* ---------- faq ---------- */
.pj-faqs details{ border-bottom:1px solid var(--line) }
.pj-faqs summary{
  list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative;
  font-size:16.5px; font-weight:500; line-height:1.5;
}
.pj-faqs summary::-webkit-details-marker{ display:none }
.pj-faqs summary::after{
  content:''; position:absolute; right:8px; top:26px; width:9px; height:9px;
  border-right:1.5px solid var(--grey); border-bottom:1.5px solid var(--grey);
  transform:rotate(45deg); transition:transform .2s;
}
.pj-faqs details[open] summary::after{ transform:rotate(-135deg); top:30px }
.pj-faqs details p{ padding:0 40px 20px 0; color:#4A4A48; line-height:1.68 }

/* ---------- legal ---------- */
.pj-legal{
  margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
  font-size:16px; line-height:1.7; color:var(--grey);
}
.pj-legal p + p{ margin-top:9px }
.pj-legal b{ color:#4A4A48 }

/* ---------- headings on the project sheet ----------
   The section names were small gold capitals and read as labels, not titles.
   They are now real headings in the page's display serif, set bold, with the
   rule still running out to the right; the group names under them (amenity
   and landmark groups, gallery groups, specification heads) step down to a
   bold sans in the ink colour. Scoped to #page-detail so the enquiry page's
   own .pj-rule labels keep their size. */
#page-detail .pj-hero h1{ font-weight:600 }
#page-detail .pj-rule{ gap:clamp(18px,2vw,28px); margin-bottom:clamp(24px,3.4vh,36px) }
#page-detail .pj-rule h2{ margin:0; flex:none; max-width:100% }
#page-detail .pj-rule span{
  display:block;
  font:600 clamp(30px,3.2vw,46px)/1.12 var(--lux);
  letter-spacing:-.005em; text-transform:none; color:var(--ink-1);
}
#page-detail .pj-rule i{ align-self:center }
#page-detail .pj-group h3,
#page-detail .pj-galgroup h3{
  font:600 clamp(17px,1.4vw,20px)/1.3 var(--lux-sans);
  letter-spacing:0; text-transform:none; color:var(--ink-1);
}
#page-detail .pj-group h3{ border-bottom-color:var(--gold) }
#page-detail .pj-spec h3{
  margin:0 0 16px;
  font:600 clamp(20px,1.6vw,24px)/1.25 var(--lux); color:var(--ink-1);
}
#page-detail .pj-close h2{ font-weight:600 }

/* ---------- text sizes on the project sheet ----------
   Nothing a buyer has to read sits below 15px: the reading text is 17px, and
   the small capitals that were 11–13px (labels, tabs, buttons, captions) are
   13.5–15px and heavier. */
#page-detail .pj-lede{ font-size:clamp(19px,1.6vw,22px) }
#page-detail .pj-note,
#page-detail .pj-sec > p{ font-size:17px; line-height:1.6; color:var(--say) }
#page-detail .pj-reasons li{ font-size:18px; line-height:1.6 }
#page-detail .pj-amen li,
#page-detail .pj-group li,
#page-detail .pj-spec li{ font:400 17px/1.55 var(--lux-sans); color:var(--ink-1) }
#page-detail .pj-spec li b{ font-weight:600 }
#page-detail .pj-tabs button{ font-size:16px; font-weight:600 }
#page-detail .pj-fact span{ font-size:16px; font-weight:500 }
#page-detail .pj-status{ font-size:16px; font-weight:500 }
#page-detail .pj-plan span{ font-size:16px; font-weight:600; letter-spacing:.06em; line-height:1.4 }
#page-detail .pj-dir{ font-size:16px; font-weight:600 }
#page-detail .pj-dl-item b{ font-size:18px }
#page-detail .pj-dl-item span{ font-size:16px; font-weight:500 }
#page-detail .pj-close-act a{ font-size:16px; font-weight:600 }
#page-detail .pj-legal p{ font-size:16px; line-height:1.6 }
#page-detail .pj-avail td{ font-size:17px }

/* ---------- nearby: one card per group ----------
   Icon, name and count across the top; places as ruled rows with the time
   or distance at the right; anything past the first six behind a native
   <details>, so a long school list does not push the gallery off the page. */
#page-detail .pj-near{
  margin-top:clamp(28px,4vh,40px);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
  gap:18px; align-items:start;
}
#page-detail .pj-nc{ background:#fff; border:1px solid var(--line); padding:24px 26px 18px }
#page-detail .pj-nc-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; margin-bottom:4px; border-bottom:2px solid var(--gold,#B08D57);
}
#page-detail .pj-nc-ico{
  flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--bone-2,#ECE6DA); color:var(--gold,#B08D57);
}
#page-detail .pj-nc-ico svg{ display:block }
#page-detail .pj-nc h3{ flex:1; margin:0; font:600 clamp(20px,1.6vw,24px)/1.2 var(--lux); color:var(--ink-1) }
#page-detail .pj-nc-n{
  flex:none; min-width:30px; padding:5px 9px; border-radius:999px; text-align:center;
  background:var(--ink-1); color:#fff; font:600 16px/1 var(--lux-sans);
}
#page-detail .pj-nc ul{ list-style:none; margin:0; padding:0 }
#page-detail .pj-nc li{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:13px 0; border-bottom:1px solid var(--rule,#E4DED2);
  font:400 17px/1.45 var(--lux-sans); color:var(--ink-1);
}
#page-detail .pj-nc li:last-child{ border-bottom:0 }
#page-detail .pj-nc-name{ min-width:0 }
#page-detail .pj-nc-tag{
  display:inline-block; margin-left:8px; padding:3px 8px; border-radius:4px; vertical-align:2px;
  background:var(--bone-2,#ECE6DA); color:var(--ink-1);
  font:600 16px/1.2 var(--lux-sans); font-style:normal; letter-spacing:.08em; text-transform:uppercase;
}
#page-detail .pj-mins{
  flex:none; white-space:nowrap;
  font:600 16px/1.45 var(--lux-sans); color:var(--gold-deep,#8A6B3C);
}
#page-detail .pj-nc-more{ border-top:1px solid var(--rule,#E4DED2) }
#page-detail .pj-nc-more ul{ border-top:1px solid var(--rule,#E4DED2) }
#page-detail .pj-nc-more summary{
  cursor:pointer; list-style:none; padding:14px 0 6px;
  font:600 16px/1 var(--lux-sans); color:var(--ink-1);
}
#page-detail .pj-nc-more summary::-webkit-details-marker{ display:none }
#page-detail .pj-nc-more summary::after{ content:' +'; color:var(--gold,#B08D57) }
#page-detail .pj-nc-more[open] summary{ display:none }

/* ---------- brochures: the download row under the flip book ---------- */
#page-detail .pj-dlrow{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin-top:20px }
#page-detail .pj-dlrow p{ margin:0; font:600 16px/1 var(--lux-sans); color:var(--ink-1) }
#page-detail .pj-dlrow ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px }
#page-detail .pj-dlrow a{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px;
  border:1px solid var(--ink-1); color:var(--ink-1); text-decoration:none;
  font:600 16px/1 var(--lux-sans);
}
#page-detail .pj-dlrow a small{ font-size:16px; font-weight:500; color:var(--gold-deep,#8A6B3C) }
#page-detail .pj-dlrow a:hover{ background:var(--ink-1); color:#fff }
#page-detail .pj-dlrow a:hover small{ color:#CBAE80 }

/* ---------- features & amenities ---------- */
#page-detail .am-top{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 28px;
  margin-bottom:clamp(22px,3vh,32px);
}
#page-detail .am-total{ margin:0; font:400 18px/1.3 var(--lux-sans); color:var(--mute) }
#page-detail .am-total b{
  margin-right:6px; font:600 clamp(34px,3vw,44px)/1 var(--lux); color:var(--ink-1); vertical-align:-4px;
}
#page-detail .am-chips{ display:flex; flex-wrap:wrap; gap:8px }
html:not(.js) #page-detail .am-chips{ display:none }
#page-detail .am-chips button{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rule,#E4DED2); background:#fff; color:var(--ink-1);
  font:600 16px/1 var(--lux-sans);
}
#page-detail .am-chips button span{ font-weight:500; color:var(--gold-deep,#8A6B3C) }
#page-detail .am-chips button:hover{ border-color:var(--ink-1) }
#page-detail .am-chips button[aria-pressed="true"]{ background:var(--ink-1); border-color:var(--ink-1); color:#fff }
#page-detail .am-chips button[aria-pressed="true"] span{ color:#CBAE80 }
#page-detail .am-chips button:focus-visible{ outline:2px solid var(--gold,#B08D57); outline-offset:2px }

#page-detail .am-cards{ columns:3 300px; column-gap:18px }
#page-detail .am-one .am-cards{ columns:1 }
#page-detail .am-card{
  break-inside:avoid; margin:0 0 18px; padding:24px 26px 18px;
  background:#fff; border:1px solid var(--line);
}
#page-detail .am-card[hidden]{ display:none }
#page-detail .am-card header{
  display:flex; align-items:center; gap:14px;
  padding-bottom:16px; margin-bottom:6px; border-bottom:2px solid var(--gold,#B08D57);
}
#page-detail .am-ico{
  flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  background:var(--ink-1); color:#CBAE80;
}
#page-detail .am-ico svg{ display:block }
#page-detail .am-card h3{ flex:1; margin:0; font:600 clamp(20px,1.6vw,24px)/1.2 var(--lux); color:var(--ink-1) }
#page-detail .am-n{
  flex:none; min-width:30px; padding:5px 9px; border-radius:999px; text-align:center;
  background:var(--bone-2,#ECE6DA); color:var(--ink-1); font:600 16px/1 var(--lux-sans);
}
#page-detail .am-card ul{ list-style:none; margin:0; padding:0 }
#page-detail .am-card li{
  position:relative; padding:12px 0 12px 32px; border-bottom:1px solid var(--rule,#E4DED2);
  font:400 17px/1.45 var(--lux-sans); color:var(--ink-1);
}
#page-detail .am-card li:last-child{ border-bottom:0 }
#page-detail .am-card li::before{
  content:''; position:absolute; left:0; top:14px; width:20px; height:20px; border-radius:50%;
  background:var(--bone-2,#ECE6DA);
}
#page-detail .am-card li::after{
  content:''; position:absolute; left:7px; top:18px; width:5px; height:9px;
  border:solid var(--gold-deep,#8A6B3C); border-width:0 2px 2px 0; transform:rotate(45deg);
}
/* One category picked: its items run in columns across the full width. */
#page-detail .am-one .am-card ul{ columns:2 260px; column-gap:32px }
#page-detail .am-one .am-card li{ break-inside:avoid }
@media (max-width:640px){
  #page-detail .am-top{ align-items:flex-start }
  /* One swipeable row of chips rather than four wrapped lines. */
  #page-detail .am-chips{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px; padding:2px 16px 6px; scrollbar-width:none; max-width:calc(100% + 32px) }
  #page-detail .am-chips::-webkit-scrollbar{ display:none }
  #page-detail .am-chips button{ flex:none }
}

/* ---------- the back link: top-left of the hero, a solid button ---------- */
#page-detail .pj-back{
  position:absolute; z-index:4;
  top:clamp(18px,3.2vh,32px);
  /* Hard against the left, on the same line as the header's logo
     (chrome.css .nav-inner). */
  left:clamp(24px,2.8vw,44px);
  display:inline-flex; align-items:center; gap:10px; padding:12px 20px 12px 16px; border-radius:999px;
  background:rgba(16,15,14,.62); border:1px solid rgba(203,174,128,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font:700 16px/1 var(--lux-sans); letter-spacing:.02em; text-transform:none; color:#fff; text-decoration:none;
}
#page-detail .pj-back span{ font-size:20px; line-height:0; color:#CBAE80; transition:transform .25s ease }
#page-detail .pj-back:hover{ background:#B08D57; border-color:#B08D57; color:#100F0E }
#page-detail .pj-back:hover span{ color:#100F0E; transform:translateX(-3px) }
#page-detail .pj-back:focus-visible{ outline:2px solid #CBAE80; outline-offset:3px }

/* ---------- the info row under the tabs: facts as large as the page's text ---------- */
#page-detail .pj-info{ align-items:center; gap:24px clamp(32px,4vw,64px); padding-top:28px }
#page-detail .pj-info dl{ gap:22px clamp(36px,4.4vw,72px) }
#page-detail .pj-info dt{
  font:700 16px/1 var(--lux-sans); letter-spacing:.14em; color:var(--gold-deep,#8A6B3C);
}
#page-detail .pj-info dd{ margin-top:10px; font:600 clamp(21px,1.7vw,25px)/1.25 var(--lux); color:var(--ink-1) }
#page-detail .pj-info-side{ gap:14px }
#page-detail .pj-rera{
  border-left-width:3px; padding:6px 0 6px 16px;
  font:500 17px/1.5 var(--lux-sans); color:var(--ink-1);
}
#page-detail .pj-rera b{ display:block; margin-bottom:2px; font:700 16px/1.2 var(--lux-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep,#8A6B3C) }
#page-detail .pj-call{
  display:inline-flex; align-items:center; gap:12px; padding:14px 22px; border:0; border-radius:999px;
  background:var(--ink-1); color:#fff; text-decoration:none;
  font:700 18px/1 var(--lux-sans); letter-spacing:.02em;
}
#page-detail .pj-call span{ font-weight:500; color:#CBAE80 }
#page-detail .pj-call:hover{ background:var(--gold,#B08D57); color:#100F0E }
#page-detail .pj-call:hover span{ color:#100F0E }

/* ---------- supporting lines: dark and full-weight, not grey ----------
   The notes under a section heading ("Each opens full size…", "Drag the map…")
   and the amenities count line were grey at a light weight and read as fine
   print. They are reading text: the page's ink at 20–21px, regular weight. */
#page-detail .pj-note,
#page-detail .pj-sec > p{
  max-width:62ch; font:400 20px/1.6 var(--lux-sans); color:var(--ink-1);
}
#page-detail .am-total{ font:400 21px/1.3 var(--lux-sans); color:var(--ink-1) }
#page-detail .am-total b{ font-size:clamp(40px,3.4vw,50px) }

/* ---------- amenity icons: light, one soft tint per category ----------
   A pale disc with the icon drawn in a deeper shade of the same hue, so the
   cards read apart at a glance without a dark blot at the top of each. */
#page-detail .am-ico{ background:#F1EBDF; color:#8A6B3C; box-shadow:inset 0 0 0 1px rgba(138,107,60,.14) }
#page-detail [data-am-group="wellness"] .am-ico{ background:#F6E7E4; color:#A0584B }
#page-detail [data-am-group="sports"] .am-ico{ background:#E4EEF6; color:#3F6E96 }
#page-detail [data-am-group="kids"] .am-ico{ background:#FBEBD9; color:#B0702C }
#page-detail [data-am-group="community"] .am-ico{ background:#ECE7F4; color:#6A5A93 }
#page-detail [data-am-group="convenience"] .am-ico{ background:#F7F0D6; color:#9A7A1E }
#page-detail [data-am-group="landscape"] .am-ico{ background:#E6F0E2; color:#4F7A43 }
#page-detail [data-am-group="safety"] .am-ico{ background:#E5ECEC; color:#3F6B6B }
#page-detail .am-card [class*="am-ico"]{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.05) }