/* ============================================================
   Enquiry form — the one component the site did not have.
   Lives on the booking page, the contact page and the foot of
   every service page, so it inherits the site's tokens rather
   than carrying a look of its own.
   ============================================================ */

.lead{display:grid;gap:16px;max-width:560px}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead label{display:grid;gap:7px;min-width:0}
.lead label>span,.lead legend{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute)}
.lead input,.lead textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;width:100%;
  transition:border-color .25s var(--ease)}
.lead textarea{min-height:104px;resize:vertical}
.lead input::placeholder,.lead textarea::placeholder{color:rgba(255,255,255,.3)}
.lead input:focus,.lead textarea:focus{outline:none;border-color:var(--gold)}
.lead input[aria-invalid],.lead textarea[aria-invalid]{border-color:#C9584F}
.lead fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.lead-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13.5px;background:transparent;border:1px solid var(--line);
  color:var(--ink-soft);border-radius:999px;padding:11px 18px;cursor:pointer;
  transition:border-color .25s var(--ease),color .25s var(--ease),background .25s var(--ease)}
.chip:hover{border-color:rgba(201,166,107,.5);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink-dark)}
.lead-err{color:#E38079;font-size:13.5px;margin:0}
.lead-note{font-size:11.5px;letter-spacing:.04em;color:var(--ink-mute);margin:0}
.lead .btn{justify-content:center}
.lead [hidden]{display:none!important}

/* what replaces the form once it is sent */
.lead-done{display:grid;gap:14px;max-width:560px;border:1px solid rgba(201,166,107,.4);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);background:rgba(201,166,107,.06)}
.lead-done h3{font-size:clamp(22px,2.4vw,30px);font-weight:300;letter-spacing:-.02em}
.lead-done p{color:var(--ink-soft);font-size:15px;margin:0}
.lead-done .ref{font-family:ui-monospace,Menlo,monospace;color:var(--gold);letter-spacing:.06em}
.lead-done .lead-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* on the cream sections the same form has to stay legible */
.cream .lead input,.cream .lead textarea{background:#fff;color:var(--ink-dark);
  border-color:var(--line-dark)}
.cream .lead input::placeholder,.cream .lead textarea::placeholder{color:rgba(0,0,0,.34)}
.cream .lead label>span,.cream .lead legend,.cream .lead-note{color:var(--ink-dark-soft)}
.cream .chip{border-color:var(--line-dark);color:var(--ink-dark-soft)}
.cream .chip[aria-pressed="true"]{color:#fff;background:var(--ink-dark);border-color:var(--ink-dark)}

@media(max-width:700px){
  .lead-grid{grid-template-columns:1fr}
}

/* ---------- questions a customer actually asks ---------- */
.faq{display:grid;gap:0;max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:clamp(16px,1.8vw,19px);font-weight:400;color:var(--ink);
  transition:color .25s var(--ease)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq-a{padding:0 44px 24px 0;color:var(--ink-soft);font-size:15.5px;line-height:1.65;
  max-width:68ch}
.faq .faq-a p+p{margin-top:12px}
.cream .faq,.cream .faq details{border-color:var(--line-dark)}
.cream .faq summary{color:var(--ink-dark)}
.cream .faq .faq-a{color:var(--ink-dark-soft)}

/* ---------- what it costs, worked out on the page ---------- */
.calc{display:grid;gap:18px;max-width:560px}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.calc-out div{background:var(--bg);padding:20px 22px}
.calc-out b{display:block;font-size:clamp(24px,3vw,34px);font-weight:300;letter-spacing:-.02em;
  color:var(--ink)}
.calc-out span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.calc input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;
  background:var(--line);border:0;padding:0;border-radius:2px}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;
  border-radius:50%;background:var(--gold);cursor:pointer;border:3px solid var(--bg)}
.calc input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--gold);cursor:pointer;border:3px solid var(--bg)}
.cream .calc-out{background:var(--line-dark);border-color:var(--line-dark)}
.cream .calc-out div{background:var(--bg-cream)}
.cream .calc-out b{color:var(--ink-dark)}
.cream .calc-out span{color:var(--ink-dark-soft)}