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

:root {
  /* Sampled from the logo: blue and silver on black. */
  --paper: #0b0c0d;
  --shelf: #141619;
  --ink: #f4f6f8;
  --ink-soft: #c6ccd3;
  --ink-muted: #8d949c;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  --blue: #2498ce;
  --blue-lift: #6fc1e6;
  --on-blue: #05171f;
  --navband: #0d3f5c;
  --drop: #1e9fd4;
  --field: #1e242b;
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mark: 'Outfit', 'Manrope', sans-serif;
  /* Nine roles, no tenth. */
  --t-micro: 0.75rem;
  --t-small: 0.8125rem;
  --t-ui: 0.875rem;
  --t-body: 0.9375rem;
  --t-h3: 1rem;
  --t-lead: 1.0625rem;
  --t-mark: 1.4rem;
  --t-h2: 1.375rem;
  --t-h1: 2rem;
  --t-hero: 2.25rem;
  /* One column, everywhere, at every width. */
  --max-width: 1400px;
  --gutter: 1.5rem;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p { max-width: 68ch; text-wrap: pretty; }
p + p { margin-top: 1.05rem; }
a { color: var(--blue); }
a:hover { color: var(--blue-lift); }
img { max-width: 100%; height: auto; display: block; }

/* Plain :focus, so a ring shows however focus arrived. */
:focus {
  outline: 2px solid var(--blue-lift, #6fc1e6);
  outline-offset: 2px;
}

.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-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.85rem 1.4rem;
  background: var(--blue);
  color: var(--on-blue);
  font-size: var(--t-small);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* The single content column, centred in the viewport. */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Two up on desktop, stacked on anything narrow. */
.two-col p { max-width: none; }
/* The rule runs the full width, so the heading above it reads as a header
   spanning both columns rather than sitting in the left one. */
.two-col {
  margin-top: 1.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 2.5rem;
  align-items: start;
}

/* ---- Navigation: a utility strip over a nav band ---- */
body > nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: #000;
}
body > nav.scrolled { box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.9); }
/* Black, not blue. A bright blue strip sat directly on the deep blue nav band
   and the two read as one muddy gradient, worst on Safari. Black is also what
   the original two tier header called for: a black utility strip over a blue
   nav band, so the nav band is the only accent stripe on the page. */
.promo {
  background-color: #000000;
  background-image: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.4rem 0;
}
.promo .nav-inner { justify-content: flex-start; gap: 1rem; }
.promo span,
.promo a {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
}
.promo-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.promo a {
  display: inline-block;
  padding: 0.25rem 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.promo a:hover { color: #00303f; }
/* The phone is the point of the whole site, so it is a filled pill, not a link. */
.promo .promo-call {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: #ffffff;
  color: #06303f;
  text-decoration: none;
  box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.45);
}
.promo .promo-call svg { width: 15px; height: 15px; fill: currentColor; }
.promo .promo-call:hover { background: #06303f; color: #ffffff; }

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  text-decoration: none;
}
.brand-mark { width: 116px; flex: none; }
.brand-text { display: block; }
.brand-locality {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--t-micro);
  font-weight: 400;
  color: #b9c1c9;
  line-height: 1.3;
}
.logo {
  display: block;
  font-family: var(--font-mark);
  font-size: var(--t-mark);
  font-weight: 800;
  color: var(--blue-lift);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.nav-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2.75rem;
}
.nav-split .nav-side:first-of-type { justify-self: end; }
.nav-split .nav-side:last-of-type { justify-self: start; }
.nav-band {
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(36, 152, 206, 0.45);
  background-color: var(--navband);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.18));
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.7rem;
  list-style: none;
}
.nav-links a {
  display: inline-block;
  white-space: nowrap;
  padding: 0.6rem 0;
  font-size: var(--t-small);
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--blue-lift); }
.nav-links a.active { color: var(--blue-lift); }

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--ink);
}

/* ---- Page shell ---- */
#home { position: relative; overflow: hidden; }
#home > .container { position: relative; z-index: 1; }
/* A wash of brand light behind the headline, so the hero is not a flat slab. */
#home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 78% at 74% 30%, rgba(30, 159, 212, 0.22), rgba(11, 12, 13, 0) 72%);
  pointer-events: none;
}
.hero-glyph {
  position: absolute;
  right: 0;
  top: 46%;
  width: min(520px, 44%);
  transform: translateY(-50%);
  opacity: 0.13;
  pointer-events: none;
}

.view { padding-top: 9.5rem; padding-bottom: 1.5rem; }
h1, h2, section[id] { scroll-margin-top: 8.5rem; }
h1 + p { margin-top: 0.85rem; }
section { padding: 1.1rem 0; }

