/* Hyde Park Exterior Care, v0 holding page (2026-10-01).
   Brand: night green #15211B, paper #F4EFE3, light blue #7FC3EA (the one action color).
   Type: Hanken Grotesk once it is self-hosted (v1); system sans until then. One spacing unit: 0.5rem. */
:root { --night: #15211B; --paper: #F4EFE3; --light: #7FC3EA; --muted: #C9CFC9; --u: 0.5rem; }
* { box-sizing: border-box; }
html { background: var(--night); color: var(--paper); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font-family: "Hanken Grotesk", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.125rem; line-height: 1.5; -webkit-text-size-adjust: 100%;
}
main { flex: 1; width: 100%; max-width: 38rem; margin: 0 auto; padding: calc(var(--u) * 8) calc(var(--u) * 3) calc(var(--u) * 4); }
h1 { margin: 0 0 calc(var(--u) * 4); line-height: 0; }
h1 img, .back img { display: block; max-width: 100%; height: auto; }
h1 img { width: 26rem; }
.slogan { font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; margin: calc(var(--u) * -2) 0 calc(var(--u) * 4); padding-bottom: calc(var(--u) * 2); border-bottom: 1px solid rgba(244, 239, 227, 0.25); }
.lead { font-size: 1.375rem; line-height: 1.4; margin: 0 0 calc(var(--u) * 2); text-wrap: balance; }
p { margin: 0 0 calc(var(--u) * 3); }
a { color: var(--light); text-underline-offset: 0.2em; }
a:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }
.action {
  display: inline-block; margin-top: var(--u); padding: calc(var(--u) * 1.5) calc(var(--u) * 2.5);
  border: 2px solid var(--light); border-radius: 4px; text-decoration: none; font-weight: 600; overflow-wrap: anywhere;
}
.action:hover { background: var(--light); color: var(--night); }
footer {
  width: 100%; max-width: 38rem; margin: 0 auto; padding: calc(var(--u) * 3);
  display: flex; flex-wrap: wrap; gap: var(--u) calc(var(--u) * 3); font-size: 0.875rem; color: var(--muted);
}
.page h1 { font-size: 2rem; line-height: 1.2; margin: 0 0 var(--u); }
.page h2 { font-size: 1.125rem; margin: calc(var(--u) * 4) 0 var(--u); }
.page .meta { color: var(--muted); font-size: 0.875rem; }
.back { margin-bottom: calc(var(--u) * 5); }
.back img { width: 12rem; }