/* Service-page editorial content. Kept separate from the homepage and shared heroes. */
body main .service-editorial { padding: 88px 0; background: var(--ivory); }
body main .service-editorial * { min-width: 0; }
body main .service-editorial .service-kicker { color: var(--green); font: 700 11px/1.5 var(--sans); letter-spacing: .17em; text-transform: uppercase; margin: 0 0 17px; }
body main .service-editorial h2 { font-family: var(--serif); font-size: clamp(30px, 3.1vw, 46px); line-height: 1.17; letter-spacing: -.045em; margin: 0 0 23px; }
body main .service-editorial h3 { font: 600 22px/1.3 var(--sans); letter-spacing: -.025em; margin: 0 0 12px; color: var(--green); }
body main .service-editorial p, body main .service-editorial li { font: 400 16px/1.75 var(--sans); color: #536056; }
body main .service-editorial p { margin: 0 0 18px; }
body main .service-editorial p:last-child { margin-bottom: 0; }
body main .service-editorial .service-header { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: end; margin-bottom: 40px; }
body main .service-header h2 { margin-bottom: 0; max-width: 650px; }
body main .service-header > p { max-width: 520px; margin: 0 0 3px; }
body main .service-editorial figure { margin: 0; }
body main .service-editorial figure img { width: 100%; height: 100%; object-fit: cover; }
body main .service-brief { background: #edeFE7; }
body main .service-brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
body main .service-brief-grid article { padding-top: 22px; border-top: 1px solid #bcc7ba; }
body main .service-brief-grid h3 { font-size: 23px; }
body main .service-build { background: var(--green); color: var(--ivory); }
body main .service-build .service-kicker { color: var(--gold); }
body main .service-build h2, body main .service-build h3 { color: var(--ivory); }
body main .service-build p { color: #dce3d7; }
body main .service-build-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
body main .service-build-photo { height: 390px; margin-top: 32px !important; position: relative; }
body main .service-build-photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 35px 22px 20px; background: linear-gradient(transparent, #10271fe8); color: #fff; font: 500 13px/1.6 var(--sans); }
body main .service-build ol { list-style: none; margin: 0; padding: 0; }
body main .service-build li { padding: 23px 0; border-top: 1px solid #ffffff26; }
body main .service-build li:last-child { padding-bottom: 0; }
body main .service-build li h3 { font-size: 23px; margin-bottom: 9px; }
body main .service-build li p { font-size: 15px; line-height: 1.8; }
body main .service-editorial .service-note { padding: 21px 0 0; margin-top: 27px; border-top: 1px solid #ffffff26; font-size: 14px; }
body main .service-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
body main .service-choice-grid figure { aspect-ratio: 1.7; overflow: hidden; }
body main .service-choice-body { padding: 26px 0 0; }
body main .service-choice-body > span { display: block; margin-bottom: 11px; font-size: 11px; color: #65755f; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
body main .service-choice-body h3 { font: 700 29px/1.2 var(--serif); letter-spacing: -.04em; }
body main .service-choice-grid ul { margin: 18px 0 0; padding: 18px 0 0; list-style: none; border-top: 1px solid var(--line); }
body main .service-choice-grid li { padding: 5px 0 5px 21px; position: relative; font-size: 14px; }
body main .service-choice-grid li::before { content: ''; position: absolute; left: 0; top: 16px; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
body main .service-planning { background: #eeeee5; }
body main .service-planning-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 80px; }
body main .service-planning-aside { margin-top: 28px; padding: 25px 27px; border-left: 2px solid var(--gold); background: #f9f8f2; }
body main .service-planning-aside h3 { font-size: 18px; }
body main .service-planning-aside p { font-size: 14px; }
body main .service-planning-list { margin: 0; }
body main .service-planning-list > div { padding: 23px 0; border-top: 1px solid #cbd0c3; display: grid; grid-template-columns: .62fr 1fr; gap: 28px; }
body main .service-planning-list > div:first-child { padding-top: 0; border-top: none; }
body main .service-planning-list dt { font: 600 19px/1.4 var(--sans); color: var(--green); }
body main .service-planning-list dd { margin: 0; font: 400 15px/1.8 var(--sans); color: #536056; }
body main .service-editorial .service-inline-link { display: inline-flex; align-items: center; gap: 20px; color: var(--green); border-bottom: 1px solid #869980; padding: 8px 0; margin-top: 15px; font: 600 14px/1.5 var(--sans); }
body main .service-editorial .service-inline-link:hover { border-color: var(--gold); }
body main .service-material-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
body main .service-material-photo { aspect-ratio: .94; position: relative; }
body main .service-material-photo figcaption { position: absolute; inset: auto 0 0; padding: 30px 22px 22px; background: linear-gradient(transparent,#142d27e6); color: #fff; font-size: 13px; }
body main .service-material-items { display: grid; gap: 21px; margin-top: 29px; }
body main .service-material-items > div { border-top: 1px solid var(--line); padding-top: 20px; }
body main .service-material-items h3 { font-size: 20px; margin-bottom: 7px; }
body main .service-material-items p { font-size: 15px; }
@media (max-width: 1100px) {
  body main .service-editorial { padding: 70px 0; }
  body main .service-build-layout, body main .service-material-layout, body main .service-planning-layout { gap: 40px; }
  body main .service-editorial .service-header { gap: 36px; }
  body main .service-build-photo { height: 340px; }
  body main .service-planning-list > div { grid-template-columns: 1fr; gap: 8px; }
  body main .service-brief-grid { gap: 26px; }
}
@media (max-width: 780px) {
  body main .service-editorial { padding: 56px 0; }
  body main .service-editorial h2 { font-size: 34px; }
  body main .service-editorial .service-header { grid-template-columns: 1fr; gap: 18px; margin-bottom: 30px; }
  body main .service-build-layout, body main .service-material-layout, body main .service-planning-layout { grid-template-columns: 1fr; gap: 34px; }
  body main .service-build-photo { height: auto; aspect-ratio: 1.6; margin-top: 25px !important; }
  body main .service-material-photo { aspect-ratio: 1.4; }
  body main .service-choice-grid { gap: 25px; }
  body main .service-choice-body h3 { font-size: 25px; }
  body main .service-brief-grid { grid-template-columns: 1fr; gap: 25px; }
        body main .service-brief-grid h3 { font-size: 21px; }
  body main .service-planning-list > div { grid-template-columns: .6fr 1fr; gap: 22px; }
}
@media (max-width: 540px) {
  body main .service-choice-grid { grid-template-columns: 1fr; gap: 38px; }
  body main .service-editorial h2 { font-size: 30px; }
    body main .service-build li h3 { font-size: 21px; }
  body main .service-planning-list > div { grid-template-columns: 1fr; gap: 8px; }
  body main .service-choice-grid figure { aspect-ratio: 1.5; }
}

/* Remove the former number gutter on existing wall cards. */
body main .wall-pair-grid article > div { padding: 30px; }
@media (max-width: 540px) { body main .wall-pair-grid article > div { padding: 24px; } }

/* Keep the service index a grid instead of inheriting the home carousel's width. */
body.services-page main .service-page-list .service-grid { width: 100%; padding-right: 0; }
/* The original offset photo margin extended beyond the tablet viewport. */
body main .editorial-section :is(.intro-visual, .coping-details-grid > figure) { margin: 0; }
body main .service-planning-list a,
body main .service-note a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 380px) {
  body main .final-cta h2 { font-size: 32px; }
}

/* Image-led chapters: different compositions for different kinds of information. */
body main .service-photo-brief { background: #f0f1e9; }
body main .service-photo-brief .service-brief-grid { gap: 28px; }
body main .service-photo-brief .service-brief-grid article { padding: 0; border: 0; }
body main .service-photo-brief figure { aspect-ratio: 1.4; margin-bottom: 25px; overflow: hidden; }
body main .service-photo-brief h3 { margin-bottom: 12px; }
body main .service-photo-brief .service-brief-grid p { font-size: 15px; }

body main .service-spread { background: #19352b; color: var(--ivory); }
body main .service-spread .service-kicker { color: var(--gold); }
body main .service-spread h2, body main .service-spread h3 { color: var(--ivory); }
body main .service-spread p { color: #d9e1d6; }
body main .service-photo-spread { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: end; }
body main .service-photo-spread figure img { height: 400px; }
body main .service-photo-spread figure:nth-child(2) img { height: 320px; }
body main .service-photo-spread figcaption { padding-top: 17px; font: 500 11px/1.6 var(--sans); letter-spacing: .07em; color: #d9e1d6; }
body main .service-spread-steps { margin-top: 44px; }
body main .service-spread-steps ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 32px; list-style: none; padding: 0; margin: 0; }
body main .service-spread-steps li { padding-top: 24px; border-top: 1px solid #b6c0ae; }
body main .service-spread-steps li h3 { font-size: 20px; line-height: 1.35; }
body main .service-spread-steps li p { font-size: 15px; line-height: 1.8; }
body main .service-spread .service-spread-steps li,
body main .service-fireside .service-spread-steps li { border-color: #ffffff29; }
body main .service-spread .service-note { max-width: 860px; }

body main .service-material--collage .service-material-layout { grid-template-columns: 1.12fr 1fr; gap: 70px; }
body main .service-material-collage { position: relative; padding: 0 70px 75px 0; }
body main .service-collage-main { height: 530px; position: relative; }
body main .service-collage-main figcaption { position: absolute; inset: 0 0 auto; padding: 24px 26px 55px; background: linear-gradient(#0c271de0,transparent); color: #fff; font-size: 13px; }
body main .service-collage-detail { position: relative; width: 66%; margin: -75px -70px 0 auto !important; border: 8px solid var(--ivory); background: var(--ivory); }
body main .service-collage-detail img { height: 220px !important; }
body main .service-collage-detail figcaption { padding: 12px 5px 0; color: var(--green); font: 500 12px/1.5 var(--sans); }
body main .service-material--reverse { background: #eeeee5; }
body main .service-material--reverse .service-material-layout { grid-template-columns: 1fr 1.12fr; }
body main .service-material--reverse .service-material-collage { order: 2; }
body main .service-material--reverse .service-collage-detail { border-color: #eeeee5; background: #eeeee5; }

body main .service-pool-story { background: #f0f1e9; }
body main .service-pool-image { height: 440px; }
body main .service-pool-image img { object-position: center 62%; }
body main .service-pool-copy { position: relative; width: 53%; margin: -170px 0 0 auto; padding: 36px 0 0 38px; background: #f0f1e9; border-top: 3px solid var(--gold); }
body main .service-pool-story .service-spread-steps ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 60px; }

body main .service-wall-detail { background: #eceee5; }
body main .service-wall-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 65px; align-items: center; }
body main .service-wall-detail-grid > figure { height: 510px; position: relative; }
body main .service-wall-detail-grid figcaption { position: absolute; inset: auto 0 0; padding: 45px 27px 24px; background: linear-gradient(transparent,#163629ef); color: #fff; font-size: 13px; }
body main .service-wall-notes article { padding: 25px 0; border-top: 1px solid #bdc8b8; }
body main .service-wall-notes article:first-child { border-top: 0; padding-top: 0; }
body main .service-wall-notes article:last-child { padding-bottom: 0; }
body main .service-wall-notes p { font-size: 15px; }

body main .service-fireside { background: #19352b; color: var(--ivory); }
body main .service-fireside-lead { display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; background: #2b4739; }
body main .service-fireside-lead > div { padding: 50px 42px; align-self: center; }
body main .service-fireside .service-kicker { color: var(--gold); }
body main .service-fireside h2, body main .service-fireside h3 { color: var(--ivory); }
body main .service-fireside p { color: #d9e1d6; }
body main .service-fireside-lead > figure { position: relative; min-height: 430px; }
body main .service-fireside-lead figure img { position: absolute; inset: 0; }
body main .service-fireside-lead figcaption { position: absolute; inset: auto 0 0; padding: 50px 25px 24px; background: linear-gradient(transparent,#142f24e8); color: #fff; font-size: 13px; }
body main .service-fireside .service-spread-steps ol { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 60px; }

body main .service-planning-photo { position: relative; height: 270px; margin-top: 28px !important; }
body main .service-planning-photo figcaption { position: absolute; inset: auto 0 0; padding: 38px 22px 20px; background: linear-gradient(transparent,#163629ed); color: #fff; font-size: 13px; }
body main .service-planning-photo + .service-planning-aside { margin-top: 0; }

@media (max-width: 1100px) {
  body main .service-spread-steps ol { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body main .service-photo-spread figure img { height: 350px; }
  body main .service-photo-spread figure:nth-child(2) img { height: 290px; }
  body main .service-material--collage .service-material-layout { gap: 40px; }
  body main .service-material-collage { padding-right: 35px; padding-bottom: 25px; }
  body main .service-collage-main { height: 460px; }
  body main .service-collage-detail { width: 80%; margin-right: -35px !important; }
  body main .service-collage-detail img { height: 180px !important; }
  body main .service-wall-detail-grid { gap: 40px; }
  body main .service-wall-detail-grid > figure { height: 470px; }
  body main .service-fireside-lead > div { padding: 35px 30px; }
}
@media (max-width: 780px) {
  body main .service-photo-brief .service-brief-grid { grid-template-columns: 1fr; gap: 36px; }
  body main .service-photo-brief figure { aspect-ratio: 1.8; margin-bottom: 22px; }
  body main .service-photo-spread { gap: 18px; }
  body main .service-photo-spread figure img { height: 270px; }
  body main .service-photo-spread figure:nth-child(2) img { height: 220px; }
  body main .service-photo-spread figcaption { font-size: 10px; letter-spacing: .03em; }
  body main .service-material--collage .service-material-layout,
  body main .service-material--reverse .service-material-layout { grid-template-columns: 1fr; gap: 30px; }
  body main .service-material--reverse .service-material-collage { order: 0; }
  body main .service-material-collage { max-width: 630px; width: 100%; padding-bottom: 0; }
  body main .service-collage-main { height: 450px; }
  body main .service-collage-detail { width: 55%; }
  body main .service-collage-detail img { height: 200px !important; }
  body main .service-pool-image { height: 350px; }
  body main .service-pool-copy { width: 80%; margin-top: -90px; padding: 26px 0 0 25px; }
  body main .service-wall-detail-grid { grid-template-columns: 1fr; gap: 30px; }
  body main .service-wall-detail-grid > figure { height: 400px; }
  body main .service-fireside-lead { grid-template-columns: 1fr; }
  body main .service-fireside-lead > div { padding: 30px 27px; }
  body main .service-fireside-lead > figure { min-height: 340px; }
  body main .service-planning-photo { height: 300px; }
}
@media (max-width: 540px) {
  body main .service-photo-spread { grid-template-columns: 1fr; gap: 25px; }
  body main .service-photo-spread figure img { height: 270px; }
  body main .service-photo-spread figure:nth-child(2) { width: 82%; margin-left: auto; }
  body main .service-photo-spread figure:nth-child(2) img { height: 235px; }
  body main .service-photo-spread figcaption { font-size: 11px; }
  body main .service-spread-steps ol,
  body main .service-pool-story .service-spread-steps ol,
  body main .service-fireside .service-spread-steps ol { grid-template-columns: 1fr; gap: 24px; }
  body main .service-collage-main { height: 370px; }
  body main .service-collage-main figcaption { padding: 20px 18px 45px; }
  body main .service-collage-detail { width: 77%; border-width: 6px; }
  body main .service-collage-detail img { height: 170px !important; }
  body main .service-pool-image { height: 290px; }
  body main .service-pool-copy { width: 92%; margin-top: -50px; padding: 22px 0 0 16px; }
  body main .service-wall-detail-grid > figure { height: 330px; }
  body main .service-fireside-lead > figure { min-height: 300px; }
}

/* Dedicated services: compact chapters and balanced text/photo columns. */
body.service-detail-page main > section:not(.interior-hero),
body:is(.paving-page, .remodeling-page) main > .sub-faq {
  padding-block: clamp(44px, 4.5vw, 68px);
}
body.service-detail-page main > section:not(.interior-hero) h2,
body:is(.paving-page, .remodeling-page) main > .sub-faq h2 {
  max-width: none;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.15;
  text-wrap: balance;
}
body.service-detail-page main .editorial-section :is(.intro-grid, .coping-details-grid, .driveway-intro-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 56px);
}
body.service-detail-page main .editorial-section :is(.intro-copy, .coping-details-grid > div, .driveway-intro-copy) {
  padding: 0;
  max-width: none;
}
body.service-detail-page main .editorial-section :is(.intro-visual, .coping-details-grid > figure, .driveway-intro-visual) {
  height: clamp(380px, 34vw, 490px);
  width: 100%;
  margin: 0;
}
body.service-detail-page main .intro-detail-list { gap: 10px; margin-block: 22px; }
body.service-detail-page main .intro-detail-item { min-height: 0; padding: 13px 16px; }
body.service-detail-page main :is(.service-build-layout, .service-material-layout, .service-wall-detail-grid) {
  gap: clamp(32px, 4vw, 56px);
}
body.service-detail-page main .service-header { gap: 40px; margin-bottom: 30px; }
body.service-detail-page main .service-material-collage { padding: 0 40px 0 0; }
body.service-detail-page main .service-collage-main { height: 420px; }
body.service-detail-page main .service-collage-detail { margin-right: -40px !important; }
body.service-detail-page main .service-collage-detail img { height: 180px !important; }
body.service-detail-page main .service-build-photo { height: 320px; margin-top: 24px !important; }
body.service-detail-page main .service-build li { padding-block: 18px; }
body.service-detail-page main .service-build li:first-child { padding-top: 0; border-top: 0; }
body.service-detail-page main .service-build li:last-child { padding-bottom: 0; }
body.service-detail-page main .service-planning-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
body.service-detail-page main .service-planning-photo { height: 270px; margin-top: 0 !important; }
body.service-detail-page main .service-planning-aside { padding: 20px 24px; }
body.service-detail-page main .service-planning-list > div { grid-template-columns: 1fr; padding-block: 16px; gap: 7px; }
body.service-detail-page main .service-planning-list > div:first-child { padding-top: 0; }
body.service-detail-page main .service-photo-spread { align-items: start; }
body.service-detail-page main .service-photo-spread figure img,
body.service-detail-page main .service-photo-spread figure:nth-child(2) img { height: 320px; }
body.service-detail-page main .service-spread-steps { margin-top: 30px; }
/* Replace the pool image overlap with a complete, evenly filled lead row. */
body.service-detail-page main .service-pool-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 30px 48px;
  align-items: center;
}
body.service-detail-page main .service-pool-image { height: 330px; }
body.service-detail-page main .service-pool-copy { width: auto; margin: 0; padding: 0; border: 0; }
/* Keep the shared FAQ heading visible within NJ Paving's company theme. */
body:is(.paving-page, .remodeling-page) main .sub-faq h2 em {
  background-image: var(--heading-gradient);
}
body:is(.service-detail-page, .paving-page, .remodeling-page) main .sub-faq .faq-layout {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 48px;
}
body:is(.service-detail-page, .paving-page, .remodeling-page) main .sub-faq .questions { gap: 12px; }
body:is(.service-detail-page, .paving-page, .remodeling-page) main .sub-faq .questions summary { min-height: 68px; padding: 17px 22px; font-size: 17px; gap: 16px; }
body:is(.service-detail-page, .paving-page, .remodeling-page) main .sub-faq .questions details p { margin: 0 22px 20px; font-size: 16px; line-height: 1.7; }
body:is(.service-detail-page, .paving-page, .remodeling-page) main .faq-contact { padding: 24px; margin-top: 24px; }

@media (min-width: 821px) {
  body.service-detail-page main .service-planning-layout { align-items: stretch; }
  body.service-detail-page main .service-planning-visual { display: flex; flex-direction: column; }
  body.service-detail-page main .service-planning-photo { flex: 1; min-height: 270px; }
  body.service-detail-page main .service-planning-photo img { position: absolute; inset: 0; }
}

@media (max-width: 1100px) {
  body.service-detail-page main .service-material-collage { padding-right: 28px; }
  body.service-detail-page main .service-collage-detail { margin-right: -28px !important; }
  body.service-detail-page main .service-collage-main { height: 380px; }
  body.service-detail-page main .service-collage-detail img { height: 160px !important; }
  body.service-detail-page main .service-planning-list > div { grid-template-columns: 1fr; gap: 7px; }
}
@media (max-width: 820px) {
  body.service-detail-page main .editorial-section :is(.intro-grid, .coping-details-grid, .driveway-intro-grid),
  body.service-detail-page main :is(.service-build-layout, .service-material-layout, .service-wall-detail-grid, .service-planning-layout) { grid-template-columns: 1fr; gap: 28px; }
  body:is(.service-detail-page, .paving-page, .remodeling-page) main .sub-faq .faq-layout { grid-template-columns: 1fr; gap: 28px; }
  body.service-detail-page main .editorial-section :is(.intro-visual, .coping-details-grid > figure, .driveway-intro-visual) {
    height: auto;
    aspect-ratio: 1.5;
  }
  body.service-detail-page main .service-material--reverse .service-material-collage { order: 0; }
  body.service-detail-page main .service-build-photo { height: auto; aspect-ratio: 1.6; }
  body.service-detail-page main .service-planning-photo { height: auto; aspect-ratio: 1.6; }
  body.service-detail-page main .service-header { grid-template-columns: 1fr; gap: 16px; }
  body.service-detail-page main .service-pool-lead { grid-template-columns: 1fr; gap: 26px; }
  body.service-detail-page main .service-pool-image { height: auto; aspect-ratio: 1.6; }
  body.service-detail-page main .service-photo-spread figure img,
  body.service-detail-page main .service-photo-spread figure:nth-child(2) img { height: 260px; }
  body.service-detail-page main .service-collage-main { height: 350px; }
}
@media (max-width: 540px) {
  body.service-detail-page main .service-photo-spread figure:nth-child(2) { width: 100%; margin: 0; }
  body.service-detail-page main .service-collage-main { height: 300px; }
  body.service-detail-page main .service-collage-detail img { height: 150px !important; }
}

/* Service introductions follow the hero directly, without a secondary menu strip. */
body:is(.services-page, .pavers-page, .subservice-page) main > .interior-hero + section {
  padding-block: 44px;
}
body:is(.services-page, .pavers-page, .subservice-page) main > .interior-hero + section
  :is(.intro-copy, .coping-details-grid > div, .driveway-intro-copy) {
  padding-block: 0;
}
body.services-page main > .interior-hero + .services-intro .intro-grid {
  gap: clamp(32px, 4vw, 56px);
}
body.services-page main > .interior-hero + .services-intro .intro-visual {
  width: 100%;
  height: clamp(360px, 32vw, 460px);
  margin: 0;
}
@media (max-width: 820px) {
  body.services-page main > .interior-hero + .services-intro .intro-visual {
    height: auto;
    aspect-ratio: 1.5;
  }
}
@media (max-width: 600px) {
  body:is(.services-page, .pavers-page, .subservice-page) main > .interior-hero + section {
    padding-block: 36px;
  }
}