/* HVR Painting - site styles
   Built from the Claude Design handoff (project/Home.dc.html, Site Header, Site Footer, Trusted By).
   Colors sampled from the logo per CLAUDE.md. Do not introduce new hex values here. */

:root {
  --blue: #0060AE;
  --blue-dk: #004E8C;
  --blue-tint: #E8F1FA;
  --blue-soft: #8FC4EE;
  --blue-pale: #BFE0FA;
  --green: #00A26C;
  --ink: #303636;
  --muted: #5C6466;
  --muted-2: #7A8386;
  --line: #DDE2E4;
  --line-2: #E6E9EA;
  --line-3: #F0F2F3;
  --bg: #FFFFFF;
  --bg-alt: #F4F6F7;
  --star: #F5A623;
  --on-dark: #D8DCDD;
  --on-dark-dim: #A7AEB0;
  --on-dark-line: #4A5152;
  --heading: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 80px;
}

/* ---------- base ---------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--blue); }
a:hover { color: var(--blue-dk); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #FFFFFF; font-weight: 700;
  padding: 12px 18px; border-radius: 0 0 6px 0; text-decoration: none;
}
.skip-link:focus { left: 0; color: #FFFFFF; }

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.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;
}

.eyebrow {
  font-family: var(--heading); font-weight: 600; font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue);
}

h1, h2, h3 { font-family: var(--heading); font-weight: 700; margin: 0; }

.h2 { font-size: 44px; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }

.lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); }

.arrow-link {
  color: var(--blue); font-weight: 700; text-decoration: none; font-size: 15px;
  display: inline-flex; align-items: center; gap: 6px; transition: gap 200ms;
}
.arrow-link:hover { gap: 10px; }

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

@keyframes hvrUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hvrIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes hvrMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.reveal.is-in, .no-js .reveal { opacity: 1; transform: none; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-2);
}
.site-header .header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--header-h); transition: height 250ms var(--ease);
}
.site-header.is-shrunk .header-inner { height: 64px; }

.header-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.header-logo img { height: 40px; width: auto; }

.main-nav { display: flex; align-items: center; gap: 6px; }
.nav-link, .dd-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-weight: 600; font-size: 15px;
  color: var(--ink); text-decoration: none;
  padding: 10px 12px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  transition: color 200ms, background 200ms;
}
.nav-link:hover, .dd-toggle:hover { color: var(--blue); background: var(--bg-alt); }
.dd-toggle svg { transition: transform 200ms; }

.dd { position: relative; }
.dd-menu {
  position: absolute; top: 100%; left: 0; padding-top: 8px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease), visibility 220ms;
}
.dd[data-open="true"] > .dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dd[data-open="true"] > .dd-toggle svg { transform: rotate(180deg); }
@media (hover: hover) {
  .dd:hover > .dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
  .dd:hover > .dd-toggle svg { transform: rotate(180deg); }
}
.dd-panel {
  background: var(--bg); border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(48, 54, 54, 0.16); padding: 20px; width: max-content;
}
.dd-panel.services { display: grid; grid-template-columns: 240px 240px; gap: 20px 28px; }
.dd-col { display: flex; flex-direction: column; gap: 4px; }
.dd-head {
  font-family: var(--heading); font-weight: 700; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); padding: 0 10px 6px;
}
.dd-item {
  display: block; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
  padding: 9px 10px; border-radius: 6px; transition: background 150ms, color 150ms;
}
.dd-item:hover { background: var(--bg-alt); color: var(--blue); }
.dd-foot {
  grid-column: 1 / -1; border-top: 1px solid var(--line-2); padding-top: 14px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 14px;
}
.dd-foot .label { color: var(--muted-2); }
.dd-foot a { color: var(--muted); text-decoration: none; font-weight: 600; }
.dd-foot a:hover { color: var(--blue); }
.dd-foot .all { margin-left: auto; color: var(--blue); font-weight: 700; }
.dd-foot .all:hover { color: var(--blue-dk); }

.dd-areas-grid { display: grid; grid-template-columns: repeat(3, 170px); gap: 2px 12px; }
.dd-areas-grid .dd-item.is-primary { font-weight: 700; }
.dd-areas-foot {
  border-top: 1px solid var(--line-2); margin-top: 14px; padding-top: 14px;
  display: flex; justify-content: flex-end;
}
.dd-areas-foot a { color: var(--blue); text-decoration: none; font-weight: 700; font-size: 14px; }
.dd-areas-foot a:hover { color: var(--blue-dk); }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-social { display: flex; align-items: center; gap: 4px; margin-right: 4px; }
.icon-btn {
  display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--muted); transition: color 200ms, background 200ms;
}
.icon-btn:hover { color: var(--blue); background: var(--bg-alt); }

.header-phone {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none;
  font-family: var(--heading); font-weight: 700; font-size: 18px; letter-spacing: 0.01em;
  transition: color 200ms;
}
.header-phone:hover { color: var(--blue); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--heading); font-weight: 700; text-decoration: none;
  border-radius: 6px; cursor: pointer; border: 0;
  transition: background 200ms, color 200ms, transform 200ms, box-shadow 200ms;
}
.btn-primary { background: var(--blue); color: #FFFFFF; font-size: 20px; padding: 14px 22px; }
.btn-primary:hover { background: var(--blue-dk); color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 96, 174, 0.4); }
.btn-header { background: var(--blue); color: #FFFFFF; font-family: var(--body); font-weight: 700; font-size: 15px; padding: 11px 18px; }
.btn-header:hover { background: var(--blue-dk); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 96, 174, 0.28); }
.btn-ghost {
  background: rgba(255, 255, 255, 0.1); color: #FFFFFF; border: 2px solid #FFFFFF;
  font-size: 20px; padding: 12px 22px;
}
.btn-ghost:hover { background: #FFFFFF; color: var(--ink); transform: translateY(-2px); }

.burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--bg); cursor: pointer; color: var(--ink);
}

.mobile-nav {
  border-top: 1px solid var(--line-2); background: var(--bg);
  padding: 8px 24px 20px; display: flex; flex-direction: column;
  max-height: calc(100vh - 80px); overflow: auto;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav .dd-head { padding: 14px 0 6px; }
.mobile-nav a {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px;
  padding: 11px 0; border-bottom: 1px solid var(--line-3);
}
.mobile-nav a.is-all { color: var(--blue); font-weight: 700; font-size: 16px; border-bottom: 0; }
.mobile-nav a.is-last { border-bottom: 0; }
.mobile-nav a.mobile-quote {
  order: -1; margin: 12px 0 4px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--blue); color: #FFFFFF; font-family: var(--heading); font-weight: 700;
  font-size: 18px; padding: 14px; border-radius: 6px; border-bottom: 0; min-height: 52px;
}
.mobile-nav a.mobile-quote:hover { background: var(--blue-dk); }
.mobile-nav a.mobile-call {
  margin-top: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--blue); border: 2px solid var(--blue); font-family: var(--heading);
  font-weight: 700; font-size: 18px; padding: 12px; border-radius: 6px; border-bottom-width: 2px;
}

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

.hero {
  position: relative; min-height: 88vh; display: flex; align-items: center;
  overflow: hidden; background: var(--ink); color: #FFFFFF;
}
.hero-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  animation: hvrIn 1200ms var(--ease) both;
}
.hero-scrim-x {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(48, 54, 54, 0.86) 0%, rgba(48, 54, 54, 0.66) 45%, rgba(48, 54, 54, 0.18) 100%);
}
.hero-scrim-y {
  position: absolute; left: 0; right: 0; bottom: 0; height: 160px;
  background: linear-gradient(180deg, rgba(48, 54, 54, 0) 0%, rgba(48, 54, 54, 0.55) 100%);
}
.hero-copy {
  position: relative; z-index: 1; max-width: 1240px; width: 100%; margin: 0 auto;
  padding: 96px 24px 88px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start;
}
.hero-copy > * { animation: hvrUp 600ms var(--ease) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0ms; }
.hero-copy > *:nth-child(2) { animation-delay: 80ms; }
.hero-copy > *:nth-child(3) { animation-delay: 160ms; }
.hero-copy > *:nth-child(4) { animation-delay: 240ms; }
.hero-copy > *:nth-child(5) { animation-delay: 320ms; }
.hero-copy > *:nth-child(6) { animation-delay: 400ms; }
.hero-copy > *:nth-child(7) { animation-delay: 480ms; }
.hero-copy > *:nth-child(8) { animation-delay: 540ms; }

.offer-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF; backdrop-filter: blur(6px);
  font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px;
}
.offer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; }

.hero-eyebrow {
  font-family: var(--heading); font-weight: 600; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark);
}
.hero h1 {
  font-size: 72px; line-height: 0.98; letter-spacing: -0.015em; max-width: 820px;
  text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.hero h1 .accent { color: var(--blue-soft); }
.hero-sub { font-size: 20px; line-height: 1.55; margin: 0; max-width: 600px; color: #F0F2F3; text-wrap: pretty; }

.trust-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.trust-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08);
  border-radius: 6px; padding: 8px 12px; font-size: 14px; font-weight: 600;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hero-segments { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.segment-link {
  display: inline-flex; align-items: center; gap: 8px; color: #FFFFFF; text-decoration: none;
  font-weight: 700; font-size: 15px; padding: 10px 14px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 200ms;
}
.segment-link:hover { background: rgba(255, 255, 255, 0.2); color: #FFFFFF; }
.hero-note { font-size: 14px; color: var(--on-dark); }

/* ---------- trust strip ---------- */

