/* Devlin Services — global stylesheet
   Shared by every page (index.html, services.html, about.html, service-area.html, contact.html).
   Layout: variables -> base elements -> buttons -> header/nav -> hero -> reusable sections -> page-specific blocks -> footer.
   To change the site's colors, edit the variables below — everything else references them. */

:root {
  --blue-deep: #0B3D66;
  --blue-deep-dark: #082C4A;
  --blue-accent: #2EA8E0;
  --blue-accent-dark: #1C8CC0;
  --bg: #FFFFFF;
  --bg-tint: #EAF3FA;
  --text: #2E3A46;
  --text-muted: #7C8894;
  /* Outline for the white content boxes — cards, service blocks, the quote
     form. Deliberately the same slate as --text: the old #DCE9F2 was almost
     invisible against a white background. */
  --border-card: #2E3A46;
  --placeholder-bg: #E3E7EA;
  --placeholder-border: #C3CBD1;
  --placeholder-text: #7C8894;
  --radius: 6px;
  --max-width: 1140px;
  --font: Helvetica, Arial, "Segoe UI", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

/* Smooth scrolling is applied per-scroll from js/main.js, not globally.
   Set here, it also animated the browser's own jump to a #fragment on page
   load — and that animation finished *after* the script had centred the
   target, dragging it back under the sticky header. */

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blue-accent-dark);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* One size per heading level, set once here, so every page's h1 matches
   every other page's h1 (same for h2/h3) — nothing below should set its
   own font-size on an h1-h4, only color/spacing overrides where needed. */
h1, h2, h3, h4 {
  color: var(--blue-deep);
  line-height: 1.2;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.9rem; }

p {
  margin: 0 0 1em;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

/* Buttons */

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85em 1.6em;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--blue-deep);
  color: #fff;
}

.btn-primary:hover {
  background: var(--blue-deep-dark);
}

.btn-accent {
  background: var(--blue-accent);
  color: #fff;
}

.btn-accent:hover {
  background: var(--blue-accent-dark);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn-outline:hover {
  background: #fff;
  color: var(--blue-deep);
}

.btn-small {
  font-size: 0.875rem;
  padding: 0.55em 1.1em;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--placeholder-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.site-logo {
  display: block;
  height: 52px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--blue-accent-dark);
  text-decoration: none;
}

.nav-cta {
  display: none;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--blue-deep);
  border-radius: 2px;
}

@media (min-width: 860px) {
  .nav-cta {
    display: inline-block;
  }
}

@media (max-width: 859px) {
  /* The off-canvas nav panel is position:fixed, so it takes no space in this
     flex row — that left only the logo and hamburger as flex children,
     pushed to opposite edges by justify-content:space-between and leaving an
     awkward gap. Centering the logo and pulling the hamburger out of flow
     (pinned to the right) fixes that. */
  .header-inner {
    position: relative;
    justify-content: center;
  }

  .nav-toggle {
    display: flex;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
  }

  .main-nav {
    position: fixed;
    top: 61px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 24px 20px;
    gap: 20px;
    transform: translateX(100%);
    transition: transform 0.2s ease;
    overflow-y: auto;
  }

  .main-nav.is-open {
    transform: translateX(0);
  }

  .nav-links {
    flex-direction: column;
    gap: 4px;
  }

  .nav-links a {
    display: block;
    padding: 12px 4px;
    border-bottom: 1px solid var(--bg-tint);
  }

  .main-nav .nav-cta {
    display: block;
    margin-top: 8px;
  }
}

/* Hero */

.hero {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-deep-dark) 100%);
  color: #fff;
  padding: 56px 0 48px;
}

.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 36px;
}

.hero-copy {
  flex: 1 1 420px;
}

/* Any h1 directly inside .hero (page-title heroes on services/service-area/
   contact, which skip the .hero-copy wrapper) still needs to override the
   global dark-blue heading color — otherwise it's nearly invisible against
   the dark blue hero background. */
.hero h1 {
  color: #fff;
}

.hero-copy h1 {
  color: #fff;
  margin-bottom: 0.4em;
}

.hero-subhead {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--blue-accent);
  margin-bottom: 0.5em;
}

.hero-tagline {
  color: #D7E6F2;
  font-size: 1.05rem;
  margin-bottom: 1.4em;
}

.hero-media {
  flex: 1 1 320px;
}

/* Placeholder boxes for missing photos/logos */

.placeholder-box {
  background: var(--placeholder-bg);
  border: 2px dashed var(--placeholder-border);
  border-radius: var(--radius);
  color: var(--placeholder-text);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  font-style: italic;
  padding: 20px;
  min-height: 220px;
}

.placeholder-box.small {
  min-height: 110px;
  font-size: 0.8rem;
}

