/* Straight Arrow Roofing & Siding, preview site.
   Palette from his own logo: indigo slate #4A4E69 and heather #9A8C99, with a signal amber for
   the one action that matters (call or ask for an estimate). Roles:
     paper / white   grounds
     ink, ink-2      text only
     indigo          headings accents, rules on dark, chart bars, focus ring on light
     indigo-deep     dark bands, footer
     heather         decoration only, never text on paper (contrast too low)
     amber           primary buttons and the focus ring on dark grounds, always with ink text
   The one bold move: his photos framed in the gable of a roof, with an indigo gable offset
   behind, echoing the chevrons in the logo. Everything else stays quiet. */

:root {
  --paper: #F7F7F9;
  --white: #FFFFFF;
  --ink: #1C1E2E;
  --ink-2: #4B4F63;
  --indigo: #4A4E69;
  --indigo-deep: #2E3147;
  --indigo-ink: #23263A;
  --heather: #9A8C99;
  --heather-soft: #ECE8EC;
  --rule: #DEDDE4;
  --rule-strong: #B9B7C4;
  --amber: #F2B53A;
  --amber-hover: #FFC857;
  --ice: #3E6A9A;
  --on-dark: #ECEBF2;
  --display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: clamp(2.5rem, 1.9rem + 2.4vw, 4rem);
  --s8: clamp(3.5rem, 2.6rem + 3.6vw, 6rem);
  --r1: 4px; --r2: 8px; --r3: 12px;
  --head-h: 68px;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --shadow: 0 1px 2px rgba(46, 49, 71, 0.08), 0 6px 18px rgba(46, 49, 71, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); scroll-padding-bottom: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1.125rem/1.6 var(--body);
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--indigo-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 2px; }
.cta :focus-visible, footer.site :focus-visible, .callbar :focus-visible { outline-color: var(--amber); }

h1, h2 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: 0.005em; color: var(--indigo-ink); margin: 0 0 var(--s4); text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 1.45rem + 1.7vw, 2.75rem); margin-top: var(--s7); }
h3 { font: 700 1.2rem/1.3 var(--body); margin: 0 0 var(--s2); color: var(--ink); }
p, ul, ol { margin: 0 0 var(--s4); }
strong { font-weight: 700; }
sup.cite { font-size: 0.7em; line-height: 0; margin-left: 1px; }
sup.cite a { padding: 0 2px; text-decoration: none; font-weight: 700; }

.wrap { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.prose { max-width: 760px; }
.wrap.prose { max-width: none; }
.wrap.prose > * { max-width: 760px; }
.wrap.prose > table.wide { max-width: 1100px; }
.wrap.prose > .mapfig { max-width: 680px; }
.prose > h2:first-child { margin-top: var(--s7); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--white); padding: var(--s2) var(--s4); }
.skip:focus { left: 8px; }

/* ── preview strip and header ─────────────────────────────────────────── */
.preview { margin: 0; padding: 6px 16px; background: var(--indigo-deep); color: var(--on-dark); font-size: 0.875rem; text-align: center; }
header.site { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.bar { width: min(1240px, calc(100% - 24px)); margin-inline: auto; height: var(--head-h); display: flex; align-items: center; gap: var(--s4); }
.brand { flex: none; display: block; padding: 4px 0; }
.brand img { height: 46px; width: auto; }
nav.primary { display: none; gap: 2px; margin-left: auto; }
nav.primary a { padding: 10px 12px; border-radius: var(--r2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1rem; }
nav.primary a:hover { background: var(--heather-soft); }
nav.primary a[aria-current] { color: var(--indigo); box-shadow: inset 0 -3px 0 var(--amber); border-radius: 0; }
.tel { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: var(--r2); }
.tel:hover { background: var(--heather-soft); }
.m-menu { position: static; }
.m-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule-strong); border-radius: var(--r2); font-weight: 700; }
.m-menu summary::-webkit-details-marker { display: none; }
.m-menu[open] summary { background: var(--heather-soft); }
.m-menu nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--rule); box-shadow: var(--shadow); padding: var(--s3) 16px var(--s5); display: grid; gap: 2px; }
.m-menu nav a { padding: 12px 8px; font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
.m-menu nav a.btn { margin-top: var(--s4); border: 0; justify-content: center; }
.btn.hide-s { display: none; }
@media (min-width: 560px) { .btn.hide-s { display: inline-flex; } }
@media (max-width: 480px) { .tel span, .m-menu summary span { display: none; } .tel { border: 1px solid var(--rule-strong); } .brand { min-width: 0; flex: 0 1 auto; } .brand img { height: 38px; } .bar { gap: var(--s2); } }
@media (min-width: 1080px) {
  nav.primary { display: flex; }
  .tel { margin-left: var(--s2); }
  .m-menu { display: none; }
}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--r2); font: 700 1rem/1.2 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out), transform 120ms var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn.big { min-height: 54px; padding: 12px 24px; font-size: 1.075rem; }
.btn.amber { background: var(--amber); color: var(--ink); }
.btn.amber:hover { background: var(--amber-hover); color: var(--ink); }
.btn.line { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn.line:hover { background: var(--ink); color: var(--white); }
.btn.ghost { border-color: var(--on-dark); color: var(--white); }
.btn.ghost:hover { background: var(--white); color: var(--indigo-deep); }
.btn.ghost-d { border-color: var(--indigo-deep); color: var(--indigo-deep); background: var(--white); }

/* ── the gable frame ──────────────────────────────────────────────────── */
.gable { position: relative; isolation: isolate; margin: var(--s4) 14px 14px 0; }
.gable::before { content: ""; position: absolute; inset: -14px -14px 14px 14px; background: var(--indigo); clip-path: polygon(50% 0, 100% 20%, 100% 100%, 0 100%, 0 20%); z-index: -1; }
.gable img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; clip-path: polygon(50% 0, 100% 20%, 100% 100%, 0 100%, 0 20%); }

