/* Dharti Group — enquiry + contact page
   ============================================================ */

/* ============================================================
   ENQUIRY — warm interior
   ============================================================ */
.enquiry{
  /* Was Marine Drive, which also carries .ct-head on the contact page and .fs-hear
     on /flagship/. An interior instead, since the band is asking for a conversation
     rather than selling a view. Lives in contact.css but is used on the home page
     only; the contact page has no enquiry band of its own. */
  --bg:url("../assets/stock/living-room.jpg");
  --bg:image-set(url("../assets/stock/living-room.webp") type("image/webp"),
                 url("../assets/stock/living-room.jpg")  type("image/jpeg"));
  padding:clamp(5rem,13vh,9rem) var(--gutter); text-align:center;
  border-top:1px solid var(--line);
}
.enquiry__inner{ max-width:34rem; margin:0 auto; }
.enquiry__title{
  font-weight:500; letter-spacing:-.02em;
  font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.18; margin:.7rem 0 .8rem;
}
.enquiry__sub{ color:var(--bone-dim); font-size:.95rem; line-height:1.7; }
.enquiry__form{ display:flex; gap:.6rem; margin:1.8rem 0 .8rem; flex-wrap:wrap; justify-content:center; }
.enquiry__form input{
  flex:1 1 180px; min-width:0; background:rgba(6,13,28,.5); border:1px solid var(--line);
  color:var(--bone); font-family:inherit; font-size:.85rem;
  padding:.85rem 1rem; border-radius:2px; transition:border-color .3s;
}
.enquiry__form input::placeholder{ color:var(--muted); }
.enquiry__form input:focus{ outline:none; border-color:var(--gold); }
.enquiry__form .btn{ flex:0 0 auto; }
.enquiry__note{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   CONTACT PAGE
   /contact/ only.
   ============================================================ */
.ct{ --maxw:64rem; }
.ct-sec{ padding:clamp(3rem,7vh,5rem) var(--gutter) clamp(4.5rem,11vh,8rem); }

/* ---------- page head ---------- */
.ct-head{
  padding:clamp(6.5rem,14vh,9.5rem) var(--gutter) clamp(2.5rem,6vh,4rem);
  /* The sky and the skyline, greyed almost to nothing. */
  --bg:url("../assets/mumsky-hero1.jpg");
  --bg:image-set(url("../assets/mumsky-hero1.webp") type("image/webp"),
                 url("../assets/mumsky-hero1.jpg")  type("image/jpeg"));
  --bg-pos:center 34%;
  --bg-op:.58;
}
.ct-head__inner{ max-width:64rem; margin:0 auto; }
.ct-head__title{
  font-weight:500; font-size:clamp(2.4rem,7vw,4.6rem); line-height:1.02;
  letter-spacing:-.035em; margin:1rem 0 0; color:var(--bone);
}
.ct-head__title em{ font-style:italic; color:var(--gold-2); }
.ct-head__lede{
  max-width:34rem; margin:1.6rem 0 0;
  font-size:clamp(1rem,1.7vw,1.15rem); line-height:1.7; color:var(--bone-dim);
}

/* ============================================================
   OFFICE + FORM
   ============================================================ */
.ct-grid{
  max-width:64rem; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1fr);
  gap:clamp(2.4rem,6vw,5rem); align-items:start;
  padding-top:clamp(2rem,4vw,3rem); border-top:1px solid var(--line);
}

