/* ==========================================================================
   Dargavel Contracts Ltd, Bishopton — electrician
   Rebrand of the /mmc-roofing/ build: structure, motion and every component
   below are unchanged; the palette and type are this site's own.

   The palette is the three colours of his own logo: navy #002846, blue
   #0a6eb4, lime #8cbe3c. One rule governs it:
     the lime is a GROUND or an accent on the dark bands, never text on
     white (2.2:1). Black on lime is 9.5:1. The blue is the working accent
     (white on it is 5.4:1), and the navy is the hover and the dark ink.
   ========================================================================== */

/* ---------- fonts (both OFL, vendored, no CDN) ----------
   Exo 2 for display: a geometric, faintly technical sans that sits well
   beside his atom-and-bolt mark without imitating the heavy italic of the
   wordmark. Public Sans for text: plain, even, and very legible small. */
@font-face {
  font-family: "Exo 2";
  src: url("../fonts/Exo2-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Exo 2";
  src: url("../fonts/Exo2-Italic-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-Italic-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; border: 0 solid; }
html { -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--hH) * 1px); }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
menu, ol, ul { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; vertical-align: middle; }
button { background: none; color: inherit; font: inherit; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
u { text-decoration: none; }

/* ---------- design tokens ---------- */
html {
  --container-maxWidth: 72rem;
  --container-pad: var(--vpad);
  --vpad: 1.5rem;
  --titleSize: 3.5rem;
  --lineHeight: 1.65;
  --hH: 72;
  --header-height: var(--hH);
  --easeSmall: cubic-bezier(.445, .05, .55, .95);
  --easeBig: cubic-bezier(.645, .045, .355, 1);
}
@media screen and (min-width: 36rem) { html { --vpad: 2.4rem; --hH: 96; } }
@media screen and (min-width: 50rem) { html { --vpad: 3.25rem; } }
@media screen and (min-width: 60rem) { html { --vpad: 3.75rem; --titleSize: 4rem; } }

html {
  /* near-black, carrying the brand navy */
  --ink: #061a2c;
  --inkSoft: #0d2740;
  --slate: #36495c;
  --mute: #5b6b7a;

  /* The three colours of his own logo (the lockup he uploaded to Google,
     also his Facebook cover): navy #002846 wordmark, blue #0a6eb4 socket
     and bolts, lime #8cbe3c orbits. "Green and Blue" was the brief. */
  --brand: #0a6eb4;
  --brandSoft: #0c5f9b;

  /* the lime. A GROUND or an accent on dark, never text on white:
     black on it is 9.5:1, white on it only 2.2:1, lime on white 2.2:1. */
  --green: #8cbe3c;
  --greenLift: #a6cf63;
  --greenWash: #eef6df;

  /* the blue, as the working accent: buttons, stars, numbers, links.
     White on it is 5.4:1. */
  --greenInk: #0a6eb4;
  /* the navy, for button hover and the deepest accent */
  --greenInkDeep: #002846;

  /* papers, cooled towards the navy */
  --paper: #f6f9fc;
  --white: #ffffff;
  --wash: #eaf0f6;
  --line: #d2dce6;

  /* cable grey. Used rarely, never as a fill. */
  --lead: #8a949e;

  /* the only red on the site, for form validation and nothing else */
  --warn: #a8341f;

  --colBg: var(--paper);
  --colText: var(--ink);
  --colBurger: var(--white);
}

/* ---------- base ---------- */
body {
  background: var(--colBg);
  color: var(--colText);
  font-family: "Public Sans", system-ui, sans-serif;
  font-variation-settings: "wdth" 100;
  font-weight: 400;
  line-height: var(--lineHeight);
  -webkit-font-smoothing: antialiased;
}
body.m-open { overflow: hidden; }
.page-wrapper {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
  overflow: clip;
}
a { color: inherit; text-decoration: underline; text-underline-offset: .28em; text-decoration-thickness: 1px; }
a:hover { color: var(--greenInk); }

strong { font-weight: 600; }
em, i { font-style: italic; }
::selection { background: var(--green); color: var(--ink); }

/* ---------- Lenis ----------
   Lenis runs the scroll, so the browser's own smooth behaviour has to be off
   or the two fight each other on anchor jumps. */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media screen and (prefers-reduced-motion: no-preference) {
  a, .burger__lines, .burger__lines::before, .burger__lines::after,
  .site-header::before, .loading-screen,
  .menu-overlay, .scroll-top,
  .rollover span, .read-more, .splide__arrow, .review__card {
    transition: all .3s var(--easeSmall);
  }
}

/* ---------- utilities ---------- */
.container {
  margin: 0 auto;
  max-width: calc(var(--container-maxWidth) + var(--container-pad) * 2);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  width: 100%;
}
.visual-hide, .skip-main {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-main:focus {
  background: var(--ink); color: var(--white); clip-path: none; width: auto; height: auto;
  left: 50%; transform: translateX(-50%); padding: .6em 1.2em; z-index: 999;
}
.text-center { text-align: center; }
.mt-xs { margin-top: calc(var(--vpad) / 4); } .mb-xs { margin-bottom: calc(var(--vpad) / 4); }
.mt-sm { margin-top: calc(var(--vpad) / 2); } .mb-sm { margin-bottom: calc(var(--vpad) / 2); }
.mt-md { margin-top: var(--vpad); }           .mb-md { margin-bottom: var(--vpad); }
.mt-lg { margin-top: calc(var(--vpad) * 2); } .mb-lg { margin-bottom: calc(var(--vpad) * 2); }
.pt-sm { padding-top: calc(var(--vpad) / 2); } .pb-sm { padding-bottom: calc(var(--vpad) / 2); }
.pt-md { padding-top: var(--vpad); }           .pb-md { padding-bottom: var(--vpad); }
.pt-lg { padding-top: calc(var(--vpad) * 2); } .pb-lg { padding-bottom: calc(var(--vpad) * 2); }

/* ---------- strip layout ---------- */
.strip { position: relative; }
.strip--normal  { --container-maxWidth: 72rem; }
.strip--narrow  { --container-maxWidth: 46rem; }
.strip--xnarrow { --container-maxWidth: 34rem; }
.strip--wide .container { max-width: none; padding-left: 0; padding-right: 0; }

.strip__title2, .strip__title3, .strip__title4, .footer__contacts {
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.strip__title2 {
  font-size: clamp(calc(var(--titleSize) / 1.7), 4.4vw, var(--titleSize));
  margin-bottom: calc(var(--vpad) / 4);
}
.strip__title3 {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  margin-bottom: calc(var(--vpad) / 4);
}
.strip__title4 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.25;
  margin-bottom: .35em;
}

/* the small letterspaced label that marks every section */
.kicker {
  color: var(--mute);
  display: block;
  font-size: .7rem; font-weight: 600; letter-spacing: .18em;
  font-variation-settings: "wdth" 92;
  margin-bottom: 1.1em; text-transform: uppercase;
}
.kicker--center { justify-content: center; }

.lede {
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  line-height: 1.55;
}
.text-decorated { text-wrap: pretty; }
p + p { margin-top: .9em; }
.muted { color: var(--mute); }
.small { font-size: .84rem; line-height: 1.5; }

/* ---------- loading screen ---------- */
.loading-screen { background: var(--ink); position: fixed; inset: 0; z-index: 9999; }
.loading-screen.off, .no-js .loading-screen { opacity: 0; visibility: hidden; }
.loading-screen__inner { left: 50%; top: 50%; position: absolute; transform: translate(-50%, -50%); }
/* a brush loading a wall: a bar that fills, over and over */
.loader { height: 3px; width: 120px; background: rgba(255,255,255,.18); overflow: hidden; }
.loader::after {
  animation: loader-run 1.4s var(--easeBig) infinite;
  background: var(--green); content: ""; display: block; height: 100%; width: 100%;
  transform-origin: 0 50%;
}
@keyframes loader-run {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(1); transform-origin: 0 50%; }
  61%  { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---------- header ---------- */
.site-header { font-size: 1em; left: 0; right: 0; top: 0; position: fixed; z-index: 100; }
.site-header::before {
  background: var(--paper); border-bottom: 1px solid var(--line);
  content: ""; position: absolute; inset: 0; opacity: 0; z-index: -1;
}
.opaque .site-header::before { opacity: 1; }
.header__inner {
  align-items: center; display: flex; gap: 1rem;
  padding: .9rem var(--container-pad);
  position: relative; z-index: 6;
}
/* Everything after the logo sits hard right. Below 46rem the phone is hidden,
   so the burger takes the auto margin instead. */
.header__switcher { margin-left: auto; }
@media screen and (min-width: 46rem) {
  .header__call { margin-left: auto; }
  .header__switcher { margin-left: clamp(1.25rem, 3vw, 2.5rem); }
}
.header__logo { position: relative; z-index: 101; }
.header__logo a { display: block; text-decoration: none; color: var(--white); }
.opaque:not(.m-open) .header__logo a { color: var(--ink); }

/* ---------- the logo ----------
   Paul's own artwork, keyed off its white card by ../build-logo.py. Two files
   so it holds on both grounds: the full-colour one for the pale header, and a
   recoloured one for the header sitting over the hero photograph and for the
   open menu. The header pair leaves the phone line off because the header
   already carries the number as its own tap target; the footer uses the
   complete lockup. */
.logo { display: grid; grid-template-areas: "mark"; }
.logo img {
  grid-area: mark;
  height: 34px; width: auto;
  transition: opacity .3s var(--easeSmall);
}
@media screen and (min-width: 36rem) { .logo img { height: 44px; } }
.logo__light { opacity: 1; }
.logo__dark { opacity: 0; }
/* once the header goes solid the full-colour mark takes over. Inner pages
   have no hero, so they start there rather than flashing the light one. */
.opaque:not(.m-open) .logo__dark,
.inner:not(.m-open) .logo__dark { opacity: 1; }
.opaque:not(.m-open) .logo__light,
.inner:not(.m-open) .logo__light { opacity: 0; }

.logo__footer { height: auto; width: min(15rem, 62%); }

/* the phone sitting in the header, the thing a decorator actually wants clicked */
.header__call {
  align-items: center; display: none; gap: .55em;
  color: var(--white); font-size: .92rem; font-weight: 600;
  letter-spacing: .02em; text-decoration: none;
}
.opaque:not(.m-open) .header__call { color: var(--ink); }
.header__call:hover { color: var(--green); }
.opaque:not(.m-open) .header__call:hover { color: var(--greenInk); }
@media screen and (min-width: 46rem) { .header__call { display: inline-flex; } }
.header__call span:first-child {
  font-size: .66rem; font-weight: 600; letter-spacing: .16em;
  font-variation-settings: "wdth" 88; opacity: .7; text-transform: uppercase;
}

/* burger */
.burger { align-items: center; display: flex; justify-content: center; position: relative; z-index: 1; }
.burger__lines { display: block; margin: 8px 0; position: relative; width: 1.75em; }
.burger__lines u, .burger__lines::before, .burger__lines::after {
  background-color: var(--colBurger);
  display: block; height: 2px; width: 100%;
  transform-origin: 50% 50%;
  transition: background-color .3s var(--easeSmall), transform .3s var(--easeSmall), opacity .3s var(--easeSmall);
}
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; }
.burger__lines::before { top: -7px; }
.burger__lines::after { top: 7px; }
.opaque:not(.m-open) .burger__lines u,
.opaque:not(.m-open) .burger__lines::before,
.opaque:not(.m-open) .burger__lines::after { background-color: var(--ink); }
.is-mouse body:not(.m-open) .burger:hover .burger__lines::before { transform: translate3d(0, 7px, 0); }
.is-mouse body:not(.m-open) .burger:hover .burger__lines::after { transform: translate3d(0, -7px, 0); }
.m-open .burger__lines { transform: rotate(-45deg); }
.m-open .burger__lines u { opacity: 0; }
.m-open .burger__lines::before { transform: translate3d(0, 7px, 0); background-color: var(--white); }
.m-open .burger__lines::after { transform: translate3d(0, -7px, 0) rotate(90deg); background-color: var(--white); }

/* ---------- fullscreen menu ---------- */
.menu-overlay {
  align-items: center;
  background: var(--inkSoft);
  color: var(--white);
  display: flex; flex-flow: column nowrap; justify-content: center;
  inset: 0; position: fixed; z-index: 5;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: scale3d(.94, .94, 1);
  transition: all .55s var(--easeBig);
  padding: var(--vpad);
  padding-top: calc(var(--header-height) * 1px + var(--vpad) / 2);
}
.m-open .menu-overlay { opacity: 1; pointer-events: auto; transform: none; visibility: visible; }
.menu__bg { inset: 0; position: absolute; z-index: 0; pointer-events: none; overflow: hidden; }
.menu__bg img {
  height: 100%; width: 100%; object-fit: cover;
  inset: 0; position: absolute;
  opacity: 0; transition: opacity .45s var(--easeSmall);
}
.menu__bg img.on { opacity: .22; }
.menu__row {
  display: grid; gap: var(--vpad); margin: 0 auto; max-width: 66rem;
  position: relative; width: 100%; z-index: 1;
}
@media screen and (min-width: 50rem) { .menu__row { grid-template-columns: 1.6fr 1fr; align-items: end; } }
.menu__row ul { display: grid; gap: .18em; }
.menu-overlay a { color: inherit; display: inline-block; line-height: 1.1; text-decoration: none; }
.is-mouse .menu-overlay a:hover { color: var(--green); }
.menu__primary {
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: clamp(2rem, 6.5vw, 3.6rem);
}
.menu__primary a { position: relative; }
.menu__primary li { counter-increment: menucount; }
.menu__primary a::before {
  color: var(--greenInk); content: "0" counter(menucount);
  font-family: "Public Sans", sans-serif; font-size: .26em; font-weight: 600;
  letter-spacing: .12em; margin-right: 1em; vertical-align: .9em;
}
.menu__contact { font-size: 1.05rem; }
.menu__contact dt {
  color: var(--green); font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  font-variation-settings: "wdth" 90; text-transform: uppercase;
}
.menu__contact dd + dt { margin-top: 1.3em; }
.menu__contact a { text-decoration: none; }
.menu__contact .big {
  font-family: "Exo 2", system-ui, sans-serif; font-size: 1.6rem;
}

/* dual-span rollover */
.rollover { display: inline-grid; grid-template-areas: "main"; overflow: hidden; text-decoration: none; }
.rollover span { grid-area: main; display: block; white-space: nowrap; transition: all .3s var(--easeSmall); }
.rollover span + span { opacity: 0; transform: translate3d(0, -100%, 0); }
.rollover:hover span { opacity: 0; transform: translate3d(0, 100%, 0); }
.rollover:hover span + span { opacity: 1; transform: none; }

/* ---------- banner ---------- */
.banner { background: var(--inkSoft); overflow: hidden; position: relative; }
.banner__slider, .banner__slide { height: 100dvh; min-height: 34rem; }
.banner__slide { overflow: hidden; position: relative; }
.banner__media { display: block; height: 100%; }
.banner__media img {
  height: 118%; width: 100%; left: 0; top: -9%; position: absolute;
  object-fit: cover; max-width: none;
}
/* a plain single-colour scrim for legibility, no colour ramp */
.banner__scrim {
  background: rgba(15, 28, 34, .52);
  inset: 0; position: absolute; z-index: 2; pointer-events: none;
}
.banner__gradient {
  background-image: linear-gradient(0deg, var(--paper) 4%, rgba(246,248,249,0) 100%);
  bottom: 0; left: 0; right: 0; height: 38%;
  pointer-events: none; position: absolute; z-index: 5;
  transform: translate3d(0, 100%, 0);
}
.banner__inner {
  align-items: flex-end;
  display: flex; inset: 0; position: absolute; z-index: 6;
  padding-bottom: calc(var(--vpad) * 1.5);
}
.banner__copy { color: var(--white); max-width: 46rem; }
.banner__title {
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: clamp(2.2rem, 6.4vw, 4.4rem);
  font-weight: 400; line-height: 1.06; letter-spacing: -0.018em;
  text-wrap: balance;
}
.banner__title em { font-style: italic; }
.banner__sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-top: 1.1em; max-width: 34rem; opacity: .92;
}
.banner__actions {
  align-items: center; display: flex; flex-wrap: wrap; gap: .8rem;
  margin-top: 1.8em;
}
.banner .kicker { color: rgba(255,255,255,.72); }

/* Keep the hero copy clear of the fixed header. The copy block is
   bottom-aligned in a 100dvh hero, so on a laptop-height window it climbs up
   under the logo. Reserve the header's height at the top, step the hero type
   down when the window is short, and let the hero grow a little on very
   short windows rather than clip. */
.banner__inner { padding-top: calc(var(--hH) * 1px + 1.5rem); }
@media screen and (max-height: 50rem) {
  /* short window: centre the copy in the space below the header instead of
     pinning it to the foot, so the gap to the logo is the middle of the two */
  .banner__inner { align-items: center; padding-bottom: var(--vpad); }
  .banner__title { font-size: clamp(2rem, 5vw, 3.8rem); }
  .banner__sub { font-size: clamp(.95rem, 1.5vw, 1.1rem); margin-top: .9em; }
  .banner__actions { margin-top: 1.3em; }
}
@media screen and (max-height: 42rem) {
  .banner__slider, .banner__slide { min-height: 40rem; }
  .banner__title { font-size: clamp(1.8rem, 4.2vw, 2.8rem); }
}
.banner__meta {
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.8);
  display: flex; flex-wrap: wrap; gap: .5em 1.6em;
  font-size: .78rem; font-weight: 500; letter-spacing: .1em;
  font-variation-settings: "wdth" 92;
  margin-top: 2em; padding-top: 1em; text-transform: uppercase;
}

/* ---------- buttons ---------- */
.button {
  align-items: center; display: inline-flex; gap: .6em;
  background: var(--greenInk); color: var(--white);
  font-size: .92rem; font-weight: 600; letter-spacing: .02em;
  padding: .95em 1.5em; text-decoration: none;
  transition: background .25s var(--easeSmall), color .25s var(--easeSmall);
}
.button:hover { background: var(--greenInkDeep); color: var(--white); }
.button--ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.45); color: var(--white);
}
.button--ghost:hover { background: var(--white); border-color: var(--white); color: var(--ink); }
.button--ink { background: var(--ink); }
.button--ink:hover { background: var(--inkSoft); }