/* Real photos swapped in for placeholder boxes */

.photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.category-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 28px;
}

/* Trust strip */

.trust-strip {
  background: var(--bg-tint);
  padding: 20px 0;
  border-bottom: 1px solid #DCE9F2;
}

.trust-strip ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
  text-align: center;
}

.trust-strip li {
  font-weight: 700;
  color: var(--blue-deep);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trust-strip svg {
  flex-shrink: 0;
}

/* Sections */

.section {
  padding: 56px 0;
}

.section-tint {
  background: var(--bg-tint);
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
}

.section-header p {
  color: var(--text-muted);
}

/* Service overview cards */

/* Flex rather than grid so a part-full last row centres — same reason as
   .service-items below. The home page has five cards against three columns,
   so there is always a leftover row. */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.card-grid > * {
  flex: 0 1 100%;
}

@media (min-width: 560px) {
  .card-grid > * {
    flex-basis: calc(50% - 12px);
  }
}

@media (min-width: 900px) {
  .card-grid > * {
    flex-basis: calc(33.333% - 16px);
  }
}

.card {
  background: #fff;
  border: 2px solid var(--border-card);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.card:hover {
  box-shadow: 0 6px 18px rgba(11, 61, 102, 0.12);
  transform: translateY(-2px);
}

.card-icon {
  margin-bottom: 14px;
}

.card h3 {
  margin-bottom: 0.4em;
}

.card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* Snow spotlight section (homepage) */

.spotlight {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

.spotlight-copy {
  flex: 1 1 420px;
}

.spotlight-media {
  flex: 1 1 320px;
}

.spotlight ul {
  padding-left: 1.2em;
  margin-bottom: 1.5em;
}

.spotlight li {
  margin-bottom: 0.5em;
}

/* Anchor targets (the Services menu links straight to these). js/main.js
   centres them in the window; this is the no-JS fallback, and it also keeps
   the browser's own initial jump from tucking the target under the sticky
   header before the script re-centres it. */
.service-item,
section[id] {
  scroll-margin-top: 90px;
}

/* Service list blocks (Our Services page) */

.service-category {
  padding: 48px 0;
  border-bottom: 1px solid #DCE9F2;
}

.service-category:last-child {
  border-bottom: none;
}

.service-category-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.service-category-header h2 {
  margin: 0;
}

/* Flexbox rather than grid specifically so a part-full last row centres.
   These pages have 4 or 5 services against 3 columns, so there is almost
   always an orphan row; with grid it sat against the left edge and read as
   a mistake. Fixed flex-basis (no grow) keeps every card the same width, and
   justify-content centres whatever is left over. */
.service-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.service-item {
  flex: 0 1 100%;
  background: #fff;
  border: 2px solid var(--border-card);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 560px) {
  .service-item {
    flex-basis: calc(50% - 10px);
  }
}

@media (min-width: 900px) {
  .service-item {
    flex-basis: calc(33.333% - 14px);
  }
}

.service-item h3 {
  margin: 0;
}

.service-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
  flex-grow: 1;
}

/* Why choose us list */

/* Deliberately 2 x 2 rather than auto-fit: four reasons squeezed into one row
   gave each about 240px, which broke every heading onto two lines. Two wider
   cards per row reads better and matches the centred card style used on the
   home page and the services hub. */
.reasons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 700px) {
  .reasons-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.reason {
  background: #fff;
  border: 2px solid var(--border-card);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.reason:hover {
  box-shadow: 0 6px 18px rgba(11, 61, 102, 0.12);
  transform: translateY(-2px);
}

.reason-icon {
  margin-bottom: 14px;
}

.reason h3 {
  font-size: 1.25rem;
  margin-bottom: 0.45em;
}

.reason p {
  color: var(--text-muted);
  font-size: 1rem;
  margin: 0;
}

/* Notable clients placeholder grid — currently unused on the page (see
   "Who We Serve" below), kept here for when Ryan is ready to add real
   client logos. See README.md "Notable client names/logos". */

.client-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

.client-tile {
  background: var(--placeholder-bg);
  border: 2px dashed var(--placeholder-border);
  border-radius: var(--radius);
  color: var(--placeholder-text);
  font-size: 0.8rem;
  font-style: italic;
  text-align: center;
  padding: 20px 10px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Who We Serve — client-type tags (property types, not named clients) */

.client-type-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.client-type {
  background: var(--bg);
  border: 1px solid #DCE9F2;
  border-radius: 999px;
  color: var(--blue-deep);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 10px 20px;
}

/* Service area map */

.map-embed {
  border-radius: var(--radius);
  overflow: hidden;
  border: 2px solid var(--border-card);
}

.map-embed iframe {
  width: 100%;
  height: 320px;
  border: 0;
  display: block;
}

/* Contact page */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 36px;
  align-items: start;
}

.contact-info-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-info-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 1rem;
}

.contact-info-list strong {
  display: block;
  color: var(--blue-deep);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}

.contact-info-list svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Quote form (contact.html) — submits to Web3Forms, see js/main.js for the
   fetch-based submit handler and README.md for setup instructions. */

.quote-form-card {
  background: #fff;
  border: 2px solid var(--border-card);
  border-radius: var(--radius);
  padding: 28px;
}

.form-row {
  margin-bottom: 18px;
}

.form-row label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--blue-deep);
  margin-bottom: 6px;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  padding: 0.7em 0.85em;
  border: 1px solid var(--placeholder-border);
  border-radius: var(--radius);
  background: #fff;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--blue-accent);
  box-shadow: 0 0 0 3px rgba(46, 168, 224, 0.15);
}

