/* ==========================================================================
   Styling for the /inquiry/ questionnaire.

   Like legal.css and locations.css, this page is plain static HTML outside the
   Next build, so it cannot rely on the compiled Tailwind bundle containing any
   given utility. Everything here is hand-written against the site's tokens:
   #000 ground, #ff3e3e brand, Geist via the bundle's --font-geist-sans.

   Every input is 16px or larger. Below that, iOS zooms the page the moment a
   field takes focus, which on a form this long throws the visitor's place away
   repeatedly.
   ========================================================================== */

.iq {
  padding: 0 0 5rem;
}

.iq__wrap {
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--page-pad, 1rem);
}

/* --- Hero ---------------------------------------------------------------
   The page opened on flat black with a headline on it, which made the one
   page asking a visitor to commit the plainest on the site. Same treatment as
   the subpage heroes: a photo of the room, dark enough to read over. */
.iq__hero {
  position: relative;
  overflow: hidden;
  padding: 8.5rem 0 4rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.iq__hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45;
}

/* Anchored left, where the copy sits, and fading out to the right so the
   photograph is still legible as one. */
.iq__hero-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    #000 0%,
    rgb(0 0 0 / 85%) 45%,
    rgb(0 0 0 / 35%) 100%
  );
}

.iq__hero-inner {
  position: relative;
}

/* --- Two columns --------------------------------------------------------
   The form is the page, so it keeps the width it had; the aside carries what
   a visitor wants to know before filling one in, which used to be a single
   line under the button where nobody would read it before deciding. */
.iq__cols {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 64rem) {
  .iq__cols {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.iq__eyebrow {
  color: #ff3e3e;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
}

.iq__title {
  /* Sized off the longest word so it never clips on a phone. */
  font-size: clamp(2.25rem, 8.4vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 1.5rem;
  text-wrap: balance;
}

.iq__title em {
  display: block;
  font-style: normal;
  color: #ff3e3e;
}

.iq__lede {
  max-width: 40rem;
  margin: 0;
  color: #9ca3af;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.6;
}

/* --- Form --------------------------------------------------------------- */
.iq__form {
  border: 1px solid rgb(255 255 255 / 10%);
  border-left: 4px solid #ff3e3e;
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.iq__grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  /* The grid had no bottom margin and the fieldset below it no top margin, so
     Position sat hard against the phone field while every other pair in the
     form had breathing room. */
  margin-bottom: 1.75rem;
}

@media (min-width: 40rem) {
  .iq__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.iq__field {
  margin: 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.iq__grid .iq__field {
  margin: 0;
}

.iq__field label,
.iq__set legend {
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9ca3af;
}

.iq__req {
  color: #ff3e3e;
}

.iq__opt {
  color: #6b7280;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.iq__field input,
.iq__field select,
.iq__field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 1rem;
  color: #fff;
  background: rgb(255 255 255 / 5%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.iq__field textarea {
  resize: vertical;
  min-height: 6rem;
}

.iq__field input::placeholder,
.iq__field textarea::placeholder {
  color: #6b7280;
}

.iq__field input:focus,
.iq__field select:focus,
.iq__field textarea:focus {
  outline: none;
  border-color: #ff3e3e;
  background: rgb(255 255 255 / 7%);
}

/* Errors are shown only after a submit attempt. Marking fields red while the
   visitor is still filling the first one in tells them they are wrong before
   they have had a chance to be right. */
.iq__form[data-validate] :is(input, select, textarea):invalid {
  border-color: #ff3e3e;
  background: rgb(255 62 62 / 8%);
}

/* --- Radio groups ------------------------------------------------------- */
.iq__set {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
}

.iq__set legend {
  padding: 0;
  margin-bottom: 0.75rem;
}

.iq__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* The pill is the span, not the label, and the checked state is read off the
   radio with a sibling selector rather than `:has()`. Both work on paper; only
   the sibling selector is reliably re-evaluated when the radio changes, and a
   selection that does not visibly select is worse than no styling at all. */
.iq__choice {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.iq__choice input {
  /* Kept in the accessibility tree and keyboard reachable, just not painted:
     the pill itself is the visible control. */
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* The whole pill is inside the label, so the touch target is the pill and not
   the 11px dot behind it. */
.iq__pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.125rem;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 999px;
  font-weight: 700;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.iq__choice:hover .iq__pill {
  border-color: rgb(255 255 255 / 30%);
}

.iq__choice input:checked + .iq__pill {
  background: #fff;
  border-color: #fff;
  color: #000;
}

.iq__choice input:focus-visible + .iq__pill {
  outline: 2px solid #ff3e3e;
  outline-offset: 2px;
}

/* --- Actions ------------------------------------------------------------ */
.iq__consent {
  color: #6b7280;
  font-size: 0.8125rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.iq__consent a {
  color: #9ca3af;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iq__consent a:hover {
  color: #fff;
}

.iq__submit {
  width: 100%;
  min-height: 44px;
  padding: 1.125rem 2.5rem;
  border: 0;
  border-radius: 999px;
  background: #ff3e3e;
  /* Black on #ff3e3e is 6.0:1 and passes AA; white on the same red is 3.49:1
     and does not. Same call as the CTA band and the /locations/ button. */
  color: #000;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.iq__submit:hover {
  background: #ff5a5a;
  transform: translateY(-2px);
}

.iq__note {
  margin: 1rem 0 0;
  min-height: 1.25rem;
  font-size: 0.875rem;
  color: #9ca3af;
}

.iq__note[data-state="error"] {
  color: #ff6b6b;
}

.iq__note[data-state="done"] {
  color: #fff;
}

/* --- Aside --------------------------------------------------------------- */
.iq__panel {
  padding: 1.5rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 1rem;
  margin-bottom: 1rem;
}

.iq__panel h2 {
  margin: 0 0 1.25rem;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff3e3e;
}

.iq__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

/* A rule down the left of the list, with each marker punched out of it, so the
   three read as one sequence rather than three notes. */
.iq__steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 1.25rem 2.25rem;
  border-left: 1px solid rgb(255 255 255 / 12%);
  margin-left: 0.6875rem;
  color: #9ca3af;
  font-size: 0.875rem;
  line-height: 1.6;
}

.iq__steps li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.iq__steps li::before {
  content: counter(step);
  position: absolute;
  left: -0.6875rem;
  top: 0;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 999px;
  background: #ff3e3e;
  color: #000;
  font-size: 0.6875rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iq__steps b {
  display: block;
  margin-bottom: 0.2rem;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.iq__reply {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / 8%);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b7280;
}

.iq__tel {
  display: inline-block;
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
}

.iq__tel:hover {
  color: #ff3e3e;
}

.iq__where {
  margin: 0.75rem 0 0;
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.6;
}

.iq__where a {
  color: #ff3e3e;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iq__where a:hover {
  color: #fff;
}

/* The same three figures the homepage opens with. Here they are the answer to
   "is this worth two minutes", which is the question being asked. */
.iq__proof {
  list-style: none;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid rgb(255 255 255 / 10%);
  border-left: 4px solid #ff3e3e;
  border-radius: 1rem;
  background: rgb(255 255 255 / 3%);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

@media (min-width: 64rem) {
  .iq__proof {
    grid-template-columns: 1fr;
    gap: 1.125rem;
    text-align: left;
  }
}

.iq__proof b {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
}

.iq__proof li {
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
}

@media (prefers-reduced-motion: reduce) {
  .iq__submit:hover {
    transform: none;
  }
}