/* ---------- read-more link ---------- */
.read-more {
  align-items: center; cursor: pointer; display: inline-flex; gap: .55em;
  font-size: .82rem; font-weight: 600; letter-spacing: .12em;
  font-variation-settings: "wdth" 92;
  line-height: 1.2; padding-bottom: .35em;
  position: relative; text-decoration: none; text-transform: uppercase;
}
.read-more::before {
  border-bottom: 1px solid currentColor; content: "";
  left: 0; position: absolute; top: 100%; width: 100%; opacity: .45;
}
.read-more:hover { color: var(--greenInk); }
.read-more:hover::before { opacity: 1; }

/* ---------- trades: a horizontal run driven by vertical scroll ----------
   The section pins and the track slides sideways as you scroll down, so the
   six trades read as one continuous move rather than as a list beside a photo.
   On narrow screens the pin is dropped and the track becomes an ordinary
   swipeable row with snap points. */
.trades { background: var(--ink); color: var(--white); position: relative; }
.trades__head { padding: calc(var(--vpad) * 1.4) 0 calc(var(--vpad) / 1.2); }
.trades .kicker { color: rgba(255, 255, 255, .55); }
.trades__count {
  color: var(--green);
  font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  font-variation-settings: "wdth" 88; text-transform: uppercase;
}
.trades__viewport { overflow: hidden; padding-bottom: calc(var(--vpad) * 1.2); }
.trades__track {
  display: flex; gap: 1px;
  padding-left: max(var(--container-pad), calc(50vw - 36rem));
  padding-right: var(--container-pad);
  width: max-content;
}
.trade {
  background: var(--ink);
  flex: 0 0 auto;
  width: clamp(15rem, 24vw, 20rem);
  position: relative;
}
.trade__figure { overflow: hidden; position: relative; }
.trade__figure img {
  aspect-ratio: 3 / 4; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 34%;
  transform: scale(1.08); transform-origin: 50% 50%;
}
.trade__no {
  background: var(--greenInk); color: var(--white);
  font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  font-variation-settings: "wdth" 86;
  left: 0; top: 0; padding: .55em 1em; position: absolute; z-index: 2;
}
.trade__body { padding: 1.2em 1.3em 0 0; }
.trade__name {
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15;
}
.trade__meta {
  color: rgba(255, 255, 255, .6);
  font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  font-variation-settings: "wdth" 88;
  margin-top: .7em; text-transform: uppercase;
}
.trades__meter {
  align-items: center; display: flex; gap: 1.5rem;
  margin-bottom: calc(var(--vpad) * 1.3);
}
.trades__rail { background: rgba(255, 255, 255, .14); flex: 1 1 auto; height: 2px; }
.trades__rail span {
  background: var(--green); display: block; height: 100%; width: 0;
  transform-origin: 0 50%;
}
.trades__note {
  border-left: 2px solid var(--greenInk);
  color: rgba(255, 255, 255, .74);
  font-size: .92rem; max-width: 34rem;
  padding: .2em 0 .2em 1.1em;
}
/* no pinning on a phone: a plain swipeable row instead */
@media screen and (max-width: 54rem) {
  .trades__viewport {
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* without this the first snap point pulls the track past its own padding */
    scroll-padding-left: var(--container-pad);
  }
  .trades__track { gap: .75rem; padding-left: var(--container-pad); }
  .trade { scroll-snap-align: start; width: 72vw; }
  .trades__meter { display: none; }
}

