/* ==========================================================================
   Contact — comp 1010 desktop / 1774 mobile
   Mobile stacks head → form → copy → badge; desktop puts copy and badge in a
   left column with the form beside it, and uses different intro copy.
   ========================================================================== */

.ct-main {
  background: var(--dark);
  color: var(--gray-200);
  padding: 100px var(--pad) 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ct-left { display: contents; }        /* mobile: head, form and copy stack */
.ct-head { display: flex; flex-direction: column; gap: 20px; order: 1; }
.ct-main h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 36px;
  line-height: 40.32px;
  color: var(--gray-200);
  margin: 0;
}
.ct-sub { font-family: var(--font-serif); font-size: 24px; line-height: 29.76px; color: var(--gray-200); }

/* ---- form ---- */
.ct-form { order: 2; display: flex; flex-direction: column; gap: 24px; }
.ct-row { display: contents; }                 /* mobile: fields stack singly */
.ct-row .ct-field { order: 1; }
.ct-email { order: 2; }
.ct-row .ct-phone { order: 3; }   /* must outrank .ct-row .ct-field above */
.ct-form > .ct-field:not(.ct-email) { order: 4; }
.ct-consent { order: 5; }
.ct-submit { order: 6; }
.ct-field { display: flex; flex-direction: column; gap: 8px; }
.ct-field > span { font-size: 18px; line-height: 27px; color: var(--gray-200); }   /* review: 18px floor at mobile */
.ct-req { display: none; font-style: normal; }
.ct-field input,
.ct-field select,
.ct-field textarea {
  background: rgba(255 255 255 / .1);
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  padding: 12px;
  min-height: 48px;
  width: 100%;
}
.ct-field textarea { min-height: 180px; resize: vertical; }
.ct-field select {
  appearance: none;
  color: rgba(255 255 255 / .7);
  background-image: url(../assets/icons/misc/select-arrow.svg);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
  padding-right: 44px;
}
.ct-field textarea::placeholder { color: rgba(255 255 255 / .7); }
.ct-field input:focus-visible,
.ct-field select:focus-visible,
.ct-field textarea:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.ct-consent { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 16px; }
.ct-consent input {
  appearance: none; width: 18px; height: 18px; flex: none; margin-top: 2px;
  background: rgba(255 255 255 / .1); border: 1px solid #fff; border-radius: 2px; cursor: pointer;
}
.ct-consent input:checked { background: var(--red); }
.ct-consent span { font-size: 12px; line-height: 16.8px; color: #e2e2e2; }
.ct-consent a { color: inherit; text-decoration: underline; font-weight: 700; }
.ct-submit { align-self: flex-start; padding: 12px 24px; min-height: 43px; }

/* ---- intro copy + badge ---- */
.ct-aside { order: 3; display: flex; flex-direction: column; gap: 20px;
  border-top: 1px solid rgba(255 255 255 / .2); padding-top: 32px; }
.ct-body { display: flex; flex-direction: column; gap: 8px; }
.ct-body p { font-size: 16px; line-height: 24px; color: var(--gray-200); }
.ct-body strong { font-weight: 700; }
.ct-body-desktop { display: none; }            /* the comp swaps copy per breakpoint */

/* same box model as the badge on the attorney page */
.ct-badge {
  margin: 0; align-self: flex-start; background: #fff;
  width: 334px; min-height: 82px; box-sizing: border-box;
  display: grid; grid-template-columns: 34px 1fr; align-items: center;
  column-gap: 24px; padding: 12px 16px;
  border: 1px solid var(--line);
}
.ct-badge .ct-google { grid-row: 1 / 3; align-self: center; width: 34px; height: 32px; }
.ct-badge .ct-stars { grid-column: 2; align-self: end; width: 116px; height: 19px; display: block; }
.ct-badge .badge-text {
  grid-column: 2; padding: 0; background: none;
  font-family: var(--font-serif); font-size: 19.36px; line-height: 27.45px; color: var(--dark);
}

/* ==========================================================================
   Desktop comp — copy left, form right
   ========================================================================== */
@media (min-width: 1440px) {
  .ct-main {
    padding: 150px 48px 87px;
    display: grid;
    grid-template-columns: 600px 600px;
    justify-content: center;
    column-gap: 80px;
    row-gap: 0;
    align-content: start;
  }
  .ct-left { display: flex; flex-direction: column; gap: 24px; grid-column: 1; padding-top: 24px; }
  .ct-head { gap: 24px; }
  .ct-main h1 { font-size: 56px; line-height: 60.48px; }
  .ct-sub { font-size: 32px; line-height: 38.4px; }

  .ct-aside { gap: 24px; margin-top: 0; border-top: 0; padding-top: 0; }
  .ct-body-desktop { display: flex; gap: 18px; }
  .ct-body p.ct-close { font-size: 16px; line-height: 24px; }   /* comp sets it a step down */
  .ct-body a { font-size: 16px; line-height: 24px; }   /* comp sets the link one step down */
  .ct-body a.ct-tel { font-size: inherit; line-height: inherit; }
  .ct-body-mobile { display: none; }
  .ct-body p { font-size: 18px; line-height: 27.9px; }
  .ct-consent span { font-size: 14px; line-height: 20.3px; }

  .ct-form { grid-column: 2; padding-top: 24px; }
  .ct-field input, .ct-field select { padding: 11px 12px; }
  .ct-row { display: flex; gap: 24px; }
  /* reset every mobile order rule — .ct-form > .ct-field:not(.ct-email)
     outranks a bare `.ct-form > *`, so it has to be named here too */
  .ct-form > *,
  .ct-row .ct-field,
  .ct-form > .ct-field:not(.ct-email) { order: 0; }
  .ct-row .ct-field { flex: 1; }
  .ct-field > span { font-size: 16px; line-height: 24px; }
  .ct-select > span { font-size: 14px; line-height: 20.3px; }
  .ct-req { display: inline; }   /* the desktop comp marks Message required */
}

.ct-badge .badge-stack { display: grid; gap: 2px; }
.ct-body a { color: inherit; text-decoration: underline; }


/* ---- Team photo -------------------------------------------------------
   The comp replaced the four-tile collage with one full-bleed team shot:
   375x210 at mobile, 1440x830 at desktop. -------------------------------- */
.ct-team-photo { display: block; background: #fff; }
.ct-team-photo img { display: block; width: 100%; height: 210px; object-fit: cover; }
@media (min-width: 1440px) {
  .ct-team-photo img { height: 830px; }
}