/* Brixwood Builders — Enquire (guided five-step enquiry, nothing transmitted) */

.enq {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  font-family: var(--font-body);
  font-weight: 450;
  color: var(--ink);
}

/* fixed dot field */
.enq-dots {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--dot) var(--dot-size), transparent var(--dot-size));
  background-size: 26px 26px;
  background-position: 0 0;
  opacity: var(--dot-opacity);
  -webkit-mask-image: radial-gradient(ellipse 78% 66% at 50% 44%, #000 42%, transparent 88%);
  mask-image: radial-gradient(ellipse 78% 66% at 50% 44%, #000 42%, transparent 88%);
}

/* fixed top progress rail */
.enq-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: var(--hair);
  /* above the top bar's own 21 (set in this file's phone block): the bar is
     sticky at top: 0 and gains a solid strip once the page scrolls, which would
     otherwise paint straight over this line */
  z-index: 22;
}
.enq-rail__fill {
  height: 100%;
  width: 0%;
  background: var(--ink-3);
  transition: width 520ms var(--ease-out);
}

/* header: non-interactive logo + nav row */
.enq-top {
  /* sticky, not fixed: it stays in the flow, so pinning the bar leaves no hole
     under it to patch. `is-scrolled` (nav-stick.js) paints the strip. */
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
}
/* a link home, like the hero wordmark — but without the hero's hover-to-accent
   or entrance animation (those stay hero-only). The two-class specificity holds
   the colour at --ink through the global a:hover, so there is no hover shift. */
.enq-top .brand-logo-link {
  color: var(--ink);
}

/* main column */
.enq-main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  align-items: center;
  padding: 64px var(--page-pad-x-fluid) 96px;
}
.enq-col {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.enq-stage {
  transition:
    opacity 320ms ease,
    transform 320ms var(--ease-out),
    filter 320ms ease;
  will-change: opacity, transform, filter;
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.enq-stage.is-leaving { opacity: 0; transform: translateY(-14px); filter: blur(7px); }
.enq-stage.is-entering { opacity: 0; transform: translateY(16px); filter: blur(7px); }

/* question block */
.enq-q { display: flex; flex-direction: column; gap: 14px; }
.enq-counter {
  font-weight: 450;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.enq-q h2 {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-heading);
  font-size: clamp(26px, 5.4vw, 32px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: pretty;
}
.enq-hint {
  margin: 0;
  max-width: 470px;
  font-weight: 450;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* multi-select tray + pool */
.enq-tags { margin-top: 34px; display: flex; flex-direction: column; gap: 16px; }
.enq-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  box-sizing: border-box;
  padding: 8px;
  background: var(--fill);
  border: 2px solid var(--fill-edge);
  border-radius: var(--radius);
  box-shadow: var(--lift-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.enq-tray::-webkit-scrollbar { display: none; }
.enq-tray__empty {
  padding-left: 8px;
  font-weight: 450;
  font-size: 13px;
  color: var(--ink-2);
}
.enq-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 100%;
  min-height: 44px;
  padding: 0 6px 0 15px;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
}
.enq-chip span { font-size: 14px; }
.enq-chip button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--accent-ink);
  opacity: 0.72;
  cursor: pointer;
}
.enq-chip button:hover { opacity: 1; }

.enq-pool { display: flex; flex-wrap: wrap; gap: 8px; }
.enq-pool button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--fill-edge);
  border-radius: var(--radius);
  background: var(--fill);
  box-shadow: var(--lift);
  font-family: inherit;
  font-weight: 450;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms ease;
}
.enq-pool button:hover { border-color: var(--accent-hover); }

/* single-choice options */
.enq-options { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 8px; }
.enq-opt {
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-weight: 450;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: var(--lift);
  background: var(--fill);
  border: 1px solid var(--fill-edge);
  color: var(--ink);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.enq-opt:hover { border-color: var(--accent-hover); }
.enq-opt.is-on {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--accent-ink);
}
.enq-opt.is-on:hover { border-color: var(--accent); }

/* contact form */
.enq-form { margin-top: 32px; max-width: 560px; display: flex; flex-direction: column; gap: 24px; }
.enq-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 450;
  font-size: 13.5px;
  color: var(--ink);
}
.enq-form input,
.enq-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--fill-edge);
  border-radius: var(--radius);
  background: var(--fill);
  box-shadow: var(--lift);
  outline: none;
  font-family: var(--font-body);
  font-weight: 450;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.enq-form textarea { resize: vertical; line-height: 1.55; }
