/* ===========================================================================
   Cardiff & Caerphilly Plumbers — homepage

   Layout follows the Frankie's Finest Finishes one-pager: a solid brand hero
   with the tradesman's own words, a real before/after, a short run of sections
   and a phone number that is never more than a thumb away.

   Colours are the brand's own navy and gold (the same values css/styles.css has
   always carried, and the colours on Paul's van and workwear). Everything else
   is those two hues moved in lightness only, so nothing here is a new colour.

   This file styles index.html ONLY. The other pages still load css/styles.css,
   so nothing below can move a pixel anywhere else on the site.
   =========================================================================== */

:root {
  /* The brand, as css/styles.css has it */
  --navy:       hsl(218 38% 18%);
  --gold:       hsl(42 85% 55%);
  --white:      #ffffff;

  /* Derived: navy hue, lightness only */
  --navy-900:   hsl(218 45% 8%);
  --navy-800:   hsl(218 45% 11%);
  --navy-700:   hsl(218 42% 14%);
  --navy-600:   hsl(218 36% 25%);
  --navy-500:   hsl(218 30% 34%);
  --sky-200:    hsl(218 35% 84%);
  --sky-050:    hsl(218 40% 96%);

  /* Derived: gold hue, lightness only. gold-700 is the one that passes as text
     on white — the bright gold is for fills and for text on navy. */
  --gold-700:   hsl(36 85% 32%);
  --gold-600:   hsl(40 85% 45%);
  --gold-200:   hsl(42 85% 80%);
  --gold-050:   hsl(42 80% 95%);

  --chalk:      #f6f5f1;
  --paper:      #ffffff;
  --char:       #151c28;
  --muted:      #586274;
  --line:       hsl(218 18% 88%);

  /* The server-rendered blog cards and CRM tiles carry inline styles that read
     the OLD stylesheet's variables. Map them here so they land in brand colours
     instead of falling back to nothing. */
  --color-primary:      var(--navy);
  --color-primary-dark: var(--navy-800);
  --color-accent:       var(--gold-600);
  --color-text-muted:   var(--muted);
  --color-border:       var(--line);

  --wrap: 1180px;
  --gut: 20px;
  --r-sm: 10px;
  --r: 18px;
  --r-lg: 28px;

  --shadow-sm: 0 2px 8px hsl(218 30% 10% / .07);
  --shadow:    0 14px 40px hsl(218 30% 10% / .12);
  --shadow-lg: 0 30px 80px hsl(218 45% 6% / .32);

  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Outfit is the brand's existing heading face; keeping it is what stops the
     refresh reading as a different company. */
  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------- reset --- */

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* The nav is sticky, so an in-page jump lands with the heading underneath it. */
section[id] { scroll-margin-top: 88px; }

body {
  margin: 0;
  background: var(--chalk);
  color: var(--char);
  font: 400 17px/1.65 var(--font-body);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}

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

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: min(100% - var(--gut) * 2, var(--wrap));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--navy);
  color: var(--white);
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- bits --- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font: 600 13px/1 var(--font-body);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.head--light .eyebrow, .section--navy .eyebrow, .hero .eyebrow { color: var(--gold); }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 15px/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }

.btn--solid { --btn-bg: var(--navy); --btn-fg: var(--white); box-shadow: var(--shadow-sm); }
.btn--solid:hover { --btn-bg: var(--navy-600); box-shadow: var(--shadow); }

/* Gold is the call to action and nothing else. On navy it is the loudest thing
   on the screen, which is exactly what the phone number should be. */
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--navy-900); box-shadow: var(--shadow-sm); }
.btn--gold:hover { --btn-bg: var(--gold-200); box-shadow: var(--shadow); }

.btn--ghost { border-color: currentColor; opacity: .92; }
.btn--ghost:hover { background: hsl(218 40% 20% / .07); opacity: 1; }
.section--navy .btn--ghost:hover, .hero .btn--ghost:hover { background: hsl(218 40% 90% / .1); }

.btn--wa { --btn-bg: #1faa54; --btn-fg: #fff; box-shadow: var(--shadow-sm); }
.btn--wa:hover { --btn-bg: #178f45; box-shadow: var(--shadow); }

.btn--lg { padding: 16px 26px; font-size: 16px; }
.btn--lg svg { width: 20px; height: 20px; }

.section { position: relative; }
.section--pad { padding: clamp(64px, 9vw, 118px) 0; }

.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--navy::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(70ch 40ch at 15% 0%, hsl(218 40% 30% / .55), transparent 70%),
    radial-gradient(60ch 40ch at 100% 100%, hsl(218 45% 12% / .7), transparent 70%);
  pointer-events: none;
}
.section--navy > * { position: relative; }

.section--tint { background: var(--gold-050); }
.section--paper { background: var(--paper); }

.head { max-width: 62ch; margin: 0 0 clamp(36px, 5vw, 56px); }
.head h2 { font-size: clamp(32px, 5.2vw, 54px); }
.head__sub { margin: 18px 0 0; color: var(--muted); font-size: 18px; }
.head--light .head__sub { color: hsl(218 25% 84%); }
.head--center { margin-inline: auto; text-align: center; }

.note { margin: 34px 0 0; color: var(--muted); font-size: 15px; }
.note a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; }
.note a:hover { color: var(--gold-700); }

