@charset "UTF-8";
/* RWD — the inner pages
   ==========================================================================
   Projects, a project sheet, Careers, Contact, Book a Site Visit, and the
   footer every page ends on — brought onto the terms the home and about
   pages set: bone ground, ink and bark for the dark plates, one muted gold
   for every label, rule and numeral, Playfair for what is read as a voice,
   Jost for what is read as a label. Emphasis by italic, never by colour;
   hairlines, never boxes.

   The structures underneath are hero.css's and are left alone — the sheet's
   title block, the route tabs that work with no JavaScript, the booking
   split. Only the material changes.

   Load order: after about.css, before chrome.css. Rules are scoped to the
   five page ids and to the footer, so nothing here reaches Home, About or
   the header.
   ========================================================================= */


/* ---- Tokens -------------------------------------------------------------
   On the root, so the footer (outside every page) can reach them. home.css
   and about.css still state their own copies on their page ids; the values
   are the same, and those sheets' promise not to reach past their own page
   is why they are not simply deleted there.
------------------------------------------------------------------------- */

:root{
  --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,.13);
  --say:#2E2B27;
  --mute:#6C6860;
  --mute-i:#A7A199;
  --paper-i:#F4F1EA;
}

:is(#page-projects,#page-detail,#page-careers,#page-contact,#page-enquiry){
  background:var(--bone); color:var(--say);
}


/* ---- Shared: labels, heads, actions ------------------------------------- */

:is(#page-projects,#page-careers,#page-contact,#page-enquiry) .eyebrow{
  font:400 clamp(16px,.76vw,16px)/1 var(--lux-sans);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold); gap:11px;
}
:is(#page-projects,#page-careers,#page-contact,#page-enquiry) .eyebrow .dots{ gap:5px }
:is(#page-projects,#page-careers,#page-contact,#page-enquiry) .eyebrow .dots i{ width:6px; height:6px }

/* The page title: mixed-case Playfair with its second half in italic. */
:is(#page-projects,#page-careers) .page-hero h1,
#page-contact .ct-hero h1,
#page-enquiry .eq-hero h1{
  margin:clamp(18px,2.6vh,28px) 0 0; max-width:18ch;
  font:400 clamp(38px,5.2vw,84px)/1.06 var(--lux);
  letter-spacing:0; text-transform:none; text-wrap:balance;
}
:is(#page-projects,#page-careers,#page-contact,#page-enquiry) h1 em,
:is(#page-projects,#page-detail,#page-careers,#page-contact,#page-enquiry) h2 em{
  font-style:italic; font-weight:400; color:inherit;
}

/* A bone opening: the title on the page's own ground, hung off the same
   gold hairline the lead paragraphs use. */
:is(#page-projects,#page-careers) .page-hero,
#page-contact .ct-hero{
  background:var(--bone); color:var(--ink-1);
  padding:clamp(96px,14vh,160px) 0 clamp(48px,7vh,84px);
}
:is(#page-projects,#page-careers) .page-hero .inner,
#page-contact .ct-in{ max-width:1280px; width:auto; padding:0 clamp(24px,3.4vw,44px) }
/* hero.css styles a bare `.sub` as the Projects dropdown — absolute, centred
   by a transform, 1140px wide, and hidden until opened. This paragraph shares
   the class, so it had been invisible on both pages. Undone here, because
   renaming the dropdown's class would reach into the header. */
:is(#page-projects,#page-careers) .page-hero .sub{
  position:static; left:auto; top:auto; width:auto;
  display:block; padding:0 0 0 clamp(18px,2vw,30px);
  background:none; border:0; border-left:1px solid var(--gold); box-shadow:none;
  -webkit-backdrop-filter:none; backdrop-filter:none;
  opacity:1; visibility:visible; transform:none;
}
:is(#page-projects,#page-careers) .page-hero .sub,
#page-contact .ct-lede{
  margin:clamp(24px,3.4vh,38px) 0 0; max-width:56ch;
  padding-left:clamp(18px,2vw,30px); border-left:1px solid var(--gold);
  font:400 clamp(16px,1.08vw,17px)/1.78 var(--lux-sans); color:var(--mute);
}

:is(#page-projects,#page-careers) section.block{
  max-width:1280px;
  padding:clamp(40px,6vh,72px) clamp(24px,3.4vw,44px) clamp(84px,11vh,148px);
}

/* Actions: ink on bone, paper on a dark plate; both invert on hover. */
:is(#page-detail,#page-careers,#page-contact,#page-enquiry) .btn{
  padding:clamp(15px,2vh,19px) clamp(26px,2.6vw,40px);
  font:400 clamp(16px,.82vw,16px)/1 var(--lux-sans);
  letter-spacing:.22em; text-transform:uppercase;
  border:1px solid transparent; gap:12px;
  transition:background .38s ease, color .38s ease, border-color .38s ease;
}
:is(#page-detail,#page-careers,#page-contact,#page-enquiry) .btn-solid{
  background:var(--ink-1); color:var(--paper-i); border-color:var(--ink-1);
}
:is(#page-detail,#page-careers,#page-contact,#page-enquiry) .btn-solid:hover{
  background:transparent; color:var(--ink-1);
}
:is(#page-detail,#page-careers,#page-contact,#page-enquiry) .btn-dark{
  background:transparent; color:var(--ink-1); border-color:rgba(16,15,14,.28);
}
:is(#page-detail,#page-careers,#page-contact,#page-enquiry) .btn-dark:hover{
  background:var(--ink-1); color:var(--paper-i); border-color:var(--ink-1);
}

/* The sheet's section label — a tracked gold word and a hairline to the
   edge — used by the project sheet and the booking form alike. */
:is(#page-detail,#page-enquiry) .pj-rule{ gap:16px }
:is(#page-detail,#page-enquiry) .pj-rule span{
  font:400 clamp(16px,.9vw,16px)/1 var(--lux-sans);
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
:is(#page-detail,#page-enquiry) .pj-rule i{ background:var(--rule) }

/* Form fields: a line to write on rather than a box to fill. */
:is(#page-contact .f, #page-enquiry .eq-grid) label span{
  font:400 16px/1 var(--lux-sans); letter-spacing:.26em;
  text-transform:uppercase; color:var(--mute);
}
:is(#page-contact .f, #page-enquiry .eq-grid) :is(input,select,textarea){
  padding:12px 0 11px;
  font:400 16px/1.4 var(--lux-sans); color:var(--ink-1);
  background:transparent;
  border:0; border-bottom:1px solid rgba(16,15,14,.26); border-radius:0;
  transition:border-color .3s ease;
}
:is(#page-contact .f, #page-enquiry .eq-grid) select{ cursor:pointer }
:is(#page-contact .f, #page-enquiry .eq-grid) textarea{ padding-top:10px }
:is(#page-contact .f, #page-enquiry .eq-grid) :is(input,select,textarea)::placeholder{ color:rgba(108,104,96,.7) }
:is(#page-contact .f, #page-enquiry .eq-grid) :is(input,select,textarea):focus{
  outline:none; border-bottom-color:var(--gold);
}
:is(#page-contact .f, #page-enquiry .eq-grid) :is(input,select,textarea):focus-visible{
  outline:none; border-bottom:1px solid var(--gold); box-shadow:0 1px 0 var(--gold);
}
:is(#page-contact,#page-enquiry) .form-ok{
  background:var(--bark); color:var(--paper-i);
  font:400 16px/1.5 var(--lux-sans);
}
:is(#page-contact,#page-enquiry) .form-ok .dots i{ width:6px; height:6px }


/* ==== PROJECTS ===========================================================
   The home page's completed cards, at listing length: no box, the render
   carrying the card, the words underneath it.
========================================================================= */

#page-projects .filter-row{
  gap:0 clamp(22px,2.6vw,38px); margin-bottom:clamp(40px,6vh,64px);
  border-bottom:1px solid var(--rule);
}
#page-projects .filter-btn{
  position:relative; padding:0 0 16px;
  background:none; border:0;
  font:400 clamp(16px,.82vw,16px)/1 var(--lux-sans);
  letter-spacing:.24em; text-transform:uppercase; color:var(--mute);
  transition:color .3s ease;
}
#page-projects .filter-btn::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
#page-projects .filter-btn:hover,
#page-projects .filter-btn.active{ background:none; color:var(--ink-1) }
#page-projects .filter-btn.active::after{ transform:scaleX(1) }

#page-projects .proj-grid{ gap:clamp(44px,6vh,72px) clamp(18px,2.2vw,30px) }
#page-projects .proj-card{ background:transparent; border:none }
#page-projects .proj-card:hover{ transform:none; box-shadow:none }
#page-projects .proj-media{ aspect-ratio:4/5 }
#page-projects .proj-media img{ transition:transform 1.5s cubic-bezier(.22,.61,.36,1) }
#page-projects .proj-card:hover .proj-media img{ transform:scale(1.055) }

#page-projects .proj-media.type-card::before{ -webkit-text-stroke-color:rgba(176,141,87,.30) }
#page-projects .proj-media.type-card,
#page-projects .proj-media.type-card.alt-g,
#page-projects .proj-media.type-card.alt-b{
  background:linear-gradient(160deg, var(--bark) 46%, rgba(176,141,87,.30));
}
#page-projects .proj-media.type-card .tc-loc{
  font:400 16px/1 var(--lux-sans); letter-spacing:.26em; color:var(--gold-lt);
}
#page-projects .proj-status{
  background:rgba(43,33,26,.80);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font:400 16px/1 var(--lux-sans); letter-spacing:.24em;
}
#page-projects .proj-status.on i,
#page-projects .proj-status.done i{ background:var(--gold) }

#page-projects .proj-body{ padding:clamp(18px,2.4vh,24px) 0 0 }
#page-projects .proj-body h3{
  font:400 clamp(18px,1.6vw,23px)/1.16 var(--lux);
  text-transform:none; letter-spacing:0; color:var(--ink-1);
}
#page-projects .proj-body .loc{
  font:400 16px/1 var(--lux-sans); letter-spacing:.28em;
  text-transform:uppercase; color:var(--gold);
}
#page-projects .proj-body .spec{ font:400 16px/1.6 var(--lux-sans); color:var(--mute) }
#page-projects .proj-body .go{
  font:400 16px/1 var(--lux-sans);
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-1);
}
#page-projects .proj-card:hover .go{ color:var(--gold) }
#page-projects .ext-badge{
  font:400 16px/1 var(--lux-sans); letter-spacing:.14em; color:var(--gold);
}


/* ==== PROJECT SHEET ====================================================== */

/* ---- Hero --------------------------------------------------------------- */
#page-detail .pj-hero{ background:var(--bark) }
#page-detail .pj-scrim{
  background:linear-gradient(180deg,
    rgba(16,15,14,.55) 0%, rgba(16,15,14,.08) 34%, rgba(16,15,14,.84) 100%);
}
#page-detail .pj-hero-in{ max-width:1280px; padding-inline:clamp(24px,3.4vw,44px) }
#page-detail .pj-back{
  font:400 16px/1 var(--lux-sans); letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,241,234,.72);
  transition:color .3s ease;
}
#page-detail .pj-back:hover{ color:var(--gold-lt) }
#page-detail .pj-status{
  font:400 clamp(16px,.92vw,16px)/1.4 var(--lux-sans);
  letter-spacing:.18em; color:rgba(244,241,234,.86);
}
#page-detail .pj-status i{ width:6px; height:6px; background:var(--gold) }

