@import url('/assets/fonts/fonts.css');

/* ==========================================================================
   B-MAT Scaffolding — design system
   Concept: "Built in lifts." Sections are numbered like scaffold lifts,
   separated by ledger rules with coupler nodes, framed by standard hairlines.
   ========================================================================== */

:root {
  --signal: #49E32B;
  --signal-deep: #1E7A10;
  --signal-dim: rgba(73, 227, 43, .14);

  --steel-900: #161917;
  --steel-800: #1F2321;
  --steel-700: #323333;
  --steel-600: #464B47;
  --steel-500: #5B615C;
  --steel-400: #838A83;
  --steel-300: #A8AFA7;
  --steel-200: #D3D8D0;
  --steel-100: #E6E9E3;
  --board: #F2F3EE;
  --white: #fff;
  --hazard: #FFB800;

  --ink: var(--steel-900);
  --ink-soft: #4A514B;
  --rule: rgba(22, 25, 23, .12);
  --rule-dark: rgba(255, 255, 255, .14);

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --lift: clamp(4rem, 8vw, 7.5rem);

  --shadow-sm: 0 1px 2px rgba(22, 25, 23, .06), 0 4px 12px rgba(22, 25, 23, .05);
  --shadow-md: 0 2px 4px rgba(22, 25, 23, .06), 0 12px 32px rgba(22, 25, 23, .09);
  --shadow-lg: 0 4px 8px rgba(22, 25, 23, .08), 0 28px 64px rgba(22, 25, 23, .16);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -.018em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 6.2vw, 4.35rem); text-transform: uppercase; }
h2 { font-size: clamp(1.6rem, 4.2vw, 3rem); text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.55rem); }
h4 { font-size: 1.0625rem; font-stretch: 100%; letter-spacing: -.005em; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--signal-deep);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  background: var(--steel-900);
  color: var(--signal);
  padding: .75rem 1.25rem;
  font: 600 .8rem/1 var(--mono);
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ structure -- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}

/* The "standards" — vertical hairlines that frame the page like scaffold
   uprights, plus the coupler nodes where ledgers meet them. */
.lift {
  position: relative;
  padding-block: var(--lift);
}

.lift::before,
.lift::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
  pointer-events: none;
}
.lift::before { left: max(var(--gutter), calc(50% - var(--shell) / 2 - 2.25rem)); }
.lift::after  { right: max(var(--gutter), calc(50% - var(--shell) / 2 - 2.25rem)); }

.lift--dark { background: var(--steel-900); color: var(--board); }
.lift--dark::before, .lift--dark::after { background: var(--rule-dark); }
.lift--dark h1, .lift--dark h2, .lift--dark h3 { color: var(--white); }

.lift--board { background: var(--board); }
.lift--flush { padding-block: 0; }
.lift--tight { padding-block: clamp(2.75rem, 5vw, 4.25rem); }
.lift--seam { border-top: 1px solid var(--rule); }
.lift--dark.lift--seam { border-top-color: var(--rule-dark); }

@media (max-width: 900px) {
  .lift::before, .lift::after { display: none; }
}

/* -------------------------------------------------------- lift markers -- */
.marker {
  display: flex;
  align-items: center;
  gap: .875rem;
  font: 600 .7rem/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: 1.5rem;
}
.marker::before {
  content: '';
  width: 9px; height: 9px;
  background: var(--signal);
  flex: none;
  box-shadow: 0 0 0 4px var(--signal-dim);
}
.marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.marker span { color: var(--ink); }
.lift--dark .marker { color: var(--steel-400); }
.lift--dark .marker span { color: var(--white); }
.lift--dark .marker::after { background: var(--rule-dark); }
.marker--center { justify-content: center; }
.marker--center::after { display: none; }

/* Intro paragraphs, set one step above body copy. Kept in step with the hero
   lede so the same kind of text is the same size wherever it appears. */
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 64ch;
}
.lift--dark .lede { color: var(--steel-300); }

.measure { max-width: 68ch; }

/* --------------------------------------------------------------- links -- */
.text-link {
  color: var(--signal-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--signal);
  padding-bottom: 1px;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.text-link:hover { background: var(--signal-dim); }
.lift--dark .text-link { color: var(--signal); }
.lift--dark .text-link:hover { background: rgba(73, 227, 43, .18); }

/* ------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: var(--signal);
  --btn-fg: var(--steel-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: .9rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  transition: transform .16s var(--ease), background .16s var(--ease),
              border-color .16s var(--ease), color .16s var(--ease),
              box-shadow .16s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(73, 227, 43, .3); }
.btn:active { transform: translateY(0); }
.btn i { font-size: .95em; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--steel-300);
}
.btn--ghost:hover {
  background: var(--steel-900);
  border-color: var(--steel-900);
  color: var(--white);
  box-shadow: var(--shadow-md);
}
.lift--dark .btn--ghost,
.site-footer .btn--ghost,
.hero .btn--ghost,
.consent .btn--ghost,
.page-head .btn--ghost { --btn-fg: var(--white); border-color: rgba(255, 255, 255, .35); }
.lift--dark .btn--ghost:hover,
.site-footer .btn--ghost:hover,
.hero .btn--ghost:hover,
.consent .btn--ghost:hover,
.page-head .btn--ghost:hover {
  background: var(--white); border-color: var(--white); color: var(--steel-900);
}

.btn--dark { --btn-bg: var(--steel-900); --btn-fg: var(--white); }
.btn--dark:hover { box-shadow: 0 6px 20px rgba(22, 25, 23, .28); }

.btn--sm { padding: .65rem 1.1rem; font-size: .78rem; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  margin-top: 2rem;
}

/* -------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  transition: box-shadow .25s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 8px 30px rgba(22, 25, 23, .1); }

.topbar {
  background: var(--steel-900);
  color: var(--steel-300);
  font: 500 .76rem/1 var(--mono);
  letter-spacing: .02em;
}
.topbar .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 2.5rem;
  padding-block: .45rem;
}
.topbar a { color: var(--white); text-decoration: none; }
.topbar a:hover { color: var(--signal); }
.topbar-items { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar-items span, .topbar-items a { display: inline-flex; align-items: center; gap: .45rem; }
.topbar i { color: var(--signal); }
@media (max-width: 860px) { .topbar .shell { justify-content: center; } .topbar-hide { display: none; } }

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.75rem;
}

/* Logo rebuilt in markup so it stays crisp at any size */
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.brand-mark {
  display: grid;
  place-items: center;
  padding: 3px;
  background: var(--signal);
  border-radius: 5px;
}
.brand-mark span {
  display: block;
  background: var(--steel-700);
  color: var(--signal);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 100%;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  line-height: 1;
  padding: .3rem .5rem .34rem;
  border-radius: 3px;
}
.brand-name {
  font: 800 .68rem/1.15 var(--display);
  font-stretch: 108%;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--steel-700);
}
.brand-name em { display: block; font-style: normal; color: var(--steel-500); letter-spacing: .09em; font-weight: 600; }