.row-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 34px 0 0; }
.head--center + * .row-links, .row-links--center { justify-content: center; }

/* ------------------------------------------------------------------ nav --- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: hsl(218 45% 10% / .86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--white);
  border-bottom: 1px solid hsl(218 40% 70% / .14);
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.is-stuck { background: hsl(218 45% 8% / .97); box-shadow: 0 10px 30px hsl(218 50% 4% / .35); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 70px;
  padding: 10px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  margin-right: auto;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 12px;
  background: var(--gold);
  color: var(--navy-900);
}
.brand__mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.brand__word {
  font: 800 16px/1.1 var(--font-display);
  letter-spacing: -.01em;
}
.brand__word em { display: block; font-style: normal; color: var(--gold); }

.nav__links { display: flex; gap: 2px; }
.nav__links a {
  padding: 9px 12px;
  border-radius: 999px;
  font: 500 15px/1 var(--font-body);
  text-decoration: none;
  color: hsl(218 22% 86%);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.nav__links a:hover { background: hsl(218 50% 80% / .12); color: var(--white); }
.nav__links a.is-hot { color: var(--gold); font-weight: 600; }

.nav__cta { display: flex; align-items: center; gap: 10px; }
.nav__tel { font-variant-numeric: tabular-nums; }

/* The menu button and panel only exist below the breakpoint where the links
   stop fitting. <details> so it opens with no script at all. */
.menu { display: none; position: relative; }
.menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1.5px solid hsl(218 40% 80% / .3);
  cursor: pointer;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }
.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  display: grid;
  min-width: 230px;
  padding: 10px;
  border-radius: var(--r);
  background: var(--navy-800);
  box-shadow: var(--shadow-lg);
  border: 1px solid hsl(218 40% 70% / .16);
}
.menu__panel a {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: hsl(218 22% 90%);
  font-weight: 500;
}
.menu__panel a:hover { background: hsl(218 50% 80% / .12); color: var(--white); }
.menu__panel a.is-hot { color: var(--gold); }

/* ----------------------------------------------------------------- hero --- */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 120px);
  overflow: hidden;
}

/* Slow drifting washes of the navy. Reads as depth, not as an effect. */
.hero__wash {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(38ch 30ch at 20% 25%, hsl(218 42% 30% / .8), transparent 62%),
    radial-gradient(44ch 34ch at 82% 72%, hsl(218 45% 11% / .85), transparent 65%),
    radial-gradient(30ch 26ch at 62% 8%, hsl(42 60% 50% / .12), transparent 68%);
  animation: drift 26s var(--ease) infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.hero__title {
  font-size: clamp(32px, 4.3vw, 54px);
  letter-spacing: -.03em;
  margin: 0 0 26px;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  /* The gold stroke overhangs its line box and this element clips for the
     rise-in; pad the clip out and pull it back with an equal negative margin. */
  padding: .14em .32em;
  margin: -.14em -.32em;
}
.hero__title .line > span {
  display: block;
  animation: rise .9s var(--ease) both;
}
.hero__title .line:nth-child(2) > span { animation-delay: .1s; }
.hero__title .line:nth-child(3) > span { animation-delay: .2s; }
@keyframes rise { from { transform: translateY(115%); } to { transform: none; } }

/* The one highlighted phrase: a stroke of gold that wipes in behind it.
   Child combinator on purpose — `.line > span` above sets display:block and
   would otherwise stretch the stroke across the whole column. */
.hero__title .line > .hl {
  position: relative;
  isolation: isolate;
  display: inline-block;
  vertical-align: top;
  color: var(--navy-900);
}
.hero__title .hl::before {
  content: "";
  position: absolute;
  inset: -.02em -.2em -.06em -.16em;
  background: var(--gold);
  border-radius: 6px 14px 8px 12px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: wipe 1s var(--ease) .55s both;
  z-index: -1;
}
@keyframes wipe { to { transform: scaleX(1); } }

.hero__lede {
  max-width: 52ch;
  margin: 0 0 30px;
  color: hsl(218 22% 86%);
  font-size: clamp(17px, 1.6vw, 19px);
}
.hero__lede strong { color: var(--white); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  color: hsl(218 20% 82%);
}
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks li::before {
  content: "";
  width: 16px; height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}

.hero__art { position: relative; }
.shot { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--navy-800); }
.shot img { width: 100%; }

