/* ==========================================================================
   BRELLON — Plastering & Finishing Specialists
   Design system: warm stone, graphite, restrained bronze. Square, architectural.
   ========================================================================== */

@font-face { font-family: "Jost"; src: url("/assets/fonts/jost-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("/assets/fonts/cormorant-garamond-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
/* metric-matched fallbacks keep layout stable (CLS) while web fonts load */
@font-face { font-family: "Jost Fallback"; src: local("Arial"); size-adjust: 97%; ascent-override: 104%; descent-override: 30%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"); size-adjust: 86%; ascent-override: 106%; descent-override: 32%; }

:root {
  --stone-0: #fdfcfa;
  --stone-50: #faf8f4;
  --stone-100: #f4f0e9;
  --stone-200: #ebe5da;
  --stone-300: #ddd6ca;
  --concrete: #e3e1dc;
  --grey-400: #a39d94;
  --grey-500: #85807a;
  --grey-600: #5f5a54;
  --graphite: #2e2c29;
  --charcoal: #1f1e1c;
  --charcoal-2: #292826;
  --bronze: #8e6e44;       /* fills (white text 4.7:1) */
  --bronze-dark: #775b37;
  --bronze-text: #7d6039;  /* accent text on light (5.1:1) */
  --champagne: #c7ab7e;    /* accent on dark */
  --line: #ddd6ca;
  --line-dark: rgba(255, 255, 255, .14);

  --serif: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Jost Fallback", Arial, Helvetica, sans-serif;

  --container: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  /* side space that keeps full-width blocks inside the centred content column */
  --edge: max(var(--gutter), calc((100% - var(--container)) / 2));
  --section: clamp(4.5rem, 9vw, 8rem);
  --radius: 2px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 84px;
  --shadow: 0 1px 2px rgba(31, 30, 28, .04), 0 12px 32px -12px rgba(31, 30, 28, .16);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-variant-numeric: lining-nums; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body { margin: 0; background: var(--stone-100); color: var(--graphite); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.12; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 200; background: var(--charcoal); color: #fff; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.icon { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(820px + var(--gutter) * 2); }
.section { padding-block: var(--section); }
.section--flush-top { padding-top: 0; }
.section--alt { background: var(--stone-50); }
.section--dark { background: var(--charcoal); color: #eeeae3; }
.section__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section__head--tight { margin-top: clamp(3rem, 6vw, 4.5rem); }
.section__sub { margin-top: 1rem; max-width: 60ch; color: var(--grey-600); }
.section--dark .section__sub { color: #b9b3aa; }

/* ---------- type ---------- */
.eyebrow { font-family: var(--sans); font-size: .75rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--bronze-text); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; }
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow--light, .section--dark .eyebrow { color: var(--champagne); }
.h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); letter-spacing: -.005em; }
.h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); letter-spacing: 0; }
.muted { color: var(--grey-600); font-size: .9375rem; }
.prose { max-width: 72ch; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 2.2em; margin-bottom: .2em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose ul:not(.ticks):not(.chips):not(.standards):not(.team):not(.accreds) { padding-left: 1.25rem; }
.prose ul:not([class]) li, .prose ol:not([class]) li { margin-bottom: .45em; }
.prose a { color: var(--bronze-text); }
.content section + section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ---------- buttons ---------- */
.btn { --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: var(--h); padding: 0 1.6rem; border: 1px solid transparent; border-radius: var(--radius); font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; line-height: 1.2; white-space: nowrap; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease); }
.btn .icon { width: 1rem; height: 1rem; transition: transform .25s var(--ease); }
.btn:hover .icon:last-child { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--lg { --h: 58px; padding: 0 2rem; }
.btn--sm { --h: 42px; padding: 0 1.1rem; font-size: .75rem; }
.btn--block { width: 100%; }
.btn--primary { background: var(--bronze); color: #fff; }
.btn--primary:hover { background: var(--bronze-dark); }
.btn--outline { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--outline:hover { background: #fff; color: var(--charcoal); border-color: #fff; }
.btn--outline-dark { border-color: var(--graphite); color: var(--graphite); }
.btn--outline-dark:hover { background: var(--graphite); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; }
.link-arrow { display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.5rem; font-size: .8125rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze-text); text-decoration: none; }
.link-arrow .icon { width: 1rem; transition: transform .25s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow--light, .section--dark .link-arrow, .sector--dark .link-arrow { color: var(--champagne); }

/* ---------- preview bar ---------- */
.preview-bar { background: #ece6db; color: #5f5a54; border-bottom: 1px solid #e2dbcf; font-size: .8125rem; text-align: center; padding: .45rem var(--gutter); letter-spacing: .01em; }

/* ---------- header ---------- */



/* mega menu */
@media (hover: hover) and (min-width: 1181px) {
}

/* mobile nav */
@keyframes mnavIn { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- home hero ---------- */
.hero { position: relative; color: #fff; background: var(--charcoal); isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: heroZoom 14s var(--ease) both; }
@keyframes heroZoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24, 23, 21, .86) 0%, rgba(24, 23, 21, .7) 38%, rgba(24, 23, 21, .3) 70%, rgba(24, 23, 21, .45) 100%), linear-gradient(0deg, rgba(24, 23, 21, .55), transparent 40%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3.5rem, 7vw, 6.5rem) clamp(3rem, 5vw, 4.5rem); }
.hero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 1.5rem + 3.9vw, 5rem); line-height: 1.02; letter-spacing: -.01em; max-width: 17ch; }
.hero__lead { margin-top: 1.6rem; max-width: 52ch; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); color: #e8e2d8; }
.hero__areas { display: flex; flex-wrap: wrap; gap: .25rem 0; margin-top: 2.25rem; list-style: none; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; }
.hero__areas li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 .9rem; vertical-align: middle; background: var(--champagne); transform: rotate(45deg); }
.hero__areas a { text-decoration: none; color: #ddd5c8; transition: color .2s; }
.hero__areas a:hover { color: #fff; }
.hero__trust { position: relative; border-top: 1px solid rgba(255, 255, 255, .14); background: rgba(24, 23, 21, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* trust list */
.trust { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; }
.trust li { display: flex; align-items: center; gap: .9rem; padding: 1.35rem 1.25rem; font-size: .8125rem; line-height: 1.4; }
.trust li + li { border-left: 1px solid var(--line); }
.trust .icon { width: 30px; height: 30px; color: var(--bronze); }
.trust strong { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin-bottom: .15rem; }
.trust span { color: var(--grey-600); }
.trust--hero li { padding-inline: 1rem; }
.trust--hero li:first-child { padding-left: 0; }
.trust--hero li + li { border-color: rgba(255, 255, 255, .16); }
.trust--hero .icon, .trust--band .icon { color: var(--champagne); }
.trust--hero span, .trust--band span { color: #bfb8ad; }
.trust--hero strong, .trust--band strong { color: #fff; }
.trust--stack { grid-template-columns: 1fr; border: 1px solid var(--line); background: var(--stone-0); }
.trust--stack li + li { border-left: 0; border-top: 1px solid var(--line); }
.trustband { background: var(--charcoal-2); }
.trustband .trust li { padding-block: 1.9rem; }
.trustband .trust li + li { border-color: var(--line-dark); }

/* ---------- quick form ---------- */
.qform { background: var(--stone-0); color: var(--graphite); padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 1rem; }
.qform__title { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; line-height: 1.1; margin: 0; }
.qform__sub { font-size: .9rem; color: var(--grey-600); margin: -.35rem 0 .25rem; }
.qform__note { display: flex; gap: .5rem; align-items: flex-start; font-size: .78rem; color: var(--grey-600); margin: 0; line-height: 1.5; }
.qform__note .icon { color: var(--bronze); margin-top: .1rem; }
.qform__note a { color: var(--grey-600); }
.qform--panel { box-shadow: none; border: 1px solid var(--line); }
.qform--full { gap: 1.5rem; }
.field { display: grid; gap: .4rem; }
.field label, .field__label, .fs legend { font-size: .8125rem; font-weight: 500; letter-spacing: .02em; color: var(--graphite); }
.fs { display: grid; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.fs legend { float: left; width: 100%; font-family: var(--serif); font-size: 1.35rem; font-weight: 600; margin-bottom: .25rem; }
.fs legend + * { clear: both; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field--half { max-width: calc(50% - .5rem); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; background: var(--stone-50); border: 1px solid var(--stone-300); border-radius: var(--radius); font-size: 1rem; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5a54' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 16px; padding-right: 2.5rem; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--grey-400); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--bronze); background: #fff; box-shadow: 0 0 0 3px rgba(142, 110, 68, .15); }
.field__hint { font-size: .78rem; color: var(--grey-600); margin: 0; }
.field__err { font-size: .8rem; color: #a23b2a; margin: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--stone-300); border-radius: var(--radius); padding: 3px; background: var(--stone-50); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--grey-600); border-radius: 1px; transition: background-color .2s, color .2s; }
.seg input:checked + span, .seg input:checked + .icon + span { background: var(--charcoal); color: #fff; }
.seg input:focus-visible + span, .seg input:focus-visible + .icon + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.seg--lg { display: flex; flex-wrap: wrap; padding: 0; border: 0; background: none; gap: .75rem; }
.seg--lg legend { width: 100%; margin-bottom: .75rem; }
.seg--lg label { flex: 1 1 200px; display: flex; align-items: center; gap: .75rem; border: 1px solid var(--stone-300); padding: 1rem 1.25rem; background: var(--stone-50); transition: border-color .2s, background-color .2s; }
.seg--lg label .icon { width: 1.6rem; height: 1.6rem; color: var(--bronze); }
.seg--lg span { min-height: 0; justify-content: flex-start; font-size: .875rem; color: var(--graphite); background: none !important; }
.seg--lg label:has(input:checked) { border-color: var(--graphite); background: #fff; box-shadow: inset 0 0 0 1px var(--graphite); }
.seg--lg input:checked + .icon + span { color: var(--graphite); }
.check { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; color: var(--grey-600); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--bronze); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- intro ---------- */
.intro__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); }
.intro__lead .h2 { max-width: 19ch; font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); }
.intro__body > p { color: var(--grey-600); font-size: 1.0625rem; }
.intro__body > p:first-child { color: var(--graphite); font-size: 1.1875rem; }
.split-links { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 2.25rem; background: var(--line); border: 1px solid var(--line); }
.split-link { display: flex; align-items: center; gap: 1rem; padding: 1.4rem 1.25rem; background: var(--stone-100); text-decoration: none; transition: background-color .25s; }
.split-link:hover { background: var(--stone-0); }
.split-link > .icon:first-child { width: 28px; height: 28px; color: var(--bronze); }
.split-link > .icon:last-child { margin-left: auto; width: 1rem; color: var(--grey-500); transition: transform .25s var(--ease); }
.split-link:hover > .icon:last-child { transform: translateX(4px); color: var(--bronze); }
.split-link span { font-size: .8125rem; color: var(--grey-600); line-height: 1.45; }
.split-link strong { display: block; font-family: var(--serif); font-size: 1.3rem; font-weight: 600; color: var(--graphite); margin-bottom: .1rem; }

/* ---------- service cards ---------- */
.scards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.scards--4 { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.scard { display: flex; flex-direction: column; background: var(--stone-0); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s var(--ease); position: relative; }
.scard:hover { border-color: var(--grey-400); box-shadow: var(--shadow); }
.scard__media { display: block; overflow: hidden; aspect-ratio: 4 / 2.9; background: var(--stone-200); }
.scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.scard:hover .scard__media img { transform: scale(1.05); }
.scard__body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.15rem 1.25rem; }
.scard__title { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; line-height: 1.15; margin-bottom: .45rem; }
.scard__title a { text-decoration: none; }
.scard__title a::after { content: ""; position: absolute; inset: 0; }
.scard__body p { font-size: .875rem; color: var(--grey-600); line-height: 1.55; margin-bottom: 1rem; }
.scard__more { margin-top: auto; display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--bronze-text); }
.scard__more .icon { width: .9rem; transition: transform .25s var(--ease); }
.scard:hover .scard__more .icon { transform: translateX(4px); }
.more-services { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .9375rem; }
.more-services p { margin: 0; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-600); }
.more-services ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; list-style: none; }
.more-services a { text-decoration: none; border-bottom: 1px solid var(--stone-300); transition: border-color .2s, color .2s; }
.more-services a:hover { color: var(--bronze-text); border-color: var(--bronze); }
.svc-group + .svc-group { margin-top: clamp(3.5rem, 6vw, 5rem); }
.svc-group__head { display: grid; grid-template-columns: 1fr 2fr; gap: 2rem; align-items: baseline; padding-bottom: 1.25rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--line); }
.svc-group__head p { margin: 0; color: var(--grey-600); }

/* ---------- sectors split ---------- */
.sectors { display: grid; grid-template-columns: 1fr 1fr; margin-inline: var(--edge); }
.sector { display: grid; grid-template-rows: auto 1fr; background: var(--stone-200); }
.sector--dark { background: var(--charcoal-2); color: #eeeae3; }
.sector__media { aspect-ratio: 16 / 10; overflow: hidden; }
.sector__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.sector:hover .sector__media img { transform: scale(1.03); }
.sector__body { padding: clamp(2rem, 5vw, 4.5rem); max-width: 720px; }
.sector__body > p { color: var(--grey-600); margin-top: 1.25rem; }
.sector--dark .sector__body > p { color: #bdb6ab; }
.sector--text { grid-template-rows: 1fr; }
.sector--text .sector__body { padding-block: clamp(3rem, 6vw, 5rem); }

/* ticks & chips */
.ticks { list-style: none; display: grid; gap: .7rem; margin-top: 1.5rem; }
.ticks li { display: flex; gap: .75rem; align-items: flex-start; }
.ticks .icon { width: 1.1rem; height: 1.1rem; margin-top: .25rem; color: var(--bronze); }
.sector--dark .ticks .icon, .section--dark .ticks .icon { color: var(--champagne); }
.ticks--cols { grid-template-columns: 1fr 1fr; gap: .85rem 2rem; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.chips li { padding: .45rem .9rem; border: 1px solid var(--stone-300); background: var(--stone-0); font-size: .875rem; }

/* ---------- project cards ---------- */
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 2vw, 2rem) clamp(1rem, 1.6vw, 1.5rem); }
.pcard__link { display: block; text-decoration: none; }
.pcard__media { position: relative; overflow: hidden; aspect-ratio: 4 / 2.9; background: var(--stone-200); }
.pcard--dark .pcard__media { background: #2c2a27; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .6s; }
.pcard__link:hover .pcard__media img { transform: scale(1.05); }
.pcard__body { padding-top: 1.1rem; border-bottom: 1px solid var(--line); padding-bottom: 1.1rem; }
.pcard--dark .pcard__body { border-color: var(--line-dark); }
.pcard__title { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; line-height: 1.15; transition: color .2s; }
.pcard__link:hover .pcard__title { color: var(--bronze-text); }
.pcard--dark .pcard__link:hover .pcard__title { color: var(--champagne); }
.pcard__meta { display: flex; align-items: center; gap: .4rem; margin: .45rem 0 0; font-size: .875rem; color: var(--grey-600); }
.pcard--dark .pcard__meta { color: #b9b2a7; }
.pcard__meta .icon { width: .95rem; color: var(--bronze); }
.pcard--dark .pcard__meta .icon { color: var(--champagne); }
.pcard__svc { margin: .2rem 0 0; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-500); }
.pcard--dark .pcard__svc { color: #9a9389; }
.tag { position: absolute; top: 1rem; left: 1rem; padding: .35rem .65rem; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; background: var(--stone-0); color: var(--graphite); }
.tag--commercial { background: var(--charcoal); color: #fff; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.filter { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 1.1rem; border: 1px solid var(--stone-300); background: transparent; border-radius: var(--radius); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; transition: all .2s; }
.filter span { font-size: .72rem; color: var(--grey-500); letter-spacing: 0; }
.filter:hover { border-color: var(--graphite); }

/* ---------- process ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: s; border-top: 1px solid var(--line); }
.section--dark .steps { border-color: var(--line-dark); }
.step { position: relative; padding: 2rem 1.5rem 0 0; }
.step::before { content: ""; position: absolute; top: -1px; left: 0; width: 44px; height: 2px; background: var(--bronze); }
.section--dark .step::before { background: var(--champagne); }
.step__n { display: block; font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--bronze-text); letter-spacing: .08em; }
.section--dark .step__n { color: var(--champagne); }
.step__i { width: 32px; height: 32px; margin: 1.25rem 0 1rem; color: var(--graphite); }
.section--dark .step__i { color: #eeeae3; }
.step__t { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; margin-bottom: .5rem; }
.step p { font-size: .9rem; color: var(--grey-600); }
.section--dark .step p { color: #b3aca1; }

/* ---------- areas / map ---------- */
.areas-sec__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.region-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; margin-top: 2.5rem; }
.region-list__item { padding-top: 1rem; border-top: 1px solid var(--line); }
.region-list h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; }
.region-list h3 a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.region-list h3 .icon { width: 1.1rem; color: var(--bronze); }
.region-list p { margin-top: .35rem; font-size: .9rem; color: var(--grey-600); }
.region-list p a { color: var(--graphite); }
.cmap { margin: 0; color: var(--graphite); }
.cmap svg { width: 100%; height: auto; }
.cmap__zone { fill: var(--stone-200); stroke: var(--grey-400); stroke-width: 1; transition: fill .3s; }
.cmap a:hover .cmap__zone, .cmap a:focus .cmap__zone { fill: #e2d4bd; }
.cmap__dot { fill: var(--bronze); }
.cmap__label { font-family: var(--serif); font-size: 21px; font-weight: 600; fill: var(--graphite); }
.cmap figcaption { font-size: .75rem; color: var(--grey-600); text-align: center; margin-top: .5rem; }
.region-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.region-card { background: var(--stone-50); padding: 1.75rem; display: flex; flex-direction: column; }
/* odd count: the last card spans the row instead of leaving an empty beige cell */
.region-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.region-card h2 a { text-decoration: none; }
.region-card > p { font-size: .9rem; color: var(--grey-600); margin-top: .6rem; }
.region-card ul { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .25rem; font-size: .9rem; }
.region-card .link-arrow { margin-top: auto; padding-top: 1.25rem; }
.area-links { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; }
.area-links h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; padding-bottom: .6rem; margin-bottom: .6rem; border-bottom: 1px solid var(--line); }
.area-links h3 a, .area-links li a { text-decoration: none; }
.area-links ul { list-style: none; display: grid; gap: .35rem; font-size: .9rem; color: var(--grey-600); }
.area-links li a:hover { color: var(--bronze-text); }
.area-links .is-strong { color: var(--graphite); font-weight: 500; }
.clusters { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin-top: 1.5rem; }
.clusters h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; margin-bottom: .35rem; }
.clusters p { font-size: .9rem; color: var(--grey-600); }
.clusters a { color: var(--graphite); font-weight: 500; }
.cov { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
.cov > div:first-child > p { margin-top: 1.25rem; color: var(--grey-600); }
.cov > div:first-child > p a { color: var(--graphite); }

/* ---------- testimonials ---------- */
.testis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.testi { margin: 0; padding: 2rem; background: var(--stone-0); border: 1px solid var(--line); display: flex; flex-direction: column; }
.testi__q { width: 28px; height: 28px; color: var(--champagne); margin-bottom: 1.25rem; }
.testi blockquote { margin: 0 0 1.5rem; font-family: var(--serif); font-size: 1.35rem; line-height: 1.35; font-weight: 500; }
.testi figcaption { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .875rem; }
.testi figcaption strong { display: block; font-weight: 500; }
.testi figcaption span { color: var(--grey-600); }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(2rem, 6vw, 6rem); }
.faq__head p:last-child { margin-top: 1.25rem; color: var(--grey-600); }
.faq__head a { color: var(--bronze-text); }
.faq__list { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.4rem 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; }
.faq__item summary .icon { color: var(--bronze); transition: transform .3s var(--ease); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__item summary:hover h3 { color: var(--bronze-text); }
.faq__a { padding: 0 3rem 1.5rem 0; color: var(--grey-600); }

/* ---------- article cards ---------- */
.acards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.acard__link { display: block; text-decoration: none; }
.acard__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone-200); margin-bottom: 1.1rem; }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.acard__link:hover img { transform: scale(1.04); }
.acard__meta { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-600); margin-bottom: .5rem; }
.acard__title { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.2; transition: color .2s; }
.acard__link:hover .acard__title { color: var(--bronze-text); }
.acard .link-arrow { margin-top: .9rem; }
.alead { margin-bottom: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.alead__link { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; text-decoration: none; }
.alead__media { overflow: hidden; aspect-ratio: 16 / 10; }
.alead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.alead__link:hover img { transform: scale(1.03); }
.alead__body > p:not(.acard__meta) { color: var(--grey-600); margin-top: 1.25rem; }

/* ---------- page hero ---------- */
.phero { background: var(--stone-50); border-bottom: 1px solid var(--line); }
.phero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem); }
.phero__grid:has(> :only-child) { grid-template-columns: 1fr; }
.phero__grid:has(> :only-child) .phero__title { max-width: 22ch; }
.phero__title { font-family: var(--serif); font-weight: 500; font-size: clamp(2.4rem, 1.5rem + 3vw, 4.25rem); line-height: 1.04; letter-spacing: -.01em; }
.phero__lead { margin-top: 1.5rem; font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem); color: var(--grey-600); max-width: 56ch; }
.phero__media { aspect-ratio: 5 / 4; overflow: hidden; background: var(--stone-200); }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero--dark { background: var(--charcoal); color: #fff; border: 0; }
.phero--dark .phero__lead { color: #c9c2b7; }
.crumbs { margin-bottom: clamp(2rem, 4vw, 3.5rem); font-size: .8125rem; color: var(--grey-600); }
.crumbs ol { display: flex; flex-wrap: wrap; list-style: none; gap: .25rem; }
.crumbs li + li::before { content: "/"; margin: 0 .5rem; color: var(--grey-400); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--bronze-text); text-decoration: underline; }
.crumbs--light { color: #bdb6ab; }
.crumbs--light a:hover { color: #fff; }
.crumbs--light li + li::before { color: #6f6a63; }

/* answer (AEO) block */
.answer { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--stone-0); border: 1px solid var(--line); border-left: 3px solid var(--bronze); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: 900px; }
.answer__label { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--bronze-text); margin-bottom: .75rem; }
.answer__label .icon { width: 1rem; }
.answer__q { font-family: var(--serif); font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); font-weight: 600; margin-bottom: .6rem; }
.answer__a { font-size: 1.0625rem; margin: 0; }

/* content + sidebar */
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.content-side { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; }
.toc { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.toc__t { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--grey-600); margin-bottom: .75rem; }
.toc ol { list-style: none; display: grid; gap: .1rem; counter-reset: t; }
.toc a { display: block; padding: .3rem 0; font-size: .9rem; text-decoration: none; color: var(--grey-600); transition: color .2s, transform .2s; }
.toc a:hover { color: var(--graphite); transform: translateX(3px); }
.toc--inline { margin-bottom: 2.5rem; }
.toc--inline ol { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 1.5rem; }
.aside-cta { background: var(--charcoal); color: #eeeae3; padding: 1.75rem; display: grid; gap: .75rem; }
.aside-cta__t { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; line-height: 1.15; margin: 0; color: #fff; }
.aside-cta > p:not(.aside-cta__t) { font-size: .9rem; color: #bdb6ab; margin: 0 0 .5rem; }
.aside-cta__line { display: flex; align-items: center; gap: .65rem; padding: .55rem 0; border-top: 1px solid var(--line-dark); font-size: .9rem; text-decoration: none; }
.aside-cta__line .icon { color: var(--champagne); width: 1rem; }
.aside-cta__line:hover { color: #fff; }
.quote-side .aside-cta__line { border-color: var(--line); }
.quote-side .aside-cta__line .icon { color: var(--bronze); }

/* ---------- residential / commercial ---------- */
.type-grid { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.type-grid li { padding: 1.5rem 1.4rem 1.75rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .25s; }
.type-grid li:hover { background: var(--stone-0); }
.type-grid h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 600; margin-bottom: .4rem; }
.type-grid p { font-size: .9rem; color: var(--grey-600); }
.media-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.media-split__media { aspect-ratio: 5 / 4; overflow: hidden; }
.media-split__media img { width: 100%; height: 100%; object-fit: cover; }
.client-strip { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: baseline; padding-top: 2rem; border-top: 1px solid var(--line); }
.client-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: .75rem 0; }
.client-strip li { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; }
.client-strip li:not(:last-child)::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 1.1rem; vertical-align: middle; background: var(--bronze); transform: rotate(45deg); }
.feature-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.75rem 3rem; }
.feature-grid li { padding-top: 1.5rem; border-top: 1px solid var(--line); }
.feature-grid .icon { width: 32px; height: 32px; color: var(--bronze); margin-bottom: 1.1rem; }
.feature-grid h3 { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; margin-bottom: .5rem; }
.feature-grid p { font-size: .9375rem; color: var(--grey-600); }
.sector-tiles { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.sector-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--charcoal); }
.sector-tile img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform .9s var(--ease), opacity .4s; }
.sector-tile:hover img { transform: scale(1.05); opacity: .7; }
.sector-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20, 19, 18, .75), transparent 55%); }
.sector-tile span { position: absolute; z-index: 1; left: 1.25rem; bottom: 1.1rem; color: #fff; font-family: var(--serif); font-size: 1.5rem; font-weight: 500; }
.tender { background: var(--stone-200); }
.tender__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.tender__copy > p { color: var(--grey-600); margin-top: 1.25rem; }
.tender__alt { font-size: .9375rem; }
.tender__alt a { color: var(--graphite); }
.tender .qform { background: var(--stone-0); }

/* ---------- project page ---------- */
.project-hero { position: relative; color: #fff; background: var(--charcoal); min-height: min(78vh, 760px); display: flex; align-items: flex-end; isolation: isolate; }
.project-hero__media { position: absolute; inset: 0; z-index: -1; }
.project-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.project-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(22, 21, 19, .88) 0%, rgba(22, 21, 19, .35) 55%, rgba(22, 21, 19, .35) 100%); }
.project-hero__copy { padding-block: 3rem clamp(3rem, 6vw, 5rem); }
.project-hero .crumbs { margin-bottom: 2rem; }
.project-hero .phero__title { max-width: 18ch; }
.project-hero .phero__lead { color: #ddd6cb; }
.sample-flag { display: inline-block; margin-top: 1.5rem; padding: .35rem .7rem; border: 1px dashed rgba(255, 255, 255, .5); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: #e6dccb; }
.facts { background: var(--stone-0); border-bottom: 1px solid var(--line); }
.facts__list { display: grid; grid-template-columns: repeat(6, 1fr); }
.facts__list > div { padding: 1.5rem 1.25rem 1.5rem 0; }
.facts__list > div + div { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.facts dt { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-600); margin-bottom: .35rem; }
.facts dd { font-size: .9375rem; font-weight: 500; line-height: 1.45; }
.facts dd a { text-decoration: none; border-bottom: 1px solid var(--stone-300); }
.facts dd a:hover { border-color: var(--bronze); }
.cs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cs { padding: 2rem; background: var(--stone-50); }
.cs--solution { background: var(--charcoal); color: #eeeae3; }
.cs h2 { margin-bottom: .75rem; }
.cs p { color: var(--grey-600); }
.cs--solution p { color: #c4bdb2; }
.gallery + .gallery { margin-top: 2.75rem; }
.gallery__t { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; color: var(--grey-600); margin-bottom: 1rem; display: flex; align-items: center; gap: 1rem; }
.gallery__t::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* one tile size for every gallery row (1, 2 or 3 photos), so before / during / after line up
   and a single photo no longer leaves an empty column beside it */
.gallery__grid, .gallery__grid--1, .gallery__grid--2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.gallery__item { position: relative; display: block; padding: 0; border: 0; background: var(--stone-200); overflow: hidden; aspect-ratio: 3 / 2; cursor: zoom-in; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery__item:hover img { transform: scale(1.04); }
.related-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.related-cols--2 { grid-template-columns: 1fr 1fr; margin-top: 3rem; }
.link-list { list-style: none; border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; text-decoration: none; transition: color .2s, padding .25s var(--ease); }
.link-list a .icon { width: 1rem; color: var(--grey-500); transition: transform .25s var(--ease), color .2s; }
.link-list a:hover { color: var(--bronze-text); }
.link-list a:hover .icon { transform: translateX(4px); color: var(--bronze); }
.link-list--inline { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; margin-top: 1.5rem; }

/* ---------- about ---------- */
.about-grid { max-width: 980px; }
.standards { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin-top: 1.25rem; }
.standards li { padding-top: 1rem; border-top: 1px solid var(--line); }
.standards h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; margin: 0 0 .3rem !important; }
.standards p { font-size: .9375rem; color: var(--grey-600); }
.plain-steps { padding-left: 1.25rem; display: grid; gap: .6rem; }
.placeholder { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.25rem; border: 1px dashed var(--grey-400); background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(142, 110, 68, .04) 10px 20px); font-size: .875rem; color: var(--grey-600); }
.placeholder .icon { color: var(--bronze); margin-top: .15rem; }
.accreds { list-style: none; display: grid; gap: .6rem; }
.accreds li { display: flex; align-items: center; gap: .6rem; }
.accreds .icon { color: var(--bronze); }

/* ---------- article ---------- */
.article__head { background: var(--stone-50); padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.article__meta { margin-top: 1.5rem; font-size: .875rem; color: var(--grey-600); }
/* banner matches the article column (title, summary and text) instead of the full page width */
.article__media { margin-top: calc(-1 * clamp(0rem, 1vw, 1rem)); max-width: calc(820px + var(--gutter) * 2); }
.article__media img { width: 100%; aspect-ratio: 20 / 9; object-fit: cover; }
.article__body { padding-block: clamp(3rem, 6vw, 4.5rem) var(--section); }
.article__body .prose { font-size: 1.125rem; max-width: none; }
.article__cta { margin-top: 3.5rem; padding: 2.25rem; background: var(--stone-200); }
.article__cta .h3 { margin-bottom: .5rem; }
.article__cta .btn-row { margin-top: 1.5rem; }

/* ---------- contact & quote ---------- */
.contact-grid, .quote-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; padding-top: 2.5rem; }
.quote-grid { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
.contact-cards { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.contact-cards a { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.4rem; background: var(--stone-0); text-decoration: none; transition: background-color .2s; }
.contact-cards a:hover { background: var(--stone-50); }
.contact-cards .icon { width: 26px; height: 26px; color: var(--bronze); }
.contact-cards span { display: grid; font-size: 1.0625rem; }
.contact-cards strong { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--grey-600); }
.contact-block { margin-top: 2.5rem; }
.contact-block .h3 { margin-bottom: 1rem; }
.hours > div { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.hours { margin-bottom: 1rem; }
.quote-side { position: sticky; top: calc(var(--header-h) + 1.5rem); display: grid; gap: 1.5rem; }
.quote-side__block { padding: 1.75rem; background: var(--stone-0); border: 1px solid var(--line); }
.quote-side__block .h3 { margin-bottom: 1rem; }
.center-page { min-height: 60vh; display: grid; align-items: center; }
.sitemap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; padding-top: 2.5rem; }
.sitemap-grid .h3 { margin-bottom: 1rem; }

/* ---------- CTA band & footer ---------- */
.cta-band { background: var(--bronze); color: #fff; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; right: -120px; top: -160px; width: 520px; height: 520px; border: 1px solid rgba(255, 255, 255, .16); transform: rotate(45deg); }
.cta-band__inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: center; padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.cta-band .eyebrow { color: #f1e6d4; }
.cta-band__title { font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 500; max-width: 24ch; }
.cta-band__text { margin-top: 1rem; color: #f3ebdf; max-width: 50ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .875rem; justify-content: flex-end; align-items: center; }
.cta-band .btn--primary { background: var(--charcoal); }
.cta-band .btn--primary:hover { background: #000; }
.cta-band__phone { width: 100%; text-align: right; display: inline-flex; justify-content: flex-end; align-items: center; gap: .5rem; font-size: 1.25rem; text-decoration: none; font-family: var(--serif); font-weight: 600; }

/* mobile sticky CTA */



/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1320px) {
  .scards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media (max-width: 1180px) {
  :root { --header-h: 72px; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__form { max-width: 640px; }
  .trust { grid-template-columns: repeat(3, 1fr); }
  .trust li:nth-child(4) { border-left: 0; }
  .trust li:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .trust--hero li:nth-child(n + 4) { border-top-color: rgba(255, 255, 255, .16); }
  .trustband .trust li:nth-child(n + 4) { border-top-color: var(--line-dark); }
  .trust--hero li:nth-child(4) { padding-left: 0; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
  .area-links { grid-template-columns: repeat(3, 1fr); }
  .facts__list { grid-template-columns: repeat(3, 1fr); }
  .facts__list > div:nth-child(4) { padding-left: 0; border-left: 0; }
  .facts__list > div:nth-child(n + 4) { border-top: 1px solid var(--line); }
  .type-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 4-up service cards on tablets: 2 columns, or 3 when the count divides by 3, so rows stay complete */
@media (min-width: 701px) and (max-width: 1180px) {
  .scards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scards--4:has(> :last-child:nth-child(3n)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1181px) {
  .scards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scards--4:has(> :last-child:nth-child(3n)):not(:has(> :last-child:nth-child(4n))) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .intro__grid, .areas-sec__grid, .faq, .media-split, .tender__grid, .contact-grid, .quote-grid, .cov, .alead__link, .phero__grid, .content-grid { grid-template-columns: minmax(0, 1fr); }
  .content-side, .quote-side { position: static; }
  .content-side .toc { display: none; }
  .phero__media { aspect-ratio: 16 / 10; order: -1; }
  .phero__grid { padding-top: 1.25rem; }
  .phero__copy .crumbs { margin-top: 1.5rem; }
  .sectors { grid-template-columns: 1fr; }
  .testis, .feature-grid { grid-template-columns: 1fr 1fr; }
  /* project / article cards and sector tiles usually come in threes: keep 3 across on tablets */
  .pcards, .acards, .sector-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section__head { flex-direction: column; align-items: flex-start; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band__actions { justify-content: flex-start; }
  .cta-band__phone { justify-content: flex-start; text-align: left; }
  .related-cols, .sitemap-grid { grid-template-columns: 1fr 1fr; }
  .cmap { max-width: 520px; margin-inline: auto; }
  .client-strip { grid-template-columns: 1fr; gap: .5rem; }
  .svc-group__head { grid-template-columns: 1fr; gap: .5rem; }
}
@media (max-width: 700px) {
  body { font-size: 1rem; padding-bottom: 64px; }
  .hero__grid { padding-top: 2.75rem; }
  .hero__title { font-size: clamp(2.3rem, 9.5vw, 3rem); }
  .hero__areas { font-size: .72rem; }
  .hero__areas li + li::before { margin: 0 .55rem; }
  .btn-row .btn { flex: 1 1 100%; }
  .trust { grid-template-columns: 1fr 1fr; }
  .trust li { padding: 1rem .75rem; }
  .trust li:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .trust li:nth-child(even) { border-left: 1px solid var(--line); }
  .trust li:nth-child(-n + 2) { border-top: 0; }
  .trust--hero li:nth-child(n), .trustband .trust li:nth-child(n) { border-color: rgba(255, 255, 255, .14); }
  .trust--hero li { padding-left: .75rem !important; }
  .trust li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .trust .icon { width: 24px; height: 24px; }
  .trust strong { font-size: .68rem; letter-spacing: .1em; }
  .trust--stack { grid-template-columns: 1fr; }
  .trust--stack li:nth-child(n) { border-left: 0; border-top: 1px solid var(--line); }
  .trust--stack li:first-child { border-top: 0; }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .field--half { max-width: none; }
  .split-links, .region-list, .ticks--cols, .clusters, .standards, .cs-grid, .related-cols, .related-cols--2, .link-list--inline, .sitemap-grid { grid-template-columns: 1fr; }
  .scards, .scards--4 { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .scard__body { padding: .9rem .85rem 1rem; }
  .scard__title { font-size: 1.25rem; }
  .scard__body p { font-size: .8125rem; }
  .pcards, .acards, .testis, .feature-grid { grid-template-columns: 1fr; }
  .sector-tiles, .type-grid { grid-template-columns: 1fr 1fr; }
  .sector-tile span { font-size: 1.2rem; left: .9rem; bottom: .8rem; }
  /* odd count: last tile spans both columns at the same height as the others */
  .sector-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 8 / 3; }
  .type-grid li { padding: 1.1rem 1rem 1.25rem; }
  .type-grid h3 { font-size: 1.2rem; }
  .steps { grid-template-columns: 1fr; row-gap: 0; border-top: 0; }
  .step { display: grid; grid-template-columns: 44px 1fr; column-gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--line); }
  .section--dark .step { border-color: var(--line-dark); }
  .step__i { display: none; }
  .step__n { grid-row: span 2; padding-top: .3rem; }
  .step__t { font-size: 1.3rem; }
  .area-links { grid-template-columns: 1fr 1fr; }
  .facts__list { grid-template-columns: 1fr 1fr; }
  .facts__list > div:nth-child(n) { padding: 1rem 1rem 1rem 0; border-left: 0; border-top: 1px solid var(--line); }
  .facts__list > div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--line); }
  .facts__list > div:nth-child(-n + 2) { border-top: 0; }
  .gallery__grid, .gallery__grid--1, .gallery__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .gallery__grid > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
  .region-cards { grid-template-columns: 1fr; }
  .faq__a { padding-right: 0; }
  .project-hero { min-height: 70vh; }
  .cookie__inner { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.1rem; }
}
@media (max-width: 420px) {
  .scards, .scards--4 { grid-template-columns: 1fr; }
  .scard { display: grid; grid-template-columns: 120px 1fr; }
  .scard__media { aspect-ratio: auto; height: 100%; }
  .area-links { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}
@media print {
  .header, .mobile-bar, .footer, .cookie, .cta-band, .hero__form, .content-side { display: none !important; }
  body { background: #fff; }
}

/* ---------- refinements ---------- */
.content .cs-grid .cs { margin-top: 0; }
.project-hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(22, 21, 19, .72) 0%, rgba(22, 21, 19, .2) 60%, transparent 100%); }
@media (max-width: 700px) {
}
@media (max-width: 480px) {
}
.qform { grid-template-columns: minmax(0, 1fr); }
.field input, .field select, .field textarea { min-width: 0; }
.trust.trust--stack { grid-template-columns: 1fr; }
.trust.trust--stack li { border-left: 0; padding: 1.1rem 1.25rem; }
.trust.trust--stack li + li { border-top: 1px solid var(--line); }
@media (min-width: 1181px) and (max-width: 1400px) {
}
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
}
@media (max-width: 960px) { .sectors { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) { .trust:not(.trust--stack) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trust strong { overflow-wrap: anywhere; } }
.sector { grid-template-columns: minmax(0, 1fr); }


/* ==========================================================================
   No-JavaScript components
   ========================================================================== */

/* native validation feedback (only after the user has interacted) */
.field input:user-invalid, .field select:user-invalid, .field textarea:user-invalid { border-color: #a23b2a; background: #fbf4f2; }
.check input:user-invalid + span { color: #a23b2a; }

/* file upload */
.field--file input[type="file"] { width: 100%; padding: .9rem; border: 1px dashed var(--grey-400); background: var(--stone-50); border-radius: var(--radius); font-size: .875rem; color: var(--grey-600); cursor: pointer; }
.field--file input[type="file"]:hover { border-color: var(--bronze); background: #fff; }
.field--file input[type="file"]::file-selector-button { margin-right: 1rem; padding: .6rem 1rem; border: 0; border-radius: var(--radius); background: var(--charcoal); color: #fff; font: 500 .75rem var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

/* quote form: commercial fields appear when "Commercial" is selected (fallback: always visible) */
.fs__note { font-family: var(--sans); font-size: .8125rem; font-weight: 400; color: var(--grey-600); }
@supports selector(:has(*)) {
  .fs--commercial { display: none; }
  .qform:has(input[name="sector"][value="Commercial"]:checked) .fs--commercial { display: grid; }
  .fs__note { display: none; }
}

/* project filters — radio buttons + labels */
.pf-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.filter { cursor: pointer; user-select: none; }
#pf-all:checked ~ .filters [for="pf-all"], #pf-res:checked ~ .filters [for="pf-res"], #pf-com:checked ~ .filters [for="pf-com"] { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
#pf-all:checked ~ .filters [for="pf-all"] span, #pf-res:checked ~ .filters [for="pf-res"] span, #pf-com:checked ~ .filters [for="pf-com"] span { color: var(--champagne); }
#pf-all:focus-visible ~ .filters [for="pf-all"], #pf-res:focus-visible ~ .filters [for="pf-res"], #pf-com:focus-visible ~ .filters [for="pf-com"] { outline: 2px solid var(--bronze); outline-offset: 3px; }
#pf-res:checked ~ .pcards .pcard:not([data-sector="residential"]), #pf-com:checked ~ .pcards .pcard:not([data-sector="commercial"]) { display: none; }

/* photo lightbox — CSS :target */
.lb { position: fixed; inset: 0; z-index: 300; display: none; place-items: center; padding: 4rem 1rem 2rem; }
.lb:target { display: grid; animation: lbIn .3s var(--ease); }
@keyframes lbIn { from { opacity: 0; } }
.lb__bg { position: absolute; inset: 0; background: rgba(20, 19, 18, .92); cursor: zoom-out; }
.lb__fig { position: relative; margin: 0; max-width: min(1400px, 100%); }
.lb__fig img { max-height: 82vh; width: auto; margin: 0 auto; }
.lb__fig figcaption { color: #d7d0c5; text-align: center; font-size: .875rem; margin-top: .75rem; }
.lb__close { position: absolute; top: 1rem; right: 1rem; width: 48px; height: 48px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .3); }
.lb__close .icon { width: 1.4rem; height: 1.4rem; }
.gallery__item { cursor: zoom-in; }
.eyebrow--spaced { margin-top: 2rem; }

/* subtle section reveal — CSS scroll-driven animations (progressive enhancement, no JS) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .scard, .pcard, .step, .acard, .testi, .feature-grid li, .type-grid li, .sector-tile, .region-list__item {
      animation: revealUp linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
    @keyframes revealUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
  }
}

@media (max-width: 1180px) {
}
@media (max-width: 700px) {
}
@media (max-width: 480px) {
  .lb { padding-top: 4.5rem; }
}

/* ==========================================================================
   Scale & lightness refinements
   1) Slightly smaller overall UI (no CSS zoom): the rem base drops 16px → 15px,
      so type and spacing shrink proportionally; px-based sizes are trimmed below.
   2) Very dark content sections are replaced with light stone / beige surfaces.
      Dark tones remain only where they aid legibility (text over photography),
      in small UI details, and in the footer.
   ========================================================================== */

/* ---------- 1. Scale ---------- */
html { font-size: 93.75%; }
:root { --header-h: 76px; --section: clamp(3.75rem, 7.5vw, 6.5rem); }
@media (max-width: 1180px) { :root { --header-h: 64px; } }

.btn { --h: 48px; }
.btn--lg { --h: 52px; }
.btn--sm { --h: 38px; }
.h2 { font-size: clamp(1.85rem, 1.3rem + 1.9vw, 2.85rem); }
.h3 { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem); }
.hero__title { font-size: clamp(2.35rem, 1.4rem + 3.2vw, 4.25rem); max-width: 18ch; }
.phero__title { font-size: clamp(2.15rem, 1.4rem + 2.5vw, 3.6rem); }
.hero__grid { grid-template-columns: minmax(0, 1fr) 390px; padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 4.5vw, 4rem); }
.phero__grid { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(2.5rem, 5vw, 4.25rem); }
.content-grid { grid-template-columns: minmax(0, 1fr) 320px; }
.trust .icon { width: 26px; height: 26px; }
.trust li { padding: 1.2rem 1.1rem; }
.feature-grid .icon, .step__i { width: 28px; height: 28px; }
.contact-cards .icon { width: 24px; height: 24px; }
.field input, .field select, .field textarea { min-height: 46px; font-size: max(16px, 1rem); } /* 16px min stops iOS zooming into inputs */
.field textarea { min-height: 110px; }
.qform { padding: clamp(1.4rem, 2.6vw, 2rem); gap: .9rem; }
.qform__title { font-size: 1.75rem; }
.section__head { margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.scard__title { font-size: 1.35rem; }
.pcard__title { font-size: 1.45rem; }
.acard__title, .step__t, .feature-grid h3, .type-grid h3 { font-size: 1.35rem; }
.cta-band__title { font-size: clamp(1.85rem, 1.35rem + 1.7vw, 2.7rem); }
.cta-band__inner { padding-block: clamp(3rem, 6vw, 4.5rem); }
.project-hero { min-height: min(70vh, 680px); }
@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .content-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .content-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .hero__title { font-size: clamp(2.1rem, 8.6vw, 2.75rem); }
}

/* ---------- 2. Lighter sections ---------- */
/* content sections formerly charcoal → warm beige */
.section--dark { background: var(--stone-200); color: var(--graphite); }
.section--dark .section__sub { color: var(--grey-600); }
.section--dark .eyebrow { color: var(--bronze-text); }
.section--dark .link-arrow, .sector--dark .link-arrow, .sector--dark .link-arrow--light { color: var(--bronze-text); }
.section--dark .btn--outline, .sector--dark .btn--outline, .phero--dark .btn--outline { border-color: var(--graphite); color: var(--graphite); }
.section--dark .btn--outline:hover, .sector--dark .btn--outline:hover, .phero--dark .btn--outline:hover { background: var(--graphite); border-color: var(--graphite); color: #fff; }
.section--dark .ticks .icon, .sector--dark .ticks .icon { color: var(--bronze); }

/* project cards on beige */
.pcard--dark .pcard__media { background: var(--stone-300); }
.pcard--dark .pcard__body { border-color: #d3cabb; }
.pcard--dark .pcard__link:hover .pcard__title { color: var(--bronze-text); }
.pcard--dark .pcard__meta { color: var(--grey-600); }
.pcard--dark .pcard__meta .icon { color: var(--bronze); }
.pcard--dark .pcard__svc { color: var(--grey-600); }

/* process steps on beige */
.section--dark .steps, .section--dark .step { border-color: #d3cabb; }
.section--dark .step::before { background: var(--bronze); }
.section--dark .step__n { color: var(--bronze-text); }
.section--dark .step__i { color: var(--graphite); }
.section--dark .step p { color: var(--grey-600); }

/* residential / commercial split: light on both sides, told apart by tone */
.sector { background: var(--stone-200); }
.sector--dark { background: var(--stone-50); color: var(--graphite); border-left: 1px solid var(--line); }
.sector--dark .sector__body > p { color: var(--grey-600); }
.sector--dark .eyebrow--light { color: var(--bronze-text); }

/* commercial page hero → same light hero as other pages */
.phero--dark { background: var(--stone-50); color: var(--graphite); border-bottom: 1px solid var(--line); }
.phero--dark .phero__lead { color: var(--grey-600); }
.phero--dark .eyebrow--light { color: var(--bronze-text); }
.phero--dark .crumbs--light { color: var(--grey-600); }
.phero--dark .crumbs--light a:hover { color: var(--bronze-text); }
.phero--dark .crumbs--light li + li::before { color: var(--grey-400); }

/* sidebar quote panel → light card */
.aside-cta { background: var(--stone-0); color: var(--graphite); border: 1px solid var(--line); border-top: 3px solid var(--bronze); }
.aside-cta__t { color: var(--graphite); }
.aside-cta > p:not(.aside-cta__t) { color: var(--grey-600); }
.aside-cta__line { border-top-color: var(--line); }
.aside-cta__line .icon { color: var(--bronze); }
.aside-cta__line:hover { color: var(--bronze-text); }

/* case study "solution" panel */
.cs--solution { background: var(--stone-200); color: var(--graphite); }
.cs--solution p { color: var(--grey-600); }

/* trust strip → light band */
.trustband { background: var(--stone-0); border-block: 1px solid var(--line); }
.trustband .trust li + li { border-color: var(--line); }
.trust--band .icon { color: var(--bronze); }
.trust--band strong { color: var(--graphite); }
.trust--band span { color: var(--grey-600); }
@media (max-width: 1180px) { .trustband .trust li:nth-child(n + 4) { border-top-color: var(--line); } }
@media (max-width: 700px) { .trustband .trust li:nth-child(n) { border-color: var(--line); } }

/* home hero: slightly softer overlay while keeping the headline readable */
.hero__bg::after { background: linear-gradient(90deg, rgba(24, 23, 21, .78) 0%, rgba(24, 23, 21, .58) 40%, rgba(24, 23, 21, .18) 72%, rgba(24, 23, 21, .3) 100%), linear-gradient(0deg, rgba(24, 23, 21, .45), transparent 40%); }

/* footer: a softer graphite instead of near-black */

/* ==========================================================================
   Refinement 2 — smaller UI again, lighter chrome
   ========================================================================== */

/* ---------- a further ~5% reduction (rem base 15px → 14.4px on tablet/desktop) ---------- */
html { font-size: 90%; }
@media (max-width: 700px) { html { font-size: 93.75%; } }   /* phones keep comfortable reading size */
:root { --header-h: 72px; --section: clamp(3.5rem, 7vw, 6rem); }
@media (max-width: 1180px) { :root { --header-h: 62px; } }
body { font-size: 1.0625rem; }
.btn { --h: 46px; padding: 0 1.4rem; }
.btn--lg { --h: 50px; padding: 0 1.75rem; }
.btn--sm { --h: 38px; }
.hero__grid { grid-template-columns: minmax(0, 1fr) 370px; }
.qform__title { font-size: 1.65rem; }
.scard__body { padding: 1rem 1rem 1.1rem; }
.testi { padding: 1.6rem; }
.testi blockquote { font-size: 1.25rem; }
.aside-cta, .quote-side__block { padding: 1.5rem; }
.answer { padding: clamp(1.25rem, 2.5vw, 1.9rem); }
.type-grid li { padding: 1.3rem 1.2rem 1.5rem; }
.feature-grid { gap: 2.25rem 2.5rem; }
@media (max-width: 1180px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- light top bar (was charcoal) ---------- */

/* ---------- light footer (was graphite) ---------- */

/* ---------- home hero: new photo is bright, so keep the left side dark enough for white text ---------- */
.hero__bg img { object-position: 42% 50%; }
.hero__bg::after { background: linear-gradient(90deg, rgba(24, 23, 21, .82) 0%, rgba(24, 23, 21, .66) 42%, rgba(24, 23, 21, .28) 75%, rgba(24, 23, 21, .35) 100%), linear-gradient(0deg, rgba(24, 23, 21, .5), transparent 40%); }
/* focal points for specific photos so the work itself stays in frame */
img[src*="photo-1761986757577"] { object-position: 12% 55%; }
img[src*="photo-1785940894556"] { object-position: 60% 40%; }

/* ==========================================================================
   New design alignment (2026-09): warm-white base and a light project hero
   that matches the homepage — photo on the right fading into the page,
   charcoal text on the left. No dark overlays.
   ========================================================================== */
body { background: #fbfaf7; }
.project-hero { color: var(--graphite); background: #fbfaf7; }
.project-hero__media { left: max(38%, calc(var(--edge) + 420px)); right: var(--edge); }
.project-hero__media::before { display: none; }
.project-hero__media::after { background: linear-gradient(90deg, #fbfaf7 0%, rgba(251, 250, 247, .78) 22%, rgba(251, 250, 247, 0) 52%); }
.project-hero .phero__lead { color: var(--grey-600); max-width: 46ch; }
.project-hero .eyebrow--light { color: var(--bronze-text); }
.project-hero .crumbs--light { color: var(--grey-600); }
.project-hero .crumbs--light a:hover { color: var(--bronze-text); }
.project-hero .sample-flag { color: var(--grey-600); border-color: var(--grey-400); }
@media (max-width: 900px) {
  .project-hero { display: block; min-height: 0; }
  .project-hero__media { position: relative; inset: auto; aspect-ratio: 16 / 10; margin: 1.25rem var(--gutter) 0; }
  .project-hero__media::after { background: linear-gradient(0deg, #fbfaf7 0%, rgba(251, 250, 247, 0) 30%); }
}