/* ===== CGS design system v2 — shared by every page; homepage adds /homepage.css ===== */
:root { --display: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* --- Header: forest bar, typography-only wordmark --- */
.wordmark img.wm-header { height: 34px; width: auto; }
.site-header.ca-header .header-inner { min-height: 84px; }
.lp-header.ca-header .header-inner { min-height: 76px; }
.ca-header .header-cta, .lp-header.ca-header .btn { background: var(--paper); color: var(--ink); border-radius: 999px; }
.ca-header .header-cta:hover, .lp-header.ca-header .btn:hover { background: var(--sage); }
.ca-header .site-nav a[aria-current='page'] { background-size: 100% 1px; }

/* --- Footer: same wordmark --- */
.site-footer .wordmark img.wm-footer { height: 34px; width: auto; }

/* --- Typography --- */
main h1, main h2, main h3 { font-family: var(--display); letter-spacing: -0.03em; }
main h1 { font-weight: 700; line-height: 1.0; letter-spacing: -0.042em; }
main h2 { font-weight: 600; line-height: 1.08; }
main h3 { font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
main em.it { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.faq-d summary { font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -0.01em; }
.eyebrow { letter-spacing: 0.16em; }

/* --- Buttons: pills, like the homepage --- */
.btn { border-radius: 999px; padding: 0.95rem 1.5rem; }
.header-cta { padding: 0.8rem 1.25rem; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent-hover); }

/* --- Page hero: forest, like the homepage hero --- */
.page-hero, .lp-hero { background: var(--ink); color: var(--on-dark); border-bottom: 0; }
.page-hero { padding-block: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 84px); }
.page-hero h1, .lp-hero h1 { color: var(--paper); font-size: clamp(2.5rem, 5.4vw, 4.6rem); max-width: 14em; text-wrap: balance; }
.page-hero h1 em.it em.it, .lp-hero h1 em.it { color: var(--sage); }
.page-hero .lead, .lp-hero .lead { color: var(--on-dark); }
.page-hero .eyebrow, .lp-hero .eyebrow { color: var(--sage); }
.page-hero .btn-primary { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 5px rgba(243, 238, 227, 0.12); }
.page-hero .btn-primary:hover { background: #fff; }
.page-hero a:focus-visible, .lp-hero a:focus-visible { outline-color: var(--sage); }
.page-hero .muted, .page-hero p:not(.lead):not(.eyebrow) { color: var(--on-dark); }
.page-hero .tag { color: var(--sage); border-color: var(--sage); }

/* --- Contact page: cream section, headline in the design-system type, white form card --- */
.page-contact { padding-block: clamp(48px, 6vw, 88px); }
.page-contact h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); max-width: 12em; }
.page-contact .form-wrap { background: #fff; box-shadow: 0 24px 50px rgba(31, 58, 46, 0.10); }
.page-contact .booking { border-top: 2px solid var(--ink); }

/* --- Landing page hero: dark with cream form card --- */
.lp-hero .lp-points { border-top-color: rgba(243, 238, 227, 0.5); }
.lp-hero .lp-points li { border-bottom-color: var(--line-on-dark); color: var(--on-dark); }
.lp-hero .lp-points li::before { background: var(--sage); }
.lp-card { border-radius: 20px; border-top: 1px solid var(--rule); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22); color: var(--ink-soft); }
.lp-card h2 { color: var(--ink); }

/* --- Cards and forms --- */
.form-wrap { border-radius: 20px; }
.field input, .field select, .field textarea { border-radius: 10px; }
.primary-service { background: var(--field); border: 1px solid var(--rule); border-top: 1px solid var(--rule); border-radius: 20px; padding: clamp(22px, 3vw, 34px); }
.rule-list { border-top-width: 2px; }
.work-shot img { border-radius: 14px; }
.tag { border-radius: 999px; }
.steps li, .expect li { border-top-width: 2px; }
.tree li { border-top-width: 3px; }

/* --- Closing CTA band: forest with cream pill --- */
.cta-band .btn-primary { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 5px rgba(243, 238, 227, 0.12); }
.cta-band .btn-primary:hover { background: #fff; }

@media (max-width: 900px) {
  .wordmark img.wm-header { height: 30px; }
  .site-header.ca-header .header-inner { min-height: 72px; }
  .ca-header .site-nav { background: var(--ink); border-bottom-color: var(--line-on-dark); }
  .ca-header .site-nav a { border-bottom-color: var(--line-on-dark); }
  .ca-header .site-nav .nav-cta-item a { background: var(--paper); color: var(--ink); border-radius: 999px; }
}
@media (max-width: 480px) {
  .lp-header .wordmark img.wm-header { height: 24px; }
}
@media (max-width: 360px) {
  .lp-header .wordmark img.wm-header { height: 18px; }
  .lp-header.ca-header .btn { padding: 0.55rem 0.75rem; }
}