.shot--main {
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.6deg);
  animation: float 9s ease-in-out infinite alternate;
}
.shot--main img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; }
.shot--inset {
  position: absolute;
  right: -4%;
  bottom: -9%;
  width: 43%;
  border: 6px solid var(--navy);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  transform: rotate(3deg);
  animation: float 11s ease-in-out infinite alternate-reverse;
}
.shot--inset img { aspect-ratio: 3 / 4; object-fit: cover; }
@keyframes float { from { translate: 0 -6px; } to { translate: 0 6px; } }

.chip {
  position: absolute;
  left: -6%;
  top: 8%;
  display: grid;
  gap: 2px;
  padding: 12px 18px;
  border-radius: var(--r);
  background: var(--white);
  color: var(--navy-900);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease);
}
.chip:hover { transform: translateY(-3px) rotate(-1deg); }
.chip strong { font: 800 16px/1.2 var(--font-display); }
.chip strong .stars { color: #f4b400; letter-spacing: 1px; }
.chip span { font-size: 12.5px; color: var(--muted); }

/* The Gas Safe mark sits on white because that is the only way the register
   allows it to be shown, and because on navy it disappears. */
.badge-gs {
  position: absolute;
  left: -2%;
  bottom: 6%;
  display: grid;
  place-items: center;
  width: 104px;
  padding: 10px;
  border: 4px solid var(--navy-800);
  border-radius: var(--r);
  background: var(--white);
  box-shadow: var(--shadow);
}
.badge-gs img { width: 100%; }

/* --------------------------------------------------------------- ticker --- */

.ticker {
  background: var(--navy-900);
  color: var(--gold-200);
  border-block: 1px solid hsl(218 40% 70% / .12);
  padding: 15px 0;
  overflow: hidden;
}
.ticker__track { display: flex; width: max-content; }
.ticker__run {
  display: flex;
  align-items: center;
  gap: 26px;
  padding-right: 26px;
  white-space: nowrap;
  font: 600 14px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  animation: marquee 42s linear infinite;
}
.ticker__run i { color: var(--gold); font-style: normal; }
.ticker:hover .ticker__run { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
/* Until the script clones the run there is nothing to scroll into. */
.ticker:not(.is-looping) .ticker__run { animation: none; }

/* -------------------------------------------------------------- reviews --- */

/* The live widget (js/reviews-widget.js) replaces this block with real Google
   reviews when the CRM has them, and styles its own cards. What is written here
   is the honest fallback: a link to the reviews themselves. */
.reviews-box {
  display: grid;
  gap: 16px;
  justify-items: center;
  padding: clamp(26px, 4vw, 40px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.reviews-box .review-card { max-width: 56ch; }
.reviews-box .review-text { color: var(--muted); margin: 0 0 10px; }
.reviews-box .review-author a { color: var(--navy); font-weight: 700; text-underline-offset: 3px; }
.reviews-box .rw-review { text-align: left; }
.reviews-box .stars { color: #f4b400; }

.g-mark { display: inline-flex; align-items: center; gap: 10px; }
.g-mark svg { width: 28px; height: 28px; }

/* -------------------------------------------------------- before / after --- */

.work-split {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.work-split__copy h3 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 14px; }
.work-split__copy p { color: var(--muted); }

.ba {
  --pos: 50%;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
}

.ba__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: var(--shadow);
  touch-action: pan-y;
}
.ba:focus-within .ba__frame { outline: 3px solid var(--gold); outline-offset: 4px; }

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* clip-path, not width, so the before photo stays the full size of the frame
   and only its visible slice changes. */
.ba__clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.ba__tag {
  position: absolute;
  top: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: hsl(218 45% 8% / .78);
  color: var(--white);
  font: 700 11px/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.ba__tag--before { left: 14px; }
.ba__tag--after { right: 14px; background: var(--gold); color: var(--navy-900); }

.ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  margin-left: -1.5px;
  background: var(--white);
  box-shadow: 0 0 0 1px hsl(218 45% 8% / .25);
  pointer-events: none;
}
.ba__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow);
}
.ba__grip::before, .ba__grip::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border-block: 6px solid transparent;
  translate: 0 -50%;
}
.ba__grip::before { left: 11px; border-right: 8px solid var(--navy); }
.ba__grip::after { right: 11px; border-left: 8px solid var(--navy); }

/* The range is the drag surface: invisible, laid over the frame, and it brings
   touch, mouse and arrow keys with it for nothing. */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 64px; height: 100%; }
.ba__range::-moz-range-thumb { width: 64px; height: 100%; border: 0; }