/* ---------- before / after ---------- */
.compare { display: grid; gap: 1px; background: var(--line); }
@media screen and (min-width: 54rem) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__item { background: var(--white); position: relative; }
.compare__item img { width: 100%; aspect-ratio: 1125 / 311; object-fit: cover; }
.compare__tag {
  background: var(--white); color: var(--ink);
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  font-variation-settings: "wdth" 88;
  left: 0; top: 0; position: absolute; padding: .6em 1.1em; text-transform: uppercase;
  z-index: 2;
}
.compare__item--after .compare__tag { background: var(--greenInk); color: var(--white); }
.compare__caption {
  border-top: 1px solid var(--line);
  font-size: .88rem; padding: 1.1em 1.3em;
}
.compare__caption strong { display: block; margin-bottom: .2em; }

/* ---------- the work: a staggered editorial run, not a grid of equal tiles ---------- */
.gallery { display: grid; gap: var(--vpad) calc(var(--vpad) / 1.4); }
@media screen and (min-width: 46rem) { .gallery { grid-template-columns: 1fr 1fr; } }
.gallery__item { display: flex; flex-direction: column; }
/* every second item drops down the page so the run never lines up in rows */
@media screen and (min-width: 46rem) {
  .gallery__item:nth-child(even) { margin-top: calc(var(--vpad) * 2.2); }
  .gallery__item--wide { grid-column: 1 / -1; margin-top: 0; }
}
.gallery__figure { overflow: hidden; }
.gallery__figure img { width: 100%; height: 100%; object-fit: cover; }
.gallery__item--tall .gallery__figure img { aspect-ratio: 4 / 5; }
.gallery__item--wide .gallery__figure img { aspect-ratio: 16 / 9; }
.gallery__caption {
  border-top: 1px solid var(--line);
  display: flex; gap: 1.2em; justify-content: space-between;
  margin-top: 1em; padding-top: .9em;
}
.gallery__caption p { font-size: .92rem; max-width: 28rem; }
.gallery__no {
  color: var(--mute); font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  font-variation-settings: "wdth" 88; white-space: nowrap;
}

