/* Create Plumbing & Gasfitting, site styles.
   Palette, type and spacing follow design-system/create-plumbing/MASTER.md. */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/montserrat-latin-var.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013, U+2018-201A, U+201C-201E, U+2026, U+2122, U+00B7, U+2212, U+2215;
}

/* Size-adjusted fallbacks so the swap to Montserrat causes no layout shift.
   Numbers computed from the font files per weight (Montserrat 400 against Arial, 700 and 800 against Arial Bold).
   The bold faces are set a touch wide so the swap never enlarges the painted text, which would move the LCP. */
@font-face {
  font-family: "Montserrat Fallback";
  font-weight: 400 500;
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 114.51%;
  ascent-override: 84.54%;
  descent-override: 21.92%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Fallback";
  font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica-Bold");
  size-adjust: 112.2%;
  ascent-override: 86.27%;
  descent-override: 22.37%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Montserrat Fallback";
  font-weight: 800;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica-Bold");
  size-adjust: 114.5%;
  ascent-override: 84.54%;
  descent-override: 21.92%;
  line-gap-override: 0%;
}

:root {
  --charcoal: #231F20;
  --charcoal-soft: #3A3536;
  --blue: #009FE3;
  --blue-hover: #0090D0;
  --white: #FFFFFF;
  --offwhite: #F6F5F2;
  --grey: #5F5B5C;
  --line: #E4E1DC;
  --line-strong: #B9B5B0;
  --line-dark: rgba(255, 255, 255, 0.16);
  --focus: var(--charcoal);
  --font: "Montserrat", "Montserrat Fallback", Arial, Helvetica, sans-serif;
  --track: 0.16em;
  --max: 1200px;
  --gutter: 20px;
  --radius: 4px;
  --header-h: 68px;
  --callbar-h: 76px;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; --header-h: 92px; }
}

/* Reset and base */
*, *::before, *::after { box-sizing: border-box; }
/* The page never scrolls sideways. clip (not hidden) keeps sticky elements working and creates no scroll container. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); overflow-x: hidden; overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; width: 100%; max-width: 100vw; overflow-x: clip; position: relative;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.25rem, 4.6vw + 0.5rem, 4rem); line-height: 1.08; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 2.2vw + 0.8rem, 2.75rem); }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.25; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.svg-defs { display: none; }
.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; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--charcoal); color: #fff; padding: 10px 16px; border-radius: var(--radius); text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }

/* Layout */
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--off { background: var(--offwhite); }
.section--dark { background: var(--charcoal); color: #fff; --focus: #fff; --line: var(--line-dark); --line-strong: rgba(255, 255, 255, 0.45); --grey: rgba(255, 255, 255, 0.78); }
.section__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head p { color: var(--grey); font-size: 1.1rem; margin-top: 14px; max-width: 640px; }

.eyebrow {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey);
  margin: 0 0 14px;
}
.eyebrow::before { content: ""; flex: none; width: 28px; height: 3px; margin-top: 0.6em; background: var(--blue); }
h1.eyebrow, h2.eyebrow { font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: var(--track); }
h1.eyebrow { font-weight: 500; }
h1.eyebrow strong { font-weight: 800; color: #fff; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--radius); border: 2px solid transparent;
  font-weight: 700; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; line-height: 1.2;
  cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }
