/* NJ Paving: black anchors the layout, logo green carries the brand,
   and warm yellow highlights key actions.
   Loaded after shared layouts so brand colors never change their geometry. */
body.sister-company-page.paving-page {
  --paving-yellow: #ffb444;
  --paving-yellow-hover: #ffd078;
  --paving-green: #005b34;
  --paving-deep: #073b25;
  --paving-black: #000;
  --paving-charcoal: #202322;
  --paving-muted: #60625d;
  --paving-cream: #fff8e8;
  --company-planning-photo: url('assets/asphalt-driveway-supporting-v1.webp');
  --company-accent: var(--paving-green);
  --company-highlight: var(--paving-yellow);
  --company-dark: var(--paving-black);
  --company-soft: #faf8f2;
  --company-border: #e1dccf;
  --company-muted: var(--paving-muted);
  --green: var(--paving-green);
  --deep: var(--paving-deep);
  --gold: var(--paving-yellow);
  --ink: var(--paving-charcoal);
  --muted: var(--paving-muted);
  --line: var(--company-border);
  --accent: var(--paving-yellow);
  --accent-deep: var(--paving-green);
  --accent-soft: var(--paving-cream);
  --accent-gradient: linear-gradient(110deg, #ffd078, var(--paving-yellow));
  --heading-accent: var(--paving-green);
  --heading-gradient: none;
  color: var(--paving-charcoal);
}

/* Yellow emphasis on light sections stays legible as a highlighted phrase. */
body.sister-company-page.paving-page main :is(.company-overview, .paving-transformation, .paving-work, .sub-faq) h2 em {
  color: var(--paving-green);
  -webkit-text-fill-color: currentColor;
  background: linear-gradient(transparent 65%, #ffb444a6 65%);
  background-clip: border-box;
  -webkit-background-clip: border-box;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.sister-company-page.paving-page main :is(.company-overview, .paving-transformation, .paving-work, .sub-faq) .eyebrow {
  color: var(--paving-green);
  border-left: 4px solid var(--paving-yellow);
  padding-left: 12px;
}
body.sister-company-page.paving-page main :is(.company-overview, .paving-transformation, .paving-work, .sub-faq) :is(h2, h3) {
  color: var(--paving-black);
}
body.sister-company-page.paving-page main :is(.company-overview, .paving-transformation, .paving-work, .sub-faq) p:not(.eyebrow) {
  color: var(--paving-muted);
}

body.sister-company-page.paving-page .header { background: var(--paving-black); }

/* One yellow primary action throughout NJ Paving, including the shared CTA. */
body.sister-company-page.paving-page :is(.company-button, .nav-phone, .closing-estimate, .faq-contact .button) {
  background: var(--paving-yellow);
  border-color: var(--paving-yellow);
  color: var(--paving-black) !important; /* Shared buttons force white text. */
  box-shadow: 0 8px 20px #16181314;
}
body.sister-company-page.paving-page :is(.company-button, .nav-phone, .closing-estimate, .faq-contact .button):hover {
  background: var(--paving-yellow-hover);
  border-color: var(--paving-yellow-hover);
  color: var(--paving-black) !important;
  box-shadow: 0 10px 24px #16181324;
}
body.sister-company-page.paving-page .nav-phone :is(span, svg) { color: var(--paving-black); }
body.sister-company-page.paving-page :is(a, button, summary):focus-visible { outline-color: var(--paving-yellow); }
body.sister-company-page.paving-page .nav-row nav :is(a:hover, a[aria-current='page']) { color: var(--paving-yellow); border-color: var(--paving-yellow); }
body.sister-company-page.paving-page .nav-row nav .nav-submenu a span { color: #d6d6cf; }
body.sister-company-page.paving-page .nav-location-group .nav-county-link,
body.sister-company-page.paving-page .nav-nested-toggle { color: #ecebe5; }

/* Green anchors the brand; warm yellow provides contrast and emphasis. */
body.sister-company-page.paving-page .company-overview.editorial-section {
  background: linear-gradient(120deg, #faf8f2 40%, #fff2d3);
  border-color: var(--company-border);
}
body.sister-company-page.paving-page .paving-intro-copy .intro-detail-item { background: #fffdf8; border-color: var(--company-border); }
body.sister-company-page.paving-page .paving-intro-copy .intro-detail-item:hover,
body.sister-company-page.paving-page .editorial-section .editorial-photo:hover { border-color: var(--paving-yellow); }
body.sister-company-page.paving-page .paving-intro-copy .intro-detail-icon { background: #005b3414; color: var(--paving-green); }
body.sister-company-page.paving-page .paving-intro-copy .intro-detail-icon::before { background: var(--paving-green); }
body.sister-company-page.paving-page .paving-transformation { background: #fff; }
body.sister-company-page.paving-page .paving-transformation-points li { border-top-color: #ffb44480; }
body.sister-company-page.paving-page .paving-comparison-label--after { background: var(--paving-yellow); color: var(--paving-deep); }
body.sister-company-page.paving-page .paving-comparison-divider { background: var(--paving-yellow); }
body.sister-company-page.paving-page .paving-comparison-handle,
body.sister-company-page.paving-page .paving-comparison:focus-within .paving-comparison-handle { background: var(--paving-yellow); color: var(--paving-deep); border-color: #fff5d6; }
body.sister-company-page.paving-page .paving-comparison:focus-within { outline-color: var(--paving-yellow); }
body.sister-company-page.paving-page .company-planning {
  background-color: var(--paving-black);
  background-image: linear-gradient(90deg, #000000eb, #073b25e0), var(--company-planning-photo);
}
body.sister-company-page.paving-page .company-planning .company-section-heading :is(.eyebrow, em),
body.sister-company-page.paving-page .company-planning .company-step-number { color: var(--paving-yellow); }
body.sister-company-page.paving-page .company-planning .company-planning-steps li { border-top-color: #ffb44480; }
body.sister-company-page.paving-page .company-planning .company-section-heading > p,
body.sister-company-page.paving-page .company-planning .company-planning-steps p { color: #e5e4dc; }
body.sister-company-page.paving-page .paving-work { background: #faf8f2; border-top-color: var(--company-border); }
body.sister-company-page.paving-page .paving-work-grid figure { border-bottom: 3px solid var(--paving-yellow); }
body.sister-company-page.paving-page .paving-work-grid figure::after { background: linear-gradient(transparent, #000000eb); }
body.sister-company-page.paving-page main .paving-work .paving-work-grid figcaption p { color: var(--paving-yellow); }
body.sister-company-page.paving-page main .paving-work-grid h3 { color: #fff; }

/* Lift the gallery frame while the photograph zooms beneath its caption. */
@media (hover: hover) and (pointer: fine) {
  body.sister-company-page.paving-page .paving-work-grid figure {
    transition: transform .3s ease, box-shadow .3s ease;
  }
  body.sister-company-page.paving-page .paving-work-grid img {
    transition: transform .55s cubic-bezier(.2, .65, .3, 1);
  }
  body.sister-company-page.paving-page .paving-work-grid figure:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px #00000026;
  }
  body.sister-company-page.paving-page .paving-work-grid figure:hover img {
    transform: scale(1.035);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.sister-company-page.paving-page .paving-work-grid :is(figure, img) { transition: none; }
  body.sister-company-page.paving-page .paving-work-grid figure:hover,
  body.sister-company-page.paving-page .paving-work-grid figure:hover img { transform: none; }
}

/* Shared FAQ layout, with NJ Paving's colors in every state. */
body.sister-company-page.paving-page .faq-surface {
  background: linear-gradient(120deg, #fff4d8 0%, #fffdf7 52%, #f8f6ee 100%);
  border-color: var(--company-border);
}
body.sister-company-page.paving-page .faq-surface::before { background: linear-gradient(90deg, transparent, var(--paving-yellow), transparent); }
body.sister-company-page.paving-page .faq .questions details { border-color: var(--company-border); background: #fffefa; box-shadow: 0 5px 14px #16181306; }
body.sister-company-page.paving-page .faq .questions details:hover { border-color: var(--paving-yellow); background: #fffcf1; box-shadow: 0 9px 23px #1618130d; }
body.sister-company-page.paving-page .faq .questions details[open] {
  border-color: var(--paving-yellow);
  background: linear-gradient(115deg, #fff1ce, #fffdf7 80%);
  box-shadow: inset 4px 0 var(--paving-yellow), 0 12px 28px #9b762311;
}
body.sister-company-page.paving-page .faq .questions summary { color: var(--paving-black); }
body.sister-company-page.paving-page .faq .questions summary span { color: var(--paving-green); background: #fff0c9; border-color: #e8d49e; }
body.sister-company-page.paving-page .faq .questions details[open] summary span { color: var(--paving-deep); background: var(--paving-yellow); border-color: var(--paving-yellow); }
body.sister-company-page.paving-page .faq .questions summary:focus-visible { outline-color: var(--paving-green); }
body.sister-company-page.paving-page .faq .questions details p { color: var(--paving-muted); border-top-color: #e2d2aa; }
body.sister-company-page.paving-page .faq .questions details p a { color: var(--paving-green); text-decoration-color: var(--paving-yellow); }
body.sister-company-page.paving-page .faq-contact {
  background: linear-gradient(130deg, #075434, #073b25);
  border-color: #36774e;
  border-top-color: var(--paving-yellow);
  box-shadow: 0 14px 30px #1618131c;
}
body.sister-company-page.paving-page .faq-contact > span { color: var(--paving-yellow); }
body.sister-company-page.paving-page .faq-contact > a:not(.button) { color: #fffdf7; }
body.sister-company-page.paving-page .faq-contact > a:not(.button):hover { color: var(--paving-yellow); }

/* Black gives photo sections depth; green ties their edges to the logo. */
body.sister-company-page.paving-page .company-hero::before {
  background: linear-gradient(90deg, #000000eb 0%, #000000c9 30%, #073b2566 56%, #073b2512 78%), linear-gradient(0deg, #00000040, transparent 55%);
}
body.sister-company-page.paving-page .company-hero-copy > p:not(.eyebrow),
body.sister-company-page.paving-page .paving-contact .closing-description { color: #e8e6df; }
body.sister-company-page.paving-page .paving-contact::after { background: linear-gradient(180deg, #073b25c9, #05291acc 55%, #000000eb); }
body.sister-company-page.paving-page .paving-contact :is(.closing-badge, h2 em) { color: var(--paving-yellow); }
body.sister-company-page.paving-page .paving-contact .closing-call { border-color: #ffb44480; }
body.sister-company-page.paving-page .paving-contact .closing-call:hover { background: #ffb44418; border-color: var(--paving-yellow); }
body.sister-company-page.paving-page .paving-contact .closing-assurance { color: #d6d6cf; }
body.sister-company-page.paving-page .paving-intro-photo figcaption { background: #073b25ad; }
body.sister-company-page.paving-page .company-footer { background: var(--paving-black); padding-top: 0; }
body.sister-company-page.paving-page .footer-parent-site { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: #ceddce; }
body.sister-company-page.paving-page .footer-parent-site a { text-decoration: underline; text-underline-offset: 3px; }
body.sister-company-page.paving-page .company-footer :is(.footer-list a, .footer-area-groups a, .footer-parent-site a):hover { color: var(--paving-yellow); }
body.sister-company-page.paving-page .company-footer::before { background: linear-gradient(90deg, transparent, var(--paving-yellow), transparent); }
body.sister-company-page.paving-page .company-footer-main p:not(.company-footer-name),
body.sister-company-page.paving-page .footer-sisters-heading p,
body.sister-company-page.paving-page .footer-sister-copy > span,
body.sister-company-page.paving-page .footer-bottom { color: #ceddce; }
body.sister-company-page.paving-page .footer-sister-copy small { color: var(--paving-yellow); }
body.sister-company-page.paving-page .footer-sister-link:is(:hover, :focus-visible) { border-color: var(--paving-yellow); }
body.sister-company-page.paving-page .footer-bottom::before { background: var(--paving-yellow); }
body.sister-company-page.paving-page .footer-bottom > a:last-child { color: #e8e6df; border-color: #ffffff30; background: #ffffff06; }
body.sister-company-page.paving-page .footer-bottom > a:last-child:hover { color: var(--paving-yellow); border-color: var(--paving-yellow); background: #ffb44412; }
body.sister-company-page.paving-page .footer-legal-links a { color: #ceddce; }
body.sister-company-page.paving-page .footer-legal-links a:hover { color: var(--paving-yellow); border-color: var(--paving-yellow); }

@media (max-width: 999px) {
  body.sister-company-page.paving-page .company-hero::before { background: linear-gradient(90deg, #000000e8, #073b259e 62%, #073b2552); }
}
@media (max-width: 600px) {
  body.sister-company-page.paving-page .company-hero::before { background: linear-gradient(180deg, #000000ac, #05291acf 52%, #073b25a6); }
}