/* Ben Carter Plumbing: a named person, plain service information, a useful next step. */
:root { --steel: #4b6072; }
header { padding-block: 18px; min-height: 80px; }
.brand-mark { object-fit: contain; }
.phone-icon { padding: 8px; width: 40px; height: 40px; }
.phone-button small { font-size: 11px; }
.hero { padding-top: 28px; padding-bottom: 65px; gap: 6%; }
.hero h1 { font-size: clamp(55px, 5.6vw, 84px); letter-spacing: -.055em; }
.intro { font-size: 14px; line-height: 1.6; }
.hero .lede { max-width: 39ch; font-size: 17px; }
.hero-photo { height: 530px; border-radius: 4px; }
.hero-photo img, .service-detail-photo img { transform: scaleX(-1); }
.service-strip { background: var(--pale); color: var(--navy); padding-block: 23px; }
.service-strip > button { color: var(--navy); text-decoration: underline; text-underline-offset: 5px; }
.service-strip i { background: #18304740; }
.section-head { display: block; }
.section-head p { font-size: 16px; color: var(--steel); line-height: 1.7; margin-top: 20px; max-width: 45ch; }
.service-grid { display: block; }
.service-grid article { border: 0; border-bottom: 1px solid #18304740; border-radius: 0; background: transparent; padding: 32px 0; display: grid; grid-template-columns: 60px 1fr 1.2fr 1fr; gap: 28px; align-items: center; }
.service-icon { width: 48px; height: 48px; padding: 10px; margin: 0; }
.service-grid h3 { font-size: 24px; margin: 0; max-width: 15ch; }
.service-grid p { min-height: 0; margin: 0; font-size: 15px; max-width: 32ch; }
.service-grid button { border: 0; padding: 12px 0; gap: 14px; align-items: center; font-size: 14px; line-height: 1.6; text-decoration: underline; text-underline-offset: 4px; }
.about { background: #eaf0f3; }
.about-photo { height: 520px; }
.about-copy > p:not(.intro) { font-size: 16px; }
.process { padding-bottom: 55px; }
.process-grid p { font-size: 15px; }
.plumbing-questions { padding: 35px 6% 90px; max-width: 1050px; }
.plumbing-questions h2 { font-size: 39px; margin-bottom: 35px; }
.plumbing-questions details { border-bottom: 1px solid #18304740; padding: 10px 0; }
.plumbing-questions summary { min-height: 44px; padding: 15px 0; font-size: 18px; line-height: 1.6; cursor: pointer; }
.plumbing-questions details p { max-width: 65ch; line-height: 1.8; font-size: 16px; color: var(--steel); }
.closing { background: #eaf0f3; color: var(--navy); }
.closing .intro { color: var(--steel); }
.disclosure { font-size: 12px !important; }
.steps { font-size: 13px; }
.demo-note { font-size: 12px; color: var(--steel); }
.quote-result dl { margin-block: 24px; }
.quote-result dt { font-size: 12px; color: var(--steel); margin-top: 16px; }
.quote-result dd { margin: 6px 0 0; font-size: 16px; }
.quote-result p { font-size: 14px; }
#quote-back { min-width: 44px; }
@media (max-width: 1000px) and (min-width: 761px) {
  header > nav { gap: 16px; }
  .hero h1 { font-size: 58px; }
  .hero-actions { flex-wrap: wrap; }
  .service-grid article { grid-template-columns: 48px 1fr 1.4fr; gap: 20px; }
  .service-grid button { grid-column: 2/-1; padding: 0; justify-content: start; }
}
@media (max-width: 760px) {
  header { padding: 18px 22px 0; }
  .phone-button { font-size: 13px; }
  .phone-button small { font-size: 10px; max-width: 120px; }
  .phone-icon { display: none; }
  .hero { padding-top: 40px; }
  .hero .lede { font-size: 16px; }
  .hero h1 { font-size: clamp(48px, 13vw, 70px); }
  .hero-photo { margin-top: 35px; height: 430px; }
  .service-strip { gap: 12px 22px; font-size: 14px; }
  .service-strip > button { border-top-color: #18304740; font-size: 14px; }
  .service-grid article { grid-template-columns: 45px 1fr; padding-block: 30px; gap: 15px 20px; }
  .service-grid h3 { max-width: none; font-size: 23px; }
  .service-grid p, .service-grid button { grid-column: 2; max-width: none; }
  .service-grid p { font-size: 15px; }
  .service-grid button { font-size: 14px; justify-content: start; }
  .about-photo { height: 390px; }
  .about-copy h2 { font-size: 42px; }
  .plumbing-questions { padding: 10px 24px 60px; }
  .plumbing-questions h2 { font-size: 35px; }
  .steps { font-size: 11px; }
  .quote-actions { gap: 15px; }
  .quote-actions .button { font-size: 13px; }
}