/* ---- Brand overrides on top of Simple.css ---- */
:root {
  --brand: #588CB5;
  --brand-dark: #3F6E94;
  --accent: var(--brand-dark);
  --accent-hover: #2E5677;
  --accent-text: #ffffff;
  --accent-bg: #EEF4F9;
  --marked: #DCE8F2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8DB6D6;
    --accent-hover: #B3D0E6;
    --accent-text: #0f1a24;
    --accent-bg: #1c2731;
    --marked: #2b3d4d;
  }
}

/* Header: full-width brand band with the logo */
body > header {
  background-color: var(--brand);
  color: #fff;
  border-bottom: none;
  padding-block: 2.5rem 2rem;
}
body > header h1.brand { margin: 0; font-size: inherit; line-height: 1; }
body > header .logo {
  display: block;
  width: min(100%, 34rem);
  height: auto;
  margin: 0 auto 1.25rem;
}
body > header .eyebrow {
  margin: 0 auto .5rem;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
body > header .tagline {
  font-size: 1.15rem;
  max-width: 38rem;
  margin: 0 auto 1.5rem;
  opacity: .95;
  line-height: 1.5;
}
body > header nav a,
body > header nav a:visited {
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
body > header nav a:hover,
body > header nav a[aria-current] {
  color: var(--brand);
  background: #fff;
  border-color: #fff;
}

main { padding-top: 1.5rem; }
h2 { color: var(--accent); margin-top: 3rem; }

.lead { font-size: 1.15rem; }

/* Services grid */
.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.services article {
  margin: 0;
  border-top: 4px solid var(--brand);
}
.services h3 { margin-top: 0; font-size: 1.2rem; }
.services p { margin-bottom: 0; }

/* Contact cards */
.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.contact article {
  margin: 0;
  text-align: center;
  border-top: 4px solid var(--brand);
}
.contact h3 {
  margin: 0 auto .5rem;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-light);
}
.contact .big { font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }
.contact address { font-style: normal; margin: 0; }
.contact .visit { grid-column: 1 / -1; }
.contact .small { font-size: .9rem; margin: .5rem 0 0; }

.cta { text-align: center; margin: 2.5rem 0 0; }

body > footer { font-size: .9rem; }

/* ---- Service cards link to their pages ---- */
.services article { display: flex; flex-direction: column; position: relative; }
.services article p { flex: 1; }
.services h3 a { color: inherit; text-decoration: none; }
.services h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.services article:hover { border-color: var(--accent); }
.services article:hover h3 a { color: var(--accent); }
.services .more { margin-top: .75rem; font-size: .9rem; color: var(--accent); }

/* ---- Inner pages ---- */
body > header.compact { padding-block: 1.5rem 1.25rem; }
body > header.compact .logo { width: min(100%, 20rem); margin-bottom: 1rem; }
.breadcrumb { font-size: .9rem; color: var(--text-light); margin: 0 0 1rem; }
.breadcrumb a { color: var(--text-light); }
main > h1 { color: var(--accent); font-size: 2.4rem; line-height: 1.2; margin: 0 0 1rem; }
.steps { padding-left: 1.25rem; }
.steps li { margin-bottom: .75rem; }
.callout {
  float: none;
  font-size: inherit;
  width: auto;
  margin: 3rem 0 0;
  padding: 1.5rem;
  border-radius: var(--standard-border-radius);
  background: var(--accent-bg);
  border-left: 4px solid var(--brand);
}
.callout h2 { margin-top: 0; }
.callout p { font-size: inherit; }
.related .services { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.related .services h3 { font-size: 1.05rem; }
.callout .big { font-size: 1.2rem; margin-bottom: 0; }

/* ---- Footer service links ---- */
body > footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; padding: 0; list-style: none; }