.enq-form input:focus,
.enq-form textarea:focus { border-color: var(--accent-hover); }
.enq-form input::placeholder,
.enq-form textarea::placeholder { color: var(--ink-2); opacity: 1; }
.enq-form__row { display: flex; flex-wrap: wrap; gap: 16px; }
.enq-form__row > div { flex: 1 1 210px; min-width: 0; }
.enq-fieldnote {
  margin: 9px 0 0;
  font-weight: 450;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.enq-turnstile { min-height: 65px; } /* reserves space before the widget paints */

/* Shown only when a send fails; the answers above it stay put. Full --ink
   rather than the --ink-2 of a fieldnote, because this one has to be read.
   No new colour: the palette has no error tone and inventing one is not ours
   to do, so the weight of the statement carries it. */
.enq-error {
  margin: 4px 0 0;
  font-weight: 450;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

/* Tappable on a phone. Padding grows the hit area to 44px without moving
   anything; the negative margin gives the space back to the line. */
.enq-error__tel {
  display: inline-block;
  padding: 11px 6px;
  margin: -11px -6px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* actions */
.enq-actions {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.enq-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 450;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}
.enq-back:hover { color: var(--ink); }
.enq-next {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radius);
  border: 0;
  font-family: inherit;
  font-weight: 450;
  font-size: 15px;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: default;
  transition: transform 130ms var(--ease);
}
.enq-next.is-ready { cursor: pointer; }
.enq-next.is-ready:active { transform: scale(0.965); }

/* sent screen */
.enq-sent { display: flex; flex-direction: column; gap: 16px; }
.enq-sent__label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.enq-sent h2 {
  margin: 0;
  max-width: 620px;
  font-family: var(--font-heading);
  font-size: clamp(26px, 5.4vw, 32px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.enq-sent p {
  margin: 0;
  max-width: 460px;
  font-weight: 450;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
.enq-recap {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hair);
}
.enq-recap__row {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--hair);
}
.enq-recap__label {
  flex: 0 0 132px;
  font-weight: 450;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.enq-recap__value {
  flex: 1 1 auto;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.enq-restart {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-weight: 450;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
}
.enq-restart:hover { color: var(--ink); }
.enq-sent__nudge { margin-top: 22px !important; }
/* Same treatment as the "talk it through" number above: Montserrat 450, the
   supporting --ink-2 stepping to full --ink on hover. nowrap so the number
   never breaks across two lines away from the word it sits beside. */
.enq-sent__phone {
  font-family: var(--font-body);
  font-weight: 450;
  color: var(--ink-2);
  white-space: nowrap;
}
.enq-sent__phone:hover { color: var(--ink); }

/* talk-it-through row */
.enq-talk {
  position: relative;
  z-index: 1;
  padding: 0 var(--page-pad-x-fluid) 30px;
}
.enq-talk__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 450;
  font-size: 13px;
  color: var(--ink-2);
}
.enq-talk__inner a {
  font-family: var(--font-body);
  font-weight: 450;
  font-size: 14px;
  color: var(--ink-2);
}
.enq-talk__inner a:hover { color: var(--ink); }

/* --------------------------------------------------------------- phone (720) */
/* The guided-enquiry layout is already fluid — a single 720px column of wrapping
   chips — so a phone only needs breathing room and honest tap targets. */
@media (max-width: 720px) {
  /* same cascade trap as home.css: `.enq-top`'s base justify-content is in this
     file, which loads after main.css, so the override has to be here too.
     z-index 21 lifts the row (and the menu panel nested in it) above the fixed
     progress rail at z-index 20; desktop keeps .enq-top at its base z-index 5. */
  .enq-top {
    justify-content: center;
    align-items: center;
    z-index: 21;
  }

  /* the desktop column reserves 96px under the actions for the "talk it
     through" line; a phone needs that height for the questions themselves */
  .enq-main { padding: 40px var(--page-pad-x-fluid) 56px; }

  /* the phone number is the one control on this page under the 44px minimum */
  .enq-talk { padding-bottom: 22px; }
  .enq-talk__inner { align-items: center; }
  .enq-talk__inner a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
  }
  /* the sent screen's number is the other control on this page under the
     44px minimum — same fix as the row above */
  .enq-sent__phone {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 2px;
  }
}