/* ============================================
   Trees to Sea — service pages
   Loaded after style.css by includes/service-page.php.
   Only what the shared stylesheet does not already cover.
   ============================================ */

/* ── PAGE HEADER — the homepage hero, shorter and single-column ── */
.hero.hero-service { min-height: 0; padding: 10rem 2rem 5rem; }
.hero-service-inner { max-width: 1100px; margin: 0 auto; width: 100%; position: relative; }
.hero-service h1.hero-headline { max-width: 820px; }
.hero-service .hero-sub { max-width: 640px; }
.hero-service .hero-eyebrow a { color: inherit; text-decoration: none; }
.hero-service .hero-eyebrow a:hover { color: #F5F0EB; }

/* ── PILLS as a list ── */
ul.strip-pills { list-style: none; }

/* ── LABELS that are now real headings ── */
.approach-item h3.lbl { font-family: 'Inter', sans-serif; }
.approach-item p a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(42,123,140,0.3); }
.approach-item p a:hover { color: var(--teal-deep); }

/* ── "ALSO CONSIDER" NOTE ── */
.service-also { margin-top: 2.5rem; padding: 1.5rem 1.75rem; background: var(--bg); border-left: 2px solid var(--terra); max-width: 760px; }
.service-also p { font-size: 0.9rem; font-weight: 300; color: var(--text-secondary); line-height: 1.8; }
.service-also-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-top: 0.9rem; }
.service-also-links a,
.service-more a { font-size: 0.76rem; color: var(--terra); letter-spacing: 0.06em; text-decoration: none; }
.service-also-links a:hover,
.service-more a:hover { color: var(--terra-light); }
.service-more { margin-top: 2.5rem; }

/* ── GROUP PAGE ── */
.group-page-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: start; margin-top: 1rem; }
.group-page-grid .group-details { margin-top: 2rem; }
.service-waitlist { max-width: 520px; margin: 0 auto; text-align: left; }
.service-waitlist h2 { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 400; color: var(--ink); margin-bottom: 0.5rem; }

@media (max-width: 768px) {
  .hero.hero-service { padding: 7.5rem 1.25rem 3.5rem; }
  .group-page-grid { grid-template-columns: 1fr; gap: 1rem; }
}