/* The developer as a tracked gold line over the name; the name in Playfair. */
#page-detail .pj-hero h1{
  font:400 clamp(44px,7vw,112px)/1 var(--lux);
  text-transform:none; letter-spacing:-.005em;
  text-shadow:0 2px 40px rgba(16,15,14,.35);
}
#page-detail .pj-hero h1 em{
  font:400 clamp(16px,1vw,16px)/1 var(--lux-sans);
  letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:clamp(14px,2vh,22px);
}
#page-detail .pj-tag{
  margin-top:clamp(16px,2.4vh,24px);
  font:400 clamp(17px,1.7vw,24px)/1.45 var(--lux); font-style:italic;
  color:rgba(244,241,234,.9);
}

/* ---- Facts -------------------------------------------------------------- */
#page-detail .pj-facts{ background:var(--ink-1); border-bottom:0 }
#page-detail .pj-fact{
  padding:clamp(26px,3.6vh,38px) clamp(20px,2.4vw,36px) clamp(28px,4vh,42px);
  border-right-color:var(--rule-i);
}
#page-detail .pj-fact b{
  font:400 clamp(24px,2.6vw,40px)/1 var(--lux); color:var(--paper-i);
}
#page-detail .pj-fact span{
  margin-top:12px;
  font:400 16px/1.4 var(--lux-sans); letter-spacing:.16em; color:var(--gold-lt);
}

/* ---- Title block -------------------------------------------------------- */
#page-detail .pj-body{ max-width:1280px; padding-inline:clamp(24px,3.4vw,44px) }
/* Below 900px the sheet is one column, and a grid item's automatic minimum
   width let the widest thing in it — the floor-plan rail — stretch that
   column to ~1480px, so a phone scrolled sideways. */
@media (max-width:900px){
  #page-detail .pj-body{ grid-template-columns:minmax(0,1fr) }
}
#page-detail .pj-main{ min-width:0 }

/* One column now: the rail's details are a row above the sheet and its nav
   is the bar under the hero, so the sheet takes the full measure. */
#page-detail .pj-body{
  grid-template-columns:minmax(0,1fr);
  gap:clamp(40px,6vh,64px);
  padding-top:clamp(40px,6vh,64px);
}