/* ---------- numbered process ---------- */
.steps { counter-reset: step; display: grid; gap: 1px; background: var(--line); }
@media screen and (min-width: 44rem) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media screen and (min-width: 66rem) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: var(--paper); counter-increment: step;
  padding: calc(var(--vpad) / 1.4) calc(var(--vpad) / 1.6) var(--vpad);
}
.step::before {
  color: var(--greenInk); content: counter(step, decimal-leading-zero);
  display: block;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  font-variation-settings: "wdth" 88;
  margin-bottom: 1.4em;
}
.step h3 { font-family: "Exo 2", system-ui, sans-serif; font-size: 1.3rem; line-height: 1.2; margin-bottom: .5em; }
.step p { color: var(--slate); font-size: .92rem; }

/* ---------- reviews ---------- */
.review__card {
  background: var(--white); border: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100%;
  padding: calc(var(--vpad) / 1.5);
}
.review__stars { color: var(--greenInk); font-size: .8rem; letter-spacing: .28em; margin-bottom: 1em; }
.review__text {
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 1.05rem; line-height: 1.5;
}
.review__by {
  border-top: 1px solid var(--line);
  color: var(--mute); font-size: .78rem; letter-spacing: .04em;
  margin-top: auto; padding-top: 1.1em;
}
.review__by strong { color: var(--ink); display: block; font-size: .9rem; letter-spacing: 0; }

