/* Layout: quiet navy-and-sky pages matching the logo; the one bold move is the
   homepage "clean stripe" cut through grimy paving. Archivo throughout, width axis
   used for character: expanded for display, normal for reading. */
:root {
  --bg: #f1f6fc;         /* rinsed paving */
  --surface: #ffffff;
  --ink: #0b1f4d;        /* logo navy */
  --muted: #4c5e80;
  --line: #d2deee;
  --moss: #2f7fd8;       /* water blue (accents) */
  --moss-deep: #0b1f4d;
  --hivis: #f7e017;      /* logo yellow */
  --hivis-ink: #0b1f4d;
  --link: #1a5fc4;
  --todo: #ffe58a;
  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.875rem; --step-0: 1.0625rem; --step-1: 1.25rem; --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 4.5vw, 2.6rem); --step-4: clamp(2.3rem, 7vw, 4.1rem);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1430; --surface: #111e40; --ink: #e8f0fb; --muted: #a3b6d6; --line: #233563;
    --moss: #5cb2f2; --moss-deep: #0a1430; --hivis: #f7e017; --hivis-ink: #0b1f4d; --link: #8cc8ff; --todo: #6b5a12;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0a1430; --surface: #111e40; --ink: #e8f0fb; --muted: #a3b6d6; --line: #233563;
    --moss: #5cb2f2; --moss-deep: #0a1430; --hivis: #f7e017; --hivis-ink: #0b1f4d; --link: #8cc8ff; --todo: #6b5a12;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--body); font-stretch: 100%;
  padding-bottom: 64px; /* room for the mobile action bar */
}
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--hivis); outline-offset: 2px;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.1; text-wrap: balance; margin: 0 0 0.5em; }
h1 { font-size: var(--step-4); font-stretch: 118%; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--step-3); font-stretch: 112%; font-weight: 780; margin-top: 1.6em; }
h3 { font-size: var(--step-1); font-stretch: 105%; font-weight: 700; margin-top: 1.4em; }
p, ul, ol { margin: 0 0 1em; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--surface); padding: 8px 12px; }
mark.todo { background: var(--todo); color: inherit; padding: 0 0.25em; font-size: 0.9em; }

