/* Page-level content styles (job photos, etc.) */
.job-photo {
  display: block;
  margin: 0 auto 1.5rem;
  max-width: 100%;
  text-align: center;
}
.job-photo--portrait { max-width: 520px; }
.job-photo--landscape { max-width: 760px; }
.job-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.job-photo figcaption {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: #6c757d;
}

/* ---------- Maintenance plan page (Total Comfort Protection Plan) ---------- */
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; margin: 1.25rem 0 .25rem; }
.plan-price .amt { font: 700 clamp(2.4rem, 6vw, 3.4rem)/1 var(--font-display); color: var(--red); }
.plan-price .amt small { font-size: .45em; color: var(--navy); font-weight: 500; }
.plan-price .alt { color: var(--muted); font-size: .95rem; }
.plan-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.plan-cta .btn { padding: .75rem 1.25rem; font-weight: 600; }
.tool-grid .tool-card:hover { background: var(--mist); }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 991.98px) { .plan-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
.plan-card { background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--sky); border-radius: var(--radius); padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.plan-card.is-core { border-top-color: var(--red); box-shadow: var(--shadow); }
.plan-card .kicker { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.plan-card h3 { font: 700 1.4rem/1.1 var(--font-display); text-transform: uppercase; color: var(--navy); margin: 0; }
.plan-card .covers { color: var(--muted); font-size: .92rem; margin: 0; }
.plan-card .price-list { list-style: none; padding: 0; margin: .25rem 0; display: grid; gap: .35rem; }
.plan-card .price-list li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed var(--line); padding-bottom: .35rem; }
.plan-card .price-list b { font: 700 1.35rem/1.1 var(--font-display); color: var(--navy); }
.plan-card .note { font-size: .88rem; color: var(--muted); margin: auto 0 0; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.table-scroll table { margin: 0; min-width: 480px; }
.table-scroll th { color: var(--navy); font-family: var(--font-display); text-transform: uppercase; font-weight: 600; letter-spacing: .03em; }
.checklists { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 767.98px) { .checklists { grid-template-columns: 1fr; } }
.checklist, .ma-faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.checklist summary, .ma-faq summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; color: var(--navy); list-style-position: inside; }
.checklist summary { font: 700 1.2rem/1.2 var(--font-display); text-transform: uppercase; }
.checklist summary small { display: block; font: 400 .85rem var(--font-body); text-transform: none; color: var(--muted); margin-top: .2rem; }
.checklist ul { columns: 2; column-gap: 1.5rem; margin: 0; padding: 0 1.25rem 1.25rem 2.5rem; font-size: .92rem; }
.checklist li { break-inside: avoid; margin-bottom: .35rem; }
@media (max-width: 480px) { .checklist ul { columns: 1; } }
.ma-faq { max-width: 820px; }
.ma-faq details + details { margin-top: .6rem; }
.ma-faq details p { margin: 0; padding: 0 1.25rem 1rem; color: #3B4654; line-height: 1.65; }
.bg-navy .values div { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); }
.bg-navy .values h3 { color: #fff; }
.bg-navy .values p { color: rgba(255, 255, 255, .85); }
.bg-navy .section-title { color: #fff; }
.bg-navy .lede { color: rgba(255, 255, 255, .85); }
.values.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199.98px) { .values.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .values.cols-4 { grid-template-columns: 1fr; } }