@charset "UTF-8";
/* RWD — the projects listing
   ==========================================================================
   What this replaces: a hero with its right half empty, a grey filter box
   floating in space, and fourteen identical cards in a rigid three-column
   grid. Nothing led, nothing was subordinate, and a project with no render
   sat next to two photographs as a flat brown rectangle.

   The page now reads as a portfolio with an order to it: the numbers sit
   beside the headline so the hero earns its height, the filter is a hairline
   bar that sticks under the header rather than a box, and the list is grouped
   — now selling, delivered, coming soon — with the flagship given the width
   it deserves and everything else ranged beneath it.

   The home page's system throughout: bone ground, one muted gold on every
   label and rule, Playfair for anything read as a voice and Jost for anything
   read as a label. Hairlines, never boxes. Tokens restated per page, which is
   the convention about.css sets out.

   Scoped entirely to #page-projects.
   ========================================================================= */

#page-projects{
  --bone:#F3F0E9;
  --bone-2:#EAE5D9;
  --ink-1:#100F0E;
  --bark:#2B211A;
  --gold:#B08D57;
  --gold-lt:#CBAE80;
  --rule:rgba(16,15,14,.14);
  --rule-i:rgba(255,255,255,.14);
  --say:#2E2B27;
  --mute:#6C6860;
  --mute-i:#A7A199;
  --paper-i:#F4F1EA;
  /* The bar is fixed and 68.8px tall, so a sticky element at top:0 slides
     underneath it rather than resting against it. */
  --hdr:69px;

  background:var(--bone);
  color:var(--say);
}

#page-projects .pl-in{
  max-width:1320px; margin:0 auto;
  padding-inline:clamp(24px,3.4vw,52px);
}

/* ---- Hero --------------------------------------------------------------
   Full bleed, the way the project sheet's own hero is: the render takes the
   width of the screen, a scrim carries the type over it, and the portfolio's
   figures sit along the bottom edge. The split version that was here left a
   column of bone beside the picture and read as half a page.

   The scrim is darkest at the top and the bottom and lightest across the
   middle — the top so the fixed bar's labels hold, the bottom so the
   headline does, and the middle left alone so the building is still the
   picture rather than a texture behind text. */
#page-projects .pl-hero{
  position:relative; isolation:isolate;
  display:flex; align-items:flex-end;
  min-height:clamp(520px,80vh,780px);
  background:var(--bark);
}
#page-projects .pl-hero-plate{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
}
#page-projects .pl-hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,
    rgba(16,15,14,.62) 0%,
    rgba(16,15,14,.20) 30%,
    rgba(16,15,14,.42) 62%,
    rgba(16,15,14,.90) 100%);
}
#page-projects .pl-hero-words{
  width:100%; max-width:1320px; margin:0 auto;
  padding:clamp(96px,14vh,150px) clamp(24px,3.4vw,52px) clamp(38px,5.5vh,60px);
}
#page-projects .pl-eyebrow{
  display:flex; align-items:center; gap:12px; margin:0 0 clamp(16px,2.2vh,24px);
  font:500 16px/1 var(--lux-sans); letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-lt);
}
#page-projects .pl-eyebrow .dots i{ width:6px; height:6px }
#page-projects .pl-hero h1{
  margin:0; max-width:15ch;
  font:400 clamp(46px,7.4vw,106px)/1 var(--lux);
  letter-spacing:-.018em; color:var(--paper-i); text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.35);
}
#page-projects .pl-hero h1 em{ font-style:italic; color:var(--gold-lt) }
#page-projects .pl-lede{
  margin:clamp(18px,2.4vh,26px) 0 0; max-width:50ch;
  padding-left:20px; border-left:1px solid var(--gold);
  font:400 clamp(16px,1.2vw,17.5px)/1.75 var(--lux-sans);
  color:rgba(244,241,234,.82);
}

