/* Page styles for industries (owner: see CONTRIBUTING.md). Shared tokens live in /assets/site.css. */

/* Opening stage: the statement on the left, an index of the four trades on the right (stacked on phones). */
.intro-grid { display: grid; gap: 2.5rem; align-items: end; }
.intro h1 { margin: 0 0 0.35em; max-width: 12ch; }
.intro .lead { max-width: 40ch; }
.intro-copy p:last-child { margin-bottom: 0; max-width: 52ch; }

/* In-page index: ruled rows with a short teal lead segment, the same rule vocabulary as Home's leak list. */
.jump ul { list-style: none; padding: 0; margin: 0; }
.jump li { position: relative; max-width: none; border-top: 1px solid var(--rule-navy); }
.jump li:last-child { border-bottom: 1px solid var(--rule-navy); }
.jump li::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.75rem; height: 3px; background: var(--teal); }
.jump a { display: grid; gap: 0.15rem; padding: 1rem 0 0.95rem; text-decoration: none; }
.jump-name { font-size: var(--step-2, 1.375rem); font-weight: 760; font-stretch: var(--title-stretch, 106%); line-height: 1.15; }
.on-navy .jump-line { color: var(--mist); font-size: var(--step-0); }
.jump a:hover .jump-name, .jump a:focus-visible .jump-name { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

/* Industry sections: heading, context and art on the left, what we handle on the right. */
.industry { border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.industry-grid { display: grid; gap: 2rem; align-items: start; }
.industry-head h2 { margin-bottom: 0.3em; }
.industry-head .lead { margin-bottom: 0; }
/* One trade illustration per industry (component styles in /assets/trades.css). The HVAC photo was retired
   2026-10-26: it repeated the HVAC illustration in a second visual language. */
.industry-art { margin-top: 2rem; max-width: 30rem; }

.focus { margin: 0; }
.focus > div { position: relative; padding: 1.25rem 0 1.2rem; border-top: 1px solid var(--rule); }
.focus > div::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.75rem; height: 3px; background: var(--teal); }
.focus > div:last-child { border-bottom: 1px solid var(--rule); }
.focus dt { color: var(--navy); font-weight: 720; font-stretch: var(--title-stretch, 106%); font-size: var(--step-2, 1.375rem); line-height: 1.2; }
.focus dd { margin: 0.35rem 0 0; font-size: var(--step-1); max-width: 58ch; }

/* Limits shared by every trade */
.limits-grid { display: grid; gap: 1.5rem 4rem; }
.limits h2 { margin: 0; max-width: 16ch; }
.limits-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; }
.limits-list li { position: relative; max-width: none; padding: 1.1rem 0 1.1rem; border-top: 1px solid var(--rule); font-size: var(--step-1); }
.limits-list li::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.75rem; height: 3px; background: var(--teal); }

@media (min-width: 60rem) {
  .intro-grid { grid-template-columns: 7fr 5fr; gap: 5rem; }
  .industry-grid { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .industry-head { position: sticky; top: 6rem; }
  .limits-grid { grid-template-columns: 4fr 8fr; align-items: start; }
}

/* Closing band */
.cta-band h2 { max-width: 16ch; font-size: var(--step-5); }
.cta-band .lead { max-width: 52ch; }