/* Dharti Group — the Enquire dialog
   ============================================================
   "Contact" in the nav goes to /contact/. "Enquire" opens this instead:
   the same conversation, without losing the page you were reading.

   The panel is deliberately shorter than the contact form. That page asks
   three different sets of questions depending on who is writing; this asks
   the four things every enquiry needs and points at the full page for the
   rest. Markup sits at the end of every <body>, behaviour in js/enquire.js.

   Self-contained on purpose. It carries its own field styles rather than
   borrowing .ct-* from css/contact.css, so it can appear on the project and
   story pages without dragging the whole contact stylesheet onto them.
   ============================================================ */

.eq{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  /* Vertical inset is deliberately smaller than --gutter: at 1280x720 a full
     gutter top and bottom costs 128px and pushes Send below the panel's own
     scroll. The panel is sized to fit that viewport whole. One variable so the
     padding here and the panel's max-height below cannot drift apart. */
  --eq-inset:clamp(1rem, 3.5vh, 2rem);
  padding:var(--eq-inset) var(--gutter);
  /* The UA rule for [hidden] is display:none, which display:flex overrides. */
}
.eq[hidden]{ display:none; }

/* ---------- the scrim ---------- */
.eq__scrim{
  position:absolute; inset:0;
  background:rgba(3,7,16,.72);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .4s var(--ease);
}

/* ---------- the panel ---------- */
.eq__panel{
  position:relative; z-index:1;
  width:min(38rem, 100%);
  /* Tall viewports get the whole panel; short ones scroll it, never the page
     behind, which is locked while this is open. A percentage here does not
     work: the panel is a centred flex item, so its containing block resolves
     as indefinite and the max-height collapses. */
  max-height:calc(100vh - var(--eq-inset) * 2);
  max-height:calc(100dvh - var(--eq-inset) * 2);
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(1.5rem, 3.2vw, 2rem);
  background:var(--ink-2);
  border:1px solid var(--line); border-radius:3px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  opacity:0; transform:translateY(14px) scale(.985);
  transition:opacity .4s var(--ease), transform .5s var(--ease);
  /* On the short viewports where the panel does scroll, the default light
     scrollbar reads as a white bar down the edge of a navy panel. */
  scrollbar-width:thin;
  scrollbar-color:rgba(198,161,91,.4) transparent;
}
.eq__panel::-webkit-scrollbar{ width:6px; }
.eq__panel::-webkit-scrollbar-track{ background:transparent; }
.eq__panel::-webkit-scrollbar-thumb{
  background:rgba(198,161,91,.4); border-radius:3px;
}

/* .eq--in is set one frame after the dialog is unhidden, so both of these
   animate in rather than appearing already open. */
.eq--in .eq__scrim{ opacity:1; }
.eq--in .eq__panel{ opacity:1; transform:none; }

/* ---------- close ---------- */
.eq__close{
  position:absolute; top:.9rem; right:.9rem;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.2rem; height:2.2rem; padding:0;
  background:none; border:1px solid transparent; border-radius:2px;
  color:var(--muted); cursor:pointer;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.eq__close:hover{ color:var(--gold-2); border-color:var(--line); }

/* ---------- head ---------- */
.eq__title{
  font-weight:500; letter-spacing:-.025em;
  font-size:clamp(1.4rem, 3vw, 1.85rem); line-height:1.15;
  margin:.5rem 0 .45rem; color:var(--bone);
  /* clears the close button on a narrow panel */
  padding-right:2.4rem;
}
.eq__title em{ font-style:italic; color:var(--gold-2); }
.eq__lede{ color:var(--bone-dim); font-size:.92rem; line-height:1.65; }

/* ---------- form ---------- */
.eq__form{ display:grid; gap:.8rem; margin-top:1.15rem; }
.eq__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }

.eq__intent{ border:0; padding:0; margin:0; }
.eq__legend{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.7rem; padding:0;
}
.eq__opts{ display:flex; flex-wrap:wrap; gap:.5rem; }
.eq__opt{ cursor:pointer; }
.eq__opt input{ position:absolute; opacity:0; width:0; height:0; }
.eq__opt span{
  display:inline-block;
  padding:.55rem .95rem; border-radius:2px;
  border:1px solid var(--line); background:rgba(243,239,230,.02);
  font-size:.78rem; color:var(--bone-dim); letter-spacing:-.01em;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.eq__opt:hover span{ border-color:rgba(198,161,91,.45); }
.eq__opt input:checked + span{
  border-color:var(--gold); background:rgba(198,161,91,.09); color:var(--gold-2);
}
.eq__opt input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }

.eq__field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.eq__label{
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.eq__field input,
.eq__field textarea{
  width:100%; background:rgba(6,13,28,.6); border:1px solid var(--line);
  color:var(--bone); font-family:inherit; font-size:.9rem; line-height:1.6;
  padding:.65rem .9rem; border-radius:2px;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.eq__field textarea{ resize:vertical; min-height:4rem; }
.eq__field input:focus,
.eq__field textarea:focus{
  outline:none; border-color:var(--gold); background:rgba(6,13,28,.8);
}
/* matches the .ct-field / .rd-field rule in base.css: red only after a go at it */
.eq__field input:user-invalid,
.eq__field textarea:user-invalid{ border-color:#b4643f; }

.eq__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:.15rem; }
.eq__note{
  font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ---------- the way out to the full page ---------- */
.eq__alt{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.7; color:var(--muted);
}
.eq__alt a{ color:var(--gold-2); transition:color .3s var(--ease); }
.eq__alt a span{ display:inline-block; transition:transform .4s var(--ease); }
.eq__alt a:hover{ color:var(--gold); }
.eq__alt a:hover span{ transform:translateX(4px); }
/* On /contact/ itself the offer is circular, so js/enquire.js sets this. */
.eq__alt[hidden]{ display:none; }

/* ---------- narrow ---------- */
@media (max-width:560px){
  .eq{ --eq-inset:0px; padding:0; align-items:flex-end; }
  .eq__panel{
    width:100%; max-height:92dvh;
    border-radius:3px 3px 0 0; border-bottom:0;
    transform:translateY(28px);
  }
  .eq__row{ grid-template-columns:1fr; }
  .eq__opts{ display:grid; grid-template-columns:1fr; }
  .eq__opt span{ display:block; text-align:center; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .eq__scrim,
  .eq__panel{ transition:none; }
  .eq__panel{ transform:none; }
}