/* The figures along the bottom edge, ruled off the copy. */
#page-projects .pl-figs{
  display:flex; flex-wrap:wrap; gap:clamp(22px,3vw,58px);
  margin-top:clamp(30px,4.5vh,52px); padding-top:clamp(20px,2.6vh,28px);
  border-top:1px solid rgba(244,241,234,.22);
}
#page-projects .pl-figs div{ display:grid; gap:5px }
#page-projects .pl-figs b{
  font:400 clamp(32px,3.4vw,50px)/1 var(--lux); color:var(--paper-i);
  font-variant-numeric:tabular-nums;
}
#page-projects .pl-figs span{
  font:500 16px/1 var(--lux-sans); letter-spacing:.17em; text-transform:uppercase;
  color:var(--gold-lt);
}
#page-projects .pl-hero-cap{
  position:absolute; right:clamp(16px,3vw,32px); bottom:clamp(14px,2vh,20px);
  margin:0;
  font:500 16px/1 var(--lux-sans); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(244,241,234,.5);
}

@media (max-width:660px){
  #page-projects .pl-hero{ min-height:clamp(440px,72vh,600px) }
  #page-projects .pl-hero-cap{ display:none }
}

/* ---- Filter ------------------------------------------------------------
   A white panel of its own, floating over the page: a labelled field per
   filter, and "Clear filters" once anything is
   set. Sticky under the header on a desktop so the controls stay to hand;
   on a phone it stays where it is, since stacked it would cover the list. */
#page-projects .pl-filter{
  position:sticky; top:var(--hdr); z-index:30;
  padding:16px clamp(24px,3.4vw,52px); background:linear-gradient(var(--bone) 70%, transparent);
}
/* .pl-in's own gutter moves to .pl-filter above, so the panel lines up with
   the cards below it and keeps clear of a phone's edges. */
#page-projects .pl-filter-in{
  max-width:calc(1320px - 104px); margin:0 auto; box-sizing:border-box;
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px 22px;
  padding:18px clamp(18px,2vw,28px) 20px; background:#fff;
  border:1px solid var(--rule); border-radius:18px;
  box-shadow:0 12px 34px rgba(43,33,26,.10);
}
#page-projects .pl-filter label{ display:flex; flex-direction:column; gap:8px; flex:1 1 200px }
#page-projects .pl-filter label > span{
  font:700 16px/1 var(--lux-sans); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-deep,#8A6B3C); white-space:nowrap;
}
#page-projects .pl-filter select{
  appearance:none; -webkit-appearance:none; width:100%;
  height:52px; padding:0 44px 0 16px;
  border:1px solid var(--rule); border-radius:12px;
  background:#fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238A6B3C' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center/14px;
  font:600 17px/1 var(--lux-sans); color:var(--ink-1);
  cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease;
}
#page-projects .pl-filter select:hover{ border-color:var(--gold) }
#page-projects .pl-filter select.set{ border-color:var(--ink-1); box-shadow:inset 0 0 0 1px var(--ink-1) }
#page-projects .pl-filter select:focus-visible{ outline:2px solid var(--gold); outline-offset:2px }
#page-projects .pl-clear{
  height:52px; padding:0 18px; border:0; border-radius:12px; cursor:pointer;
  background:var(--bone-2,#ECE6DA); color:var(--ink-1); font:600 16px/1 var(--lux-sans);
}
#page-projects .pl-clear[hidden]{ display:none }
#page-projects .pl-clear:hover{ background:var(--ink-1); color:#fff }
@media (max-width:720px){
  #page-projects .pl-filter{ position:static; background:none }
  #page-projects .pl-group-head{ flex-wrap:wrap; row-gap:12px }
  #page-projects .pl-group-head p{ margin-left:0; flex-basis:100% }
  #page-projects .pl-filter label{ max-width:none; flex-basis:100% }
}