/* ---------- counters ---------- */
.counters { display: flex; flex-flow: row wrap; gap: var(--vpad); justify-content: center; }
.counters__item { flex: 1 1 12rem; max-width: 20rem; text-align: center; }
.counters__value {
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: clamp(3.4rem, 9vw, 6rem);
  font-weight: 400; line-height: 1; letter-spacing: -0.03em;
}
.counters__label {
  color: var(--mute); font-size: .74rem; font-weight: 600; letter-spacing: .16em;
  font-variation-settings: "wdth" 90;
  margin-top: .9em; text-transform: uppercase;
}

/* ---------- coverage ---------- */
.coverage { display: flex; flex-wrap: wrap; gap: .5rem; }
.coverage li {
  border: 1px solid var(--line); background: var(--white);
  font-size: .86rem; padding: .5em 1em;
}
.coverage li.is-home { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- contact band ---------- */
.contact { background: var(--ink); color: var(--white); }
.contact .kicker { color: rgba(255,255,255,.62); }
.contact__grid { display: grid; gap: var(--vpad); }
@media screen and (min-width: 50rem) { .contact__grid { grid-template-columns: 1.1fr 1fr; } }
.contact__lines { display: grid; gap: 1.4em; }
.contact__lines dt {
  color: var(--green); font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  font-variation-settings: "wdth" 90; text-transform: uppercase;
}
.contact__lines dd { font-size: 1.05rem; margin-top: .25em; }
.contact__lines a { text-decoration: none; }
.contact__lines a:hover { color: var(--green); }
.contact__lines .big { font-family: "Exo 2", system-ui, sans-serif; font-size: 1.9rem; line-height: 1.2; }
.contact__hours { border-top: 1px solid rgba(255,255,255,.18); margin-top: 1.4em; padding-top: 1.2em; }
.contact__hours tr td { padding: .18em 0; font-size: .92rem; }
.contact__hours tr td:last-child { padding-left: 2em; text-align: right; color: rgba(255,255,255,.78); }
.contact__hours tr.is-today td { color: var(--green); font-weight: 600; }

/* ---------- band + rules ---------- */
.band-wash { background: var(--wash); }
.band-white { background: var(--white); }
.rule { background: var(--line); height: 1px; width: 100%; }

/* ---------- splide chrome ---------- */
.splide__pagination {
  bottom: calc(var(--vpad) / 2); left: 50%; position: absolute;
  transform: translateX(-50%); z-index: 10; display: flex; gap: .6em; padding: 0;
}
.splide__pagination li { display: flex; }
.splide__pagination__page {
  background: var(--white); height: 6px; width: 6px; opacity: .45; padding: 0;
  transition: opacity .3s var(--easeSmall), transform .3s var(--easeSmall);
}
.splide__pagination__page.is-active { opacity: 1; transform: scaleX(2.4); }
.splide-arrows--below { display: flex; flex-direction: column; }
.splide-arrows--below .splide__track { order: 1; }
.splide-arrows--below .splide__arrows {
  display: flex; gap: .6rem; justify-content: center;
  margin-top: calc(var(--vpad) / 1.6); order: 2;
}
.splide__arrow {
  align-items: center; border: 1px solid var(--line); color: var(--ink);
  display: inline-flex; height: 2.9em; width: 2.9em; justify-content: center;
}
.splide__arrow svg { fill: currentColor; height: .85em; width: .85em; }
.splide__arrow--prev svg { transform: scaleX(-1); }
.splide__arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.splide__arrow[disabled] { opacity: .3; pointer-events: none; }
.review-slider .splide__slide { height: auto; padding: 0 .4em; }
.review-slider .splide__list { align-items: stretch; }

/* ---------- footer ---------- */
.site-footer { margin-top: auto; background: var(--inkSoft); color: rgba(255,255,255,.78); }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--green); }
.footer__grid { display: grid; gap: var(--vpad); }
@media screen and (min-width: 50rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__wordmark { margin-bottom: 1.4em; }
.footer__heading {
  color: var(--green); font-size: .68rem; font-weight: 600; letter-spacing: .16em;
  font-variation-settings: "wdth" 90; margin-bottom: 1.2em; text-transform: uppercase;
}
.footer__list { display: grid; gap: .55em; font-size: .92rem; }
.footer__list a { text-decoration: none; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .78rem; line-height: 1.4; margin-top: var(--vpad);
  padding: calc(var(--vpad) / 1.6) 0;
}
.footer__bar { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.footer__menu ul { display: flex; flex-wrap: wrap; gap: .5em 1.2em; }
.footer__menu a, .footer__credits a { text-decoration: none; }

/* ---------- back to top ---------- */
.scroll-top { bottom: 1rem; right: 1rem; position: fixed; z-index: 20; opacity: 0; visibility: hidden; }
.opaque .scroll-top { opacity: 1; visibility: visible; }
.m-open .scroll-top { opacity: 0; }
.scroll-top a {
  align-items: center; background: var(--ink); color: var(--white);
  display: flex; justify-content: center; height: 3rem; width: 3rem;
  text-decoration: none;
}
.scroll-top a:hover { background: var(--greenInk); color: var(--white); }
.scroll-top svg { height: 1.1em; width: 1.1em; }

/* ---------- cookie notice ---------- */
.cookie {
  background: var(--white); border-top: 1px solid var(--line);
  bottom: 0; left: 0; right: 0; position: fixed; z-index: 300;
  padding: calc(var(--vpad) / 2) 0;
  transform: translate3d(0, 110%, 0);
  transition: transform .45s var(--easeBig);
}
.cookie.is-open { transform: none; }
.cookie__inner {
  align-items: center; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
}
.cookie__text { flex: 1 1 22rem; font-size: .86rem; line-height: 1.5; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.cookie .button { font-size: .82rem; padding: .75em 1.3em; }
.cookie__decline {
  background: transparent; border: 1px solid var(--line); color: var(--ink);
}
.cookie__decline:hover { background: var(--wash); color: var(--ink); }

/* ---------- quote form ----------
   Validates in the browser, then POSTs to api/book (a Cloudflare Pages
   Function that emails Gary). On the demo path there is no function, so the
   failure state shows instead of a false success. */
.form { display: grid; gap: 1.5rem; }
.form__row { display: grid; gap: 1.5rem; }
@media screen and (min-width: 42rem) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
  .form__row--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.field { display: block; }
.field__label {
  color: var(--slate); display: block;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em;
  font-variation-settings: "wdth" 90;
  margin-bottom: .7em; text-transform: uppercase;
}
.field__label span { color: var(--mute); font-weight: 400; letter-spacing: .06em; }
.field input,
.field select,
.field textarea {
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit; font-size: 1rem; line-height: 1.5;
  padding: .85em 1em;
  width: 100%;
  transition: border-color .2s var(--easeSmall);
}
.field textarea { min-height: 9em; resize: vertical; }
.field select {
  appearance: none;
  /* a plain chevron drawn in the border colour, no icon set involved */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--slate) 50%),
    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 1.4em) 1.35em, calc(100% - 1.05em) 1.35em;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3em;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--greenInk); outline: 2px solid rgba(10, 110, 180, .22); outline-offset: 0;
}
.field input::placeholder, .field textarea::placeholder { color: #9aa9b0; }
.field__hint { color: var(--mute); font-size: .8rem; margin-top: .6em; }

/* the work-type picker: bordered options that fill in when chosen */
.picker { display: flex; flex-wrap: wrap; gap: .5rem; position: relative; }
.picker input { position: absolute; opacity: 0; pointer-events: none; }
.picker label {
  background: var(--white); border: 1px solid var(--line); color: var(--slate);
  cursor: pointer; font-size: .88rem; padding: .6em 1.1em;
  transition: all .2s var(--easeSmall); user-select: none;
}
.picker label:hover { border-color: var(--slate); color: var(--ink); }
.picker input:checked + label {
  background: var(--ink); border-color: var(--ink); color: var(--white);
}
.picker input:focus-visible + label { outline: 2px solid var(--greenInk); outline-offset: 2px; }

/* validation */
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--warn); }
.field__error { color: var(--warn); font-size: .8rem; margin-top: .6em; }
.form__summary {
  border-left: 2px solid var(--warn); color: var(--warn);
  font-size: .9rem; padding: .2em 0 .2em 1em;
}
.form__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.form__actions .button { padding: 1.05em 2em; }
.form__note { color: var(--mute); font-size: .82rem; max-width: 26rem; }