.ba__label {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* ----------------------------------------------------------- work grid --- */

/* .gallery-grid / .gallery-item / .gallery-overlay are the class names the
   server's CRM photo sync writes (server.js buildGalleryTileMarkup), so the
   hand-placed photos use the same markup and new job photos slot in looking
   identical. The sync requires both .gallery-grid and #tradevault-gallery-start
   on this page — do not rename either. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.gallery-item:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
/* !important because synced tiles carry inline height/border-radius styles
   written for the old grid. */
.gallery-item img, .gallery-item video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: scale .5s var(--ease);
}
.gallery-item:hover img { scale: 1.04; }
.gallery-overlay { padding: 16px 20px 20px; }
.gallery-overlay h3 { font-size: 17px; margin: 0 0 4px; }
.gallery-overlay p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.5; }

/* Nine is a page, not an archive. The sync keeps adding tiles after the marker
   (newest first), so hide anything past the ninth photo; gallery.html has the
   rest. Child 1 is the marker itself, hence 11. */
.gallery-grid > .gallery-item:nth-child(n+11) { display: none; }

.tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold-050);
  color: var(--gold-700);
  font: 700 10.5px/1.4 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- services --- */

.grid { display: grid; gap: 22px; }
.grid--svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.svc {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  border-radius: var(--r-lg);
  background: hsl(218 40% 12% / .55);
  border: 1px solid hsl(218 45% 70% / .16);
  box-shadow: 0 0 28px hsl(0 0% 100% / .07), 0 0 2px hsl(0 0% 100% / .10);
  transition: transform .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.svc:hover { transform: translateY(-5px); background: hsl(218 40% 15% / .75); border-color: hsl(42 85% 55% / .45); box-shadow: 0 0 40px hsl(0 0% 100% / .12), 0 0 2px hsl(0 0% 100% / .16); }
.svc h3 { font-size: 21px; margin: 0 0 10px; }
.svc p { color: hsl(218 20% 84%); font-size: 15.5px; margin: 0 0 18px; }
.svc__link {
  margin-top: auto;
  color: var(--gold);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}
.svc__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.svc--hot { border-color: hsl(42 85% 55% / .55); background: hsl(42 60% 40% / .12); }

.svc__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: hsl(42 85% 55% / .15);
}
.svc__icon svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------ emergency --- */

.sos {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.sos h2 { font-size: clamp(30px, 4.4vw, 48px); margin-bottom: 18px; }
.sos__copy p { color: var(--muted); }
.sos__copy .hero__actions { margin: 26px 0 0; }

.prices {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: clamp(22px, 3vw, 30px);
  list-style: none;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.prices li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.prices li:last-child { border-bottom: 0; }
.prices span { color: var(--muted); font-size: 15.5px; }
.prices strong { font: 800 22px/1 var(--font-display); color: var(--navy); white-space: nowrap; }
.prices__foot { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.prices__foot a { color: var(--navy); font-weight: 600; }

/* --------------------------------------------------------------- steps --- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step {
  position: relative;
  padding: 30px 26px 32px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.step__n {
  display: block;
  margin-bottom: 14px;
  font: 800 13px/1 var(--font-display);
  letter-spacing: .14em;
  color: var(--gold-600);
}
.step h3 { font-size: 20px; margin: 0 0 8px; }
.step p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ----------------------------------------------------------- local tips --- */

.tips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: clamp(40px, 5vw, 56px);
}
.tip {
  padding: 28px 26px;
  border-radius: var(--r-lg);
  background: var(--sky-050);
  border: 1px solid var(--line);
}
.tip h3 { font-size: 19px; margin: 0 0 10px; }
.tip p { color: var(--muted); font-size: 15.5px; margin: 0; }
.tip strong { color: var(--char); }

.reels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: clamp(40px, 5vw, 56px);
}
.reels figure { margin: 0; }
.reels video {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-radius: var(--r);
  box-shadow: var(--shadow);
  background: var(--navy-900);
}
.reels figcaption { margin-top: 12px; font-size: 15px; }
.reels figcaption span {
  display: block;
  margin-bottom: 2px;
  font: 700 11px/1.4 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.reels figcaption a { font-weight: 600; text-decoration: none; }
.reels figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------- about --- */

.about {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.about__art { position: relative; }
.about__photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(1.4deg);
}
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.about__copy h2 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 20px; }
.about__copy p { color: hsl(218 20% 85%); }
.about__copy .lead { color: var(--white); font-size: 19px; }

.sign { margin-top: 26px; }
.sign__name { display: block; font: 800 30px/1 var(--font-display); color: var(--gold); letter-spacing: -.01em; }
.sign__title { display: block; margin-top: 6px; font-size: 14px; color: hsl(218 20% 78%); }

.cards-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(40px, 5vw, 56px);
}
.cards-row figure {
  margin: 0;
  padding: 12px;
  border-radius: var(--r);
  background: var(--white);
}
.cards-row img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.cards-row figcaption { margin-top: 8px; font-size: 13px; text-align: center; color: var(--muted); font-weight: 600; }
.cards-note { margin: 18px 0 0; color: hsl(218 20% 82%); font-size: 15px; max-width: 70ch; }

