/* Services page only. Sitewide chrome/primitives live in base.css, nav.css, footer.css. */

/* PAGE HERO — simpler than the homepage hero: eyebrow + h1, no illustration */
.svc-hero { position: relative; overflow: hidden; background: var(--obsidian); color: var(--ivory); padding: 100px 0 80px; }
.svc-hero h1 { margin-top: 18px; max-width: 780px; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.16; color: var(--ivory); font-weight: 500; }

/* BUILD BLOCKS — one per service, alternating background, hairline-divided two-column layout */
/* Top-only: was the exact "double gap between build blocks" bug — .build had
   its own full padding: 110px 0, which stacked with the next .build's own
   110px top regardless of the base.css section{} fix. */
.build { padding: 110px 0 0; border-top: 1px solid var(--hair); }
.build.on-parchment { background: var(--parchment); }
.build-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: start; }
.build-copy h3 { margin-top: 14px; font-size: clamp(24px, 2.6vw, 30px); color: var(--obsidian); }
.build-lede {
  margin-top: 18px;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--bronze);
  line-height: 1.4;
}
.build-copy p.body { margin-top: 18px; color: var(--stone); font-size: 16px; line-height: 1.9; max-width: 520px; }
.build-copy p.body b { color: var(--obsidian); font-weight: 600; }
.build-for { margin-top: 24px; max-width: 520px; }
.build-for .label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
.build-for p { margin-top: 8px; color: var(--stone); font-size: 15px; line-height: 1.8; }
.build-copy .btn { margin-top: 32px; }

.build-includes .label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--stone); }
.build-includes ul { list-style: none; margin-top: 18px; border-top: 1px solid var(--hair); }
.build-includes li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hair);
  font-size: 15px;
  color: var(--obsidian);
}

/* MANAGED CARE TEASER */
/* Last section on the page, before the footer — needs its own bottom padding
   now that the generic `section{}` rule (base.css) only supplies top padding. */
.care { background: var(--obsidian); color: var(--ivory); padding-bottom: 110px; }
.care-lede { margin-top: 18px; max-width: 640px; color: var(--fog); font-size: 16px; line-height: 1.9; }
.care-tiers { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--hair-dark); }
.care-tier { padding: 30px 30px 0 0; border-right: 1px solid var(--hair-dark); }
.care-tier:last-child { border-right: none; padding-left: 30px; }
.care-tier h3 { font-size: 19px; color: var(--ivory); font-weight: 500; }
.care-tier .amt { margin-top: 14px; font-family: var(--font-serif); font-size: 32px; font-weight: 500; color: var(--gold); }
.care-tier p { margin-top: 10px; color: var(--fog); font-size: 14px; }
.care-cta { margin-top: 44px; }

@media (max-width: 920px) {
  .svc-hero { padding: 56px 0 44px; }
  .build { padding: 56px 0 0; }
  .build-grid { grid-template-columns: 1fr; gap: 40px; }
  .care { padding-bottom: 64px; }
  .care-tiers { grid-template-columns: 1fr; }
  .care-tier { border-right: none; border-bottom: 1px solid var(--hair-dark); padding: 0 0 26px; }
  .care-tier:last-child { padding: 26px 0 0; }
}