h1 {
  font-family: var(--font-mark);
  font-size: var(--t-h1);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--drop);
  text-wrap: balance;
}
/* The home headline is a hero, not a page title. Same styling, more size. */
.hero-title { font-size: var(--t-hero); }
.hero-title + .lede { max-width: none; }
h2 {
  font-family: var(--font-mark);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--drop);
  margin-bottom: 0.85rem;
}
h3 {
  font-family: var(--font-mark);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--drop);
  margin-bottom: 0.2rem;
}
.lede {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 58ch;
  margin-top: 0.7rem;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.25rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  background-color: var(--blue);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(0, 0, 0, 0.08));
  color: var(--on-blue);
  font-size: var(--t-ui);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--blue);
  border-radius: 5px;
  box-shadow: 0 10px 24px -12px rgba(30, 159, 212, 0.85);
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:hover {
  background-color: var(--blue-lift);
  border-color: var(--blue-lift);
  color: var(--on-blue);
  box-shadow: 0 14px 30px -12px rgba(111, 193, 230, 0.9);
}
.btn-ghost {
  background-image: none;
  box-shadow: none;
  background-color: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--shelf); border-color: var(--blue); color: var(--ink); }

/* ---- Rating and customer quotes ---- */
.rating {
  margin-top: 0.7rem;
  font-size: var(--t-small);
  font-weight: 700;
}
.stars { color: #f5b731; letter-spacing: 0.08em; }
.rating a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.rating a:hover { color: var(--blue-lift); }
/* Reviews read as a live Google module: byline, avatar, per-review stars. */
/* Was a flex row holding the heading and a Read on Google button at opposite
   ends. The button is gone (the review count is the link now), so the heading
   and rating simply stack. */
.rev-head { display: block; }
.rev-by {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.rev-av {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navband);
  color: var(--ink);
  font-size: var(--t-ui);
  font-weight: 700;
}
.rev-id { display: flex; flex-direction: column; gap: 0.1rem; }
.rev-id .who {
  margin-top: 0;
  font-size: var(--t-ui);
  font-weight: 700;
  color: var(--ink);
}
.rev-id .stars { font-size: var(--t-micro); }
/* A sideways strip, so more reviews cost horizontal room instead of page depth. */
.quotes {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 0.25rem;
  padding-bottom: 0.9rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--blue) var(--shelf);
  scrollbar-width: thin;
}
.quotes-wrap { position: relative; }
.quotes-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0.9rem;
  width: 56px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(11, 12, 13, 0), var(--paper));
}
.quotes::-webkit-scrollbar { height: 8px; }
.quotes::-webkit-scrollbar-track { background: var(--shelf); border-radius: 999px; }
.quotes::-webkit-scrollbar-thumb { background: var(--blue); border-radius: 999px; }
.quotes li {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 clamp(230px, 21vw, 290px);
  scroll-snap-align: start;
  padding: 1.1rem 1.2rem;
  background: var(--shelf);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.quotes li:hover { border-color: var(--blue); }
/* The name links to the original on Google, which is what makes a quote
   checkable. It is no longer stretched over the whole card, because the card
   now also has an expand button and the overlay would have swallowed it. */
.rev-link { text-decoration: none; }
.rev-link:hover { color: var(--blue-lift); }
/* Clamped to six lines. One long review was setting the height of every card
   in the row, so three of the four were mostly empty space. The full text stays
   in the DOM and the whole card links to the original on Google, so nothing is
   edited or hidden, only folded. Never trim the stored text itself. */
.quotes p {
  max-width: none;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Undoing a -webkit-box clamp needs the display and overflow back too.
   Clearing line-clamp alone leaves the text still clipped. */
.quotes li[data-expanded] p {
  display: block;
  -webkit-line-clamp: none;
  overflow: visible;
}
.rev-more {
  margin-top: auto;
  align-self: flex-start;
  /* Buttons do not inherit the page font. Without this it renders in Arial and
     counts as a 12th distinct type style against a budget of 11. */
  font-family: inherit;
  padding: 0.7rem 0 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  /* t-small, not t-micro: 12px/700 would be a 12th distinct type style and the
     budget is 11. 13px/700 is already in use. */
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--blue);
}
.quotes li:hover .rev-more { color: var(--blue-lift); }
.who {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--t-micro);
  color: var(--ink-muted);
}