.trust-strip { background: var(--bg-alt); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); scroll-margin-top: 80px; }
.trust-grid {
  padding: 36px 24px; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px;
}
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item svg { flex-shrink: 0; }
.trust-item h2, .trust-item .title { font-family: var(--heading); font-weight: 700; font-size: 18px; }
.trust-item p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }

/* ---------- logo marquee ---------- */

/* Light band, logos sit directly on it in full brand colour. The white cards
   this replaced existed only because dark logos vanish on the brand blue. */
.marquee {
  background: var(--bg-alt); color: var(--ink); overflow: hidden;
  border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2);
  padding: 40px 0; display: flex; flex-direction: column; gap: 28px; position: relative;
}
.marquee h2 {
  font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
  text-align: center; padding: 0 24px; color: var(--muted);
}
.marquee h2 .accent { color: var(--blue); }
.marquee-viewport { position: relative; }
.marquee-fade { position: absolute; top: 0; bottom: 0; width: 120px; z-index: 1; pointer-events: none; }
.marquee-fade.left { left: 0; background: linear-gradient(90deg, #F4F6F7, rgba(244, 246, 247, 0)); }
.marquee-fade.right { right: 0; background: linear-gradient(270deg, #F4F6F7, rgba(244, 246, 247, 0)); }
.marquee-track {
  display: flex; align-items: center; gap: 56px; width: max-content; padding: 0 14px;
  animation: hvrMarquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-card {
  display: flex; align-items: center; justify-content: center;
  height: 84px; min-width: 150px; padding: 0 8px;
  transition: transform 300ms var(--ease);
}
.marquee-card:hover { transform: translateY(-2px) scale(1.03); }
.marquee-card img { max-width: 150px; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.marquee-card.is-target img { max-width: 170px; max-height: 68px; }

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

.section { max-width: 1240px; margin: 0 auto; padding: 96px 24px 40px; scroll-margin-top: 80px; }
.section.tight { padding: 72px 24px 40px; }
.section.flush-top { padding: 24px 24px 96px; }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 40px;
}
.section-head .head-copy { display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.section-head.narrow { margin-bottom: 32px; gap: 16px; }
.section-head.narrow .head-copy { max-width: 620px; }
.stack-head { display: flex; flex-direction: column; gap: 12px; max-width: 720px; margin-bottom: 40px; }

.card-grid-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.service-card {
  display: grid; grid-template-columns: 1fr; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg);
  transition: transform 300ms var(--ease), box-shadow 300ms;
}
.service-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(48, 54, 54, 0.14); color: var(--ink); }
.service-card .media { overflow: hidden; aspect-ratio: 16 / 9; }
.service-card .media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.service-card:hover .media img { transform: scale(1.04); }
.service-card .body { padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.service-card h3 { font-size: 28px; }
.service-card p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--muted); }
.service-card .cta { color: var(--blue); font-weight: 700; font-size: 15px; }
.badge {
  display: inline-flex; align-self: flex-start; background: var(--blue-tint); color: var(--blue-dk);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px;
}

.card-grid-secondary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 20px; }
.mini-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 22px; background: var(--bg);
  transition: transform 300ms var(--ease), box-shadow 300ms, border-color 300ms;
}
.mini-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(48, 54, 54, 0.12); border-color: var(--blue); color: var(--ink); }
.mini-card h3 { font-size: 20px; }
.mini-card p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); flex: 1; }
.mini-card .cta { color: var(--blue); font-weight: 700; font-size: 14px; }