/* ---- Section bar --------------------------------------------------------
   The sheet's contents as a pill across the page under the hero, held under
   the header (whose height project-nav.js writes into --pj-top). A rounded
   white bar on the bone, a soft shadow to lift it, gold hairlines between
   the items and a thick gold bar under the section being read. Too many
   items for a phone, so it scrolls sideways there rather than wrapping.
------------------------------------------------------------------------- */
#page-detail .pj-tabs{
  position:sticky; top:var(--pj-top,86px); z-index:40;
  padding:16px clamp(16px,3.4vw,44px) 0;
  pointer-events:none;           /* the strip around the pill clicks through */
}
#page-detail .pj-tabs ul{
  pointer-events:auto;
  position:relative;
  max-width:1600px; margin:0 auto; padding:0 clamp(18px,2.4vw,44px);
  list-style:none;
  display:flex; justify-content:safe center;
  background:#fff;
  border-radius:999px;
  box-shadow:0 10px 30px -12px rgba(16,15,14,.28), 0 0 0 1px rgba(16,15,14,.05);
  overflow-x:auto; scrollbar-width:none;
}
#page-detail .pj-tabs ul::-webkit-scrollbar{ display:none }
#page-detail .pj-tabs li{ flex:none; display:flex; align-items:center }
#page-detail .pj-tabs li + li::before{
  content:""; width:1px; height:22px; background:var(--bar-rule,rgba(176,141,87,.34));
}
#page-detail .pj-tabs button{
  position:relative;
  padding:24px clamp(14px,1.3vw,20px);
  background:none; border:0; cursor:pointer; white-space:nowrap;
  font:500 16px/1 var(--lux-sans); letter-spacing:.08em; text-transform:uppercase;
  color:#4C4A45;
  transition:color .25s ease;
}
#page-detail .pj-tabs button::after{
  content:""; position:absolute; left:clamp(14px,1.3vw,20px); right:clamp(14px,1.3vw,20px); bottom:0;
  height:6px; background:var(--gold);
  transform:scaleX(0); transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#page-detail .pj-tabs button:hover{ color:var(--ink-1) }
#page-detail .pj-tabs button.on{ color:var(--ink-1); font-weight:600 }
#page-detail .pj-tabs button.on::after{ transform:scaleX(1) }
#page-detail .pj-tabs button:focus-visible{ outline:1px solid var(--gold); outline-offset:-6px }
/* Centred while it fits; from the left once it has to scroll, or the first
   items would be cut off out of reach. */
@media (max-width:1200px){
  #page-detail .pj-tabs ul{ justify-content:flex-start }
}
@media (max-width:900px){
  #page-detail .pj-tabs{ padding-top:10px }
  #page-detail .pj-tabs button{ padding:18px 12px; font-size:16px }
  #page-detail .pj-tabs button::after{ height:4px }
}

/* ---- The details row ----------------------------------------------------
   Location, status, product and the rest side by side under a gold rule, the
   phone line and RERA number at the end of the row. */
#page-detail .pj-info{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:24px clamp(32px,4vw,64px);
  padding-top:22px; border-top:1px solid var(--gold);
}
#page-detail .pj-info dl{
  margin:0; display:flex; flex-wrap:wrap; gap:20px clamp(32px,4vw,64px);
}
#page-detail .pj-info dt{
  margin:0;
  font:400 16px/1 var(--lux-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold);
}
#page-detail .pj-info dd{
  margin:10px 0 0; font:400 17px/1.4 var(--lux); color:var(--ink-1);
}
#page-detail .pj-info-side{ display:grid; gap:12px; justify-items:end; text-align:right }
#page-detail .pj-info-side .pj-rera{ margin:0 }
@media (max-width:900px){
  #page-detail .pj-info-side{ justify-items:start; text-align:left }
}
#page-detail .pj-call{
  font:400 16px/1.5 var(--lux-sans); letter-spacing:.06em;
  color:var(--mute); border-bottom-color:var(--rule);
}
#page-detail .pj-call:hover{ color:var(--ink-1); border-bottom-color:var(--gold) }
#page-detail .pj-rera{
  background:transparent; border:0; border-left:1px solid var(--gold);
  padding:4px 0 4px 14px;
  font:400 16px/1.65 var(--lux-sans); color:var(--mute);
}

/* ---- The sheet ---------------------------------------------------------- */
#page-detail .pj-lede{
  max-width:40ch;
  font:400 clamp(19px,1.9vw,27px)/1.52 var(--lux); color:var(--ink-1);
}
#page-detail .pj-note{ font:400 16px/1.7 var(--lux-sans); color:var(--mute) }

#page-detail .pj-map{ border-color:var(--rule); background:var(--bone-2) }
#page-detail .pj-dir{
  font:400 16px/1 var(--lux-sans); letter-spacing:.16em;
  color:var(--ink-1); border-bottom:1px solid var(--gold);
}
#page-detail .pj-dir:hover{ color:var(--gold); border-bottom-color:var(--gold) }

#page-detail .pj-shot{ background:var(--bark) }
#page-detail .pj-shot img{ transition-duration:1.5s }

#page-detail .pj-film{ background:var(--ink-1) }

#page-detail .pj-amen li{
  border-bottom-color:var(--rule);
  font:400 16px/1.5 var(--lux-sans); color:var(--say);
}
#page-detail .pj-amen li::before,
#page-detail .pj-amen li:nth-child(even)::before{
  width:5px; height:5px; background:var(--gold);
}

#page-detail .pj-plan{ background:transparent; border-color:var(--rule) }
#page-detail .pj-plan:hover{ border-color:var(--gold) }
#page-detail .pj-plan img{ background:#fff }
#page-detail .pj-plan span{
  border-top-color:var(--rule);
  font:400 16px/1 var(--lux-sans); letter-spacing:.16em; color:var(--gold);
}

#page-detail .pj-close{ padding-top:clamp(40px,6vh,64px); border-top:1px solid var(--rule) }
#page-detail .pj-close .pj-rule{ display:none }
#page-detail .pj-close h2{
  font:400 clamp(30px,3.8vw,58px)/1.08 var(--lux);
  text-transform:none; letter-spacing:0; color:var(--ink-1);
}
#page-detail .pj-close p{
  max-width:46ch; font:400 clamp(16px,1.1vw,17px)/1.76 var(--lux-sans); color:var(--mute);
}
#page-detail .pj-close-act{ margin-top:clamp(28px,4vh,40px); gap:13px }


/* ==== CAREERS ============================================================ */

/* Five reasons as a line of words between gold marks, not five boxes. */
#page-careers .cr-why{ margin-top:clamp(30px,4.4vh,46px); gap:12px 0 }
#page-careers .cr-why li{
  display:flex; align-items:center;
  padding:0; border:0;
  font:400 16px/1.4 var(--lux-sans); letter-spacing:.24em;
  text-transform:uppercase; color:var(--say);
}
#page-careers .cr-why li + li::before{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--gold); margin:0 clamp(14px,1.6vw,22px);
}
/* Once it wraps, a separator starts the second line and the first item has
   none. Stacked instead, every item with its own mark. */
@media (max-width:760px){
  #page-careers .cr-why{ flex-direction:column; gap:12px }
  #page-careers .cr-why li::before,
  #page-careers .cr-why li + li::before{
    content:""; width:4px; height:4px; border-radius:50%;
    background:var(--gold); margin:0 14px 0 0; flex:none;
  }
}

#page-careers .block-head{
  display:block; margin-bottom:clamp(36px,5vh,60px);
  padding-top:clamp(40px,6vh,72px); border-top:1px solid var(--rule);
}
#page-careers .block-head .eyebrow::after{ display:none }
#page-careers .block-head h2{
  margin-top:clamp(16px,2.2vh,24px);
  font:400 clamp(29px,3.6vw,58px)/1.09 var(--lux);
  letter-spacing:0; text-transform:none; color:var(--ink-1);
}
#page-careers .block-head .lead{
  max-width:56ch; margin:clamp(20px,2.8vh,30px) 0 0;
  padding-left:clamp(18px,2vw,30px); border-left:1px solid var(--gold);
  font:400 clamp(16px,1.05vw,16.5px)/1.76 var(--lux-sans); color:var(--mute);
}
#page-careers .block-head .lead a{ color:var(--ink-1); border-bottom:1px solid var(--gold) }