.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links > li { list-style: none; position: relative; }
.nav-links a {
  display: block;
  padding: .6rem .8rem;
  font: 600 .875rem/1 var(--body);
  text-decoration: none;
  color: var(--steel-700);
  border-radius: 3px;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav-links a:hover { color: var(--steel-900); background: var(--steel-100); }
.nav-links a[aria-current="page"] { color: var(--signal-deep); }
.nav-links a[aria-current="page"]::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--signal);
  margin-top: .3rem;
}

.has-sub > button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .8rem;
  font: 600 .875rem/1 var(--body);
  background: none;
  border: 0;
  border-radius: 3px;
  color: var(--steel-700);
  cursor: pointer;
}
.has-sub > button:hover { background: var(--steel-100); }
.has-sub > button i { font-size: .7em; transition: transform .2s var(--ease); }
.has-sub[data-open="true"] > button i { transform: rotate(180deg); }

.sub-menu {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  min-width: 15rem;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--signal);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.has-sub[data-open="true"] .sub-menu { opacity: 1; visibility: visible; transform: none; }
.sub-menu a { padding: .6rem .75rem; font-weight: 500; }

.nav-cta { display: flex; align-items: center; gap: .625rem; flex: none; }
.nav-toggle {
  display: none;
  width: 2.9rem; height: 2.9rem;
  background: var(--steel-900);
  border: 0; border-radius: 3px;
  color: var(--signal);
  font-size: 1.05rem;
  cursor: pointer;
}

@media (max-width: 1080px) {
  .nav-toggle { display: grid; place-items: center; }
  .nav-desk { display: none; }
  .nav-bar { min-height: 4.25rem; }
}

/* Below this the sticky call bar carries both actions, so the header keeps
   only the menu toggle. Calling is still one tap away in the top bar. */
@media (max-width: 760px) {
  .nav-cta .btn { display: none; }
  .brand-name { font-size: .62rem; }
}

/* On the narrowest handsets the wordmark and the menu button cannot both fit;
   the B-MAT block on its own still identifies the site. */
@media (max-width: 360px) {
  .brand-name { display: none; }
}

/* mobile drawer */
.nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(23rem, 88vw);
  z-index: 120;
  background: var(--steel-900);
  color: var(--white);
  padding: 1.25rem var(--gutter) 2.5rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .32s var(--ease);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.nav-drawer[data-open="true"] { transform: none; }
.nav-drawer-head { display: flex; justify-content: flex-end; margin-bottom: .75rem; }
.nav-drawer-close {
  width: 2.75rem; height: 2.75rem;
  background: none; border: 1px solid var(--rule-dark); border-radius: 3px;
  color: var(--white); cursor: pointer;
}
.nav-drawer ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer > ul > li { border-bottom: 1px solid var(--rule-dark); }
.nav-drawer a {
  display: block;
  padding: .95rem 0;
  font: 800 1.05rem/1.2 var(--display);
  font-stretch: 106%;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--white);
}
.nav-drawer a:hover, .nav-drawer a[aria-current="page"] { color: var(--signal); }
.nav-drawer .sub { padding: 0 0 .75rem .9rem; border-left: 1px solid var(--rule-dark); margin-left: .1rem; }
.nav-drawer .sub a { font: 500 .95rem/1.3 var(--body); text-transform: none; padding: .5rem 0; color: var(--steel-300); }
.nav-drawer .sub a:hover { color: var(--signal); }
.nav-drawer .btn-row { flex-direction: column; margin-top: 1.75rem; }

.scrim {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10, 12, 11, .6);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.scrim[data-open="true"] { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  background: var(--steel-900);
  color: var(--white);
  isolation: isolate;
}
/* The clip lives on the media wrapper, not the section: overflow on .hero
   would make it the scroll container and stop the quote form sticking. */
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(105deg, rgba(15, 18, 16, .95) 0%, rgba(15, 18, 16, .84) 42%, rgba(15, 18, 16, .42) 100%),
    linear-gradient(to top, rgba(15, 18, 16, .9), transparent 55%);
}
.hero-inner {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* Stacked, the form is the last thing in the hero, so there is nothing for
     it to stick past. */
  .hero-form { position: static; }
}

/* The hero spends its green in two places only — the town name and the primary
   call to action. Everything else is held in steel so those two carry the eye. */
.hero h1 {
  color: var(--white);
  font-size: clamp(1.95rem, 5.4vw, 3.75rem);
  /* Tighter than the global heading leading: at this size the uppercase
     setting has no descenders to clear, so the lines can close up. */
  line-height: .95;
}
.hero h1 .hl { color: var(--signal); }
.hero-lede { font-size: clamp(1rem, 1.45vw, 1.15rem); color: var(--steel-200); max-width: 48ch; margin-bottom: 0; }

