/* Built from what the best-performing HVAC sites we measured put on the first phone screen (Sept 19, 2026):
     a call action and a request action visible without scrolling, a headline that names the service and the
     town, a trust line (years, rating, reviews), a financing or offer card, review quotes with stars, the
     maintenance plan as its own button, a request form on the home page, and a thumb-reach bar at the bottom. */
  :root { --ink:#17202b; --accent:var(--brand, #1f6f8b); --accent-ink:#ffffff; --soft:#f3f6f8; --line:#d9dee5; --muted:#5b6672; --star:#e8a600; }
  * { box-sizing:border-box; }
  html, body { margin:0; padding:0; background:#fff; color:var(--ink); font-family:-apple-system, "Segoe UI", Helvetica, Arial, sans-serif; line-height:1.4; }
  body { padding-bottom:64px; }
  .preview-bar { background:#fff4d6; color:#5a4300; font-size:12px; padding:6px 12px; text-align:center; border-bottom:1px solid #f0d58a; }
  .preview-bar a { color:#5a4300; font-weight:700; text-decoration:underline; }
  header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); }
  header img { max-height:44px; max-width:170px; display:block; }
  header .name { font-weight:700; font-size:17px; }
  .call { background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:700; padding:10px 14px; border-radius:8px; white-space:nowrap; font-size:15px; }
  .serving { background:var(--soft); text-align:center; font-size:13px; padding:6px 14px; color:var(--muted); border-bottom:1px solid var(--line); }
  .hero { padding:16px 14px 14px; }
  .hero h1 { font-size:23px; line-height:1.18; margin:0 0 10px; }
  .checks { list-style:none; margin:0 0 12px; padding:0; }
  .checks li { font-size:14px; padding:3px 0 3px 26px; position:relative; }
  .checks li::before { content:""; position:absolute; left:0; top:6px; width:16px; height:16px; border-radius:50%; background:var(--accent); }
  .checks li::after { content:""; position:absolute; left:5px; top:9px; width:6px; height:3px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg); }
  .buttons { display:flex; flex-wrap:wrap; gap:8px; }
  .btn { flex:1; text-align:center; text-decoration:none; font-weight:700; padding:13px 10px; border-radius:8px; font-size:15px; }
  .buttons.three .btn.secondary { flex-basis:100%; }     /* with a Text button the request button takes its own line on a phone */
  .btn.primary { background:var(--accent); color:var(--accent-ink); }
  .btn.secondary { background:#fff; color:var(--ink); border:2px solid var(--ink); }
  /* A78 (Sept 24 2026): "Text us" — an sms: link to the business's own number, printed only when the number is a mobile */
  .btn.text { background:#fff; color:var(--accent); border:2px solid var(--accent); }
  /* A132 (Sept 30 2026): the hours line under the buttons — the live page turns it into "Open now · closes 5pm" (demo.js) */
  .open-now { margin:8px 0 0; font-size:13px; color:var(--muted); }
  .open-now b { color:var(--ink); font-weight:700; }
  .open-now.is-open b { color:#1a7f37; }
  /* A132: "Read them on Google" beside the rating, and "Get directions" under the address */
  .all-reviews { font-size:13px; color:var(--accent); font-weight:700; text-decoration:underline; margin-left:4px; white-space:nowrap; }
  footer .directions { font-weight:700; }
  /* the business's own photos (its Google listing, posted by the owner) — never a stock picture. With two or
     more, the first screen moves: each photo fades into the next with a slow zoom (the "video" owners notice,
     made only of his own pictures, no file to download, no sound — a phone plays nothing else anyway). One photo,
     or a phone set to reduce motion: a still. */
  .hero-photos { position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; margin:0 0 14px; background:#1b232c; }
  .hero-photos img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1);
                     transition:opacity 1.2s ease, transform 1.2s ease; }
  .hero-photos img.on { opacity:1; animation:kb 6.5s linear forwards; }
  @keyframes kb { from { transform:scale(1); } to { transform:scale(1.09); } }
  @media (prefers-reduced-motion: reduce) { .hero-photos img.on { animation:none; } }
  .strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; }
  .strip img { flex:0 0 auto; width:150px; height:112px; object-fit:cover; border-radius:8px; scroll-snap-align:start; }
  .topics { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
  .topics span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:13px; }
  .topics span b { color:var(--accent); font-weight:700; }
  .topics .lead { flex-basis:100%; font-size:12px; color:var(--muted); border:0; padding:0; background:none; }
  .cards { display:grid; grid-template-columns:1fr; gap:8px; padding:0 14px 14px; }
  .card { border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:8px; padding:10px 12px; font-size:14px; }
  .card b { display:block; font-size:15px; margin-bottom:2px; }
  section { padding:14px; border-top:1px solid var(--line); }
  h2 { font-size:14px; margin:0 0 8px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .rating { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
  .rating b { font-size:26px; }
  .stars { position:relative; display:inline-block; font-size:18px; letter-spacing:1px; color:#cfd6dd; line-height:1; }
  .stars .fill { position:absolute; left:0; top:0; overflow:hidden; white-space:nowrap; color:var(--star); }
  .rating span { color:var(--muted); font-size:13px; }
  .quote { background:var(--soft); border-radius:8px; padding:10px 12px; margin:0 0 8px; font-size:14px; }
  .quote .who { color:var(--muted); font-size:12px; margin-top:4px; }
  .review-link { display:inline-block; margin-top:4px; font-size:14px; font-weight:700; color:var(--accent); text-decoration:none; border:2px solid var(--accent); border-radius:8px; padding:9px 12px; }
  .services { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .services div { border:1px solid var(--line); border-radius:8px; padding:10px; font-size:14px; font-weight:600; }
  /* A78 item 4: the team, from the listing's own photos the photo check marked as people */
  .team { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .team img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; }
  .team .one { grid-column:1 / -1; }
  .team .one img { aspect-ratio:16/10; }
  /* A78 item 5: the facts block — only what the record holds */
  .facts { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; font-size:14px; }
  .facts dt { color:var(--muted); margin:0; }
  .facts dd { margin:0; font-weight:600; }
  .plan { border:2px solid var(--accent); border-radius:8px; padding:12px; font-size:14px; }
  .plan b { display:block; font-size:15px; margin-bottom:4px; }
  .plan a { display:inline-block; margin-top:8px; background:var(--accent); color:#fff; text-decoration:none; font-weight:700; padding:9px 12px; border-radius:8px; font-size:14px; }
  form label { display:block; font-size:13px; color:var(--muted); margin:8px 0 3px; }
  form input, form textarea, form select { width:100%; border:1px solid var(--line); border-radius:6px; padding:10px; font-size:15px; font-family:inherit; background:#fff; color:var(--ink); }
  form .when { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  form .when-note { font-size:12px; color:var(--muted); margin:4px 0 0; }
  form label.consent { display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--muted); margin:8px 0 0; }
  form label.consent input { width:auto; flex:0 0 auto; margin:2px 0 0; padding:0; }
  form button { width:100%; margin-top:12px; background:var(--accent); color:var(--accent-ink); border:0; border-radius:8px; padding:13px; font-size:16px; font-weight:700; }
  .sample-note { margin:0 0 8px; padding:9px 11px; background:#fff8e6; border:1px solid #f0d58c; border-radius:8px; font-size:14px; }
  form .sent { margin:10px 0 0; padding:10px 12px; background:#e9f6ee; border:1px solid #b7e0c4; border-radius:8px; font-size:14px; }
  footer { padding:14px; font-size:13px; color:var(--muted); border-top:1px solid var(--line); }
  footer a { color:var(--ink); }
  footer .small { margin-top:8px; font-size:12px; }
  .bar { position:fixed; left:0; right:0; bottom:0; display:flex; gap:1px; background:var(--ink); }
  .bar a { flex:1; text-align:center; color:#fff; text-decoration:none; font-weight:700; font-size:14px; padding:13px 6px; background:var(--accent); }
  .bar a.alt { background:var(--ink); }
  /* A61 (Sept 23 2026, Dillon: "can you make the website desktop friendly and responsive?"): on a screen 820px or wider
     the same page lays out in two columns — the headline beside the photos, the reviews beside the services, three
     cards in a row, the bottom bar gone (the header's call button is there). Nothing is added or removed; a phone
     still gets the one-column page above. */
  @media (min-width: 820px) {
    body { display:grid; grid-template-columns:1fr 1fr; column-gap:0; max-width:1120px; margin:0 auto; padding-bottom:0; box-shadow:0 0 0 1px var(--line); }
    .preview-bar, header, .serving, .cards, footer, .hero, .strip-section, .plan-section, .team-section, .facts-section, #request { grid-column:1 / -1; }
    .hero:has(+ .hero-photos) { grid-column:1; }
    header { padding:16px 32px; }
    header img { max-height:60px; max-width:240px; }
    header .name { font-size:22px; }
    .call { font-size:17px; padding:12px 18px; }
    .serving { font-size:14px; }
    .hero { padding:44px 36px 36px; display:flex; flex-direction:column; justify-content:center; }
    .hero h1 { font-size:38px; line-height:1.12; margin-bottom:18px; }
    .checks li { font-size:17px; padding:5px 0 5px 32px; }
    .checks li::before { top:8px; width:19px; height:19px; }
    .checks li::after { left:6px; top:12px; width:7px; height:4px; }
    .buttons { max-width:460px; margin-top:6px; }
    .btn { padding:15px 12px; font-size:17px; }
    .btn.text { display:none; }           /* a computer cannot send a text */
    .buttons.three .btn.secondary { flex-basis:auto; }
    .hero-photos { aspect-ratio:auto; height:100%; min-height:400px; margin:0; }
    .cards { grid-template-columns:repeat(3, 1fr); gap:16px; padding:28px 36px 12px; }
    .card { font-size:15px; padding:14px 16px; }
    .card b { font-size:17px; }
    section { padding:28px 36px; }
    section + section { border-left:1px solid var(--line); }
    section.full, section.strip-section, section.plan-section, section.team-section, section.facts-section, #request { border-left:0; }
    h2 { font-size:15px; margin-bottom:12px; }
    .rating b { font-size:32px; }
    .stars { font-size:22px; }
    .quote { font-size:15px; padding:12px 14px; }
    .services { grid-template-columns:1fr 1fr; }
    .services div { font-size:15px; padding:12px; }
    .strip img { width:230px; height:170px; }
    .team { grid-template-columns:repeat(3, 1fr); gap:16px; }
    .team .one { grid-column:auto; }
    .team .one img { aspect-ratio:4/3; }
    .facts { font-size:15px; max-width:720px; }
    .plan { max-width:720px; font-size:15px; }
    form { max-width:600px; }
    footer { padding:24px 36px; font-size:14px; }
    .bar { display:none; }
  }

  /* --- the client site's own additions (Nov 9 2026, tools/build_site.py) --- */
  nav.menu { display:flex; gap:4px; overflow-x:auto; padding:8px 10px; border-bottom:1px solid var(--line); background:#fff; scrollbar-width:none; }
  nav.menu a { white-space:nowrap; text-decoration:none; color:var(--ink); font-size:14px; font-weight:600; padding:7px 11px; border-radius:999px; border:1px solid var(--line); }
  nav.menu a.on { background:var(--accent); color:#fff; border-color:var(--accent); }
  .page { padding:16px 14px 6px; }
  .page h1 { font-size:24px; line-height:1.18; margin:0 0 10px; }
  .page p { font-size:16px; line-height:1.5; margin:0 0 12px; }
  .page .lead { font-size:17px; }
  .page ul.plain { padding-left:20px; margin:0 0 12px; font-size:16px; }
  .page ul.plain li { margin:0 0 4px; }
  .towns, .svclist { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .towns a, .svclist a { border:1px solid var(--line); border-radius:8px; padding:10px; font-size:14px; font-weight:600; text-decoration:none; color:var(--ink); }
  .plan-box { border:2px solid var(--accent); border-radius:10px; padding:14px; margin:0 0 12px; }
  .plan-box .price { font-size:26px; font-weight:700; margin:4px 0; }
  .plan-box .price small { font-size:14px; color:var(--muted); font-weight:400; }
  .embed { margin:0 0 12px; }
  .embed iframe { width:100%; border:0; min-height:420px; }
  footer .legal { margin-top:8px; font-size:12px; }
  footer .legal a { color:var(--muted); }
  footer nav a { margin-right:10px; }
  @media (min-width: 820px) {
    nav.menu { grid-column:1 / -1; padding:10px 32px; gap:8px; }
    nav.menu a { font-size:15px; }
    .page { grid-column:1 / -1; padding:36px 36px 12px; max-width:860px; }
    .page h1 { font-size:36px; }
    .page p, .page ul.plain { font-size:17px; }
    .towns, .svclist { grid-template-columns:repeat(3, 1fr); }
    section.page-section { grid-column:1 / -1; border-left:0; }
  }