/* Roles: an index in two columns, a hairline over every one. */
#page-careers .roles{
  gap:0 clamp(28px,5vw,90px);
  background:transparent; border:0; border-bottom:1px solid var(--rule);
}
#page-careers .role{
  background:transparent; padding:clamp(26px,3.6vh,40px) 0;
  border-top:1px solid var(--rule);
}
#page-careers .role-fn{
  margin-bottom:12px;
  font:400 16px/1 var(--lux-sans); letter-spacing:.28em; color:var(--gold);
}
#page-careers .role h3{
  font:400 clamp(21px,2vw,30px)/1.15 var(--lux); letter-spacing:0; color:var(--ink-1);
}
#page-careers .role-req{
  margin-top:12px; max-width:44ch;
  font:400 16px/1.76 var(--lux-sans); color:var(--mute);
}
#page-careers .role-apply{
  margin-top:clamp(18px,2.6vh,26px);
  font:400 16px/1 var(--lux-sans); letter-spacing:.24em;
  color:var(--ink-1); border-bottom:1px solid var(--gold); padding-bottom:6px;
  transition:color .3s ease;
}
#page-careers .role-apply:hover{ color:var(--gold); border-bottom-color:var(--gold) }

/* Open applications: a bark plate, the home page's material for an object
   sitting on the page. */
#page-careers .career-card{
  margin-top:clamp(48px,7vh,80px)!important;
  background:var(--bark); color:var(--paper-i);
  border:0; border-top:1px solid var(--gold);
  padding:clamp(32px,4.4vw,64px);
}
#page-careers .career-card .eyebrow{ color:var(--gold-lt); margin-bottom:clamp(16px,2.2vh,22px)!important }
#page-careers .career-card h3{
  font:400 clamp(24px,2.6vw,40px)/1.12 var(--lux);
  text-transform:none; letter-spacing:0; color:var(--paper-i);
}
#page-careers .career-card p{
  margin-top:14px; max-width:52ch;
  font:400 clamp(16px,1.05vw,16px)/1.76 var(--lux-sans); color:var(--mute-i);
}
#page-careers .career-card .btn-dark{
  color:var(--paper-i); border-color:rgba(244,241,234,.4);
}
#page-careers .career-card .btn-dark:hover{
  background:var(--paper-i); color:var(--ink-1); border-color:var(--paper-i);
}


/* ==== CONTACT ============================================================ */

/* The four direct lines, reversed out on ink, numbers in Playfair. */
#page-contact .ct-lines{ background:var(--ink-1); border-bottom:0 }
#page-contact .ct-lines a{
  padding:clamp(28px,4vh,42px) clamp(22px,3vw,44px) clamp(30px,4.4vh,46px);
  border-right-color:var(--rule-i);
  transition:background .4s ease;
}
#page-contact .ct-lines a:hover{ background:var(--bark) }
#page-contact .ct-lines a:focus-visible{ outline:1px solid var(--gold); outline-offset:-4px }
#page-contact .ct-lines span{
  margin-bottom:14px;
  font:400 16px/1 var(--lux-sans); letter-spacing:.28em; color:var(--gold-lt);
}
#page-contact .ct-lines b{
  font:400 clamp(19px,1.9vw,28px)/1.2 var(--lux); color:var(--paper-i);
  transition:color .3s ease;
}
#page-contact .ct-lines a:hover b{ color:var(--gold-lt) }

/* ---- Build with RWD ------------------------------------------------------
   Moved from the homepage: the words on the left, the three ways in on the
   right, a row each with the whole row the link. On the bone, between the
   phone lines and the forms.
------------------------------------------------------------------------- */
#page-contact .bw{
  max-width:1280px; margin:0 auto;
  padding:clamp(64px,9vh,110px) clamp(24px,3.4vw,44px) 0;
  display:grid; gap:clamp(24px,5vw,72px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:start;
}
@media (max-width:820px){ #page-contact .bw{ grid-template-columns:1fr; gap:26px } }
#page-contact .bw h2{
  margin:clamp(16px,2.2vh,24px) 0 0; max-width:16ch;
  font:400 clamp(29px,3.6vw,58px)/1.09 var(--lux); color:var(--ink-1);
}
#page-contact .bw p{
  margin:0; max-width:52ch;
  font:400 clamp(16px,1.02vw,16px)/1.78 var(--lux-sans); color:var(--mute);
}
#page-contact .bw .bw-sub{
  margin-top:clamp(14px,2vh,20px);
  font:400 clamp(17px,1.5vw,21px)/1.5 var(--lux); font-style:italic; color:var(--say);
}
#page-contact .land-lede{ margin-top:clamp(18px,2.4vh,26px) }
#page-contact .land-ways{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule) }
#page-contact .land-ways li{ border-bottom:1px solid var(--rule) }
#page-contact .land-ways a{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,2vw,30px);
  align-items:baseline; padding:clamp(20px,3vh,30px) 0; color:inherit; text-decoration:none;
}
#page-contact .land-ways .wy-n{
  font:400 clamp(16px,.82vw,16px)/1 var(--lux-sans);
  letter-spacing:.22em; color:var(--gold); font-variant-numeric:tabular-nums;
}
#page-contact .lw-body{ display:grid; gap:6px }
#page-contact .lw-for{
  font:400 16px/1.3 var(--lux-sans); letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
#page-contact .lw-body b{
  font:400 clamp(20px,1.7vw,26px)/1.15 var(--lux); color:var(--ink-1); transition:color .25s ease;
}
#page-contact .lw-say{
  font:400 clamp(16px,.98vw,16px)/1.7 var(--lux-sans); color:var(--mute); max-width:48ch;
}
#page-contact .lw-go{
  align-self:center; display:inline-flex; align-items:center; justify-content:center;
  gap:12px; white-space:nowrap;
  padding:clamp(14px,1.8vh,17px) clamp(20px,1.8vw,28px);
  font:400 clamp(16px,.82vw,16px)/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase;
  color:#F4F1EA; background:var(--ink-1); border:1px solid var(--ink-1);
  transition:background .38s ease, color .38s ease;
}
#page-contact .lw-go i{ font-style:normal; transition:transform .3s cubic-bezier(.22,.61,.36,1) }
#page-contact .land-ways a:hover .lw-body b{ color:var(--gold) }
#page-contact .land-ways a:hover .lw-go{ background:transparent; color:var(--ink-1) }
#page-contact .land-ways a:hover .lw-go i{ transform:translateX(4px) }
#page-contact .land-ways a:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }
@media (max-width:620px){
  #page-contact .land-ways a{ grid-template-columns:auto 1fr }
  #page-contact .lw-go{ grid-column:2; justify-self:start; margin-top:8px }
}

#page-contact .ct-body{
  width:auto; max-width:1280px;
  padding:clamp(64px,9vh,110px) clamp(24px,3.4vw,44px);
}