/* ── home hero ────────────────────────────────────────────────────────── */
.hero { padding: var(--s7) 0 var(--s8); background: linear-gradient(180deg, var(--white) 0%, var(--paper) 100%); border-bottom: 1px solid var(--rule); }
.hero-in { display: grid; gap: var(--s7); align-items: center; }
.hero h1 { max-width: 14ch; }
.answer { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); line-height: 1.55; color: var(--ink-2); max-width: 60ch; }
.hero-btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s5) 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0 0 var(--s4); border-top: 1px solid var(--rule); }
.facts div { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--rule); }
.facts dt { font-size: 0.875rem; color: var(--ink-2); }
.facts dd { margin: 0; font: 800 1.45rem/1.15 var(--display); color: var(--indigo-ink); }
.updated { font-size: 0.9rem; color: var(--ink-2); margin: var(--s3) 0 0; }
@media (min-width: 900px) {
  .hero-in { grid-template-columns: 1.1fr 0.9fr; }
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── page hero ────────────────────────────────────────────────────────── */
.phero { padding: var(--s6) 0 var(--s7); background: var(--white); border-bottom: 1px solid var(--rule); }
.phero-in { display: grid; gap: var(--s6); align-items: end; }
.phero h1 { margin-top: var(--s3); }
.phero.nophoto .phero-t { max-width: 860px; }
@media (min-width: 900px) { .phero-in { grid-template-columns: 1.25fr 0.75fr; } .phero.nophoto .phero-in { grid-template-columns: 1fr; } }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.9rem; color: var(--ink-2); }
.crumbs li + li::before { content: "/"; margin-right: 4px; color: var(--rule-strong); }
.crumbs a { color: var(--ink-2); display: inline-block; padding: 4px 0; }

/* ── bands ────────────────────────────────────────────────────────────── */
.band { padding: var(--s8) 0; }
.band + .wrap.prose .sources { margin-top: var(--s5); }
.band.alt { background: var(--white); border-block: 1px solid var(--rule); }
.band h2:first-child, .band .wrap > h2:first-child, .two h2:first-child { margin-top: 0; }
.lede { font-size: 1.2rem; color: var(--ink-2); max-width: 60ch; }
.two { display: grid; gap: var(--s7); align-items: start; }
@media (min-width: 900px) { .two { grid-template-columns: 1fr 1fr; } }

/* services on home: one big feature, the rest as a ruled list */
.svc-feature { display: grid; gap: var(--s6); margin-top: var(--s5); }
.feat { position: relative; display: block; border-radius: var(--r3); overflow: hidden; color: var(--white); text-decoration: none; background: var(--indigo-deep); }
.feat img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: 0.92; transition: opacity 200ms var(--ease-out); }
.feat:hover img { opacity: 1; }
.feat-t { position: absolute; inset: auto 0 0 0; padding: var(--s6) var(--s5) var(--s5); background: linear-gradient(180deg, rgba(35, 38, 58, 0) 0%, rgba(35, 38, 58, 0.92) 55%); display: grid; gap: 4px; }
.feat-t strong { font: 800 2rem/1 var(--display); }
.feat:hover { color: var(--white); }
.svc-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.svc-list li { border-bottom: 1px solid var(--rule); padding: var(--s3) 0; display: grid; gap: 2px; }
.svc-list a { font-weight: 700; font-size: 1.15rem; padding: 4px 0; }
.svc-list span { color: var(--ink-2); font-size: 1rem; }
@media (min-width: 900px) { .svc-feature { grid-template-columns: 1.1fr 0.9fr; align-items: start; } }