/* the confirmation that replaces the form */
.sent { border: 1px solid var(--line); background: var(--white); padding: calc(var(--vpad) / 1.2); }
.sent__title {
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; margin-bottom: .5em;
}
.sent dl { display: grid; gap: .8em; margin-top: 1.5em; padding-top: 1.5em; border-top: 1px solid var(--line); }
.sent dt {
  color: var(--mute); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  font-variation-settings: "wdth" 88; text-transform: uppercase;
}
.sent dd { margin-top: .2em; }

/* the GDPR line at the point of collection, the spam trap nobody sees, and
   the honest failure state when the email could not be sent */
.form__consent { color: var(--slate); font-size: .84rem; line-height: 1.55; max-width: 40rem; }
.form__trap { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; }
.form__fail {
  border-left: 2px solid var(--warn); color: var(--warn);
  flex-basis: 100%; font-size: .9rem; padding: .2em 0 .2em 1em;
}
.button[disabled] { cursor: progress; opacity: .65; }

/* the aside beside the form */
.quote__grid { display: grid; gap: var(--vpad); }
@media screen and (min-width: 58rem) { .quote__grid { grid-template-columns: 1.55fr 1fr; gap: calc(var(--vpad) * 1.5); } }
.quote__aside { align-self: start; }
@media screen and (min-width: 58rem) { .quote__aside { position: sticky; top: calc(var(--hH) * 1px + var(--vpad)); } }
.quote__panel { background: var(--ink); color: var(--white); padding: calc(var(--vpad) / 1.2); }
.quote__panel .footer__heading { margin-bottom: 1em; }
.quote__steps { counter-reset: qstep; display: grid; gap: 1.2em; }
.quote__steps li { counter-increment: qstep; display: grid; gap: .15em; grid-template-columns: 2.2em 1fr; }
.quote__steps li::before {
  color: var(--green); content: counter(qstep, decimal-leading-zero);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; padding-top: .35em;
}
.quote__steps p { color: rgba(255, 255, 255, .78); font-size: .9rem; }
.quote__steps strong { display: block; font-weight: 600; }
.quote__direct { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 1.6em; padding-top: 1.4em; }
.quote__direct a { text-decoration: none; }
.quote__direct .big { font-family: "Exo 2", system-ui, sans-serif; font-size: 1.5rem; }