/* Route tabs: tracked words over one hairline, the chosen one underlined in
   gold. */
#page-contact .rt-tabs{
  gap:0 clamp(22px,2.6vw,38px);
  border-bottom-color:var(--rule); margin-bottom:clamp(36px,5vh,56px);
}
#page-contact .rt-tabs label{
  padding:0 0 16px;
  font:400 clamp(16px,.8vw,16px)/1.3 var(--lux-sans);
  letter-spacing:.22em; color:var(--mute);
}
#page-contact .rt-tabs label:hover{ color:var(--ink-1) }
#page-contact .rt-tabs label::after{ height:1px; background:var(--gold) }
@media (max-width:620px){
  /* The phone's two-column grid (site.css): a long label wraps inside its
     cell instead of pushing the grid past the screen. */
  #page-contact .rt-tabs{ gap:0 12px }
  #page-contact .rt-tabs label{ min-width:0; padding:14px 4px; white-space:normal; letter-spacing:.08em }
}

#page-contact .f{ gap:clamp(26px,3.6vh,36px) clamp(24px,3.4vw,52px) }
#page-contact .f-note{
  padding-left:clamp(18px,2vw,30px); border-left:1px solid var(--gold);
  font:400 clamp(16px,1.05vw,16px)/1.7 var(--lux-sans); color:var(--mute);
}
#page-contact .f-act{ margin-top:clamp(6px,1vh,12px) }
#page-contact .rt-say{
  font:400 clamp(19px,1.8vw,25px)/1.5 var(--lux); color:var(--ink-1);
}

/* Office: no card, a gold hairline and the address set like a colophon. */
#page-contact .ct-office{ background:var(--bone); padding-bottom:clamp(84px,11vh,148px) }
#page-contact .ct-office-in{
  width:auto; max-width:1280px; padding:0 clamp(24px,3.4vw,44px);
  gap:clamp(32px,5vw,90px);
}
#page-contact .ct-card{
  background:transparent; border:0; border-top:1px solid var(--gold);
  padding:clamp(28px,4vh,40px) 0 0;
}
#page-contact .ct-card h2{
  margin-bottom:clamp(24px,3.4vh,34px);
  font:400 clamp(26px,2.6vw,40px)/1.1 var(--lux);
  text-transform:none; letter-spacing:0; color:var(--ink-1);
}
#page-contact .ct-row{ font:400 16px/1.75 var(--lux-sans); color:var(--say); gap:16px }
#page-contact .ct-row svg{ width:15px; height:15px; margin-top:5px; fill:var(--gold) }
#page-contact .ct-row b{ font:400 17px/1.5 var(--lux); color:var(--ink-1) }
#page-contact .ct-row a{ color:var(--say); border-bottom-color:var(--rule) }
#page-contact .ct-row a:hover{ color:var(--ink-1); border-bottom-color:var(--gold) }
#page-contact .pj-dir{
  font:400 16px/1 var(--lux-sans); letter-spacing:.24em;
  color:var(--ink-1); border-bottom:1px solid var(--gold);
}
#page-contact .pj-dir:hover{ color:var(--gold) }
#page-contact .ct-social{ border-top-color:var(--rule) }
#page-contact .ct-social a{
  font:400 16px/1 var(--lux-sans); letter-spacing:.24em; color:var(--mute);
}
#page-contact .ct-social a:hover{ color:var(--ink-1); border-bottom-color:var(--gold) }
#page-contact .ct-map{ border-color:var(--rule); background:var(--bone-2) }


/* ==== ENQUIRE ============================================================
   One panel on the building. The Corniche render fills the screen; over it a
   wide dark panel in two halves — the words on a thinner veil so the picture
   still shows through, the form on a deeper one so the fields read cleanly.
   Fields are a single hairline each with the label sitting in it, lifting
   above the line once there is something typed.
========================================================================= */

#page-enquiry .enq{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100svh - 68px);
  display:grid; place-items:center;
  padding:clamp(48px,9vh,120px) clamp(16px,4vw,64px);
  background:var(--bark);
}
#page-enquiry .enq-bg{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
}
#page-enquiry .enq::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(16,15,14,.30), rgba(16,15,14,.55));
}

#page-enquiry .enq-panel{
  width:100%; max-width:1280px;
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.6);
}
#page-enquiry .enq-say,
#page-enquiry .enq-side{
  -webkit-backdrop-filter:blur(18px) saturate(1.1);
          backdrop-filter:blur(18px) saturate(1.1);
}
#page-enquiry .enq-say{
  padding:clamp(40px,6vw,96px) clamp(28px,5vw,88px);
  display:flex; flex-direction:column; justify-content:center;
  background:rgba(43,33,26,.55);
  color:var(--paper-i);
}
/* The dark half: the form, then the OR column with the accounts. */
#page-enquiry .enq-side{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(24px,3vw,48px);
  padding:clamp(40px,6vw,96px) clamp(24px,3vw,48px) clamp(40px,6vw,96px) clamp(28px,5vw,88px);
  background:rgba(16,15,14,.86);
  color:var(--paper-i);
}
#page-enquiry .enq-form{ position:relative; min-width:0 }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  #page-enquiry .enq-say{ background:rgba(43,33,26,.88) }
  #page-enquiry .enq-side{ background:#14110F }
}

/* ---- The words ---------------------------------------------------------- */
#page-enquiry .enq-kicker{
  display:flex; align-items:center; gap:12px; margin:0;
  font:400 16px/1 var(--lux-sans); letter-spacing:.32em; text-transform:uppercase;
  color:var(--gold-lt);
}
#page-enquiry .enq-kicker i{ width:6px; height:6px; border-radius:50%; background:var(--gold) }
#page-enquiry .enq-say h1{
  margin:clamp(20px,3vh,30px) 0 0;
  font:400 clamp(38px,4.6vw,72px)/1.04 var(--lux);
  letter-spacing:-.01em; text-transform:none; color:#fff;
  text-wrap:balance;
}
#page-enquiry .enq-say h1 em{ font-style:italic; color:var(--gold-lt) }
#page-enquiry .enq-lede{
  margin:clamp(22px,3.4vh,34px) 0 0; max-width:44ch;
  padding-left:clamp(16px,1.6vw,24px); border-left:1px solid var(--gold);
  font:400 clamp(16px,1.15vw,18px)/1.7 var(--lux-sans);
  color:rgba(244,241,234,.82);
}

/* ---- The form ----------------------------------------------------------- */
#page-enquiry .enq-form{ display:flex; flex-direction:column; gap:clamp(22px,3.4vh,34px) }
#page-enquiry .enq-form h2{
  margin:0 0 clamp(4px,1vh,10px);
  font:500 clamp(24px,2vw,32px)/1.1 var(--lux-sans); letter-spacing:.01em;
  text-transform:none; color:#fff;
}

#page-enquiry .enq-f{ position:relative; display:block; padding-top:14px }
#page-enquiry .enq-f input,
#page-enquiry .enq-f textarea{
  display:block; width:100%;
  padding:12px 2px 12px;
  background:transparent; color:#fff;
  border:0; border-bottom:1px solid rgba(244,241,234,.28); border-radius:0;
  font:400 16px/1.4 var(--lux-sans);
  outline:none; resize:none; overflow:hidden;
  transition:border-color .3s ease;
}
#page-enquiry .enq-f textarea{ min-height:48px }
/* The label sits on the line like a placeholder, and lifts above it on
   focus or once filled — the space is there either way, so nothing jumps. */
