/* Northern Pines — content patterns for every page other than the home
   page: page heroes, sections, card grids, the estimate band, and the
   About / Contact / Gallery / Reviews / Process / legal / service-area
   blocks.

   Loads after /design-system/tokens.css, /design-system/components.css and
   /css/site.css, and like site.css it uses only design-system variables:
   no hex values, and softer shades are color-mix()es of two tokens. */

/* ---------- Page hero ----------
   A shorter version of the home hero: the fog-pines photo under the
   scrim, cream type, the eyebrow above a Cinzel headline. */
.page-hero {
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--on-pine); background-color: var(--pine);
  background-image: url('/design-system/images/fog-pines.jpg');
  background-image: image-set(url('/assets/brand/fog-pines.avif') type('image/avif'), url('/design-system/images/fog-pines.jpg') type('image/jpeg'));
  background-size: cover; background-position: center 30%;
  padding-block: var(--space-16) calc(var(--space-16) + var(--space-8));
}
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-photo); }
/* The trees of the section below rise into the bottom of the photo. */
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: -1;
  height: clamp(40px, 5vw, 72px); background: var(--surface-100);
  -webkit-mask: url('/assets/brand/pines-near.svg') repeat-x left bottom / auto 100%;
  mask: url('/assets/brand/pines-near.svg') repeat-x left bottom / auto 100%;
}
.page-hero__inner {
  width: 100%; max-width: 1248px; margin-inline: auto; padding-inline: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start;
}
.page-hero h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em;
  font-size: 48px; line-height: 54px; color: var(--on-pine); max-width: 20ch; text-wrap: balance;
}
.page-hero--lg h1 { font-size: 56px; line-height: 60px; }
.page-hero--sm h1 { font-size: 40px; line-height: 46px; }
.page-hero h1 em { font-style: normal; color: var(--lichen-text); }
.page-hero p.lede, .page-hero .lede { font-size: 18px; line-height: 28px; color: var(--on-pine); max-width: 56ch; text-wrap: pretty; }
.page-hero__meta { font-size: 14px; line-height: 20px; color: var(--on-pine); opacity: 0.85; }
.page-hero__stats { display: flex; gap: var(--space-8); flex-wrap: wrap; padding-top: var(--space-2); }
.page-hero__stat span { display: block; }
.page-hero__stat-num { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 38px; color: var(--on-pine); }
.page-hero__stat-label { font-size: 14px; line-height: 20px; color: var(--on-pine); opacity: 0.85; }
.page-hero--split .page-hero__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--space-8) var(--space-12); align-items: end;
}
.page-hero--split .page-hero__inner > div { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.page-hero__ctas, .cta-split__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.page-hero .np-btn--outline { color: var(--on-pine); border-color: var(--on-pine); }
.page-hero .np-btn--outline:hover { background: var(--glass); }
@media (max-width: 640px) {
  .page-hero { padding-block: var(--space-12) calc(var(--space-12) + var(--space-6)); }
  .page-hero__inner { padding-inline: var(--space-4); }
  .page-hero h1, .page-hero--lg h1, .page-hero--sm h1 { font-size: 34px; line-height: 40px; }
  .page-hero p.lede, .page-hero .lede { font-size: 17px; line-height: 26px; }
}

/* Body copy outside the hero. */
.lede { font-size: 18px; line-height: 28px; color: var(--ink); max-width: 60ch; }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-16); }
.section--tight { padding-block: var(--space-12); }
.section--loose { padding-block: var(--space-24); }
.section--inset { background: var(--surface-000); }
.section--bordered { border-block: 1px solid var(--line); }
.section__inner { width: 100%; max-width: 1248px; margin-inline: auto; padding-inline: var(--space-6); }
.section__inner--narrow { max-width: 820px; }
.section-head h2, h2.section-title {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em;
  font-size: 40px; line-height: 46px; color: var(--ink); max-width: 24ch; text-wrap: balance;
}
.section-head p:not(.np-eyebrow) { color: var(--ink-muted); font-size: 16px; line-height: 24px; max-width: 60ch; }
h2.section-title { margin-bottom: var(--space-3); }
p.section-sub { color: var(--ink-muted); font-size: 16px; line-height: 24px; max-width: 60ch; margin-bottom: var(--space-8); text-wrap: pretty; }
p.section-sub a { color: var(--lichen-text); }
@media (max-width: 640px) {
  .section { padding-block: var(--space-12); }
  .section--loose { padding-block: var(--space-16); }
  .section__inner { padding-inline: var(--space-4); }
  .section-head h2, h2.section-title { font-size: 28px; line-height: 34px; }
}

