/* Service & area pages (/purchase/, /fha-loans/, /ne-portland-mortgage-broker/, ...) */

.svc-hero {
  padding: calc(var(--nav-height) + 48px) 0 44px;
  background: linear-gradient(160deg, rgba(147,214,215,.55) 0%, var(--color-teal-pale) 55%, var(--color-white) 100%);
  border-bottom: 1px solid var(--color-border);
}
.svc-crumbs { font-size: .82rem; color: var(--color-text-secondary); margin-bottom: 18px; }
.svc-crumbs a { color: var(--color-text-secondary); text-decoration: none; }
.svc-crumbs a:hover { color: var(--color-teal-mid); text-decoration: underline; }
.svc-crumbs span[aria-hidden] { margin: 0 6px; opacity: .6; }
.svc-hero h1 {
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.12; letter-spacing: -.02em;
  color: var(--color-dark); margin: 0 0 16px; max-width: 18em;
}
.svc-lede { font-size: 1.08rem; line-height: 1.65; color: var(--color-text-secondary); max-width: 40em; margin: 0 0 26px; }
.svc-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.svc-nap { margin-top: 22px; font-size: .88rem; color: var(--color-text-secondary); }
.svc-nap a { color: var(--color-dark); font-weight: 600; text-decoration: none; }
.svc-nap a:hover { color: var(--color-teal-mid); }

.svc-body { padding: 48px 0 24px; }
.svc-article { max-width: 760px; margin: 0 auto; color: var(--color-text-primary); font-size: 1.02rem; line-height: 1.75; }
.svc-article p { margin: 0 0 18px; color: var(--color-text-secondary); }
.svc-article h2 {
  font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.25; color: var(--color-dark);
  margin: 44px 0 14px; letter-spacing: -.01em;
}
.svc-article h3 { font-size: 1.08rem; color: var(--color-dark); margin: 26px 0 8px; }
.svc-article ul, .svc-article ol { margin: 0 0 22px; padding-left: 1.3em; color: var(--color-text-secondary); }
.svc-article li { margin-bottom: 10px; padding-left: 4px; }
.svc-article li strong { color: var(--color-dark); }
.svc-article a { color: var(--color-teal-mid); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.svc-article a:hover { color: var(--color-dark); }

/* FAQ block: h3 + answer get a card look */
.svc-faq { margin-top: 10px; }
.svc-faq h3 {
  margin: 14px 0 0; padding: 16px 18px 4px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-bottom: none; border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.svc-faq h3 + p {
  margin: 0; padding: 4px 18px 16px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.svc-related {
  margin: 30px 0 0; padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--color-teal-pale); border: 1px solid var(--color-teal-light); font-size: .95rem;
}

.svc-article .cta {
  margin: 40px 0 10px; padding: 28px 26px; border-radius: var(--radius-lg);
  background: var(--color-dark); color: #fff;
}
.svc-article .cta h2 { color: #fff; margin-top: 0; }
.svc-article .cta p { color: rgba(255,255,255,.82); }
.svc-article .cta p:last-child { margin-bottom: 0; }
.svc-article .cta a { color: var(--color-teal); }
.svc-article .cta a:hover { color: #fff; }
.svc-article .cta strong { color: #fff; }

.svc-more { padding: 8px 0 64px; }
.svc-more h2 { text-align: center; font-size: 1.3rem; color: var(--color-dark); margin: 0 0 18px; }
.svc-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; max-width: 900px; margin: 0 auto; }
.svc-links a {
  display: block; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-white);
  border: 1px solid var(--color-border); color: var(--color-dark); font-weight: 600; font-size: .92rem; text-decoration: none;
  transition: border-color .15s, background .15s;
}
.svc-links a:hover { border-color: var(--color-teal-mid); background: var(--color-teal-pale); }
.svc-links a span { display: block; font-weight: 400; font-size: .78rem; color: var(--color-text-secondary); margin-top: 2px; }

@media (max-width: 600px) {
  .svc-hero { padding: calc(var(--nav-height) + 28px) 0 32px; }
  .svc-hero-btns .btn { width: 100%; justify-content: center; text-align: center; }
  .svc-article .cta { padding: 22px 18px; }
}

/* Homepage: "Learn more" links on service cards and the areas row */
.svc-card-link { display: inline-block; margin-top: 10px; font-size: .86rem; font-weight: 700; color: var(--color-teal-mid); text-decoration: none; }
.svc-card-link:hover { color: var(--color-dark); text-decoration: underline; }
.svc-card h3 a { color: inherit; text-decoration: none; }
.svc-card h3 a:hover { color: var(--color-teal-mid); }
.home-nap { margin-top: 18px; font-size: .9rem; color: var(--color-text-secondary); }
.home-nap a { color: var(--color-dark); font-weight: 600; text-decoration: none; }