#page-enquiry .enq-f > span{
  position:absolute; left:2px; top:26px;
  font:400 16px/1.2 var(--lux-sans); color:rgba(244,241,234,.62);
  pointer-events:none; transform-origin:left top;
  transition:transform .3s cubic-bezier(.22,.61,.36,1), color .3s ease, letter-spacing .3s ease;
}
#page-enquiry .enq-f small{ font-size:1em; color:rgba(244,241,234,.42) }
#page-enquiry .enq-f :is(input,textarea):focus + span,
#page-enquiry .enq-f :is(input,textarea):not(:placeholder-shown) + span{
  transform:translateY(-24px) scale(.74);
  color:var(--gold-lt); letter-spacing:.14em; text-transform:uppercase;
}
/* A gold line draws across under the field being typed in. */
#page-enquiry .enq-f::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
#page-enquiry .enq-f:focus-within::after{ transform:scaleX(1) }
#page-enquiry .enq-f input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #1A1613 inset;
  caret-color:#fff;
}

#page-enquiry .enq-btn{
  margin-top:clamp(8px,1.6vh,16px);
  width:100%; padding:20px 24px;
  background:var(--gold); color:#100F0E;
  border:1px solid var(--gold); border-radius:0; cursor:pointer;
  font:500 16px/1 var(--lux-sans); letter-spacing:.24em; text-transform:uppercase;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
}
#page-enquiry .enq-btn:hover{ background:var(--gold-lt); border-color:var(--gold-lt) }
#page-enquiry .enq-btn:focus-visible{ outline:2px solid #fff; outline-offset:3px }
#page-enquiry .enq-btn:disabled{ opacity:.7; cursor:progress }

#page-enquiry .enq-alt{
  margin:0; text-align:center;
  font:400 16px/1.6 var(--lux-sans); color:rgba(244,241,234,.66);
}
#page-enquiry .enq-alt a{
  margin-left:6px; color:var(--gold-lt);
  border-bottom:1px solid transparent; transition:border-color .3s ease, color .3s ease;
}
#page-enquiry .enq-alt a:hover{ color:#fff; border-bottom-color:var(--gold) }
#page-enquiry .enq-alt span{ margin-left:6px; color:rgba(244,241,234,.35) }

/* Results, restyled for the dark panel. */
#page-enquiry .enq-form .form-ok{
  background:rgba(176,141,87,.14); color:var(--paper-i);
  border-left:2px solid var(--gold); padding:16px 18px;
  font:400 16px/1.5 var(--lux-sans);
}
#page-enquiry .enq-form .form-fail{
  background:rgba(192,80,47,.14); color:var(--paper-i);
  font:400 16px/1.55 var(--lux-sans);
}
#page-enquiry .enq-form .form-fail a{ color:var(--gold-lt) }

/* ---- OR, and the accounts ----------------------------------------------- */
/* A column of rule, OR, rule, with the icons standing beside the OR. */
#page-enquiry .enq-or{
  display:grid; grid-template-columns:auto auto; grid-template-rows:1fr auto 1fr;
  align-items:center; justify-items:center; gap:16px clamp(20px,2.4vw,40px);
}
#page-enquiry .enq-or-l{ width:1px; height:100%; min-height:40px; background:rgba(244,241,234,.22) }
#page-enquiry .enq-or > .enq-or-l:first-child{ grid-area:1/1 }
#page-enquiry .enq-or-t{ grid-area:2/1 }
#page-enquiry .enq-or > .enq-or-l:nth-child(3){ grid-area:3/1 }
#page-enquiry .enq-or .enq-social{ grid-area:1/2/4/3; align-self:center }
#page-enquiry .enq-or-t{
  font:500 16px/1 var(--lux-sans); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,241,234,.75);
}

@media (max-width:900px){
  #page-enquiry .enq{ padding:0; place-items:stretch }
  #page-enquiry .enq-panel{ grid-template-columns:1fr; box-shadow:none }
  #page-enquiry .enq-say{ padding:clamp(56px,10vh,96px) 22px 40px; background:rgba(43,33,26,.5) }
  #page-enquiry .enq-side{
    grid-template-columns:1fr; gap:32px;
    padding:40px 22px calc(48px + var(--bar-h,0px));
  }
  /* On a phone the column lies down: rule, OR, rule, then the icons in a row. */
  #page-enquiry .enq-or{
    grid-template-columns:1fr auto 1fr; grid-template-rows:auto auto; gap:18px 16px;
  }
  #page-enquiry .enq-or-l{ width:100%; height:1px; min-height:0 }
  #page-enquiry .enq-or > .enq-or-l:first-child{ grid-area:1/1 }
  #page-enquiry .enq-or-t{ grid-area:1/2 }
  #page-enquiry .enq-or > .enq-or-l:nth-child(3){ grid-area:1/3 }
  #page-enquiry .enq-or .enq-social{ grid-area:2/1/3/4; flex-direction:row; justify-content:center }
}

@media (prefers-reduced-motion: no-preference){
  #page-enquiry .enq-say > *,
  #page-enquiry .enq-form{ animation:pgRise 1.05s cubic-bezier(.22,.61,.36,1) both }
  #page-enquiry .enq-say > :nth-child(2){ animation-delay:.10s }
  #page-enquiry .enq-say > :nth-child(3){ animation-delay:.22s }
  #page-enquiry .enq-form{ animation-delay:.16s }
}


/* ==== FOOTER =============================================================
   Every page ends here, Home included. Warm ink rather than true black, the
   same labels and links as the pages above it.
========================================================================= */

body > footer{ background:var(--ink-1); color:var(--mute-i) }
body > footer .foot-inner{
  max-width:1280px;
  padding:clamp(72px,10vh,120px) clamp(24px,3.4vw,44px) clamp(30px,4vh,44px);
}
body > footer .foot-top{ gap:clamp(36px,4vw,64px); border-bottom-color:var(--rule-i) }
body > footer .lock{ color:var(--paper-i) }
body > footer .foot-brand p{
  margin-top:clamp(20px,3vh,28px); max-width:30ch;
  font:400 clamp(16px,1.1vw,17px)/1.55 var(--lux); font-style:italic;
  color:rgba(244,241,234,.7);
}
body > footer .foot-col h5{
  margin-bottom:clamp(18px,2.6vh,24px);
  font:400 16px/1 var(--lux-sans); letter-spacing:.3em; color:var(--gold-lt);
}
body > footer .foot-col a{
  padding:6px 0;
  font:400 16px/1.5 var(--lux-sans); color:rgba(244,241,234,.82);
  transition:color .3s ease;
}
body > footer .foot-col a:hover{ color:var(--gold-lt) }
body > footer .foot-col .addr{ font:400 16px/1.8 var(--lux-sans); color:rgba(244,241,234,.72) }
body > footer .foot-bottom{
  font:400 16px/1.4 var(--lux-sans); letter-spacing:.2em;
  text-transform:uppercase; color:rgba(244,241,234,.45);
}


/* ==== Motion: the home page's ============================================ */

