/* ============================================================
   SPECTRUM — the service pages.
   Same grid, same type, no machines. They exist to be read and
   to take money, so nothing on them moves.
   ============================================================ */
.page { min-height: 100vh; padding: calc(70 * var(--s)) calc(var(--grid-margin) * var(--s)) calc(90 * var(--s)); }
.page__bar {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: calc(14 * var(--s));
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-nar); font-size: calc(12.5 * var(--s));
  letter-spacing: .1em; text-transform: uppercase;
}
.page__bar a { color: var(--live); }
.page__grid {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: calc(20 * var(--s)); margin-top: calc(70 * var(--s));
}
.page__title {
  grid-column: 1 / span 12;
  font-size: calc(104 * var(--s)); font-weight: 900;
  font-variation-settings: "wdth" 122, "wght" 900;
  line-height: .86; letter-spacing: -.055em;
  margin-bottom: calc(40 * var(--s));
}
.page__side { grid-column: 1 / span 4; font-family: var(--font-nar); font-size: calc(13 * var(--s)); color: var(--muted); line-height: 1.7; }
.page__body { grid-column: 6 / span 7; font-size: calc(17 * var(--s)); line-height: 1.6; }
.page__body h2 { font-size: calc(26 * var(--s)); font-weight: 700; letter-spacing: -.025em; margin: calc(40 * var(--s)) 0 calc(12 * var(--s)); }
.page__body p { margin-bottom: calc(16 * var(--s)); color: #c8c8d2; }
.page__body ul { margin: 0 0 calc(16 * var(--s)) calc(20 * var(--s)); color: #c8c8d2; list-style: disc; }
.page__body li { margin-bottom: calc(8 * var(--s)); }

.form { grid-column: 6 / span 7; }
.form__row { display: grid; grid-template-columns: calc(150 * var(--s)) 1fr; gap: calc(16 * var(--s)); align-items: center; padding: calc(14 * var(--s)) 0; border-top: 1px solid var(--hair); }
.form__row label { font-family: var(--font-nar); font-size: calc(13 * var(--s)); color: var(--muted); }
.form__row input, .form__row select {
  width: 100%; padding: calc(11 * var(--s)) calc(12 * var(--s));
  background: #14141b; border: 1px solid #2e2e39; color: var(--ink);
  font-family: var(--font); font-size: calc(15 * var(--s));
}
.form__row input:focus, .form__row select:focus { outline: 0; border-color: var(--live); }
.form__total { display: flex; justify-content: space-between; align-items: baseline; margin: calc(30 * var(--s)) 0 calc(20 * var(--s)); }
.form__total b { font-size: calc(64 * var(--s)); font-weight: 800; letter-spacing: -.04em; }
.form__note { font-family: var(--font-nar); font-size: calc(12.5 * var(--s)); color: var(--muted); margin-top: calc(16 * var(--s)); line-height: 1.6; }

@media (max-width: 900px) {
  .page__title { font-size: calc(46 * var(--s)); }
  .page__side, .page__body, .form { grid-column: 1 / span 12; }
  .page__body { font-size: calc(15 * var(--s)); }
  .form__row { grid-template-columns: 1fr; gap: calc(6 * var(--s)); }
}