.also-row {
  margin-top: 24px; padding: 18px 22px; background: var(--bg-alt); border-radius: 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 15px;
}
.also-row .label { color: var(--muted); font-weight: 600; }
.also-row a {
  color: var(--ink); font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--line); transition: border-color 200ms, color 200ms;
}
.also-row a:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- split sections ---------- */

.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: start; }
.split.centered { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.narrow-left { grid-template-columns: 0.8fr 1.2fr; gap: 56px; }
.split.even { grid-template-columns: 1fr 1fr; gap: 56px; }
.split.form { grid-template-columns: 0.9fr 1.1fr; gap: 56px; }

.prose { display: flex; flex-direction: column; gap: 18px; }
.prose p { margin: 0; font-size: 17px; line-height: 1.7; }
.prose.tight p { font-size: 17px; line-height: 1.65; }

.check-list {
  list-style: none; margin: 8px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 24px;
}
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; font-weight: 600; }
.check-list svg { flex-shrink: 0; margin-top: 1px; }

.media-stack { display: flex; flex-direction: column; gap: 16px; }
.media-frame { overflow: hidden; border-radius: 14px; }
.media-frame.ratio-4-3 { aspect-ratio: 4 / 3; }
.media-frame.ratio-16-9 { aspect-ratio: 16 / 9; }
.media-frame.ratio-9-16 { aspect-ratio: 9 / 16; background: var(--bg-alt); }
.media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.media-frame.zoom:hover img { transform: scale(1.03); }

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

.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 12px; }
.work-tile { overflow: hidden; border-radius: 12px; }
.work-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.work-tile:hover img { transform: scale(1.05); }
.work-tile.span-2x2 { grid-column: span 2; grid-row: span 2; }
.work-tile.span-2 { grid-column: span 2; }

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

.band-alt { background: var(--bg-alt); scroll-margin-top: 80px; }
.band-alt .band-inner { max-width: 1240px; margin: 0 auto; padding: 96px 24px; }

.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.review {
  margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
  transition: transform 300ms var(--ease), box-shadow 300ms;
}
.review:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(48, 54, 54, 0.10); }
.review-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stars { color: var(--star); font-size: 18px; letter-spacing: 2px; }
.source { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); }
.review p { margin: 0; font-size: 16px; line-height: 1.65; flex: 1; }
.review footer { font-family: var(--heading); font-weight: 700; font-size: 16px; }
.review footer span { font-family: var(--body); font-weight: 400; font-size: 14px; color: var(--muted-2); }

/* The GoHighLevel review widget replaces the old static cards. min-height
   reserves room so the page does not jump when the iframe reports its height. */
.review-widget { width: 100%; }
.review-widget iframe { display: block; width: 100%; min-width: 100%; border: 0; min-height: 420px; }

.review-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; align-items: center; }
.review-links .label { font-size: 14px; font-weight: 600; color: var(--muted); }
.pill {
  background: var(--bg); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 14px; padding: 10px 16px; border-radius: 6px;
  transition: border-color 200ms, color 200ms, transform 200ms;
}
.pill:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* ---------- process ---------- */