.btn--primary { background: var(--blue); color: var(--charcoal); border-color: var(--blue); }
.btn--primary:hover { background: var(--blue-hover); border-color: var(--blue-hover); }
.btn--secondary { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.btn--secondary:hover { background: var(--charcoal-soft); border-color: var(--charcoal-soft); }
.section--dark .btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.section--dark .btn--secondary:hover { border-color: #fff; background: rgba(255, 255, 255, 0.06); }
.btn--small { min-height: 46px; padding: 0 22px; font-size: 0.8rem; letter-spacing: 0.12em; }

/* Stars and Google mark */
.stars { display: inline-flex; gap: 2px; color: var(--blue); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.g { width: 18px; height: 18px; flex: none; }

/* Header */
.header { position: sticky; top: 0; z-index: 50; background: var(--charcoal); color: #fff; border-bottom: 1px solid var(--line-dark); --focus: #fff; }
.header__inner { display: flex; align-items: center; gap: 16px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; text-decoration: none; color: inherit; min-height: 44px; }
.brand img { width: auto; max-width: none; height: 32px; flex: none; }
@media (min-width: 600px) { .brand img { height: 40px; } }
@media (min-width: 900px) { .brand img { height: 55px; } }
.nav { display: none; }
.nav a { white-space: nowrap; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: rgba(255,255,255,0.85); padding: 10px 0; border-bottom: 2px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; }
.nav a:hover { border-color: var(--blue); color: #fff; }
.header__cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header__call { display: none; }
.header__phone { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: var(--charcoal); transition: background-color 0.2s ease; }
.header__phone svg { width: 20px; height: 20px; fill: currentColor; }
.header__phone:hover { background: var(--blue-hover); }
@media (min-width: 1200px) { .header__call { display: inline-flex; } .header__phone { display: none; } }
.menu-btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin-right: -8px;
  background: transparent; border: 0; color: #fff; cursor: pointer;
}
.menu-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.nav.is-open {
  display: flex; flex-direction: column;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--charcoal); border-bottom: 1px solid var(--line-dark);
  padding: 8px var(--gutter) 16px;
}
.nav.is-open a { padding: 14px 0; border-bottom: 1px solid var(--line-dark); font-size: 1rem; }
.nav.is-open a:last-child { border-bottom: 0; }
@media (min-width: 1200px) {
  .nav, .nav.is-open { display: flex; position: static; flex-direction: row; gap: 36px; margin-left: auto; margin-right: 12px; padding: 0; border: 0; background: none; }
  .nav a, .nav.is-open a { padding: 10px 0; border-bottom: 2px solid transparent; font-size: 0.78rem; }
  .nav a:hover { border-color: var(--blue); }
  .header__cta { margin-left: 0; }
  .menu-btn { display: none; }
}


/* Hero: full-bleed photo with a charcoal scrim. Headline left in white, quote form card right.
   The crop puts the truck on the bridge just below the headline copy; the scrim is heaviest behind the text. */
.hero { position: relative; isolation: isolate; padding: clamp(36px, 6vw, 72px) 0; background: var(--charcoal); }
.hero__bg { position: absolute; z-index: -2; left: 0; top: 0; width: 100%; height: 620px; object-fit: cover; object-position: 0% 100%; }
.hero::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 620px;
  background: linear-gradient(180deg, rgba(35,31,32,0.6) 0%, rgba(35,31,32,0.5) 34%, rgba(35,31,32,0) 52%);
}
.hero__grid { display: grid; gap: 36px; }
.hero__text { color: #fff; --grey: rgba(255,255,255,0.9); padding-bottom: 180px; text-shadow: 0 1px 2px rgba(35,31,32,0.35), 0 8px 24px rgba(35,31,32,0.25); }
.hero__text .eyebrow { color: rgba(255,255,255,0.86); }
.hero__headline { font-size: clamp(2.25rem, 4.6vw + 0.5rem, 4rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 640px; }
@media (min-width: 900px) {
  .hero { min-height: 640px; }
  .hero__bg { height: 100%; object-position: 30% 100%; }
  .hero::before { height: 100%; background: linear-gradient(90deg, rgba(35,31,32,0.62) 0%, rgba(35,31,32,0.42) 32%, rgba(35,31,32,0) 56%); }
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 64px; }
  .hero__text { padding: 0 0 48px; }
}

/* Hero: the photo on the left with the headline in a sky that darkens from the top, the quote form in a white panel on the right.
   On phones the photo and headline come first, then the form on a full-width white panel. */
.hero--split { padding: 0; }
.hero--split::before { display: none; }
.split__media { position: relative; isolation: isolate; overflow: hidden; padding: clamp(36px, 6vw, 72px) var(--gutter) 0; }
.split__media .hero__bg { height: 100%; object-position: 50% 100%; }
@media (max-width: 899px) { .split__media .hero__bg { object-position: 50% 100%; } }
@media (max-width: 899px) { .split__media .hero__text { padding-bottom: 300px; } }
.split__media::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(35,31,32,0.6) 0%, rgba(35,31,32,0.45) 40%, rgba(35,31,32,0) 62%); }
.split__panel { background: var(--white); padding: 0; }
.split__panel .form--panel { margin: 0; border-radius: 0; box-shadow: none; padding: 28px var(--gutter) 36px; max-width: none; }

@media (min-width: 900px) {
  .split { display: grid; grid-template-columns: 1fr minmax(420px, 42%); min-height: clamp(660px, 80vh, 820px); }
  .split__media { display: flex; align-items: center; padding: 72px 64px 72px max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  .split__media::before { background: linear-gradient(180deg, rgba(35,31,32,0.6) 0%, rgba(35,31,32,0.46) 40%, rgba(35,31,32,0) 68%); }
  .split__media .hero__headline { font-size: clamp(3rem, 4.4vw, 4.4rem); text-shadow: 0 2px 24px rgba(20,16,18,0.35); }
  .split__media .hero__text { padding: 0 0 clamp(240px, 36vh, 330px); max-width: 640px; }
  .split__panel { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--white); padding: 56px 32px 56px 64px; }
  .split__panel .form--panel { background: transparent; box-shadow: none; padding: 0; width: 100%; max-width: 360px; }
  .split__panel .form--panel .form__row { grid-template-columns: 1fr; }
  .split__panel .form--panel .form__who { align-items: flex-start; }
  .split__panel .form--panel .form__title { font-size: 1.35rem; }

}

/* Trust band under the hero: a statement about range on the left, quiet credentials on the right */
.trustband { padding: 48px 0; }
@media (min-width: 900px) { .trustband { padding: 64px 0; } }
.trustband__grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .trustband__grid { grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center; } }
.trustband__statement h2 { font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.15; letter-spacing: -0.015em; }
.trustband__statement p { margin: 12px 0 0; color: var(--grey); font-size: 1rem; line-height: 1.6; max-width: 540px; }
.creds { list-style: none; display: grid; gap: 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: #fff; }
.creds li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-dark); }
.creds li:first-child { border-top: 0; padding-top: 0; }
.creds .g { width: 20px; height: 20px; }
.creds .stars svg { width: 14px; height: 14px; }
.creds a { color: #fff; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--blue); }
@media (min-width: 1000px) { .creds { gap: 0; } .creds li { padding: 12px 0; } }

/* Reviews slider: one row of cards, slides slowly on its own, swipe or arrows to move */
.reviews .section__head { margin-bottom: 28px; }
.reviews { padding-bottom: clamp(48px, 6vw, 88px); }
.slider { overflow: clip; }
.slider__track {
  display: flex; gap: 18px; overflow-x: auto; cursor: grab; user-select: none;
  padding: 4px max(var(--gutter), calc((100% - var(--max)) / 2)) 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.slider__track.is-dragging .rev { pointer-events: none; }
.slider__track:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.rev {
  position: relative; flex: 0 0 310px; margin: 0;
  background: var(--white); color: var(--charcoal); border: 1px solid rgba(255,255,255,0.35); border-top: 4px solid var(--blue); border-radius: var(--radius);
  padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 14px; align-self: start;
}
.rev::after { content: "\201C"; position: absolute; right: 22px; top: 6px; font-size: 5.5rem; line-height: 1; font-weight: 800; color: var(--blue); opacity: 0.35; pointer-events: none; }
@media (min-width: 600px) { .rev { flex-basis: 400px; padding: 30px 30px 26px; } }
.eyebrow--google::before { display: none; }
.eyebrow--google .g { width: 22px; height: 22px; }
.rev__head { display: flex; align-items: center; gap: 12px; }
.rev__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--charcoal); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1rem; flex: none; }
.rev__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rev__who { flex: 1; min-width: 0; }
.rev__who figcaption { display: grid; line-height: 1.25; }
.rev__who b { font-weight: 700; font-size: 0.95rem; }
.rev__who span { font-size: 0.8rem; color: #5F5B5C; }
.rev .stars { color: var(--blue); }
.rev blockquote { margin: 0; }
.rev p { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.rev.is-clamped p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rev__more { align-self: start; background: none; border: 0; padding: 4px 0; color: var(--charcoal); font-weight: 700; font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue); cursor: pointer; }

/* Services: sticky editorial intro on the left, the list on the right. Rows lift to white on hover. All closed on load. */
.services__layout { display: grid; gap: 40px; }
@media (min-width: 1000px) { .services__layout { grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; } .services__intro { position: sticky; top: calc(var(--header-h) + 32px); } }
.services__intro p { color: var(--grey); font-size: 1.1rem; margin: 14px 0 0; max-width: 420px; }
.services__call { font-size: 1rem; margin-top: 14px; }
.services__call a { color: var(--charcoal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue); white-space: nowrap; }
/* Services: a ruled list with every service open, icon then title then the paragraph. */
.svc { border-top: 1px solid var(--charcoal); }
.svc__col { display: contents; }
.svc__item { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 26px 0; border-bottom: 1px solid var(--line-strong); }
.svc__icon { color: var(--blue); line-height: 0; }
.svc__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc__text { display: grid; gap: 10px; }
.svc__title { font-size: 1.4rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.svc__text p { margin: 0; font-size: 1.02rem; line-height: 1.65; max-width: 60ch; }
@media (min-width: 900px) {
  .svc__item { grid-template-columns: 36px 1fr; gap: 28px; padding: 30px 0; }
  .svc__icon { padding-top: 4px; }
  .svc__icon svg { width: 32px; height: 32px; }
  .svc__title { font-size: 1.6rem; }
}

/* About */
/* About: portrait with a charcoal plate hung on its corner, then statement, story and a ruled list. */
.about { padding-top: clamp(64px, 9vw, 128px); padding-bottom: clamp(64px, 9vw, 128px); }
.about__grid { display: grid; gap: 48px; }
.about__figure { margin: 0; max-width: 440px; }
@media (min-width: 900px) {
  .about__grid { grid-template-columns: minmax(300px, 5fr) 7fr; gap: 88px; align-items: start; }
  .about__figure { position: sticky; top: calc(var(--header-h) + 32px); }
}
.headshot { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.about__plate { position: relative; margin: -56px 0 0 auto; width: min(88%, 320px); background: var(--charcoal); color: #fff; padding: 22px 24px 20px; border-radius: var(--radius); }
.about__plate b { display: block; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; }
.about__plate > span { display: block; margin-top: 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: rgba(255,255,255,0.72); }
.about__plate .licence { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line-dark); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.9; color: rgba(255,255,255,0.78); }
@media (min-width: 900px) { .about__plate { margin-right: -32px; } }
.about__text .eyebrow { margin-bottom: 14px; }
.about__pull { margin: 26px 0 0; font-size: clamp(1.35rem, 1.9vw, 1.8rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; color: var(--charcoal); max-width: 26ch; padding-left: 22px; border-left: 3px solid var(--blue); }
.about__story { margin-top: 28px; max-width: 600px; }
.about__story p { font-size: 1.08rem; line-height: 1.7; }
.about__sub { margin: 44px 0 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey); }
.about__sublead { margin: 0 0 14px; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.way { margin: 0; border-top: 1px solid var(--charcoal); }
.way > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line-strong); }
.way dt { font-weight: 800; font-size: 1rem; line-height: 1.3; }
.way dd { margin: 0; color: var(--grey); font-size: 0.97rem; line-height: 1.55; }
@media (min-width: 600px) { .way > div { grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; align-items: baseline; } }

/* Non-local owners: coastal photo. Phones get it as an uncovered banner at the top of the band;
   from 900px it fills the band, with a charcoal fade behind the text only, clearing before the review card. */
/* Holiday homes: the coast photo is the backdrop from 900px up and not used at all on phones. */
.owners { position: relative; isolation: isolate; overflow: hidden; }
.owners__bg { display: none; }
@media (min-width: 900px) {
  .owners { padding-top: clamp(56px, 8vw, 112px); }
  .owners__bg { display: block; position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
  .owners::before { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(35,31,32,0.74); }
  .owners .section__head p { color: rgba(255,255,255,0.9); }
  .owners .rev--feature { box-shadow: 0 24px 60px rgba(20,16,18,0.35); }
}

/* Non-local owners */
.owners__grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .owners__grid { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } }
.owners__grid .section__head { margin-bottom: 0; }
.quote { margin: 0; border-left: 2px solid var(--blue); padding-left: 20px; }
.quote__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.quote blockquote { margin: 0; }
.quote p { margin: 0; font-size: 1rem; line-height: 1.6; }
.quote figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 14px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.quote figcaption span { font-weight: 400; letter-spacing: 0.02em; text-transform: none; }
.quote .g { width: 18px; height: 18px; }
.quote--large p { font-size: 1.1rem; line-height: 1.6; }
.rev--feature { max-width: 520px; }
.rev--feature .rev__g { width: 22px; height: 22px; flex: none; margin-right: 52px; }
@media (min-width: 900px) { .rev--feature { justify-self: end; } }

/* Our work: a gallery wall. Each photo at its own shape, centred, neighbours peeking in at the edges.
   The name and caption live beside the heading and change as you move. */
.work { overflow: clip; }
.gal { overflow: clip; width: 100%; }
.gal__track { width: 100%; max-width: 100%; }
.work__head { display: grid; gap: 28px; margin-bottom: 32px; }
@media (min-width: 900px) { .work__head { grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 40px; } }
.work__head .section__head { margin-bottom: 0; }
.work__live { display: grid; gap: 6px; justify-items: start; }
@media (min-width: 900px) { .work__live { justify-items: end; text-align: right; padding-bottom: 4px; } }
.work__name { font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; margin: 2px 0 0; }
.work__cap { margin: 0; color: var(--grey); font-size: 1rem; line-height: 1.55; max-width: 44ch; }
.work__live .gal__nav { margin-top: 12px; }
.gal__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.gal__btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--white); color: var(--charcoal); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.gal__btn:hover { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.gal__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.gal__track { display: flex; gap: 14px; align-items: center; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 50% 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; }
.gal__track::-webkit-scrollbar { display: none; }
.gal__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.gal__track.is-dragging .gal__link { pointer-events: none; }
.gal__track:focus-visible { outline: 3px solid var(--charcoal); outline-offset: -3px; }
.gal__slide { flex: 0 0 auto; margin: 0; scroll-snap-align: center; height: 440px; opacity: 0.4; transition: opacity 0.4s ease; }
.gal__slide.is-active { opacity: 1; }
.gal__link { display: block; height: 100%; cursor: pointer; border-radius: var(--radius); overflow: hidden; background: var(--line); }
.gal__slide.is-active .gal__link { cursor: zoom-in; box-shadow: 0 24px 60px rgba(20,16,18,0.18); }
.gal__link img { display: block; height: 100%; width: auto; }
.gal__link { position: relative; }
.gal__count { position: absolute; left: 14px; bottom: 14px; background: rgba(255,255,255,0.94); color: var(--charcoal); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 13px; border-radius: 999px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.gal__slide.is-active .gal__count { opacity: 1; }
.work__open { display: inline-flex; white-space: nowrap; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 20px; margin-left: 6px; border-radius: 999px; border: 1px solid var(--charcoal); background: var(--charcoal); color: #fff; font: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background-color 0.2s ease; }
.work__open:hover { background: var(--charcoal-soft); }
.work__open svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.work__open:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 699px) { .work__open { flex-basis: 100%; margin-left: 0; width: fit-content; } }
.gal__btn:disabled { opacity: 0.35; cursor: default; }
.gal__btn:disabled:hover { background: var(--white); border-color: var(--line-strong); color: var(--charcoal); }
/* Phones: every slide is the same 4:5 box, a touch narrower than the screen so the next one peeks in. Landscape
   photos are cropped to fit rather than running wider than the screen, which is what made the snap jump and
   pushed the photo-count pill off the edge. From 700px up the slides keep their own shapes. */
@media (max-width: 699px) {
  .gal__slide { height: auto; width: 86vw; max-width: 360px; aspect-ratio: 4 / 5; }
  .gal__link img { width: 100%; height: 100%; object-fit: cover; }
}
@media (min-width: 700px) { .gal__slide { height: 560px; } .gal__track { gap: 20px; } }
@media (min-width: 1100px) { .gal__slide { height: 680px; } }
@media (prefers-reduced-motion: reduce) { .gal__slide { transition: none; } }

/* Lightbox for the work photos: native dialog, charcoal backdrop */
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: transparent; color: #fff; }
.lightbox::backdrop { background: rgba(35, 31, 32, 0.96); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 0 var(--gutter); max-width: 100%; }
.lightbox__img { max-width: min(1200px, calc(100vw - 2 * var(--gutter))); max-height: calc(100vh - 160px); width: auto; height: auto; border-radius: var(--radius); }
.lightbox__caption { font-size: 0.95rem; color: rgba(255,255,255,0.85); text-align: center; max-width: 60ch; }
.lightbox__stage { display: grid; place-items: center; max-width: 100%; }
.lightbox__caption b { color: #fff; font-weight: 700; margin-right: 10px; }
.lightbox__count { color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }
.lightbox__close, .lightbox__nav { position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.45); background: rgba(35,31,32,0.6); color: #fff; cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s ease, background-color 0.2s ease; }
.lightbox__close:hover, .lightbox__nav:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.lightbox__close { top: 20px; right: 20px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 16px; } .lightbox__nav--next { right: 16px; }
.lightbox__close svg, .lightbox__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (max-width: 599px) { .lightbox__nav { top: auto; bottom: 20px; transform: none; } .lightbox__img { max-height: calc(100vh - 200px); } }

/* Service area: intro beside the heading, a full-width map, then the town list */
.area__head { display: grid; gap: 8px; margin-bottom: 32px; }
@media (min-width: 900px) { .area__head { grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 40px; } }
.area__head .section__head { margin-bottom: 0; }
.area__intro { margin: 0; color: var(--grey); font-size: 1.05rem; line-height: 1.6; max-width: 520px; }
.map { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--offwhite); }
.map__canvas { width: 100%; height: 360px; }
@media (min-width: 600px) { .map__canvas { height: 440px; } }
@media (min-width: 1100px) { .map__canvas { height: 540px; } }
.map__placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; background: var(--offwhite); color: var(--grey); font-size: 0.85rem; font-weight: 600; }
.map__placeholder svg { width: 30px; height: 30px; color: var(--blue); }
@media (prefers-reduced-motion: no-preference) { .map__placeholder svg { animation: pinpulse 1.6s ease-in-out infinite; } }
@keyframes pinpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.map__badge { position: absolute; top: 16px; left: 16px; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,0.96); border-radius: var(--radius); box-shadow: 0 4px 14px rgba(20,16,18,0.1); font-size: 0.7rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--charcoal); pointer-events: none; }
.map__badge span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--blue); background: rgba(0,159,227,0.18); }

