/* =====================================================================
   THE LOOK. Colors and fonts for the whole site live here.
   build.js fills in the values from "look" in site.json, so most of the
   time you change site.json, not this file. The values below are the
   defaults if site.json leaves one out.
   check.js tests these color pairs for easy reading (contrast):
   text/bg, muted/bg, text/surface, muted/surface, primary/bg,
   primary/surface, on-primary/primary, on-accent/accent, on-banner/banner.
   ===================================================================== */
:root {
  --color-bg: #ffffff;         /* page background */
  --color-surface: #f4f6fb;    /* light band behind every other section */
  --color-text: #0b1a33;       /* main text */
  --color-muted: #465879;      /* small print, dates, captions */
  --color-primary: #1e3a8a;    /* links and main buttons */
  --color-on-primary: #ffffff; /* text on main buttons */
  --color-accent: #f97316;     /* the big Call button */
  --color-on-accent: #0b1a33;  /* text on the Call button */
  --color-banner: #0f2149;     /* top banner and footer */
  --color-on-banner: #ffffff;  /* text on the banner and footer */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radius: 14px;
  --wrap: 68rem;
}

/* ---------- Base (phone first) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.1; margin: 0 0 0.6em; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.4rem, 7vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
h3 { font-size: 1.3rem; }
p, ul, ol, dl, figure { margin: 0 0 1em; }
a { color: var(--color-primary); text-underline-offset: 0.15em; transition: color 0.15s; }
a:hover { text-decoration-thickness: 2px; }
[id] { scroll-margin-top: 1rem; }

/* Keyboard focus */
:focus-visible {
  outline: 3px solid var(--color-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--color-bg);
}
.hero :focus-visible, .site-footer :focus-visible {
  outline-color: var(--color-on-banner);
  box-shadow: 0 0 0 5px var(--color-banner);
}
main:focus { outline: none; }

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -5rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 700;
}
.skip-link:focus { top: 0.5rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 44rem; }
.muted { color: var(--color-muted); }
.small { font-size: 0.95rem; }

/* ---------- Header and menu ---------- */
.site-header { background: var(--color-bg); border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 5; }
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 1rem;
  row-gap: 0;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.brand { color: var(--color-text); font-weight: 700; font-size: 1.25rem; text-decoration: none; letter-spacing: -0.01em; }
.brand img { max-height: 3rem; width: auto; }
.header-call { font-weight: 700; white-space: nowrap; padding: 0.6rem 0; }
.site-nav { background: var(--color-surface); }
.nav-list {
  list-style: none;
  display: flex;
  gap: 0.25rem;
  margin: 0 auto;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  overflow-x: auto;
}
.nav-list a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.nav-list a:hover { background: rgba(0,0,0,0.04); text-decoration: none; }
.nav-list a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--color-primary); }
@media (min-width: 60rem) { .nav-list { flex-wrap: wrap; overflow: visible; } }

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 0; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 2rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-call {
  width: 100%;
  padding: 1.1rem 2rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 1.3rem;
  font-weight: 700;
}
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--color-primary); }
.hero .btn-outline { color: var(--color-on-banner); }
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); text-decoration: none; }
.btn:active { transform: translateY(0); box-shadow: none; }
@media (min-width: 40rem) { .btn-call { width: auto; } }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(145deg, var(--color-banner) 0%, color-mix(in srgb, var(--color-banner) 80%, var(--color-primary)) 100%);
  color: var(--color-on-banner);
  padding: 4.5rem 0 5rem;
}
.hero a:not(.btn) { color: var(--color-on-banner); }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.hero-photo { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 60rem) { .hero-has-photo .hero-grid { grid-template-columns: 1.1fr 1fr; } }
.lead { font-size: 1.2rem; max-width: 40rem; opacity: 0.92; line-height: 1.6; }
.eyebrow { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 0.75rem; opacity: 0.75; }
.page-head { background: var(--color-surface); padding: 3rem 0 2.5rem; }

/* Trust bar: the three selling points under the Call button */
.trust-bar {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.85;
}
.trust-bar li { display: flex; align-items: center; gap: 0.5rem; }
.trust-bar li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* ---------- Sections ---------- */
.section { padding: 5rem 0; }
.section h2 { margin-bottom: 1.75rem; }
.section-alt { background: var(--color-surface); }
.more { font-weight: 600; }