/* ---- Category row: icon, label, one line ---- */
.cats {
  list-style: none;
  display: grid;
  /* auto-fit, not a fixed 5. The old rule went straight from five columns to
     two at 1200px, which on a laptop put three cards on one row, two on the
     next and one stranded on a third, with half the width empty. This steps
     5 -> 4 -> 3 -> 2 as the room actually runs out. */
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1.6rem;
  margin-top: 0.5rem;
}
.cat-ico {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  background-color: var(--shelf);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.2));
  border: 1px solid var(--line-strong);
  color: var(--drop);
}
.cat-ico svg { width: 28px; height: 28px; }
.cats-head { margin-bottom: 0.9rem; }
.cats h3 {
  display: block;
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
  margin: 0 0 0.2rem;
}
.cats h3 a { color: inherit; text-decoration: none; }
.cats h3 a:hover { color: var(--blue-lift); }
.cats span:not(.cat-ico) {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ---- Two-column service lists ---- */
/* One short paragraph under the title {
  max-width: 74ch;
  margin: 0.9rem 0 2rem;
  font-size: var(--t-body);
  color: var(--ink-soft);
}
/* One row per service. The detail sits to the right and appears on hover. */
.list2 { list-style: none; }
.list2 > li {
  display: grid;
  grid-template-columns: 24rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--line);
}
.list2 > li:last-child { border-bottom: none; }
.list2 b {
  display: block;
  font-size: var(--t-lead);
  font-weight: 500;
  color: var(--ink);
}
.kids {
  list-style: none;
  padding-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
}
.kids li {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
}
.kids li { white-space: nowrap; }
.kids li:not(:last-child)::after {
  content: "\00b7";
  margin-left: 0.85rem;
  color: var(--ink-muted);
}
/* ---- Service area: counties beside a schematic coverage map ---- */
.area-split {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 1.4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.coverage svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.coverage figcaption {
  margin-top: 0.5rem;
  font-size: var(--t-micro);
  color: var(--ink-muted);
}

/* ---- Counties: cities expand on hover, since the lists are long ---- */
.areas-list { list-style: none; }
.areas-list > li {
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
.areas-list > li:last-child { border-bottom: none; }
.areas-list b {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--t-lead);
  font-weight: 500;
  color: var(--ink);
}
.cities {
  list-style: none;
  column-width: 150px;
  column-gap: 1.5rem;
}
.cities li {
  break-inside: avoid;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.6;
}
.under {
  margin-top: 0.5rem;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

/* The About page still holds a slot for a photo of Scott and Candace. The
   gallery grid that used to sit beside this went with the gallery page. */
.photo-slot {
  aspect-ratio: 3 / 2;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: var(--shelf);
  border: 1px dashed var(--line-strong);
  border-radius: 6px;
  margin-bottom: 1.25rem;
}
.photo-slot p { max-width: none; font-size: var(--t-small); color: var(--ink-muted); text-align: center; }

/* ---- Form: one column, held to a sane width so fields are not 1100px wide ---- */
.intro-block {
  max-width: none;
  margin-top: 1.2rem;
  padding-bottom: 1.6rem;
  margin-bottom: 1.8rem;
  border-bottom: 1px solid var(--line);
}
.intro-block .lede { margin-top: 0; max-width: none; }
.intro-block p { max-width: none; }
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.75rem;
  align-items: start;
}
.form-group.span2 { grid-column: 1 / -1; }
.contact-form .form-submit { grid-column: 1 / -1; justify-self: start; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; }
.form-group label {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-muted);
}
.form-group input,
.form-group textarea {
  font-family: var(--font);
  font-size: var(--t-ui);
  color: var(--ink);
  background: var(--field);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0.85rem 1rem;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--ink-muted); }
.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  background: #232a32;
}
.form-group input[type="file"] { padding: 0.7rem 0.8rem; color: var(--ink-soft); }
.field-note { font-size: var(--t-micro); color: var(--ink-muted); }
.field-note[data-bad] { color: #ffa392; }
.form-group textarea { resize: vertical; min-height: 130px; }
.required { color: var(--blue); }
.form-submit {
  align-self: flex-start;
  min-height: 48px;
  padding: 0.9rem 2rem;
  background: var(--blue);
  color: var(--on-blue);
  font-family: var(--font);
  font-size: var(--t-ui);
  font-weight: 700;
  border: 1px solid var(--blue);
  border-radius: 4px;
  cursor: pointer;
}
.form-submit:hover { background: var(--blue-lift); }
[data-form-done] {
  padding: 1.5rem;
  background: var(--shelf);
  border: 1px solid var(--line);
  border-radius: 6px;
}

/* ---- Wayfinding, since there is no footer ---- */
.next {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-small);
  color: var(--ink-muted);
}