/* Contact: details in a row, the form itself lives in the hero */
.contact__grid { display: grid; gap: 28px; }
@media (min-width: 600px) { .contact__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; } }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 1.4fr 1.4fr 1fr 1fr; } }
.contact__label { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey); margin-bottom: 6px; }
.contact__phone { font-size: clamp(1.85rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.01em; text-decoration: none; color: var(--charcoal); line-height: 1.1; display: inline-block; }
.contact__phone:hover { color: var(--blue-hover); }
.contact__email { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue); word-break: break-word; }
.contact__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-strong); }
.contact__cta p { margin: 0; color: var(--grey); font-size: 0.95rem; }
.social { display: flex; flex-wrap: wrap; gap: 10px; }
.social a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--charcoal); text-decoration: none;
  font-size: 0.85rem; font-weight: 600;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.social a:hover { border-color: var(--charcoal); background: var(--white); }
.social svg { width: 20px; height: 20px; }

.form { background: var(--white); border-radius: 6px; padding: 32px 26px 28px; box-shadow: 0 30px 70px rgba(20, 16, 18, 0.35), 0 2px 6px rgba(20, 16, 18, 0.12); }
@media (min-width: 600px) { .form { padding: 40px 40px 36px; } }
.form__who { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.form__who img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.form__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.form__role { margin: 6px 0 0; font-size: 0.7rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey); }
.form__intro { color: var(--charcoal); font-size: 0.98rem; line-height: 1.55; margin: 0 0 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.form__row { display: grid; gap: 0 28px; }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 0; margin-bottom: 22px; }
.field label { font-size: 0.7rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey); margin-bottom: 2px; }
.field input, .field textarea {
  font: inherit; font-size: 1.05rem; width: 100%; min-height: 44px;
  padding: 8px 0 10px; border: 0; border-bottom: 1.5px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--charcoal);
  transition: border-color 0.2s ease;
}
.field textarea { min-height: 72px; resize: none; line-height: 1.5; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-bottom-color: var(--charcoal); border-bottom-width: 2px; }
.check { display: flex; align-items: center; gap: 12px; margin: 4px 0 22px; font-weight: 600; font-size: 0.95rem; cursor: pointer; color: var(--charcoal); }
.check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid var(--line-strong); border-radius: 4px; background: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: background-color 0.15s ease, border-color 0.15s ease; }
.check input::before { content: ""; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input:checked { background: var(--charcoal); border-color: var(--charcoal); }
.check input:checked::before { opacity: 1; }
.check input:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; }
.form__emergency { border-left: 3px solid var(--blue); background: var(--offwhite); padding: 16px 18px; margin: 0 0 20px; border-radius: 0 4px 4px 0; }
.form__emergency p { margin: 0 0 4px; font-weight: 700; font-size: 0.95rem; }
.form__emergency a { font-size: 1.5rem; font-weight: 800; text-decoration: none; color: var(--charcoal); }
.form__emergency a:hover { color: var(--blue-hover); }
.form:has(#emergency:checked) .form__emergency { display: block; }
.form__submit { width: 100%; min-height: 58px; font-size: 0.9rem; letter-spacing: 0.12em; }
.form__note { margin: 16px 0 0; font-size: 0.78rem; color: var(--grey); line-height: 1.5; text-align: center; }
.form__note a { color: var(--charcoal); }
.form__status { margin: 0 0 16px; padding: 14px 16px; border-left: 3px solid var(--charcoal); background: var(--offwhite); font-size: 0.95rem; }
.form__success { background: var(--white); border-radius: 6px; padding: 40px; box-shadow: 0 30px 70px rgba(20, 16, 18, 0.35); }
.form__success h3 { margin-bottom: 10px; }
.form__success p { color: var(--grey); }
.form__success a { font-weight: 700; color: var(--charcoal); }

/* Footer */
.footer { padding: 56px 0 32px; }
.footer__grid { display: grid; gap: 36px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; } }
.footer__brand { display: flex; align-items: flex-start; gap: 16px; }
.footer__brand img { width: 88px; height: 88px; flex: none; }
.footer__brand b { display: block; font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase; }
.footer__brand p { margin: 6px 0 0; font-size: 0.9rem; color: var(--grey); max-width: 320px; }
.footer h2 { font-size: 0.75rem; font-weight: 700; letter-spacing: var(--track); text-transform: uppercase; color: var(--grey); margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 8px; font-size: 0.95rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue); }
.footer__licences { font-size: 0.88rem; line-height: 1.8; color: var(--grey); }
.footer__licences b { color: #fff; font-weight: 600; }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 28px; align-items: center;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line-dark);
  font-size: 0.8rem; color: var(--grey);
}
.footer__bottom a { color: #fff; }

/* Reveal on scroll, below the fold only */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
  .js .reveal.in { opacity: 1; transform: none; }
}

