:root { --black: #171513; --warm: #F6F2EA; --oxide: #B93B27; --beige: #D6C3A3; --metal: #7A7C7F; }
body { color: var(--warm); background: var(--black); font-family: "Manrope C", system-ui, -apple-system, "Segoe UI", sans-serif; }
h1, h2, h3 { font-family: "Roboto Condensed C", "Arial Narrow", Arial, sans-serif; font-weight: 700; }
h1 { max-width: 560px; font-size: clamp(33px, 3.8vw, 48px); line-height: 1.04; text-transform: none; }
.draft-bar { color: var(--black); background: var(--beige); }
.site-nav { border-bottom: 1px solid rgba(246,242,234,.18); }
.brand { font-family: "Roboto Condensed C", "Arial Narrow", sans-serif; font-size: 21px; text-transform: uppercase; letter-spacing: .025em; }
.nav-links { font-size: 14px; }
.nav-cta { border-color: var(--beige); color: var(--warm); background: transparent; cursor: pointer; }
.btn { border-radius: 0; font-weight: 650; }
.btn-primary { background: var(--oxide); }
.btn-secondary { border-color: var(--warm); }
.kicker { color: var(--beige); }

.hero-c { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: clamp(36px, 5vw, 75px); padding-top: 42px; padding-bottom: 50px; }
.hero-c-copy { align-self: start; padding-top: 20px; }
.hero-c-copy .lead { max-width: 520px; margin: 21px 0 28px; color: #d0cbc2; }
.route-buttons { max-width: 555px; margin: 27px 0; border-top: 1px solid rgba(246,242,234,.27); }
.route-buttons a { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; width: 100%; min-height: 68px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(246,242,234,.27); text-align: left; text-decoration: none; color: var(--warm); background: transparent; }
.route-buttons a span { font-family: "Roboto Condensed C", "Arial Narrow", sans-serif; font-size: 21px; font-weight: 600; }
.route-buttons a small { color: #aaa49b; font-size: 12px; line-height: 1.4; }
.route-buttons a:hover span, .route-buttons a:focus-visible span { color: #e4a091; }
.hero-c .address { color: #c4bfb7; }
.hero-c a.address { text-decoration: none; }

.photo-composition { position: relative; height: 630px; min-height: 0; padding-left: 80px; padding-bottom: 72px; }
.paint-photo { height: 100%; margin: 0; }
.paint-photo img { width: 100%; height: calc(100% - 38px); min-height: 0; object-fit: cover; object-position: 60% 58%; filter: contrast(1.03) saturate(.86); }
.paint-photo figcaption { margin-top: 9px; color: #a9a49d; font-size: 11px; line-height: 1.4; }
.polish-photo { position: absolute; left: 0; bottom: 10px; width: 255px; margin: 0; padding: 8px; color: var(--black); background: var(--beige); }
.polish-photo img { width: 100%; height: 150px; object-fit: cover; object-position: 60% 55%; }
.polish-photo figcaption { padding: 7px 2px 1px; font-size: 10px; line-height: 1.35; }
.image-mark { position: absolute; top: 12px; right: -20px; margin: 0; writing-mode: vertical-rl; color: #a8a197; font-family: "Roboto Condensed C", "Arial Narrow", sans-serif; font-size: 13px; letter-spacing: .05em; }

.all-services { padding: 96px 0 105px; color: var(--black); background: var(--warm); }
.all-services-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(45px, 7vw, 100px); }
.services-c-heading { position: sticky; top: 25px; align-self: start; }
.services-c-heading .kicker { color: #8b2b1d; }
.services-c-heading h2 { font-size: clamp(32px, 3.5vw, 46px); }
.services-c-heading > p:last-child { max-width: 380px; color: #5a554f; line-height: 1.55; }
.service-matrix { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #aaa196; border-left: 1px solid #aaa196; }
.service-matrix > a, .service-matrix > .service-summary { min-height: 145px; padding: 24px; border: 0; border-right: 1px solid #aaa196; border-bottom: 1px solid #aaa196; text-align: left; text-decoration: none; color: var(--black); background: transparent; }
.service-matrix span { display: block; max-width: 250px; font-family: "Roboto Condensed C", "Arial Narrow", sans-serif; font-size: 25px; font-weight: 600; line-height: 1.05; }
.service-matrix small { display: block; max-width: 240px; margin-top: 15px; color: #68615a; font-size: 12px; line-height: 1.45; }
.service-matrix a:hover, .service-matrix a:focus-visible { color: white; background: var(--oxide); }
.service-matrix a:hover small, .service-matrix a:focus-visible small { color: var(--warm); }

.approach-c { display: grid; grid-template-columns: 5fr 7fr; gap: 75px; padding-top: 100px; padding-bottom: 105px; }
.approach-copy > p { max-width: 640px; margin: 5px 0 35px; color: #c8c3bb; font-size: 18px; line-height: 1.6; }
.approach-steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(246,242,234,.25); border-bottom: 1px solid rgba(246,242,234,.25); }
.approach-steps span { min-height: 88px; padding: 18px 16px; border-right: 1px solid rgba(246,242,234,.25); font-family: "Roboto Condensed C", "Arial Narrow", sans-serif; font-size: 17px; }
.approach-steps span:last-child { border-right: 0; }
.text-action { margin-top: 28px; padding: 0 0 8px; border: 0; border-bottom: 2px solid var(--oxide); color: var(--warm); background: transparent; cursor: pointer; }
.closing-c { padding: 65px 0; color: var(--black); background: var(--beige); }
.closing-c-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.closing-c .kicker { color: #71281c; }
.closing-c h2 { max-width: 700px; }
footer { color: #aaa49d; background: var(--black); }

@media (max-width: 900px) {
  .hero-c { grid-template-columns: 1fr; min-height: 0; }
  .photo-composition { height: 650px; }
  .all-services-grid, .approach-c { grid-template-columns: 1fr; gap: 38px; }
  .services-c-heading { position: static; }
}

@media (max-width: 600px) {
  .hero-c { padding-top: 34px; }
  .route-buttons a { grid-template-columns: 1fr; gap: 3px; padding: 11px 3px; }
  .photo-composition { height: 570px; padding-left: 0; padding-bottom: 188px; }
  .paint-photo img { min-height: 350px; height: 350px; object-position: 63% 47%; }
  .polish-photo { left: 0; bottom: 0; width: 82%; }
  .image-mark { display: none; }
  .all-services { padding: 70px 0; }
  .service-matrix { grid-template-columns: 1fr; }
  .service-matrix > a, .service-matrix > .service-summary { min-height: 112px; }
  .approach-c { padding-top: 70px; padding-bottom: 75px; }
  .approach-steps { grid-template-columns: 1fr; }
  .approach-steps span { min-height: auto; border-right: 0; border-bottom: 1px solid rgba(246,242,234,.25); }
  .approach-steps span:last-child { border-bottom: 0; }
  .closing-c-grid { grid-template-columns: 1fr; }
}