.steps {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px;
}
.steps li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 3px solid var(--line); }
.steps li:first-child { border-top-color: var(--blue); }
.steps .num { font-family: var(--heading); font-weight: 700; font-size: 40px; color: var(--blue); line-height: 1; }
.steps h3 { font-size: 22px; }
.steps p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

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

.about-media { display: grid; grid-template-columns: 0.62fr 1fr; gap: 16px; align-items: stretch; }
.about-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.social-link {
  display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: 14px; border: 1px solid var(--line); padding: 9px 14px; border-radius: 6px;
  transition: border-color 200ms, color 200ms;
}
.social-link:hover { border-color: var(--blue); color: var(--blue); }

/* ---------- areas ---------- */

.sticky-head { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 100px; }

.area-pills { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.area-pill {
  display: inline-block; background: var(--bg); border: 1px solid var(--line); color: var(--ink);
  font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 6px; text-decoration: none;
  transition: border-color 200ms, color 200ms, transform 200ms;
}
.area-pill:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
.area-pill.is-primary { background: var(--blue); color: #FFFFFF; font-weight: 700; border-color: var(--blue); }
.area-pill.is-primary:hover { background: var(--blue-dk); color: #FFFFFF; border-color: var(--blue-dk); transform: translateY(-2px); }

.map-card {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg); box-shadow: 0 20px 50px rgba(48, 54, 54, 0.10);
}
.map-card iframe { border: 0; width: 100%; height: 420px; }
.map-foot {
  padding: 16px 20px; display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 8px 16px; font-size: 14px;
}
.map-foot a { color: var(--blue); font-weight: 700; text-decoration: none; }

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

.faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 0; cursor: pointer; font-family: var(--heading); font-weight: 700; font-size: 20px;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { flex-shrink: 0; transition: transform 250ms; }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list p { margin: 0; padding: 0 0 20px; font-size: 16px; line-height: 1.65; color: var(--muted); }

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

.quote-band { background: var(--bg-alt); border-top: 1px solid var(--line-2); scroll-margin-top: 80px; }
.quote-band .band-inner { max-width: 1240px; margin: 0 auto; padding: 96px 24px; }

.contact-cards { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.contact-card {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px;
  transition: border-color 200ms, transform 200ms;
}
.contact-card:hover { border-color: var(--blue); transform: translateY(-2px); color: var(--ink); }
.contact-card .label { font-size: 13px; color: var(--muted-2); font-weight: 600; }
.contact-card .value { font-family: var(--heading); font-weight: 700; font-size: 20px; }

.form-card {
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(48, 54, 54, 0.10); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
}
.form-card h3 { font-size: 24px; }
.form-shell { min-height: 957px; border-radius: 8px; overflow: hidden; }
.form-shell iframe { width: 100%; height: 957px; border: none; border-radius: 4px; }
.form-note { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- final cta ---------- */

.cta-band { background: var(--ink); color: #FFFFFF; }
.cta-inner {
  max-width: 1240px; margin: 0 auto; padding: 72px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.cta-copy { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.cta-copy p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-dark); }
.cta-copy strong { color: #FFFFFF; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-outline-light {
  background: transparent; color: #FFFFFF; border: 2px solid #FFFFFF;
  font-size: 20px; padding: 12px 24px;
}
.btn-outline-light:hover { background: #FFFFFF; color: var(--ink); transform: translateY(-2px); }

/* ---------- footer ---------- */

.site-footer { background: var(--ink); color: var(--on-dark); padding: 64px 24px 32px; }
.footer-grid {
  max-width: 1240px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-brand img { height: 48px; width: auto; align-self: flex-start; }
.footer-brand p { margin: 0; font-size: 15px; line-height: 1.6; }
.footer-brand address { font-style: normal; line-height: 1.6; font-size: 15px; }
.footer-phone {
  color: #FFFFFF; text-decoration: none; font-family: var(--heading);
  font-weight: 700; font-size: 20px; transition: color 200ms;
}
.footer-phone:hover { color: var(--blue-soft); }
.footer-email { color: var(--on-dark); text-decoration: none; font-size: 15px; transition: color 200ms; }
.footer-email:hover { color: #FFFFFF; }
.footer-hours { font-size: 15px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px;
  border: 1px solid var(--on-dark-line); border-radius: 6px; color: #FFFFFF; text-decoration: none;
  font-size: 14px; font-weight: 600; transition: background 200ms, border-color 200ms;
}
.footer-social a:hover { border-color: var(--blue); background: var(--blue); color: #FFFFFF; }

.site-footer h2 {
  font-family: var(--heading); font-size: 16px; font-weight: 700; color: #FFFFFF;
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 16px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.footer-list.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.footer-list a { color: var(--on-dark); text-decoration: none; }
.footer-list a:hover { color: #FFFFFF; }
.footer-list a.is-dim { color: var(--on-dark-dim); }
.footer-list a.is-all { color: var(--blue-soft); font-weight: 600; grid-column: 1 / -1; }
.footer-list li.full { grid-column: 1 / -1; }

.footer-legal {
  max-width: 1240px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid var(--on-dark-line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px;
  font-size: 13px; color: var(--on-dark-dim);
}
.footer-legal .links { display: flex; gap: 20px; }
.footer-legal a { color: var(--on-dark-dim); text-decoration: none; }
.footer-legal a:hover { color: #FFFFFF; }

/* ---------- sticky mobile bar ---------- */

.mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg); border-top: 1px solid var(--line); gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(48, 54, 54, 0.10);
}
.mobile-bar a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; font-family: var(--heading); font-weight: 700; font-size: 17px;
  min-height: 48px; border-radius: 6px;
}
.mobile-bar .primary { background: var(--blue); color: #FFFFFF; }
.mobile-bar .secondary { border: 2px solid var(--blue); color: var(--blue); }

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

@media (max-width: 1040px) {
  .main-nav { display: none; }
  .burger { display: inline-flex; }
  .header-social, .header-phone { display: none; }
}

@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero-copy { padding: 64px 24px 56px; }
  .hero h1 { font-size: 44px; }
  .h2 { font-size: 34px; }
  .card-grid-primary { grid-template-columns: 1fr; }
  .card-grid-secondary { grid-template-columns: 1fr 1fr; }
  .work-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
  .work-tile.span-2x2, .work-tile.span-2 { grid-column: auto; grid-row: auto; }
  .reviews-grid { grid-template-columns: 1fr; }
  .about-media { grid-template-columns: 1fr; }
  .split, .split.centered, .split.narrow-left, .split.even, .split.form { grid-template-columns: 1fr; gap: 40px; }
  .sticky-head { position: static; }
  .mobile-bar { display: flex; }
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .section, .section.tight { padding: 64px 24px 32px; }
  .section.flush-top { padding: 24px 24px 64px; }
  .band-alt .band-inner, .quote-band .band-inner { padding: 64px 24px; }
}

@media (max-width: 600px) {
  .form-card { padding: 20px; }
  .marquee-fade { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee-track { animation: none !important; flex-wrap: wrap; justify-content: center; width: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   SERVICE PAGES
   Added for /services/ and the 11 service pages. Same tokens.
   ============================================================ */

.breadcrumb { max-width: 1240px; margin: 0 auto; padding: 20px 24px 0; }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 8px; font-size: 14px; color: var(--muted-2);
}
.breadcrumb a { color: var(--muted-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .current { color: var(--ink); font-weight: 600; }

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

.svc-hero {
  max-width: 1240px; margin: 0 auto; padding: 36px 24px 72px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center;
}
.svc-hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.svc-hero-copy > * { animation: hvrUp 600ms var(--ease) both; }
.svc-hero-copy > *:nth-child(2) { animation-delay: 80ms; }
.svc-hero-copy > *:nth-child(3) { animation-delay: 160ms; }
.svc-hero-copy > *:nth-child(4) { animation-delay: 240ms; }
.svc-hero-copy > *:nth-child(5) { animation-delay: 320ms; }
.svc-eyebrow {
  font-family: var(--heading); font-weight: 600; font-size: 15px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.svc-hero h1 {
  font-size: 56px; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance;
}
.svc-hero-sub { font-size: 18px; line-height: 1.6; margin: 0; max-width: 560px; text-wrap: pretty; }
.chips-light { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips-light li {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 12px; font-size: 14px; font-weight: 600;
}
.svc-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-outline-blue {
  background: var(--bg); color: var(--blue); border: 2px solid var(--blue);
  font-size: 20px; padding: 12px 22px;
}
.btn-outline-blue:hover { background: var(--blue-tint); color: var(--blue); transform: translateY(-2px); }
.svc-hero-media {
  width: 100%; aspect-ratio: 5 / 4; border-radius: 14px; overflow: hidden;
  background: var(--bg-alt); animation: hvrIn 900ms var(--ease) both;
}
.svc-hero-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.svc-hero-media:hover img { transform: scale(1.03); }

/* Photo we do not have yet. Labelled, never a stock image. */
.photo-pending {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  padding: 32px; color: var(--muted-2); background: var(--bg-alt);
  border: 1px dashed var(--line);
}
.photo-pending strong { font-family: var(--heading); font-size: 17px; color: var(--ink); }
.photo-pending span { font-size: 14px; line-height: 1.55; max-width: 34ch; }

/* --- tinted band: what is included / everything else --- */

.band-tint { background: var(--bg-alt); border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.band-tint .band-inner { max-width: 1240px; margin: 0 auto; padding: 64px 24px; }
.h2-sm { font-family: var(--heading); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: -0.01em; }

.includes-list {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px 32px;
}
.includes-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.5; }
.includes-list svg { flex-shrink: 0; margin-top: 2px; }

.other-grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
}
.other-grid li {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 22px;
  display: flex; flex-direction: column; gap: 8px;
  transition: transform 300ms var(--ease), box-shadow 300ms;
}
.other-grid li:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(48, 54, 54, 0.12); }
.other-grid h3 { font-size: 20px; }
.other-grid p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); flex: 1; }
.other-grid a { color: var(--blue); font-weight: 700; font-size: 15px; text-decoration: none; }

/* --- long-form body --- */

.svc-body { max-width: 1240px; margin: 0 auto; padding: 88px 24px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.svc-body-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; }
.svc-body-aside h2 { font-size: 40px; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.svc-body-aside p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--muted); }
.why-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.why-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; font-weight: 600; }
.why-list svg { flex-shrink: 0; margin-top: 1px; }
.svc-body-main { display: flex; flex-direction: column; gap: 32px; }
.svc-body-main section { display: flex; flex-direction: column; gap: 10px; }
.svc-body-main h3 { font-size: 24px; line-height: 1.2; }
.svc-body-main p { margin: 0; font-size: 17px; line-height: 1.7; }
.svc-closing { padding-top: 8px; border-top: 1px solid var(--line); }
.svc-closing a { color: var(--blue); font-weight: 600; text-decoration: none; }

.svc-process { max-width: 1240px; margin: 0 auto; padding: 48px 24px 72px; }
.svc-process h2 { margin-bottom: 32px; }
.steps li { transition: border-color 300ms; }
.steps li:hover { border-top-color: var(--blue); }

/* --- galleries and lightbox --- */

.gallery-band { background: var(--ink); color: #FFFFFF; }
.gallery-band .band-inner { max-width: 1240px; margin: 0 auto; padding: 80px 24px; }
.gallery-band .eyebrow { color: var(--blue-soft); }
.gallery-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px;
}
.gallery-head .head-copy { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.gallery-head h2 { font-size: 38px; line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance; }
.gallery-head a { color: #FFFFFF; font-weight: 700; text-decoration: none; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; opacity: 0.85; transition: opacity 200ms; }
.gallery-head a:hover { opacity: 1; color: #FFFFFF; }

.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 12px; }
.gallery-item {
  grid-column: span 1; grid-row: span 1; padding: 0; border: 0;
  background: var(--on-dark-line); overflow: hidden; border-radius: 10px; cursor: zoom-in;
}
.gallery-item.is-lead { grid-column: span 2; grid-row: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease), opacity 300ms; }
.gallery-item:hover img { transform: scale(1.05); opacity: 0.92; }
.projects-grid .gallery-item { background: var(--line-2); }

.project-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.project-tab {
  font-family: var(--body); font-weight: 700; font-size: 14px; padding: 10px 16px;
  border-radius: 999px; cursor: pointer; border: 1px solid var(--line);
  background: var(--bg); color: var(--ink);
  transition: background 200ms, color 200ms, border-color 200ms;
}
.project-tab:hover { border-color: var(--blue); color: var(--blue); }
.project-tab[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #FFFFFF; }

.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(48, 54, 54, 0.94);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: hvrIn 250ms var(--ease) both;
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.lightbox-caption { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; color: var(--on-dark); font-size: 14px; padding: 0 24px; }
.lightbox button {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1);
  color: #FFFFFF; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 200ms;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.22); }
.lightbox .prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .next { right: 16px; top: 50%; transform: translateY(-50%); }
.lightbox .close { top: 16px; right: 16px; }

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

.related-section { max-width: 1240px; margin: 0 auto; padding: 80px 24px; }
.related-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.related-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--bg);
  transition: transform 300ms var(--ease), box-shadow 300ms, border-color 300ms;
}
.related-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(48, 54, 54, 0.12); border-color: var(--blue); color: var(--ink); }
.related-card h3 { font-size: 22px; }
.related-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); flex: 1; }
.related-card .cta { color: var(--blue); font-weight: 700; font-size: 15px; }

/* --- closing CTA with map --- */

.cta-map { background: var(--ink); color: #FFFFFF; }
.cta-map .band-inner {
  max-width: 1240px; margin: 0 auto; padding: 80px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.cta-map-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.cta-map-copy h2 { font-size: 42px; line-height: 1.05; letter-spacing: -0.01em; text-wrap: balance; }
.cta-map-copy p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--on-dark); }
.cta-map-copy strong { color: #FFFFFF; }
.cta-map-nap { font-size: 14px; color: var(--on-dark-dim); line-height: 1.6; }
.cta-map-frame { border-radius: 14px; overflow: hidden; border: 1px solid var(--on-dark-line); }
.cta-map-frame iframe { border: 0; width: 100%; height: 320px; }

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

.hub-intro { max-width: 1240px; margin: 0 auto; padding: 40px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.hub-intro h1 { font-size: 52px; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.hub-intro p { margin: 0; font-size: 18px; line-height: 1.7; max-width: 76ch; }

.hub-rows { display: flex; flex-direction: column; gap: 24px; }
.hub-row {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 0; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg);
  transition: transform 300ms var(--ease), box-shadow 300ms, border-color 300ms;
}
.hub-row:hover { transform: translateY(-3px); box-shadow: 0 20px 44px rgba(48, 54, 54, 0.12); border-color: var(--blue); color: var(--ink); }
.hub-row .media { overflow: hidden; aspect-ratio: 4 / 3; }
.hub-row .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.hub-row:hover .media img { transform: scale(1.04); }
.hub-row .body { padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.hub-row h3 { font-size: 28px; }
.hub-row p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.hub-row .cta { color: var(--blue); font-weight: 700; font-size: 15px; }
.hub-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.hub-tags li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.hub-tags .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

@media (max-width: 960px) {
  .svc-hero { grid-template-columns: 1fr; gap: 32px; padding: 24px 24px 48px; }
  .svc-hero h1 { font-size: 38px; }
  .h2-sm, .svc-body-aside h2, .gallery-head h2, .cta-map-copy h2 { font-size: 32px; }
  .hub-intro h1 { font-size: 40px; }
  .svc-body, .cta-map .band-inner, .hub-row { grid-template-columns: 1fr; }
  .svc-body { gap: 40px; padding: 56px 24px 32px; }
  .svc-body-aside { position: static; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .gallery-item.is-lead { grid-column: auto; grid-row: auto; }
  .band-tint .band-inner, .gallery-band .band-inner, .cta-map .band-inner { padding: 56px 24px; }
  .related-section, .svc-process { padding: 56px 24px; }
}

/* ---------- service area pages ---------- */

.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.area-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: var(--bg);
  transition: transform 300ms var(--ease), box-shadow 300ms, border-color 300ms;
}
.area-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(48, 54, 54, 0.12); border-color: var(--blue); color: var(--ink); }
.area-card-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.area-card h3 { font-size: 24px; }
.area-card .county { font-size: 13px; font-weight: 600; color: var(--muted-2); }
.area-card .distance { margin: 0; font-size: 14px; font-weight: 600; color: var(--blue); }
.area-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); flex: 1; }
.area-card .cta { color: var(--blue); font-weight: 700; font-size: 15px; }

/* ---------- legal, thank you, 404, blog ---------- */

.legal { max-width: 900px; margin: 0 auto; padding: 40px 24px 96px; }
.legal-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 40px; }
.legal-head h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.01em; }
.legal-head .updated { margin: 0; font-size: 14px; color: var(--muted-2); }
.legal-body { display: flex; flex-direction: column; gap: 36px; }
.legal-body section { display: flex; flex-direction: column; gap: 12px; }
.legal-body p { margin: 0; font-size: 17px; line-height: 1.7; max-width: 68ch; }

.thanks {
  max-width: 1240px; margin: 0 auto; padding: 64px 24px 96px;
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: start;
}
.thanks-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.thanks-copy h1 { font-size: 48px; line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.thanks-copy .steps { width: 100%; }
.thanks-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; background: var(--blue-tint);
}
.thanks-media { border-radius: 14px; overflow: hidden; }
.thanks-media img { width: 100%; height: auto; }

.notfound {
  max-width: 900px; margin: 0 auto; padding: 96px 24px;
  display: flex; flex-direction: column; gap: 18px; align-items: flex-start; text-align: left;
}
.notfound-code {
  font-family: var(--heading); font-weight: 700; font-size: 96px; line-height: 1;
  color: var(--blue-tint); letter-spacing: -0.02em;
}
.notfound h1 { font-size: 44px; line-height: 1.05; letter-spacing: -0.01em; }
.notfound-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px; width: 100%; margin: 12px 0;
}
.notfound-links h2 { font-size: 22px; }

.post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; }
.post-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg);
  transition: transform 300ms var(--ease), box-shadow 300ms;
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(48, 54, 54, 0.14); color: var(--ink); }
.post-card .media { overflow: hidden; aspect-ratio: 16 / 9; }
.post-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.post-card:hover .media img { transform: scale(1.04); }
.post-card .body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post-card h2 { font-size: 23px; line-height: 1.2; }
.post-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); flex: 1; }
.post-card .cta { color: var(--blue); font-weight: 700; font-size: 15px; }