/* ---- Group heads -------------------------------------------------------- */
#page-projects .pl-group{ padding-block:clamp(48px,7vh,86px) 0 }
#page-projects .pl-group[hidden]{ display:none }
#page-projects .pl-group-head{
  display:flex; align-items:center; gap:clamp(16px,2vw,28px);
  margin-bottom:clamp(26px,3.6vh,40px);
  padding-bottom:16px; border-bottom:1px solid var(--rule);
}
/* The group number as large as the title beside it, in gold, set off by a rule. */
#page-projects .pl-group-n{
  padding-right:clamp(16px,2vw,28px); border-right:2px solid var(--gold);
  font:600 clamp(40px,4.2vw,62px)/1 var(--lux); letter-spacing:0; color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;
}
#page-projects .pl-group-head h2{
  margin:0; font:400 clamp(32px,3.6vw,52px)/1.1 var(--lux); color:var(--ink-1);
}
#page-projects .pl-group-head p{
  margin:0 0 0 auto;
  font:600 17px/1 var(--lux-sans); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-1); white-space:nowrap;
}

/* ---- Coming soon --------------------------------------------------------
   Eleven announced projects that were in the header menu and on the map but
   nowhere on the page listing the portfolio. They have no product, no RERA
   and nothing to link to yet, so they are a ruled index rather than cards
   pretending to be projects. */
#page-projects .pl-soon{
  margin-top:clamp(56px,8vh,100px);
  background:var(--ink-1); color:var(--paper-i);
}
#page-projects .pl-soon .pl-in{ padding-block:clamp(52px,8vh,96px) }
#page-projects .pl-soon .pl-group-head{ border-bottom-color:var(--rule-i) }
#page-projects .pl-soon .pl-group-head h2{ color:var(--paper-i) }
#page-projects .pl-soon .pl-group-head p{ color:var(--mute-i) }
#page-projects .pl-soon-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:0 clamp(24px,3vw,48px);
}
#page-projects .pl-soon-list li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--rule-i);
}
#page-projects .pl-soon-list b{
  font:400 20px/1.3 var(--lux); color:var(--paper-i); font-weight:400;
}
#page-projects .pl-soon-list span{
  font:500 16px/1 var(--lux-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lt); white-space:nowrap;
}

/* ---- Empty state -------------------------------------------------------- */
#page-projects .pl-empty{
  padding:clamp(56px,9vh,110px) 0; text-align:center;
  font:400 17px/1.7 var(--lux-sans); color:var(--mute);
}
#page-projects .pl-empty button{
  margin-left:10px; padding:0 0 3px; background:none; border:0;
  border-bottom:1px solid var(--gold);
  font:inherit; color:var(--ink-1); cursor:pointer;
}

/* ---- Close -------------------------------------------------------------- */
#page-projects .pl-close{
  padding-block:clamp(64px,9vh,120px); text-align:center;
  border-top:1px solid var(--rule);
}
#page-projects .pl-close h2{
  margin:0 auto; max-width:18ch;
  font:400 clamp(32px,4vw,58px)/1.12 var(--lux); color:var(--ink-1);
}
#page-projects .pl-close h2 em{ font-style:italic; color:var(--gold) }
#page-projects .pl-close-act{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:clamp(26px,3.4vh,36px);
}

/* The button styles in pages.css and home.css are each scoped to their own
   page ids, and #page-projects is in none of those lists — so .btn-solid fell
   through to the shell's green and .btn-line, which nothing defines, rendered
   as plain text. Stated here in this page's own language: ink and gold, not
   the signal green, which on bone reads as a form control rather than an
   invitation. */
#page-projects .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 32px; border:1px solid transparent;
  font:500 16px/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase;
  transition:background .3s, border-color .3s, color .3s;
}
#page-projects .btn-solid{ background:var(--ink-1); color:var(--paper-i); border-color:var(--ink-1) }
#page-projects .btn-solid:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink-1) }
#page-projects .btn-line{ background:transparent; color:var(--ink-1); border-color:var(--rule) }
#page-projects .btn-line:hover{ border-color:var(--gold); color:var(--gold) }
#page-projects .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }