:root {
  --brand: #e05215;
  --brand-dark: #bd4310;
  --carbon: #171b23;
  --carbon-deep: #101319;
  --graphite: #22272f;
  --graphite-light: #303640;
  --paper: #f4f4f2;
  --white: #fff;
  --text: #3d4148;
  --strong: #171b23;
  --muted: #6b7079;
  --on-dark: #c9cdd3;
  --border: #d7d9dc;
  --border-dark: #3a404a;
  --error: #b42318;
  --success: #237a4b;
  --heading: 'Barlow Semi Condensed', Arial, sans-serif;
  --body: 'Open Sans', Arial, sans-serif;
  --container: 82rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(4.75rem, 9vw, 8.5rem);
  --fast: 190ms;
  --base: 340ms;
  --slow: 680ms;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --emphasis: cubic-bezier(.16, 1, .3, 1);
  --edge-end: rgba(255,255,255,.48);
  --edge-end-dark: rgba(255,255,255,.08);
  --edge-gradient: linear-gradient(125deg, rgba(255,255,255,.7), rgba(224,82,21,.68) 38%, rgba(23,27,35,.22) 70%, var(--edge-end));
  --edge-gradient-dark: linear-gradient(125deg, rgba(255,255,255,.34), rgba(224,82,21,.74) 42%, var(--edge-end-dark));
  --surface-gradient: linear-gradient(145deg, #fafbfc 0%, #e2e5e9 100%);
  --surface-gradient-dark: linear-gradient(145deg, rgba(55,61,71,.88) 0%, rgba(13,16,22,.96) 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--text); font: 16px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { margin-bottom: .45em; color: var(--strong); font-family: var(--heading); font-weight: 700; line-height: .98; letter-spacing: -.025em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; word-break: normal; hyphens: manual; }
h1 { font-size: clamp(3.5rem, 7vw, 7.1rem); }
h2 { font-size: clamp(2.25rem, 3.75vw, 3.9rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.85rem); line-height: 1.08; }
p { margin-bottom: 1rem; }
.container { width: min(calc(100% - 2 * var(--gutter)), var(--container)); margin-inline: auto; }
.section-space { padding-block: var(--section); }
.skip-link { position: fixed; z-index: 2000; top: 8px; left: 8px; padding: 12px 18px; background: #fff; color: #000; transform: translateY(-160%); transition: transform var(--base); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; color: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow > span { width: 26px; height: 2px; flex: 0 0 26px; background: var(--brand); }
.line-icon { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.arrow { display: inline-block; color: var(--brand); transition: transform var(--slow) var(--emphasis); }
.button, .nav-cta { --button-cut: 13px; --button-cut-line: var(--brand); position: relative; min-height: 56px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; gap: 20px; border: 1px solid var(--brand); border-radius: 1px; background: var(--brand); color: #fff; font-weight: 700; cursor: pointer; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--button-cut)),calc(100% - var(--button-cut)) 100%,0 100%); transition: color var(--base) var(--ease), background var(--base) var(--ease), border-color var(--base) var(--ease), transform var(--base) var(--ease), box-shadow var(--slow) var(--ease); }
.button::before, .nav-cta::before { content: ''; position: absolute; z-index: 2; right: 0; bottom: 0; width: var(--button-cut); height: var(--button-cut); background: linear-gradient(135deg, transparent 47%, var(--button-cut-line) 48.5% 51.5%, transparent 53%); pointer-events: none; }
.button:hover, .nav-cta:hover { --button-cut-line: var(--brand-dark); border-color: var(--brand-dark); background: var(--brand-dark); box-shadow: 0 12px 30px rgba(0, 0, 0, .14); transform: translateY(-2px); }
.button:active, .nav-cta:active { transform: translateY(1px); }
.button:hover .arrow, .nav-cta:hover .arrow, a:hover > .arrow { transform: translateX(5px); }
.button--outline { --button-cut-line: rgba(255,255,255,.58); border-color: rgba(255,255,255,.58); background: transparent; }
.button--outline:hover { --button-cut-line: #fff; border-color: #fff; background: #fff; color: var(--carbon); }
.button--outline-dark { --button-cut-line: var(--strong); border-color: var(--strong); background: transparent; color: var(--strong); }
.button--outline-dark:hover { border-color: var(--strong); background: var(--strong); color: #fff; }

/* Shared cut-corner detail for the site's larger visual elements */
:is(.service-card, .process-steps li, .directory-group, .comparison, .bitumen-focus figure, .workshop-grid, .area-intro-grid figure, .audience-grid a, .area-service-grid a, .planning-grid article, .warranty-numbers) { --corner-cut: 24px; --corner-line: var(--border); position: relative; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--corner-cut)),calc(100% - var(--corner-cut)) 100%,0 100%); }
:is(.service-card, .process-steps li, .directory-group, .comparison, .bitumen-focus figure, .workshop-grid, .area-intro-grid figure, .audience-grid a, .area-service-grid a, .planning-grid article, .warranty-numbers)::before { content: ''; position: absolute; z-index: 8; right: 0; bottom: 0; width: var(--corner-cut); height: var(--corner-cut); background: linear-gradient(135deg, transparent 47%, var(--corner-line) 48.5% 51.5%, transparent 53%); pointer-events: none; }
:is(.directory-group, .comparison, .area-intro-grid figure, .area-service-grid a, .planning-grid article) { --corner-line: var(--edge-end); }
:is(.bitumen-focus figure, .workshop-grid, .audience-grid a, .process-steps li, .warranty-numbers) { --corner-line: var(--edge-end-dark); }
.section-heading { max-width: 800px; margin-bottom: clamp(2.8rem, 5vw, 5rem); }
.section-heading > p:last-child:not(.eyebrow) { max-width: 64ch; color: var(--muted); font-size: 1.05rem; }

/* Header */
.site-header { position: fixed; z-index: 1200; inset: 0 0 auto; height: 104px; color: #fff; transition: height var(--slow) var(--emphasis), background var(--base), border-color var(--base), transform var(--slow) var(--emphasis), box-shadow var(--base); }
.site-header::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: rgba(255,255,255,.17); }
.site-header.is-solid { height: 78px; background: rgba(16,19,25,.97); box-shadow: 0 12px 36px rgba(0,0,0,.16); backdrop-filter: blur(10px); }
.site-header.is-hidden { transform: translateY(-105%); }
.site-header.menu-active { transform: none !important; height: 82px; background: var(--carbon-deep); }
.header-inner { height: 100%; display: grid; grid-template-columns: 270px 1fr auto; align-items: center; gap: 35px; }
.site-logo { width: 235px; padding-block: 9px; position: relative; z-index: 3; transition: width var(--slow) var(--emphasis), padding var(--slow) var(--emphasis); }
.site-logo img { width: 100%; height: auto; }
.site-header.is-solid .site-logo { width: 158px; padding-block: 6px; }
.primary-nav { justify-self: center; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
.nav-links > a { position: relative; padding-block: 13px; font-size: .76rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; transition: color var(--base); }
.nav-links > a::after { content: ''; position: absolute; right: 0; bottom: 4px; left: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: right; transition: transform var(--base) var(--ease); }
.nav-links > a:hover::after, .nav-links > a[aria-current='page']::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { min-height: 50px; padding-inline: 23px; font-size: .78rem; background: transparent; border-color: rgba(255,255,255,.55); }
.site-header.is-solid .nav-cta { min-height: 46px; }
.menu-toggle, .mobile-menu-bottom, .mobile-menu-actions, .menu-watermark { display: none; }

/* Heroes */
.home-hero { position: relative; min-height: clamp(720px, 88vh, 940px); overflow: hidden; display: flex; color: #fff; background: var(--carbon); }
.home-hero::after { content: ''; position: absolute; z-index: 1; right: 0; bottom: -1px; left: 0; height: clamp(150px, 20vw, 235px); background: linear-gradient(180deg, transparent 0%, rgba(16,19,25,.18) 35%, rgba(244,244,242,.18) 74%, rgba(255,255,255,.72) 100%); pointer-events: none; }
.hero-background { position: absolute; inset: 0; width: 100%; height: 108%; object-fit: cover; object-position: center 55%; filter: saturate(.48) contrast(1.12) brightness(.76); }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,19,25,.96) 0%, rgba(16,19,25,.83) 43%, rgba(16,19,25,.3) 78%, rgba(16,19,25,.5) 100%); }
.hero-content { position: relative; z-index: 2; min-height: inherit; padding: 120px 0 92px; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero-copy { max-width: 760px; }
.hero-copy h1 { margin-bottom: 28px; color: #fff; }
.hero-copy > p:not(.eyebrow) { max-width: 58ch; margin-bottom: 34px; color: var(--on-dark); font-size: clamp(1rem, 1.25vw, 1.2rem); }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.scroll-cue { position: absolute; z-index: 4; right: var(--gutter); bottom: 28px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: #fff; transition: background var(--base), border-color var(--base); }
.scroll-cue:hover { border-color: var(--brand); background: var(--brand); }
.scroll-cue span { position: absolute; top: -36px; width: 1px; height: 34px; background: rgba(255,255,255,.45); }
.inner-hero { position: relative; min-height: 680px; padding-top: 104px; display: flex; align-items: center; overflow: hidden; background: var(--carbon); color: #fff; }
.inner-hero > img:first-child, .inner-hero-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.inner-hero > img:first-child { object-fit: cover; object-position: center; filter: saturate(.42) contrast(1.14) brightness(.7); }
.inner-hero-overlay { background: linear-gradient(90deg, rgba(16,19,25,.97), rgba(16,19,25,.75) 55%, rgba(16,19,25,.3)); }
.inner-hero > .container { position: relative; z-index: 2; }
.inner-hero h1 { max-width: 18ch; color: #fff; font-size: clamp(3.15rem, 5.2vw, 5.3rem); }
.inner-hero > .container { padding-block: clamp(55px, 7vw, 90px); }
.inner-hero .container > p:not(.eyebrow) { max-width: 60ch; margin-bottom: 30px; color: var(--on-dark); font-size: 1.12rem; }
.contact-hero, .text-hero { padding: 220px 0 110px; background: var(--carbon); color: #fff; }
.contact-hero--image { position: relative; overflow: hidden; }
.contact-hero--image > img, .contact-hero-overlay { position: absolute; inset: 0; width: 100%; height: 110%; }
.contact-hero--image > img { object-fit: cover; object-position: center 52%; filter: saturate(.42) contrast(1.14) brightness(.66); }
.contact-hero-overlay { height: 100%; background: linear-gradient(90deg, rgba(16,19,25,.97), rgba(16,19,25,.76) 58%, rgba(16,19,25,.44)); }
.contact-hero--image > .container { position: relative; z-index: 2; }
.contact-hero h1, .text-hero h1 { color: #fff; }
.contact-hero p:not(.eyebrow) { color: var(--on-dark); font-size: 1.12rem; }

/* Home */
.fact-bar { position: relative; z-index: 4; margin-top: -92px; padding-bottom: 24px; background: linear-gradient(180deg, transparent 0, rgba(255,255,255,.84) 94px, #fff 150px); color: #fff; }
.fact-bar > .container { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255,255,255,.14); background: rgba(16,19,25,.91); box-shadow: 0 28px 70px rgba(16,19,25,.22), inset 0 1px 0 rgba(255,255,255,.07); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.fact-bar article { min-height: 126px; padding: 26px; display: flex; align-items: center; gap: 18px; border-inline-start: 1px solid var(--border-dark); }
.fact-bar article:last-child { border-inline-end: 1px solid var(--border-dark); }
.fact-bar .line-icon { width: 38px; height: 38px; color: #fff; }
.fact-bar p { margin: 0; }
.fact-bar strong, .fact-bar span { display: block; }
.fact-bar strong { color: #fff; font-family: var(--heading); font-size: 1.16rem; line-height: 1.1; text-transform: uppercase; }
.fact-bar span { margin-top: 6px; color: var(--on-dark); font-size: .77rem; }
.service-section { position: relative; z-index: 2; isolation: isolate; background: #fff; }
.home-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.service-card { min-width: 0; position: relative; border: 1px solid var(--border); background: #fff; transition: transform var(--base) var(--ease), box-shadow var(--base), border-color var(--base); }
.service-card::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--base); }
.service-card:hover { transform: translateY(-5px); border-color: #bec1c6; box-shadow: 0 18px 45px rgba(23,27,35,.1); }
.service-card:hover::after { transform: scaleX(1); }
.service-card figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--graphite); }
.service-card figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(16,19,25,.28), transparent 60%); }
.service-card figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.52) contrast(1.08); transition: transform var(--slow) var(--ease), filter var(--base); }
.service-card:hover figure img { transform: scale(1.035); filter: saturate(.68) contrast(1.08); }
.service-card figure span { position: absolute; z-index: 2; top: 15px; left: 16px; color: #fff; font-family: var(--heading); font-weight: 700; }
.service-card > div { min-height: 94px; padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.service-card h3 { min-width: 0; margin: 0; font-size: clamp(1.15rem, 1.55vw, 1.45rem); }
.bitumen-focus { padding-block: clamp(4.5rem, 8vw, 8rem); background: var(--carbon); color: #fff; }
.bitumen-focus-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); gap: clamp(45px, 8vw, 120px); align-items: center; }
.bitumen-focus h2 { max-width: 12ch; color: #fff; }
.bitumen-focus p { max-width: 60ch; color: var(--on-dark); }
.bitumen-focus .button { margin-top: 18px; }
.bitumen-focus figure { position: relative; margin: 0; overflow: hidden; border: 1px solid transparent; background: linear-gradient(var(--carbon),var(--carbon)) padding-box, var(--edge-gradient-dark) border-box; }
.bitumen-focus figure::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 75px rgba(10,13,18,.28); pointer-events: none; }
.bitumen-focus figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.55) contrast(1.08); }
.strength-section { background: var(--paper); }
.strength-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.strength-grid article { min-height: 310px; margin: -1px 0 0 -1px; padding: 34px; border: 1px solid transparent; background: var(--surface-gradient) padding-box, var(--edge-gradient) border-box; transition: background var(--base), transform var(--base), box-shadow var(--base); }
.strength-grid article:hover { background: linear-gradient(145deg, #fff, #eef0f3) padding-box, var(--edge-gradient) border-box; transform: translateY(-3px); }
.strength-grid .line-icon { margin-bottom: 56px; color: var(--brand); }
.strength-grid h3 { font-size: 1.45rem; }
.strength-grid p { color: var(--muted); }
.workshop-section, .housing-maintenance { padding-block: clamp(4rem, 7vw, 7rem); background: var(--carbon); color: #fff; }
.workshop-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: stretch; }
.workshop-grid figure { margin: 0; min-height: 520px; overflow: hidden; background: var(--graphite); }
.workshop-grid figure img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) contrast(1.1); }
.workshop-grid > div { padding: clamp(40px, 6vw, 86px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid transparent; background: linear-gradient(var(--carbon),var(--carbon)) padding-box, var(--edge-gradient-dark) border-box; }
.workshop-grid h2 { color: #fff; }
.workshop-grid p { color: var(--on-dark); }
.workshop-grid .button { margin-top: 20px; }

/* Scroll process */
.process-story { overflow: clip; background: var(--paper); }
.process-story--dark { position: relative; isolation: isolate; background: var(--carbon-deep); color: #fff; }
.process-story--dark h2 { color: #fff; }
.process-story--dark .process-intro > p { color: var(--on-dark); }
.process-story--dark .process-progress { background: var(--border-dark); }
.process-story-grid { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: clamp(40px, 7vw, 110px); align-items: start; }
.process-intro { position: sticky; top: 130px; }
.process-intro h2 { max-width: 14ch; font-size: clamp(2.25rem, 3.25vw, 3.45rem); }
.process-intro > p { max-width: 43ch; color: var(--muted); }
.process-progress { position: relative; width: 2px; height: 150px; margin-top: 44px; overflow: hidden; background: var(--border); }
.process-progress span { position: absolute; inset: 0; background: var(--brand); transform: scaleY(0); transform-origin: top; }
.process-steps { margin: 0; padding: 0; display: grid; gap: clamp(55px, 8vw, 110px); list-style: none; }
.process-steps li { height: 430px; display: grid; grid-template-columns: minmax(250px, 1fr) minmax(0, 1.1fr); overflow: hidden; border: 1px solid transparent; background: var(--surface-gradient-dark) padding-box, var(--edge-gradient-dark) border-box; color: #fff; box-shadow: 0 28px 60px rgba(23,27,35,.12); }
.process-steps figure { position: relative; min-height: 100%; margin: 0; overflow: hidden; background: var(--graphite); }
.process-steps figure::after { content: ''; position: absolute; inset: 0; background: rgba(12,15,20,.24); pointer-events: none; }
.process-steps figure img { position: absolute; inset: -5% 0 auto; width: 100%; height: 110%; object-fit: cover; filter: saturate(.34) contrast(1.14) brightness(.78); transform: scale(1.04); }
.process-steps li > div { min-height: 0; padding: clamp(32px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.process-steps li > div > span { margin-bottom: 28px; color: var(--brand); font-family: var(--heading); font-size: 1.1rem; font-weight: 700; }
.process-steps h3 { margin-top: auto; color: #fff; font-size: clamp(1.7rem, 2.45vw, 2.45rem); }
.process-steps p { margin-bottom: 0; color: var(--on-dark); }
.warranty-band { padding-block: clamp(4.5rem, 7vw, 7rem); background: var(--carbon-deep); color: #fff; }
.warranty-band > .container { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(400px, .9fr); gap: 7vw; align-items: center; }
.warranty-band h2 { color: #fff; }
.warranty-band header > p:last-child { max-width: 60ch; color: var(--on-dark); }
.warranty-numbers { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid transparent; background: radial-gradient(circle at 50% 0, rgba(255,255,255,.08), transparent 42%), var(--surface-gradient-dark) padding-box, var(--edge-gradient-dark) border-box; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 65px rgba(0,0,0,.18); }
.warranty-numbers article { min-height: 280px; padding: 30px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.warranty-numbers article + article { border-left: 1px solid var(--border-dark); }
.warranty-mark { position: relative; width: clamp(110px, 10vw, 140px); height: 122px; display: grid; place-items: center; }
.warranty-mark strong { position: relative; z-index: 1; min-width: .7em; color: var(--brand); font-family: var(--heading); font-size: clamp(5rem, 7vw, 6.8rem); line-height: .78; }
.warranty-numbers article > p { margin: 12px 0 0; }
.warranty-numbers article > p b, .warranty-numbers article > p span { display: block; color: #fff; font-family: var(--heading); line-height: 1.1; text-transform: uppercase; }
.warranty-numbers article > p b { font-size: 1.2rem; }
.warranty-numbers article > p span { margin-top: 5px; color: var(--on-dark); font-size: .9rem; font-weight: 600; }
.materials-band { background: #fff; }
.materials-band > .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); gap: clamp(45px, 8vw, 110px); align-items: center; }
.materials-band h2 { max-width: 12ch; }
.materials-band > .container > div:first-child > p:last-child { max-width: 58ch; color: var(--muted); }
.material-list { display: grid; grid-template-columns: 1fr 1fr; }
.material-list article { position: relative; min-height: 275px; padding: 34px; overflow: hidden; border: 1px solid transparent; background: radial-gradient(circle at 100% 0, rgba(255,255,255,.82), transparent 38%), var(--surface-gradient) padding-box, var(--edge-gradient) border-box; transition: transform var(--base) var(--ease), box-shadow var(--slow) var(--ease), background var(--base); }
.material-list article:hover { z-index: 1; transform: translateY(-3px); box-shadow: 0 24px 52px rgba(23,27,35,.12); }
.material-list article + article { margin-left: -1px; }
.material-list .line-icon { width: 45px; height: 45px; margin-bottom: 38px; color: var(--brand); stroke-width: 1.35; }
.material-watermark { position: absolute; right: -6px; bottom: -12px; width: 126px; height: 126px; fill: none; stroke: rgba(23,27,35,.075); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: transform var(--slow) var(--emphasis), stroke var(--base); }
.material-list article:hover .material-watermark { stroke: rgba(23,27,35,.12); transform: translate(-5px,-5px); }
.material-list span { position: absolute; top: 34px; right: 34px; color: var(--brand); font-family: var(--heading); font-weight: 700; }
.material-list h3 { margin-top: 0; }
.material-list p { color: var(--muted); }
.audience-section { position: relative; isolation: isolate; background: var(--carbon); color: #fff; }
.audience-section h2 { color: #fff; }
.audience-section .section-heading > p { color: var(--on-dark); }
.audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.audience-grid a { min-width: 0; min-height: 300px; margin: -1px 0 0 -1px; padding: 32px; display: flex; flex-direction: column; border: 1px solid transparent; background: var(--surface-gradient-dark) padding-box, var(--edge-gradient-dark) border-box; color: #fff; transition: color var(--base), background var(--base), transform var(--base); }
.audience-grid a:hover { background: linear-gradient(145deg, rgba(72,79,90,.94), rgba(20,23,30,.98)) padding-box, var(--edge-gradient-dark) border-box; color: #fff; transform: translateY(-4px); }
.audience-grid a > span:first-child { color: var(--brand); font-family: var(--heading); font-weight: 700; }
.audience-grid h3 { margin-top: auto; color: inherit; }
.audience-grid p { color: var(--on-dark); font-size: .9rem; }
.audience-grid a:hover p { color: var(--on-dark); }
.audience-grid .arrow { align-self: flex-end; font-size: 1.5rem; }

/* Service pages */
.service-content { background: #fff; }
.service-layout { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: clamp(45px, 8vw, 120px); align-items: start; }
.service-summary { position: sticky; top: 125px; }
.service-summary > .line-icon { width: 78px; height: 78px; margin-bottom: 55px; color: var(--brand); }
.service-summary > p:last-child { color: var(--muted); }
.service-accordion { border-top: 1px solid var(--border); }
.service-accordion-item { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--border); background: #fff; color: var(--strong); transition: color var(--slow) var(--ease), background var(--slow) var(--ease); }
.service-accordion-item::before { content: ''; position: absolute; z-index: -2; inset: 0; background: var(--service-image) center / cover no-repeat; opacity: 0; transform: scale(1.045); transition: opacity var(--slow) var(--ease), transform 1050ms var(--emphasis); }
.service-accordion-item::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(16,19,25,.98), rgba(16,19,25,.79)); opacity: 0; transition: opacity var(--slow) var(--ease); }
.service-accordion-item.is-open { color: #fff; }
.service-accordion-item.is-open::before, .service-accordion-item.is-open::after { opacity: 1; transform: none; }
.service-accordion-item button { width: 100%; min-height: 105px; padding: 22px 12px; display: grid; grid-template-columns: 52px minmax(0, 1fr) 34px; align-items: center; gap: 18px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.service-accordion-item button > span { color: var(--brand); font-family: var(--heading); font-weight: 700; }
.service-accordion-item button strong { font-family: var(--heading); font-size: clamp(1.3rem, 2.15vw, 1.85rem); line-height: 1.05; text-transform: uppercase; overflow-wrap: break-word; word-break: normal; }
.service-accordion-item button i { position: relative; width: 32px; height: 32px; display: block; border: 1px solid currentColor; border-radius: 50%; font-style: normal; transition: transform var(--slow) var(--emphasis), background var(--base) var(--ease), color var(--base) var(--ease), border-color var(--base) var(--ease); }
.service-accordion-item button i::before, .service-accordion-item button i::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; border-radius: 2px; background: currentColor; transform: translate(-50%,-50%); }
.service-accordion-item button i::after { transform: translate(-50%,-50%) rotate(90deg); }
.service-accordion-item.is-open button i { transform: rotate(45deg); border-color: var(--brand); background: var(--brand); color: #fff; }
.service-accordion-panel { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--slow) var(--emphasis), opacity var(--base), padding var(--slow); }
.service-accordion-item.is-open .service-accordion-panel { max-height: 280px; opacity: 1; }
.service-accordion-panel p { max-width: 62ch; margin: 0; padding: 0 70px 38px 82px; color: var(--on-dark); }
.directory { background: #fff; }
.directory-group { margin-bottom: 24px; display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); border: 1px solid transparent; background: linear-gradient(#fff,#fff) padding-box, var(--edge-gradient) border-box; }
.directory-group > header { padding: 38px; border-right: 1px solid var(--border); background: var(--paper); }
.directory-group > header > span { color: var(--brand); font-family: var(--heading); font-weight: 700; }
.directory-group h2 { margin-top: 45px; font-size: 2.6rem; }
.directory-group > header p { color: var(--muted); }
.directory-group > div > a { min-height: 120px; padding: 22px 30px; display: grid; grid-template-columns: 54px minmax(0, 1fr) 30px; align-items: center; gap: 22px; border-bottom: 1px solid var(--border); transition: background var(--base), color var(--base); }
.directory-group > div > a:last-child { border-bottom: 0; }
.directory-group > div > a:hover { background: var(--carbon); color: #fff; }
.directory-group .line-icon { color: var(--brand); }
.directory-group b, .directory-group small { display: block; }
.directory-group b { font-family: var(--heading); font-size: 1.35rem; text-transform: uppercase; }
.directory-group small { margin-top: 5px; color: var(--muted); }
.directory-group a:hover small { color: var(--on-dark); }
.before-after { background: var(--paper); }
.comparison { position: relative; aspect-ratio: 16 / 8.8; overflow: hidden; border: 1px solid transparent; background: var(--surface-gradient) padding-box, var(--edge-gradient) border-box; box-shadow: 0 26px 55px rgba(23,27,35,.12); }
.comparison > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) contrast(1.12) brightness(.86); }
.comparison-before { z-index: 2; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.comparison-divider { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--split); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 0 20px rgba(0,0,0,.28); transform: translateX(-1px); pointer-events: none; }
.comparison-divider i { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; background: var(--surface-gradient-dark) padding-box, var(--edge-gradient-dark) border-box; color: #fff; font-style: normal; font-size: 1.15rem; transform: translate(-50%,-50%); }
.comparison input { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.comparison-label { position: absolute; z-index: 3; top: 20px; padding: 7px 11px; background: rgba(13,16,22,.8); color: #fff; font-family: var(--heading); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; backdrop-filter: blur(8px); pointer-events: none; }
.comparison-label--before { left: 20px; }
.comparison-label--after { right: 20px; }
.comparison-caption { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid transparent; border-top: 0; background: #fff padding-box, var(--edge-gradient) border-box; }
.comparison-caption p { margin: 0; padding: 22px 26px; color: var(--muted); }
.comparison-caption p + p { border-left: 1px solid var(--border); }
.comparison-caption strong { display: block; margin-bottom: 5px; color: var(--strong); font-family: var(--heading); text-transform: uppercase; }

/* FAQ and CTA */
.faq-section { background: #fff; }
.faq-layout { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: 8vw; align-items: start; }
.faq-layout > .section-heading { position: sticky; top: 125px; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { min-height: 86px; padding: 20px 6px; display: flex; align-items: center; justify-content: space-between; gap: 25px; color: var(--strong); font-family: var(--heading); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 700; line-height: 1.1; text-transform: uppercase; cursor: pointer; list-style: none; transition: color var(--base), padding var(--base); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:hover { color: var(--brand); padding-left: 8px; }
.faq-list summary span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 1px solid var(--strong); border-radius: 50%; transition: transform var(--base), color var(--base), background var(--base), border-color var(--base); }
.faq-list details[open] summary span { transform: rotate(45deg); border-color: var(--brand); background: var(--brand); color: #fff; }
.faq-answer { overflow: hidden; }
.faq-answer p { max-width: 66ch; margin: 0; padding: 0 60px 28px 6px; color: var(--muted); }
.image-cta { position: relative; min-height: 520px; display: flex; align-items: center; overflow: hidden; background: var(--carbon); color: #fff; }
.image-cta > img, .image-cta-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.image-cta > img { object-fit: cover; filter: saturate(.4) contrast(1.14); }
.image-cta-overlay { background: linear-gradient(90deg, rgba(16,19,25,.96), rgba(16,19,25,.72) 55%, rgba(16,19,25,.35)); }
.image-cta > .container { position: relative; z-index: 2; }
.image-cta h2 { max-width: 780px; color: #fff; }
.image-cta p { max-width: 620px; margin-bottom: 28px; color: var(--on-dark); }

/* Area, housing and company */
.area-section { background: #fff; }
.area-list { border-top: 1px solid var(--border); }
.area-list a { min-height: 145px; padding: 25px 10px; display: grid; grid-template-columns: 75px minmax(190px, 3fr) minmax(260px, 4fr) 35px; align-items: center; gap: 28px; border-bottom: 1px solid var(--border); transition: padding var(--base), background var(--base), color var(--base); }
.area-list a:hover { padding-inline: 24px; background: var(--carbon); color: #fff; }
.area-list > a > span { color: var(--brand); font-family: var(--heading); font-weight: 700; }
.area-list h2 { margin: 0; color: inherit; font-size: clamp(2rem, 4vw, 3.7rem); }
.area-list p { margin: 0; color: var(--muted); }
.area-list a:hover p { color: var(--on-dark); }
.area-intro { background: #fff; }
.area-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, .95fr); gap: clamp(50px, 8vw, 120px); align-items: center; }
.area-intro-grid > div > .line-icon { width: 72px; height: 72px; margin-bottom: 45px; color: var(--brand); }
.area-intro-grid .lead { font-size: 1.15rem; }
.area-intro-grid figure { margin: 0; overflow: hidden; border: 1px solid transparent; background: var(--surface-gradient) padding-box, var(--edge-gradient) border-box; }
.area-intro-grid figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.55) contrast(1.08); }
.area-services { background: var(--paper); }
.area-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.area-service-grid a { min-height: 340px; margin: -1px 0 0 -1px; padding: 30px; display: flex; flex-direction: column; border: 1px solid transparent; background: var(--surface-gradient) padding-box, var(--edge-gradient) border-box; transition: transform var(--base), background var(--base), color var(--base), box-shadow var(--base); }
.area-service-grid a:hover { --corner-line: var(--edge-end-dark); z-index: 1; background: var(--surface-gradient-dark) padding-box, var(--edge-gradient-dark) border-box; color: #fff; transform: translateY(-4px); box-shadow: 0 20px 45px rgba(23,27,35,.14); }
.area-service-grid .line-icon { width: 54px; height: 54px; margin-bottom: 35px; color: var(--brand); }
.area-service-grid a > span:not(.arrow) { color: var(--brand); font-family: var(--heading); font-weight: 700; }
.area-service-grid h3 { margin-top: auto; color: inherit; }
.area-service-grid p { color: var(--muted); font-size: .88rem; }
.area-service-grid a:hover p { color: var(--on-dark); }
.area-service-grid .arrow { align-self: flex-end; font-size: 1.4rem; }
.company-story { background: #fff; }
.company-story > .container { display: grid; grid-template-columns: 5fr 7fr; gap: 8vw; }
.company-story .lead { font-size: 1.25rem; }
.company-facts { background: var(--carbon); color: #fff; }
.company-facts > .container { display: grid; grid-template-columns: repeat(4, 1fr); }
.company-facts article { min-height: 280px; padding: 35px; display: flex; flex-direction: column; border-left: 1px solid var(--border-dark); }
.company-facts article:last-child { border-right: 1px solid var(--border-dark); }
.company-facts article > span { color: var(--brand); font-family: var(--heading); font-weight: 700; }
.company-facts strong { margin-top: auto; color: #fff; font-family: var(--heading); font-size: clamp(1.85rem, 2.55vw, 2.8rem); line-height: .95; text-transform: uppercase; overflow-wrap: break-word; word-break: normal; }
.company-facts p { color: var(--on-dark); }
.company-principles { background: var(--paper); }
.company-contact { background: #fff; }
.housing-reasons { position: relative; isolation: isolate; overflow: hidden; background: var(--carbon); color: #fff; }
.housing-reasons::before { content: ''; position: absolute; z-index: 0; inset: 0; background: repeating-linear-gradient(132deg, transparent 0 48px, rgba(255,255,255,.023) 49px, transparent 50px 98px), radial-gradient(circle at 10% 15%, rgba(255,255,255,.045), transparent 28%); pointer-events: none; }
.housing-reasons > .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px,.85fr) minmax(0,1.65fr); gap: clamp(46px,7vw,100px); align-items: start; }
.housing-reasons-intro h2 { max-width: 13ch; color: #fff; }
.housing-reasons-intro > p:not(.eyebrow) { max-width: 48ch; color: var(--on-dark); }
.housing-reasons-intro .button { margin-top: 18px; }
.housing-reasons-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.housing-reasons-grid article { position: relative; min-height: 330px; margin-left: -1px; padding: 30px; display: flex; flex-direction: column; border: 1px solid transparent; background: var(--surface-gradient-dark) padding-box, var(--edge-gradient-dark) border-box; transition: transform var(--base) var(--ease), background var(--base), box-shadow var(--slow) var(--ease); }
.housing-reasons-grid article:hover { z-index: 1; transform: translateY(-4px); background: linear-gradient(145deg,rgba(67,74,85,.92),rgba(14,17,23,.98)) padding-box,var(--edge-gradient-dark) border-box; box-shadow: 0 24px 55px rgba(0,0,0,.22); }
.housing-reasons-grid .line-icon { width: 44px; height: 44px; margin-bottom: 35px; color: var(--brand); }
.housing-reasons-grid article > span { color: var(--brand); font-family: var(--heading); font-size: .8rem; font-weight: 700; }
.housing-reasons-grid h3 { margin-top: auto; color: #fff; font-size: 1.4rem; }
.housing-reasons-grid p { margin-bottom: 0; color: var(--on-dark); font-size: .88rem; }
.housing-planning { background: #fff; }
.housing-planning > .container { display: grid; grid-template-columns: minmax(240px, 4fr) minmax(0, 8fr); gap: 7vw; }
.housing-planning > .container > div:first-child { position: sticky; top: 125px; align-self: start; }
.planning-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.planning-grid article { position: relative; min-height: 260px; margin: -1px 0 0 -1px; padding: 30px; overflow: hidden; border: 1px solid transparent; background: radial-gradient(circle at 100% 0,rgba(255,255,255,.68),transparent 38%),var(--surface-gradient) padding-box,var(--edge-gradient) border-box; transition: transform var(--base) var(--ease),box-shadow var(--slow) var(--ease); }
.planning-grid article:hover { z-index: 1; transform: translateY(-3px); box-shadow: 0 22px 45px rgba(23,27,35,.1); }
.planning-grid article > span { color: var(--brand); font-family: var(--heading); font-weight: 700; }
.planning-grid h3 { margin-top: 58px; }
.planning-grid p { color: var(--muted); }
.housing-maintenance { background: var(--graphite); }
.housing-maintenance h2 { font-size: clamp(2.45rem, 4vw, 4rem); }
.housing-maintenance .workshop-grid { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: stretch; }
.housing-maintenance .workshop-grid figure { position: relative; min-height: 0; height: auto; }
.housing-maintenance .workshop-grid figure img { position: absolute; inset: 0; object-position: center 42%; }
.housing-maintenance .workshop-grid > div { min-height: 0; padding-block: 42px; }

/* Contact */
.contact-section, .company-contact { background: var(--paper); }
.contact-layout { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr); align-items: start; gap: clamp(30px, 5vw, 75px); }
.contact-details { position: sticky; top: 115px; padding: 50px 42px 70px; overflow: hidden; background: var(--carbon); color: #fff; clip-path: polygon(0 0,100% 0,100% 93%,88% 100%,0 100%); }
.contact-details::after { content: ''; position: absolute; width: 170px; height: 170px; right: -70px; bottom: -75px; border: 34px solid rgba(224,82,21,.16); transform: rotate(45deg); }
.contact-details h2 { color: #fff; font-size: 2.15rem; }
.contact-details > a { display: block; margin-bottom: 10px; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; transition: color var(--base); }
.contact-details > a:hover { color: var(--brand); }
.contact-details > p { color: var(--on-dark); }
.contact-details dl { margin-top: 42px; }
.contact-details dl > div { padding: 18px 0; border-top: 1px solid var(--border-dark); }
.contact-details dt { margin-bottom: 6px; color: var(--on-dark); font-size: .72rem; text-transform: uppercase; }
.contact-details dd { margin: 0; }
.form-card { position: relative; isolation: isolate; padding: clamp(28px, 5vw, 64px); border-top: 4px solid var(--brand); background: #fff; box-shadow: 0 28px 65px rgba(23,27,35,.09); }
.form-card::before { content: ''; position: absolute; z-index: 0; top: 0; right: 0; width: 120px; height: 120px; background: linear-gradient(135deg, transparent 50%, var(--paper) 50%); pointer-events: none; }
.form-card > * { position: relative; z-index: 1; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.form-head, .wide { grid-column: 1 / -1; }
.form-head { padding-right: 90px; margin-bottom: 12px; }
.form-head h2 { margin-bottom: 12px; }
.form-head > p { color: var(--muted); }
.form-status { min-height: 24px; color: var(--error); font-weight: 700; }
.contact-form label { display: grid; gap: 8px; color: var(--strong); font-size: .86rem; font-weight: 700; }
.contact-form label > span:first-child { font-family: var(--heading); font-size: 1rem; text-transform: uppercase; }
.contact-form input:not([type='checkbox']), .contact-form textarea, .contact-form select { width: 100%; min-height: 56px; padding: 14px 16px; border: 1px solid #cfd2d6; border-radius: 0; -webkit-appearance: none; appearance: none; background-color: var(--paper); color: var(--strong); outline: 0; transition: border-color var(--base), box-shadow var(--base), background var(--base); }
.contact-form input:-webkit-autofill, .contact-form input:-webkit-autofill:hover, .contact-form input:-webkit-autofill:focus, .contact-form textarea:-webkit-autofill, .contact-form select:-webkit-autofill { -webkit-text-fill-color: var(--strong); -webkit-box-shadow: 0 0 0 1000px var(--paper) inset; box-shadow: 0 0 0 1000px var(--paper) inset; caret-color: var(--strong); }
.contact-form textarea { min-height: 170px; resize: vertical; }
.contact-form input:hover, .contact-form textarea:hover, .contact-form select:hover { border-color: #979ca4; background-color: var(--paper); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: var(--brand); background-color: var(--paper); box-shadow: 0 0 0 3px rgba(224,82,21,.18); }
.contact-form [aria-invalid='true'] { border-color: var(--error) !important; }
.field-error { min-height: 17px; color: var(--error); font-size: .75rem; font-weight: 600; }
.math-field { max-width: 410px; padding: 20px; border: 1px solid var(--border); background: var(--paper); }
.math-field small { color: var(--muted); font-weight: 400; }
.consent { grid-template-columns: auto 1fr !important; align-items: start; font-weight: 400 !important; }
.consent input { width: 20px; height: 20px; accent-color: var(--brand); }
.consent a { color: var(--brand-dark); text-decoration: underline; }
.consent small { color: var(--muted); font-size: .78rem; font-weight: 400; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.submit-button { justify-self: start; min-width: 230px; }
.submit-button[disabled] { border-color: #969ba3; background: #969ba3; cursor: wait; }
.submit-loader { position: fixed; z-index: 1800; inset: 0; display: grid; place-items: center; background: rgba(16,19,25,.97); color: #fff; visibility: hidden; opacity: 0; transition: opacity var(--base), visibility var(--base); }
.submit-loader.is-visible { visibility: visible; opacity: 1; }
.submit-loader > div { width: min(80vw, 360px); text-align: center; }
.submit-loader img { width: 270px; margin: auto; }
.submit-loader span { position: relative; width: 100%; height: 3px; margin: 34px 0 20px; display: block; overflow: hidden; background: var(--border-dark); }
.submit-loader span::after { content: ''; position: absolute; inset: 0; background: var(--brand); transform: scaleX(0); transform-origin: left; animation: submit-progress 2.2s var(--ease) forwards; }
.submit-loader p { color: var(--on-dark); font-weight: 700; }
@keyframes submit-progress { to { transform: scaleX(1); } }

/* Subtle roofing-line texture on dark surfaces */
.site-footer, .warranty-band, .company-facts, .workshop-section, .housing-maintenance, .bitumen-focus, .audience-section, .process-story--dark { position: relative; isolation: isolate; }
.site-footer::before, .warranty-band::before, .company-facts::before, .workshop-section::before, .housing-maintenance::before, .bitumen-focus::before, .audience-section::before, .process-story--dark::before { content: ''; position: absolute; z-index: 0; inset: 0; background: repeating-linear-gradient(132deg, transparent 0 48px, rgba(255,255,255,.023) 49px, transparent 50px 98px), radial-gradient(circle at 85% 15%, rgba(255,255,255,.035), transparent 25%); pointer-events: none; }
.site-footer > *, .warranty-band > *, .company-facts > *, .workshop-section > *, .housing-maintenance > *, .bitumen-focus > *, .audience-section > *, .process-story--dark > * { position: relative; z-index: 1; }

/* Footer and floating actions */
.site-footer { background: var(--carbon-deep); color: #fff; }
.footer-main { padding-block: 72px; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 35px; border-bottom: 1px solid var(--border-dark); }
.footer-brand { display: block !important; }
.footer-logo { width: 161px; display: block; align-self: start; }
.footer-logo img { width: 100%; height: auto; }
.footer-brand > p { max-width: 25ch; margin: 18px 0 0; color: var(--on-dark); font-size: .78rem; line-height: 1.55; }
.footer-main > div { display: flex; flex-direction: column; }
.footer-main h2 { margin-bottom: 20px; color: #fff; font-family: var(--body); font-size: .76rem; letter-spacing: .12em; }
.footer-main a { margin-bottom: 9px; color: var(--on-dark); font-size: .83rem; transition: color var(--base), transform var(--base); }
.footer-main a:hover { color: #fff; transform: translateX(3px); }
.footer-main p { color: var(--on-dark); font-size: .83rem; }
.subfooter { min-height: 82px; display: flex; align-items: center; gap: 30px; color: #9298a2; font-size: .72rem; }
.subfooter-links { display: flex; gap: 20px; align-items: center; }
.subfooter a, .subfooter button { transition: color var(--base); }
.subfooter a:hover, .subfooter button:hover { color: #fff; }
.subfooter button { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.site-credit { margin-left: auto; display: flex; align-items: center; gap: 7px; }
.credit-label--mobile { display: none; }
.credit-emoji { filter: grayscale(1); font-size: 1rem; }
.site-credit-tooltip { position: fixed; z-index: 1900; padding: 7px 10px; border: 1px solid var(--border-dark); background: var(--carbon); color: #fff; white-space: nowrap; pointer-events: none; visibility: hidden; opacity: 0; transform: translate(12px, 12px); transition: opacity var(--fast), visibility var(--fast); }
.site-credit:hover .site-credit-tooltip, .site-credit:focus-visible .site-credit-tooltip { visibility: visible; opacity: 1; }
.floating-actions { position: fixed; z-index: 1000; right: 22px; bottom: 22px; display: grid; justify-items: end; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity var(--base), visibility var(--base), transform var(--base); }
.floating-actions.is-visible { opacity: 1; visibility: visible; transform: none; }
.floating-actions.is-over-footer { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(18px); }
.back-to-top, .floating-call { border: 1px solid transparent; box-shadow: 0 14px 35px rgba(0,0,0,.2); transition: transform var(--base), background var(--base), color var(--base); }
.back-to-top { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg,#3b414b,#11151b) padding-box, linear-gradient(135deg,#d9dde2,#5f6671) border-box; color: #fff; font-size: 1.4rem; }
.back-to-top:hover { background: linear-gradient(145deg,#555c68,#171b23) padding-box, linear-gradient(135deg,#fff,#777f8b) border-box; transform: translateY(-3px); }
.floating-call { display: none; min-height: 50px; padding: 0 18px; align-items: center; gap: 10px; background: var(--brand); color: #fff; font-weight: 700; }
.floating-call .line-icon { width: 24px; height: 24px; }
.floating-call:hover { background: var(--brand-dark); transform: translateY(-3px); }
.cookie-banner { position: fixed; z-index: 1500; inset: auto 18px 18px; max-width: 1050px; margin: auto; padding: 26px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; border-top: 3px solid var(--brand); background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.25); transform: translateY(calc(100% + 45px)); visibility: hidden; opacity: 0; transition: transform var(--slow) var(--emphasis), opacity var(--base), visibility var(--base); }
.cookie-banner.is-open { transform: none; visibility: visible; opacity: 1; }
.cookie-banner p { margin: 5px 0 0; color: var(--muted); font-size: .83rem; }
.cookie-banner > div:last-child { display: flex; gap: 10px; }
.cookie-banner .button { min-height: 46px; padding-inline: 18px; font-size: .78rem; }

/* Standalone privacy */
.privacy-page { background: var(--paper); }
.privacy-document { width: min(calc(100% - 2 * var(--gutter)), 78rem); margin: clamp(20px, 4vw, 55px) auto; border: 1px solid var(--border); background: #fff; box-shadow: 0 25px 70px rgba(23,27,35,.08); }
.privacy-document > header { position: relative; padding: clamp(35px, 6vw, 70px); display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; align-items: center; gap: 55px; background: var(--carbon); color: #fff; }
.privacy-document > header > img { width: 220px; }
.privacy-document h1 { color: #fff; font-size: clamp(2.8rem, 4.8vw, 3.8rem); }
.privacy-document > header p { margin: 0; color: var(--on-dark); }
.close-window { padding: 12px 16px; display: inline-flex; align-items: center; gap: 14px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; cursor: pointer; transition: background var(--base), border-color var(--base); }
.close-window:hover { border-color: var(--brand); background: var(--brand); }
.close-window span { font-size: 1.4rem; }
.privacy-content { padding: clamp(35px, 6vw, 80px); display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(45px, 8vw, 110px); }
.privacy-content > nav { position: sticky; top: 30px; align-self: start; display: grid; border-top: 1px solid var(--border); }
.privacy-content > nav a { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: .84rem; transition: color var(--base), padding var(--base); }
.privacy-content > nav a:hover { padding-left: 8px; color: var(--brand); }
.legal section { scroll-margin-top: 30px; padding-bottom: 34px; margin-bottom: 34px; border-bottom: 1px solid var(--border); }
.legal h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
.legal p { max-width: 70ch; }
.legal a { color: var(--brand-dark); text-decoration: underline; }
.privacy-document > footer { padding: 30px clamp(35px, 6vw, 80px); display: flex; align-items: center; gap: 25px; border-top: 1px solid var(--border); }
.privacy-document > footer a { text-decoration: underline; }
.thank-hero { position: relative; min-height: 720px; padding: 145px 0 80px; display: flex; align-items: center; overflow: hidden; background: var(--carbon); color: #fff; }
.thank-hero > img, .thank-hero-overlay { position: absolute; inset: 0; width: 100%; height: 108%; }
.thank-hero > img { object-fit: cover; object-position: center 55%; filter: saturate(.36) contrast(1.15) brightness(.62); }
.thank-hero-overlay { height: 100%; background: linear-gradient(90deg, rgba(16,19,25,.97), rgba(16,19,25,.78) 58%, rgba(16,19,25,.42)); }
.thank-hero > .container { position: relative; z-index: 2; }
.thank-confirmation { width: min(720px, 100%); padding: clamp(32px, 5vw, 62px); border: 1px solid rgba(255,255,255,.24); background: linear-gradient(145deg, rgba(42,48,58,.74), rgba(9,12,17,.88)); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.28); -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05); }
.thank-confirmation-icon { width: 58px; height: 58px; margin-bottom: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: var(--brand); }
.thank-confirmation-icon .line-icon { width: 31px; height: 31px; stroke-width: 2; }
.thank-confirmation h1 { max-width: 14ch; color: #fff; font-size: clamp(3.1rem, 5.3vw, 5.15rem); }
.thank-confirmation > p:not(.eyebrow) { max-width: 58ch; color: var(--on-dark); font-size: clamp(1rem, 1.3vw, 1.15rem); }
.thank-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.thank-next { background: var(--paper); }
.thank-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.thank-next-grid article { min-height: 260px; padding: clamp(28px, 4vw, 46px); border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface-gradient); }
.thank-next-grid article > span { display: block; margin-bottom: 46px; color: var(--brand); font-family: var(--heading); font-size: .82rem; font-weight: 700; }
.thank-next-grid h3 { max-width: 14ch; }
.thank-next-grid p { max-width: 42ch; margin-bottom: 0; color: var(--muted); }
.thank-services { background: var(--carbon); color: #fff; }
.thank-services .section-heading h2 { color: #fff; }
.thank-services .section-heading > p:last-child:not(.eyebrow) { color: var(--on-dark); }
.thank-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.thank-service-card { --corner-cut: 22px; position: relative; overflow: hidden; border: 1px solid var(--border-dark); background: var(--carbon-deep); color: #fff; clip-path: polygon(0 0,100% 0,100% calc(100% - var(--corner-cut)),calc(100% - var(--corner-cut)) 100%,0 100%); transition: transform var(--base) var(--ease), border-color var(--base), box-shadow var(--base); }
.thank-service-card::before { content: ''; position: absolute; z-index: 4; right: 0; bottom: 0; width: var(--corner-cut); height: var(--corner-cut); background: linear-gradient(135deg, transparent 47%, rgba(224,82,21,.72) 48.5% 51.5%, transparent 53%); pointer-events: none; }
.thank-service-card:hover { transform: translateY(-5px); border-color: rgba(224,82,21,.68); box-shadow: 0 22px 48px rgba(0,0,0,.22); }
.thank-service-card figure { height: 225px; margin: 0; overflow: hidden; background: var(--graphite); }
.thank-service-card img { width: 100%; height: 112%; object-fit: cover; filter: saturate(.35) contrast(1.13) brightness(.72); transition: transform var(--slow) var(--emphasis), filter var(--slow); }
.thank-service-card:hover img { transform: scale(1.035); filter: saturate(.48) contrast(1.12) brightness(.78); }
.thank-service-card > div { min-height: 178px; padding: 28px; display: grid; grid-template-columns: 1fr auto; align-content: start; gap: 10px 20px; }
.thank-service-card span:not(.arrow) { color: var(--brand); font-family: var(--heading); font-size: .78rem; font-weight: 700; }
.thank-service-card h3 { margin: 0; color: #fff; }
.thank-service-card p { grid-column: 1 / -1; margin: 4px 0 0; color: var(--on-dark); font-size: .9rem; }
.thank-service-card .arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.status-page { min-height: 100vh; padding: 130px var(--gutter); display: grid; place-items: center; background: var(--carbon); color: #fff; text-align: center; }
.status-page h1 { color: #fff; }
.status-page p { color: var(--on-dark); }

@media (max-width: 1120px) {
  .header-inner { grid-template-columns: 225px 1fr auto; gap: 22px; }
  .site-logo { width: 215px; }
  .site-header.is-solid .site-logo { width: 162px; }
  .nav-links { gap: 18px; }
  .nav-links > a { font-size: .7rem; }
  .nav-cta { padding-inline: 15px; }
  .home-service-grid, .strength-grid, .audience-grid { grid-template-columns: 1fr 1fr; }
  .area-service-grid { grid-template-columns: 1fr 1fr; }
  .warranty-band > .container { grid-template-columns: 1fr 1fr; }
  .company-facts > .container { grid-template-columns: 1fr 1fr; }
  .company-facts article:nth-child(2) { border-right: 1px solid var(--border-dark); }
  .company-facts article:nth-child(-n+2) { border-bottom: 1px solid var(--border-dark); }
}

@media (max-width: 900px) {
  .site-header { height: 82px; background: rgba(16,19,25,.72); }
  .site-header.is-solid { height: 72px; }
  .header-inner { grid-template-columns: 1fr 62px; }
  .site-logo { width: 176px; padding: 6px 0; }
  .site-header.is-solid .site-logo { width: 145px; padding-block: 5px; }
  .nav-cta { display: none; }
  .menu-toggle { position: relative; z-index: 3; justify-self: end; width: 58px; height: 58px; display: grid; place-content: center; gap: 6px; border: 0; background: transparent; color: #fff; cursor: pointer; }
  .menu-toggle span { width: 27px; height: 2px; background: currentColor; transition: transform var(--base) var(--emphasis), opacity var(--fast); }
  .menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .primary-nav { position: fixed; z-index: 1; inset: 0; width: 100%; height: 100dvh; padding: 105px var(--gutter) max(24px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--carbon-deep); transform: translateX(100%); opacity: 0; visibility: hidden; transition: transform var(--slow) var(--emphasis), opacity var(--base), visibility var(--slow); }
  .primary-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav-links { display: grid; gap: 0; }
  .nav-links > a { min-height: 62px; padding: 15px 0; display: flex; align-items: center; border-bottom: 1px solid var(--border-dark); font-family: var(--heading); font-size: clamp(1.55rem, 5vw, 2.25rem); line-height: 1; }
  .nav-links > a::after { bottom: -1px; }
  .mobile-menu-bottom { position: relative; z-index: 2; margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; align-items: stretch; }
  .mobile-menu-actions { display: grid; gap: 10px; }
  .mobile-menu-actions .button { width: 100%; }
  .menu-watermark { position: static; width: min(31vw, 145px); margin: 20px auto 0; display: block; opacity: .11; }
  .home-hero { min-height: 820px; }
  .hero-content { padding-top: 125px; grid-template-columns: 1fr; align-content: center; }
  .hero-copy { max-width: 650px; }
  .scroll-cue { display: none; }
  .fact-bar > .container { grid-template-columns: 1fr 1fr; }
  .fact-bar article:nth-child(2) { border-right: 1px solid var(--border-dark); }
  .fact-bar article:nth-child(-n+2) { border-bottom: 1px solid var(--border-dark); }
  .workshop-grid { grid-template-columns: 1fr; }
  .workshop-grid figure { min-height: 430px; }
  .process-story-grid, .service-layout, .faq-layout, .housing-planning > .container, .housing-reasons > .container, .company-story > .container, .contact-layout, .bitumen-focus-grid, .materials-band > .container, .area-intro-grid { grid-template-columns: 1fr; }
  .process-intro, .service-summary, .faq-layout > .section-heading, .housing-planning > .container > div:first-child, .contact-details { position: static; }
  .process-progress { width: 100%; height: 2px; margin-bottom: 45px; }
  .process-progress span { transform: scaleX(0); transform-origin: left; }
  .process-steps { gap: 28px; }
  .process-steps li { height: 400px; }
  .warranty-band > .container { grid-template-columns: 1fr; }
  .directory-group { grid-template-columns: 1fr; }
  .directory-group > header { border-right: 0; border-bottom: 1px solid var(--border); }
  .area-list a { grid-template-columns: 55px minmax(0, 1fr) 30px; }
  .area-list a p { display: none; }
  .contact-details { margin-bottom: 20px; clip-path: none; }
  .thank-next-grid { grid-template-columns: 1fr; }
  .thank-next-grid article { min-height: 0; }
  .thank-next-grid article > span { margin-bottom: 28px; }
  .thank-service-grid { grid-template-columns: 1fr; }
  .thank-service-card { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(0, 1.1fr); }
  .thank-service-card figure { height: 100%; min-height: 245px; }
  .footer-main { grid-template-columns: 1fr 1fr; }
  .footer-logo { grid-column: 1 / -1; }
  .housing-reasons-grid { grid-template-columns: 1fr; }
  .housing-reasons-grid article { min-height: 260px; margin: -1px 0 0; }
}

@media (max-width: 620px) {
  :root { --gutter: 20px; --section: 4.6rem; }
  h1 { font-size: clamp(2.8rem, 15vw, 4.25rem); line-height: .94; }
  h2 { font-size: clamp(2rem, 9.5vw, 2.85rem); }
  h3 { font-size: clamp(1.3rem, 7vw, 1.75rem); }
  .button { min-height: 52px; padding-inline: 20px; }
  .site-logo { width: 154px; padding-block: 5px; }
  .site-header.is-solid .site-logo { width: 128px; padding-block: 4px; }
  .primary-nav { padding-top: 88px; }
  .nav-links > a { min-height: 55px; font-size: clamp(1.42rem, 7vw, 1.9rem); }
  .mobile-menu-bottom { padding-top: 20px; }
  .mobile-menu-actions .button { min-height: 48px; }
  .home-hero { min-height: 760px; overflow: visible; }
  .home-hero .hero-background { height: calc(100% + 190px); object-position: 82% 55%; }
  .home-hero .hero-overlay { bottom: -270px; }
  .home-hero::after { bottom: -190px; height: 350px; background: linear-gradient(180deg, transparent 0%, rgba(16,19,25,.14) 30%, rgba(244,244,242,.22) 70%, #fff 100%); }
  .hero-content { padding: 105px 0 118px; align-content: start; }
  .hero-copy { padding-top: 55px; }
  .hero-copy h1 { font-size: clamp(2.55rem, 12.5vw, 4.2rem); }
  .hero-copy > p:not(.eyebrow) { font-size: .96rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .inner-hero { min-height: 620px; padding-top: 82px; }
  .inner-hero h1 { max-width: 100%; font-size: clamp(2.45rem, 12vw, 3.35rem); }
  .inner-hero .container > p:not(.eyebrow) { font-size: .98rem; }
  .contact-hero, .text-hero { padding: 160px 0 75px; }
  .fact-bar { margin-top: -78px; padding-bottom: 20px; background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,.46) 56%, rgba(255,255,255,.88) 82%, #fff 100%); }
  .fact-bar > .container { grid-template-columns: 1fr 1fr; }
  .fact-bar article, .fact-bar article:nth-child(2) { min-height: 126px; padding: 18px; display: block; border-right: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); }
  .fact-bar article:nth-child(n+3) { border-bottom: 0; }
  .fact-bar .line-icon { width: 31px; height: 31px; margin-bottom: 13px; }
  .fact-bar strong { font-size: 1rem; }
  .fact-bar span { font-size: .69rem; line-height: 1.35; }
  .home-service-grid, .strength-grid, .audience-grid, .planning-grid, .company-facts > .container, .area-service-grid, .material-list, .before-after-grid { grid-template-columns: 1fr; }
  .service-card > div { min-height: 82px; }
  .strength-grid article { min-height: 245px; padding: 27px; }
  .strength-grid .line-icon { margin-bottom: 36px; }
  .workshop-grid figure { min-height: 300px; }
  .workshop-grid > div { padding: 40px 25px; }
  .housing-maintenance .workshop-grid { grid-template-columns: 1fr; }
  .housing-maintenance .workshop-grid figure { height: 300px; }
  .housing-maintenance .workshop-grid > div { min-height: 0; padding-block: 40px; }
  .process-steps li { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .process-steps figure { min-height: 0; aspect-ratio: 16 / 10; }
  .process-steps li > div { min-height: 270px; padding: 28px; }
  .process-steps h3 { margin-top: 35px; }
  .warranty-numbers { grid-template-columns: 1fr; }
  .warranty-numbers article { min-height: 220px; }
  .warranty-numbers article + article { border-left: 0; border-top: 1px solid var(--border-dark); }
  .audience-grid a { min-height: 240px; }
  .service-summary > .line-icon { margin-bottom: 35px; }
  .service-accordion-item button { min-height: 90px; padding-inline: 4px; grid-template-columns: 38px minmax(0,1fr) 32px; gap: 10px; }
  .service-accordion-panel p { padding: 0 20px 28px 42px; }
  .directory-group > header { padding: 30px 20px; }
  .directory-group h2 { margin-top: 35px; font-size: 2.2rem; }
  .directory-group > div > a { min-height: 118px; padding: 18px 12px; grid-template-columns: 45px minmax(0,1fr) 22px; gap: 12px; }
  .directory-group small { display: none; }
  .material-list article + article { margin-left: 0; margin-top: -1px; }
  .area-list a { min-height: 105px; padding-inline: 5px; grid-template-columns: 42px minmax(0,1fr) 24px; gap: 12px; }
  .area-list h2 { font-size: 2.15rem; }
  .company-facts article, .company-facts article:nth-child(2) { min-height: 220px; border-right: 1px solid var(--border-dark); border-bottom: 1px solid var(--border-dark); }
  .planning-grid article { min-height: 230px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form label, .form-head, .wide { grid-column: 1; }
  .thank-hero { min-height: 680px; padding: 115px 0 55px; }
  .thank-confirmation { padding: 30px 23px 34px; }
  .thank-confirmation-icon { width: 50px; height: 50px; margin-bottom: 24px; }
  .thank-confirmation h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
  .thank-actions { display: grid; }
  .thank-service-card { display: block; }
  .thank-service-card figure { height: 210px; min-height: 0; }
  .form-card { padding: 28px 20px; }
  .form-head { padding-right: 38px; }
  .contact-details { padding: 38px 27px; }
  .submit-button { width: 100%; }
  .faq-list summary { min-height: 78px; font-size: 1.25rem; }
  .faq-answer p { padding-right: 8px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-logo { width: min(44vw, 176px); grid-column: 1; }
  .subfooter { padding-block: 22px; align-items: center; flex-direction: column; gap: 13px; text-align: center; }
  .subfooter-links { order: 2; justify-content: center; }
  .site-credit { order: 3; margin: 0; }
  .credit-label--desktop { display: none; }
  .credit-label--mobile { display: inline; }
  .floating-actions { right: 14px; bottom: 14px; }
  .floating-call { width: 50px; min-height: 50px; padding: 0; display: inline-flex; justify-content: center; border-radius: 50%; background: linear-gradient(145deg,#3b414b 0%,#11151b 58%,#b94717 100%) padding-box, linear-gradient(135deg,#d9dde2,var(--brand)) border-box; }
  .floating-call > span { display: none; }
  .floating-call:hover { background: linear-gradient(145deg,#555c68 0%,#171b23 55%,var(--brand-dark) 100%) padding-box, linear-gradient(135deg,#fff,var(--brand)) border-box; }
  .comparison { aspect-ratio: 4 / 3; }
  .comparison-caption { grid-template-columns: 1fr; }
  .comparison-caption p + p { border-left: 0; border-top: 1px solid var(--border); }
  .comparison-label { top: 12px; }
  .comparison-label--before { left: 12px; }
  .comparison-label--after { right: 12px; }
  .cookie-banner { inset: auto 8px 8px; padding: 20px; grid-template-columns: 1fr; }
  .cookie-banner > div:last-child { flex-direction: column; }
  .cookie-banner .button { width: 100%; }
  .privacy-document { width: calc(100% - 20px); margin: 10px; }
  .privacy-document > header { padding: 30px 22px; grid-template-columns: 1fr; gap: 28px; }
  .privacy-document > header > img { width: 180px; }
  .privacy-document > header .close-window { position: absolute; top: 20px; right: 20px; width: 46px; height: 46px; padding: 0; justify-content: center; }
  .privacy-document > header .close-window { font-size: 0; }
  .privacy-document > header .close-window span { font-size: 1.4rem; }
  .privacy-content { padding: 35px 22px; grid-template-columns: 1fr; }
  .privacy-content > nav { position: static; }
  .privacy-document > footer { padding: 25px 22px; flex-direction: column; align-items: stretch; text-align: center; }
}

@media (max-width: 350px) {
  :root { --gutter: 16px; }
  .site-logo { width: 142px; }
  .site-header.is-solid .site-logo { width: 118px; }
  .inner-hero h1 { font-size: 2.2rem; }
  .hero-copy { padding-top: 42px; }
  .hero-copy h1 { font-size: 2.95rem; }
  .nav-links > a { min-height: 50px; }
  .mobile-menu-actions .button { font-size: .82rem; }
  .menu-watermark { width: 112px; margin-top: 14px; }
  .service-accordion-item button { grid-template-columns: 30px minmax(0,1fr) 30px; gap: 8px; }
  .service-accordion-item button strong { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}