/* ============================================================================
   Enquiry page — visual mockup only, no backend wired up.

   This replaced a book-a-slot page that drove a calendar: pick a day, pick a
   two-hour window, request it. That was dropped on 13 Aug 2026 — a one-man
   bathroom firm cannot hold a diary open to the public, and a slot that has to
   be confirmed by phone afterwards is a form wearing a calendar's clothes.
   The calendar, day and slot styles went with it; what is left is chips,
   fields and the aside.
   ========================================================================== */

.ehero{ background:var(--ink); padding:calc(var(--hdr-h) + clamp(52px,7vw,104px)) 0 clamp(38px,5vw,64px); }
/* the van face, matching the home page hero — sized down from the Archivo
   setting for the same reason: far more ink per em */
.ehero__h1{
  font-family:var(--van); font-style:italic; font-weight:400;
  font-variation-settings:normal;
  font-size:clamp(34px,5.4vw,80px);
  text-transform:uppercase; letter-spacing:.005em; line-height:1.02;
}
.ehero__lead{ margin-top:26px; max-width:34em; font-size:clamp(16px,1.25vw,19px); color:var(--on-dark-mute); }

.eq{ background:var(--bone); color:var(--on-bone); padding:clamp(46px,6vw,86px) 0 var(--pv); }
.eq__grid{ display:grid; grid-template-columns:1.55fr .9fr; gap:clamp(30px,4.5vw,72px); align-items:start; }

.fs{ border:0; margin:0 0 clamp(34px,4vw,52px); padding:0; }
.fs .lbl{ color:var(--on-bone-mute); padding:0; }
.fs--last{ margin-bottom:clamp(26px,3vw,36px); }

/* ── service chips ───────────────────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; width:0; height:0; }
.chip span{
  display:block; padding:13px 22px; border-radius:60px;
  border:1px solid rgba(16,18,21,.22); font-size:15px; font-weight:600;
  cursor:pointer; user-select:none;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.chip span:hover{ border-color:rgba(16,18,21,.5); }
.chip input:checked + span{ background:var(--ink); border-color:var(--ink); color:var(--bone); }
.chip input:focus-visible + span{ outline:2px solid var(--copper); outline-offset:3px; }

/* ── fields ──────────────────────────────────────────────────────────────── */
.fields{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.fld{ display:grid; gap:8px; }
.fld--wide{ grid-column:1 / -1; }
.fld span{ font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--on-bone-mute); }
.fld span em{ font-style:normal; font-weight:400; opacity:.75; }
.fld input,.fld textarea{
  font:inherit; font-size:16px; color:var(--on-bone);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(16,18,21,.2); border-radius:10px;
  padding:14px 16px; width:100%; resize:vertical;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.fld input::placeholder,.fld textarea::placeholder{ color:rgba(16,18,21,.36); }
.fld input:focus,.fld textarea:focus{ outline:none; border-color:var(--copper); background:#fff; }

.eq__submit{ width:100%; margin-top:6px; }
.eq__small{ margin-top:16px; font-size:14px; color:var(--on-bone-mute); text-align:center; max-width:44em; margin-inline:auto; }

/* ── aside ───────────────────────────────────────────────────────────────── */
.eq__aside{ display:grid; gap:20px; position:sticky; top:calc(var(--hdr-h) + 16px); }
.panel{ background:var(--ink); color:var(--on-dark); border-radius:14px; padding:clamp(22px,2.4vw,30px); }
.panel .lbl{ color:var(--copper-l); }
.panel__tel{ display:block; font-family:var(--display); font-size:clamp(28px,3vw,40px); font-weight:700; line-height:1; }
.panel__tel:hover{ color:var(--copper-l); }
.panel__p{ margin-top:16px; font-size:15px; color:var(--on-dark-mute); }
.panel__p strong{ color:var(--on-dark); }
/* portrait shot in a landscape frame, so it is 3/4 here rather than 4/3 */
.panel--img{ padding:0; overflow:hidden; aspect-ratio:3/4; }
.panel--img img{ width:100%; height:100%; object-fit:cover; object-position:58% 62%; }

.ticks{ display:grid; gap:12px; }
.ticks li{ position:relative; padding-left:30px; font-size:15px; color:var(--on-bone-mute); }
.ticks li::before{
  content:""; position:absolute; left:4px; top:.55em;
  width:9px; height:9px; border-radius:50%;
  background:linear-gradient(120deg,var(--copper-l),var(--copper));
}

@media (max-width:1000px){
  .eq__grid{ grid-template-columns:1fr; }
  .eq__aside{ position:static; }
  .panel--img{ aspect-ratio:16/10; }
}
@media (max-width:700px){
  .fields{ grid-template-columns:1fr; }
}

/* ── form submit states ────────────────────────────────────────────────── */
.eq__submit--ok{background:var(--ink);pointer-events:none;}
.eq__submit--err{background:#b91c1c;animation:shake .4s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.eq__small a{color:var(--copper-l);text-decoration:underline;text-underline-offset:3px;}