/* ---------- legal pages ---------- */
.legal { padding-top: calc(var(--hH) * 1px); }
.legal__body h2 {
  font-family: "Exo 2", system-ui, sans-serif; font-size: 1.5rem;
  margin: 2em 0 .6em;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-weight: 600; margin: 1.6em 0 .4em; }
.legal__body p, .legal__body li { color: var(--slate); }
.legal__body ul { display: grid; gap: .5em; margin: .8em 0; }
.legal__body li { padding-left: 1.2em; position: relative; }
.legal__body li::before {
  background: var(--green); content: ""; height: 1px; left: 0; position: absolute;
  top: .8em; width: .7em;
}
.legal__updated { color: var(--mute); font-size: .84rem; margin-top: 2.5em; }

/* ---------- scroll reveals ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  [data-reveal] { transition: opacity .7s var(--easeBig), transform .7s var(--easeBig); }
  [data-reveal].waiting { opacity: 0; }
  [data-reveal="bottom"].waiting { transform: translate3d(0, 4vh, 0); }
  [data-reveal="top"].waiting { transform: translate3d(0, -4vh, 0); }
}
/* ---------- masked line reveals ----------
   SplitText wraps each line in a bare div with overflow:clip. At these tight
   heading line-heights the clip lands on the baseline, which chops the tail
   off a g or a y. Give every mask a small floor and pull the next line back
   up so the rhythm is unchanged. The reveal translates further than 100% to
   stay hidden behind that extra floor. */