/* ---------- Feature grid (services on home) ---------- */
.feature-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
.feature-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 2rem 2rem 2.25rem;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.feature-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 1.25rem;
}
.feature-card h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.feature-card h3 a { color: var(--color-text); text-decoration: none; }
.feature-card h3 a:hover { color: var(--color-primary); }
.feature-card p { color: var(--color-muted); margin: 0; line-height: 1.6; }

/* ---------- Why grid ---------- */
.why-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
.why-item {
  padding: 1.75rem;
  border-radius: var(--radius);
  background: var(--color-bg);
  border-left: 4px solid var(--color-primary);
}
.section-alt .why-item { background: var(--color-bg); }
.why-item h3 { font-size: 1.15rem; margin-bottom: 0.4rem; color: var(--color-text); }
.why-item p { margin: 0; color: var(--color-muted); font-size: 0.95rem; line-height: 1.6; }

/* ---------- Cards (services page, etc.) ---------- */
.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.06);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card-body { padding: 1.25rem 1.5rem 1.5rem; }
.card-body p:last-child { margin-bottom: 0; }
.service-block { margin-bottom: 2.5rem; }
.service-block img, .article img, .about-photo { border-radius: var(--radius); margin-bottom: 1rem; }

/* ---------- FAQ ---------- */
.faq-list details { border-bottom: 1px solid rgba(0,0,0,0.08); padding: 1.1rem 0; }
.faq-list summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; transition: color 0.15s; }
.faq-list summary:hover { color: var(--color-primary); }
.faq-list details p { margin: 0.5rem 0 0; }
.faq-page h2 { font-size: 1.25rem; margin-top: 2rem; }

/* ---------- Reviews ---------- */
.review-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 60rem) { .review-list { grid-template-columns: repeat(3, 1fr); } }
.review {
  margin: 0;
  padding: 1.5rem;
  background: var(--color-bg);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.review blockquote { margin: 0 0 0.75rem; }
.review figcaption { color: var(--color-muted); font-size: 0.95rem; }

.area-list { columns: 2 12rem; padding-left: 1.2rem; }

/* ---------- Gallery ---------- */
.gallery {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.gallery figure { margin: 0; }
.gallery img { border-radius: var(--radius); width: 100%; }
.gallery figcaption { color: var(--color-muted); font-size: 0.95rem; padding-top: 0.4rem; }

/* ---------- Contact ---------- */
.facts dt { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-top: 1rem; }
.facts dt:first-child { margin-top: 0; }
.facts dd { margin: 0 0 1rem; }
.hours { list-style: none; padding: 0; }

.box { background: var(--color-surface); border-radius: var(--radius); padding: 1.75rem; margin: 2rem 0 0; border: 1px solid rgba(0,0,0,0.04); }
.section-alt .box { background: var(--color-bg); }
.contact-grid { display: grid; gap: 2rem; }
@media (min-width: 50rem) { .contact-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Articles ---------- */
.article-list { list-style: none; padding: 0; }
.article-list li { padding: 1.5rem 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.article-meta { color: var(--color-muted); }
.prose h2 { font-size: 1.4rem; margin-top: 2rem; }
.prose li { margin-bottom: 0.4rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-banner); color: var(--color-on-banner); padding: 4rem 0 2rem; font-size: 0.95rem; }
.site-footer a { color: var(--color-on-banner); }
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.foot-h { font-size: 1rem; margin-bottom: 0.5rem; }
.footer-list { list-style: none; padding: 0; }
.footer-list li { margin-bottom: 0.35rem; }
.foot-bottom { padding-top: 2rem; margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.12); }
.sample-note { display: inline-block; padding: 0.5rem 0.75rem; border: 2px dashed currentColor; font-weight: 700; }

/* Preview mode: shown on every page of a draft made for a prospect. */
.preview-banner { background: #fff4c2; color: #3a2d00; border-bottom: 2px dashed #3a2d00; padding: 0.5rem 0; font-size: 0.9rem; font-weight: 600; text-align: center; }