/* Tekton Digital v3.1 engine pages (2026-11-02). Loaded after /assets/v3.css on every page the
   content engine builds (_engine/render.mjs): blog posts and the blog index, service hubs, town and
   area pages, and the HVAC service pages. v3.css carries the tokens, header, footer, buttons, ink
   grounds, FAQ rows and the final band; this file only adds what those pages need. Colours come from
   the v3.css tokens. Flat: no gradients, glows or soft shadows. Bump V3_PAGES_CSS in render.mjs when
   this file changes. */

.wrap.reading { max-width: 808px; }

/* Page head (ink): crumbs, meta line, the small lines under the buttons */
.crumbs { font-size: 0.88rem; color: var(--on-ink-muted); margin: 0 0 26px; }
.crumbs a { color: #fff !important; font-weight: 600; text-decoration: underline; text-decoration-color: var(--ink-3); text-underline-offset: 4px; }
.crumbs a:hover { text-decoration-color: var(--blue-hi); }
.crumbs span { color: var(--ink-3); margin: 0 8px; }
.page-head .eyebrow { text-decoration: none; }
.page-head .lede { margin-bottom: 28px; }
.page-head .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-3); font-size: 0.9rem; color: var(--on-ink-muted); }
.page-head .meta .byline a { font-weight: 700; }
.pillar-link { font-size: 0.95rem; margin: -12px 0 0; }
.pillar-link a { font-weight: 700; }
.area-facts { font: 600 0.76rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-hi); margin: -12px 0 26px; }
.head-more { margin: 18px 0 0; font-size: 0.95rem; }
.head-more a { font-weight: 700; text-decoration: none; }
.head-more a:hover { text-decoration: underline; }
.hero-note { margin: 14px 0 0; font-size: 0.88rem; color: var(--on-ink-muted); }
.sites-offer { margin: 26px 0 0; max-width: 40em; padding: 18px 22px; border: 1px solid var(--ink-3); border-radius: var(--r); }
.sites-offer p { margin: 0 0 8px; color: var(--on-ink-muted); font-size: 0.98rem; }
.sites-offer b { color: #fff; }

/* Long-form body */
.eng-body .prose { max-width: none; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: clamp(1.55rem, 3vw, 2rem); margin: 52px 0 14px; }
.prose h3 { font-size: 1.25rem; margin: 34px 0 10px; }
.prose h4 { font-size: 1.08rem; margin: 26px 0 8px; }
.prose p, .prose li { font-size: 1.08rem; line-height: 1.65; }
.prose p { margin: 0 0 20px; }
.prose ul, .prose ol { margin: 0 0 22px; }
.prose ol { padding-left: 1.4em; list-style: decimal; }
.prose li { margin: 0 0 10px; }
.prose ul > li { position: relative; padding-left: 24px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border: 2px solid var(--blue); border-radius: 2px; }
.prose ol > li { padding-left: 6px; }
.prose ol > li::marker { color: var(--blue); font-weight: 700; }
.prose a:not(.btn) { color: var(--blue); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:not(.btn):hover { color: var(--ink); }
.prose strong, .prose b { color: var(--ink); }
.prose code { font-family: var(--mono); font-size: 0.9em; background: var(--ground); border-radius: 6px; padding: 1px 6px; }
.prose blockquote { margin: 30px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--blue); }
.prose blockquote p { font-size: 1.18rem; line-height: 1.5; font-weight: 600; color: var(--ink); margin: 0; }
.prose hr { border: 0; height: 1px; background: var(--rule); margin: 44px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 0.98rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose th { color: var(--ink); }

/* The short answer: the line an answer engine quotes */
.answer-first { margin: 0 0 40px; padding: 22px 26px; border: 3px solid var(--ink); border-radius: var(--r); background: #fff; }
.prose .answer-first h2 { font: 600 0.74rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; }
.prose .answer-first p { font-size: 1.12rem; line-height: 1.55; color: var(--ink); margin: 0; }

/* FAQ inside long-form (v3.css styles the rows) */
.prose .faq { max-width: none; margin: 4px 0 28px; }
.prose .faq summary { font-size: 1.08rem; }
.prose .faq details p { margin-bottom: 20px; }
.prose .faq details > :is(ul, ol) { margin: -6px 0 22px; }
.prose .faq details li { font-size: 1rem; color: var(--muted); }

/* Area pages: at a glance, a quote, citations and sources */
.area-glance { margin: 0 0 40px; }
.prose .area-glance h2 { font: 600 0.74rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin: 0 0 10px; }
.area-glance dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; border-top: 1px solid var(--rule); }
.area-glance dt, .area-glance dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 1rem; line-height: 1.5; }
.area-glance dt { font: 600 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 15px 24px 12px 0; }
.area-glance dd { color: var(--ink); }
.prose .area-quote { margin: 0 0 40px; }
.area-quote figcaption { padding-left: 25px; font-size: 0.95rem; color: var(--muted); }
sup.cite { font-size: 0.7em; line-height: 0; margin-left: 2px; white-space: nowrap; }
.prose sup.cite a { text-decoration: none; }
.prose ol.sources li { font-size: 0.96rem; color: var(--muted); overflow-wrap: anywhere; }
.prose ol.sources li:target { background: var(--ground); border-radius: 4px; }

/* Guides, town lists and link rows, on the light grid */
.eng-more .pillar-section + .pillar-section { margin-top: 56px; }
.guides-head { font-size: clamp(1.5rem, 2.8vw, 2rem); margin: 0 0 24px; }
.post-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.post-card { flex: 0 1 calc((100% - 40px) / 3); display: flex; flex-direction: column; padding: 26px 26px 20px; background: #fff; border: 3px solid var(--ink); border-radius: var(--r); color: var(--text); text-decoration: none; }
.post-card:hover { border-color: var(--blue); }
.topic-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font: 600 0.7rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); margin: 0 0 12px; }
.topic-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.post-card :is(h2, h3) { font-size: 1.2rem; line-height: 1.25; margin: 0 0 10px; }
.post-card:hover :is(h2, h3) { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.post-card p { color: var(--muted); font-size: 0.96rem; line-height: 1.55; flex: 1 1 auto; margin: 0; }
.card-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--tint); font-size: 0.84rem; color: var(--muted); }
@media (max-width: 900px) { .post-list { gap: 16px; } .post-card { flex-basis: calc((100% - 16px) / 2); } }
@media (max-width: 600px) { .post-card { flex-basis: 100%; padding: 22px 20px 18px; } }

