/* Stobart Scaffolding. Palette: the current brand green and charcoal, sharpened for contrast.
   Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 120. */
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-Regular.woff2?v=dca62bb0a2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-Medium.woff2?v=82cd215dd4') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-SemiBold.woff2?v=52609ba12a') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/BarlowCondensed-SemiBold.woff2?v=4c95359cee') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('/fonts/BarlowCondensed-Bold.woff2?v=10a544bed4') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
/* Fallbacks shaped like Barlow (widths measured against Arial), so nothing reflows or jumps when the fonts arrive */
@font-face { font-family: 'Barlow Fallback'; src: local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'), local('Liberation Sans'); font-weight: 400 500; size-adjust: 96.6%; ascent-override: 103.5%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'); font-weight: 600 700; size-adjust: 91.8%; ascent-override: 108.9%; descent-override: 21.8%; line-gap-override: 0%; }
@font-face { font-family: 'Barlow Condensed Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold'), local('Roboto Bold'), local('Roboto-Bold'), local('Liberation Sans Bold'); font-weight: 600 700; size-adjust: 76.1%; ascent-override: 131.4%; descent-override: 26.3%; line-gap-override: 0%; }

:root {
  --green: #17812A;       /* Stobart Green: buttons (white text 4.99:1) */
  --green-ink: #15702A;   /* green text: 6.2:1 on white, 5.5:1 on Galvanised */
  --green-d: #126A22;
  --logo: #219F2D;        /* the logo's green: tags, scaffold lines, accents on dark */
  --signal: #4FDB5D;      /* highlights and focus on dark (9.3:1 on steel) */
  --steel: #1B1E1D;       /* dark sections and header */
  --steel-2: #252928;
  --night: #121514;
  --char: #2E2C2D;        /* body text */
  --muted: #4E5551;
  --galv: #EEF1EF;        /* light sections */
  --mint: #E6F3E7;
  --line: #D5DBD7;
  --on-dark: #D3D9D5;
  --focus: #0B5E1A;
  --sans: 'Barlow', 'Barlow Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cond: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', system-ui, sans-serif;
  --r: 12px;
  --gutter: 24px;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 85px; background: var(--steel); }   /* jumps land 12px under the sticky header (73px) */