/* ---------- Card grid (credentials, service area, timeline) ---------- */
.grid-cards { display: grid; gap: var(--space-6); }
.grid-cards--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-cards--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-cards--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid-cards--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.card-cell {
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.card-cell--inset { background: var(--surface-000); }
.card-cell h3 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.card-cell p { color: var(--ink-muted); font-size: 16px; line-height: 24px; text-wrap: pretty; }
.card-cell__eyebrow {
  font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--lichen-text);
}
.card-cell__num { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 34px; color: var(--lichen-text); }
@media (max-width: 640px) { .card-cell { padding: var(--space-4); } }

/* ---------- Estimate band (copy + the design-system estimate form) ----------
   Same treatment as the home page's estimate section: the photo under the
   scrim, the form in a card on top. */
.cta-split {
  position: relative; isolation: isolate; color: var(--on-pine); background-color: var(--pine);
  background-image: url('/design-system/images/fog-pines.jpg');
  background-image: image-set(url('/assets/brand/fog-pines.avif') type('image/avif'), url('/design-system/images/fog-pines.jpg') type('image/jpeg'));
  background-size: cover; background-position: center 70%;
}
.cta-split::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim-photo); }
.cta-split__inner {
  width: 100%; max-width: 1248px; margin-inline: auto;
  padding: var(--space-24) var(--space-6);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-12); align-items: start;
}
.cta-split__inner > div:first-child { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; padding-top: var(--space-8); }
.cta-split h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em;
  font-size: 40px; line-height: 46px; color: var(--on-pine); text-wrap: balance;
}
.cta-split__inner > div:first-child p { color: var(--on-pine); font-size: 18px; line-height: 28px; max-width: 46ch; text-wrap: pretty; }
.cta-split__inner > div:first-child p a { color: var(--lichen-text); }
.cta-split__list { display: flex; flex-direction: column; gap: var(--space-3); }
.cta-split__list div { display: flex; align-items: center; gap: var(--space-3); font-size: 16px; color: var(--on-pine); }
.cta-split__list svg { width: 20px; height: 20px; flex: none; color: var(--lichen-text); }
.cta-split .np-btn--outline { color: var(--on-pine); border-color: var(--on-pine); }
.cta-split .np-btn--outline:hover { background: var(--glass); }
/* The form card keeps the page's own surfaces, not the photo's. */
.cta-split .estimate-form { color: var(--ink); }
@media (max-width: 900px) {
  .cta-split__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .cta-split__inner > div:first-child { padding-top: 0; }
}
@media (max-width: 640px) {
  .cta-split__inner { padding: var(--space-12) var(--space-4) var(--space-16); }
  .cta-split h2 { font-size: 28px; line-height: 34px; }
}