/* ---------------------------------------------------- hero trust bar -- */
.trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.trust-logos {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 1.25rem; list-style: none; margin: 0; padding: 0;
}
.trust-logos img {
  height: 2.3rem; width: auto;
  /* The supplied marks are dark artwork; knocking them back to white keeps
     them legible on the hero without needing separate assets. */
  filter: brightness(0) invert(1);
  opacity: .78;
  transition: opacity .18s var(--ease);
}
.trust-logos img:hover { opacity: 1; }

.trust-google {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem .85rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 3px;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.trust-google:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .3); }
.trust-google img { width: 1.15rem; height: 1.15rem; }
/* Direct child only: a bare `span` selector here would also catch .stars and
   stack the row of stars into a column. */
.trust-google > span { display: grid; gap: .25rem; justify-items: start; }
.trust-google strong {
  font: 600 .7rem/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--white);
}
.trust-google .stars { display: inline-flex; gap: .12rem; font-size: .66rem; }

/* -------------------------------------------------- hero quote form --- */
/* Pins while the hero scrolls past, so the form is still there as the visitor
   starts reading. Header is ~6rem, hence the offset. */
.hero-form {
  position: sticky;
  top: 6.5rem;
  align-self: start;
  background: var(--white);
  color: var(--ink);
  border-radius: 3px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  --cut: 1.75rem;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
.hero-form-head {
  padding: 1.5rem clamp(1.25rem, 2.5vw, 1.75rem) 1.15rem;
  border-bottom: 1px solid var(--rule);
  border-top: 4px solid var(--signal);
}
.hero-form-head h2 {
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  margin-bottom: .3rem;
  text-transform: uppercase;
}
.hero-form-head p { margin: 0; font-size: .92rem; color: var(--ink-soft); }
.hero-form form { padding: 1.25rem clamp(1.25rem, 2.5vw, 1.75rem) 1.5rem; }
.hero-form .field { margin-bottom: .85rem; }
/* The hero column is narrower than the full-width forms, so the paired fields
   need a smaller floor before they drop to one per row. */
.hero-form .field-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0 .85rem;
}
.hero-form .btn { margin-top: .35rem; }
.hero-form-note {
  margin: .9rem 0 0;
  font: 500 .76rem/1.5 var(--mono);
  color: var(--steel-500);
  text-align: center;
}
.hero-form-note a { color: var(--ink); font-weight: 600; }

@media (max-width: 1000px) {
  .hero-form { max-width: 34rem; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 1.5rem;
  padding: .5rem .8rem .5rem .65rem;
  border: 1px solid rgba(73, 227, 43, .35);
  background: rgba(73, 227, 43, .1);
  border-radius: 2px;
}

/* Held in steel so the only green above the fold is the town name and the
   primary call to action. */
.eyebrow--quiet {
  color: var(--steel-200);
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
}
.eyebrow--quiet::before { background: var(--steel-300); box-shadow: none; }
.eyebrow::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(73, 227, 43, .6);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(73, 227, 43, .55); }
  70% { box-shadow: 0 0 0 9px rgba(73, 227, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(73, 227, 43, 0); }
}

/* --------------------------------------- signature: the Scafftag device -- */
/* A real scaffold inspection tag: green = passed for use. Hung at the access
   point of every scaffold, so it earns its place as the site's key card. */
.scafftag {
  position: relative;
  background: var(--white);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.scafftag::before {
  content: '';
  position: absolute;
  top: .95rem; left: 50%;
  width: 2.6rem; height: .55rem;
  transform: translateX(-50%);
  border-radius: 99px;
  background: var(--steel-900);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6);
  z-index: 2;
}
.scafftag-head {
  background: var(--signal);
  color: var(--steel-900);
  padding: 2.15rem 1.5rem 1.15rem;
  text-align: center;
  border-bottom: 3px solid var(--steel-900);
}
.scafftag-head strong {
  display: block;
  font: 800 1.5rem/1 var(--display);
  font-stretch: 114%;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.scafftag-head span {
  display: block;
  margin-top: .35rem;
  font: 600 .68rem/1 var(--mono);
  letter-spacing: .19em;
  text-transform: uppercase;
}
.scafftag-body { padding: 1.4rem 1.5rem 1.5rem; }
.scafftag-rows { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.scafftag-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--steel-200);
  font-size: .92rem;
}
.scafftag-rows li:last-child { border-bottom: 0; }
.scafftag-rows dt, .scafftag-rows .k {
  font: 500 .68rem/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-500);
  flex: none;
}
.scafftag-rows .v { font-weight: 600; text-align: right; }
.scafftag-note {
  font: 500 .72rem/1.5 var(--mono);
  color: var(--steel-500);
  text-align: center;
  margin-top: 1rem;
}

/* -------------------------------------------------------------- cards --- */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.75rem;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: 0; }
.lift--dark .card { background: var(--steel-800); border-color: var(--rule-dark); }
.lift--dark .card p { color: var(--steel-300); }

a.card, .card--link { text-decoration: none; display: block; }
a.card:hover, .card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--signal);
}

.card-ico {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: 1.25rem;
  background: var(--steel-900);
  color: var(--signal);
  border-radius: 3px;
  font-size: 1.15rem;
}
.lift--dark .card-ico { background: var(--signal); color: var(--steel-900); }

/* Tighter card for a four-across row of supporting points, where the copy is a
   single short sentence and the full card padding leaves the row looking airy. */
.card--compact { padding: 1.25rem 1.3rem; }
.card--compact .card-ico {
  width: 2.4rem; height: 2.4rem;
  margin-bottom: .9rem;
  font-size: .95rem;
}
.card--compact h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.card--compact p { font-size: .88rem; line-height: 1.5; }

.card-num {
  position: absolute;
  top: 1.4rem; right: 1.5rem;
  font: 600 .7rem/1 var(--mono);
  letter-spacing: .1em;
  color: var(--steel-300);
}
/* Keep a heading clear of the marker sitting in the top-right corner. */
.card-num ~ h3 { padding-right: 4.5rem; }