@media (prefers-reduced-motion: no-preference){
  :is(#page-projects,#page-careers) .rv{
    transform:translateY(26px);
    transition:opacity .9s ease, transform 1.05s cubic-bezier(.22,.61,.36,1);
  }
  :is(#page-projects,#page-careers) .rv.in{ transform:none }
  #page-projects .proj-grid .proj-card.rv:nth-child(3n+2){ transition-delay:.13s }
  #page-projects .proj-grid .proj-card.rv:nth-child(3n){ transition-delay:.26s }

  :is(#page-projects,#page-careers) .page-hero .inner > *,
  #page-contact .ct-hero .ct-in > *{
    animation:pgRise 1.05s cubic-bezier(.22,.61,.36,1) both;
  }
  :is(#page-projects,#page-careers) .page-hero .inner > :nth-child(2),
  #page-contact .ct-hero .ct-in > :nth-child(2){ animation-delay:.10s }
  :is(#page-projects,#page-careers) .page-hero .inner > :nth-child(3),
  #page-contact .ct-hero .ct-in > :nth-child(3){ animation-delay:.22s }
  #page-careers .page-hero .inner > :nth-child(4){ animation-delay:.34s }
}

@keyframes pgRise{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}


/* ==== PROJECTS FILTER ====================================================
   The homepage finder handed its choice to the projects page through a
   one-shot global and vanished; this filters the rendered cards in place and
   reads its opening state from the query string. Same furniture as .find-row
   on the homepage — white plate, green top rule, mono labels — restated here
   because that sheet is the homepage's and does not travel.
========================================================================= */

#page-projects .proj-filter{
  display:grid; gap:16px; align-items:end;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  padding:clamp(20px,2.2vw,28px);
  margin-bottom:clamp(28px,3.4vh,40px);
  background:var(--white); border:1px solid var(--line);
  border-top:3px solid var(--green);
}
#page-projects .proj-filter label{ display:grid; gap:9px }
#page-projects .proj-filter label > span{
  font:500 16px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
#page-projects .proj-filter select{
  width:100%; padding:13px 14px; font:400 16px/1.4 var(--body);
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:0;
}
#page-projects .proj-filter select:focus-visible{ outline:2px solid var(--green); outline-offset:1px }

/* Sits on the label baseline with the menus, not under them. */
#page-projects .proj-count{
  align-self:end; margin:0; padding-bottom:13px;
  font:500 16px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
#page-projects .proj-count b{ font-size:16px; color:var(--ink) }

#page-projects .proj-slot[hidden]{ display:none }

#page-projects .proj-empty{
  padding:48px 0; text-align:center;
  font:400 16px/1.6 var(--lux-sans); color:var(--mute,#6C6860);
}
#page-projects .proj-empty button{
  margin-left:8px; padding:0; background:none; border:0;
  font:inherit; color:var(--ink); border-bottom:1px solid var(--green);
}

/* The card's decision facts — price and RERA — under the product line. */
#page-projects .proj-meta,
#page-home .proj-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px;
  font:500 16px/1.5 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--grey);
}
#page-projects .proj-meta .proj-rera,
#page-home .proj-meta .proj-rera{ color:var(--green-deep,#4E7A17) }

/* ==== CONTACT: the form as a form ==========================================
   It was hairlines on bone — tracked labels over an underline — and read as
   page text rather than something to fill in. Now one white card holds the
   route tabs (pills, the chosen one dark) and the fields (white boxes with a
   gold label, two even columns), the same field style as the Landowners and
   Channel Partners forms. */
#page-contact .rt{
  max-width:1080px; margin:0 auto;
  padding:clamp(22px,3vw,40px) clamp(18px,3vw,44px) clamp(26px,3.4vw,44px);
  background:#fff; border:1px solid var(--rule); border-radius:22px;
  box-shadow:0 22px 60px rgba(43,33,26,.10);
}

/* Route tabs */
#page-contact .rt-tabs{
  display:flex; flex-wrap:wrap; gap:10px; margin:0 0 clamp(24px,3vh,34px);
  padding:0 0 clamp(20px,2.6vh,28px); border-bottom:1px solid var(--rule);
}
#page-contact .rt-tabs label{
  padding:13px 20px; border:1px solid var(--rule); border-radius:999px;
  background:var(--bone); white-space:nowrap; cursor:pointer;
  font:600 16px/1 var(--lux-sans); letter-spacing:.02em; text-transform:none; color:var(--ink-1);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
#page-contact .rt-tabs label::after{ display:none }
#page-contact .rt-tabs label:hover{ border-color:var(--ink-1) }
#page-contact :is(#r1:checked ~ .rt-tabs label[for=r1], #r2:checked ~ .rt-tabs label[for=r2],
  #r3:checked ~ .rt-tabs label[for=r3], #r4:checked ~ .rt-tabs label[for=r4],
  #r5:checked ~ .rt-tabs label[for=r5], #r6:checked ~ .rt-tabs label[for=r6]){
  background:var(--ink-1); border-color:var(--ink-1); color:#fff;
}
#page-contact :is(#r1,#r2,#r3,#r4,#r5,#r6):focus-visible ~ .rt-tabs label{ outline:none }
#page-contact :is(#r1:focus-visible ~ .rt-tabs label[for=r1], #r2:focus-visible ~ .rt-tabs label[for=r2],
  #r3:focus-visible ~ .rt-tabs label[for=r3], #r4:focus-visible ~ .rt-tabs label[for=r4],
  #r5:focus-visible ~ .rt-tabs label[for=r5], #r6:focus-visible ~ .rt-tabs label[for=r6]){
  outline:2px solid var(--gold); outline-offset:2px;
}
@media (max-width:620px){
  /* One swipeable row of pills on a phone. */
  #page-contact .rt-tabs{ display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; gap:8px;
    margin-inline:calc(-1 * clamp(18px,3vw,44px)); padding-inline:clamp(18px,3vw,44px) }
  #page-contact .rt-tabs::-webkit-scrollbar{ display:none }
  #page-contact .rt-tabs label{ flex:none; padding:12px 16px; white-space:nowrap; letter-spacing:.02em }
}

/* Fields */
#page-contact .f{
  max-width:none; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px clamp(18px,2.4vw,28px); align-items:end;
}
@media (max-width:640px){ #page-contact .f{ grid-template-columns:minmax(0,1fr) } }
#page-contact .f label{ gap:10px }
#page-contact .f label span{
  font:700 16px/1.2 var(--lux-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep,#8A6B3C);
}
#page-contact .f :is(input,select,textarea){
  width:100%; height:54px; padding:0 16px; box-sizing:border-box;
  background:#fff; border:1px solid rgba(16,15,14,.16); border-radius:12px;
  font:500 17px/1.4 var(--lux-sans); color:var(--ink-1);
  transition:border-color .2s ease, box-shadow .2s ease;
}
#page-contact .f textarea{ height:auto; min-height:130px; padding:14px 16px; line-height:1.6; resize:vertical }
#page-contact .f select{
  appearance:none; -webkit-appearance:none; padding-right:44px; cursor:pointer;
  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;
}
#page-contact .f :is(input,textarea)::placeholder{ color:#9A958C; opacity:1 }
#page-contact .f :is(input,select,textarea):hover{ border-color:var(--gold) }
#page-contact .f :is(input,select,textarea):focus{ outline:0; border-color:var(--ink-1); box-shadow:0 0 0 3px rgba(176,141,87,.22) }
#page-contact .f :is(input,select,textarea):focus-visible{ outline:0 }