/* ---------- office column ---------- */
.ct-block + .ct-block{
  margin-top:2rem; padding-top:2rem; border-top:1px solid var(--line);
}
.ct-block__k{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.9rem;
}
.ct-address{
  font-style:normal; color:var(--bone); font-size:.95rem; line-height:1.8;
}
.ct-phone a{ color:var(--gold-2); font-size:1.1rem; letter-spacing:.01em; transition:color .3s; }
.ct-phone a:hover{ color:var(--gold); }
.ct-link{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1rem;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .3s var(--ease);
}
.ct-link span{ transition:transform .4s var(--ease); }
.ct-link:hover{ color:var(--gold-2); }
.ct-link:hover span{ transform:translateX(5px); }
.ct-social{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.ct-social a{
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
  transition:color .3s;
}
.ct-social a:hover{ color:var(--gold-2); }
.ct-note{ color:var(--bone-dim); font-size:.88rem; line-height:1.75; }
.ct-note a{ color:var(--gold-2); border-bottom:1px solid rgba(198,161,91,.4); }
.ct-note a:hover{ color:var(--gold); }

/* ============================================================
   INTENT SWITCH — three cards, one radio group
   ============================================================ */
.ct-intent{ border:0; margin-bottom:1.8rem; }
.ct-intent__legend{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.9rem; padding:0;
}
.ct-intent__opts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.ct-opt{ display:block; cursor:pointer; }
.ct-opt input{ position:absolute; opacity:0; width:0; height:0; }
.ct-opt__box{
  display:flex; flex-direction:column; gap:.35rem; height:100%;
  padding:.9rem 1rem; border-radius:2px;
  border:1px solid var(--line); background:rgba(243,239,230,.02);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.ct-opt:hover .ct-opt__box{ border-color:rgba(198,161,91,.45); }
.ct-opt input:checked + .ct-opt__box{
  border-color:var(--gold); background:rgba(198,161,91,.09);
}
.ct-opt input:focus-visible + .ct-opt__box{ outline:1px solid var(--gold); outline-offset:2px; }
.ct-opt__title{ font-size:.88rem; color:var(--bone); letter-spacing:-.01em; }
.ct-opt input:checked + .ct-opt__box .ct-opt__title{ color:var(--gold-2); }
.ct-opt__sub{ font-size:.7rem; line-height:1.4; color:var(--muted); }

/* ============================================================
   FORM
   One grid of two columns for the whole form rather than a stack of rows,
   so the fields a given intent shows close up into full rows on their own.
   A row of its own per pair could not do that: each intent hides a different
   set, and the leftovers stranded a single half-width field beside a gap.
   ============================================================ */
.ct-form{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem; align-items:start;
}
.ct-field{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
/* the message, and the role on a careers enquiry: free text, so they read
   better across the full width than cut to a column */
.ct-field--wide{ grid-column:1 / -1; }
/* the UA rule for [hidden] is display:none, which display:flex overrides */
.ct-field[hidden]{ display:none; }
.ct-form__foot,
.ct-form .form-status{ grid-column:1 / -1; }

/* Order per intent. Buying and careers run name, phone, email, designation,
   which pairs as it stands. A redevelopment enquiry has no email field and
   asks for the designation in the society's sense, so the designation moves
   up to sit with the society fields and the two rows come out even:
   society + where it is, flats + designation, name + phone. */
.ct-form[data-intent="redevelopment"] [data-field="name"],
.ct-form[data-intent="redevelopment"] [data-field="phone"]{ order:1; }
.ct-form[data-intent="redevelopment"] [data-field="message"]{ order:2; }
.ct-form[data-intent="redevelopment"] .ct-form__foot{ order:3; }
.ct-form[data-intent="redevelopment"] .form-status{ order:4; }

.ct-field__label{
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.ct-field__label[hidden]{ display:none; }
.ct-field input,
.ct-field textarea{
  width:100%; background:rgba(6,13,28,.5); border:1px solid var(--line);
  color:var(--bone); font-family:inherit; font-size:.9rem; line-height:1.6;
  padding:.8rem .95rem; border-radius:2px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.ct-field textarea{ resize:vertical; min-height:6.5rem; }
.ct-field input:focus,
.ct-field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(6,13,28,.7);
}
.ct-form__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.5rem;
}
.ct-form__note{
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ============================================================
   DISCLAIMER
   The "Come and see us" block that used to close this page repeated the
   address, the directions link and the phone number from the office column,
   so it was dropped. Its rules went with it; the disclaimer is all that is
   left and it now closes the main section directly.
   ============================================================ */
.ct-disclaimer{
  max-width:64rem; margin:clamp(3.5rem,8vh,5.5rem) auto 0;
  padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.62rem; line-height:1.7; color:var(--muted); text-align:left;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .ct-grid{ grid-template-columns:1fr; gap:2.6rem; }
}
@media (max-width:640px){
  .ct-intent__opts{ grid-template-columns:1fr; }
  .ct-form{ grid-template-columns:1fr; }
}