.card-more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  font: 800 .78rem/1 var(--display);
  font-stretch: 106%;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--signal-deep);
}
.card-more i { transition: transform .2s var(--ease); }
a.card:hover .card-more i, .card--link:hover .card-more i { transform: translateX(4px); }
.lift--dark .card-more { color: var(--signal); }

/* service cards with imagery */
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 21rem;
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  background: var(--steel-900);
  isolation: isolate;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.svc-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.svc-card::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(13, 16, 14, .94) 12%, rgba(13, 16, 14, .55) 52%, rgba(13, 16, 14, .18) 100%);
  transition: background .3s var(--ease);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.svc-card:hover img { transform: scale(1.06); }
.svc-card-body { margin-top: auto; padding: 1.6rem; color: var(--white); }
.svc-card h3 { color: var(--white); margin-bottom: .4rem; text-transform: uppercase; font-stretch: 110%; }
.svc-card p { color: var(--steel-200); font-size: .93rem; margin: 0; }
.svc-card .card-more { color: var(--signal); }
.svc-card-tag {
  position: absolute; top: 1.1rem; left: 1.1rem;
  padding: .4rem .65rem;
  background: var(--signal);
  color: var(--steel-900);
  font: 600 .66rem/1 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  border-radius: 2px;
}

/* ------------------------------------------------------- ticks & lists -- */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.ticks li { position: relative; padding-left: 2rem; font-size: .98rem; }
.ticks li::before {
  content: '\f00c';
  font: 900 .72rem/1 'Font Awesome 6 Free';
  position: absolute;
  left: 0; top: .3rem;
  display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem;
  background: var(--signal);
  color: var(--steel-900);
  border-radius: 2px;
}
.ticks--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.lift--dark .ticks li { color: var(--steel-200); }

/* ------------------------------------------------------- stats / strip -- */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  border: 1px solid var(--rule);
  background: var(--white);
}
.strip > div { padding: 1.75rem 1.5rem; border-right: 1px solid var(--rule); }
.strip > div:last-child { border-right: 0; }
.strip strong {
  display: block;
  font: 800 clamp(1.6rem, 3vw, 2.35rem)/1 var(--display);
  font-stretch: 112%;
  color: var(--steel-900);
  margin-bottom: .35rem;
}
.strip span { font: 500 .74rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel-500); }
@media (max-width: 700px) {
  .strip > div { border-right: 0; border-bottom: 1px solid var(--rule); }
  .strip > div:last-child { border-bottom: 0; }
}

/* ------------------------------------------------------------ split -- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.split--top { align-items: start; }
.split-media { position: relative; }
.split-media img { border-radius: 3px; width: 100%; }
/* A portrait job photo alongside a short intro: cap the height so the picture
   sits level with the copy instead of setting the height of the whole row. */
.split-media--tall img {
  max-height: 30rem;
  object-fit: cover;
  object-position: 50% 35%;
}
/* Portrait photo beside a tall text column: let the copy set the height of the
   row and have the picture fill exactly that, so the two columns start and
   finish on the same line instead of the image overhanging both ends. Only
   once the split is actually two columns - stacked, the image needs its own
   height back.  */
@media (min-width: 900px) {
  .split--fit { align-items: stretch; }
  .split--fit .split-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.split-media::after {
  content: '';
  position: absolute;
  inset: auto -1rem -1rem auto;
  width: 55%; height: 55%;
  border-right: 2px solid var(--signal);
  border-bottom: 2px solid var(--signal);
  border-radius: 0 0 3px 0;
  z-index: -1;
}

/* --------------------------------------------------------- accordions -- */
.accordion { border-top: 1px solid var(--rule); }
.lift--dark .accordion { border-color: var(--rule-dark); }
.acc-item { border-bottom: 1px solid var(--rule); }
.lift--dark .acc-item { border-color: var(--rule-dark); }
.acc-item h3 { margin: 0; }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: 800 clamp(1rem, 1.5vw, 1.15rem)/1.35 var(--display);
  font-stretch: 106%;
  letter-spacing: -.008em;
  color: var(--ink);
}
.lift--dark .acc-btn { color: var(--white); }
.acc-btn span.i {
  flex: none;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--steel-300);
  border-radius: 2px;
  font-size: .7rem;
  color: var(--steel-600);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.lift--dark .acc-btn span.i { border-color: var(--rule-dark); color: var(--steel-300); }
.acc-btn[aria-expanded="true"] span.i {
  background: var(--signal); border-color: var(--signal); color: var(--steel-900); transform: rotate(45deg);
}
.acc-panel { overflow: hidden; height: 0; transition: height .3s var(--ease); }
.acc-panel > div { padding: 0 0 1.5rem; color: var(--ink-soft); max-width: 72ch; }
.lift--dark .acc-panel > div { color: var(--steel-300); }