.form-row textarea {
  resize: vertical;
  min-height: 100px;
}

/* Honeypot spam trap — real visitors never see or fill this field in.
   Do not use display:none (some spam bots skip hidden fields correctly
   and ignore the trap); off-screen positioning catches more bots. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
  font-weight: 600;
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status-success {
  background: #E5F6E9;
  color: #1E6B33;
  border: 1px solid #BFE6C9;
}

.form-status-error {
  background: #FCE9E9;
  color: #99231E;
  border: 1px solid #F3C6C4;
}

/* CTA band */

.cta-band {
  background: var(--blue-deep);
  color: #fff;
  padding: 48px 0;
  text-align: center;
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  color: #D7E6F2;
  margin-bottom: 1.5em;
}

/* Footer */

.site-footer {
  background: var(--blue-deep-dark);
  color: #C9D8E4;
  padding: 40px 0 24px;
  font-size: 0.9rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
  margin-bottom: 28px;
}

.footer-grid h4 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.8em;
}

.footer-grid ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-grid li {
  margin-bottom: 8px;
}

.footer-grid a {
  color: #C9D8E4;
}

.footer-grid a:hover {
  color: #fff;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  text-align: center;
  font-size: 0.8rem;
  color: #8FA6BA;
}

.footer-bottom a {
  color: #8FA6BA;
}

.footer-bottom a:hover {
  color: #fff;
}

/* Privacy policy page — plain text content, so a narrower reading
   width keeps paragraphs from stretching edge-to-edge on wide screens. */
.policy-content {
  max-width: 760px;
  margin: 0 auto;
}

.policy-content h2 {
  margin-top: 1.6em;
}

.policy-content ul {
  margin: 0 0 1em;
}

.policy-content li {
  margin-bottom: 0.4em;
}


/* ============================================================
   Services mega menu (header)
   Desktop: the panel drops out of the sticky header, full width.
   Mobile:  the same markup collapses into an accordion inside the
            off-canvas nav — see the max-width block further down.
   ============================================================ */

.has-mega {
  /* Left static on purpose: the .mega-panel below is absolutely
     positioned against .site-header (the nearest positioned ancestor)
     so it can span the full window width, not just this nav item. */
  position: static;
}

.nav-mega-toggle {
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-mega-toggle:hover,
.nav-mega-toggle.active,
.has-mega.is-open > .nav-mega-toggle {
  color: var(--blue-accent-dark);
}

.nav-chevron {
  transition: transform 0.15s ease;
}

.has-mega.is-open .nav-chevron {
  transform: rotate(180deg);
}

/* The panel opens below the whole header, which leaves ~26px of dead space
   between the bottom of this button and the top of the panel. Without a
   bridge across it the pointer leaves .has-mega on the way down and the
   panel closes before you can reach it. Kept narrower than the 20px nav gap
   so it can't swallow hovers on the neighbouring nav items, and only present
   while the panel is actually open. */
.nav-mega-toggle {
  position: relative;
}

.has-mega.is-open .nav-mega-toggle::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  height: 34px;
}

.mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--blue-deep);
  color: #fff;
  border-top: 3px solid var(--blue-accent);
  box-shadow: 0 14px 30px rgba(11, 61, 102, 0.22);
}

.mega-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 20px 32px;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 34px;
}

.mega-featured {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mega-panel .mega-card {
  display: block;
  color: #fff;
}

.mega-panel .mega-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 3px solid var(--blue-accent);
  border-radius: 4px 4px 0 0;
}

.mega-panel .mega-card span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 700;
  font-size: 0.98rem;
  padding-top: 9px;
}

.mega-panel .mega-card:hover {
  text-decoration: none;
}

.mega-panel .mega-card:hover span {
  color: var(--blue-accent);
}

.mega-panel .mega-all-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--blue-accent);
  font-weight: 700;
  font-size: 0.9rem;
  padding-top: 4px;
}

