/* ==========================================================================
   contact.html · page CSS (adapted from the Aarla quote page)
   Loads after styles.css. Every rule is scoped to main.page-contact and uses
   the system tokens only (no raw colour values, no important overrides).
   ========================================================================== */

/* ---------- Hero ---------- */
.page-contact .hero__title { max-width: none; }

/* Business details: a facts table with a visible caption */
.page-contact .ct-facts caption {
  text-align: left; padding-bottom: 10px;
  font-size: var(--fs-caption); font-weight: 600; color: var(--fg-2);
}
.page-contact .ct-facts td { color: var(--fg); }
.page-contact .ct-facts td a { white-space: nowrap; }
@media (min-width: 921px) {
  .page-contact .ct-facts th { width: 8em; }
}

/* ---------- Form section head with the quote / demo switch ---------- */
.page-contact .ct-head { display: block; }
.page-contact .ct-switch { margin-top: var(--space-4); font-size: var(--fs-small); line-height: 1.55; color: var(--fg-2); }
.page-contact .ct-switch a { color: var(--fg); font-weight: 500; }

/* ---------- Form and side column ---------- */
.page-contact .rq-layout { --a: 1 / span 7; --b: 9 / span 4; --split-gap: var(--space-8); }
@media (min-width: 921px) and (max-width: 1180px) {
  .page-contact .rq-layout { --a: 1 / span 8; --b: 9 / span 4; }
}

.page-contact .rq-form { gap: var(--space-7); }

/* A form step: hairline rule, bold grotesk heading, then its fields */
.page-contact .rq-step { padding-top: var(--space-6); border-top: 1px solid var(--line-3); }
.page-contact .rq-step--first { padding-top: 0; border-top: 0; }
.page-contact .rq-step > .fieldset { gap: var(--space-6); }
.page-contact .rq-step__legend {
  display: block; margin-bottom: var(--space-5);
  font-family: var(--font-display); font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem); font-weight: 700;
  line-height: 1.15; letter-spacing: -0.024em; color: var(--fg);
}
.page-contact .rq-step__hint {
  display: block; margin-top: 4px;
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--fg-2);
}
.page-contact .rq-step > .field { gap: 0; }
.page-contact .rq-step > .field > .rq-step__legend { margin-bottom: 0; }
.page-contact .rq-step > .field > .textarea { margin-top: var(--space-5); }

/* Nested groups inside a step read as sub-heads */
.page-contact .rq-step .fieldset .fieldset > legend { margin-bottom: var(--space-2); }
.page-contact .choice small { margin-top: 1px; }

/* Product options: shown only while that product is ticked (site.js data-show-when) */
.page-contact .rq-guru {
  display: grid; gap: var(--space-5);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  border-left: 2px solid var(--mark);
}
.page-contact .rq-guru[hidden] { display: none; }
.page-contact .rq-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Plan and billing names in the display grotesk, as plan names are elsewhere */
.page-contact .rq-guru .radio-card__title {
  font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.012em; line-height: 1.3;
}
.page-contact .rq-price { margin-top: 6px; color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.page-contact .rq-guru__more { font-size: var(--fs-small); }
.page-contact .ct-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .page-contact .rq-plans { grid-template-columns: minmax(0, 1fr); }
  .page-contact .ct-work { grid-template-columns: minmax(0, 1fr); }
  .page-contact .rq-guru { padding-left: var(--space-4); }
}

.page-contact .form__foot { padding-top: var(--space-2); }
@media (max-width: 520px) {
  .page-contact .form__foot .btn { flex: 1 1 100%; }
}

/* Success panel */
.page-contact .rq-success .links { margin-top: var(--space-5); }
.page-contact .rq-success .arrow-link { color: var(--fg); }
.page-contact .rq-success a { white-space: nowrap; }

/* Side column: what happens next, direct contact, buy / pay note */
.page-contact .rq-aside > * + * { margin-top: var(--space-7); }
@media (min-width: 921px) {
  .page-contact .rq-aside { position: sticky; top: calc(var(--bar-h) + var(--space-6)); align-self: start; }
}
.page-contact .rq-aside__h {
  padding-bottom: 10px; border-bottom: 1px solid var(--line-2);
  font-family: var(--font-sans); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; letter-spacing: 0;
}
.page-contact .rq-next { border-top: 0; }
.page-contact .rq-next > li[hidden] { display: none; }
.page-contact .rq-contact { font-style: normal; }
.page-contact .rq-contact .contact-lines { margin-top: var(--space-2); }
.page-contact .rq-contact .contact-lines span { color: var(--fg); }

/* Closing band: the invoice line and contact lines in the side column */
.page-contact .cta-band__h + .cta-band__body { margin-top: var(--space-4); }
.page-contact .cta-band .contact-lines { margin-top: var(--space-5); }