/* Andy's Building and Bricklaying Services - enhancement layer.
   Tokens lifted from the site's OWN computed styles (staging, 1440px):
     display  Work Sans 600 uppercase   h1 90px/126px, h2 55px/71.5px, #0F172A
     sub      Montserrat 600 30px uppercase #0F172A
     body     Inter 400 16px/29.71px #3A3A3A
     button   Inter 500 14px uppercase #FFF on #DD183B, 15px 40px, radius 4px
     bands    #FFF | #F5F5F5 | linear-gradient(135deg,#F5F5F5 50%,#FFF 50%) | #0F172A
     rhythm   100px 0 (CTA 120px), hairline #EAEAEA
   Theme CSS fights injected styles, so typography and colour carry !important.
   Versioned via ?v=N in the link because /wp-content/ is cached immutable. */

:root {
  --abs-ink: #0F172A;
  --abs-body: #3A3A3A;
  --abs-accent: #DD183B;
  --abs-accent-dark: #CC1939;
  --abs-grey: #F5F5F5;
  --abs-line: #EAEAEA;
}

.abs { font-family: Inter, sans-serif !important; }
.abs p,
.abs li { font-family: Inter, sans-serif !important; font-size: 16px !important; line-height: 29.7px !important; color: var(--abs-body) !important; }
.abs h1, .abs h2 { font-family: "Work Sans", sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; color: var(--abs-ink) !important; letter-spacing: 0 !important; }
.abs h3, .abs h4 { font-family: Montserrat, sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; color: var(--abs-ink) !important; }
.abs h1 { font-size: clamp(34px, 6.25vw, 90px) !important; line-height: 1.18 !important; margin: 0 0 22px !important; }
.abs h2 { font-size: clamp(26px, 3.82vw, 55px) !important; line-height: 1.22 !important; margin: 0 0 26px !important; }
.abs h3 { font-size: clamp(19px, 2.09vw, 30px) !important; line-height: 1.3 !important; margin: 0 0 16px !important; }
.abs h4 { font-size: 17px !important; line-height: 1.35 !important; margin: 0 0 10px !important; }
/* Prose links only. Scoped deliberately: a bare `.abs a` rule outranks the
   single-class button rules below and renders red text on a red button. */
.abs p a, .abs li a, .abs .abs-answer a { color: var(--abs-accent) !important; }
.abs section { padding: clamp(48px, 7vw, 100px) 0 !important; }
.abs :target { scroll-margin-top: 48px; }
.abs-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

/* The mirrored Astra content container is display:flex with flex-wrap:nowrap.
   A block injected as a sibling of the Elementor wrapper is therefore laid out
   as a second item on the SAME row, pushing the document wider than the
   viewport (confirmed: 1757 against a 1440 viewport, while live measured
   1440/1440). Let that container wrap and make the injected block full width. */
#content > .ast-container { flex-wrap: wrap !important; }
#content > .ast-container > .abs { width: 100% !important; flex: 0 0 100% !important; }

/* Kicker + the short crimson rule under it, straight off the site's hero. */
.abs-kicker { font-family: Montserrat, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.6px !important; text-transform: uppercase !important; color: var(--abs-ink) !important; margin: 0 0 12px !important; }
.abs-rule { display: block; width: 100px; height: 4px; background: var(--abs-accent); margin: 0 0 26px; }

