/* Services hub.
   NOTE: the .page-header hero rules below are NOT inherited - every page template
   carries its own copy, so omitting them renders the h1 dark green on the dark hero
   photo (the same defect that made the About biography unreadable at 1.37:1). */
.page-header {
  background:
    linear-gradient(90deg, rgba(52,76,70,0.94), rgba(9,47,62,0.82)),
    linear-gradient(180deg, rgba(15,27,24,0.12), rgba(15,27,24,0.34)),
    url('/assets/img/practice-office.webp') center/cover no-repeat;
  padding: clamp(48px, 7vw, 88px) 0;
  position: relative;
  overflow: hidden;
}
.page-header h1 {
  color: #fff;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.12;
  margin: 0 0 12px;
  max-width: 720px;
}
.page-header p {
  color: rgba(255,255,255,0.80);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 0 26px;
}
.ph-eyebrow span {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #EBCB8C;
}
.ph-eyebrow { margin-bottom: 14px; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Section eyebrow - matches the other service pages (gold rule + uppercase). */
.sec-label { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sec-label::before { content: ''; width: 24px; height: 1px; background: var(--gold); }
.sec-label span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
}

.btn-gold { display: inline-block; background: var(--gold); color: var(--on-gold); padding: 16px 32px; border-radius: 8px; font-weight: 600; font-size: 15px; transition: background 0.2s; }
.btn-gold:hover { background: var(--gold-hover); }
.btn-outline-gold { display: inline-block; border: 1px solid var(--gold); color: var(--gold-light); padding: 15px 31px; border-radius: 8px; font-weight: 600; font-size: 15px; transition: background 0.2s, color 0.2s; }
.btn-outline-gold:hover { background: var(--gold); color: var(--on-gold); }

section { padding: clamp(56px, 7vw, 96px) 0; }
.svc-who { background: var(--linen); }

h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.15;
  color: var(--green);
  margin: 0 0 14px;
}
section > .container > div > p { color: var(--text-light); line-height: 1.8; margin: 0 0 8px; }

/* Service cards */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
@media (min-width: 700px)  { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.svc-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  padding: 28px 24px 24px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(9,47,62, 0.13); }
.svc-card-ref {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 12px;
}
.svc-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 21px;
  line-height: 1.25;
  color: var(--green);
  margin: 0 0 10px;
}
.svc-card p { font-size: 14.5px; line-height: 1.75; color: var(--text); margin: 0 0 18px; flex: 1 1 auto; }
.svc-card-go {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--green);
}
.svc-card:hover .svc-card-go { color: var(--gold-ink); }

/* Audience cards */
.svc-who-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 800px) { .svc-who-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } }

.svc-who-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  padding: 32px 28px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.svc-who-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(9,47,62, 0.13); }
.svc-who-card h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 24px;
  color: var(--green);
  margin: 0 0 10px;
}
.svc-who-card p { font-size: 15px; line-height: 1.75; color: var(--text); margin: 0 0 16px; }

/* Closing CTA */
.svc-cta { background: var(--green); }
.svc-cta-inner { max-width: 680px; }
.svc-cta h2 { color: #fff; }
.svc-cta p { color: rgba(255, 255, 255, 0.82); line-height: 1.8; margin: 0 0 24px; }

/* 'section > .container > div > p' above is more specific than '.svc-cta p', which left this copy grey on green. */
.svc-cta .svc-cta-inner p { color: rgba(255, 255, 255, 0.86); }
.svc-cta .svc-cta-inner p a { color: var(--gold-light, #EBCB8C); text-decoration: underline; text-underline-offset: 3px; }