/* Service pages use the established type, colors and shared content rails. */
.service-page :is(.service-hero-grid, .service-overview-grid, .service-feature-grid, .service-contact-grid) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.service-page :is(.service-hero-copy, .service-prose, .service-photo-guide) { min-width: 0; }
.service-page .section { padding-block: clamp(56px, 6vw, 82px); }
.service-page .service-hero { padding-top: 44px; }
.service-page .breadcrumbs { margin-bottom: 22px; color: var(--text); font-size: 14px; }
.service-page .service-hero h1 { font-size: clamp(38px, 3.8vw, 54px); line-height: 1.12; }
.service-page .service-hero-copy > p { margin-top: 22px; max-width: 55ch; font-size: 18px; line-height: 1.75; }
.service-page .service-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 26px; }
.service-page .service-hero-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; }
.service-page .service-photo { min-width: 0; margin: 0; }
.service-page .service-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0 22px 0 22px; }
.service-page .service-photo figcaption { margin-top: 10px; color: var(--text); font-size: 12px; line-height: 1.6; }
.service-page .service-photo-placeholder { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: #e0e0e0; color: #555; font-size: 16px; }
.service-page :is(.service-overview h2, .service-feature h2, .service-story h2, .service-contact h2) { font-size: clamp(31px, 3vw, 42px); line-height: 1.2; }
.service-page .service-overview-grid { align-items: start; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.service-page .service-prose p { font-size: 17px; line-height: 1.8; }
.service-page .service-prose p + p { margin-top: 18px; }
.service-page .service-prose h2 + p { margin-top: 22px; }
.service-page .service-links { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 24px; margin-top: 18px; }
.service-page .service-links a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 6px; color: var(--magenta); font-size: 15px; line-height: 1.5; }
.service-page .service-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 36px; }
.service-page .service-topic-grid article { border-top: 1px solid #bda998; padding-top: 20px; }
.service-page .service-topic-grid h3 { font-size: 25px; }
.service-page .service-topic-grid p { margin-top: 12px; font-size: 16px; line-height: 1.75; }
.service-page .service-photo-guide { padding: 28px 30px; background: var(--linen); border: 1px solid var(--line); border-radius: 0 20px 0 20px; }
.service-page .service-checklist { margin: 0; padding-left: 20px; color: var(--text); font-size: 16px; line-height: 1.75; }
.service-page .service-checklist li + li { margin-top: 10px; }
.service-page .service-photo-guide > p { margin-top: 20px; font-size: 15px; }
.service-page .service-details { padding-top: 0; }
.service-page .service-details-panel { padding: 40px; border: 1px solid var(--line); border-radius: 0 24px 0 24px; background: var(--linen); }
.service-page .service-details-panel > h2 { max-width: 760px; font-size: clamp(31px, 3vw, 42px); line-height: 1.2; }
.service-page .service-details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.service-page .service-details-grid article { min-width: 0; padding-top: 20px; border-top: 1px solid #bda998; }
.service-page .service-details-grid h3 { font-size: 25px; line-height: 1.3; }
.service-page .service-details-grid p { margin-top: 14px; font-size: 16px; line-height: 1.75; }
.service-page .service-proof { padding-block: 64px; }
.service-page .service-customer-quote { width: 100%; max-width: 1000px; margin: 0 auto; padding: 40px 48px; border: 1px solid var(--line); border-radius: 0 28px 0 28px; background: var(--white); }
.service-page .service-review-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.service-page .service-review-mark { height: 44px; color: var(--magenta); font: 80px/.85 var(--display); }
.service-page .service-review-attribution { display: grid; justify-items: end; gap: 6px; }
.service-page .service-review-source { display: flex; align-items: center; gap: 8px; color: var(--text); font-size: 13px; line-height: 1.5; }
.service-page .service-review-source img { width: 22px; height: 22px; }
.service-page .service-review-stars { color: #a36c12; font-size: 18px; line-height: 1.2; letter-spacing: 3px; }
.service-page .service-customer-quote blockquote { margin: 0; }
.service-page .service-customer-quote blockquote p { margin-top: 24px; color: var(--walnut); font-family: var(--display); font-size: clamp(23px, 2.2vw, 30px); line-height: 1.55; }
.service-page .service-customer-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--walnut); font-size: 14px; line-height: 1.5; }
.service-page .service-review-avatar { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: var(--linen); font-size: 13px; font-weight: 500; }
.service-page .service-story--review .service-overview-grid { align-items: center; }
.service-page .service-story--review .service-customer-quote { padding: 32px; }
.service-page .service-story--review .service-customer-quote blockquote p { font-size: clamp(23px, 1.9vw, 27px); }
.service-page .service-contact-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.service-page .service-contact-grid > .hub-contact-details { width: 100%; justify-self: end; }
.service-page .service-repair-form { grid-area: auto; min-width: 0; width: 100%; max-width: 520px; justify-self: end; padding: 24px; }
.service-page .repair-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: end; }
.service-page .repair-form-row .hub-form-field { min-width: 0; }
.service-page .repair-date-help { margin: 0; font-size: 12px; line-height: 1.5; }
.service-page .repair-upload-field .repair-upload-label { margin: 0 0 8px; font-size: 13px; line-height: 1.5; font-weight: 500; }
.service-page .repair-upload-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.service-page .repair-upload-field .repair-upload-button { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-height: 44px; margin: 0; padding: 10px 18px; border: 1px solid var(--walnut); background: var(--white); color: var(--walnut); font: 500 14px/1.5 var(--body); cursor: pointer; }
.service-page .repair-upload-button:hover { background: var(--linen); }
.service-page .repair-upload-button:focus-within { outline: 3px solid var(--magenta); outline-offset: 3px; }
.service-page .repair-upload-field input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.service-page .repair-photo-selection { min-width: 0; max-width: 100%; color: var(--text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.service-page .repair-upload-field > p:last-child { margin-top: 8px; font-size: 12px; line-height: 1.5; }

@media (max-width: 1000px) {
  .service-page .service-hero h1 { font-size: 40px; }
  .service-page .service-hero-copy > p { font-size: 17px; }
  .service-page .service-contact-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .service-page .service-contact-grid > .hub-contact-details { justify-self: start; }
}
@media (max-width: 800px) {
  .service-page :is(.service-hero-grid, .service-overview-grid, .service-feature-grid) { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .service-page .service-hero { padding-top: 34px; }
  .service-page .service-hero h1 { max-width: 650px; font-size: clamp(36px, 6vw, 46px); }
  .service-page .service-hero-copy > p { max-width: 65ch; }
  .service-page .service-photo { width: 100%; max-width: 660px; justify-self: center; }
  .service-page .service-photo img { aspect-ratio: 16 / 10; }
  .service-page .service-photo-placeholder { max-width: 660px; justify-self: center; aspect-ratio: 16 / 10; }
  .service-page .service-topic-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 28px; }
  .service-page .service-details-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .service-page .service-feature-grid > .service-photo { order: 2; }
  .service-page .service-repair-form { justify-self: start; }
}
@media (max-width: 600px) {
  .service-page .repair-form-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 500px) {
  .service-page .section { padding-block: 48px; }
  .service-page .service-hero { padding-top: 28px; }
  .service-page .service-hero h1 { font-size: 36px; }
  .service-page .service-hero-copy > p { font-size: 16px; }
  .service-page .service-hero-actions { align-items: flex-start; flex-direction: column; gap: 4px; margin-top: 22px; }
  .service-page .service-prose p { font-size: 16px; line-height: 1.75; }
  .service-page .service-photo-guide { padding: 22px; }
  .service-page .service-details-panel { padding: 26px 24px; }
  .service-page .service-details-grid h3 { font-size: 24px; }
  .service-page .service-proof { padding-block: 44px; }
  .service-page .service-customer-quote, .service-page .service-story--review .service-customer-quote { padding: 28px 24px; border-radius: 0 22px 0 22px; }
  .service-page .service-links { gap: 2px 18px; }
  .service-page .service-repair-form { padding: 20px; }
}

/* Client upholstery photos retain their full portrait framing. */
.service-page--upholstery .service-hero .service-photo { width: 100%; max-width: 360px; justify-self: center; }
.service-page--upholstery .service-photo--portrait img { display: block; height: auto; aspect-ratio: 3 / 4; object-fit: contain; }
.service-page--upholstery .service-comparison { padding-block: 56px; }
.service-page--upholstery .service-comparison-layout { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.service-page--upholstery .service-comparison-copy { max-width: 470px; }
.service-page--upholstery .service-comparison h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.2; }
.service-page--upholstery .service-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; max-width: 480px; justify-self: end; }
.service-page--upholstery .service-comparison-grid > article { min-width: 0; }
.service-page--upholstery .service-comparison-grid h3 { margin-bottom: 10px; font-family: var(--body); font-size: 16px; line-height: 1.5; font-weight: 600; }
.service-page--upholstery .service-comparison .service-photo img { border-radius: 0; }
.service-page--upholstery .service-comparison + .service-details { padding-top: clamp(40px, 5vw, 64px); }
@media (max-width: 760px) {
  .service-page--upholstery .service-comparison { padding-block: 48px; }
  .service-page--upholstery .service-comparison-layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .service-page--upholstery .service-comparison-copy { max-width: 560px; }
  .service-page--upholstery .service-comparison-grid { justify-self: start; }
}

.service-page .repair-upload-button:has(input:disabled) { opacity: .6; cursor: default; }
.service-page .repair-upload-field > p:not(.repair-upload-label) { margin-top: 8px; font-size: 12px; line-height: 1.5; }