/* Buttons */
.abs a.abs-btn, .abs a.abs-btn-ghost, .abs-btn, .abs-btn-ghost {
  display: inline-block; font-family: Inter, sans-serif !important; font-size: 14px !important; font-weight: 500 !important;
  text-transform: uppercase !important; letter-spacing: 0.3px; text-decoration: none !important;
  padding: 15px 40px !important; border-radius: 4px !important; margin: 0 12px 12px 0; transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.abs a.abs-btn, .abs-btn { background: var(--abs-accent) !important; color: #FFFFFF !important; border: 2px solid var(--abs-accent) !important; }
.abs a.abs-btn:hover, .abs a.abs-btn:focus-visible, .abs-btn:hover, .abs-btn:focus-visible { background: var(--abs-accent-dark) !important; border-color: var(--abs-accent-dark) !important; color: #FFFFFF !important; }
.abs a.abs-btn-ghost, .abs-btn-ghost { background: transparent !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; }
.abs a.abs-btn-ghost:hover, .abs a.abs-btn-ghost:focus-visible, .abs-btn-ghost:hover, .abs-btn-ghost:focus-visible { background: #FFFFFF !important; color: var(--abs-ink) !important; }
.abs-onlight a.abs-btn-ghost, .abs-onlight .abs-btn-ghost { color: var(--abs-ink) !important; border-color: var(--abs-ink) !important; }
.abs-onlight a.abs-btn-ghost:hover, .abs-onlight .abs-btn-ghost:hover { background: var(--abs-ink) !important; color: #FFFFFF !important; }
.abs a:focus-visible, .abs button:focus-visible, .abs summary:focus-visible { outline: 3px solid var(--abs-accent); outline-offset: 3px; }

/* Breadcrumb */
.abs-crumb { background: #FFFFFF; border-bottom: 1px solid var(--abs-line); }
.abs-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 14px 0; }
.abs-crumb li { font-size: 13px !important; line-height: 20px !important; color: #5A5A5A !important; }
.abs-crumb a, .abs .abs-crumb a { color: #5A5A5A !important; text-decoration: none !important; }
.abs-crumb a:hover, .abs .abs-crumb a:hover { color: var(--abs-accent) !important; text-decoration: underline !important; }
.abs-crumb li + li::before { content: "\203A"; margin-right: 8px; color: #9A9A9A; }

/* Hero: full bleed photo band, left aligned, exactly the site's own pattern.
   The gradient is inline on the element so theme CSS cannot drop the layer. */
.abs-hero { position: relative; padding: clamp(90px, 12vw, 190px) 0 clamp(110px, 13vw, 200px) !important; background-size: cover; background-position: center; background-repeat: no-repeat; }
.abs-hero .abs-wrap { position: relative; z-index: 2; max-width: 1140px; }
.abs-hero .abs-kicker { color: #FFFFFF !important; text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.abs-hero h1 { color: #FFFFFF !important; text-shadow: 0 2px 10px rgba(0,0,0,.5); max-width: 17ch; }
.abs-hero p { color: #F2F2F2 !important; max-width: 62ch; text-shadow: 0 1px 4px rgba(0,0,0,.6); margin: 0 0 28px !important; }

/* Overlapping white card, the site's signature move under the hero. */
.abs-overlap { background: #FFFFFF; margin-top: clamp(-90px, -7vw, -60px); position: relative; z-index: 3; padding: clamp(30px, 4vw, 56px) !important; box-shadow: 0 18px 46px rgba(15,23,42,.13); max-width: 900px; }
.abs-overlap p:last-child { margin-bottom: 0 !important; }
.abs-overlap-sec { padding-top: 0 !important; padding-bottom: clamp(48px, 7vw, 100px) !important; }

/* Bands */
.abs-split { background-image: linear-gradient(135deg, #F5F5F5 50%, #FFFFFF 50%); }
.abs-grey { background-color: var(--abs-grey); }
.abs-dark { background-color: var(--abs-ink); }
.abs-dark h2, .abs-dark h3, .abs-dark h4 { color: #FFFFFF !important; }
.abs-dark p, .abs-dark li { color: #DBE0E8 !important; }
.abs-dark .abs-kicker { color: #FFFFFF !important; }

/* Checklist */
.abs-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 18px 34px; }
.abs-list li { position: relative; padding-left: 34px !important; }
.abs-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 2px; background: var(--abs-accent); clip-path: polygon(14% 47%, 0 61%, 40% 100%, 100% 20%, 85% 6%, 38% 71%); }
.abs-list strong { color: var(--abs-ink) !important; }

/* Feature cards */
.abs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(238px, 100%), 1fr)); gap: 22px; align-items: stretch; }
.abs-card { background: #FFFFFF; border: 1px solid var(--abs-line); border-left: 4px solid var(--abs-accent); padding: 30px 28px; }
.abs-dark .abs-card { background: #16213A; border-color: #24314F; }
.abs-card p:last-child { margin-bottom: 0 !important; }

/* Photo grid, real client photography from the site's own uploads */
.abs-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 18px; }
.abs-photos img { width: 100%; height: 260px; object-fit: cover; display: block; border-radius: 4px; }

/* FAQ accordions */
.abs-faq { display: grid; gap: 14px; }
.abs-faq details { background: #FFFFFF; border: 1px solid var(--abs-line); border-radius: 4px; }
.abs-grey .abs-faq details { background: #FFFFFF; }
.abs-faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; position: relative; font-family: Montserrat, sans-serif !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.45 !important; color: var(--abs-ink) !important; }
.abs-faq summary::-webkit-details-marker { display: none; }
.abs-faq summary::after { content: ""; position: absolute; right: 24px; top: 26px; width: 10px; height: 10px; border-right: 2px solid var(--abs-accent); border-bottom: 2px solid var(--abs-accent); transform: rotate(45deg); transition: transform .2s ease; }
.abs-faq details[open] summary::after { transform: rotate(-135deg); }
.abs-faq .abs-answer { padding: 0 24px 22px; }
.abs-faq .abs-answer p { margin: 0 !important; }

/* Internal link blocks: designed components, never plain outline pills.
   Towns are pin icon cards with a hover lift, services are solid arrow buttons. */
.abs-townlinks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.abs a.abs-townlink, .abs-townlink { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border: 1px solid var(--abs-line); border-radius: 4px; padding: 16px 18px; text-decoration: none !important; color: var(--abs-ink) !important; font-family: Montserrat, sans-serif !important; font-size: 15px !important; font-weight: 600 !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.abs a.abs-townlink:hover, .abs a.abs-townlink:focus-visible, .abs-townlink:hover, .abs-townlink:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(15,23,42,.14); border-color: var(--abs-accent); color: var(--abs-ink) !important; }
.abs-townlink svg { flex: 0 0 18px; width: 18px; height: 18px; fill: var(--abs-accent); }
.abs-svclinks { display: flex; flex-wrap: wrap; gap: 14px; }
.abs a.abs-svclink, .abs-svclink { display: inline-flex; align-items: center; gap: 10px; background: var(--abs-accent) !important; color: #FFFFFF !important; text-decoration: none !important; padding: 15px 28px !important; border-radius: 4px; font-family: Inter, sans-serif !important; font-size: 14px !important; font-weight: 500 !important; text-transform: uppercase !important; transition: background-color .18s ease, transform .18s ease; }
.abs a.abs-svclink:hover, .abs a.abs-svclink:focus-visible, .abs-svclink:hover, .abs-svclink:focus-visible { background: var(--abs-accent-dark) !important; transform: translateY(-2px); color: #FFFFFF !important; }
.abs-svclink svg { width: 15px; height: 15px; fill: currentColor; }

/* CTA band */
.abs-cta { background: var(--abs-ink); padding: clamp(56px, 8vw, 120px) 0 !important; }
.abs-cta h2 { color: #FFFFFF !important; }
.abs-cta p { color: #DBE0E8 !important; max-width: 64ch; }

/* Areas hub table of towns grouped by authority */
.abs-authgroup { margin-bottom: 44px; }
.abs-authgroup:last-child { margin-bottom: 0; }
.abs-authgroup h3 { margin-bottom: 18px !important; }

@media (prefers-reduced-motion: reduce) {
  .abs-townlink, .abs-svclink, .abs-btn, .abs-btn-ghost, .abs-faq summary::after { transition: none !important; }
  .abs-townlink:hover, .abs-svclink:hover { transform: none; }
}

@media (max-width: 600px) {
  .abs-overlap { margin-top: -40px; }
  .abs-btn, .abs-btn-ghost { display: block; text-align: center; margin-right: 0; }
  .abs-photos img { height: 210px; }
}