/* Contact us — numbers from fig-spec of robwaterhause-contact-us (1:1643) and
 * contact-us-mobile (12:606). Container is 1200 (pad 120) like the docs. */

.ct-hero { position: relative; height: 521px; overflow: hidden; background: var(--color-bg); }
.ct-hero__glow { position: absolute; left: 320px; top: 30px; width: 800px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 24, 63, .071) 0%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.ct-hero__inner { position: relative; height: 100%; padding-top: 41px; }
.ct-hero__cols { display: flex; gap: 80px; height: 480px; align-items: center; }
.ct-hero__left { display: flex; flex-direction: column; gap: 36px; width: 680px; }
.ct-hero__headline { display: flex; flex-direction: column; gap: 12px; }
.ct-hero__title {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 96px; line-height: 86px; letter-spacing: -.04em; color: var(--color-text);
}
.ct-hero__title-accent { color: var(--color-brand); }
.ct-hero__lead { font-size: var(--fs-lead); line-height: 26px; color: var(--color-muted); }
.ct-hero__anchor {
  position: relative; align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-ui); line-height: 17px; text-transform: uppercase;
  color: var(--color-text); text-decoration: none; transition: color var(--dur-fast) var(--ease);
}
.ct-hero__anchor::after { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }
.ct-hero__anchor:hover { color: var(--color-brand); }

.ct-work { background: var(--color-bg-strip); }
.ct-work__inner { display: flex; flex-direction: column; gap: 56px; padding-block: 120px; }
.ct-work__header { display: flex; flex-direction: column; gap: 12px; }
.ct-work__title { font-family: var(--font-display); font-weight: 500; font-size: 48px; line-height: 59px; letter-spacing: -.03em; color: var(--color-text); }
.ct-work__lead { width: 640px; font-size: var(--fs-body); line-height: 23px; color: var(--color-muted); }

.ct-panel { display: grid; grid-template-columns: 400fr 800fr; overflow: hidden; background: rgba(18, 16, 18, .831); border-radius: var(--radius-2xl); box-shadow: inset 0 0 0 1px var(--color-border); }
.ct-side { display: flex; flex-direction: column; gap: 40px; padding: 40px; min-width: 0; box-shadow: inset -1px 0 0 var(--color-border); }
.ct-side__head { display: flex; flex-direction: column; gap: 4px; }
.ct-side__title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 24px; text-transform: uppercase; color: var(--color-text); }
.ct-side__list { display: flex; flex-direction: column; gap: 24px; }
.ct-side__item { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 24px; box-shadow: 0 1px 0 var(--color-border); font-size: var(--fs-label); line-height: 20px; color: var(--color-muted); }
.ct-side__item:last-child { padding-bottom: 0; box-shadow: none; }
.ct-side__num { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 22px; color: var(--color-brand); }
.ct-side__direct { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ct-side__direct-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-caption); line-height: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.ct-side__mail {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-ui); line-height: 20px;
  color: var(--color-text); text-decoration: none; word-break: break-all; transition: color var(--dur-fast) var(--ease);
}
.ct-side__mail .icon { width: 16px; height: 16px; flex: none; color: var(--color-brand); }
.ct-side__mail::before { content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%; height: 100%; min-height: 24px; }   /* тап-зона 24px */
.ct-side__mail:hover { color: var(--color-brand); }
.ct-side__direct-note { font-size: var(--fs-caption); line-height: 18px; color: var(--color-muted); }
.ct-side__direct-note a { color: var(--color-text); text-decoration: none; }

.ct-form { padding: 40px; }
.ct-form__body { display: flex; flex-direction: column; gap: 32px; }
.ct-form__stack { display: flex; flex-direction: column; gap: 24px; }
.ct-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field__label--brand { color: var(--color-brand); letter-spacing: normal; }
.field__input--sm { height: 54px; border-radius: var(--radius-md); background: var(--color-bg); }
textarea.field__input--area { height: 150px; min-height: 150px;   /* textarea.field__input в components.css выигрывает по специфичности — задаём с тегом */
   padding: 16px; border-radius: var(--radius-md); background: var(--color-bg); resize: vertical; }
.ct-form__consent { align-items: center; color: var(--color-muted); }
.ct-form__consent .field__label { line-height: 20px; }   /* 1:1704 — ряд согласия 20px */
.ct-form__submit { align-self: flex-start; min-width: 200px; }
.ct-form__done { display: flex; flex-direction: column; gap: 16px; }
.ct-form__done-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h5); line-height: 29px; text-transform: uppercase; color: var(--color-text); }
.ct-form__done-text { font-size: var(--fs-ui); line-height: 22px; color: var(--color-muted); }
.ct-form__done-text a { color: var(--color-text); text-decoration: none; }
.ct-form__done-text a:hover { color: var(--color-brand); }

@media (max-width: 1199px) {
  .ct-hero { height: auto; }
  .ct-hero__glow { left: 35px; top: 20px; width: 320px; height: 320px; }
  .ct-hero__inner { padding-block: 48px; }
  .ct-hero__cols { height: auto; gap: 20px; }
  .ct-hero__left { width: auto; gap: 20px; }
  .ct-hero__title { gap: 0; font-size: 54px; line-height: 51px; }   /* 12:630 */
  .ct-hero__lead { font-size: var(--fs-body); line-height: 24px; }

  .ct-work__inner { gap: 24px; padding-block: 40px 48px; }
  .ct-work__header { gap: 8px; }
  .ct-work__title { font-size: 32px; line-height: 39px; }
  .ct-work__lead { width: auto; font-size: var(--fs-ui); line-height: 21px; }
  .ct-panel { grid-template-columns: 1fr; border-radius: var(--radius-xl); }
  .ct-side { gap: 24px; padding: 20px; box-shadow: inset 0 -1px 0 var(--color-border); }
  .ct-side__title { font-size: 18px; line-height: 22px; }
  .ct-side__head { gap: 4px; }
  .ct-side__list { gap: 16px; }
  .ct-side__num { font-size: var(--fs-lead); line-height: 20px; }
  .ct-side__item { gap: 12px; line-height: 20px; }
  .ct-side__item { padding-bottom: 16px; }   /* 12:648 — ряд 20 + разделитель + gap 16 */
  .ct-form { padding: 20px; }
  .ct-form__body { gap: 24px; }
  .ct-form__row { grid-template-columns: 1fr; gap: 16px; }
  .ct-form__stack { gap: 16px; }
  .ct-form__submit { align-self: stretch; }
}