/* i8-spacing v1 — ONE contract for the space between the last page section,
   the green review band and the footer. Desktop only (mobile layer untouched).

   Why: every page had its own ad-hoc bottom padding, and later tweaks were
   stacked on top of those different values, so no two pages matched. This file
   zeroes all of that trailing space and puts the single canonical gap on the
   review band itself, so every page is identical by construction.
   Change GAP (the band's margin-top, bottom of this file) to retune sitewide.

   Load LAST (just before </body>). The :not(#nope) on each subject raises
   specificity above the older per-page !important rules without changing what
   the selector matches. */

@media (min-width:768px){

 /* 1. wipe every ad-hoc trailing space that precedes the band / footer */
 html body :is(div,section,article):has(+ div[data-i8-bandstrip]):not(#nope),
 html body :is(div,section,article):has(+ div[data-i8-footwrap]):not(#nope),
 html body :is(div,section,article):has(+ footer):not(#nope),
 html body div:has(> div[data-i8-bandstrip]):not(#nope),
 html body div:has(> div[data-i8-footwrap]):not(#nope){padding-bottom:0 !important;margin-bottom:0 !important}

 html body :is(div,section,article):has(+ div[data-i8-bandstrip]) > div[style*="max-width"]:last-of-type:not(#nope),
 html body :is(div,section,article):has(+ div[data-i8-footwrap]) > div[style*="max-width"]:last-of-type:not(#nope),
 html body :is(div,section,article):has(+ footer) > div[style*="max-width"]:last-of-type:not(#nope){padding-bottom:0 !important}

 /* the section immediately before the footer wrap, even when a stray node sits
    between them (adjacency selectors miss those) */
 html body div:has(> div[data-i8-footwrap]) > div:nth-last-of-type(2):not(#nope),
 html body div:has(> div[data-i8-bandstrip]) > div:nth-last-of-type(2):not(#nope){margin-bottom:0 !important;padding-bottom:0 !important}

 html body div[data-i8-footwrap]:not(#nope){padding-top:0 !important;margin-top:0 !important}

 /* the last content section carries a large inline bottom padding
    (e.g. padding:48px 48px 124px) that no stylesheet was overriding on desktop */
 html body :is(div,section)[data-screen-label="Contact us"] > div[style*="max-width"]:not(#nope){padding-bottom:0 !important}

 /* 2. GAP — the single canonical space above the review band */
 html body div[data-i8-bandstrip]:not(#nope){margin-top:56px !important;margin-bottom:0 !important}
}

/* ===== Related services cards (service pages) — desktop only =====
   Same footprint: no padding, gap or grid changes, so row heights are
   untouched. Left-aligns the copy, adds the green top accent used on the
   sector cards, and drops the site's ghost numeral into the empty
   bottom-right corner of each card. */
@media (min-width:768px){
 html body :is(div,section)[data-screen-label="Related services"]{counter-reset:i8rel}
 html body :is(div,section)[data-screen-label="Related services"] a[href]{position:relative;overflow:hidden;counter-increment:i8rel;text-align:left !important;background:linear-gradient(180deg,#282425 0%,#1e1b1c 100%) !important;border-color:rgba(140,196,99,.26) !important;transition:border-color .25s,transform .25s,background .25s}
 html body :is(div,section)[data-screen-label="Related services"] a[href]::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6fac46,rgba(111,172,70,0) 72%);pointer-events:none}
 html body :is(div,section)[data-screen-label="Related services"] a[href]::after{content:counter(i8rel,decimal-leading-zero);position:absolute;bottom:2px;right:14px;font-family:'Barlow Condensed',sans-serif;font-size:46px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(140,196,99,.22);pointer-events:none;user-select:none}
 html body :is(div,section)[data-screen-label="Related services"] a[href]:hover{border-color:rgba(140,196,99,.72) !important;background:linear-gradient(180deg,#2c2829 0%,#221f20 100%) !important}
 html body :is(div,section)[data-screen-label="Related services"] a[href]:hover::after{-webkit-text-stroke-color:rgba(140,196,99,.4)}
 html body :is(div,section)[data-screen-label="Related services"] a[href] > div:last-child{letter-spacing:.03em}
}

/* ===== Guide FAQ sections — desktop only =====
   Every guide's Q&A block ("<name> FAQ", 44 pages). Six guides were capped at
   1000px while the rest of the page runs to 1360px — all now match the page
   width. Single tall column becomes a two-up grid of cards; an odd last card
   spans the full width so no row is left half empty. */
@media (min-width:768px){
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]){max-width:1360px !important}
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:16px !important;counter-reset:i8faq}
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div > div{position:relative;overflow:hidden;counter-increment:i8faq;background:linear-gradient(180deg,#282425 0%,#1e1b1c 100%) !important;border:1px solid rgba(140,196,99,.24) !important;border-radius:12px !important;padding:26px 28px 24px !important;transition:border-color .25s,transform .25s,background .25s}
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div > div::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6fac46,rgba(111,172,70,0) 72%);pointer-events:none}
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div > div::after{content:counter(i8faq,decimal-leading-zero);position:absolute;top:16px;right:18px;font-family:'Barlow Condensed',sans-serif;font-size:15px;font-weight:700;letter-spacing:.16em;color:rgba(140,196,99,.55);pointer-events:none;user-select:none}
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div > div > div:first-child{padding-right:46px}
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div > div:hover{transform:translateY(-3px);border-color:rgba(140,196,99,.62) !important;background:linear-gradient(180deg,#2c2829 0%,#221f20 100%) !important}
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div > div:hover::after{color:rgba(140,196,99,.9)}
 /* odd number of questions: last card fills the row rather than leaving a gap */
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div > div:last-child:nth-child(odd){grid-column:1 / -1}
 /* some guides close the section with a RELATED links card — same treatment, full width */
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div + div{position:relative;overflow:hidden;background:linear-gradient(180deg,#282425 0%,#1e1b1c 100%) !important;border:1px solid rgba(140,196,99,.24) !important;border-radius:12px !important;margin-top:16px}
 html body :is(div,section):is([data-screen-label="Guide FAQ"],[data-screen-label="Artex FAQ"],[data-screen-label="Disposal FAQ"],[data-screen-label="Health FAQ"],[data-screen-label="Choosing a contractor FAQ"],[data-screen-label="Disturbed asbestos FAQ"],[data-screen-label="Unusual places FAQ"],[data-screen-label="Photo ID FAQ"]) > h2 + div + div::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6fac46,rgba(111,172,70,0) 72%);pointer-events:none}
}

/* i8-review-tile — "Trustpilot" (112px) and "Trust Index" (119px) were clipped in
   a 102px content box by white-space:nowrap on the tile anchor. Tighter tracking
   plus wrapping fits both; tile size and the row are unchanged. */
@media (min-width:768px){
 html body [data-mreview]:not(#nope){white-space:normal !important}
 html body [data-mreview] span:not(#nope){letter-spacing:.03em !important;line-height:1.1 !important;text-align:center !important}
}

/* i8-chip-wrap — sector chip labels wrap instead of being clipped.
   The card is a fixed 193x104 with overflow:hidden; the label span carried
   white-space:nowrap, so "Developers & Land Remediation" (220px) lost glyphs
   off BOTH ends inside a 191px content box. The card has room for two 19px
   lines, so wrapping fits without changing card size or the one-row layout. */
@media (min-width:768px){
 html body [data-chip-label]:not(#nope){white-space:normal !important;line-height:1.15 !important;text-align:center !important;overflow-wrap:break-word}
}