/* Stage 3B — responsive refinements for services, prices and real-client
   photography. No service names, amounts, URLs or gallery media are changed. */
.services-page .container,
.service-detail-page .container,
.gallery-page .container {
  width: min(calc(100% - 2 * clamp(18px, 3.2vw, 54px)), 1360px);
  margin-inline: auto;
}
.services-page .pagehero h1,
.service-detail-page .pagehero h1,
.gallery-page .pagehero h1 {
  max-width: 18ch;
  font-size: clamp(2.5rem, 3.2vw + .85rem, 4.75rem);
  line-height: 1.12;
  text-wrap: balance;
}
.services-page .service-category,
.service-detail-page .detail-primary,
.service-detail-page .detail-aside {
  min-width: 0;
}
.services-page .price-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 345px), 1fr));
  gap: clamp(16px, 1.8vw, 26px);
  align-items: stretch;
}
.services-page .price-list-card {
  min-width: 0;
  padding: clamp(18px, 2vw, 27px);
}
.services-page .price-list-card h3 {
  font-size: clamp(1.25rem, 1.5vw + .3rem, 1.55rem);
  line-height: 1.25;
}
.services-page .price-list-card .price,
.service-detail-page .detail-prices .price {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  column-gap: clamp(13px, 1.6vw, 22px);
  padding-block: clamp(11px, 1.1vw, 15px);
}
.services-page .price-list-card .price > span,
.service-detail-page .detail-prices .price > span {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.services-page .price-list-card .price > b,
.service-detail-page .detail-prices .price > b {
  min-width: 54px;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
  white-space: nowrap;
  text-align: right;
  line-height: 1.5;
}
.services-page .service-guide .guide-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr));
  gap: clamp(13px, 1.4vw, 22px);
}
.services-page .service-guide .guide-grid > a {
  min-width: 0;
  overflow-wrap: anywhere;
  min-height: 132px;
}
.service-detail-page .detail-layout {
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .85fr);
  gap: clamp(24px, 3.8vw, 65px);
}
.service-detail-page .detail-prices {
  min-width: 0;
  padding-inline: clamp(15px, 2vw, 26px);
}
.service-detail-page .detail-hero .actions .btn {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.gallery-page .portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 22px);
}
.gallery-page .portfolio-tile,
.gallery-page .portfolio-tile button {
  min-width: 0;
}
.gallery-page .portfolio-tile img {
  width: 100%;
  height: clamp(260px, 24vw, 365px);
}
.gallery-page .portfolio-filters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.1vw, 13px);
}
.gallery-page .portfolio-filters button {
  min-height: 44px;
  line-height: 1.35;
}
.gallery-page .marble-section > .container > p.muted {
  max-width: 78ch;
}
@media (max-width: 1050px) {
  .gallery-page .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 980px) {
  .service-detail-page .detail-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(24px, 4vw, 44px);
  }
  .service-detail-page .detail-aside .aside-sticky {
    position: static;
    max-width: 760px;
  }
  .services-page .service-guide .guide-grid > a {
    min-height: 0;
  }
}
@media (min-width: 681px) and (max-width: 930px) {
  .services-page .service-guide .guide-grid > a:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  .services-page .pagehero,
  .service-detail-page .pagehero {
    padding-block: 38px 44px;
  }
  .services-page .price-columns {
    grid-template-columns: minmax(0, 1fr);
  }
  .services-page .price-list-card {
    padding: 18px 19px;
  }
  .service-detail-page .detail-prices {
    padding-inline: 17px;
  }
  .service-detail-page .detail-hero .actions {
    display: flex;
    gap: 10px;
  }
  .gallery-page .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gallery-page .portfolio-tile img {
    height: clamp(185px, 50vw, 240px);
  }
}
@media (max-width: 359px) {
  .gallery-page .portfolio-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .gallery-page .portfolio-tile img {
    height: 255px;
  }
  .service-detail-page .detail-hero .actions .btn {
    width: 100%;
  }
}