/* One clear illustration per section, with a separate place for the real photo. */
.site-art { pointer-events: none; user-select: none; }
:where(.site-art) img { display: block; object-fit: contain; }

.hero-action-copy .hero-actions { gap: 10px 20px; }
.hero-grid { align-items: start; }
.hero-categories { gap: 1px; background: #d6d9d3; }
.hero-categories > .hero-category { min-height: 44px; border: 0; background: #fffdfa; }
.hero-categories > .hero-category:hover { background: #f1ece2; }
.hero-categories > .hero-category:last-child { grid-column: 1 / -1; }
.hero-visual-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: center; }
.hero-decor img { width: 200px; height: 200px; }
.hero-visual-top .hero-repair--placeholder { height: 200px; padding: 14px; }

.service-explorer { grid-template-columns: minmax(0, 1fr); }
.service-explorer .service-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; border-right: 0; border-bottom: 1px solid #bbc5c9; }
.service-tabs button { min-width: 0; min-height: 44px; padding: 10px 12px; gap: 9px; border: 0; border-right: 1px solid #cbd1d2; border-bottom: 1px solid #cbd1d2; font-size: 13px; line-height: 1.35; }
.service-tabs button:nth-child(3n) { border-right: 0; }
.service-tabs button:nth-last-child(-n + 3) { border-bottom: 0; }
.service-tabs button:focus-visible { outline-offset: -3px; }
.service-tabs .icon { width: 19px; height: 19px; }
.service-tab-label { min-width: 0; overflow-wrap: anywhere; }
.service-panel { display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-areas: "intro art" "symptoms art" "actions art"; column-gap: 28px; align-content: start; }
.service-panel__intro { grid-area: intro; display: block; }
.service-panel__intro > div { min-width: 0; }
.service-art { grid-area: art; align-self: start; }
#service-decor { width: 180px; height: 200px; }
.symptom-fieldset { grid-area: symptoms; }
.service-actions { grid-area: actions; }

.cost-intro { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 20px; align-items: center; }
.cost-intro p { color: #5e6870; font-size: 14px; line-height: 1.5; margin-block: 10px; }
.cost-decor__meter { width: 180px; height: 180px; }

@media (min-width: 1101px) {
  .hero-categories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-categories > .hero-category { grid-template-columns: 22px minmax(0, 1fr); gap: 7px; padding: 8px; }
  .hero-categories > .hero-category:last-child { grid-column: auto; }
  .hero-categories > .hero-category > .icon { display: none; }
  .hero-categories > .hero-category strong { font-size: 13px; }
  .hero-categories .appliance { width: 22px; height: 22px; }
}

@media (min-width: 741px) and (max-width: 1100px) {
  .hero-visual-top { grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
  .hero-decor img { width: 150px; height: 174px; }
  .hero-visual-top .hero-repair--placeholder { height: 184px; padding: 10px; }
  .hero-visual-top .photo-placeholder-icon { display: none; }
  .hero-visual-top .photo-placeholder-label { font-size: 14px; }
  .service-panel { grid-template-columns: minmax(0, 1fr) 140px; column-gap: 20px; }
  #service-decor { width: 140px; height: 170px; }
  .cost-intro { grid-template-columns: minmax(0, 1fr) 160px; gap: 16px; }
  .cost-decor__meter { width: 160px; height: 160px; }
}

@media (max-width: 740px) {
  .service-explorer .service-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-tabs button { padding: 9px 10px; font-size: 12px; gap: 8px; }
  .service-tabs button:nth-child(3n) { border-right: 1px solid #cbd1d2; }
  .service-tabs button:nth-last-child(-n + 3) { border-bottom: 1px solid #cbd1d2; }
  .service-tabs button:nth-child(2n), .service-tabs button:last-child { border-right: 0; }
  .service-tabs button:last-child { grid-column: 1 / -1; border-bottom: 0; justify-content: center; }
  .service-tabs .icon { width: 17px; height: 17px; }
  .hero-action-copy .hero-actions { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-visual-top { grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
  .hero-decor img { width: 130px; height: 130px; }
  .hero-visual-top .hero-repair--placeholder { height: 130px; padding: 10px; gap: 0; }
  .hero-visual-top .photo-placeholder-icon { display: none; }
  .hero-visual-top .photo-placeholder-label { font-size: 13px; letter-spacing: .04em; }
  .hero-visual-top .photo-placeholder-caption { font-size: 11px; }
  .service-panel { grid-template-columns: minmax(0, 1fr) 96px; grid-template-areas: "title art" "description description" "symptoms symptoms" "actions actions"; column-gap: 12px; }
  .service-panel__intro, .service-panel__intro > div { display: contents; }
  #service-title { grid-area: title; align-self: center; }
  #service-description { grid-area: description; margin: 8px 0 14px; }
  #service-decor { width: 96px; height: 88px; }
  .cost-intro { grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; }
  .cost-decor__meter { width: 112px; height: 112px; }
}

@media (max-width: 350px) {
  .hero-visual-top { grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
  .hero-decor img { width: 112px; height: 126px; }
  .hero-visual-top .hero-repair--placeholder { height: 126px; padding: 8px; }
  .hero-visual-top .photo-placeholder-label { font-size: 12px; }
  .hero-visual-top .hero-repair--placeholder strong { font-size: 12px; }
  .service-panel { grid-template-columns: minmax(0, 1fr) 72px; }
  #service-decor { width: 72px; height: 76px; }
  .cost-intro { grid-template-columns: 1fr; }
  .cost-decor { display: none; }
}