/* Inner pages (privacy, 404) */
.page { padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 8vw, 112px); }
.page__inner { max-width: 72ch; }
.page h1 { font-size: clamp(2rem, 3.2vw + 0.6rem, 3rem); }
.page h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.page p, .page li { font-size: 1rem; }
.page ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; margin: 0 0 1em; }
.page .lede { font-size: 1.15rem; color: var(--grey); margin-top: 16px; }
.page a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue); }
.page .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Instagram posts: four of Jason's reels as post-style cards, video on top, caption and a link to the post beneath.
   Local files, no embed. Nothing plays until the pointer is over a card (see main.js). One row that scrolls sideways (swipe,
   mouse drag, trackpad or the arrow buttons) whenever the four cards do not fit; on a wide screen they all fit. */
.reels__head { display: grid; gap: 20px; margin-bottom: 28px; }
@media (min-width: 900px) { .reels__head { grid-template-columns: 1fr auto; align-items: end; gap: 40px; margin-bottom: 36px; } }
.reels__head .section__head { margin-bottom: 0; }
.eyebrow--ig { align-items: center; text-decoration: none; text-transform: none; letter-spacing: 0.02em; font-size: 0.9rem; color: var(--charcoal); width: fit-content; }
.eyebrow--ig::before { display: none; }
.eyebrow--ig svg { width: 20px; height: 20px; flex: none; color: var(--blue); }
.eyebrow--ig:hover { color: var(--blue); }
.eyebrow--ig:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
.reels__controls { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; }
.reels__scroller { overflow: clip; }
.posts {
  --post-w: min(86vw, 340px); --post-pad: max(var(--gutter), calc((100% - var(--max)) / 2));
  list-style: none; margin: 0; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--post-pad);
  padding: 4px var(--post-pad) 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.posts::-webkit-scrollbar { display: none; }