/* ------------------------------------------------------------ reviews -- */
.reviews-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2.5rem;
  padding: 1.5rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--signal);
  margin-bottom: 2rem;
}
.g-logo { display: flex; align-items: center; gap: .6rem; flex: none; }
.g-logo img { width: 1.6rem; height: 1.6rem; }
.g-logo span { font: 800 1.05rem/1 var(--display); font-stretch: 106%; letter-spacing: -.01em; color: var(--ink); }
.g-score { display: flex; align-items: center; gap: .75rem; }
.stars { display: inline-flex; gap: .12rem; color: #FFA000; font-size: .95rem; }
.g-meta { font: 500 .8rem/1.5 var(--mono); color: var(--steel-500); }

.review-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(85vw, 22rem), 1fr);
  gap: 1.25rem;
  overflow-x: auto;
  /* Proximity rather than mandatory: mandatory snapping fights programmatic
     scrolling from the arrow buttons. */
  scroll-snap-type: x proximity;
  /* The arrows set scrollLeft directly; this is what animates the move. */
  scroll-behavior: smooth;
  padding-bottom: 1.25rem;
  scrollbar-width: thin;
}
.review-rail > * { scroll-snap-align: start; }
.review {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.review-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review p { font-size: .95rem; color: var(--ink-soft); margin: 0; flex: 1; }
.review-by { display: flex; align-items: center; gap: .75rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.avatar {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  flex: none;
  border-radius: 50%;
  background: var(--steel-900);
  color: var(--signal);
  font: 800 .85rem/1 var(--display);
}
.review-by strong { display: block; font-size: .9rem; }
/* Scoped to the text block so it cannot override the avatar's own colour. */
.review-by div span { font: 500 .72rem/1.3 var(--mono); color: var(--steel-500); }
.rail-nav { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .25rem; }
.rail-btn {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: 3px;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.rail-btn:hover { background: var(--steel-900); border-color: var(--steel-900); color: var(--signal); }
.rail-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* --------------------------------------------------------------- forms -- */
.field { display: block; margin-bottom: 1.15rem; }
.field > .lbl {
  display: block;
  margin-bottom: .45rem;
  font: 500 .7rem/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-600);
}
.field .req { color: var(--signal-deep); }
.lift--dark .field > .lbl { color: var(--steel-300); }
.lift--dark .field .req { color: var(--signal); }

.input, .select, .textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: 2px;
  font-size: 1rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 0;
  border-color: var(--signal-deep);
  box-shadow: 0 0 0 3px rgba(73, 227, 43, .22);
}
.textarea { min-height: 8rem; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235B615C' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: .75rem;
  padding-right: 2.5rem;
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 1.15rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* choice chips used by the quote builder */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: .75rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice span {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  height: 100%;
  padding: 1rem 1.1rem;
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
  transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.choice span em {
  font: 500 .72rem/1.4 var(--mono);
  font-style: normal;
  color: var(--steel-500);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.choice span i { font-size: 1.15rem; color: var(--steel-600); margin-bottom: .2rem; }
.choice input:hover + span { border-color: var(--steel-600); }
.choice input:checked + span {
  border-color: var(--signal-deep);
  background: rgba(73, 227, 43, .08);
  box-shadow: inset 0 0 0 1px var(--signal-deep);
}
.choice input:checked + span i { color: var(--signal-deep); }
.choice input:focus-visible + span { outline: 3px solid var(--signal-deep); outline-offset: 2px; }

/* -------------------------------------------------- quote builder shell -- */
.quote-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 940px) { .quote-wrap { grid-template-columns: 1fr; } }

.quote-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--signal);
  border-radius: 3px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}

.steps { display: flex; gap: .4rem; margin-bottom: 2rem; }
.steps li { list-style: none; flex: 1; }
.steps .bar { display: block; height: 4px; background: var(--steel-200); border-radius: 99px; transition: background .3s var(--ease); }
.steps li[data-state="done"] .bar, .steps li[data-state="current"] .bar { background: var(--signal); }
.steps .t {
  display: block;
  margin-top: .55rem;
  font: 500 .66rem/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-400);
}
.steps li[data-state="current"] .t { color: var(--ink); }
@media (max-width: 620px) { .steps .t { display: none; } }

.step { display: none; }
.step[data-active="true"] { display: block; animation: stepIn .32s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.step h3 { margin-bottom: .35rem; }
.step > p.hint { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.5rem; }

.step-nav { display: flex; gap: .75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.step-nav .btn { flex: 0 0 auto; }
.step-nav .spacer { flex: 1; }

.form-error {
  display: none;
  margin-top: 1rem;
  padding: .75rem 1rem;
  background: rgba(214, 40, 40, .08);
  border-left: 3px solid #D62828;
  font-size: .9rem;
  color: #8F1D1D;
}
/* :target so the failure is still visible with JavaScript switched off —
   send.php redirects back to #send-error. */
.form-error[data-show="true"],
.form-error:target { display: block; }

/* -------------------------------------------------------------- footer -- */
.site-footer { background: var(--steel-900); color: var(--steel-300); }
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 4.75rem);
}
@media (max-width: 940px) { .footer-main { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } }
.site-footer h4 {
  color: var(--white);
  font: 800 .76rem/1 var(--display);
  font-stretch: 108%;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--rule-dark);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { color: var(--steel-300); text-decoration: none; font-size: .92rem; transition: color .16s var(--ease); }
.site-footer a:hover { color: var(--signal); }
.site-footer .brand-name { color: var(--white); }
.site-footer .brand-name em { color: var(--steel-400); }
.footer-blurb { font-size: .92rem; margin: 1.25rem 0 1.5rem; max-width: 34ch; }

.footer-contact { display: grid; gap: .9rem; }
.footer-contact li { display: flex; gap: .8rem; font-size: .92rem; line-height: 1.5; }
.footer-contact i { color: var(--signal); width: 1rem; flex: none; margin-top: .3rem; }
.footer-contact a { font-size: inherit; }

.socials { display: flex; gap: .5rem; margin-top: 1.5rem; }
.socials a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  color: var(--white);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.socials a:hover { background: var(--signal); border-color: var(--signal); color: var(--steel-900); }

.badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.badges span {
  padding: .45rem .7rem;
  border: 1px solid var(--rule-dark);
  border-radius: 2px;
  font: 600 .68rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--steel-200);
}

.footer-base {
  border-top: 1px solid var(--rule-dark);
  padding-block: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 2rem;
  justify-content: space-between;
  align-items: center;
  font: 500 .76rem/1.5 var(--mono);
  color: var(--steel-400);
}
.footer-base a { font-size: inherit; }
.footer-base nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* --------------------------------------------------------- breadcrumbs -- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  padding-block: 1rem;
  font: 500 .74rem/1.4 var(--mono);
  color: var(--steel-500);
  list-style: none;
  margin: 0;
}
.crumbs a { color: var(--steel-500); text-decoration: none; }
.crumbs a:hover { color: var(--signal-deep); }
.crumbs li + li::before { content: '/'; margin-right: .5rem; color: var(--steel-300); }
.crumbs [aria-current] { color: var(--ink); }
.page-head--dark .crumbs, .page-head--dark .crumbs a { color: var(--steel-400); }
.page-head--dark .crumbs [aria-current] { color: var(--white); }
.page-head--dark .crumbs a:hover { color: var(--signal); }