/* process steps: a real sequence, so numbered */
.steps { list-style: none; counter-reset: step; padding: 0; display: grid; gap: var(--s4); margin: var(--s5) 0 var(--s6); }
.steps li { counter-increment: step; position: relative; padding: var(--s4) var(--s4) var(--s4) 64px; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r3); }
.band.alt .steps li { background: var(--paper); }
.prose .steps li { background: var(--white); }
.steps li::before { content: counter(step); position: absolute; left: 18px; top: 10px; font: 800 2.4rem/1 var(--display); color: var(--indigo); }
.steps p { margin: 0; color: var(--ink-2); }
@media (min-width: 900px) { .band .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } .band .steps li { padding: 64px var(--s4) var(--s4); } .band .steps li::before { top: 14px; } }

/* towns */
.towns { list-style: none; padding: 0; margin: 0 0 var(--s4); columns: 2; column-gap: var(--s5); }
.towns li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.towns a { font-weight: 700; }
.towns span { color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 420px) { .towns { columns: 1; } }

/* map */
.mapfig { margin: 0; }
.map { width: 100%; height: auto; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r3); }
.map .lake { fill: #DCE4EE; }
.map .lake-l { fill: var(--ice); font: italic 15px var(--body); }
.map .ring { fill: none; stroke: var(--rule-strong); stroke-dasharray: 4 5; }
.map .ring-l { fill: var(--ink-2); font: 12px var(--body); }
.map .town circle { fill: var(--white); stroke: var(--indigo); stroke-width: 3; }
.map .town text { fill: var(--ink); font: 700 15px var(--body); paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }
.map .town.base circle { fill: var(--amber); stroke: var(--ink); }
.map .town.on circle { fill: var(--indigo); }
figcaption { font-size: 0.9rem; color: var(--ink-2); margin-top: var(--s2); }

/* quotes */
.quotes { display: grid; gap: var(--s5); margin: var(--s5) 0; }
@media (min-width: 900px) { .quotes { grid-template-columns: 1fr 1fr; } }
blockquote { margin: 0; padding: var(--s5) var(--s5) var(--s5) var(--s6); background: var(--white); border: 1px solid var(--rule); border-left: 5px solid var(--amber); border-radius: var(--r2); position: relative; }
.band.alt blockquote { background: var(--paper); }
blockquote p { margin: 0; font-size: 1.15rem; }
blockquote::before { content: "\201C"; position: absolute; left: 10px; top: -2px; font: 800 3rem/1 var(--display); color: var(--heather); }

/* cards (services hub, guides hub) */
.cards { list-style: none; padding: 0; margin: var(--s5) 0 var(--s8); display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.cards a { display: block; height: 100%; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r3); overflow: hidden; color: var(--ink); text-decoration: none; transition: border-color 150ms var(--ease-out); }
.cards a:hover { border-color: var(--indigo); }
.cards img, .cards .ph { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.cards .ph { display: block; background: linear-gradient(135deg, var(--indigo) 0 50%, var(--indigo-deep) 50% 100%); }
.cards h2, .cards h3 { margin: var(--s4) var(--s4) var(--s2); font: 800 1.6rem/1.05 var(--display); color: var(--indigo-ink); }
.cards p { margin: 0 var(--s4) var(--s4); color: var(--ink-2); }
.cards.text { margin-top: var(--s7); }
.cards.text a { padding: var(--s2) var(--s2) var(--s3); }

/* gallery */
.gallery { list-style: none; padding: 0; margin: var(--s7) 0 var(--s8); display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r2); }

/* photos in prose */
.photo { margin: var(--s6) 0; }
.photo img { width: 100%; border-radius: var(--r2); }
.roofsvg { margin: var(--s5) 0; }
.roofsvg svg { width: 100%; height: auto; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r3); }
.roofsvg .lbl line { stroke: var(--ink-2); stroke-width: 1; }
.roofsvg .lbl text { fill: var(--ink); font-family: var(--body); font-weight: 700; }