.posts.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.posts.is-dragging .post__card { pointer-events: none; }
.reels__arrows { display: none; gap: 10px; }
@media (min-width: 700px) { .reels.has-overflow .reels__arrows { display: flex; } }
.reels.js-measured:not(.has-overflow) .posts { overflow-x: hidden; }
@media (min-width: 700px) { .posts { --post-w: min(420px, calc((100vw - 2 * var(--gutter) - 16px) / 2)); } }
@media (min-width: 1100px) { .posts { --post-w: 340px; gap: 20px; } }
.post { flex: 0 0 var(--post-w); scroll-snap-align: start; margin: 0; display: flex; }
.post__card { width: 100%; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.post__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.post__avatar img { display: block; width: 34px; height: 34px; border-radius: 50%; }
.post__handle { font-weight: 700; font-size: 0.8rem; color: var(--charcoal); text-decoration: none; }
.post__head .post__handle { white-space: nowrap; }
.post__handle:hover { text-decoration: underline; }
.post__media { position: relative; aspect-ratio: 9 / 16; background: var(--charcoal); overflow: hidden; isolation: isolate; }
.post__poster, .post__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.post__video { opacity: 0; transition: opacity 0.4s ease; }
.post__card.is-playing .post__video { opacity: 1; }
.post__toggle { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; z-index: 1; }
.post__toggle:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.post__badge { width: 56px; height: 56px; border-radius: 50%; background: rgba(35,31,32,0.6); border: 1px solid rgba(255,255,255,0.55); display: grid; place-items: center; opacity: 0; transition: opacity 0.25s ease; }
.post__badge svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.post__card:not(.is-playing) .post__badge { opacity: 1; }
.post__body { flex: 1; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; line-height: 1.5; }
.post__caption { margin: 0; }
.post__caption .post__handle { margin-right: 4px; }
.post__link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: auto; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--charcoal); text-decoration: none; }
.post__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.post__link:hover { color: var(--blue); }
@media (prefers-reduced-motion: reduce) { .post__video, .post__badge, .gal__count { transition: none; } }