/* ---- header ---- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--surface); }
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--surface); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); margin-right: auto; }
.wordmark {
  font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: 1.55rem; letter-spacing: -0.02em;
  background: linear-gradient(transparent 58%, var(--hivis) 58%, var(--hivis) 82%, transparent 82%);
  padding: 0 2px; margin: 0;
}
.brand-sub { font-stretch: 75%; font-weight: 600; color: var(--muted); font-size: 0.95rem; }
.head-phone { font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu > summary { list-style: none; cursor: pointer; font-weight: 700; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; }
.menu > summary::-webkit-details-marker { display: none; }
.nav { list-style: none; margin: 0; padding: 0; }
.nav a { color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--hivis); text-decoration-thickness: 3px; }
.nav details > summary { cursor: pointer; font-weight: 600; }
.nav details ul { list-style: none; padding: 0; margin: 0; }

@media (max-width: 959px) {
  .head-cta, .head-phone { display: none; }
  .menu[open] nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter-r) 16px var(--gutter-l); max-height: calc(100vh - 80px); overflow-y: auto; }
  .nav > li { border-bottom: 1px solid var(--line); }
  .nav > li > a, .nav details > summary { display: block; padding: 12px 0; font-weight: 600; }
  .nav details ul a { display: block; padding: 8px 0 8px 16px; }
}
@media (min-width: 960px) {
  .menu { display: contents; }
  .menu > summary { display: none; }
  .menu nav { display: block; }
  .nav { display: flex; gap: 20px; align-items: center; font-size: 0.97rem; }
  .nav details { position: relative; }
  .nav details > summary { list-style: none; }
  .nav details > summary::after { content: " ▾"; color: var(--muted); }
  .nav details ul { position: absolute; top: calc(100% + 14px); left: -12px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 6px; padding: 8px 0; min-width: 250px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.12); }
  .nav details ul a { display: block; padding: 7px 16px; }
  .nav details ul a:hover { background: var(--bg); }
  .menu:not([open]) nav { display: block; }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px;
  border-radius: 6px; font: 700 1rem/1.2 var(--body); text-decoration: none; cursor: pointer; border: 2px solid transparent;
}
.btn-primary { background: var(--hivis); color: var(--hivis-ink); }
.btn-primary:hover { filter: brightness(0.95); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 14px; }
.trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--step--1); color: var(--muted); }
.trust li::before { content: "✓ "; color: var(--moss); font-weight: 700; }

/* ---- homepage hero: the clean stripe ---- */
.photo-hero { min-height: clamp(460px, 62vh, 640px); display: flex; align-items: center; }
.photo-hero .hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.photo-hero .hero-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(8 18 44 / 0.88) 0%, rgb(8 18 44 / 0.7) 45%, rgb(8 18 44 / 0.25) 80%, rgb(8 18 44 / 0.1) 100%); }
.photo-hero .hero-inner { width: 100%; }
.hero-home.photo-hero .lead { background: none; color: #eef4ff; padding: 0 0 0 14px; border-left: 4px solid var(--hivis); text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
.photo-hero .trust li { text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); }
@media (max-width: 760px) {
  .photo-hero .hero-shade { background: linear-gradient(180deg, rgb(8 18 44 / 0.55) 0%, rgb(8 18 44 / 0.8) 45%, rgb(8 18 44 / 0.92) 100%); }
  .photo-hero .hero-inner { padding-block: 40px 44px; }
}
.hero-home { position: relative; overflow: hidden; color: #f2f7ff; background: #0e1c40; isolation: isolate; }
.hero-home .grime {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(circle at 18% 30%, rgb(70 96 84 / 0.55) 0 7%, transparent 22%),
    radial-gradient(circle at 70% 75%, rgb(6 14 34 / 0.8) 0 9%, transparent 26%),
    radial-gradient(circle at 88% 20%, rgb(64 88 80 / 0.45) 0 6%, transparent 18%),
    repeating-linear-gradient(90deg, rgb(0 0 0 / 0.22) 0 2px, transparent 2px 66px),
    repeating-linear-gradient(0deg, rgb(0 0 0 / 0.22) 0 2px, transparent 2px 34px),
    linear-gradient(160deg, #23365f, #0e1c40 60%, #1b2c52);
}
/* the cleaned strip: pale concrete block paving, as if one pass of the surface cleaner went across */
.hero-home .stripe {
  position: absolute; z-index: -1; left: -10%; right: -10%; top: 42%; height: 46%;
  transform: rotate(-6deg);
  background:
    repeating-linear-gradient(90deg, rgb(90 120 160 / 0.35) 0 2px, transparent 2px 66px),
    repeating-linear-gradient(0deg, rgb(90 120 160 / 0.35) 0 2px, transparent 2px 34px),
    linear-gradient(#d6e6f7, #e8f2fc);
  box-shadow: 0 0 0 6px rgb(255 255 255 / 0.08);
  animation: wash 1.1s cubic-bezier(.2,.7,.2,1) 0.15s both;
  clip-path: inset(0 0 0 0);
}
@keyframes wash { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.hero-inner { position: relative; padding-block: 56px 72px; max-width: 1120px; }
.hero-home h1 { max-width: 15ch; text-shadow: 0 2px 18px rgb(0 0 0 / 0.35); }
.hero-home .lead {
  max-width: 34rem; font-size: var(--step-1); background: var(--surface); color: var(--ink);
  padding: 14px 16px; border-left: 6px solid var(--hivis); margin-top: 18px;
}
.hero-home .btn-ghost { color: #f2f7ff; background: rgb(8 18 44 / 0.6); }
.hero-home .trust { color: #e3ecfa; }
.hero-home .trust li::before { color: var(--hivis); }
.hero-home .trust a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .hero-home .stripe { animation: none; } }

/* ---- inner page header ---- */
.page-head { background: var(--surface); border-bottom: 6px solid var(--hivis); padding-block: 28px 30px; }
.page-head .lead { font-size: var(--step-1); max-width: 40rem; color: var(--ink); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 0; margin: 0 0 14px; font-size: var(--step--1); color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line); }
.crumbs a { color: var(--muted); }

/* ---- content ---- */
.content { padding-block: 24px 48px; }
.content > p, .content > ul, .content > ol, .content > h2, .content > h3, .content > table, .content > .note { max-width: 46rem; }
.content table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; margin: 0 0 1.4em; background: var(--surface); }
.content th, .content td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.content th { font-stretch: 90%; font-weight: 700; background: var(--bg); }
.note { background: var(--surface); border-left: 6px solid var(--moss); padding: 14px 16px; }
.split { display: grid; gap: 28px; align-items: start; }
@media (min-width: 840px) { .split { grid-template-columns: 1.15fr 0.85fr; } }
.split > * { min-width: 0; }

.photo-slot { margin: 0 0 1.4em; }
.ph {
  aspect-ratio: 4 / 3; max-width: 100%; display: grid; place-items: center; color: var(--muted); font-weight: 600; font-stretch: 80%;
  background: repeating-linear-gradient(135deg, var(--surface) 0 12px, var(--bg) 12px 24px); border: 1px dashed var(--line);
}
.photo-slot figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 6px; }

.projects { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 8px 0 1.6em; }
.project { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px; min-width: 0; }
.project h3 { margin: 12px 0 6px; font-size: 1.1rem; }
.project p { margin: 0 0 6px; font-size: 0.97rem; }
.project .meta { color: var(--muted); font-size: var(--step--1); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.pair .ph { aspect-ratio: 1; }
.pair figure { margin: 0; position: relative; }
.pair img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.pair figcaption { position: absolute; left: 6px; top: 6px; background: rgba(11,31,77,.85); color: #fff; font-size: .78rem; font-weight: 700; padding: 2px 8px; border-radius: 3px; }
.pair .after figcaption { background: var(--hivis); color: #0b1f4d; }
.gallery { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); margin: 0 0 1.4em; max-width: 52rem; }
.gallery figure { margin: 0; min-width: 0; }
.gallery img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.gallery figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 6px; }
@media (max-width: 560px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery figure:first-child { grid-column: 1 / -1; } .gallery figure:first-child img { aspect-ratio: 4 / 3; } }
figure.photo { margin: 0 0 1.4em; max-width: 420px; }
figure.photo img { display: block; width: 100%; height: auto; border-radius: 6px; }
figure.pairfig { max-width: 560px; }
figure.pairfig > figcaption { margin-top: 8px; }
figure.pairfig .pair figcaption { color: #fff; margin: 0; font-size: .78rem; }
figure.pairfig .pair .after figcaption { color: #0b1f4d; }
figure.photo figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 6px; }
.pair .ph.after { background: repeating-linear-gradient(135deg, var(--surface) 0 12px, color-mix(in srgb, var(--moss) 12%, var(--surface)) 12px 24px); }
.project-list { display: grid; gap: 28px; }
.project.wide { display: grid; gap: 18px; padding: 16px; }
@media (min-width: 760px) { .project.wide { grid-template-columns: 340px 1fr; } .project.wide.text-only { grid-template-columns: 1fr; } }
.project.wide h2 { margin-top: 0; font-size: var(--step-2); }
.done { padding-left: 1.1em; }

.reviews { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 8px 0 1em; }
.reviews blockquote { margin: 0; background: var(--surface); border-left: 6px solid var(--hivis); padding: 14px 16px; }
.reviews footer { color: var(--muted); font-size: var(--step--1); }

.areas { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin: 8px 0 1.6em; }
.areas a { display: block; font-weight: 700; font-size: 1.1rem; }
.areas span { color: var(--muted); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.areas li { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }

.services { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 8px 0 1.6em; padding: 0; list-style: none; }
.services li { background: var(--surface); border-top: 6px solid var(--moss); padding: 14px 16px 16px; }
.services li.lead-service { border-top-color: var(--hivis); }
.services a { font-family: var(--display); font-stretch: 108%; font-weight: 750; font-size: 1.2rem; }
.services p { margin: 6px 0 0; font-size: 0.97rem; }
.services .from { display: block; margin-top: 8px; font-weight: 700; color: var(--muted); font-size: var(--step--1); }

ol.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 12px; max-width: 46rem; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; gap: 12px; }
ol.steps li::before { content: counter(s); font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; color: var(--moss); }

.faq { max-width: 46rem; margin-top: 2.4em; }
.faq details { border-bottom: 1px solid var(--line); padding: 12px 0; }
.faq summary { cursor: pointer; font-weight: 700; }
.faq details div { padding-top: 8px; }

.closing { background: var(--ink); color: var(--bg); padding-block: 40px; }
.closing h2 { margin-top: 0; }
.closing .btn-ghost { color: var(--bg); }

/* ---- form ---- */
form.quote { display: grid; gap: 14px; grid-template-columns: 1fr; background: var(--surface); padding: 18px; border: 1px solid var(--line); border-radius: 6px; max-width: 46rem; }
@media (min-width: 640px) { form.quote { grid-template-columns: 1fr 1fr; } .field.full { grid-column: 1 / -1; } }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field input, .field select, .field textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); width: 100%; }
.hp { position: absolute; left: -9999px; }
.small { font-size: var(--step--1); color: var(--muted); }
.form-done { background: var(--surface); border-left: 6px solid var(--hivis); padding: 16px; max-width: 46rem; }

/* ---- footer ---- */
.site-foot { background: var(--surface); border-top: 1px solid var(--line); padding-block: 36px 20px; font-size: 0.97rem; }
.foot-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.site-foot h2 { font-size: 1rem; font-stretch: 100%; margin: 0 0 8px; }
.site-foot ul { list-style: none; padding: 0; margin: 0 0 12px; }
.site-foot li { margin-bottom: 4px; }
.social { display: flex; gap: 14px; }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line); margin-top: 20px; padding-top: 14px; color: var(--muted); font-size: var(--step--1); }
.legal a { margin-left: 12px; }