.stat {
  display: inline-grid;
  margin-top: 24px;
  padding: 14px 20px;
  border-radius: var(--r);
  background: hsl(42 85% 55% / .12);
  border: 1px solid hsl(42 85% 55% / .35);
}
.stat strong { font: 800 30px/1 var(--font-display); color: var(--gold); }
.stat span { font-size: 14px; color: hsl(218 20% 85%); }

/* --------------------------------------------------------------- towns --- */

.towns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.town {
  padding: 24px 24px 26px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.town h3 { font-size: 20px; margin: 0 0 12px; }
.town h3 a { text-decoration: none; color: var(--navy); }
.town h3 a:hover { color: var(--gold-700); }
.town ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 15px; }
.town li a { color: var(--muted); text-decoration: none; }
.town li a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.suburbs { margin: 26px 0 0; color: var(--muted); font-size: 15px; }
.suburbs a { color: var(--navy); font-weight: 500; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- blog --- */

/* Cards here are written by server.js (buildHomeBlogCardMarkup) with inline
   styles; this only owns the grid and the card shell. */
#home-blog-grid, #blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
#home-blog-grid .pricing-card, #blog-grid .pricing-card {
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
#home-blog-grid .pricing-card:hover, #blog-grid .pricing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
#home-blog-grid h3, #blog-grid h3 { font-size: 20px; line-height: 1.2; }
#home-blog-grid .text-primary, #blog-grid .text-primary { color: var(--navy); }

/* ----------------------------------------------------------------- faq --- */

.faq { display: grid; gap: 12px; max-width: 78ch; }
.faq details {
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  padding: 18px 22px;
  cursor: pointer;
  font: 700 17px/1.4 var(--font-display);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font: 400 24px/1 var(--font-body);
  color: var(--gold-600);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--gold-050); }
.faq p { margin: 0; padding: 0 22px 20px; color: var(--muted); font-size: 15.5px; }
.faq a { color: var(--navy); font-weight: 600; }

/* --------------------------------------------------------------- quote --- */