/* ---- Footer ---- */
main { flex: 1 0 auto; }
footer {
  flex-shrink: 0;
  margin-top: 1.25rem;
  padding: 2.25rem 0 1.25rem;
  background: #000;
  border-top: 1px solid var(--line);
}
.foot-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.75rem 2.5rem;
  align-items: start;
}
/* Both sit inside .foot-cols, so they need two classes to outrank .foot-cols a. */
.foot-cols .foot-brand { display: block; text-decoration: none; }
.foot-brand img { width: 150px; margin-bottom: 0.5rem; }
.foot-area {
  margin: 0.45rem 0 0;
  font-size: var(--t-micro);
  color: var(--ink-muted);
}
.foot-area a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
.foot-area a:hover { color: var(--blue-lift); }

.foot-lic {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}
/* On the contact page it sits with the form, which is where someone decides
   whether to hand over their address. A licence number is the cheapest trust
   signal a licensed trade has, so it should not only live in the footer. */
.lic-badge {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--ink);
}
/* Stands out by size and colour, not by being a button. */
.foot-cols .foot-phone {
  font-size: var(--t-ui);
  font-weight: 700;
  color: var(--ink);
}
.foot-cols .foot-phone:hover { color: var(--blue-lift); }
.foot-cols h2 {
  font-family: var(--font-mark);
  font-size: var(--t-small);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--drop);
  margin-bottom: 0.5rem;
}
.foot-cols p {
  max-width: none;
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.9;
}
.foot-links {
  list-style: none;
  font-size: var(--t-small);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.5rem;
}
.foot-cols a {
  display: inline-block;
  overflow-wrap: anywhere;
  padding: 0.2rem 0;
  color: var(--ink-soft);
  text-decoration: none;
}
.foot-cols a:hover { color: var(--blue-lift); }

/* ---- Sticky call bar, phones only ---- */
.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1100;
  padding: 0.6rem var(--gutter);
  background: #000;
  border-top: 1px solid var(--line);
}
.call-bar { display: none; gap: 0.5rem; }
.call-bar a {
  flex: 1.35;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--blue);
  color: var(--on-blue);
  font-size: var(--t-ui);
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
}

/* Between 1024 and 1200 the links stay inline, so the lockup has to give up
   some room to fit them. Below 1024 the nav collapses. */
@media (max-width: 1200px) and (min-width: 1024px) {
  .brand-mark { width: 92px; }
  .nav-links { gap: 1.1rem; }
  .nav-split { gap: 1.25rem; }
}

@media (max-width: 1023px) {
  .menu-toggle { display: flex; }
  .nav-split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .nav-side {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0 0.75rem;
  }
  nav[data-menu-open] .nav-side { display: flex; }
  /* Brand and toggle share the first row; both link groups wrap below it as one
     continuous list. Without this the brand sits between the two groups. */
  .brand-lockup { order: 1; }
  .menu-toggle { order: 2; }
  .nav-split .nav-side:first-of-type { order: 3; padding-bottom: 0; }
  .nav-split .nav-side:last-of-type { order: 4; padding-top: 0; }
  .nav-side a { padding: 0.55rem 0; }
  .brand-lockup { padding: 0.35rem 0; min-width: 0; }
  .brand-locality { display: none; }
  .brand-mark { width: 84px; }
}

@media (max-width: 1200px) {
  :root { --t-h1: 1.65rem; --t-hero: 1.8rem; --t-h2: 1.25rem; --gutter: 1.1rem; --t-mark: 1.05rem; }
  .view { padding-top: 7.5rem; }
  .hero-glyph { display: none; }
  .two-col,
  .area-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .cats { gap: 1.25rem; }
  .list2 > li { grid-template-columns: 1fr; gap: 0.15rem; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
  .contact-form { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* Measured: at 390 and 402 the header was 139px tall because the brand
     lockup plus the toggle did not fit one row. At 430 it was 55. Shrinking
     the mark and the wordmark keeps every phone on one row. */
  .brand-mark { width: 48px; }
  .nav-split .logo { font-size: 0.9rem; }
  .brand-lockup { gap: 0.45rem; }
}

body.menu-locked { overflow: hidden; }

@media (max-width: 767px) {
  .promo { display: none; }
  .call-bar { display: flex; }
  body { padding-bottom: 5.25rem; }
  .call-bar .call-bar-alt {
    flex: 1;
    background: var(--shelf);
    color: var(--ink);
    border: 1px solid var(--line-strong);
  }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .foot-id { grid-column: 1 / -1; }
  footer { padding-bottom: 1.6rem; }
}