.page-upholstery {
  --uph-teal: #15706b;
  --uph-teal-soft: #e9f4f2;
  --uph-red: #a3483f;
  --uph-red-soft: #f9eeec;
}

.uph-hero {
  position: relative;
  overflow: hidden;
  color: var(--paper);
  background:
    radial-gradient(circle at 16% 12%, rgba(35, 118, 139, .28), transparent 34%),
    linear-gradient(135deg, var(--navy-950), var(--navy-900));
}

.uph-hero::after {
  position: absolute;
  right: -120px;
  bottom: -220px;
  width: 560px;
  height: 560px;
  border: 1px solid rgba(180, 191, 202, .14);
  border-radius: 50%;
  content: "";
}

.uph-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(430px, .96fr);
  gap: 72px;
  align-items: center;
  min-height: 700px;
  padding-block: 86px;
}

.uph-hero-copy { max-width: 690px; }
.uph-hero h1 { max-width: 680px; color: var(--paper); }
.uph-hero .hero-lead { max-width: 665px; color: var(--copy-dark); font-size: 18px; line-height: 1.65; }
.uph-hero-image { position: relative; overflow: hidden; margin: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; box-shadow: 0 34px 75px rgba(0,0,0,.28); }
.uph-hero-image img { display: block; width: 100%; height: 510px; object-fit: cover; }
.uph-hero-image figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 15px 18px; color: var(--copy-dark); background: rgba(3,28,53,.94); font-size: 13px; }
.uph-hero-image figcaption span { color: var(--orange-300); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.uph-hero .hero-points { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 26px; }

.uph-scope { padding-block: 82px; color: var(--paper); background: var(--navy-900); border-top: 1px solid rgba(180,191,202,.18); }
.uph-scope-heading, .uph-project-heading { display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: end; margin-bottom: 38px; }
.uph-scope-heading h2, .uph-project-heading h2 { color: var(--paper); }
.uph-scope-heading > p, .uph-project-heading > p { margin: 0; color: var(--copy-dark); }
.uph-scope-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border: 1px solid rgba(180,191,202,.22); border-radius: var(--radius-card); overflow: hidden; }
.uph-scope-grid article { padding: 34px; }
.uph-scope-grid article + article { border-left: 1px solid rgba(180,191,202,.22); }
.uph-do { background: rgba(21,112,107,.16); }
.uph-no { background: rgba(163,72,63,.12); }
.uph-scope-label { display: inline-flex; padding: 7px 10px; color: var(--paper); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.uph-scope-grid ul { margin: 23px 0 0; padding: 0; list-style: none; }
.uph-scope-grid li { position: relative; padding: 18px 0 18px 38px; border-top: 1px solid rgba(180,191,202,.18); }
.uph-scope-grid li::before { position: absolute; top: 19px; left: 2px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; }
.uph-do li::before { color: #bde7dc; background: rgba(21,112,107,.38); content: "✓"; }
.uph-no li::before { color: #ffd3cc; background: rgba(163,72,63,.38); content: "×"; }
.uph-scope-grid strong { display: block; margin-bottom: 5px; color: var(--paper); }
.uph-scope-grid li span { display: block; color: var(--copy-dark); font-size: 14px; line-height: 1.6; }
.uph-scope-note { margin: 24px 0 0; padding: 18px 22px; color: var(--copy-dark); border: 1px solid rgba(180,191,202,.22); border-radius: 12px; background: rgba(255,255,255,.04); }
.uph-scope-note strong { color: var(--paper); }

.uph-decision { background: var(--paper); }
.uph-decision-grid, .uph-certificate-grid, .uph-quote-grid, .uph-aftercare-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 72px; align-items: center; }
.uph-decision-grid > div:first-child > p:not(.eyebrow), .uph-quote-grid > div > p:not(.eyebrow), .uph-aftercare-grid > div > p:not(.eyebrow) { color: var(--copy); }
.uph-control-panel { padding: 32px; background: var(--blue-50); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.uph-control-panel > span { color: var(--orange-600); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.uph-control-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 18px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.uph-control-grid div { min-height: 112px; padding: 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uph-control-grid b { display: block; margin-bottom: 10px; color: var(--uph-teal); font-size: 12px; }
.uph-control-grid strong { color: var(--navy-950); font-size: 15px; }
.uph-control-panel > p { margin: 20px 0 0; color: var(--copy); font-size: 14px; }

.uph-suitable, .uph-process, .uph-aftercare { background: var(--blue-50); }
.uph-heading { max-width: 790px; margin: 0 auto 42px; }
.uph-heading > p:last-child { color: var(--copy); }
.uph-types { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); }
.uph-types article { min-height: 225px; padding: 30px; background: var(--paper); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uph-types article:nth-child(4n) { border-right: 0; }
.uph-types article:nth-last-child(-n+4) { border-bottom: 0; }
.uph-types article > span { display: block; margin-bottom: 30px; color: var(--uph-teal); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.uph-types h3 { font-size: 21px; }
.uph-types p { margin-bottom: 0; color: var(--copy); font-size: 14px; }
.uph-types .uph-type-note { color: var(--paper); background: var(--navy-900); }
.uph-types .uph-type-note > span { color: var(--orange-300); }
.uph-types .uph-type-note h3 { color: var(--paper); }
.uph-types .uph-type-note p { color: var(--copy-dark); }

.uph-projects { color: var(--copy-dark); background: var(--navy-950); }
.uph-project-grid { display: grid; grid-template-columns: 1.18fr .82fr; gap: 24px; }
.uph-project-grid figure { position: relative; min-height: 490px; margin: 0; overflow: hidden; border: 1px solid rgba(180,191,202,.2); border-radius: var(--radius-card); }
.uph-project-grid img { width: 100%; height: 100%; min-height: 490px; object-fit: cover; }
.uph-project-grid figcaption { position: absolute; right: 0; bottom: 0; left: 0; padding: 24px; background: linear-gradient(transparent, rgba(3,28,53,.94)); }
.uph-project-grid figcaption strong, .uph-project-grid figcaption span { display: block; }
.uph-project-grid figcaption strong { color: var(--paper); }
.uph-project-grid figcaption span { margin-top: 4px; color: var(--copy-dark); font-size: 14px; }

.uph-certificate { color: var(--copy-dark); background: linear-gradient(135deg,var(--navy-900),var(--navy-950)); }
.uph-certificate-grid h2 { color: var(--paper); }
.uph-certificate-grid > div:first-child > p:not(.eyebrow) { color: var(--copy-dark); }
.uph-certificate-card { padding: 32px; background: rgba(255,255,255,.06); border: 1px solid rgba(180,191,202,.24); border-radius: var(--radius-card); }
.uph-certificate-card > span { color: var(--orange-300); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.uph-certificate-card dl { margin: 18px 0 0; }
.uph-certificate-card dl div { display: grid; grid-template-columns: 145px 1fr; gap: 20px; padding: 16px 0; border-top: 1px solid rgba(180,191,202,.2); }
.uph-certificate-card dt { color: var(--paper); font-weight: 700; }
.uph-certificate-card dd { margin: 0; color: var(--copy-dark); }
.uph-certificate-scope { margin: 18px 0 0; color: var(--copy-dark); font-size: 13px; line-height: 1.6; }

.uph-steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-soft); }
.uph-steps li { position: relative; min-height: 215px; padding: 34px 30px 28px 72px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.uph-steps li:nth-child(4n) { border-right: 0; }
.uph-steps li:nth-last-child(-n+4) { border-bottom: 0; }
.uph-steps li > span { position: absolute; top: 37px; left: 28px; color: var(--uph-teal); font-size: 12px; font-weight: 700; }
.uph-steps strong { display: block; margin-bottom: 8px; color: var(--navy-950); }
.uph-steps p { margin: 0; color: var(--copy); font-size: 14px; line-height: 1.6; }

.uph-quote { background: var(--paper); }
.uph-quote-grid { align-items: start; }
.uph-quote-grid .button { margin-top: 12px; }
.uph-quote-grid ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; margin: 0; padding: 0; list-style: none; }
.uph-quote-grid li { position: relative; padding: 14px 0 14px 26px; color: var(--copy); border-top: 1px solid var(--line); }
.uph-quote-grid li::before { position: absolute; left: 2px; color: var(--orange-600); content: "→"; font-weight: 700; }

.uph-aftercare-grid { align-items: start; }
.uph-aftercare-notes { border-top: 1px solid var(--line); }
.uph-aftercare-notes article { padding: 20px 0; border-bottom: 1px solid var(--line); }
.uph-aftercare-notes span { display: block; margin-bottom: 4px; color: var(--navy-950); font-weight: 700; }
.uph-aftercare-notes p { margin: 0; color: var(--copy); font-size: 14px; }
.uph-final-cta { background: radial-gradient(circle at 88% 20%, rgba(21,112,107,.32), transparent 28%), var(--navy-900); }

@media (max-width: 980px) {
  .uph-hero-grid { grid-template-columns: 1fr; gap: 40px; padding-block: 76px; }
  .uph-hero-image { max-width: 720px; }
  .uph-scope-heading, .uph-project-heading, .uph-decision-grid, .uph-certificate-grid, .uph-quote-grid, .uph-aftercare-grid { grid-template-columns: 1fr; gap: 32px; }
  .uph-types, .uph-steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .uph-types article:nth-child(4n), .uph-steps li:nth-child(4n) { border-right: 1px solid var(--line); }
  .uph-types article:nth-child(2n), .uph-steps li:nth-child(2n) { border-right: 0; }
  .uph-types article:nth-last-child(-n+4), .uph-steps li:nth-last-child(-n+4) { border-bottom: 1px solid var(--line); }
  .uph-types article:nth-last-child(-n+2), .uph-steps li:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 760px) {
  .page-upholstery h2 { font-size: 28px; }
  .uph-hero-grid { min-height: 0; padding-block: 66px 54px; }
  .uph-hero h1 { font-size: 34px; }
  .uph-hero .hero-lead { font-size: 17px; }
  .uph-hero-image img { height: 330px; }
  .uph-hero-image figcaption { display: grid; gap: 4px; }
  .uph-scope { padding-block: 62px; }
  .uph-scope-grid, .uph-types, .uph-project-grid, .uph-steps, .uph-quote-grid ul { grid-template-columns: 1fr; }
  .uph-scope-grid article + article { border-top: 1px solid rgba(180,191,202,.22); border-left: 0; }
  .uph-scope-grid article { padding: 26px 22px; }
  .uph-control-grid { grid-template-columns: 1fr; }
  .uph-types article, .uph-types article:nth-child(2n), .uph-types article:nth-child(4n), .uph-types article:nth-last-child(-n+2), .uph-types article:nth-last-child(-n+4),
  .uph-steps li, .uph-steps li:nth-child(2n), .uph-steps li:nth-child(4n), .uph-steps li:nth-last-child(-n+2), .uph-steps li:nth-last-child(-n+4) { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .uph-types article:last-child, .uph-steps li:last-child { border-bottom: 0; }
  .uph-project-grid figure, .uph-project-grid img { min-height: 360px; }
  .uph-certificate-card { padding: 24px; }
  .uph-certificate-card dl div { grid-template-columns: 1fr; gap: 5px; }
}