/* ---- mobile action bar ---- */
.action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--ink); padding: 0 var(--gutter-r) env(safe-area-inset-bottom, 0px) var(--gutter-l);
}
.action-bar a { color: var(--bg); text-align: center; font-weight: 700; padding: 18px 0; text-decoration: none; }
.action-bar a:nth-child(2) { background: var(--hivis); color: var(--hivis-ink); }
@media (min-width: 960px) { .action-bar { display: none; } body { padding-bottom: 0; } }

.consent { position: fixed; left: var(--gutter-l); right: var(--gutter-r); bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); max-width: 34rem; }
.consent div { display: flex; gap: 10px; flex-wrap: wrap; }
@media (min-width: 960px) { .consent { bottom: 20px; } }

/* fixes after first visual check */
.nav details > summary, .btn, .head-phone, .brand-sub { white-space: nowrap; }
.brand-sub { line-height: 1; }
@media (max-width: 1100px) and (min-width: 960px) { .brand-sub { display: none; } .nav { gap: 16px; } }
@media (max-width: 420px) { .brand-sub { display: none; } }
.hero-home .trust { display: inline-flex; background: rgb(8 18 44 / 0.82); padding: 8px 12px; border-radius: 6px; }
mark.todo { background: #ffe58a; color: #1d2d36; }

/* ===== v2: photo-led, trust-first homepage ===== */
/* Services mega menu */
.nav .mega { display: grid; gap: 4px 28px; }
.nav .col-head { font-weight: 700; font-stretch: 85%; color: var(--muted); margin: 10px 0 4px; font-size: 0.9rem; }
.nav .mega ul { list-style: none; padding: 0; margin: 0; }
@media (max-width: 959px) { .nav .mega { padding: 0 0 8px 16px; } .nav .mega a { display: block; padding: 7px 0; } }
@media (min-width: 960px) {
  .nav .mega { position: absolute; top: calc(100% + 14px); left: -16px; grid-template-columns: repeat(2, minmax(220px, 1fr));
    background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 20px 16px; box-shadow: 0 14px 34px rgb(0 0 0 / 0.14); }
  .nav .mega a { display: block; padding: 6px 0; }
  .nav .mega a:hover { color: var(--link); }
}

/* Hero: rating chip, optional real photo */
.hero-home .rating { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 14px; background: rgb(24 30 16 / 0.82);
  padding: 6px 12px; border-radius: 99px; font-weight: 600; font-size: 0.95rem; }
.hero-home .rating span { color: var(--hivis); letter-spacing: 1px; }
.hero-home.has-photo { background: #20271a var(--hero-photo) center / cover no-repeat; }
.hero-home.has-photo .grime { background: linear-gradient(90deg, rgb(18 24 14 / 0.86), rgb(18 24 14 / 0.35) 70%, transparent); }
.hero-home.has-photo .stripe { display: none; }

/* Trust ticker */
.ticker { display: flex; overflow: hidden; background: var(--ink); color: var(--bg); font-weight: 600; font-size: 0.95rem; }
.ticker ul { display: flex; flex-shrink: 0; gap: 40px; list-style: none; margin: 0; padding: 12px 20px; animation: tick 38s linear infinite; }
.ticker li { white-space: nowrap; }
.ticker li::before { content: "✓ "; color: var(--hivis); }
@keyframes tick { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; } .ticker ul { animation: none; } .ticker ul[aria-hidden] { display: none; }
}

/* Owner intro + quote form */
.owner { display: grid; gap: 28px; align-items: start; margin: 8px 0 24px; }
@media (min-width: 900px) { .owner { grid-template-columns: 0.8fr 1.2fr; } }
.owner > * { min-width: 0; }
.owner h2 { margin-top: 0.6em; }
.owner-intro img, .ph.portrait { width: 100%; max-width: 360px; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.owner-intro .sig { font-family: var(--display); font-stretch: 112%; font-weight: 800; font-size: 1.4rem; }
.owner-intro .sig a { color: var(--ink); text-decoration: none; }
.owner-form h2 { margin-top: 0; }
@media (min-width: 900px) { .owner-form h2 { margin-top: 0.6em; } }

/* Service cards with before/after */
.svc-cards { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.svc { display: block; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 10px 16px; color: var(--ink); text-decoration: none; }
.svc:hover { border-color: var(--moss); }
.svc h3 { margin: 12px 6px 4px; }
.svc p { margin: 0 6px 6px; font-size: 0.97rem; }
.svc .from { color: var(--muted); font-weight: 600; font-size: var(--step--1); }
.svc .more { display: inline-block; margin: 6px 6px 0; color: var(--link); font-weight: 700; text-decoration: underline; text-underline-offset: 0.18em; }

/* Why us */
.why { list-style: none; padding: 0; margin: 8px 0 18px; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.why li { border-left: 6px solid var(--hivis); background: var(--surface); padding: 12px 16px; }
.why h3 { margin: 0 0 6px; font-size: 1.1rem; }
.why p { margin: 0; font-size: 0.97rem; }

/* Jobs carousel */
.carousel { overflow-x: auto; scroll-snap-type: x mandatory; margin: 8px 0 6px; padding-bottom: 8px; }
.carousel ul { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 320px); gap: 16px; padding: 0; margin: 0; }
.carousel li { scroll-snap-align: start; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px; min-width: 0; }
.carousel h3 { font-size: 1.05rem; margin: 10px 0 4px; }
.carousel p { font-size: 0.95rem; margin: 0; }
.swipe { color: var(--muted); font-size: var(--step--1); }

.big-count { font-size: var(--step-1); margin: 0 0 12px; }
.big-count strong { font-family: var(--display); font-stretch: 120%; font-size: var(--step-3); font-weight: 800; margin-right: 6px; }

/* Step-by-step quote form */
form.wizard { display: block; }
.wizard fieldset { border: 0; padding: 0; margin: 0 0 8px; display: grid; gap: 12px; min-width: 0; }
.wizard legend { font-family: var(--display); font-stretch: 105%; font-weight: 750; font-size: var(--step-1); margin-bottom: 4px; padding: 0; }
.wizard .progress { margin: 0 0 8px; color: var(--muted); font-weight: 600; font-size: var(--step--1); display: none; }
.js .wizard .progress { display: block; }
.js .wizard fieldset[data-step]:not(.current) { display: none; }
.wizard:not(.js-ready) .next, .wizard:not(.js-ready) .back { display: none; }
.tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.small-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.tile { position: relative; }
.tile input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.tile span { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 6px; background: var(--bg); font-weight: 600; font-size: 0.95rem; }
.tile input:checked + span { border-color: var(--hivis); background: var(--surface); box-shadow: inset 0 0 0 1px var(--hivis); }
.tile input:focus-visible + span { outline: 3px solid var(--hivis); outline-offset: 2px; }
.nav-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wizard .err { color: #b3261e; font-weight: 600; font-size: var(--step--1); margin: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wizard .err { color: #ffb4ab; } }
:root[data-theme="dark"] .wizard .err { color: #ffb4ab; }
.badge { display: inline-block; border: 2px solid var(--moss); padding: 4px 10px; border-radius: 6px; font-weight: 700; font-size: var(--step--1); }

/* homepage sections breathe a bit more */
.home .content > h2 { margin-top: 1.8em; }
.content > ul.svc-cards, .content > ul.why, .content > ul.areas, .content > ul.projects { max-width: none; }
@media (min-width: 960px) { .foot-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } }

/* logo */
.brand { align-items: center; }
.logo { display: block; width: 80px; height: auto; background: #fff; border-radius: 8px; padding: 2px; }
.head-row { min-height: 84px; }
.logo-foot { display: block; width: 160px; height: auto; background: #fff; border-radius: 12px; padding: 4px; margin-bottom: 12px; }
@media (max-width: 420px) { .logo { width: 64px; } .head-row { min-height: 72px; } }
.page-head { border-bottom-color: var(--moss); }
.closing { background: var(--ink); }
.content > ul.services { max-width: none; }
.table-wrap { overflow-x: auto; max-width: 46rem; margin: 0 0 1.4em; }
.table-wrap table { margin: 0; min-width: 480px; }
.services { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
@media (min-width: 960px) { .logo { width: 96px; } .head-row { min-height: 96px; } }

/* ---- Google rating block + review cards ---- */
.rating-block { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 8px 0 18px; }
.rating-block .score { font-family: var(--display); font-stretch: 120%; font-weight: 800; font-size: clamp(3rem, 9vw, 4.4rem); line-height: 1; margin: 0; color: var(--ink); }
.rating-block p { margin: 0; }
.rating-block .count { color: var(--muted); font-weight: 600; }
.rating-link { margin-left: auto; }
@media (max-width: 600px) { .rating-link { margin-left: 0; width: 100%; } }
.stars { color: #f2b705; letter-spacing: 2px; font-size: 1.35rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.reviews { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin: 0 0 1.4em; }
.review { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.review .stars { font-size: 1.05rem; }
.review blockquote { margin: 0; flex: 1; }
.review blockquote p { margin: 0; }
.review figcaption { font-size: var(--step--1); color: var(--muted); display: flex; flex-direction: column; }
.review figcaption strong { color: var(--ink); }
.content > div.reviews { max-width: none; }

/* ---- service area map ---- */
.area-map { margin: 8px 0 20px; max-width: 44rem; }
.area-map svg { display: block; width: 100%; height: auto; background: #e8eef5; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.area-map .cover { fill: rgb(47 127 216 / 0.20); stroke: #1a5fc4; stroke-width: 3; stroke-dasharray: 9 6; stroke-linejoin: round; }
.area-map circle { fill: #0b1f4d; stroke: #f7e017; stroke-width: 4; }
.area-map text { fill: #0b1f4d; font: 800 22px var(--body); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.area-map a:hover text, .area-map a:focus text { fill: #1a5fc4; text-decoration: underline; }
.area-map a:focus { outline: none; }
.area-map a:focus circle { stroke: #1a5fc4; stroke-width: 6; }
.area-map figcaption { font-size: var(--step--1); color: var(--muted); margin-top: 6px; }
.reviews .review blockquote { border: 0; padding: 0; background: none; }
/* logo now has a transparent background */
.logo, .logo-foot { background: none; padding: 0; border-radius: 0; }

/* ---- header: always logo navy, in light and dark mode ---- */
:root { --head-bg: #0b1f4d; --head-ink: #f2f7ff; --head-line: #1f3a75; }
body::before { background: var(--head-bg); }
.site-head { background: var(--head-bg); border-bottom-color: var(--head-line); }
.site-head .nav > li > a, .site-head .nav details > summary, .site-head .head-phone { color: var(--head-ink); }
.site-head .nav details > summary::after { color: #9fb6dd; }
.site-head .nav a[aria-current="page"] { text-decoration-color: var(--hivis); }
.site-head .menu > summary { color: var(--head-ink); border-color: #3b5797; }
/* dropdown panels stay light so the lists are easy to read */
.site-head .nav details ul a { color: var(--ink); }
@media (max-width: 959px) {
  .site-head .menu[open] nav { background: var(--head-bg); border-bottom-color: var(--head-line); }
  .site-head .nav > li { border-bottom-color: var(--head-line); }
  .site-head .nav details ul a { color: var(--head-ink); }
}
.linkish { background: none; border: 0; padding: 0; margin-left: 12px; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.wa-note { background: var(--surface); border-left: 6px solid var(--hivis); padding: 10px 14px; margin: 4px 0 0; font-size: 0.95rem; }
.wa-big .btn { font-size: 1.15rem; min-height: 56px; padding: 12px 26px; }
.field [aria-invalid="true"] { border-color: #b3261e; box-shadow: 0 0 0 1px #b3261e; }
.wizard .err { margin-top: 2px; }
#house-type, #outside-tap { font-weight: 600; font-size: 0.95rem; color: var(--ink); margin: 6px 0 -4px; }

/* inner-page headers on a photo */
.page-head.page-hero { position: relative; overflow: hidden; isolation: isolate; color: #f2f7ff; background: #0e1c40; border-bottom: 6px solid var(--hivis); padding-block: 0; min-height: clamp(300px, 40vh, 420px); }
.page-hero .hero-inner { padding-block: 34px 38px; }
.page-hero h1 { color: #fff; max-width: 22ch; text-shadow: 0 2px 18px rgb(0 0 0 / 0.4); }
.page-hero .lead { color: #eef4ff; border-left: 4px solid var(--hivis); padding-left: 14px; text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
.page-hero .crumbs ol, .page-hero .crumbs a { color: #d7e3f5; }
.page-hero .crumbs li + li::before { color: #8fa6c8; }
.page-hero .btn-ghost { color: #f2f7ff; background: rgb(8 18 44 / 0.6); border-color: #f2f7ff; }
.page-hero .trust { color: #e3ecfa; }
.page-hero .trust li { text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); }
.page-hero .trust li::before { color: var(--hivis); }
.page-hero .trust a { color: inherit; }

/* advice index cards */
.advice-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin: 8px 0 1.8em; max-width: none; }
.advice-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.advice-card:hover, .advice-card:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgb(11 31 77 / 0.15); }
.advice-card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.advice-card span { display: block; padding: 14px 16px 16px; font-size: 0.95rem; color: var(--muted); border-top: 4px solid var(--hivis); }
.advice-card strong { display: block; color: var(--link); font-size: 1.08rem; line-height: 1.3; margin-bottom: 6px; text-decoration: underline; text-underline-offset: 3px; }
.content > .advice-grid { max-width: none; }