/* The intro line and the plain Careers panel */
#page-contact .f-note{
  grid-column:1/-1; max-width:none; margin:0 0 4px; padding:0; border:0;
  font:400 18px/1.6 var(--lux-sans); color:var(--say);
}
#page-contact .rt-say{ font-size:19px; color:var(--say) }

/* Buttons and the privacy line */
#page-contact .f-act{ grid-column:1/-1; margin-top:6px; gap:12px }
#page-contact .rt .btn{
  border-radius:999px; padding:17px 30px;
  font:600 16px/1 var(--lux-sans); letter-spacing:.1em;
}
#page-contact .f .f-privacy{ grid-column:1/-1; margin:0; font-size:16px; opacity:.85 }

/* ==== CONTACT: Build with RWD as three cards ==============================
   The heading across the top, then a white card per way in — landowners,
   talent, investors — each with a light-tinted icon, its number, the title,
   one line and a pill button. The list rows it replaces were narrow text
   columns beside square buttons and read as fine print. */
#page-contact .bw{
  display:block; max-width:1180px; margin:0 auto;
  padding:clamp(64px,9vh,110px) clamp(24px,3.4vw,44px);
}
#page-contact .bw > div:first-child{ max-width:760px; margin:0 0 clamp(30px,4.4vh,48px) }
#page-contact .bw h2{ margin:0; font:600 clamp(36px,4vw,58px)/1.05 var(--lux); color:var(--ink-1) }
#page-contact .bw .bw-sub{
  margin:14px 0 0; font:400 italic clamp(21px,1.8vw,26px)/1.35 var(--lux); color:var(--gold-deep,#8A6B3C);
}
#page-contact .bw .land-lede{ margin:16px 0 0; max-width:60ch; font:400 19px/1.65 var(--lux-sans); color:var(--say) }

#page-contact .land-ways{
  list-style:none; margin:0; padding:0; border:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
}
@media (max-width:960px){ #page-contact .land-ways{ grid-template-columns:minmax(0,1fr) } }
#page-contact .land-ways li{ border:0 }
#page-contact .land-ways a{
  display:flex; flex-direction:column; gap:0; height:100%; box-sizing:border-box;
  padding:clamp(24px,2.4vw,32px); text-decoration:none; color:var(--ink-1);
  background:#fff; border:1px solid var(--rule); border-radius:18px;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#page-contact .land-ways a:hover{ transform:translateY(-4px); box-shadow:0 20px 48px rgba(43,33,26,.12); border-color:var(--gold) }
#page-contact .bw-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px }
#page-contact .bw-ico{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05) }
#page-contact .bw-ico svg{ display:block }
#page-contact .land-ways li:nth-child(1) .bw-ico{ background:#E6F0E2; color:#4F7A43 }
#page-contact .land-ways li:nth-child(2) .bw-ico{ background:#ECE7F4; color:#6A5A93 }
#page-contact .land-ways li:nth-child(3) .bw-ico{ background:#F7F0D6; color:#9A7A1E }
#page-contact .land-ways .wy-n{
  font:600 clamp(32px,2.8vw,42px)/1 var(--lux); letter-spacing:0; color:var(--gold); opacity:.9;
}
#page-contact .lw-body{ display:flex; flex-direction:column; gap:8px; flex:1 }
#page-contact .lw-for{
  font:700 16px/1.2 var(--lux-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-deep,#8A6B3C);
}
#page-contact .lw-body b{ font:600 clamp(23px,1.9vw,28px)/1.2 var(--lux); color:var(--ink-1); transition:color .2s ease }
#page-contact .lw-say{ font:400 17px/1.6 var(--lux-sans); color:var(--say) }
#page-contact .lw-go{
  align-self:flex-start; margin-top:24px; grid-column:auto;
  display:inline-flex; align-items:center; gap:10px; padding:15px 24px; border-radius:999px;
  background:var(--ink-1); color:#fff; border:1px solid var(--ink-1);
  font:600 16px/1 var(--lux-sans); letter-spacing:.06em; text-transform:none;
}
#page-contact .lw-go i{ font-style:normal; color:#CBAE80 }
#page-contact .land-ways a:hover .lw-body b{ color:var(--ink-1) }
#page-contact .land-ways a:hover .lw-go{ background:var(--gold); border-color:var(--gold); color:#100F0E }
#page-contact .land-ways a:hover .lw-go i{ color:#100F0E }
#page-contact .land-ways a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }
#page-contact .bw-top .wy-n{ margin-left:auto; padding:0; border:0 }
#page-contact .land-ways a{ align-items:stretch }

/* Build with RWD, classic: no tinted icons, no lifted cards. Three columns
   under a gold rule — numeral, label, title, a line, and an underlined link —
   in the same editorial register as the rest of the site. */
#page-contact .bw-ico{ display:none }
#page-contact .land-ways{ gap:clamp(28px,3.4vw,56px) }
#page-contact .land-ways a{
  padding:28px 0 0; background:none; border:0; border-top:2px solid var(--gold);
  border-radius:0; box-shadow:none;
}
#page-contact .land-ways a:hover{ transform:none; box-shadow:none; border-color:var(--ink-1) }
#page-contact .bw-top{ margin-bottom:18px }
#page-contact .bw-top .wy-n{ margin-left:0; font-size:clamp(34px,3vw,46px); opacity:1 }
#page-contact .lw-go{
  margin-top:22px; padding:0 0 6px; border:0; border-bottom:1px solid var(--gold); border-radius:0;
  background:none; color:var(--ink-1); font:600 16px/1 var(--lux-sans); letter-spacing:.04em;
}
#page-contact .lw-go i{ color:var(--gold); transition:transform .25s ease }
#page-contact .land-ways a:hover .lw-go{ background:none; color:var(--ink-1); border-bottom-color:var(--ink-1) }
#page-contact .land-ways a:hover .lw-go i{ color:var(--ink-1); transform:translateX(4px) }
@media (max-width:960px){ #page-contact .land-ways{ gap:36px } }
/* Bordered columns: a hairline frame on each, the gold rule kept on top. */
#page-contact .land-ways{ gap:clamp(18px,2vw,26px) }
#page-contact .land-ways a{
  padding:clamp(26px,2.6vw,36px); border:1px solid rgba(16,15,14,.18); border-top:2px solid var(--gold);
}
#page-contact .land-ways a:hover{ border-color:var(--ink-1) }
/* The way-in as an outlined button inside each bordered column. */
#page-contact .lw-go{
  margin-top:24px; padding:15px 24px; border:1px solid var(--ink-1); border-radius:0;
  background:transparent; color:var(--ink-1);
  font:600 16px/1 var(--lux-sans); letter-spacing:.1em; text-transform:uppercase;
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
#page-contact .lw-go i{ color:var(--gold) }
#page-contact .land-ways a:hover .lw-go{ background:var(--ink-1); color:#fff; border-color:var(--ink-1) }
#page-contact .land-ways a:hover .lw-go i{ color:#CBAE80 }