.js-main-title .line,
.js-main-title > div,
.js-lines-reveal > div,
.strip__title2 > div,
.strip__title3 > div,
.trade__name > div,
.banner__title > div {
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.js-main-title .line { overflow: hidden; }
.js-image-anime { overflow: hidden; will-change: clip-path; }
.js-image-anime img { will-change: transform; }
.parallax { overflow: hidden; }
.split-line { overflow: hidden; }

/* static screenshot mode */
.static-mode *, .static-mode *::before, .static-mode *::after {
  transition: none !important; animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media screen and (max-width: 54rem) {
}

@media screen and (max-width: 36rem) {
  .banner__slider, .banner__slide { min-height: 30rem; }
  .banner__inner { padding-bottom: var(--vpad); }
  .banner__meta { gap: .35em 1.1em; font-size: .68rem; }
  .banner__actions { gap: .6rem; }
  .banner__actions .button { flex: 1 1 auto; justify-content: center; }
  .counters { gap: calc(var(--vpad) / 1.5); }
  .counters__item { flex: 1 1 8rem; }
  .counters__value { font-size: clamp(2.6rem, 17vw, 4rem); }
  .counters__label { font-size: .66rem; letter-spacing: .12em; }
  .compare__item img { aspect-ratio: 1125 / 380; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
  .cookie__actions { width: 100%; }
  .cookie__actions .button { flex: 1 1 auto; justify-content: center; }
  .contact__lines .big { font-size: 1.6rem; }
}

/* ---------- questions (added 2026-09-09) ----------
   Plain definition list, two columns from 54rem. Kept static on purpose: no
   accordion, so every answer is on the page for readers and crawlers alike. */
.faq { display: grid; gap: 0 calc(var(--vpad) * 1.2); }
@media screen and (min-width: 54rem) { .faq { grid-template-columns: 1fr 1fr; } }
.faq__item { border-top: 1px solid var(--line); padding: 1.4em 0 1.6em; }
.faq__item dt {
  font-family: "Exo 2", system-ui, sans-serif;
  font-size: 1.2rem; font-weight: 500; line-height: 1.25;
}
.faq__item dd { color: var(--slate); font-size: .95rem; margin-top: .6em; max-width: 34rem; }