/* Contact page */

/* hero: photo with the stacked logo + phone on the left, red panel on the right */
.chero { position: relative; display: grid; grid-template-columns: 50% 50%; align-items: start; height: calc(982 * var(--s)); min-height: 560px; overflow: hidden; }
.chero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.chero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); pointer-events: none; }
.chero__left { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: calc(154 * var(--s)); color: var(--white); }
.chero__left img { width: calc(420 * var(--s)); min-width: 180px; }
.chero__prefer { font-family: var(--font-nav); font-weight: 900; font-size: var(--t-30); letter-spacing: .12em; text-transform: uppercase; line-height: 1; margin: calc(20 * var(--s)) 0 0; }
.chero__phone { font-family: var(--font-head); font-weight: 900; font-size: var(--t-80); line-height: 1; margin-top: calc(14 * var(--s)); }
.chero__panel { position: relative; z-index: 1; background: var(--brand); color: var(--white); text-align: center; margin-top: calc(138 * var(--s)); width: calc(1028 * var(--s)); max-width: 100%; padding: calc(105 * var(--s)) calc(60 * var(--s)) calc(64 * var(--s)); display: flex; flex-direction: column; align-items: center; }
.chero__panel h1 { color: var(--white); font-size: var(--t-80); line-height: .81; }
.chero__panel p { max-width: calc(640 * var(--s)); margin: calc(18 * var(--s)) 0 0; line-height: 1.2; }
.chero__panel .arrow-btn { margin-top: calc(36 * var(--s)); }
@media (max-width: 900px) {
  .chero { grid-template-columns: 1fr; height: auto; padding: 36px 0 calc(var(--roof-h) + 28px); } /* photo shows below the red panel so the dark peak sits on it, not on the red; the extra 28px keeps the peak's tip clear of the red */
  .chero__left { padding: 0 var(--gutter); }
  .chero__left img { width: 130px; }
  .chero__prefer { margin-top: 14px; }
  .chero__panel { margin: 32px 0 0; width: 100%; padding: 36px var(--gutter) 40px; }
}

/* dark gable: proudly serving. The gable overlaps the photo, and the copy
   sits up inside the gable, so this section pulls its own triangle up. */
.cserve { margin-top: 0; z-index: 1; text-align: center; color: var(--white); padding: 0 var(--gutter) calc(33 * var(--s)); }
.cserve__inner { position: relative; margin-top: calc(-40 * var(--s)); } /* was -99: the heading sat tight under the gable's peak on desktop */
.cserve h2 { color: var(--white); font-size: var(--t-60); }
.cserve p { margin: calc(36 * var(--s)) 0 0; font-family: var(--font-nav); font-weight: 900; font-size: var(--t-30); letter-spacing: .12em; text-transform: uppercase; line-height: 1; }
@media (max-width: 900px) { .cserve__inner { margin-top: -20px; } .cserve { padding-bottom: 24px; } }

/* the quote form (this is where every Start a Quote button lands) */
.quote { padding: calc(110 * var(--s)) var(--gutter) calc(130 * var(--s)); }
.quote__inner { width: calc(1400 * var(--s)); max-width: 100%; margin-inline: auto; }
.quote__intro h2 { font-size: var(--t-60); }
.quote__intro p { margin: calc(24 * var(--s)) 0 calc(48 * var(--s)); max-width: 40em; }
.quote__intro a { color: var(--brand); }
.field--choices { display: grid; gap: 10px; }
.choices { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.choices label { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 1em; color: var(--ink); cursor: pointer; }
.choices input { accent-color: var(--brand); width: 1.1em; height: 1.1em; }
.form-actions { margin-top: calc(10 * var(--s)); }
.form-actions .arrow-btn { border: 0; }
.form-success h3 { font-size: var(--t-40); }
.form-success a { color: var(--brand); }
@media (max-width: 900px) { .quote { padding: 48px var(--gutter) 60px; } }

@media (max-width: 900px) { .chero__panel p { max-width: none; } }