.mega-panel .mega-all-link:hover {
  color: #fff;
  text-decoration: none;
}

.mega-panel .mega-all-link:hover .mega-arrow {
  transform: translateX(3px);
}

.mega-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 26px;
}

.mega-panel .mega-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  margin-bottom: 4px;
}

.mega-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mega-panel .mega-col li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #D7E6F2;
  font-size: 0.88rem;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mega-panel .mega-col a:hover,
.mega-panel .mega-col-head:hover {
  color: #fff;
  text-decoration: none;
}

.mega-arrow {
  color: var(--blue-accent);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.mega-panel .mega-col a:hover .mega-arrow,
.mega-panel .mega-card:hover .mega-arrow {
  transform: translateX(3px);
}

/* ============================================================
   Service hub cards (services.html)
   ============================================================ */

.service-hub-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.service-hub-card {
  flex: 0 1 100%;
}

@media (min-width: 620px) {
  .service-hub-card {
    flex-basis: calc(50% - 12px);
  }
}

@media (min-width: 980px) {
  .service-hub-card {
    flex-basis: calc(33.333% - 16px);
  }
}

.service-hub-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid var(--border-card);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--text);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.service-hub-card:hover {
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(11, 61, 102, 0.12);
  transform: translateY(-2px);
}

.service-hub-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.service-hub-body {
  padding: 22px 22px 24px;
}

.service-hub-body h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--blue-deep);
  margin-bottom: 0.5em;
}

.service-hub-body h3 .mega-arrow {
  color: var(--blue-accent-dark);
}

.service-hub-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.service-hub-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}

.service-hub-body li {
  padding: 6px 0;
  border-top: 1px solid var(--bg-tint);
  color: var(--text-muted);
}

/* ============================================================
   Landing page bits
   ============================================================ */

/* Short SEO lead paragraph under the hero on the home page. */
.page-intro {
  padding: 40px 0 0;
}

.page-intro p {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  font-size: 1.05rem;
}

/* Run of town names at the bottom of each service landing page. */
.town-strip {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 820px;
  margin: 0 auto 20px;
  line-height: 2;
}

/* Town lists inside the county cards on service-area.html. These are pills,
   not a bulleted list — list-style:none plus padding:0 kills both the marker
   and the indent the browser would otherwise add. */
.town-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* Link lists on the location pages — how the snow removal page reaches the
   county pages, and each county page its towns. */
.area-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.area-links li {
  border-bottom: 1px solid var(--bg-tint);
}

.area-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px;
  font-weight: 600;
  color: var(--blue-deep);
}

.area-links a:hover {
  color: var(--blue-accent-dark);
  text-decoration: none;
}

.area-links a:hover .mega-arrow {
  transform: translateX(3px);
}

/* Sits where a town list would go on cards that don't have one yet. */
.area-note {
  color: var(--text-muted);
  font-size: 0.92rem;
  margin: 6px 0 0;
}

.town-list li {
  background: var(--bg-tint);
  border-radius: 999px;
  padding: 5px 13px;
  font-size: 0.82rem;
  color: var(--blue-deep);
  font-weight: 600;
}

/* ============================================================
   Mega menu — mobile (folds into the off-canvas nav as an accordion)
   ============================================================ */

@media (max-width: 859px) {
  .nav-mega-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 12px 4px;
    border-bottom: 1px solid var(--bg-tint);
  }

  .has-mega.is-open .nav-mega-toggle::after {
    display: none;
  }

  .mega-panel {
    position: static;
    background: transparent;
    border-top: 0;
    box-shadow: none;
  }

  .mega-inner {
    display: block;
    max-width: none;
    padding: 0 0 8px;
  }

  /* The two photo cards eat most of a phone screen and push the actual
     service links below the fold — the links alone are more useful here.
     The "View All Services" link stays, since it's the only route to the
     services hub from inside the menu. */
  .mega-featured {
    display: block;
  }

  .mega-panel .mega-card {
    display: none;
  }

  .mega-panel .mega-all-link {
    color: var(--blue-accent-dark);
    padding: 12px 4px;
    border-bottom: 1px solid var(--bg-tint);
  }

  .mega-panel .mega-all-link:hover {
    color: var(--blue-deep);
  }

  .mega-cols {
    display: block;
  }

  .mega-panel .mega-col-head {
    color: var(--blue-deep);
    border-bottom-color: var(--bg-tint);
    padding: 12px 4px 8px;
    margin-bottom: 0;
  }

  .mega-panel .mega-col li a {
    color: var(--text);
    padding: 10px 4px 10px 18px;
    border-bottom: 1px solid var(--bg-tint);
  }

  .mega-panel .mega-col a:hover,
  .mega-panel .mega-col-head:hover {
    color: var(--blue-accent-dark);
  }
}