.contact-page {
  --contact-dark: #090d0f;
  --contact-accent: #f2bd28;
  --contact-ink: #111719;
  --contact-muted: #59656b;
  --contact-line: #d6dcde;
  margin: 0;
  background: #f3f5f6;
  color: var(--contact-ink);
}

.contact-page main { overflow: hidden; }
.contact-wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.contact-eyebrow { margin: 0 0 14px; color: #795d09; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.contact-hero { padding: 170px 0 78px; background: var(--contact-dark); color: #fff; }
.contact-hero .contact-eyebrow { color: var(--contact-accent); }
.contact-hero h1 { max-width: 13ch; margin: 0; font-family: var(--display-font); font-size: clamp(3.4rem, 6vw, 6rem); line-height: .96; letter-spacing: 0; overflow-wrap: normal; word-break: normal; }
.contact-hero > .contact-wrap > p:not(.contact-eyebrow) { max-width: 720px; color: #c4cdd0; font-size: clamp(1.08rem, 1.5vw, 1.24rem); line-height: 1.65; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.contact-button { box-sizing: border-box; display: inline-flex; min-height: 54px; padding: 0 22px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.38); border-radius: 6px; color: #fff; font-weight: 900; }
.contact-button-primary { border-color: var(--contact-accent); background: var(--contact-accent); color: #101315; }

.contact-request { padding: clamp(64px, 9vw, 110px) 0; background: #fff; }
.contact-request-grid { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr); gap: clamp(36px, 7vw, 90px); align-items: start; }
.contact-request h2, .contact-prep h2 { margin: 0; font-family: var(--display-font); font-size: clamp(2.4rem, 4.5vw, 4.5rem); line-height: 1; letter-spacing: 0; }
.contact-request-copy > p:not(.contact-eyebrow), .contact-prep > .contact-wrap > p:last-child { color: var(--contact-muted); line-height: 1.65; }
.contact-request dl { margin: 36px 0 0; border-top: 1px solid var(--contact-line); }
.contact-request dl div { padding: 18px 0; border-bottom: 1px solid var(--contact-line); }
.contact-request dt { margin-bottom: 5px; color: #68757b; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.contact-request dd { margin: 0; font-weight: 800; line-height: 1.5; }
.contact-request dd a { color: #17325a; text-decoration: underline; text-decoration-color: var(--contact-accent); text-underline-offset: 4px; }

.contact-repair-form { box-sizing: border-box; padding: clamp(22px, 4vw, 38px); border-color: #cfd6d9; border-radius: 6px; background: #eef1f2; box-shadow: none; }
.contact-repair-form label > span { color: #263238; }
.contact-repair-form :is(input, select, textarea) { border-color: #bfc8cc; background: #fff; color: #111719; }
.contact-repair-form .terms-row { color: #46535a; }
.contact-repair-form .action.primary { border-color: var(--contact-accent); background: var(--contact-accent); color: #101315; }

.contact-prep { padding: clamp(64px, 8vw, 96px) 0; background: #e7ebec; }
.contact-prep ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 36px 0 28px; padding: 0; list-style: none; border-top: 1px solid #bdc6ca; border-left: 1px solid #bdc6ca; }
.contact-prep li { min-height: 130px; padding: 22px; border-right: 1px solid #bdc6ca; border-bottom: 1px solid #bdc6ca; font-weight: 900; }
.contact-prep li span { display: block; margin-bottom: 25px; color: #795d09; font-size: .78rem; }

.callout-page-link { display: block; margin-top: 15px; color: #cfd8dc; text-align: center; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 820px) {
  .contact-request-grid { grid-template-columns: 1fr; }
  .contact-prep ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 600px) {
  .contact-wrap { width: min(100% - 28px, 1180px); }
  .contact-hero { padding: 126px 0 54px; }
  .contact-hero h1 { max-width: 100%; font-size: clamp(2.55rem, 12vw, 3.45rem); }
  .contact-actions { display: grid; }
  .contact-button { width: 100%; }
  .contact-repair-form .form-grid, .contact-prep ol { grid-template-columns: 1fr; }
  .contact-prep li { min-height: 0; }
}