.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 12px 20px; background: #cfaa60; color: #121515; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
header { position: relative; z-index: 5; }

.service-gallery { background: #eae6dd; }
.service-gallery .section-heading { max-width: 850px; }
.service-gallery .section-heading > p:last-child { margin-top: 20px; max-width: 62ch; color: #50584e; }
.gallery-disclosure { margin: 22px 0 32px; max-width: 85ch; font-size: 12px; color: #62685f; }
.service-gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.service-gallery-grid figure { margin: 0; min-width: 0; }
.service-gallery-grid figure:first-child { grid-column: 1 / -1; }
.gallery-open { display: block; position: relative; overflow: hidden; background: #d0cbbf; }
.gallery-open img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.service-gallery-grid figure:first-child img { aspect-ratio: 3 / 2; }
.gallery-zoom { position: absolute; right: 14px; bottom: 14px; background: #141917eb; color: #fff3d6; padding: 10px 14px; font-size: 12px; }
.service-gallery-grid figcaption { display: flex; gap: 16px; align-items: baseline; padding: 16px 0 8px; }
.service-gallery-grid figcaption > span { color: #8a6a31; font-size: 12px; }
.service-gallery-grid h3 { font-size: clamp(19px, 2vw, 26px); }
.gallery-estimate { margin-top: 32px; }
.gallery-dialog { width: min(1200px, 94vw); max-width: 94vw; padding: 16px; border: 1px solid #77633f; background: #121716; color: #faf7ed; max-height: 94dvh; }
.gallery-dialog::backdrop { background: #080b0bef; }
.gallery-dialog-bar, .gallery-dialog-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.gallery-dialog-bar { margin-bottom: 12px; }
.gallery-dialog-title { font-size: 17px; }
.gallery-dialog button { color: #f8e5bc; background: #232b27; border: 1px solid #766543; padding: 10px 14px; min-height: 44px; }
.gallery-dialog-image { width: 100%; height: min(68dvh, 750px); display: block; object-fit: contain; }
.gallery-dialog-nav { margin-top: 12px; }
.gallery-count { font-size: 13px; white-space: nowrap; }
body.gallery-is-open { overflow: hidden; }
@media (max-width:760px) {
  .service-gallery-grid { grid-template-columns: 1fr; gap: 24px; }
  .service-gallery-grid figure:first-child img { aspect-ratio: 3 / 2; }
  .gallery-dialog { padding: 10px; }
  .gallery-dialog-title { font-size: 14px; }
  .gallery-dialog-image { height: auto; max-height: 65dvh; }
}


.finish-spotlight { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px,5vw,80px); align-items: center; background: #f6f3eb; }
.finish-spotlight--reverse { background: #e8e5dc; }
.finish-spotlight-copy > p:not(.eyebrow) { color: #545c52; margin-top: 22px; max-width: 55ch; }
.finish-spotlight-copy .button { margin-top: 26px; }
.finish-spotlight-copy .note { font-size: 12px; }
.finish-spotlight figure { margin: 0; }
.finish-spotlight figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.finish-spotlight figcaption { color: #686b61; margin-top: 12px; font-size: 12px; }
@media(min-width:761px) { .finish-spotlight--reverse .finish-spotlight-copy { order: 2; } }
@media(max-width:760px) { .finish-spotlight { grid-template-columns: 1fr; } }

.brand { width: 210px; flex-shrink: 0; }
.brand-logo { display: block; width: 100%; height: auto; }
footer { background: #121515; }
@media(max-width:760px) { .brand { width: 190px; } }
.service-list.expanded-services { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.service-list.expanded-services > a.service-card { grid-column: span 2; min-height: 330px; color: white; }
.service-list.expanded-services > a.service-card:nth-child(-n+2) { grid-column: span 3; min-height: 400px; }
.service-extra { margin-top: 24px; color: #5b6258; font-size: 14px; }
.service-extra a { border-bottom: 1px solid #9a7b40; padding-bottom: 3px; }
.hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; opacity: 0; transition: opacity .7s ease; }
.hero-film.is-playing { opacity: 1; }
.hero-video .motion-toggle { bottom: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity .65s ease var(--reveal-delay, 0ms), transform .65s ease var(--reveal-delay, 0ms); }
  .reveal-on-scroll.is-revealed, .reveal-on-scroll:focus-within { opacity: 1; transform: none; }
  .service-card { transition: box-shadow .25s ease, transform .25s ease; }
  .service-card.is-revealed:hover, .service-card:not(.reveal-on-scroll):hover { transform: translateY(-4px); box-shadow: 0 14px 32px #15181724; }
}
@media (max-width: 760px) {
  .hero-video .scene-caption { bottom: 70px; }
  .hero-video .hero-copy { padding-bottom: 165px; }
}
@media(max-width:760px) {
  .service-list.expanded-services { grid-template-columns: 1fr; }
  .service-list.expanded-services > a.service-card, .service-list.expanded-services > a.service-card:nth-child(-n+2) { grid-column: auto; min-height: 300px; }
}
.breadcrumbs { display: flex; position: static; gap: 12px; padding: 16px 6%; background: #1b211e; color: #c4cabf; font-size: 12px; }
.breadcrumbs a { color: #e0bd79; }
.hero--inner h1 { font-size: clamp(48px, 5.7vw, 84px); letter-spacing: -.055em; }
.hero-call { margin-top: 22px; color: #f0deb9; font-size: 15px; }
.hero-call a { text-decoration: underline; text-underline-offset: 5px; }
.hero-foot { margin-top: 25px; }
.service-story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; background: #f7f4ed; }
.service-story h2 { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 24px; }
.service-story p:not(.eyebrow) { color: #555d55; font-size: 15px; margin-bottom: 18px; }
.service-story figure { margin: 0; }
.service-story img { width: 100%; height: 430px; object-fit: cover; object-position: 65% center; display: block; }
.service-story figcaption { margin-top: 10px; font-size: 11px; color: #676d64; line-height: 1.6; }
.service-story .text-link { display: inline-block; margin-top: 6px; }
.local-coverage { background: #eeeadf; }
.local-coverage .section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 0 8%; }
.local-coverage .eyebrow { grid-column: 1 / -1; }
.local-coverage .section-heading > p:last-child { max-width: 48ch; margin-top: 0; }
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }
.area-grid article { border-top: 3px solid #ad8847; background: #f8f6f0; padding: 28px; }
.area-grid article > span { display: block; text-align: right; color: #9b783c; font-size: 24px; margin-bottom: 12px; }
.area-grid h3 { font-size: 24px; margin-bottom: 12px; }
.area-grid p { font-size: 15px; color: #5e655a; }
.area-grid a { display: inline-block; margin-top: 20px; }
.coverage-call { display: flex; gap: 24px; align-items: center; justify-content: space-between; border-top: 1px solid #c8bfad; margin-top: 35px; padding-top: 30px; }
.coverage-call p { font-size: 14px; }
.coating-guide { background: #f6f3eb; }
.guide-intro { max-width: 70ch; color: #5b6458; margin: 24px 0 34px; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.guide-grid article { padding: clamp(25px, 4vw, 48px); background: #e9e3d6; border-top: 3px solid #ac8741; }
.guide-number { color: #83652e; display: block; margin-bottom: 30px; font-size: 14px; }
.guide-grid h3 { font-size: 29px; }
.guide-grid p { color: #50594f; margin: 18px 0 24px; }
.visit-checklist { display: grid; grid-template-columns: 1fr 1.5fr; gap: 35px; margin-top: 50px; padding-top: 35px; border-top: 1px solid #c8beab; }
.visit-checklist ol { margin: 0; padding-left: 24px; }
.visit-checklist li { padding: 0 0 15px 8px; line-height: 1.6; color: #515a4f; }
.related-services { background: #f8f5ed; }
.related-services > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 35px; }
.related-services a { border-top: 1px solid #a59b86; padding-top: 24px; }
.related-services h3 { font-size: 23px; display: flex; justify-content: space-between; gap: 20px; }
.related-services h3 span { color: #987239; }
.related-services p { color: #62695e; font-size: 14px; margin-top: 12px; }
footer > .footer-contact { display: flex; flex-direction: column; grid-column: auto; gap: 14px; }
.footer-contact > a:first-of-type { font-size: 20px; color: #e6c386; }
@media (max-width: 1100px) {
  header { height: 90px; padding: 0 6%; }
  .menu { display: block; background: none; border: 1px solid #778072; color: #eee; padding: 9px 13px; font-size: 12px; }
  .primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #1b211e; padding: 25px 6%; z-index: 10; align-items: start; gap: 22px; }
  .primary-nav.open { display: flex; flex-direction: column; }
  .breadcrumbs { display: flex; }
  .area-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .hero--inner h1 { font-size: clamp(44px, 10vw, 70px); }
  .service-story, .local-coverage .section-heading, .guide-grid, .visit-checklist { grid-template-columns: 1fr; }
  .local-coverage .section-heading > p:last-child { margin-top: 24px; }
  .service-story img { height: 300px; }
  .area-grid, .related-services > div { grid-template-columns: 1fr; }
  .coverage-call { align-items: flex-start; flex-direction: column; }
  .breadcrumbs { padding: 14px 6%; font-size: 11px; }
  .hero-copy { padding-bottom: 130px; }
}

/* Contact choices share a clear phone number while opening the right phone app. */
.contact-actions { margin: 20px 0; }
.contact-actions p { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.contact-actions > div { display: flex; gap: 12px; flex-wrap: wrap; }
.contact-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 90px; padding: 9px 18px; border: 1px solid currentColor; border-radius: 2px; font-size: 14px; text-decoration: none; }
.contact-actions a:hover { background: #cfaa60; color: #121515; border-color: #cfaa60; }
.hero-call { color: #f0deb9; }
.footer-contact .contact-actions { margin: 0; color: #e6c386; }
.refreshed-gallery figure:first-child { grid-column: 1 / -1; }
.refreshed-gallery figure:first-child .exterior-photo { height: clamp(300px, 44vw, 580px); }
.refreshed-gallery figure:not(:first-child) { grid-column: span 3; }
.hero-broadcast .floor-scene > img { object-position: 68% center; }
.epoxy-process { background: #eeeadf; }
.epoxy-process .section-heading { max-width: 780px; margin: 0 auto 36px; }
.epoxy-process .section-heading > p:last-child { margin-top: 24px; max-width: 65ch; color: #555d55; }
.epoxy-process figure { max-width: 736px; margin: 0 auto; }
.epoxy-process figure > a { display: block; }
.epoxy-process img { display: block; width: 100%; height: auto; box-shadow: 0 16px 36px #181b1820; }
.epoxy-process figcaption { margin-top: 18px; color: #555d55; font-size: 13px; line-height: 1.7; }
.epoxy-process figcaption a { display: inline-block; margin-left: 5px; text-decoration: underline; text-underline-offset: 4px; }
.full-flake-process { max-width: 736px; margin: 45px auto; }
.full-flake-process > a, .full-flake-process img { display: block; }
.full-flake-process img { width: 100%; height: auto; box-shadow: 0 16px 36px #181b1820; }
.full-flake-process figcaption { color: #cbd0c7; font-size: 13px; line-height: 1.7; margin-top: 18px; }
.full-flake-process figcaption a { display: inline-block; color: #e6c386; text-decoration: underline; text-underline-offset: 4px; }
.flake-chart-section { display: block; }
.flake-chart-section .section-heading { max-width: 900px; margin: 0 auto 36px; }
.flake-chart-section .section-heading > p:last-child { max-width: 65ch; margin-top: 24px; }
.flake-chart { max-width: 900px; margin: 0 auto; }
.flake-chart > a, .flake-chart img { display: block; }
.flake-chart img { width: 100%; height: auto; box-shadow: 0 18px 40px #0003; }
.flake-chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; margin-top: 20px; font-size: 13px; line-height: 1.6; }
.flake-chart figcaption a { color: inherit; }
.pana-overview { background: #eeeadf; }
.pana-overview .section-heading { max-width: 840px; margin: 0 auto 35px; }
.pana-overview .section-heading > p:last-child { max-width: 65ch; margin-top: 24px; color: #555d55; }
.pana-overview figure { max-width: 840px; margin: 0 auto; }
.pana-overview figure > a, .pana-overview img { display: block; }
.pana-overview img { width: 100%; height: auto; box-shadow: 0 18px 40px #0002; }
.pana-overview figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; color: #555d55; font-size: 13px; line-height: 1.6; margin-top: 18px; }
.pana-overview-actions { display: flex; align-items: center; justify-content: center; gap: 25px; flex-wrap: wrap; margin: 35px auto 0; }
@media(max-width:760px) {
  .refreshed-gallery figure:first-child, .refreshed-gallery figure:not(:first-child) { grid-column: auto; }
  .hero-broadcast .floor-scene > img { object-position: 60% center; }
  .hero-broadcast .hero-copy { padding-bottom: 150px; }
}
.service-area-page .hero h1 { font-size: clamp(42px, 4.6vw, 72px); }
.coverage-jumps { display: flex; flex-wrap: wrap; gap: 18px 38px; padding: 25px 6%; background: #e8e3d7; border-bottom: 1px solid #ccc4b5; }
.coverage-jumps a { font-size: 14px; font-weight: 700; padding: 8px 0; text-underline-offset: 5px; }
.coverage-city-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0; }
.coverage-city-list li { background: #e8e3d7; border: 1px solid #d3cbbd; padding: 7px 11px; color: #222a25; font-size: 14px; }
.area-grid .coverage-city-list a { margin-top: 0; text-underline-offset: 3px; }
.coverage-nearby { border-top: 3px solid #b28b46; }
.coverage-call h3 { margin-bottom: 8px; }
.coverage-call .actions { margin: 0; flex-shrink: 0; }
.coverage-services { background: #17201c; color: #f3eee4; }
.coverage-services > p:not(.eyebrow) { max-width: 70ch; line-height: 1.8; }
.coverage-services h2 { max-width: 22ch; margin-bottom: 24px; }
.coverage-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 38px 0; }
.coverage-service-grid > a { display: block; padding: 30px; background: #222d26; border: 1px solid #4b5148; text-decoration: none; transition: border-color .2s, background .2s; }
.coverage-service-grid > a:hover { border-color: #d7b36e; background: #2c382e; }
.coverage-service-grid > a:focus-visible { outline: 3px solid #e6c386; outline-offset: 4px; }
.coverage-service-grid span { color: #e6c386; font-size: 13px; letter-spacing: .1em; }
.coverage-service-grid h3 { font-size: 23px; margin: 22px 0 14px; }
.coverage-service-grid p { color: #d3d7cd; font-size: 15px; line-height: 1.8; }
.coverage-option .text-link { color: #efd29b; }
.coverage-visit { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; background: #eeeadf; }
.coverage-visit h2 { margin-bottom: 24px; }
.coverage-visit p { line-height: 1.8; }
.coverage-visit .button { margin-top: 25px; }
.coverage-visit ol { padding-left: 24px; margin: 0; }
.coverage-visit li { padding: 0 0 25px 10px; margin-bottom: 25px; border-bottom: 1px solid #c9c4b8; }
.coverage-visit li::marker { color: #80602d; font-weight: 700; }
.coverage-visit h3 { margin-bottom: 10px; }
@media(max-width:1100px) { .coverage-service-grid { grid-template-columns: repeat(2, 1fr); } .coverage-call { flex-wrap: wrap; gap: 25px; } }
@media(max-width:760px) {
  .service-area-page .hero h1 { font-size: clamp(38px, 9vw, 60px); }
  .coverage-jumps { gap: 8px 20px; }
  .coverage-service-grid, .coverage-visit { grid-template-columns: 1fr; }
  .coverage-visit { gap: 45px; }
  .coverage-service-grid > a { padding: 25px; }
}
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; opacity: 0; }
#send-request { margin: 16px 12px 16px 0; }
.section > .section-cta { display: flex; grid-column: 1 / -1; margin-top: 32px; gap: 0; }
.section-cta > .button { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 100%; margin: 0; border: 0; color: #171c19; background: #cbaa60; }
.section-cta > .button:hover { background: #dfc17c; color: #171c19; }
.section-cta > .button:focus-visible { outline: 3px solid #b18435; outline-offset: 5px; }
@media(max-width:760px) {
  .section-cta > .button { width: 100%; }
  footer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  footer > .footer-contact { grid-column: 1 / -1; min-width: 0; }
  .footer-contact > a { overflow-wrap: anywhere; }
}