/* --------------------------------------------------------- page header -- */
.page-head {
  position: relative;
  background: var(--steel-900);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.page-head img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.page-head::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(15, 18, 16, .95) 0%, rgba(15, 18, 16, .88) 42%, rgba(15, 18, 16, .55) 100%),
    linear-gradient(to top, rgba(15, 18, 16, .8), transparent 60%);
}
/* Inner-page heroes are set tighter than the homepage statement so the content
   starts higher up the page. The H1 text itself is untouched — this is purely
   type size and spacing, so nothing changes for search. */
.page-head-inner { padding-block: clamp(1.75rem, 3.4vw, 2.75rem) clamp(2rem, 3.6vw, 3rem); }
.page-head h1 {
  color: var(--white);
  margin-bottom: .55rem;
  font-size: clamp(1.85rem, 4.4vw, 3.1rem);
}
.page-head .lede {
  color: var(--steel-200);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
  max-width: 58ch;
}

/* --------------------------------------------------------- floating UI -- */
.dock {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.5rem);
  bottom: clamp(.9rem, 2vw, 1.5rem);
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
}

.wa-panel {
  width: min(20.5rem, calc(100vw - 2rem));
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.96);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.wa-panel[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.wa-head {
  background: #075E54;
  color: #fff;
  padding: 1rem 1.1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
}
.wa-head .ava {
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  flex: none;
  background: var(--signal);
  color: var(--steel-900);
  border-radius: 50%;
  font: 800 .8rem/1 var(--display);
}
.wa-head strong { display: block; font-size: .95rem; }
.wa-head span { font: 500 .7rem/1.3 var(--mono); opacity: .85; display: flex; align-items: center; gap: .35rem; }
.wa-head span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #25D366; }
.wa-close { margin-left: auto; background: none; border: 0; color: #fff; cursor: pointer; opacity: .8; font-size: 1rem; }
.wa-close:hover { opacity: 1; }
.wa-body { padding: 1.25rem 1.1rem; background: #ECE5DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath fill='%23000' fill-opacity='.03' d='M0 0h20v20H0zM20 20h20v20H20z'/%3E%3C/svg%3E"); }
.wa-msg {
  background: var(--white);
  border-radius: 0 8px 8px 8px;
  padding: .8rem .95rem;
  font-size: .9rem;
  line-height: 1.5;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .13);
  max-width: 92%;
}
.wa-msg time { display: block; margin-top: .3rem; font: 500 .65rem/1 var(--mono); color: var(--steel-400); text-align: right; }
.wa-foot { padding: .9rem 1.1rem 1.1rem; background: var(--white); }
.wa-foot .btn { background: #25D366; border-color: #25D366; color: #fff; }
.wa-foot .btn:hover { box-shadow: 0 6px 20px rgba(37, 211, 102, .35); }
.wa-hint { margin-top: .6rem; font: 500 .68rem/1.4 var(--mono); color: var(--steel-500); text-align: center; }

.dock-btns { display: flex; gap: .625rem; align-items: center; }
.dock-fab {
  display: grid;
  place-items: center;
  width: 3.5rem; height: 3.5rem;
  border: 0;
  border-radius: 50%;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(22, 25, 23, .28);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease), color .2s var(--ease);
}
.dock-fab:hover { transform: scale(1.07); }
.dock-fab--wa { background: #25D366; position: relative; }
.dock-fab--wa::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, .55);
  animation: pulse-wa 3s infinite;
}
@keyframes pulse-wa {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.dock-fab--call {
  background: var(--steel-900);
  color: var(--signal);
  border: 2px solid var(--signal);
  font-size: 1.5rem;
}
.dock-fab--call:hover { background: var(--signal); color: var(--steel-900); }
.dock-badge {
  position: absolute;
  top: -2px; right: -2px;
  width: 1.15rem; height: 1.15rem;
  display: grid; place-items: center;
  background: #EA4335;
  color: #fff;
  border-radius: 50%;
  font: 700 .62rem/1 var(--body);
  border: 2px solid var(--white);
}

/* Below 720px the sticky call bar already offers "Call us", so the floating
   call button would just be a second one. */
@media (max-width: 720px) { .dock-fab--call { display: none; } }

/* mobile sticky call bar */
.call-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 94;
  display: none;
  background: var(--steel-900);
  border-top: 2px solid var(--signal);
}
.call-bar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem .5rem;
  color: var(--white);
  text-decoration: none;
  font: 800 .8rem/1 var(--display);
  font-stretch: 106%;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.call-bar a + a { border-left: 1px solid var(--rule-dark); }
.call-bar a i { color: var(--signal); }
.call-bar a.primary { background: var(--signal); color: var(--steel-900); }
.call-bar a.primary i { color: var(--steel-900); }
@media (max-width: 720px) {
  .call-bar { display: flex; }
  body { padding-bottom: 3.4rem; }
  .dock { bottom: 4.3rem; }
}

/* -------------------------------------------------------------- misc -- */

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 12, 11, .94);
}
.lightbox[data-open="true"] { display: grid; }
.lightbox img { max-height: 84vh; width: auto; border-radius: 3px; }
.lightbox figcaption { margin-top: 1rem; color: var(--steel-300); font: 500 .8rem/1.5 var(--mono); text-align: center; }
.lightbox-close {
  position: absolute; top: 1.25rem; right: 1.25rem;
  width: 3rem; height: 3rem;
  background: none;
  border: 1px solid var(--rule-dark);
  border-radius: 3px;
  color: var(--white);
  cursor: pointer;
}
.lightbox-close:hover { background: var(--signal); border-color: var(--signal); color: var(--steel-900); }

/* CTA band — scaffolding photography under a heavy green wash, so the
   structure reads as texture without costing the dark type its contrast. */