.quote {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.quote h2 { font-size: clamp(30px, 4.4vw, 48px); margin-bottom: 18px; }
.quote__lede { color: var(--muted); }
.quote__lede a { color: var(--navy); font-weight: 600; }

.quote__details {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
}
.quote__details li {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  overflow-wrap: anywhere;
}
.quote__details span {
  font: 600 12px/1.6 var(--font-body);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.quote__details em { font-style: normal; }
.quote__details a { color: var(--navy); font-weight: 500; text-underline-offset: 3px; }
.quote__details a:hover { color: var(--gold-700); }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}
.field { display: grid; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font: 600 13px/1 var(--font-body);
  letter-spacing: .04em;
  color: var(--muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--chalk);
  color: var(--char);
  font: 400 16px/1.4 var(--font-body);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy-500);
  background: var(--paper);
}
.field .is-bad { border-color: #c0392b; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form__status { margin: 0; font-size: 14.5px; color: var(--muted); }
.form__status.is-ok { color: #15803d; font-weight: 600; }
.form__status.is-err { color: #b91c1c; font-weight: 600; }
.form__status a { color: inherit; }

/* ---------------------------------------------------------------- foot --- */

/* footer.footer / .footer-main / .copyright are the hooks js/footer-qr.js looks
   for when it adds the QR block. Keep them. */
.footer {
  background: var(--navy-900);
  color: hsl(218 18% 80%);
  padding: clamp(48px, 6vw, 72px) 0 0;
  font-size: 15px;
}
.footer-main {
  display: grid;
  /* auto-fit, because js/footer-qr.js appends a sixth column after load */
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
  padding-bottom: 40px;
}
.footer h3 { font: 700 15px/1.3 var(--font-display); color: var(--white); margin: 0 0 14px; letter-spacing: 0; }
.footer-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; overflow-wrap: anywhere; }
.footer a { text-decoration: none; transition: color .2s var(--ease); }
.footer a:hover { color: var(--gold); }
.footer__word { font: 800 19px/1.2 var(--font-display); color: var(--white); margin: 0 0 8px; }
.footer__word em { font-style: normal; color: var(--gold); }
.footer-qr-label { margin: 0 0 10px; font-size: 13px; }
.footer-qr-img { width: 110px; height: 110px; border-radius: 10px; background: #fff; padding: 6px; }

.group {
  padding: 22px 0;
  border-top: 1px solid hsl(218 40% 70% / .12);
  font-size: 14px;
}
.group p { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: hsl(218 18% 60%); }
.group div { display: flex; flex-wrap: wrap; gap: 6px 22px; }

.copyright {
  padding: 18px 0 26px;
  border-top: 1px solid hsl(218 40% 70% / .12);
  font-size: 13.5px;
}
.copyright p { margin: 0; }

/* --------------------------------------------------------- mobile call --- */

/* Two thumbs' worth of button pinned to the bottom of a phone. Replaces the old
   floating WhatsApp bubble and the AI-estimate pill, which sat on top of the
   hero's own Call button. */
.callbar {
  display: none;
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 90;
  gap: 8px;
}
.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 10px;
  border-radius: 999px;
  font: 700 16px/1 var(--font-display);
  text-decoration: none;
  box-shadow: 0 14px 34px hsl(218 60% 4% / .45);
}
.callbar svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.callbar__call { background: var(--gold); color: var(--navy-900); }
.callbar__wa { background: #1faa54; color: #fff; flex: .75 !important; }
/* Tucked away while the hero's own Call/WhatsApp buttons are on screen, so the
   first view never shows the same two buttons twice. */
.callbar { transform: translateY(140%); transition: transform .35s var(--ease); }
.callbar.is-on { transform: none; }

/* --------------------------------------------------------- inner pages --- */

/* A shorter hero than the homepage's: people land on these pages with the job
   already in mind, so it gets to the point rather than re-introducing Paul. */
.page-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.page-hero .hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.page-hero .hero__title { font-size: clamp(30px, 4.2vw, 50px); }
.page-hero .shot--main img { aspect-ratio: 4 / 5; }
.page-hero--solo .hero__inner { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

.crumb {
  margin: 0 0 18px;
  font-size: 14px;
  color: hsl(218 20% 76%);
}
.crumb a { color: var(--gold); text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb span { margin: 0 6px; opacity: .6; }

/* Long-form copy beside a list or a photo. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
.prose h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 20px; }
.prose h3 { font-size: 21px; margin: 28px 0 10px; }
.prose p { color: var(--muted); }
.prose strong { color: var(--char); }
.prose a { color: var(--navy); font-weight: 600; text-underline-offset: 3px; }

.checks {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: clamp(22px, 3vw, 30px);
  list-style: none;
  border-radius: var(--r-lg);
  background: var(--gold-050);
  font-size: 15.5px;
}
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks li::before {
  content: "";
  width: 18px; height: 18px;
  margin-top: 3px;
  flex: none;
  border-radius: 50%;
  background: var(--gold-600);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.checks__title { font: 700 13px/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700); }
.checks__title::before { display: none; }

.photo-card { margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--paper); }
.photo-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.photo-card figcaption { padding: 14px 18px; font-size: 14px; color: var(--muted); }

/* Safety notice: the one place on the site that is red, because it is the one
   thing that is not a plumbing call. */
.warn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--r-lg);
  background: #fff5f5;
  border: 2px solid #dc2626;
  color: var(--char);
}
.warn svg { width: 34px; height: 34px; stroke: #dc2626; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.warn h3 { font-size: 20px; margin: 0 0 6px; color: #991b1b; }
.warn p { margin: 0; color: #3f1d1d; }
.warn a { color: #991b1b; font-weight: 800; white-space: nowrap; }

/* Related pages, linked by the search term rather than "read more". */
.xlinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.xlink {
  display: block;
  padding: 18px 18px 20px;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.xlink:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.xlink strong { display: block; margin-bottom: 4px; font: 700 16px/1.25 var(--font-display); color: var(--navy); }
.xlink span { font-size: 14px; color: var(--muted); }

/* Closing call to action. */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(30px, 4.6vw, 48px); margin-bottom: 14px; }
.cta-band p { max-width: 58ch; margin: 0 auto 28px; color: hsl(218 22% 86%); font-size: 18px; }
.cta-band .hero__actions { justify-content: center; margin: 0; }

/* The drainage-ownership diagram carried over on the town pages. The drawing
   keeps its own min-width so labels stay legible on a phone; this box scrolls
   sideways instead of the page. */
.dia-wrap { margin-top: clamp(40px, 5vw, 56px); }
.dia-wrap figure { margin: 0 auto; max-width: 860px; }
.dia__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(16px, 3vw, 28px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
.dia__cap { max-width: 70ch; margin: 16px 0 0; color: var(--muted); font-size: 15px; }

@media (max-width: 1040px) {
  .xlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-hero .hero__inner, .split { grid-template-columns: minmax(0, 1fr); }
  .page-hero .hero__art { max-width: 360px; }
}
@media (max-width: 720px) {
  .xlinks { grid-template-columns: minmax(0, 1fr); }
  .warn { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ gallery page --- */

/* The homepage trims its grid to nine; the gallery page is the archive, so it
   shows every tile, CRM-synced ones included. */
.gallery-grid--all > .gallery-item:nth-child(n+11) { display: block; }

/* ----------------------------------------------------- contact page --- */

.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 26px 28px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--line);
}
.plan--hot { border-color: var(--gold); box-shadow: var(--shadow); }
.plan--dark { background: var(--navy); color: var(--white); border-color: var(--navy); }
.plan__flag {
  position: absolute;
  top: -12px; left: 26px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--navy-900);
  font: 700 11px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.plan h3 { font-size: 22px; margin: 0 0 8px; }
.plan__price { margin: 0 0 6px; font: 800 40px/1 var(--font-display); color: var(--navy); }
.plan--dark .plan__price { color: var(--gold); }
.plan__price small { font: 500 15px/1 var(--font-body); color: var(--muted); }
.plan--dark .plan__price small { color: hsl(218 20% 78%); }
.plan__sub { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.plan--dark .plan__sub { color: hsl(218 20% 80%); }
.plan ul { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--gold-600); }
.plan li.is-fee { color: var(--muted); }
.plan li.is-fee::before { background: var(--line); }
.plan .btn { margin-top: auto; width: 100%; }
.plan--dark .btn--ghost { color: var(--white); }

.smallprint { margin-top: clamp(32px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
.smallprint h3 { font: 700 15px/1.3 var(--font-display); margin: 0 0 10px; color: var(--char); }
.smallprint ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

.maps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.map-card { margin: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--paper); box-shadow: var(--shadow-sm); }
.map-card iframe { display: block; width: 100%; height: 260px; border: 0; }
.map-card figcaption { padding: 16px 20px 18px; font-size: 15px; }
.map-card strong { display: block; font: 700 17px/1.3 var(--font-display); margin-bottom: 2px; }
.map-card span { color: var(--muted); }

@media (max-width: 1040px) {
  .ways, .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .plans { gap: 28px; }
}
@media (max-width: 720px) {
  .maps { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- service x town pages --- */

.section--pad-tight { padding: 0 0 clamp(40px, 6vw, 72px); }
.prose--wide { max-width: 76ch; }
.prose .lead { color: var(--char); font-size: 19px; }
.prose ul, .prose ol { color: var(--muted); padding-left: 20px; }
.reel-one video {
  width: 100%;
  max-width: 340px;
  height: auto;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  display: block;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  background: var(--navy-900);
}

/* ------------------------------------------------------------ articles --- */

.article-title { font-size: clamp(30px, 4.6vw, 52px); }
.article { max-width: 74ch; margin-inline: auto; }
.article h2 { font-size: clamp(24px, 3vw, 32px); margin: 36px 0 14px; }
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: 20px; margin: 26px 0 10px; }
.article p, .article li { font-size: 17px; }
.article li { margin-bottom: 6px; }
.article .dia-wrap { margin: 28px 0; }
.table-wrap { overflow-x: auto; margin: 24px 0; border-radius: var(--r); box-shadow: var(--shadow-sm); background: var(--paper); }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.table-wrap th, .table-wrap td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap th { font: 700 14px/1.3 var(--font-display); background: var(--sky-050); color: var(--navy); }

/* --------------------------------------------------------------- posts --- */

.post-figure { max-width: 74ch; margin: 0 auto 32px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); }
.post-figure img { width: 100%; max-height: 520px; object-fit: cover; }
.article img { max-width: 100%; height: auto; border-radius: var(--r); }
.article .image-grid { margin: 24px 0; }

/* -------------------------------------------------------------- reveal --- */

/* Hidden only behind a class the script adds, so a page whose script never
   loads is simply visible. */
.js-reveal { opacity: 0; transform: translateY(20px); }
.js-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1100px) {
  .nav__links { display: none; }
  .menu { display: block; }
}

@media (max-width: 1040px) {
  .grid--svc, .gallery-grid, #home-blog-grid, #blog-grid, .towns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .reels, .cards-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .hero__inner, .work-split, .sos, .about, .quote { grid-template-columns: minmax(0, 1fr); }
  .hero__art { max-width: 440px; margin: 20px auto 0; }
  .about__art { max-width: 380px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav__tel { display: none; }
  .nav__cta .btn--gold { padding: 11px 16px; }
  .brand__word { font-size: 14.5px; }
  .grid--svc, .gallery-grid, #home-blog-grid, #blog-grid, .towns, .steps { grid-template-columns: minmax(0, 1fr); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-bottom: 92px; }
  .chip { left: 0; top: -14px; padding: 10px 14px; }
  .badge-gs { width: 96px; left: 0; bottom: 4%; }
  .shot--inset { width: 40%; right: -2%; }
  .callbar { display: flex; }
  /* Six full reviews is eight screens on a phone; three makes the point. */
  .rw-grid > .rw-review:nth-child(n+4) { display: none !important; }  /* beats the widget's inline display:flex */
  .footer { padding-bottom: 80px; }
  .footer-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (max-width: 420px) {
  .hero__actions .btn { width: 100%; }
  .nav__cta .btn--gold { display: none; }
}

/* ------------------------------------------------------- reduced motion --- */

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


/* ===========================================================================
   Electricians: dark blue and RED.

   The layout and the navy are shared with the plumbers' site so the group reads
   as one family; red replaces gold as this brand's accent. The accent tokens keep
   their --gold names so the shared rules above need no edits — only the values
   change here, plus the few places where text sits ON the accent (white on red,
   where the plumbers use navy on gold) and where red text sits on navy (a lighter
   red, because the full-strength one is too dark to read there).
   =========================================================================== */
:root {
  --gold:     hsl(355 78% 50%);   /* brand red: fills, buttons, highlight stroke */
  --gold-600: hsl(355 75% 44%);
  --gold-700: hsl(355 72% 38%);   /* red text on white */
  --gold-200: hsl(355 85% 86%);
  --gold-050: hsl(355 80% 96%);
  --red-300:  hsl(355 92% 72%);   /* red text on navy */
  --color-accent: var(--gold-600);
}

.btn--gold { --btn-fg: #fff; }
.btn--gold:hover { --btn-bg: var(--gold-600); }
.hero__title .line > .hl { color: #fff; }
.brand__mark { color: #fff; }
.callbar__call { color: #fff; }
.plan__flag, .ba__tag--after { color: #fff; }

.head--light .eyebrow, .section--navy .eyebrow, .hero .eyebrow,
.nav__links a.is-hot, .menu__panel a.is-hot, .crumb a,
.brand__word em, .footer__word em, .svc__link, .sign__name, .stat strong,
.plan--dark .plan__price, .footer a:hover { color: var(--red-300); }
.svc__icon svg { stroke: var(--red-300); }
.svc__icon { background: hsl(355 80% 60% / .15); }
.svc:hover, .svc--hot { border-color: hsl(355 80% 60% / .5); }
.svc--hot { background: hsl(355 60% 40% / .14); }
.ticker { color: var(--gold-200); }
.ticker__run i { color: var(--red-300); }
.hero__wash {
  background:
    radial-gradient(38ch 30ch at 20% 25%, hsl(218 42% 30% / .8), transparent 62%),
    radial-gradient(44ch 34ch at 82% 72%, hsl(218 45% 11% / .85), transparent 65%),
    radial-gradient(30ch 26ch at 62% 8%, hsl(355 70% 50% / .14), transparent 68%);
}
:focus-visible { outline-color: var(--red-300); }

/* Hero illustration (no stock photo): a consumer unit, drawn. */
.cu-art { position: relative; margin: 0; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-lg); background: hsl(218 45% 10% / .6); border: 1px solid hsl(218 40% 70% / .16); box-shadow: var(--shadow-lg); }
.cu-art svg { display: block; width: 100%; height: auto; }
.cu-art figcaption { margin-top: 12px; font-size: 13px; color: hsl(218 20% 78%); text-align: center; }

/* A longer brand name than the plumbers': keep it and the nav on one line each. */
.brand { flex: none; }
.nav__links a { white-space: nowrap; }
@media (min-width: 721px) { .brand__word { white-space: nowrap; } .brand__word em { display: inline; } }
@media (max-width: 1240px) { .nav__links a { padding: 9px 9px; font-size: 14.5px; } }

/* The EV charger offer in the hero. */
.ev-ad {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, hsl(218 42% 16%), hsl(218 45% 9%));
  border: 2px solid var(--gold);
  box-shadow: var(--shadow-lg);
  color: var(--white);
  text-align: center;
}
.ev-ad__img {
  position: absolute;
  top: -34px; right: -18px;
  width: 104px; height: auto;
  filter: drop-shadow(0 12px 22px hsl(218 50% 4% / .5));
}
.ev-ad__badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font: 700 12px/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.ev-ad__title { font-size: clamp(22px, 2.4vw, 28px); margin: 0 0 8px; }
.ev-ad__price { margin: 0 0 16px; font: 800 46px/1 var(--font-display); }
.ev-ad__price small { font: 500 17px/1 var(--font-body); color: hsl(218 20% 78%); margin-right: 4px; }
.ev-ad__list { display: inline-grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; text-align: left; font-size: 16px; color: hsl(218 20% 88%); }
.ev-ad__list li { display: flex; gap: 10px; align-items: center; }
.ev-ad__list li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--red-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ev-ad__cta { width: 100%; }
@media (max-width: 720px) { .ev-ad__img { width: 84px; top: -26px; right: -6px; } }

/* With the EV offer in the hero, the review chip sits under the card, not on it. */
.hero__art .ev-ad + .chip { position: relative; left: auto; top: auto; display: inline-grid; margin-top: 16px; }
/* Cropped tight to the charger itself, so these widths are the charger, not empty canvas. */
.ev-ad__img { width: 150px; top: -70px; right: -34px; }
@media (max-width: 1100px) { .ev-ad__img { width: 120px; top: -122px; right: -14px; } .ev-ad { margin-top: 100px; } }
@media (max-width: 720px) { .ev-ad__img { width: 88px; top: -84px; right: -12px; } .ev-ad { margin-top: 70px; } }