/* Ridgecap: storm sky above a shingled roofline at a real 6/12 pitch. */
:root {
  --bg: #f3f5f6; --ink: #20282d; --muted: #4f5c64; --surface: #fff; --line: #cfd6da;
  --brand: #2c3a43; --on-brand: #fff; --accent: #ef7a2e; --on-accent: #1b1208;
  --radius: 3px; --head: "Cormorant Garamond", serif; --body: "Public Sans", sans-serif;
  --head-weight: 700; --head-spacing: 0; --header-bg: #2c3a43; --header-ink: #fff; --header-line: #2c3a43;
  --footer-bg: #1f2a31; --star: #c04d0c; --focus: #c04d0c;
  --shingles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48'%3E%3Crect width='96' height='48' fill='%2334434d'/%3E%3Cpath d='M0 23.5h96M0 47.5h96M24 0v24M72 0v24M0 24v24M48 24v24' stroke='%23202a31' stroke-width='2'/%3E%3C/svg%3E");
}
h1 { font-size: clamp(3rem, 7vw, 5.75rem); line-height: 1; }
h2 { font-size: clamp(2.125rem, 4.4vw, 3.25rem); line-height: 1.05; }
h3 { font-size: 1.625rem; font-weight: 700; line-height: 1.1; }
.site-header, .page-head, .band-cta { --focus: #ffb37f; }
.header-phone { background: var(--accent); color: var(--on-accent); }
.page-head { position: relative; padding-bottom: clamp(72px, 10vw, 120px); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 44px)); }
.page-head h1 { font-size: clamp(2.75rem, 6vw, 4.5rem); }

.rf-hero { --focus: #ffb37f; position: relative; overflow: hidden; background: #4b6577; color: #fff; }
.rf-hero .wrap { position: relative; z-index: 1; padding-block: clamp(48px, 7vw, 88px) clamp(170px, 24vw, 300px); }
.rf-hero h1 { max-width: 11em; }
.rf-sub { max-width: 42ch; margin-top: 20px; font-size: 1.25rem; }
.rf-ridge { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(190px, 30vw, 460px); background: var(--shingles); clip-path: polygon(0 100%, 100% 0, 100% 100%); border: 0; }
.rf-ridge::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right bottom, transparent 50%, #ef7a2e 50%, #ef7a2e calc(50% + 8px), transparent calc(50% + 8px)); }

.trade-roofing .svc-list { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.trade-roofing .svc-list a { border-top: 6px solid var(--brand); }
.trade-roofing .svc-list a:hover { border-top-color: var(--accent); }

.rf-layers { background: var(--brand); color: #fff; --muted: #d4dde2; --focus: #ffb37f; }
.rf-layer-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: start; }
.rf-layer-grid .lede { margin-top: 16px; }
.rf-stack { counter-reset: layer; display: flex; flex-direction: column; gap: 4px; }
.rf-stack li { counter-increment: layer; display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; padding: 14px 18px; background: var(--c); color: var(--t, #fff); }
.rf-stack li::before { content: counter(layer); grid-row: span 2; font: 900 2.25rem/1 var(--head); }
.rf-stack p { font-size: 1rem; }
.rf-stack li:nth-child(1) { --c: #d3b083; --t: #20282d; margin-left: 0; }
.rf-stack li:nth-child(2) { --c: #1a2126; margin-left: 3%; }
.rf-stack li:nth-child(3) { --c: #e4e9ec; --t: #20282d; margin-left: 6%; }
.rf-stack li:nth-child(4) { --c: #a9b6be; --t: #20282d; margin-left: 9%; }
.rf-stack li:nth-child(5) { --c: #4f6270; margin-left: 12%; }
.rf-stack li:nth-child(6) { --c: #ef7a2e; --t: #1b1208; margin-left: 15%; }

.band-reviews { background: #fff; }
.band-reviews .review { background: var(--bg); }
.trade-roofing .steps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.trade-roofing .steps li::before { color: var(--accent); font-size: 3.5rem; }

@media (max-width: 860px) {
  .rf-layer-grid { grid-template-columns: 1fr; gap: 28px; }
  .rf-stack li { margin-left: 0 !important; }
}