.cta-band {
  position: relative;
  overflow: hidden;
  color: var(--steel-900);
  background: var(--signal)
    url('/assets/img/scaffold-tube-and-fitting-walkway-essex-1280.webp') center / cover no-repeat;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Stays inside the bright signal green the whole way across: the band
     carries dark type, and a deeper green at the far end would drop the
     ghost button below 4.5:1. At .90 the worst case still measures ~8:1. */
  background: linear-gradient(105deg,
    rgba(73, 227, 43, .97) 0%,
    rgba(73, 227, 43, .94) 45%,
    rgba(73, 227, 43, .90) 100%);
}
.cta-band .shell { position: relative; }
.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.cta-band h2 { color: var(--steel-900); margin-bottom: .35rem; }
.cta-band p { color: rgba(22, 25, 23, .78); font-weight: 500; margin: 0; max-width: 46ch; }
.cta-band .btn { --btn-bg: var(--steel-900); --btn-fg: var(--white); }
.cta-band .btn--ghost { --btn-bg: transparent; --btn-fg: var(--steel-900); border-color: rgba(22, 25, 23, .35); }
.cta-band .btn--ghost:hover { background: var(--steel-900); border-color: var(--steel-900); color: var(--white); }
.cta-band .btn-row { margin-top: 0; }

/* coverage checker */
.checker {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--signal);
  border-radius: 3px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-md);
}