/* An inline link with an arrow ("See the full process"). */
.text-link {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  font-size: 15px; font-weight: 600; color: var(--lichen-text);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Photo placeholder ----------
   Design system: mist is the placeholder-media colour. The label says
   what photo belongs here until it is taken. */
.art-slot {
  display: flex; align-items: center; justify-content: center;
  background: var(--mist); border-radius: var(--radius-lg);
}
.art-slot span {
  font-size: 14px; line-height: 20px; font-weight: 600; text-align: center;
  color: var(--surface-000); padding: 0 var(--space-4); white-space: pre-line;
}

/* Small uppercase labels: the design system's eyebrow style. */
:where(.service-map__key b, .card-cell__eyebrow, .project-card__meta, .project-card dt,
       .contact-card__label, .contact-card dt, .contact-quicklinks span, .process-step__duration,
       .process-step__meta h3, .review-card__date) {
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}

/* ---------- Service-area map (contact page) ----------
   Geometry is generated — tools/make-service-map.py. Colour lives here and
   only here, so the map tracks the palette instead of freezing a copy of it. */
.service-map {
  margin: 0; padding: var(--space-6); container-type: inline-size;
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
/* The column this sits in is fluid (.contact-grid is auto-fit, no
   breakpoint), so the legend moves beside the map on the figure's own
   width, not the viewport's. */
.service-map__inner { display: grid; gap: var(--space-6); }
@container (min-width: 430px) {
  .service-map__inner { grid-template-columns: 232px 1fr; gap: var(--space-8); align-items: center; }
}
.service-map__svg { display: block; width: min(100%, 262px); height: auto; margin-inline: auto; }
/* Three tiers, weakest first: the whole state we would quote, the region we
   work in, the counties we are registered in. */
.service-map__outline { fill: var(--surface-300); stroke: var(--line-strong); stroke-width: 1.6; stroke-linejoin: round; }
.service-map__focus { fill: color-mix(in srgb, var(--lichen) 38%, var(--surface-300)); }
/* The state line, redrawn over the band so the Louisville end reads as
   being across a border rather than as a bump on Indiana. */
.service-map__border { fill: none; stroke: var(--line-strong); stroke-width: 1.6; stroke-linejoin: round; }
.service-map__county { fill: var(--lichen); stroke: var(--surface-200); stroke-width: 0.9; stroke-linejoin: round; transition: fill 160ms ease-out; }
@media (hover: hover) {
  .service-map__county:hover { fill: var(--lichen-text); }
}
.service-map__legend { display: flex; flex-direction: column; gap: var(--space-3); }
.service-map__key { display: grid; grid-template-columns: 12px 1fr; gap: 0 var(--space-3); align-items: start; font-size: 15px; line-height: 22px; color: var(--ink); text-wrap: pretty; }
.service-map__key b { display: block; color: var(--ink-muted); margin-bottom: var(--space-1); }
.service-map__swatch { width: 12px; height: 12px; margin-top: 2px; border-radius: 3px; background: var(--lichen); }
.service-map__swatch--focus { background: color-mix(in srgb, var(--lichen) 38%, var(--surface-300)); }
.service-map__swatch--rest { background: var(--surface-300); box-shadow: inset 0 0 0 1px var(--line-strong); }
.service-map__note { padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-muted); text-wrap: pretty; }
.service-map__note a { color: var(--lichen-text); }

/* ---------- Legal pages (Privacy / Terms) ---------- */
.legal-banner { background: var(--surface-000); border-bottom: 1px solid var(--line); padding-block: var(--space-4); }
.legal-banner p { font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.legal-section { margin-bottom: var(--space-12); }
.legal-section h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; font-size: 24px; line-height: 30px; color: var(--ink); margin-bottom: var(--space-3); }
.legal-section p, .legal-section li { color: var(--ink-muted); font-size: 16px; line-height: 26px; text-wrap: pretty; }
.legal-section p + p, .legal-section p + ul, .legal-section ul + p { margin-top: var(--space-3); }
.legal-section a, .legal-footnote a { color: var(--lichen-text); }
.legal-footnote { border-top: 1px solid var(--line); padding-top: var(--space-6); }
.legal-footnote p { color: var(--ink-muted); font-size: 16px; line-height: 26px; }

/* ---------- Reviews ---------- */
.filter-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-8); }
.filter-btn {
  min-height: 44px; padding: 0 var(--space-4); cursor: pointer;
  background: transparent; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.filter-btn:hover { background: var(--surface-300); }
.filter-btn[aria-pressed="true"] { background: var(--surface-300); border-color: var(--ink); }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-6); }
.review-card {
  display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6);
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.review-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.review-card__stars { color: var(--lichen-text); font-size: 16px; letter-spacing: 2px; }
.review-card__date { color: var(--ink-muted); }
.review-card p { font-size: 16px; line-height: 26px; color: var(--ink); text-wrap: pretty; }
.review-card__who { margin-top: auto; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.review-count { font-size: 14px; line-height: 20px; color: var(--ink-muted); margin-top: var(--space-6); }

/* ---------- Gallery ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-6); }
.project-card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
/* Design system: before/after pairs sit side by side, with a 2px lichen divider. */
.project-card__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--lichen); }
.project-card__photo { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: var(--mist); }
.project-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-card__photo span {
  position: absolute; left: var(--space-3); top: var(--space-3); z-index: 1;
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  background: var(--pine); color: var(--on-pine);
  font-size: 12px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em;
}
.project-card__body { flex: 1; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-6) var(--space-6); }
.project-card__meta { color: var(--lichen-text); }
.project-card h2 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); }
.project-card p { color: var(--ink-muted); font-size: 16px; line-height: 24px; text-wrap: pretty; }
.project-card dl { display: flex; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.project-card dt { color: var(--ink-muted); margin-bottom: var(--space-1); }
.project-card dd { margin: 0; font-size: 15px; color: var(--ink); }
.project-card .text-link { align-self: flex-start; }
@media (max-width: 640px) { .project-card__body { padding: var(--space-4); } }

/* ---------- About / Process ---------- */
.story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-12); align-items: start; }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-4); }
.photo-strip .art-slot { aspect-ratio: 3 / 4; }
.pull-quote {
  margin-top: var(--space-8); padding-left: var(--space-6); border-left: 2px solid var(--lichen);
  font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em;
  font-size: 24px; line-height: 32px; color: var(--ink); text-wrap: pretty;
}
.pull-quote cite { display: block; margin-top: var(--space-3); font-family: var(--font-sans); font-style: normal; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }

.process-step {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-8) var(--space-12); align-items: start;
  padding-top: var(--space-12); border-top: 1px solid var(--line);
}
.process-step__num { display: block; font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 60px; color: var(--lichen-text); margin-bottom: var(--space-3); }
.process-step h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.02em; font-size: 32px; line-height: 38px; color: var(--ink); margin-bottom: var(--space-3); }
.process-step__duration { color: var(--ink-muted); }
.process-step p { color: var(--ink-muted); font-size: 16px; line-height: 26px; max-width: 60ch; margin-bottom: var(--space-4); text-wrap: pretty; }
.process-step p:nth-of-type(2) { margin-bottom: var(--space-6); }
.process-step__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--line); }
.process-step__meta h3 { color: var(--lichen-text); margin-bottom: var(--space-2); }
.process-step__meta p { font-size: 15px; line-height: 22px; color: var(--ink); }
@media (max-width: 640px) {
  .process-step__num { font-size: 40px; line-height: 46px; }
  .process-step h2 { font-size: 26px; line-height: 32px; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: var(--space-12); align-items: start; }
.contact-stack { display: flex; flex-direction: column; gap: var(--space-6); }
.contact-card { padding: var(--space-6); background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.contact-card--plain { background: transparent; }
.contact-card__label { display: block; color: var(--lichen-text); margin-bottom: var(--space-2); }
.contact-card__phone { display: block; font-family: var(--font-display); font-weight: 600; font-size: 36px; line-height: 42px; color: var(--ink); text-decoration: none; }
.contact-card__phone:hover { text-decoration: underline; text-underline-offset: 6px; }
.contact-card__note { color: var(--ink-muted); font-size: 15px; line-height: 22px; margin-top: var(--space-3); }
.contact-card__note a, .contact-card dd a { color: var(--lichen-text); }
.contact-card h2 { font-family: var(--font-sans); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--ink); margin-bottom: var(--space-4); }
.contact-card dl { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-card dt { color: var(--ink-muted); margin-bottom: var(--space-1); }
.contact-card dd { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink); }
.contact-card dd small { font-size: 14px; color: var(--ink-muted); }
.contact-quicklinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--space-3); }
.contact-quicklinks a {
  display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4);
  background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md);
  text-decoration: none; color: var(--ink); transition: border-color 160ms ease-out;
}
.contact-quicklinks a:hover { border-color: var(--line-strong); }
.contact-quicklinks span { color: var(--ink-muted); }
.contact-quicklinks strong { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
@media (max-width: 640px) { .contact-card__phone { font-size: 28px; line-height: 34px; } }

/* Cross-links between the service-area city pages. */
.service-area-nearby { display: inline; }
.service-area-nearby a { white-space: nowrap; }
.service-area-nearby a:not(:last-of-type)::after { content: ','; color: var(--ink-muted); }

/* ---------- Small shared pieces ---------- */
.card-cell .card-cell__list { color: var(--ink); }
.section__note { margin-top: var(--space-8); color: var(--ink-muted); font-size: 16px; line-height: 24px; max-width: 70ch; text-wrap: pretty; }
.section__note a, .prose a { color: var(--lichen-text); }
.prose { color: var(--ink-muted); font-size: 16px; line-height: 26px; max-width: 64ch; text-wrap: pretty; }
.prose + .prose { margin-top: var(--space-4); }
/* What a tool page says when JavaScript is off. */
.notice {
  padding: var(--space-4) var(--space-6); border-radius: var(--radius-md);
  background: var(--surface-200); border: 1px solid var(--line-strong); border-left: 2px solid var(--status-warning);
  color: var(--ink); font-size: 16px; line-height: 26px; text-wrap: pretty;
}
.notice a { color: var(--lichen-text); }
.section-title + .section-sub, .section-title + .grid-cards, .section-title + .story-grid { margin-top: var(--space-6); }
h2.section-title:has(+ .grid-cards) { margin-bottom: var(--space-8); }
/* A card that is a link ("See our work", the 404 and thank-you next steps). */
a.card-cell { color: var(--ink); transition: border-color 160ms ease-out; }
a.card-cell:hover { border-color: var(--line-strong); }
a.card-cell:hover h3 { text-decoration: underline; text-underline-offset: 4px; }