.post { max-width: 1240px; margin: 0 auto; padding: 24px 24px 40px; }
.post-head { display: flex; flex-direction: column; gap: 14px; max-width: 760px; margin-bottom: 32px; }
.post-head h1 { font-size: 46px; line-height: 1.06; letter-spacing: -0.015em; text-wrap: balance; }
.post-hero { border-radius: 14px; aspect-ratio: 16 / 7; margin-bottom: 48px; }
.post-hero img { width: 100%; height: 100%; object-fit: cover; }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.post-body { display: flex; flex-direction: column; gap: 18px; max-width: 68ch; }
.post-body p { margin: 0; font-size: 17px; line-height: 1.75; }
.post-body h2 { margin-top: 20px; }
.post-body h3 { font-size: 21px; margin-top: 12px; }
.post-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.post-list li { font-size: 17px; line-height: 1.6; }
.post-aside { position: sticky; top: 100px; }
.estimate-card {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px; display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}
.estimate-card h2 { font-size: 21px; }
.estimate-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.estimate-card .btn { font-size: 17px; padding: 12px 18px; }

.faq-group { margin-bottom: 48px; }

@media (max-width: 960px) {
  .thanks, .post-layout { grid-template-columns: 1fr; gap: 32px; }
  .thanks { padding: 40px 24px 64px; }
  .thanks-copy h1, .notfound h1, .post-head h1, .legal-head h1 { font-size: 34px; }
  .post-aside { position: static; }
  .post-hero { aspect-ratio: 16 / 9; margin-bottom: 32px; }
  .notfound-code { font-size: 72px; }
}