/* A column of stacked side cards — the sectors list with a photograph under it. */
.side-stack { display: grid; gap: 1.25rem; align-content: start; }
.side-shot { margin: 0; }
.side-shot img {
  width: 100%;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
.side-shot figcaption {
  margin-top: .7rem;
  font: 500 .78rem/1.5 var(--mono);
  color: var(--steel-500);
}

/* Only the postcode checker sticks — it is the one card that should stay in
   reach while its column scrolls. The same shell is reused elsewhere as a
   plain card, sometimes with siblings beneath it. */
.checker--sticky {
  position: sticky;
  top: 7rem;
}
@media (max-width: 900px) {
  .checker--sticky { position: static; }
}
.checker-form { display: flex; gap: .75rem; flex-wrap: wrap; }
.checker-form .input { flex: 1 1 12rem; text-transform: uppercase; font-family: var(--mono); letter-spacing: .1em; }
.checker-out { margin-top: 1.25rem; display: none; }
.checker-out[data-show="true"] { display: block; animation: stepIn .3s var(--ease); }
.checker-result {
  display: flex;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: 3px;
  border-left: 4px solid var(--signal);
  background: rgba(73, 227, 43, .09);
}
.checker-result[data-state="miss"] { border-left-color: var(--hazard); background: rgba(255, 184, 0, .11); }
.checker-result i { font-size: 1.25rem; color: var(--signal-deep); margin-top: .15rem; }
.checker-result[data-state="miss"] i { color: #A87400; }
.checker-result strong { display: block; margin-bottom: .2rem; }
.checker-result p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

/* area & project chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.chips a, .chips button {
  display: inline-block;
  padding: .5rem .85rem;
  background: var(--white);
  border: 1px solid var(--steel-200);
  border-radius: 99px;
  font: 500 .82rem/1 var(--body);
  color: var(--steel-700);
  text-decoration: none;
  cursor: pointer;
  transition: all .16s var(--ease);
}
.chips a:hover, .chips button:hover { border-color: var(--steel-900); background: var(--steel-900); color: var(--white); }
.chips button[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: var(--steel-900); font-weight: 600; }

/* project list */
.projects { display: grid; gap: .75rem; }
.project {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.15rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.project:hover { border-color: var(--signal); transform: translateX(3px); box-shadow: var(--shadow-sm); }
.project-ref { font: 600 .72rem/1.4 var(--mono); color: var(--steel-500); letter-spacing: .04em; }
.project h3 { font-size: 1.05rem; margin: 0 0 .2rem; font-stretch: 104%; }
.project p { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.project-loc { font: 500 .75rem/1.4 var(--mono); color: var(--steel-500); text-align: right; white-space: nowrap; }
.project[hidden] { display: none; }
@media (max-width: 720px) {
  .project { grid-template-columns: 1fr; gap: .5rem; }
  /* Stacked, the location has the full width to itself, and keeping it
     nowrap would push the whole grid track wider than the page. */
  .project-loc { text-align: left; white-space: normal; }
}

/* accreditation logos */
.accred-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.accred-row img { height: 3.25rem; width: auto; opacity: .95; }

/* map */
.map-frame {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  background: var(--steel-100);
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ------------------------------------------------- work gallery ------- */
.shots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.shots .shot {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--steel-900);
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 2;
}
.shots .shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s var(--ease), opacity .2s var(--ease);
}
.shots .shot:hover img { transform: scale(1.05); opacity: .88; }
.shots .shot::after {
  content: '\f00e';
  font: 900 1.05rem/1 'Font Awesome 6 Free';
  position: absolute;
  inset: auto .7rem .7rem auto;
  color: var(--white);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
.shots .shot:hover::after { opacity: 1; }
/* The first frame carries the crew's own banner, so it earns a double slot.
   Spanning two columns keeps the seven photos filling whole rows exactly:
   8 cells over 2 rows at four across, or 4 rows at two across. The ratio is
   two columns plus a gutter over one 3:2 row, so it sits flush with its
   neighbours instead of forcing the row taller. */
.shots .shot:first-child { grid-column: span 2; aspect-ratio: 3.05 / 1; }

@media (max-width: 900px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ------------------------------------------- featured case studies ----- */
.cases { display: grid; gap: .6rem; }
.case {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  transition: box-shadow .2s var(--ease);
}
.case:has(.case-btn[aria-expanded="true"]) { box-shadow: var(--shadow-md); }
.case h3 { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: 0; }

.case-btn {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: 0;
  width: 100%;
  /* 1.25rem more than the 1.15/1.35 the other board cards use: this one opens
     into a panel of body copy, and the extra breathing room inside the card
     keeps the text off the border. */
  padding: 2.4rem 2.6rem;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background .18s var(--ease);
}
.case-btn:hover { background: var(--board); }
.case-ref {
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .1em;
  color: var(--steel-500);
}
.case-title {
  font: 800 clamp(1rem, 1.5vw, 1.2rem)/1.25 var(--display);
  font-stretch: 108%;
  letter-spacing: -.012em;
  color: var(--ink);
}
.case-meta {
  grid-column: 2;
  font: 500 .76rem/1.4 var(--mono);
  color: var(--steel-500);
  margin-top: .1rem;
}
.case-icon {
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--steel-600);
  font-size: .8rem;
  transition: transform .25s var(--ease), background .18s var(--ease),
              color .18s var(--ease), border-color .18s var(--ease);
}
.case-btn[aria-expanded="true"] .case-icon {
  transform: rotate(45deg);
  background: var(--steel-900);
  border-color: var(--steel-900);
  color: var(--white);
}

.case-panel { overflow: hidden; height: 0; transition: height .32s var(--ease); }
.case-panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: .25rem 2.6rem 2.85rem;
  border-top: 1px solid var(--rule);
  margin-top: .25rem;
  padding-top: 1.4rem;
}
.case-copy p { color: var(--ink-soft); font-size: .97rem; }
/* The project-log entries on /case-studies/ carry no photograph, so the panel
   drops the media column and lets the copy run to a comfortable measure. */
.case-panel-inner--text { grid-template-columns: minmax(0, 68ch); }
.case-points {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
}
.case-points li {
  padding: .55rem .9rem;
  background: var(--white);
  border: 1px solid var(--steel-300);
  border-radius: 2px;
  font: 600 .82rem/1.3 var(--body);
  color: var(--ink-soft);
  cursor: default;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .16s var(--ease);
}
.case-points li:hover {
  background: var(--steel-900);
  border-color: var(--steel-900);
  color: var(--white);
  transform: translateY(-2px);
}
.case-date {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  margin-top: 1.25rem;
  font: 500 .76rem/1 var(--mono);
  color: var(--steel-500);
}
.case-date i { color: var(--steel-400); }
.case-tag {
  padding: .35rem .6rem;
  background: var(--board);
  border: 1px solid var(--rule);
  border-radius: 2px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .68rem;
}
.case-media img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 3px;
  min-height: 12rem;
}

@media (max-width: 820px) {
  .case-btn { grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .35rem; }
  .case-ref { grid-column: 1; }
  .case-title, .case-meta { grid-column: 1; }
  .case-icon { grid-column: 2; grid-row: 1 / span 3; }
  .case-panel-inner { grid-template-columns: 1fr; }
  /* Half the extra padding back on a phone, where 2.6rem each side would eat
     the measure the copy needs. */
  .case-btn { padding: 1.75rem 1.95rem; }
  .case-panel-inner { padding-inline: 1.95rem; padding-bottom: 2.2rem; }
  .case-media { order: -1; }
  .case-media img { min-height: 10rem; max-height: 15rem; }
}

/* ------------------------------------------------------- process rail -- */
.steps-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}
.step-card {
  position: relative;
  padding-top: 2.75rem;
  border-top: 2px solid rgba(255, 255, 255, .16);
}
/* The node that sits on the rail, marking where each stage begins. */
.step-card::before {
  content: '';
  position: absolute;
  top: -.5rem; left: 0;
  width: .875rem; height: .875rem;
  border-radius: 50%;
  background: var(--steel-900);
  border: 2px solid var(--steel-400);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.step-card:first-child::before { background: var(--signal); border-color: var(--signal); }
.step-num {
  position: absolute;
  top: 1.1rem; right: 0;
  font: 800 clamp(2.5rem, 5vw, 3.75rem)/1 var(--display);
  font-stretch: 112%;
  color: rgba(255, 255, 255, .07);
  pointer-events: none;
  transition: color .22s var(--ease);
}
/* Hovering a stage lights its numeral, so the eye can walk the sequence. */
.step-card:hover .step-num { color: rgba(73, 227, 43, .55); }
.step-ico {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  margin-bottom: 1.1rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 3px;
  color: var(--steel-200);
  font-size: 1.05rem;
}
.step-card h3 { color: var(--white); margin-bottom: .5rem; font-size: 1.1rem; }
.step-card p { color: var(--steel-300); font-size: .94rem; margin: 0; }

@media (max-width: 900px) {
  .steps-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .steps-rail { grid-template-columns: 1fr; }
}

/* Chamfered top-right corner — a cut board end. Deliberately rationed to
   three components so it reads as a detail rather than a pattern: the three
   homepage service cards, the coverage checker, and the two form cards. */
.svc-card,
.checker,
.quote-card {
  --cut: 1.75rem;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
}
@media (max-width: 600px) {
  .svc-card, .checker, .quote-card { --cut: 1.15rem; }
}

/* Reveal-on-scroll — one restrained motion, applied consistently.
   Gated on .js so that if the script never runs, the content is simply
   visible rather than invisible. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html, .review-rail { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ consent --
   A slim bar rather than a floating card: on a full-height hero a card
   lands squarely on top of the primary CTAs, which is the one thing a
   first-time visitor must be able to reach. Hidden in the markup and
   revealed by site.js only when no answer is stored, so a visitor with
   JavaScript off sees no banner — and gets no analytics either, since
   gtag cannot run for them. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 96;
  background: var(--steel-900);
  border-top: 3px solid var(--signal);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .45);
}
.consent-inner {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  padding: .8rem 0;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.consent p {
  margin: 0;
  flex: 1;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--steel-300);
}
.consent p strong { color: #fff; }
.consent-btns { flex: none; display: flex; gap: .6rem; }
.btn--tiny { padding: .55rem 1.15rem; font-size: .78rem; }

@media (max-width: 860px) {
  .consent-inner { flex-direction: column; align-items: stretch; gap: .8rem; }
  .consent-btns { justify-content: flex-start; }
}
@media (max-width: 720px) {
  .consent { bottom: 3.4rem; }
}