/* ==========================================================================
   PULSE — MAKE IT YOUR NIGHT, and the enquiry form.

   Not four service cards. Four words arranged around one frequency line — two
   above it, two below — so the categories read as points on the same system the
   rest of the page is built from. Selecting one changes the copy, the crop and
   the category the enquiry arrives on.

   On a phone the line stays but the words become a large vertical selector,
   which is what the brief asks for and what a thumb can actually hit.
   ========================================================================== */
.private { padding-block: var(--stack); }
.private .lead { margin-bottom: clamp(2.4rem, 6vw, 4rem); }

/* --- the frequency line and the four words ---------------------------------- */
.freqline {
  position: relative;
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
}
.freqline__row {
  display: flex;
  justify-content: space-around;
  gap: clamp(0.6rem, 3vw, 3rem);
}
.beat--line { height: clamp(60px, 12vh, 120px); }

.cat {
  min-height: 48px;
  padding: 0.8rem 0.6rem;
  font-family: var(--display);
  font-size: clamp(0.95rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 40%, transparent);
  cursor: pointer;
  transition: color var(--cut), -webkit-text-stroke-color var(--cut);
}
.cat:hover { -webkit-text-stroke-color: var(--ink); }

/* selected is never colour alone: the word fills in AND grows a mark on the
   line side, so the state survives without colour perception */
.cat.is-live {
  color: var(--ink);
  -webkit-text-stroke-color: transparent;
}
.cat::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  margin: 0.6rem auto 0;
  background: var(--glow);
  transform: scale(0);
  transition: transform var(--snap);
}
.freqline__row--top .cat::after { margin: 0.6rem auto 0; }
.freqline__row--bot .cat { display: flex; flex-direction: column-reverse; align-items: center; }
.freqline__row--bot .cat::after { margin: 0 auto 0.6rem; }
.cat.is-live::after { transform: scale(1); }

/* --- the detail ------------------------------------------------------------- */
.private__detail {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.4rem, 6vw, 4rem);
}
.private__label { margin-bottom: 0.8rem; color: var(--ink); }
.private__fig img { transition: object-position 620ms cubic-bezier(0.22, 1, 0.32, 1); }

@media (max-width: 899px) {
  /* the vertical selector: the line stays, the words stack beside it */
  .freqline { display: grid; gap: 0.4rem; }
  .freqline__row { flex-direction: column; }
  .freqline__row--top { order: 1; }
  .beat--line { order: 2; height: 54px; }
  .freqline__row--bot { order: 3; }
  .cat {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
    font-size: clamp(1.1rem, 5.5vw, 1.7rem);
  }
  .cat::after { margin: 0 !important; }
  .private__detail { grid-template-columns: 1fr; }
  .private__fig { width: min(100%, 340px); }
}

/* ========================================================== the enquiry ==== */
.enquiry { padding-block: var(--stack); }

.form__legend { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.8rem);
  max-width: 860px;
}
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field--wide { grid-column: 1 / -1; }

.field__label {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  color: var(--ink-dim);
}
.field__opt {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--ink-faint);
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1rem;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--rule);
  border-radius: 0;
  transition: border-color var(--cut), background-color var(--cut);
}
.field__input:hover { border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.field__input:focus-visible { border-color: var(--glow); }
textarea.field__input { min-height: 120px; resize: vertical; }

/* invalid is marked by an outline AND the message in .form__errors — never by
   a red border on its own */
.field__input[aria-invalid="true"] { border-color: var(--coral); }

.form__errors {
  margin-top: 1.2rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid var(--coral);
  background: color-mix(in srgb, var(--coral) 10%, transparent);
  font-size: 0.95rem;
}

.form__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
  margin-top: clamp(1.6rem, 4vw, 2.4rem);
}

@media (max-width: 719px) {
  .form__grid { grid-template-columns: 1fr; }
}