/* ABBA: authentic black logo, observed website action blue #2C618C. */
:root{--fs-h1:45px;--fs-h2:30px;--fs-h3:24px;--body-fs:17px;--fs-body:17px;--shell-y:51px;--border:#D6D6D2;--radius:3px;--radius-lg:4px;--radius-card:3px;--radius-chip:3px;--abba-secondary:#171717;--abba-on-secondary:#FFFFFF;--focus-ring:#171717;--abba-focus-secondary:#333333}

/* Each pair swaps its two opaque fills together on hover or keyboard focus. */
.band[data-ground="dark"]{--abba-secondary:#FFFFFF;--abba-on-secondary:#171717;--focus-ring:#FFFFFF;--abba-focus-secondary:#E1E9F0}
.contact-panel,.nav--light{--abba-secondary:#171717;--abba-on-secondary:#FFFFFF;--focus-ring:#171717;--abba-focus-secondary:#333333}
.band[data-band]{--abba-primary:#2C618C}
.band--hero[data-band]{--abba-primary:#3677A8}
.band[data-band] .btn.btn--primary{background:var(--abba-primary);color:#FFFFFF;border-color:var(--abba-primary)}
.band[data-band] .btn:is(.btn--secondary,.btn--ghost){background:var(--abba-secondary);color:var(--abba-on-secondary);border-color:var(--abba-secondary)}
.band[data-band] :is(.ctapair,.nav__actions):has(.btn:is(:hover,:focus-visible,:active)) .btn.btn--primary,
.band[data-band] .btn.btn--primary:is(:hover,:focus-visible,:active){background:var(--abba-secondary);color:var(--abba-on-secondary);border-color:var(--abba-secondary)}
.band[data-band] :is(.ctapair,.nav__actions):has(.btn:is(:hover,:focus-visible,:active)) .btn:is(.btn--secondary,.btn--ghost),
.band[data-band] .btn:is(.btn--secondary,.btn--ghost):is(:hover,:focus-visible,:active){background:var(--abba-primary);color:#FFFFFF;border-color:var(--abba-primary)}
.band--mobile-cta-bar .callbar__book{background:#2C618C;color:#FFFFFF}
.band--mobile-cta-bar .callbar__call{background:#171717;color:#FFFFFF}
.band--mobile-cta-bar:has(a:hover,a:focus-visible,a:active) .callbar__book{background:#171717;color:#FFFFFF}
.band--mobile-cta-bar:has(a:hover,a:focus-visible,a:active) .callbar__call{background:#2C618C;color:#FFFFFF}
/* Avoid intermediate contrast loss while unlike foreground/fill colours swap. */
.band[data-band] .btn,.callbar__book,.callbar__call{transition-property:transform,box-shadow}
.btn:hover,.callbar__book:hover,.callbar__call:hover{text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
.band--mobile-cta-bar a:focus-visible{outline-color:#FFFFFF;outline-offset:-10px}

.nav__logo img{max-width:200px;object-fit:contain}
.foot__logo img{background:#FFFFFF;padding:12px;width:240px;height:auto;max-height:140px;object-fit:contain}
.hero__sub{position:relative;display:inline-block;width:fit-content;background:#2C618C;color:#FFFFFF;padding:10px 24px 10px 38px;font-weight:700}
.hero__sub::before{content:"";position:absolute;left:10px;top:8px;bottom:8px;width:16px;background:repeating-linear-gradient(0deg,#FFFFFF 0 3px,transparent 3px 7px);transform:skewY(-12deg)}
.band--hero .hero__title{font-size:var(--fs-h1);line-height:1.08;text-shadow:2px 3px 0 rgba(0,0,0,.55);letter-spacing:normal}

/* Explicit icon boxes prevent viewBox-only SVGs from taking the column width. */
.why__icon{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:50%;background:#2C618C;color:#FFFFFF;margin-bottom:7px}
.why__icon svg{display:block;width:25px;height:25px;flex:0 0 25px}
.split--why .split__img img{object-position:50% 48%}
.review-card__meta > svg{display:block;width:28px;height:28px;flex:0 0 28px}

/* Compact author/stars header and white quote body, as in the references. */
.review-card.review-card--header{padding:0;overflow:hidden}
.review-card--header .review-card__meta{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;background:#2C618C;color:#FFFFFF;padding:20px 22px 8px}
.review-card--header .review-card__author{min-width:0;font-size:20px;line-height:1.2}
.review-card--header .review-card__g{background:#FFFFFF;border:4px solid #FFFFFF;border-radius:50%;box-sizing:content-box}
.review-card--header .review-card__rate{background:#2C618C;color:#FFFFFF;padding:0 22px 18px}
.review-card--header .review-card__stars{margin-bottom:4px}
.review-card--header .review-card__when{color:#FFFFFF}
.review-card--header .review-card__text{padding:22px;margin:0}
.rev__quote{white-space:pre-wrap}
.chip{border:1px solid #D6D6D2;border-bottom:3px solid #2C618C}

/* Cover the bottom raster edge with the next band's own paint. */
.divider{margin-block:-2px}
.divider svg{transform:translateY(1px)}

@media(min-width:768px){:root{--fs-h1:56px;--fs-h2:42px;--fs-h3:25px;--shell-y:68px}}
@media(min-width:1025px){:root{--fs-h1:65px;--fs-h2:44px;--fs-h3:26px}.nav__logo img{max-width:220px}}

/* The engine's actual desktop row opens at 1180px. Short category labels,
   both label selectors and a bounded gap keep the complete row inside it. */
@media(min-width:1180px){
 .nav--light .nav__row{gap:14px}
 .nav--light .nav__links{gap:14px}
 .nav--light .nav__link,.nav--light .nav__dropdown-toggle{font-size:14px}
 .nav--light .nav__actions{gap:10px;margin-left:0}
 .nav--light .nav__actions .btn{font-size:15px;padding-inline:13px}
}
@media(min-width:1180px) and (max-width:1279px){
 .nav--light .nav__row{gap:10px;padding-inline:30px}
 .nav--light .nav__links{gap:10px}
 .nav--light .nav__logo img{max-width:180px}
 .nav--light .nav__actions .btn{font-size:14px;padding-inline:12px}
}
@media(max-width:1179px){
 .nav--light .nav__links{--abba-secondary:#FFFFFF;--abba-on-secondary:#171717;--focus-ring:#FFFFFF;--abba-focus-secondary:#E1E9F0}
}

/* ABBA's one device family: the monochrome flag's parallel stripes and the
   open A's cut corner. The real logo stays unmodified. The call strip remains
   square and full width. Focus is drawn inside the cut, so it cannot be clipped. */
.btn,.svc__more,.hero__sub,.chip,.split--why .split__img{
 border-radius:0;
 clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.btn:focus-visible,.svc__more:focus-visible{outline:3px solid currentColor;outline-offset:-10px;text-decoration:underline;text-underline-offset:4px}
.split--why .split__img{border:6px solid #2C618C;box-shadow:8px 8px 0 #171717}

/* The existing engine seam is a real change of band ground, not a spacer.
   Three parallel stripes echo the flag; its diagonal follows the open A.
   Existing SVG supplies the next band's solid paint and keeps the edge flush. */
.divider.divider--slope{position:relative;isolation:isolate}
.divider.divider--slope::before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(0deg,#2C618C 0 8px,#FFFFFF 8px 12px,#171717 12px 16px);
 clip-path:polygon(0 58%,100% 0,100% 100%,0 100%);
}
.divider.divider--slope svg{position:relative;z-index:1}

/* Same flag rhythm at 6% strength in precisely two dark band types. The
   texture is decoration behind content; it introduces no third brand colour. */
.band--form-about,.band--reviews{isolation:isolate}
.band--form-about::before,.band--reviews::before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
 background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 3px,transparent 3px 24px);
}
.band--form-about>.shell,.band--reviews>.shell{position:relative;z-index:1}

/* Anchor the .70 solid wash directly above the photograph in the media
   stacking context. A client-scoped token makes the painted layer explicit;
   the former separate band pseudo-element is disabled to avoid double tint. */
.band--hero.hero--full{padding-block:44px;min-height:var(--hero-min-h);isolation:isolate;--abba-hero-wash:.70}
.band--hero.hero--full:not([data-hero-mode="text-only"])::after{content:none}
.hero--full .hero__media{isolation:isolate;z-index:0}
.hero--full .hero__media::after{content:"";position:absolute;inset:0;z-index:1;background:#171717;opacity:var(--abba-hero-wash);pointer-events:none}
.hero--full .hero__media img{object-position:50% 40%}
.hero--full .hero__inner{position:relative;z-index:2}
.hero--full .hero__col{max-width:980px;margin-inline:auto;text-align:center}
.hero--full .rbadges,.hero--full .ctapair{justify-content:center}
.hero--full .hero__sub{margin-inline:auto}
.hero--full .hero__count{color:#FFFFFF}
.hero--full .crumbs{font-size:12px;text-align:center;margin-bottom:16px;color:#D6D6D2}
.hero--full .crumbs ol{justify-content:center}
.hero--full .ctapair{width:fit-content;max-width:100%;margin-inline:auto;padding:0;background:transparent;border-radius:0}
/* A lighter derivative of the sourced blue retains white-text AA and 1.3:1
   fill separation even over the brightest possible pixel under a .70 wash. */

/* Text-only interiors use the logo's flag rhythm at eight percent and the
   same skewed seam as the photograph heroes. Content determines extra height. */
.band--hero.hero--full[data-hero-mode="text-only"]{min-height:440px;padding-block:40px 58px}
.band--hero.hero--full[data-hero-mode="text-only"]::before{content:"";position:absolute;inset:-30% 0;z-index:0;opacity:.08;background:repeating-linear-gradient(0deg,#FFFFFF 0 16px,transparent 16px 32px);transform:skewY(-14deg);pointer-events:none}
.band--hero.hero--full[data-hero-mode="text-only"]::after{content:"";position:absolute;inset:auto 0 0;height:32px;z-index:1;opacity:1;background:repeating-linear-gradient(0deg,#2C618C 0 8px,#FFFFFF 8px 12px,#171717 12px 16px);clip-path:polygon(0 70%,100% 0,100% 100%,0 100%);pointer-events:none}
/* Keep the Google artwork and its sourced count on one shared baseline. */
.hero__col .rbadges{display:inline-flex;vertical-align:middle;width:auto;margin:0 12px 20px 0}
.hero__col .rbadges__item{flex:0 0 auto;width:134px}
.hero__col .hero__count{display:inline-block;vertical-align:middle;margin:0 0 20px;font-size:12px}
.hero__title{clear:both}

/* All focus fills contrast with their actual local card/band. The inset ring
   is well inside the clipped shape, away from the rim and fill sample zone. */
.cards .svc .svc__body .svc__more:is(:focus,:focus-visible){background:#333333;color:#FFFFFF}
.btn:is(:focus,:focus-visible),.svc__more:is(:focus,:focus-visible){outline:3px solid currentColor;outline-offset:-10px;text-decoration:underline;text-underline-offset:4px}
/* The secondary actions remain ordinary links at every viewport. */
.band__text-link{display:inline-flex;align-items:center;min-height:44px;font-family:var(--font-display);font-size:16px;font-weight:700;color:#2C618C;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.band[data-ground="dark"] .band__text-link{color:#C1D9EC}
.band__text-link:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* No artificial empty photo wells: numbered editorial cards make the real
   service groups clear and keep the single-use photo policy intact. */
body[data-page="index.html"] [data-band="services"] .cards{counter-reset:service}
body[data-page="index.html"] [data-band="services"] .svc{counter-increment:service;border-top:5px solid #2C618C;border-radius:0}
body[data-page="index.html"] [data-band="services"] .svc__body{padding:26px;position:relative}
body[data-page="index.html"] [data-band="services"] .svc__body::before{content:"0" counter(service);font:800 46px/1 var(--font-display);color:#2C618C;margin-bottom:22px}
body[data-page="index.html"] [data-band="services"] .svc__tag{border-radius:0;font-size:12px;letter-spacing:.04em}
body[data-page="index.html"] [data-band="services"] .svc__title{max-width:18ch}
body[data-page="index.html"] [data-band="services"] .svc__text{font-size:16px;line-height:1.65;margin-bottom:4px}
.review-slider,.service-slider{overflow:hidden}
/* The service slider is a real grid at all sizes; no hidden fourth action. */
.service-slider--phone .service-slider__controls{display:none}
.service-slider--phone .cards--phone-carousel{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;padding:0}

.strip__row{align-items:stretch;gap:16px}
.strip__item{padding:18px 14px;background:#FFFFFF;border-bottom:3px solid #2C618C}
.strip__item[data-claim="since"]{order:-1}
.strip__text strong{line-height:1.4}
.strip__text span{margin-top:4px}
.contact-panel{gap:18px}
.contact-panel .contact-panel__lede{font-size:20px;line-height:1.45;font-weight:700;color:#171717}
.contact-panel .contact-panel__row{padding:0;line-height:1.6}
.contact-panel .contact-panel__info{border-top:1px solid #D6D6D2;padding-top:14px}
.split--panel .split__form{align-self:stretch;display:flex;align-items:center}
.split--panel .contact-panel{width:100%}

/* Full verbatim reviews, with a balanced two-by-two archive. */
.review-card.review-card--header .review-card__text,
.revs--carousel .review-card .review-card__text{display:block;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible;white-space:pre-wrap;max-height:none}
body[data-page="reviews.html"] .revs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
/* A dot field suggests coverage without fabricating a geographic map. */
[data-band="areas"]{background-image:radial-gradient(rgba(44,97,140,.08) 1.5px,transparent 1.5px);background-size:14px 14px}
[data-band="areas"] .chips .chip{background:#FFFFFF;padding:16px;min-width:0}
.chip--svc{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.chip__city{display:flex;gap:8px;align-items:flex-start;font-weight:700;line-height:1.35}
.chip__svc{display:flex;flex-wrap:wrap;gap:0 10px;font-size:13px;line-height:1.5}
.chip__svc a{color:#2C618C;text-decoration:underline;min-height:30px;display:inline-flex;align-items:center}
.chip__svc a:focus-visible{outline-offset:1px}
/* The About portrait gets its own real frame, never a background cut-out. */
[data-band="origin-story"] .split{align-items:center;grid-template-columns:1.2fr .8fr}
[data-band="origin-story"] .split__img{border:6px solid #2C618C;box-shadow:8px 8px 0 #171717;max-width:400px;justify-self:center}
[data-band="origin-story"] .split__img img{display:block;width:100%;height:auto;max-height:480px;object-fit:cover;object-position:50% 25%}
[data-band="team"] .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
[data-band="team"] .edu__block{padding:28px;border-top:4px solid #2C618C;background:#FFFFFF}
[data-band="team"] .edu__body{margin-bottom:0}
.coverage-facts{grid-column:1/-1;margin-top:20px;border-top:1px solid #D6D6D2;padding-top:24px}
.coverage-facts>ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.coverage-facts__item{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.6}
.coverage-facts__item svg{width:26px;height:26px;flex:0 0 26px;color:#2C618C}
.foot__col--brand{display:flex;flex-direction:column}
.foot__col--brand>.foot__blurb{order:2;border-top:1px solid rgba(255,255,255,.2);padding-top:16px;margin-top:8px;font-size:13px;line-height:1.65}
.map{min-height:320px}
.map iframe{min-height:320px}

@media(max-width:767px){
 .band--hero.hero--full{min-height:calc(100svh - var(--strip-h) - var(--header-h));padding-block:30px}
 .band--hero.hero--full[data-hero-mode="text-only"]{min-height:560px;padding-block:28px 48px}
 .hero--full .hero__title{font-size:36px;line-height:1.08;margin-top:12px;margin-bottom:20px;max-width:none}
 .hero--full .hero__sub{font-size:14px;line-height:1.5;margin-bottom:20px}
 .hero--full .ctapair{width:100%;gap:16px;padding:0}
 .hero--full .ctapair .btn{padding-inline:16px}
 .hero__col .rbadges{margin-right:10px;margin-bottom:12px}
 .hero__col .rbadges__item{width:112px}
 .hero__col .hero__count{font-size:11px;margin-bottom:12px}
 .callbar__book,.callbar__call{font-size:14px}
 .service-slider--phone .cards--phone-carousel{grid-template-columns:minmax(0,1fr);gap:18px}
 body[data-page="index.html"] [data-band="services"] .svc__body{padding:22px}
 body[data-page="index.html"] [data-band="services"] .svc__body::before{font-size:34px;margin-bottom:14px}
 .strip__row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .strip__item{display:block;padding:14px 10px}
 .strip__icon{margin-bottom:8px}
 .strip__text strong{font-size:13px}
 .strip__text span{font-size:12px;overflow-wrap:anywhere}
 [data-band="areas"] .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 [data-band="areas"] .chips .chip{padding:14px 10px;gap:8px;clip-path:none}
 .chip__city{font-size:14px;gap:5px}
 .chip__city svg{width:14px;height:18px;flex-basis:14px}
 .chip__svc{font-size:12px;gap:0 8px}
 .chip__svc a{min-height:32px}
 [data-band="origin-story"] .split{grid-template-columns:minmax(0,1fr);gap:30px}
 [data-band="origin-story"] .split__img{max-width:300px}
 [data-band="team"] .cards,.coverage-facts>ul,body[data-page="reviews.html"] .revs{grid-template-columns:minmax(0,1fr)}
 .band__links{gap:4px 20px}
 .band__text-link{font-size:15px}

 /* The fixed accessibility control occupies x=24..68 at every scroll stop.
    Keep link words beyond it without changing the shell, masthead or widget.
    Preserve the email's native <wbr> boundaries instead of breaking words. */
 .contact-panel .contact-panel__row{padding-left:26px;overflow-wrap:normal;word-break:normal}
 /* Retain compact town headings; inset just the linked service row.
    24px shell + 1px border + 10px card + 38px inset = 73px clear edge. */
 .chip__svc{align-self:stretch;padding-left:38px}
 /* One centred companion link per line leaves room on both sides. */
 .band__links{flex-direction:column;gap:4px}
 .band__text-link{width:100%;justify-content:center;padding-inline:48px;text-align:center}
 .edu .svc__more{display:flex;width:100%;justify-content:center;padding-inline:48px;text-align:center;white-space:normal}
}

.contact-panel__info{display:flex;align-items:flex-start;gap:12px;margin:0;font-size:15px;line-height:1.6}
.contact-panel__info>svg{width:20px;height:20px;flex:0 0 20px;margin-top:2px;color:#2C618C}
.coverage-facts>ul{list-style:none;margin:0;padding:0}
/* The engine preserves an excerpt's remainder for assistive technology.
   Here the whole original quote is also visible, without a line clamp. */
.review-card__text>.visually-hidden{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:inherit;border:0}
.revs--carousel{align-items:start}
.foot__maps--top .map__open{min-height:320px}

/* Round 5: page-owned crops, preserving the original photographs. The top
   crop and zoom remove foreground clutter rather than darkening it further. */
body[data-page="index.html"] .band--hero{--hero-focus:78% 0%;--hero-phone-focus:82% 0%;--hero-zoom:1.35;--hero-zoom-origin:78% 0%}
body[data-page="roofing-galloway-nj.html"] .band--hero{--hero-focus:50% 75%;--hero-phone-focus:52% 75%;--hero-zoom:1;--hero-zoom-origin:50% 75%}
.hero--full .hero__media{overflow:hidden}
.hero--full .hero__media img{object-position:var(--hero-focus);transform:scale(var(--hero-zoom));transform-origin:var(--hero-zoom-origin)}

/* Round 6: the same blue numeral plate and flag-stripe mark on every card. */
body[data-page="index.html"] [data-band="services"] .svc__body::before{display:flex;align-items:center;min-height:180px;padding:24px 30px 24px 80px;margin-bottom:26px;font-size:88px;line-height:1;color:#FFFFFF;background:#2C618C;clip-path:polygon(0 0,100% 0,100% calc(100% - 28px),calc(100% - 28px) 100%,0 100%)}
body[data-page="index.html"] [data-band="services"] .svc__body::after{content:"";position:absolute;left:48px;top:74px;width:32px;height:72px;background:repeating-linear-gradient(0deg,#FFFFFF 0 5px,transparent 5px 11px);transform:skewY(-12deg);pointer-events:none}

/* The former portrait crop becomes four substantial written commitments. */
body[data-page="index.html"] .split--why{display:block}
body[data-page="index.html"] .split--why .split__prose{width:100%;max-width:none}
body[data-page="index.html"] .split--why .why{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:commitment}
body[data-page="index.html"] .split--why .why__item{counter-increment:commitment;padding:26px 22px;background:#F3F3F1;border-top:5px solid #2C618C;position:relative}
body[data-page="index.html"] .split--why .why__item::before{content:"0" counter(commitment);position:absolute;top:24px;right:20px;font:800 28px/1 var(--font-display);color:#2C618C}
body[data-page="index.html"] .split--why .why__head{display:block;margin-block:16px 10px;font-size:23px;line-height:1.25}
.split--panel .split__form{align-items:flex-start;align-self:start}
.contact-panel__call{font-size:clamp(25px,3vw,38px);line-height:1.2}

/* Each service's sourced process is a full-width designed panel. Portrait
   roofing evidence lives in a real split, with the roof in the upper crop. */
body[data-page$="-galloway-nj.html"] [data-band="edu"] .edu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));columns:auto;max-width:none;gap:28px}
body[data-page$="-galloway-nj.html"] .edu__block{padding:28px;background:#F3F3F1;border-top:4px solid #2C618C}
body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img){display:grid;grid-template-columns:1fr 1fr;column-gap:42px;grid-column:1/-1;align-items:center;background:#FFFFFF;padding:0;border-top:0}
body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img) .edu__img{grid-column:1;grid-row:1/4;border:6px solid #2C618C;box-shadow:8px 8px 0 #171717;margin:0;overflow:hidden}
body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img) .edu__img img{width:100%;height:400px;object-fit:cover;object-position:50% 12%;display:block}
body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__head,
body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__body{grid-column:2}
body[data-page$="-galloway-nj.html"] .edu__block:last-child{grid-column:1/-1;background:#171717;color:#FFFFFF;padding:40px 32px;border-top:8px solid #2C618C;background-image:repeating-linear-gradient(0deg,transparent 0 23px,rgba(255,255,255,.05) 23px 26px)}
body[data-page$="-galloway-nj.html"] .edu__block:last-child>.edu__head{color:#FFFFFF;font-size:30px;margin-bottom:28px}
body[data-page$="-galloway-nj.html"] .edu__block:last-child .why{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:process;margin:0}
body[data-page$="-galloway-nj.html"] .edu__block:last-child .why__item{display:flex;flex-direction:column;counter-increment:process;margin:0;padding:22px 18px;background:#FFFFFF;color:#171717;border-bottom:5px solid #2C618C}
body[data-page$="-galloway-nj.html"] .edu__block:last-child .why__item::before{content:"0" counter(process);font:800 42px/1 var(--font-display);color:#2C618C;margin-bottom:18px}
body[data-page$="-galloway-nj.html"] .edu__block:last-child .why__head{font-size:19px;line-height:1.3;margin-bottom:12px}
body[data-page$="-galloway-nj.html"] .edu__block:last-child .why__body{font-size:15px;line-height:1.65;color:#171717}
body[data-page="roofing-galloway-nj.html"] .edu__block:last-child .why{grid-template-columns:repeat(3,minmax(0,1fr))}
body:is([data-page="home-additions-galloway-nj.html"],[data-page="custom-homes-galloway-nj.html"],[data-page="structural-foundations-galloway-nj.html"],[data-page="concrete-galloway-nj.html"]) .edu__block:last-child{background-color:#2C618C;border-top-color:#171717}
.coverage-facts__item{background:#F3F3F1;padding:22px;border-left:5px solid #2C618C}

/* The original van photograph stays intact, in the same blue/black frame as
   the body photos. County groups give every town an equal-width full row. */
[data-band="areas"]>.shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:36px 48px;align-items:center}
[data-band="areas"]>.shell>.areas__van{grid-column:2;grid-row:1;display:block;position:static;width:100%;max-width:420px;height:auto;margin:0;transform:none;filter:none;border:6px solid #2C618C;box-shadow:8px 8px 0 #171717}
[data-band="areas"]>.shell>.band__head{grid-column:1;grid-row:1;margin:0;text-align:left}
[data-band="areas"] .band__title,[data-band="areas"] .band__head .lede{text-align:left;margin-inline:0}
[data-band="areas"] .band__title::after{margin-left:0}
[data-band="areas"]>.shell>.reveal:not(.band__head),[data-band="areas"]>.shell>.band__foot{grid-column:1/-1}
.areas__counties{display:grid;gap:28px}
.areas__county-name{margin:0 0 16px;font-size:24px;line-height:1.3}
[data-band="areas"] .areas__county .chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;grid-auto-rows:1fr}
[data-band="areas"] .areas__county .chips .chip{grid-column:auto;padding:16px 12px;gap:8px;justify-content:space-between}
.chip__svc{flex-wrap:nowrap;gap:0 10px;white-space:nowrap;margin-top:auto}
/* A narrower photo gives the roofing text a matched split; the remaining
   three education tiles each occupy one complete column beneath it. */
body[data-page="roofing-galloway-nj.html"] [data-band="edu"] .edu{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img){grid-template-columns:minmax(0,480px) minmax(0,1fr);grid-template-rows:auto auto auto;align-items:start;margin-bottom:8px}
body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img) .edu__img{grid-row:1/4}
body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img) .edu__img img{height:auto;aspect-ratio:4/3}
body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__head{align-self:end;margin:0 0 18px}
body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__body{align-self:start;margin:0}
/* The warranty follows its credential tiles with the same paragraph rhythm. */
body[data-page="about.html"] [data-claim="work_5"]{margin-top:28px;max-width:70ch;padding-left:24px;border-left:4px solid #2C618C}

@media(min-width:768px) and (max-width:1100px){
 body[data-page="index.html"] .split--why .why{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-page$="-galloway-nj.html"] .edu__block:last-child .why{grid-template-columns:minmax(0,1fr)}
 body[data-page$="-galloway-nj.html"] [data-band="edu"] .edu__block:last-child .why__item{grid-column:auto}
}
@media(max-width:767px){
 .hero--full .hero__media img{object-position:var(--hero-phone-focus)}
 body[data-page="index.html"] .band--hero{--hero-zoom:2.1;--hero-zoom-origin:82% 0%}
 body[data-page="roofing-galloway-nj.html"] .band--hero{--hero-zoom:1.45}
 body[data-page="index.html"] .split--why .why{grid-template-columns:minmax(0,1fr);gap:14px}
 body[data-page="index.html"] .split--why .why__item{padding:22px}
 body[data-page$="-galloway-nj.html"] .edu__block{padding:22px}
 body[data-page$="-galloway-nj.html"] [data-band="edu"] .edu{grid-template-columns:minmax(0,1fr)}
 body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img){grid-template-columns:minmax(0,1fr);gap:24px}
 body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img) .edu__img{grid-column:1;grid-row:auto;margin:0 8px 8px 0}
 body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img) .edu__img img{height:300px}
 body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__head,
 body[data-page$="-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__body{grid-column:1;margin:0}
 body[data-page$="-galloway-nj.html"] [data-band="edu"] .edu__block:last-child{padding:28px 18px}
 body[data-page$="-galloway-nj.html"] [data-band="edu"] .edu__block:last-child>.edu__head{font-size:25px}
 body[data-page$="-galloway-nj.html"] [data-band="edu"] .edu__block:last-child .why{grid-template-columns:minmax(0,1fr);gap:12px}
 body[data-page$="-galloway-nj.html"] [data-band="edu"] .edu__block:last-child .why__item{grid-column:auto;display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;padding:18px 14px}
 body[data-page$="-galloway-nj.html"] .edu__block:last-child .why__item::before{grid-column:1;grid-row:1/3;font-size:30px;margin:0}
 body[data-page$="-galloway-nj.html"] .edu__block:last-child .why__head,
 body[data-page$="-galloway-nj.html"] .edu__block:last-child .why__body{grid-column:2}
 body[data-page$="-galloway-nj.html"] .edu__block:last-child .why__head{margin-bottom:7px}
 /* County grids share the shell edge; inner text clears the 12px launcher. */
 [data-band="areas"] .chips{margin-left:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 [data-band="areas"] .chips .chip{grid-column:auto;padding:10px 6px;gap:4px}
 [data-band="areas"] .chips .chip:last-child{grid-column:1/-1}
 .chip__city{font-size:13px;min-height:36px;gap:4px}
 .chip__city svg{display:none}
 .chip__svc{padding-left:0;font-size:12px;gap:0 7px;align-self:stretch}
 .chip__svc a{min-height:32px;white-space:nowrap}
 .foot__col:has(.foot__links){padding-left:0}
 .foot__col .foot__links{padding-left:0;margin-left:0}
}

/* Shared county grids at smaller widths and a shared process stack. */
@media(min-width:768px) and (max-width:1100px){
 [data-band="areas"] .areas__county .chips{grid-template-columns:repeat(3,minmax(0,1fr))}
 body[data-page="roofing-galloway-nj.html"] [data-band="edu"] .edu__block:last-child .why{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:767px){
 body[data-page="index.html"] [data-band="services"] .svc__body::before{min-height:130px;padding:20px 24px 20px 72px;font-size:64px;margin-bottom:22px}
 body[data-page="index.html"] [data-band="services"] .svc__body::after{left:42px;top:54px;width:28px;height:64px}
 [data-band="areas"]>.shell{grid-template-columns:minmax(0,1fr);gap:28px}
 [data-band="areas"]>.shell>.band__head{grid-column:1;grid-row:1}
 [data-band="areas"]>.shell>.areas__van{grid-column:1;grid-row:2;width:calc(100% - 8px);justify-self:start}
 [data-band="areas"] .areas__county .chips{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-left:0}
 [data-band="areas"] .areas__county .chips .chip{grid-column:auto;padding:10px 6px;gap:6px}
 [data-band="areas"] .chip__city{min-height:0}
 [data-band="areas"] .chip__svc{align-self:auto;margin-top:auto}
 body[data-page="roofing-galloway-nj.html"] [data-band="edu"] .edu{grid-template-columns:minmax(0,1fr)}
 body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img){grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
 body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img) .edu__img{grid-row:auto}
 body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img) .edu__img img{height:auto}
 body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__head{margin:0}
 body[data-page="about.html"] [data-claim="work_5"]{padding-left:48px}
 .foot__col,.foot__col .foot__links,.legal__links{padding-left:0;margin-left:0}
 .legal__row p a{margin-left:0}
 /* Footer copy shares the normal left edge. The accessibility control docks
    in this clear right lane only while footer content passes its corner. */
 .band--footer>.shell,.band--legal>.shell{padding-right:calc(72px + env(safe-area-inset-right,0px))}
}

/* Round 7: existing category symbols give the three numeral plates meaning. */
body[data-page="index.html"] [data-band="services"] .svc__plate-icon{position:absolute;top:88px;right:48px;display:block;width:56px;height:56px;color:#FFFFFF;pointer-events:none}
.svc__plate-icon svg{display:block;width:100%;height:100%}
@media(max-width:767px){
 body[data-page="index.html"] [data-band="services"] .svc__plate-icon{top:65px;right:40px;width:44px;height:44px}
 /* The 44px launcher occupies x=12..56; preserve the shell and card edges.
    Text in the exposed left gutter begins at 60px or farther right. */
 .split__prose>.reveal>p,.split__prose>p,
 [data-band="prose"] .reveal>p{padding-left:36px}
 body[data-page="services.html"] .edu__body{padding-left:36px}
 .service-slider__controls>p{padding-left:36px}
 .svc__body .svc__text{padding-left:18px}
 .strip__item .strip__text{padding-left:26px}
 body[data-page="index.html"] .split--why .why__body{display:block;padding-left:14px}
 body[data-page$="-galloway-nj.html"] .edu__block:not(:has(.edu__img)):not(:last-child)>.edu__body{padding-left:14px}
 body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__body{padding-left:36px}
 .review-card--header .review-card__meta,.review-card--header .review-card__rate,.review-card--header .review-card__text{padding-left:36px}
 .faq__a{padding-left:36px}
 [data-band="areas"] .lede{padding-left:0}
 [data-band="areas"] .band__head{padding-left:36px}
 [data-band="areas"] .areas__county .chips .chip:nth-child(odd){padding-left:36px}
 [data-band="areas"] .areas__county .chips .chip{min-height:96px}
 [data-band="areas"] .chip__svc{align-self:stretch;margin-top:auto;gap:0 6px}
}

body[data-page="roofing-galloway-nj.html"] .edu__block:has(.edu__img)>.edu__body+.edu__body{margin-top:18px}

@media(max-width:767px){
 [data-band="team"] .edu__body{padding-left:8px}
 .band__head .lede{padding-left:36px}
 [data-band="areas"] .band__head .lede{padding-left:0}
 .contact-panel .contact-panel__lede{padding-left:9px}
}