@media (max-width: 959px) { html { scroll-padding-top: 77px; } }   /* header is 65px here */   /* dark behind the page, so pulling past the top or the footer shows no white */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--char); background: var(--night); overflow-x: clip; -webkit-font-smoothing: antialiased; }
main { background: #fff; }   /* the page itself is white; around it stays dark, so the phone's browser bars and any pull past the ends match the header and footer */
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--green-ink); text-underline-offset: 3px; }
a, button, label, summary, input, textarea { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; }
p { margin: 0 0 16px; max-width: 68ch; }
h1, h2, h3 { font-family: var(--cond); font-weight: 700; line-height: 1.04; letter-spacing: .01em; margin: 0 0 16px; text-wrap: balance; text-transform: uppercase; }
h2 { font-size: clamp(30px, 3.7vw, 44px); max-width: 20ch; }
/* every heading and card title in the condensed face is set in capitals, so the type matches across the site (Matt, 2 November) */
.tag-h, .card-h, .why strong, .town-n, .qb-q, .aside-h { text-transform: uppercase; letter-spacing: .01em; }
h3 { font-size: 24px; line-height: 1.15; margin-top: 32px; }
.nw { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.site-head :focus-visible, .section-steel :focus-visible, .hero :focus-visible, .page-hero :focus-visible, .closing :focus-visible, .quote-page :focus-visible, .site-foot :focus-visible, .mbar :focus-visible { outline-color: var(--signal); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: #fff; color: var(--char); padding: 12px 16px; border-radius: 8px; font-weight: 600; }
.skip:focus { top: 12px; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- details still to confirm (preview only) ---------- */
.tbc, .tbc-key { background: #FFF0A0; color: #2E2C2D; border-radius: 4px; padding: 1px 6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; outline: 1px dashed #B08F00; outline-offset: 0; font-weight: 500; }
.preview-bar { background: #FFF7CC; color: var(--char); font-size: 14px; line-height: 1.4; text-align: center; padding: 8px var(--gutter); }
.preview-bar p { margin: 0 auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: 10px; border: 2px solid transparent; font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, scale .12s; }
.btn .ico { width: 20px; height: 20px; }
.btn-green { background: var(--green); color: #fff; }
.btn-ghost { border-color: var(--green-ink); color: var(--green-ink); background: transparent; }
.btn-ghost-dark { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.btn-sm { min-height: 44px; padding: 9px 18px; font-size: 16px; }
.btn:active { scale: .955; }
.more { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--green-ink); min-height: 44px; }
.more:active { opacity: .5; }
@media (hover: hover) {
  .btn-green:hover { background: var(--green-d); }
  .btn-ghost:hover { background: var(--mint); }
  .btn-ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,.06); }
  .more:hover span { text-decoration: underline; }
  .btn:hover .ico-arrow, .more:hover .ico-arrow { translate: 3px 0; }
}
.ico-arrow { transition: translate .2s; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 50; background: var(--steel); color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); }
.head-in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.logo { flex: none; display: block; padding: 6px 0; }
.logo img { width: 236px; height: auto; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > a, .nav-dd summary { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 8px 12px; border-radius: 8px; color: #E6EAE7; text-decoration: none; font-weight: 500; font-size: 16px; cursor: pointer; list-style: none; }
.nav-dd summary::-webkit-details-marker { display: none; }
.nav > a[aria-current], .nav-dd summary[aria-current] { color: var(--signal); }
.nav-dd { position: relative; }
.nav-dd .ico-chev { width: 18px; height: 18px; transition: rotate .2s; }
.nav-dd[open] .ico-chev { rotate: 180deg; }
.nav-dd ul { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; list-style: none; margin: 0; padding: 8px; min-width: 260px; background: #fff; border-radius: 12px; box-shadow: 0 18px 48px rgba(0,0,0,.28); }
.nav-dd ul a { display: block; padding: 12px 14px; border-radius: 8px; color: var(--char); text-decoration: none; font-weight: 500; }
.nav-dd ul a[aria-current] { color: var(--green-ink); font-weight: 600; }
@media (hover: hover) { .nav > a:hover, .nav-dd summary:hover { background: rgba(255,255,255,.07); } .nav-dd ul a:hover { background: var(--galv); } }
.head-cta { display: flex; align-items: center; gap: 16px; }
.head-tel { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration: none; min-height: 44px; white-space: nowrap; }
.head-tel .ico { color: var(--signal); }
.head-call, .menu-btn { display: none; }
@media (max-width: 1179px) { .head-tel span { display: none; } .head-tel { width: 44px; justify-content: center; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); } }
@media (max-width: 959px) {
  .head-in { min-height: 64px; gap: 12px; }
  .logo img { width: 176px; }
  .nav, .head-cta { display: none; }
  .head-call, .menu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; border-radius: 10px; color: #fff; text-decoration: none; }
  .head-call { margin-left: auto; border: 1px solid rgba(255,255,255,.2); }
  .head-call .ico { color: var(--signal); }
  .menu-btn { gap: 8px; padding: 0 14px; background: rgba(255,255,255,.08); border: 0; font-weight: 600; cursor: pointer; }
  .menu-btn:active, .head-call:active { scale: .955; }
}
/* phone menu: slides down under the header, items settle in one after another */
.head-in { position: relative; z-index: 2; }
.menu, .menu-scrim { display: none; }
@media (max-width: 959px) {
  .menu { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 1; background: var(--steel-2); border-top: 1px solid rgba(255,255,255,.08); padding: 8px var(--gutter) 24px; max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden; transition: clip-path .4s cubic-bezier(.65,0,.35,1), opacity .3s ease, visibility 0s linear .4s; }
  .menu[hidden] { display: none; }
  .menu-open .menu { clip-path: inset(0 0 0 0); opacity: 1; visibility: visible; transition: clip-path .55s cubic-bezier(.16,1,.3,1), opacity .25s ease, visibility 0s; }
  .menu-scrim { display: block; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: 0; background: rgba(10,12,11,.55); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
  .menu-open .menu-scrim { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
  .menu-list li, .menu-cta { opacity: 0; translate: 0 -10px; transition: opacity .2s ease, translate .2s ease; }
  .menu-open .menu-list li, .menu-open .menu-cta { opacity: 1; translate: 0 0; transition: opacity .4s ease, translate .55s cubic-bezier(.16,1,.3,1); }
  .menu-open .menu-list li:nth-child(1) { transition-delay: .06s; } .menu-open .menu-list li:nth-child(2) { transition-delay: .1s; }
  .menu-open .menu-list li:nth-child(3) { transition-delay: .14s; } .menu-open .menu-list li:nth-child(4) { transition-delay: .18s; }
  .menu-open .menu-list li:nth-child(5) { transition-delay: .22s; } .menu-open .menu-list li:nth-child(6) { transition-delay: .26s; }
  .menu-open .menu-list li:nth-child(7) { transition-delay: .3s; } .menu-open .menu-list li:nth-child(8) { transition-delay: .34s; }
  .menu-open .menu-list li:nth-child(9) { transition-delay: .38s; } .menu-open .menu-list li:nth-child(10) { transition-delay: .42s; }
  .menu-open .menu-list li:nth-child(n+11) { transition-delay: .46s; }
  .menu-open .menu-cta { transition-delay: .48s; }
  html.menu-open { overflow: hidden; }
  html.menu-open .mbar.is-on, html.menu-open .mbar { translate: 0 110%; opacity: 0; visibility: hidden; }
}
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; margin: 0 -12px; border-radius: 10px; color: #fff; text-decoration: none; font-size: 18px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.07); }
.menu-list a:active { background: rgba(255,255,255,.1); }
.menu-cta { display: grid; gap: 12px; margin-top: 24px; }
.menu-cta .btn { width: 100%; }
.bars { display: grid; gap: 4px; width: 18px; }
.bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: translate .3s cubic-bezier(.65,0,.35,1), rotate .3s cubic-bezier(.65,0,.35,1), opacity .2s; }
[aria-expanded="true"] .bars i:nth-child(1) { translate: 0 6px; rotate: 45deg; }
[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .bars i:nth-child(3) { translate: 0 -6px; rotate: -45deg; }
.menu-lbl { min-width: 3.1em; text-align: left; }

/* desktop services menu fades in */
.nav-dd[open] ul { animation: dd-in .24s cubic-bezier(.16,1,.3,1) both; }
@keyframes dd-in { from { opacity: 0; translate: 0 -6px; } }

/* ---------- scaffold frame drawn over photos ---------- */
.frame { position: absolute; pointer-events: none; overflow: visible; }
.frame path { fill: none; stroke: var(--logo); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.frame .fr-std path, .frame .fr-led path { opacity: .55; }
.frame .fr-brc path { opacity: .4; }
.frame .fr-brd path { stroke-width: 6; opacity: .3; }
.frame .fr-cp circle { fill: var(--steel); stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; }
.js .frame path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s cubic-bezier(.5,0,.2,1) forwards; }
.js .frame .fr-led path { animation-delay: .35s; }
.js .frame .fr-brc path, .js .frame .fr-brd path { animation-delay: .8s; }
.js .frame .fr-cp circle { opacity: 0; animation: pop .4s ease forwards 1.4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { to { opacity: 1; } }
.frame-hero { top: 0; bottom: 0; right: 0; width: min(62%, 860px); height: 100%; }
.frame-closing { top: 0; bottom: 0; right: 0; width: min(40%, 520px); height: 100%; opacity: .45; }

/* ---------- home hero ---------- */
.hero { position: relative; background: var(--steel); color: #fff; overflow: hidden; isolation: isolate; }
.hero-photo, .ph-photo { position: absolute; inset: 0; z-index: -2; }
.hero-photo img, .ph-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.hero::after, .page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(27,30,29,.94) 0%, rgba(27,30,29,.84) 42%, rgba(27,30,29,.5) 72%, rgba(27,30,29,.35) 100%); }
.hero-in { position: relative; display: grid; align-content: center; min-height: min(720px, calc(100svh - 72px)); padding-block: clamp(64px, 8vw, 112px) clamp(120px, 11vw, 168px); }
.hero-copy { max-width: 660px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); margin-bottom: 24px; }
.hero h1 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1; max-width: 17ch; margin-bottom: 24px; }
.hero .lede, .page-hero .lede, .quote-page .lede { color: var(--on-dark); font-size: clamp(18px, 1.6vw, 20px); max-width: 46ch; margin-bottom: 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.hero-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 24px; color: #fff; font-weight: 500; font-size: 16px; }
.hero-ticks li { display: flex; align-items: center; gap: 8px; }
.hero-ticks .ico { flex: none; width: 20px; height: 20px; color: var(--signal); }
@media (max-width: 959px) {
  .hero::after { background: linear-gradient(180deg, rgba(27,30,29,.7) 0%, rgba(27,30,29,.84) 45%, rgba(27,30,29,.94) 100%); }
  .hero-in { min-height: 0; padding-block: 48px 112px; }
  .hero .frame-hero { width: 100%; opacity: .3; }
}
@media (max-width: 599px) {
  .hero-in { padding-block: 40px 104px; }
  .hero-cta { flex-direction: column; margin-bottom: 28px; }
  .hero-cta .btn { width: 100%; }
  .hero-ticks { gap: 8px 20px; font-size: 15px; }
}

/* ---------- page hero ---------- */
.page-hero { position: relative; background: var(--steel); color: #fff; overflow: hidden; isolation: isolate; }
.page-hero .ph-in { position: relative; padding-block: clamp(48px, 7vw, 104px) clamp(88px, 9vw, 128px); }
.page-hero h1 { font-size: clamp(36px, 4.6vw, 58px); line-height: 1.02; max-width: 19ch; margin-bottom: 24px; }
.ph-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero-slim .ph-in { padding-block: clamp(40px, 6vw, 80px); }
.page-hero-slim .lede { margin-bottom: 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 24px; padding: 0; font-size: 15px; color: var(--on-dark); }
.crumbs li { display: inline-flex; align-items: center; min-height: 32px; }   /* links and the current page sit on the same line */
.crumbs li + li::before { content: '/'; margin-right: 8px; opacity: .5; }
.crumbs a { color: #fff; text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.crumbs a:active { opacity: .5; }
@media (hover: hover) { .crumbs a:hover { text-decoration: underline; } }
@media (max-width: 959px) { .page-hero::after { background: linear-gradient(180deg, rgba(27,30,29,.8), rgba(27,30,29,.92)); } .page-hero .frame-hero, .quote-page .frame-hero { opacity: .3; width: 100%; } }

/* ---------- inspection tag badges ---------- */
.trust { background: var(--galv); padding-bottom: 8px; }
.tags { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; position: relative; z-index: 3; margin-top: -64px; }
.tag { position: relative; background: #fff; border-radius: 14px; padding: 20px 24px 24px; border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(18,21,20,.12); display: flex; flex-direction: column; gap: 4px; }
.tag-hole { position: absolute; top: 16px; right: 18px; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--line); background: var(--galv); }
.tag-band { align-self: flex-start; font-family: var(--cond); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--green); border-radius: 6px; padding: 3px 10px; margin-bottom: 12px; }
.tag-h { font-family: var(--cond); font-weight: 700; font-size: 26px; line-height: 1.1; }
.tag-p { font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (max-width: 1099px) { .tags { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .tags { gap: 12px; margin-top: -56px; } .tag { padding: 16px 20px 20px; } .tag-h { font-size: 22px; } .tag-hole { top: 14px; right: 14px; } }

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 9vw, 120px); }
.trust + .section { padding-top: clamp(64px, 8vw, 104px); }
.section-galv { background: var(--galv); }
.section-steel { background: var(--steel); color: #fff; }
.lede { font-size: 19px; color: var(--muted); max-width: 60ch; }
.section-steel .lede, .quote-copy p { color: var(--on-dark); }
.eyebrow { position: relative; display: flex; align-items: center; gap: 12px; font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 16px; }
.cp { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--logo); background: #fff; }
/* each hollow coupler lights up while its label is on screen and goes out as it scrolls away (site.js adds .lit) */
.cp { transition: background-color .45s ease, border-color .45s ease, box-shadow .6s ease; }
.lit .cp { background-color: var(--signal) !important; border-color: var(--signal); box-shadow: 0 0 0 4px rgba(79,219,93,.16), 0 0 16px 2px rgba(79,219,93,.5); animation: cp-on .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes cp-on { 0% { scale: .7; } 55% { scale: 1.3; } 100% { scale: 1; } }
.eb-n { color: var(--muted); }
.section-steel .eyebrow, .quote-page .eyebrow { color: var(--signal); }
.section-steel .cp { background: var(--steel); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 48px; }
.sec-head h2, .sec-head .lede { margin-bottom: 0; }
@media (max-width: 899px) { .sec-head { grid-template-columns: 1fr; margin-bottom: 32px; } }

/* the standard that runs down the homepage, with a coupler at each section */
@media (min-width: 1360px) {
  .lift-sec { position: relative; }
  .lift-sec::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc((100% - 1280px) / 2 + 8px); width: 2px; background: var(--logo); opacity: .28; }
  .lift-sec .eyebrow .cp { position: absolute; left: -40px; top: 50%; translate: 0 -50%; }
  .section-galv.lift-sec .cp { background: var(--galv); }
}

/* ---------- service cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card a { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: var(--char); text-decoration: none; transition: box-shadow .25s, translate .25s, scale .12s, border-color .25s; }
.card picture { aspect-ratio: 4 / 3; overflow: hidden; }
.card img { width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 20px; flex: 1; }
.card-h { font-family: var(--cond); font-weight: 700; font-size: 26px; line-height: 1.1; }
.card-p { color: var(--muted); font-size: 16px; line-height: 1.5; flex: 1; }
.card .more { margin-top: 8px; }
.card a:active { scale: .982; }
@media (hover: hover) { .card a:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(18,21,20,.12); border-color: var(--logo); } }
@media (max-width: 1099px) { .cards { gap: 16px; } }
@media (max-width: 639px) { .cards, .cards-2 { grid-template-columns: 1fr; gap: 16px; } .card-body { padding: 20px; } }
/* six services on a phone: compact rows (photo beside the words) so the list stays short and the quote builder is not pushed far down */
@media (max-width: 639px) {
  .cards-6 { gap: 12px; }
  .cards-6 .card a { flex-direction: row; align-items: stretch; border-radius: 14px; }
  .cards-6 .card picture { flex: none; width: 112px; aspect-ratio: auto; }
  .cards-6 .card-body { padding: 16px 16px 16px 20px; gap: 4px; justify-content: center; }
  .cards-6 .card-h { font-size: 22px; }
  .cards-6 .card-p { flex: none; font-size: 15px; line-height: 1.45; }
  .cards-6 .card .more { display: none; }
}
@media (min-width: 640px) and (max-width: 1099px) { .cards-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- how it works: cards climbing like lifts ---------- */
.climb { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.climb li { --rise: 0px; position: relative; background: #fff; border-radius: 14px; border-top: 5px solid var(--logo); padding: 24px 24px 28px; margin-top: var(--rise); box-shadow: 0 8px 24px rgba(18,21,20,.06); }
.climb li:nth-child(1) { --rise: 160px; } .climb li:nth-child(2) { --rise: 120px; } .climb li:nth-child(3) { --rise: 80px; } .climb li:nth-child(4) { --rise: 40px; }
.climb-n { display: block; font-family: var(--cond); font-weight: 700; font-size: 40px; line-height: 1; color: var(--green-ink); margin-bottom: 12px; }
.climb h3 { margin: 0 0 8px; font-size: 24px; }
.climb p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
@media (max-width: 1099px) {
  .climb { grid-template-columns: 1fr; gap: 12px; margin-top: 32px; max-width: 640px; }
  .climb li { --rise: 0px !important; margin: 0; padding: 20px 24px 20px 72px; border-top: 0; border-left: 5px solid var(--logo); }
  .climb-n { position: absolute; left: 20px; top: 20px; font-size: 32px; }
}

/* ---------- photos ---------- */
.jobs, .gallery { list-style: none; margin: 0 0 32px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jobs figure, .gallery figure { margin: 0; }
.jobs picture, .gallery picture { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; }
.jobs img, .gallery img { width: 100%; height: 100%; object-fit: cover; }
figcaption { font-size: 15px; line-height: 1.45; color: var(--muted); margin-top: 12px; }
@media (max-width: 899px) { .jobs, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .jobs, .gallery { grid-template-columns: 1fr; gap: 20px; } }
.note { margin-bottom: 32px; }

/* ---------- reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.reviews-grid .lede { margin-bottom: 32px; }
.why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.why li { display: flex; gap: 14px; align-items: flex-start; background: var(--galv); border-radius: 14px; padding: 24px; }
.why .ico { flex: none; width: 24px; height: 24px; color: var(--green-ink); margin-top: 2px; }
.why strong { display: block; font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 1.15; margin-bottom: 6px; }
.why span { color: var(--muted); font-size: 16px; line-height: 1.55; }
.why strong { color: var(--char); }
@media (max-width: 899px) { .reviews-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 599px) { .why { grid-template-columns: 1fr; gap: 12px; } .why li { padding: 20px; } }

/* ---------- areas ---------- */
.areas-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.areas-grid .lede { margin-bottom: 16px; }
.towns { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.towns a { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--char); text-decoration: none; transition: border-color .2s, scale .12s; min-height: 72px; justify-content: center; }
.town-n { font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 1.15; }
.town-d { font-size: 15px; color: var(--muted); }
.towns a:active { scale: .982; }
@media (hover: hover) { .towns a:hover { border-color: var(--logo); } }
.section:not(.section-galv) .towns a { background: var(--galv); border-color: transparent; }
@media (min-width: 1100px) { .section:not(.section-galv) .towns { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 899px) { .areas-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 399px) { .towns a { padding: 14px 16px; } .town-n { font-size: 20px; } }
.area-more { margin-top: 64px; }

/* ---------- FAQs ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.faqs { border-top: 1px solid var(--line); }
.faqs details { border-bottom: 1px solid var(--line); }
.faqs summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 18px; line-height: 1.4; }
.faqs summary::-webkit-details-marker { display: none; }
.faqs summary .ico-chev { width: 22px; height: 22px; color: var(--green-ink); transition: rotate .2s; }
.faqs details[open] summary .ico-chev { rotate: 180deg; }
.faqs .a p { color: var(--muted); padding-bottom: 20px; margin: 0; }
.faqs summary:active { opacity: .6; }
@media (max-width: 899px) { .faq-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- closing band ---------- */
.closing { position: relative; background: var(--steel); color: #fff; overflow: hidden; isolation: isolate; }
.closing-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 48px; align-items: center; padding-block: clamp(64px, 8vw, 104px); }
.closing h2 { color: #fff; }
.closing p { color: var(--on-dark); margin-bottom: 0; }
.closing-cta { display: flex; flex-wrap: wrap; gap: 12px; position: relative; }
.closing .frame { z-index: -1; }
@media (max-width: 899px) { .closing-in { grid-template-columns: 1fr; } .frame-closing { width: 100%; opacity: .35; } }

/* ---------- quote sections ---------- */
.quote-sec { position: relative; }
.quote-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.quote-copy h2, .quote-copy h1 { color: #fff; }
.quote-alt { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 8px; }
.quote-alt a { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #fff; text-decoration: none; font-weight: 500; overflow-wrap: anywhere; }
.quote-alt .ico { color: var(--signal); }
.quote-alt a:active { opacity: .5; }
@media (hover: hover) { .quote-alt a:hover span { text-decoration: underline; } }
.quote-page { position: relative; background: var(--steel); color: #fff; overflow: hidden; isolation: isolate; padding-block: clamp(40px, 6vw, 88px) clamp(64px, 8vw, 112px); }
.quote-page .frame { z-index: -1; opacity: .7; }
.quote-page h1 { font-size: clamp(36px, 4.6vw, 58px); max-width: 15ch; }
.contact-base { display: flex; gap: 12px; align-items: flex-start; margin-top: 32px; color: var(--on-dark); }
.contact-base .ico { color: var(--signal); margin-top: 3px; }
@media (max-width: 959px) {
  .quote-grid { grid-template-columns: 1fr; gap: 32px; }
  .quote-page .quote-copy { display: contents; }
  .quote-page .quote-copy > * { margin-bottom: 0; }
  .quote-page .quote-copy .lede { margin-top: -8px; }
  .quote-page .qb { order: 2; }
  .quote-page .quote-alt, .quote-page .contact-base { order: 3; margin-top: 0; }
}

/* ---------- quote builder ---------- */
.qb { position: relative; background: #fff; color: var(--char); border-radius: 18px; padding: 28px 28px 24px; box-shadow: 0 28px 64px rgba(0,0,0,.36); }
.qb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 8px; }
.qb-kicker { font-family: var(--cond); font-weight: 600; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--green-ink); margin: 0 0 4px; }
.qb-count { font-size: 15px; color: var(--muted); margin: 0; }
.qb-scaff { flex: none; width: 60px; height: 78px; margin-top: -4px; }
.qb-scaff path { fill: none; stroke: var(--char); stroke-width: 3; stroke-linecap: round; }
.qb-scaff .qs-ground { stroke: #9AA39E; stroke-width: 2; }
.qb-scaff .qs-plate { fill: #9AA39E; }
.qb-scaff .qs-board { stroke: var(--logo); stroke-width: 5; }
.qb-scaff .qs-brace { stroke-width: 2.5; }
.qs-part { opacity: .12; transition: opacity .35s; }
.qs-part.on { opacity: 1; }
.qb-bar { height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 8px 0 24px; }
.qb-bar i { display: block; height: 100%; border-radius: inherit; background: var(--green); transform-origin: 0 50%; transform: scaleX(.06); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.qs-tag { opacity: 0; transition: opacity .4s .3s; }
.qs-tag path:first-child { fill: var(--logo); stroke: none; }
.qs-tag circle { fill: #fff; }
.qs-tag path + circle + path { stroke: #fff; stroke-width: 2; fill: none; }
.qb.is-done .qs-tag { opacity: 1; }
.qb-form { margin: 0; }
.qb-step { border: 0; margin: 0; padding: 0; min-width: 0; }
.qb-step:focus { outline: none; }
.qb-step + .qb-step { margin-top: 32px; }
.js .qb-step + .qb-step { margin-top: 0; }
.qb-step[hidden] { display: none; }
.js:not(.ready) .qb-step ~ .qb-step, .js:not(.ready) .qb-back, .js:not(.ready) .qb-send { display: none; }
.qb-step.qb-in { animation: qb-in .45s cubic-bezier(.16,1,.3,1) both; }
.qb-step.qb-in-back { animation: qb-in-back .45s cubic-bezier(.16,1,.3,1) both; }
@keyframes qb-in { from { opacity: 0; translate: 16px 0; } }
@keyframes qb-in-back { from { opacity: 0; translate: -16px 0; } }
.qb-hint { font-size: 16px; line-height: 1.5; color: var(--muted); margin: -8px 0 20px; }
.qb-q { font-family: var(--cond); font-weight: 700; font-size: clamp(26px, 2.4vw, 30px); line-height: 1.1; padding: 0; margin: 8px 0 20px; }
.qb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qb-tile { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: start; padding: 16px; min-height: 92px; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .2s, background-color .2s, scale .12s; }
.qb-tile input, .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.qb-ico { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--mint); color: var(--green-ink); }
.qb-ico .ico { width: 24px; height: 24px; }
.qb-tt { font-weight: 600; font-size: 17px; line-height: 1.3; padding-top: 2px; }
.qb-th { font-size: 14px; line-height: 1.4; color: var(--muted); }
.qb-tile:has(input:checked) { border-color: var(--green-ink); background: var(--mint); }
.qb-tile:has(input:checked) .qb-ico { background: var(--green); color: #fff; }
.qb-tile:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.qb-tile:active { scale: .982; }
@media (hover: hover) { .qb-tile:hover, .opt:hover { border-color: var(--logo); } }
.qb-opts { display: grid; gap: 8px; }
@media (min-width: 600px) { .qb-opts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.opt { position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 16px; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-weight: 500; font-size: 17px; line-height: 1.3; transition: border-color .2s, background-color .2s, scale .12s; }
.opt-mark { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #9AA39E; transition: border-color .2s, background-color .2s; }
.opt-mark::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; scale: 0; transition: scale .25s cubic-bezier(.34,1.56,.64,1); }
.opt input[type="checkbox"] + .opt-mark { border-radius: 6px; }
.opt input[type="checkbox"] + .opt-mark::after { width: 10px; height: 5px; border-radius: 0; background: none; border: solid #fff; border-width: 0 0 2.5px 2.5px; rotate: -45deg; translate: 0 -1px; }
.opt:has(input:checked) { border-color: var(--green-ink); background: var(--mint); }
.opt input:checked + .opt-mark { border-color: var(--green-ink); background: var(--green); }
.opt input:checked + .opt-mark::after { scale: 1; }
.opt:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.opt:has([aria-invalid="true"]) { border-color: #B3261E; }
.opt:active { scale: .982; }
.qb-field { display: block; margin-bottom: 16px; }
.qb-field > span { display: block; font-weight: 600; font-size: 16px; margin-bottom: 8px; }
.qb-field em { font-style: normal; font-weight: 400; color: var(--muted); margin-left: 4px; }
.qb-field input, .qb-field textarea { width: 100%; font: inherit; font-size: 17px; color: var(--char); background: #fff; border: 2px solid #BCC4BF; border-radius: 10px; padding: 12px 14px; min-height: 50px; }
.qb-field textarea { resize: vertical; min-height: 96px; }
.qb-field input:focus, .qb-field textarea:focus { outline: 3px solid rgba(23,129,42,.28); outline-offset: 0; border-color: var(--green-ink); }
.qb-field [aria-invalid="true"], .qb-tile:has([aria-invalid="true"]) { border-color: #B3261E; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qb-small { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 8px 0 0; }
.qb-err { color: #B3261E; font-weight: 600; font-size: 15px; margin: 16px 0 0; }
.qb-err:empty { display: none; }
.qb-nav { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.qb-back { margin-right: auto; min-height: 44px; padding: 8px 4px; background: none; border: 0; color: var(--green-ink); font-weight: 600; font-size: 16px; cursor: pointer; }
.qb-back:active { opacity: .5; }
.qb-back[hidden], .qb-next[hidden], .qb-send[hidden] { display: none; }
html:not(.js) .qb-back, html:not(.js) .qb-next { display: none; }
.qb-send.is-busy { opacity: .7; pointer-events: none; }
.qb-done { display: none; padding-top: 8px; }
.qb.is-done .qb-done { display: block; }
.qb-done:focus { outline: none; }
.qb-done-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.qb-preview { font-size: 14px; color: var(--muted); margin-top: 16px; }
.qb-preview[hidden] { display: none; }
.cf-turnstile { margin-top: 8px; }
@media (max-width: 599px) {
  .qb { padding: 20px 20px 20px; border-radius: 16px; }
  .qb-tiles { grid-template-columns: 1fr; gap: 8px; }
  .qb-tile { min-height: 72px; padding: 12px 14px; }
  .qb-nav .btn { flex: 1; }
}

/* ---------- service and town pages ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
.split-fig { margin: 0; position: sticky; top: 104px; }
.split-fig picture { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; }
.split-fig img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; gap: 40px; } .split-fig { position: static; } .split-fig picture { aspect-ratio: 4 / 3; } }
.prose h2 { margin-bottom: 24px; }
.prose-narrow { max-width: 760px; }
.prose-narrow h2 { margin-top: 48px; font-size: clamp(28px, 3vw, 36px); }
.prose-narrow h2:first-child { margin-top: 0; }
.ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .ico { color: var(--green-ink); margin-top: 4px; }
.ticks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: 32px; }
@media (max-width: 599px) { .ticks-2 { grid-template-columns: 1fr; } }
.extra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.extra { background: #fff; border-radius: 16px; padding: 32px; }
.extra-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--mint); color: var(--green-ink); margin-bottom: 20px; }
.extra-ico .ico { width: 28px; height: 28px; }
.extra h2 { font-size: clamp(26px, 2.4vw, 32px); margin-bottom: 16px; max-width: 22ch; }
.extra p { margin: 0 0 24px; color: var(--muted); }
.extra .ticks { margin: 0; }
@media (max-width: 899px) { .extra-grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 599px) { .extra { padding: 24px 20px; } }
.price-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.price-from { margin-top: 8px; }
.factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* number and heading share one baseline in row 1 (no row spanning: Safari aligns spanned items to the top) */
.factors li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: baseline; background: #fff; border-radius: 12px; padding: 20px 24px; }
.f-n { grid-column: 1; grid-row: 1; font-family: var(--cond); font-weight: 700; font-size: 28px; color: var(--green-ink); line-height: 1; }
.f-h { grid-column: 2; grid-row: 1; font-weight: 600; font-size: 18px; line-height: 1.3; }
.f-p { grid-column: 2; grid-row: 2; color: var(--muted); font-size: 16px; }
@media (max-width: 899px) { .price-grid { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 399px) { .factors li { grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 20px; } }
.aside { background: var(--galv); border-radius: 16px; padding: 28px; position: sticky; top: 104px; }
.aside-h { font-family: var(--cond); font-weight: 700; font-size: 26px; margin-bottom: 16px; }
.facts { margin: 0 0 24px; display: grid; gap: 16px; }
.facts dt { font-size: 14px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; line-height: 1.6; }
.facts a { display: inline-block; padding: 2px 0; }
@media (max-width: 899px) { .aside { position: static; padding: 24px; } }
.near { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.near a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--char); font-weight: 600; text-decoration: none; transition: border-color .2s, scale .12s; }
.near a .ico { color: var(--green-ink); }
.near a:active { scale: .982; }
@media (hover: hover) { .near a:hover { border-color: var(--logo); } }
@media (min-width: 1000px) { .near { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 599px) { .near { grid-template-columns: 1fr; } }
.section:not(.section-galv) .near a { background: var(--galv); border-color: transparent; }

/* ---------- footer ---------- */
.site-foot { background: var(--night); color: #C9CFCB; padding-top: clamp(56px, 7vw, 88px); font-size: 16px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 48px; padding-bottom: 48px; }
.foot-brand img { width: 220px; margin-bottom: 16px; }
.foot-brand p { color: #C9CFCB; max-width: 34ch; }
.foot-h { font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--signal); margin-bottom: 12px; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot nav a, .foot-contact a { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; min-height: 40px; color: #E6EAE7; text-decoration: none; overflow-wrap: anywhere; }
.foot-contact .ico { color: var(--signal); }
/* the club Tom supports: crest and one line */
.partner { display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; color: var(--muted); text-decoration: none; font-size: 15px; line-height: 1.4; max-width: 34ch; }
.partner img, .foot-brand .partner img { flex: none; width: 42px; height: 56px; margin: 0; }
.partner strong { display: block; color: var(--char); font-weight: 600; }
.partner-dark { color: #C9CFCB; }
.partner-dark strong { color: #fff; }
.facts .partner, .facts dd .partner { display: inline-flex; margin-top: 4px; text-decoration: none; color: var(--muted); font-weight: 400; }
.partner-flush { margin-top: 0; }
.partner:active { opacity: .5; }
@media (hover: hover) { .partner:hover strong { text-decoration: underline; } }
.site-foot a:active { opacity: .5; }
@media (hover: hover) { .site-foot a:hover span, .site-foot nav a:hover { text-decoration: underline; } }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 24px 32px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.foot-base p { margin: 0; color: #A9B1AC; }
.foot-base a { color: #E6EAE7; }
@media (max-width: 899px) {
  /* phones and tablets: services and company side by side (similar lengths), then the towns across the full width in two columns */
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'brand brand' 'serv comp' 'areas areas'; gap: 40px 24px; padding-bottom: 40px; }
  .foot-brand { grid-area: brand; }
  .foot-grid nav[aria-label='Services'] { grid-area: serv; }
  .foot-grid nav[aria-label='Company'] { grid-area: comp; }
  .foot-grid nav[aria-label='Areas'] { grid-area: areas; }
  .foot-grid nav[aria-label='Areas'] ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .site-foot nav a { padding: 4px 0; line-height: 1.35; }
  /* the copyright clears the floating browser bar and the phone's home bar when scrolled right to the end */
  .foot-base { flex-direction: column; gap: 8px; padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- phone bar on small screens ---------- */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; grid-template-columns: 1fr 1.4fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(27,30,29,.97); border-top: 1px solid rgba(255,255,255,.08); translate: 0 110%; opacity: 0; visibility: hidden;
  transition: translate .32s cubic-bezier(.4,0,1,1), opacity .24s ease .06s, visibility 0s linear .34s; }   /* leaving: a quick glide down */
.mbar.is-on { translate: 0 0; opacity: 1; visibility: visible; transition: translate .5s cubic-bezier(.16,1,.3,1), opacity .3s ease, visibility 0s; }   /* arriving: a soft glide up */
.mbar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 10px; font-weight: 600; text-decoration: none; transition: scale .12s; }
.mbar-call { color: #fff; border: 2px solid rgba(255,255,255,.3); }
.mbar-call .ico { color: var(--signal); }
.mbar-quote { background: var(--green); color: #fff; }
.mbar a:active { scale: .955; }
@media (max-width: 899px) { .mbar { display: grid; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .frame path { stroke-dashoffset: 0; }
  .js .frame .fr-cp circle { opacity: 1; }
  .btn:active, .card a:active, .qb-tile:active, .opt:active, .towns a:active, .near a:active, .mbar a:active { scale: none; }
}
.still .frame path { stroke-dashoffset: 0 !important; animation: none !important; }
.still .frame .fr-cp circle { opacity: 1 !important; animation: none !important; }
@media (hover: none) { .card a:hover, .towns a:hover, .near a:hover { translate: none; box-shadow: none; } }

/* ---------- intro: on arrival the scaffold goes up in the logo's own style (green tubes with the pale outline),
   the logo rises into place underneath, then the cover fades softly away to the page (no wipe) ---------- */
.intro { display: none; }
.play-intro .intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--steel); animation: intro-out .6s cubic-bezier(.4,0,.2,1) 1.35s forwards; }
.intro-in { display: grid; justify-items: center; width: min(460px, 86vw); }
.play-intro .intro-in { animation: intro-drift .6s cubic-bezier(.4,0,.2,1) 1.35s forwards; }
.intro-scaff path { fill: none; stroke-linecap: round; stroke-dasharray: 1 1.01; stroke-dashoffset: 1; opacity: 0; animation: intro-draw .36s cubic-bezier(.5,0,.2,1) forwards; }
.intro-scaff .rim path { stroke: #E6F7E6; stroke-width: 7; }
.intro-scaff .core path { stroke: #31AB33; stroke-width: 4; }
.intro-scaff .rim .is-brd { stroke-width: 10; } .intro-scaff .core .is-brd { stroke-width: 6.5; }
.intro-scaff .rim .is-brc { stroke-width: 5.5; } .intro-scaff .core .is-brc { stroke-width: 2.8; }
.intro-scaff .rim .is-l4 { stroke-width: 5.5; } .intro-scaff .core .is-l4 { stroke-width: 2.8; }
.intro-scaff .is-logo { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: logo-in .6s cubic-bezier(.16,1,.3,1) .68s forwards; }
.intro-scaff .is-ground { stroke: rgba(230,247,230,.3) !important; stroke-width: 2 !important; animation-duration: .3s; }
.intro-scaff .is-std { animation-duration: .48s; animation-delay: .08s; }
.intro-scaff .is-l1 { animation-delay: .32s; } .intro-scaff .is-l2 { animation-delay: .41s; } .intro-scaff .is-l3 { animation-delay: .5s; } .intro-scaff .is-l4 { animation-delay: .58s; }
.intro-scaff .is-brd.is-l1 { animation-delay: .4s; } .intro-scaff .is-brd.is-l2 { animation-delay: .49s; } .intro-scaff .is-brd.is-l3 { animation-delay: .58s; }
.intro-scaff .is-brc { animation-delay: .54s; }
.intro-scaff circle { fill: #E6F7E6; opacity: 0; transform-box: fill-box; transform-origin: center; animation: intro-cp .3s cubic-bezier(.34,1.56,.64,1) .66s forwards; }
@keyframes intro-draw { 0% { opacity: 0; stroke-dashoffset: 1; } 1% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } }
@keyframes intro-cp { from { opacity: 0; scale: 0; } to { opacity: 1; scale: 1; } }
@keyframes logo-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }   /* rises into place under the scaffold */
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }   /* a soft fade to the page */
@keyframes intro-drift { to { scale: 1.035; } }   /* the scaffold eases very slightly closer as it fades */
/* as the cover fades, the hero words drift up into place (movement only, so the page counts as drawn straight away) */
.play-intro :is(.hero-copy, .ph-in, .quote-page .quote-copy) > * { animation: hero-drift 1s cubic-bezier(.16,1,.3,1) 1.4s both; }
.play-intro :is(.hero-copy, .ph-in, .quote-page .quote-copy) > :nth-child(2) { animation-delay: 1.47s; }
.play-intro :is(.hero-copy, .ph-in, .quote-page .quote-copy) > :nth-child(3) { animation-delay: 1.54s; }
.play-intro :is(.hero-copy, .ph-in, .quote-page .quote-copy) > :nth-child(4) { animation-delay: 1.61s; }
.play-intro :is(.hero-copy, .ph-in, .quote-page .quote-copy) > :nth-child(n+5) { animation-delay: 1.68s; }
@keyframes hero-drift { from { translate: 0 18px; } to { translate: 0 0; } }
/* the frame over the hero photo draws once the cover has faded */
.play-intro .frame .fr-std path { animation-delay: 1.5s; }
.play-intro .frame .fr-led path { animation-delay: 1.72s; }
.play-intro .frame .fr-brc path, .play-intro .frame .fr-brd path { animation-delay: 1.95s; }
.play-intro .frame .fr-cp circle { animation-delay: 2.45s; }

/* ---------- reveals: below the first screen, blocks and list items rise softly into place as they scroll into view.
   site.js adds .rv only to what starts off screen, so nothing on the first screen ever blinks, and without
   the script everything simply shows. Each one plays once. ---------- */
.rv { opacity: 0; translate: 0 22px; }
.rv.in { opacity: 1; translate: 0 0; transition: opacity .75s cubic-bezier(.25,.6,.3,1), translate .95s cubic-bezier(.16,1,.3,1); }
.rv:focus-within { opacity: 1; translate: 0 0; }
.still .rv { opacity: 1; translate: none; }
@media print { .rv { opacity: 1 !important; translate: none !important; } }
/* the frame by the closing call to action draws when it comes into view */
.js .frame-closing:not(.go) path, .js .frame-closing:not(.go) circle { animation-play-state: paused; }

/* ---------- page transitions: the header stays put while a steel panel, ruled like a scaffold, slides up over the
   page; the next page opens with the panel lifting away and the content rising into place ---------- */
.pt { position: fixed; inset: 0; z-index: 45; pointer-events: none; visibility: hidden; transform: translateY(100%);
  background-color: var(--steel);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), rgba(79,219,93,.14) calc(20% - 2px) 20%), repeating-linear-gradient(180deg, transparent 0 118px, rgba(79,219,93,.1) 118px 120px); }
.pt::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--logo); box-shadow: 0 0 0 1px rgba(230,247,230,.5); }
.internal .pt { visibility: visible; transform: translateY(0); animation: pt-lift .6s cubic-bezier(.7,0,.2,1) .06s forwards; }
.internal main { animation: pt-rise .75s cubic-bezier(.16,1,.3,1) .12s both; }   /* the page rises as one layer, so the trust tiles stay over the hero */
html.leaving .pt { visibility: visible; animation: pt-cover .34s cubic-bezier(.65,0,.35,1) forwards; }   /* after .internal so leaving always wins */
@keyframes pt-cover { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pt-lift { from { transform: translateY(0); } to { transform: translateY(-100%); visibility: hidden; } }
@keyframes pt-rise { from { opacity: 0; transform: translateY(28px); } }
@media (prefers-reduced-motion: reduce) {
  .intro, .pt { display: none !important; }
}

/* ---------- ?count=off / ?count=on note (our own devices only) ---------- */
.count-note { position: fixed; left: 50%; top: 16px; translate: -50% 0; z-index: 120; margin: 0; padding: 12px 16px; border-radius: 8px; background: var(--steel); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25); font: 600 15px/1.3 var(--sans); max-width: calc(100vw - 40px); }