/* ---------- GoHighLevel chat widget ---------- */
/* The widget is bottom-right and the sticky CTA bar owns the bottom of the
   screen on phones, so the bubble lands on top of the Call now button. Lift it
   clear of the bar. The homepage carries no widget at all, so this only
   applies to the other pages. GHL renders into a custom element; the selectors
   below cover the names it has used, and any that does not match simply does
   nothing. */
@media (max-width: 900px) {
  chat-widget,
  #chat-widget,
  .chat-widget,
  [id^="lc_text-widget"],
  [class*="lc_text-widget"] {
    bottom: 84px !important;
  }
}

/* ---------- mobile tap targets ---------- */
/* Standalone navigation links audited at 16 to 25px tall on a phone, which is
   under half the 44px a thumb needs. Only self-contained links and controls are
   enlarged; links that sit inside a sentence are deliberately left alone,
   because padding them out would break the line they are set in. */
@media (max-width: 900px) {
  .footer-list { gap: 0; }
  .footer-list a { display: block; padding: 11px 0; }
  .footer-list.two-col { gap: 0 16px; }

  .footer-legal a,
  .footer-email { display: inline-block; padding: 10px 0; }
  .footer-phone { display: inline-block; padding: 6px 0; }
  .footer-legal { gap: 4px 24px; }

  .breadcrumb ol { line-height: 1.2; }
  .breadcrumb a,
  .breadcrumb .current { display: inline-block; padding: 11px 0; }

  .also-row a,
  .area-pill,
  .arrow-link,
  .dd-foot a { min-height: 44px; display: inline-flex; align-items: center; }

  .project-tab { min-height: 44px; }

  /* The menu's own rows: 17px text with 11px padding is 39px, just short. */
  .mobile-nav a { padding: 13px 0; }

  /* Standalone links that sit alone on their line, so height is all that is
     missing. Breadcrumb crumbs stay as wide as their text; a two-word crumb
     cannot be padded sideways without looking like a button. */
  .map-foot a,
  .gallery-head > a,
  .footer-legal a,
  .breadcrumb a,
  .breadcrumb .current { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- mobile hero ---------- */
/* The hero was built for the desktop split: copy on the left half, so the scrim
   is a left-to-right gradient that fades to almost nothing on the right. On a
   phone the copy runs the full width, so the end of every line sat on bare
   video and the whole block read as murky. It was also 1194px tall on an 844px
   screen, which pushed every CTA off the first view. */
@media (max-width: 700px) {
  .hero-scrim-x {
    background: linear-gradient(180deg, rgba(48, 54, 54, 0.72) 0%, rgba(48, 54, 54, 0.80) 55%, rgba(48, 54, 54, 0.90) 100%);
  }
  .hero-scrim-y { height: 90px; }

  .hero-copy { padding: 28px 20px 36px; gap: 16px; }

  .offer-chip { font-size: 13px; padding: 7px 12px; line-height: 1.4; }
  .hero-eyebrow { font-size: 12px; letter-spacing: 0.08em; }
  /* Keeps the eyebrow on one line; the full version returns above 700px. */
  .hero-eyebrow .eyebrow-more { display: none; }

  .hero h1 { font-size: 34px; line-height: 1.05; }
  .hero-sub { font-size: 16px; line-height: 1.5; }
  /* The second sentence is desktop detail. Same copy at every width above this. */
  .hero-sub .sub-more { display: none; }

  .trust-chips { gap: 8px; }
  .trust-chips li { font-size: 12.5px; padding: 7px 10px; gap: 6px; }
  .trust-chips li svg { width: 14px; height: 14px; }

  .hero-cta { width: 100%; gap: 10px; }
  .hero-cta .btn { flex: 1 1 100%; justify-content: center; font-size: 18px; padding: 13px 18px; }

  /* The services grid sits directly below and says the same thing with pictures. */
  .hero-segments { display: none; }
  .hero-note { font-size: 13px; }
}

/* ---------- offer popup ---------- */
/* Card, not a takeover: on a phone it is a sheet with margins that clears the
   sticky CTA bar, so the page is still visible and the bar still works. */
.offer-pop[hidden] { display: none; }
.offer-pop { position: fixed; inset: 0; z-index: 120; }
.offer-pop-scrim { position: absolute; inset: 0; background: rgba(48, 54, 54, 0.55); }
.offer-pop-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - 40px)); background: var(--bg); color: var(--ink);
  border-radius: 14px; padding: 32px 28px 26px; box-shadow: 0 24px 60px rgba(48, 54, 54, 0.28);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.offer-pop-card h2 {
  font-family: var(--heading); font-size: 28px; line-height: 1.15; margin: 0;
  letter-spacing: -0.01em;
}
.offer-pop-card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.offer-pop-cta { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 4px; }
.offer-pop-cta .btn { flex: 1 1 auto; justify-content: center; font-size: 17px; padding: 12px 18px; }
.offer-pop-x {
  position: absolute; top: 10px; right: 10px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--muted-2); cursor: pointer; border-radius: 6px;
}
.offer-pop-x:hover { color: var(--ink); background: var(--bg-alt); }
.offer-pop-dismiss {
  background: none; border: 0; padding: 8px 0; min-height: 40px; cursor: pointer;
  color: var(--muted-2); font-family: var(--body); font-size: 14px; font-weight: 600;
  text-decoration: underline; align-self: center; margin: 0 auto;
}
.offer-pop-dismiss:hover { color: var(--ink); }
.offer-pop[data-open="true"] .offer-pop-card { animation: hvrPop 320ms var(--ease) both; }
.offer-pop[data-open="true"] .offer-pop-scrim { animation: hvrFade 220ms var(--ease) both; }
@keyframes hvrFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hvrPop { from { opacity: 0; transform: translate(-50%, calc(-50% + 16px)); }
                    to   { opacity: 1; transform: translate(-50%, -50%); } }

@media (max-width: 700px) {
  /* A sheet above the sticky bar, never the whole screen. */
  .offer-pop-card {
    top: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    left: 12px; right: 12px; width: auto; transform: none;
    padding: 26px 20px 20px;
  }
  .offer-pop-card h2 { font-size: 23px; }
  .offer-pop-card p { font-size: 15px; }
  .offer-pop-cta .btn { flex: 1 1 100%; }
  .offer-pop[data-open="true"] .offer-pop-card { animation: hvrSheet 320ms var(--ease) both; }
  @keyframes hvrSheet { from { opacity: 0; transform: translateY(20px); }
                        to   { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .offer-pop[data-open="true"] .offer-pop-card,
  .offer-pop[data-open="true"] .offer-pop-scrim { animation: none; }
}