/* lists in prose */
.prose ul, .prose ol:not(.steps) { padding-left: 1.3em; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--indigo); }
.cols { columns: 2; column-gap: var(--s6); }
@media (max-width: 560px) { .cols { columns: 1; } }
.note { font-size: 0.95rem; color: var(--ink-2); }

/* ── tables: real tables, stacked into labelled cards on phones ───────── */
table { width: 100%; border-collapse: collapse; margin: var(--s5) 0 var(--s6); background: var(--white); font-size: 1rem; font-variant-numeric: tabular-nums; border: 1px solid var(--rule); }
caption { caption-side: top; text-align: left; font-weight: 700; padding: 0 0 var(--s2); color: var(--ink); }
th, td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
thead th { background: var(--indigo-deep); color: var(--white); font-weight: 700; border-bottom: 0; }
tbody th { font-weight: 700; }
tbody tr:nth-child(even) { background: #FAFAFC; }
tfoot th, tfoot td { font-weight: 700; background: var(--heather-soft); }
.census td:nth-child(2) { white-space: nowrap; }
.census .bar { display: inline-block; vertical-align: middle; height: 10px; width: calc(var(--w) * 1.6); max-width: 70%; background: var(--indigo); border-radius: 2px; margin-right: 8px; }
table.wide { font-size: 0.95rem; }
@media (max-width: 680px) {
  table, thead, tbody, tfoot, tr, th, td { display: block; }
  caption { display: block; }
  table { border: 0; background: transparent; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tr { background: var(--white) !important; border: 1px solid var(--rule); border-radius: var(--r2); margin-bottom: var(--s3); padding: var(--s2) 0; }
  tbody th, tfoot th { border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
  td { border: 0; padding: 6px 14px; }
  td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); }
  .census .bar { width: calc(var(--w) * 2.4); }
}

/* sources */
.sources { margin: var(--s7) 0 var(--s7); padding-top: var(--s4); border-top: 2px solid var(--ink); font-size: 0.95rem; }
.sources h2 { font-size: 1.6rem; margin-top: 0; }
.sources li { margin-bottom: 6px; scroll-margin-top: calc(var(--head-h) + 16px); }
:target { scroll-margin-top: calc(var(--head-h) + 16px); }
.sources li:target { background: var(--heather-soft); }

/* ── contact ──────────────────────────────────────────────────────────── */
.contact { padding: var(--s7) 0 var(--s8); }
.form { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r3); padding: var(--s5); }
.form h2, .reach h2 { margin-top: 0; }
.field { display: grid; gap: 4px; }
.field label { font-weight: 700; }
.field label span { font-weight: 400; color: var(--ink-2); }
input, select, textarea { font: inherit; font-size: 1rem; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--rule-strong); border-radius: var(--r2); background: var(--white); color: var(--ink); width: 100%; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--indigo); }
.form [data-form-note].sent { color: var(--ink); font-weight: 700; background: var(--heather-soft); padding: var(--s3); border-radius: var(--r2); }
.reach h3 { margin-top: var(--s5); }

/* ── call to action and footer ────────────────────────────────────────── */
.cta { background: var(--indigo); color: var(--white); padding: var(--s8) 0; }
.cta h2 { color: var(--white); margin-top: 0; max-width: 18ch; }
.cta p { color: var(--on-dark); font-size: 1.15rem; max-width: 55ch; }
.cta-btns { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
footer.site { background: var(--indigo-deep); color: var(--on-dark); padding: var(--s7) 0 calc(var(--s6) + env(safe-area-inset-bottom)); font-size: 1rem; }
footer.site a { color: var(--white); }
footer.site a:hover { color: var(--amber); }
.foot { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .foot { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.f-logo { width: 200px; margin-bottom: var(--s4); }
footer.site h2 { font: 800 1.35rem/1 var(--display); color: var(--white); margin: 0 0 var(--s3); }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li a { display: inline-block; padding: 5px 0; }
.social { display: flex; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s4); }
.social a { padding: 6px 0; }
.legal { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.9rem; color: #C9C7D6; }

/* phone call bar, shown by main.js once the hero buttons scroll away */
.callbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding: var(--s2) 12px calc(var(--s2) + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform 220ms var(--ease-out); }
.callbar.show { transform: none; }
.callbar .btn { min-height: 48px; }
@media (min-width: 900px) { .callbar { display: none !important; } }
@media (max-width: 899px) { footer.site { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* 404 */
.nf { padding: var(--s8) 0; }
.nf-logo { height: 56px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .btn { border: 2px solid ButtonText; }
  .gable::before { display: none; }
}
@media print {
  header.site, .preview, .callbar, .cta, .m-menu { display: none !important; }
}