.area-links { display: flex; flex-wrap: wrap; gap: 10px; }
.area-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 700; font-size: 0.96rem; text-decoration: none; white-space: nowrap; }
.area-links a:hover { background: var(--ink); color: #fff; }
.area-list { margin: 0; border-top: 1px solid var(--rule); max-width: 46em; }
.area-list li { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.area-list a { font-weight: 800; font-size: 1.12rem; line-height: 1.3; color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 4px; }
.area-list a:hover { color: var(--blue); }
.area-list span { color: var(--muted); }
.area-list .area-meta { font: 600 0.72rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.area-list .area-svcs { font-size: 0.95rem; }
.area-list .area-svcs a { font-size: inherit; font-weight: 700; }

/* The ink offer band: Systems on the left, the free fix card on the right */
.eng-offer { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.eng-offer h2 { max-width: 14em; }
.eng-offer .big { font-size: 1.18rem; color: #fff; }
.eng-offer .big b { color: #fff; }
.eng-offer .actions { margin-top: 26px; }
.eng-offer .card-form .sub { margin-bottom: 14px; }
.eng-offer .card-form .fine { text-align: center; }
.eng-offer .pbox { margin: 0; }
@media (max-width: 900px) { .eng-offer { grid-template-columns: 1fr; gap: 36px; } }

/* Blog index */
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.filter-chip { min-height: 40px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink); font: 700 0.92rem/1 var(--sans); cursor: pointer; }
.filter-chip:hover { background: var(--ground); }
.filter-chip.is-active { background: var(--ink); color: #fff; }
.blog-group[hidden] { display: none; }
.group-head { display: flex; align-items: center; gap: 12px; font-size: clamp(1.45rem, 2.6vw, 1.9rem); margin: 52px 0 20px; }
.group-head .group-dot { width: 10px; height: 10px; border: 2px solid var(--blue); border-radius: 2px; flex-shrink: 0; }

/* HVAC service pages (/trades/<service>/) */
.vs-head h1 { max-width: 17em; }
.vs-line { max-width: 46em; margin: 0 0 18px; padding: 16px 20px; border: 1px solid var(--ink-3); border-radius: var(--r); }
.vs-line p { margin: 0; color: var(--on-ink-muted); }
.vs-line b { color: #fff; }
.vs-tools-line { max-width: 46em; margin: 0 0 28px; font-size: 0.98rem; color: var(--on-ink-muted); }
.vs-body .vs-sec { max-width: 46em; margin: 0 0 52px; }
.vs-body .vs-sec:last-child { margin-bottom: 0; }
.vs-body .vs-wide { max-width: none; }
.vs-body .vs-wide > .vs-intro { max-width: 46em; }
.vs-body h2 { margin-bottom: 16px; }
.vs-body p, .vs-body li { font-size: 1.08rem; line-height: 1.65; }
.vs-body ul, .vs-body ol { margin: 0 0 20px; }
.vs-body ol { padding-left: 1.4em; list-style: decimal; }
.vs-body li { margin: 0 0 10px; }
.vs-body ul > li { position: relative; padding-left: 24px; }
.vs-body ul > li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border: 2px solid var(--blue); border-radius: 2px; }
.vs-body :is(p, li) a:not(.btn) { font-weight: 700; text-decoration-thickness: 2px; }
.vs-body strong { color: var(--ink); }
.vs-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 26px; }
.vs-card { flex: 0 1 calc((100% - 36px) / 3); padding: 24px; background: #fff; border: 3px solid var(--ink); border-radius: var(--r); }
.vs-card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.vs-card p { margin: 0; font-size: 0.98rem !important; color: var(--muted); }
@media (max-width: 900px) { .vs-card { flex-basis: calc((100% - 18px) / 2); } }
@media (max-width: 600px) { .vs-card { flex-basis: 100%; } }
.vs-more h3 { font-size: 1.2rem; margin: 0 0 14px; }
.vs-more .area-links { margin-bottom: 32px; }
.vs-more .area-links:last-child { margin-bottom: 0; }

/* Phones: link-pill rows scroll sideways to the screen edge */
@media (max-width: 700px) {
  .area-links { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .area-links::-webkit-scrollbar { display: none; }
  .area-links a { flex: 0 0 auto; }
  .prose h2 { margin-top: 42px; }
  .prose p, .prose li { font-size: 1.04rem; }
  .answer-first { padding: 18px 18px; }
  .area-glance dl { grid-template-columns: 1fr; }
  .area-glance dt { border-bottom: 0; padding: 12px 0 0; }
  .area-glance dd { padding-top: 4px; }
  .page-head .actions .btn { flex: 1 1 100%; }
}