/* Northern Pines — the site layer on top of the design system.

   Load order on every page:
     /design-system/tokens.css      colours, type, space, radius (do not edit)
     /design-system/components.css  np-btn, np-hero, np-card, np-tile, np-field, np-header, np-badge
     /css/site.css                  this file: page chrome and shared patterns
     /css/<page>.css                anything only one page needs

   Everything here is built from design-system variables. There are no hex
   values in this file; where a softer or deeper shade is needed it is mixed
   from two tokens with color-mix(), so a change to tokens.css carries
   through. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; }
img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, fieldset { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
a { color: var(--lichen-text); text-underline-offset: 3px; }
[hidden] { display: none !important; }

/* Design system: a 2px solid focus ring with a 2px offset on every
   interactive element, not only the ones components.css lists. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* The header is sticky; land anchored sections below it, not under it. */
:where(section, [id]) { scroll-margin-top: 84px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* First tab stop on every page. Off-screen until focused — never
   display:none, which would take it out of the tab order. */
.skip-link {
  position: fixed; left: var(--space-4); top: var(--space-3); z-index: 200;
  transform: translateY(-160%);
  transition: transform 160ms ease-out;
}
.skip-link:focus { transform: none; }

/* ---------- Type scale on phones (design system: display-xl 40px,
   display-l 28px; body text never below 16px) ---------- */
.muted { color: var(--ink-muted); }
@media (max-width: 640px) {
  .display-xl { font-size: 40px; line-height: 46px; }
  .display-l { font-size: 28px; line-height: 34px; }
  .heading { font-size: 24px; line-height: 30px; }
}

/* ---------- Icons: one outline family, 20px, 1.5px stroke ---------- */
.icon {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon-defs, .house-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: 1248px; margin-inline: auto; padding-inline: var(--space-6); }
.section { padding-block: var(--space-16); }
.section--deep { background: var(--surface-000); }
.section-head { display: flex; flex-direction: column; gap: var(--space-3); max-width: 760px; margin-bottom: var(--space-8); }
.section-head--split {
  max-width: none;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-3) var(--space-12); align-items: end;
}
.section-head--split > div { display: flex; flex-direction: column; gap: var(--space-3); }
.section-head p:not(.np-eyebrow) { max-width: 60ch; }
@media (max-width: 860px) {
  .section-head--split { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: var(--space-4); }
  .section { padding-block: var(--space-12); }
  .section-head { margin-bottom: var(--space-6); }
}

/* Checklist with a small square bullet, used in copy blocks. */
.checks { display: grid; gap: var(--space-3); }
.checks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.checks .icon { margin-top: 2px; color: var(--lichen-text); }

/* ---------- Pine treeline: section edges ----------
   Two silhouette strips (assets/brand/pines-*.svg, generated by
   tools/make-treeline.py) used as masks, so the trees are painted in the
   colour of the section they grow out of. Put .treeline on an element at
   the top edge of a section; it rises above that edge into the section
   before it. --treeline-color defaults to the deepest surface. */
.treeline {
  --treeline-color: var(--surface-000);
  position: relative; height: 0; z-index: 1; pointer-events: none;
}
.treeline::before, .treeline::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  -webkit-mask: url('/assets/brand/pines-far.svg') repeat-x left bottom / auto 100%;
  mask: url('/assets/brand/pines-far.svg') repeat-x left bottom / auto 100%;
}
.treeline::before {
  height: clamp(72px, 9vw, 132px);
  background: color-mix(in srgb, var(--treeline-color) 55%, transparent);
  -webkit-mask-position: 37% bottom; mask-position: 37% bottom;
}
.treeline::after {
  height: clamp(44px, 5.5vw, 80px);
  background: var(--treeline-color);
  -webkit-mask-image: url('/assets/brand/pines-near.svg'); mask-image: url('/assets/brand/pines-near.svg');
}

/* ---------- Site header (design system SiteHeader) ---------- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: var(--pine);
  border-bottom: 1px solid var(--line);
}
.site-head__bar { max-width: 1248px; margin-inline: auto; min-height: 68px; }
.site-head__brand {
  display: flex; align-items: center; gap: var(--space-3);
  margin-right: auto; color: var(--on-pine); text-decoration: none;
}
.site-head__brand .np-header__name { margin-right: 0; white-space: nowrap; }
.site-head__wordmark { display: flex; flex-direction: column; line-height: 1.1; }
.site-head__tagline {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  white-space: nowrap; opacity: 0.8; margin-top: 2px;
}
.site-nav { align-items: center; }
.site-nav > a, .site-nav__toggle { padding-block: var(--space-3); }
.site-nav__group { position: relative; }
.site-nav__toggle {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font: inherit; color: var(--on-pine); opacity: 0.85;
  background: none; border: 0; padding-inline: 0; cursor: pointer;
}
.site-nav__toggle:hover, .site-nav__toggle[aria-expanded="true"] { opacity: 1; }
.site-nav__toggle .icon { width: 16px; height: 16px; transition: transform 160ms ease-out; }
.site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.site-nav__menu {
  position: absolute; top: calc(100% + var(--space-2)); left: 50%;
  transform: translateX(-38%);
  width: 520px; padding: var(--space-3);
  background: var(--surface-200); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lift);
}
.site-nav__menu ul { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.np-header__nav .site-nav__menu a {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius-md);
  color: var(--ink); opacity: 1;
}
.np-header__nav .site-nav__menu a:hover { background: var(--surface-300); text-decoration: none; }
.np-header__nav .site-nav__menu a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.site-nav__menu a .icon { margin-top: 2px; }
.site-nav__menu strong { display: block; font-weight: 600; font-size: 15px; line-height: 20px; }
.site-nav__menu small { display: block; color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 400; margin-top: 2px; }
.site-nav__all { border-top: 1px solid var(--line); margin-top: var(--space-2); padding-top: var(--space-2); }
.np-header__nav .site-nav__all a { color: var(--lichen-text); font-weight: 600; font-size: 15px; padding-block: var(--space-2); }

.site-head__phone {
  color: var(--on-pine); text-decoration: none; font-size: 15px; font-weight: 600;
  white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2);
  padding-block: var(--space-3);
}
.site-head__phone:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-head__burger {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none;
  background: transparent; color: var(--on-pine);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer;
}
.site-head__burger .icon-close { display: none; }
.site-head__burger[aria-expanded="true"] .icon-open { display: none; }
.site-head__burger[aria-expanded="true"] .icon-close { display: block; }

/* Mobile drawer */
.site-drawer {
  border-top: 1px solid var(--line);
  padding: var(--space-4) var(--space-6) var(--space-8);
  max-height: calc(100vh - 68px); max-height: calc(100dvh - 68px); overflow-y: auto;
  background: var(--pine);
}
.site-drawer__list { display: grid; }
.site-drawer__list > li > a {
  display: flex; align-items: center; min-height: 52px;
  color: var(--on-pine); text-decoration: none; font-size: 17px; font-weight: 600;
  border-bottom: 1px solid var(--line);
}
.site-drawer__services { padding-block: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.site-drawer__services .np-eyebrow { margin-bottom: var(--space-2); }
.site-drawer__services ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.site-drawer__services a {
  display: flex; align-items: center; gap: var(--space-3); min-height: 48px;
  color: var(--on-pine); text-decoration: none; font-size: 16px; font-weight: 500;
}
.site-drawer__more { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); padding-top: var(--space-2); }
.site-drawer__more a { display: flex; align-items: center; min-height: 44px; color: var(--ink-muted); text-decoration: none; font-size: 15px; }
.site-drawer__actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }

@media (max-width: 1100px) { .site-head__phone { display: none; } }
@media (max-width: 940px) {
  .site-head .np-header__nav { display: none; }
  .site-head__burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .site-head__bar { padding-inline: var(--space-4); }
  .site-head__cta { display: none; }
}

/* ---------- Glass link tiles on the photo (design system LinkTile) ---------- */
.np-tile .icon { color: var(--on-pine); }

/* ---------- Project / service cards (design system ProjectCard) ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
@media (max-width: 1024px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.np-card { transition: border-color 160ms ease-out; }
.np-card:hover { border-color: var(--line-strong); }
.np-card:hover .np-card__link { text-decoration: underline; text-underline-offset: 4px; }
.np-card__media { overflow: hidden; }
.np-card__media > picture, .np-card__media > picture img, .np-card__media > svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.np-card__media > picture img { object-fit: cover; }
.np-card__media .np-badge { z-index: 1; }
@media (max-width: 640px) { .np-card__body { padding: var(--space-4); } }

/* ---------- Line-art house (tools/make-house-art.py) ----------
   For a service with no job photo yet. The drawing sits on mist, the
   placeholder-media colour, and the service's own part is drawn in.
   Every colour is a token or a mix of two. */
.house-art {
  --art-bg: var(--mist);
  --art-ink: var(--surface-000);
  --art-line: color-mix(in srgb, var(--art-ink) 38%, var(--art-bg));
  --art-fill: color-mix(in srgb, var(--art-ink) 8%, var(--art-bg));
  --art-tree: color-mix(in srgb, var(--art-ink) 12%, var(--art-bg));
  --art-hl: var(--pine);
  --art-hl-line: var(--mist);
  background: var(--art-bg);
}
#np-house path { vector-effect: non-scaling-stroke; }
#np-house .h-tree { fill: var(--art-tree); }
#np-house .h-ground { fill: color-mix(in srgb, var(--art-tree) 60%, var(--art-bg)); }
#np-house :is(.h-wall, .h-roof, .h-frame, .h-door, .h-gutter, .h-slab) { fill: var(--art-fill); stroke: var(--art-line); stroke-width: 1.25; }
#np-house .h-glass { fill: color-mix(in srgb, var(--art-line) 45%, var(--art-fill)); stroke: var(--art-line); stroke-width: 1; }
#np-house :is(.h-course, .h-line) { fill: none; stroke: var(--art-line); stroke-width: 0.75; }
#np-house .h-pipe { fill: none; stroke: var(--art-line); stroke-width: 4; stroke-linecap: round; }
#np-house .h-knob { fill: var(--art-line); }
#np-house .hl { opacity: 0; transition: opacity 200ms ease-out; }
#np-house .hl-fill { fill: var(--art-hl); stroke: var(--art-hl); stroke-width: 1.25; }
#np-house .hl-glass { fill: color-mix(in srgb, var(--art-hl-line) 30%, var(--art-hl)); stroke: var(--art-hl-line); stroke-width: 1; }
#np-house .hl-course { fill: none; stroke: var(--art-hl-line); stroke-width: 1; }
#np-house .hl-pipe { fill: none; stroke: var(--art-hl-pipe, var(--art-hl)); stroke-width: 5; stroke-linecap: round; }
#np-house .hl-roof { opacity: var(--hl-roof, 0); }
#np-house .hl-gutter { opacity: var(--hl-gutter, 0); }
#np-house .hl-siding { opacity: var(--hl-siding, 0); }
#np-house .hl-window { opacity: var(--hl-window, 0); }
#np-house .hl-door { opacity: var(--hl-door, 0); }
#np-house .hl-concrete { opacity: var(--hl-concrete, 0); }

/* ---------- Before / after comparison ----------
   Design system: before/after pairs sit side by side with a 2px lichen
   divider. Here the divider moves: a native range input sits over the
   pair, so it works with a mouse, a finger and the arrow keys. Without
   JavaScript it rests at the halfway mark. */
.ba {
  --knob: 44px;
  --v: 0.5;
  --split: calc(var(--knob) / 2 + (100% - var(--knob)) * var(--v));
  position: relative; overflow: hidden; isolation: isolate;
  aspect-ratio: 3 / 4; background: var(--mist);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.ba picture, .ba img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ba img { object-fit: cover; }
.ba__after { clip-path: inset(0 0 0 var(--split)); }
.ba__label {
  position: absolute; top: var(--space-3); z-index: 2;
  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;
  pointer-events: none;
}
.ba__label--before { left: var(--space-3); }
.ba__label--after { right: var(--space-3); }
.ba__divider {
  position: absolute; top: 0; bottom: 0; left: var(--split); z-index: 2;
  width: 2px; margin-left: -1px; background: var(--lichen); pointer-events: none;
}
.ba__knob {
  position: absolute; top: 50%; left: 50%; width: var(--knob); height: var(--knob);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: var(--radius-full); background: var(--pine); color: var(--on-pine);
  border: 2px solid var(--lichen);
}
.ba__knob .icon { width: 20px; height: 20px; }
.ba__range {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize; touch-action: pan-y;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--knob); height: 100vh; }
.ba__range::-moz-range-thumb { width: var(--knob); height: 100vh; border: 0; }
.ba:has(.ba__range:focus-visible) .ba__knob { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------- Estimate form (design system TextField + Button) ---------- */
.estimate-form {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8); background: var(--surface-200);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.estimate-form__head { display: flex; flex-direction: column; gap: var(--space-1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.np-input { width: 100%; }
.np-input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.np-input:-webkit-autofill, .np-input:-webkit-autofill:hover, .np-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-300) inset;
  caret-color: var(--ink);
}
.svc-pick legend { padding: 0; margin-bottom: var(--space-2); }
.svc-pick__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.svc-pick__chip { position: relative; }
.svc-pick__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.svc-pick__chip span {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}
.svc-pick__chip span::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 1px solid var(--line-strong); border-radius: 3px;
}
.svc-pick__chip input:checked + span { background: var(--surface-300); border-color: var(--ink); }
.svc-pick__chip input:checked + span::before {
  background: var(--lichen); border-color: var(--lichen);
  box-shadow: inset 0 0 0 2px var(--surface-300);
}
.svc-pick__chip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.estimate-form__fine { font-size: 14px; line-height: 20px; color: var(--ink-muted); text-align: center; }
/* reCAPTCHA: reserve its box so it doesn't shove the submit button down
   when it arrives (js/leadform.js loads it on first touch or dwell), and
   say what the space is while it loads. */
.estimate-form .g-recaptcha { min-height: 78px; }
.lead-form.is-verifying .g-recaptcha:empty::before {
  content: 'Loading verification\2026';
  display: flex; align-items: center; height: 78px;
  font-size: 14px; color: var(--ink-muted);
}
@media (max-width: 640px) {
  .estimate-form { padding: var(--space-6) var(--space-4); }
  .form-row { grid-template-columns: 1fr; }
}
/* Three across leaves "Concrete" clipped on a phone; two across fits. */
@media (max-width: 440px) {
  .svc-pick__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Footer ---------- */
.site-foot { position: relative; background: var(--surface-000); color: var(--ink); padding-top: var(--space-16); }
.site-foot__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-12) var(--space-8); padding-bottom: var(--space-12);
}
.site-foot__brand { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.site-foot__logo img { width: 88px; height: 88px; border-radius: var(--radius-full); }
.site-foot__brand p { color: var(--ink-muted); max-width: 36ch; }
.site-foot__nap { font-style: normal; display: flex; flex-direction: column; }
.site-foot__nap a { color: var(--ink); text-decoration: none; display: inline-flex; min-height: 36px; align-items: center; font-weight: 600; }
.site-foot__nap a:hover { text-decoration: underline; }
.site-foot__nap span { color: var(--ink-muted); min-height: 28px; display: inline-flex; align-items: center; }
.site-foot__h { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lichen-text); margin-bottom: var(--space-3); }
.site-foot__links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); text-decoration: none; }
.site-foot__links a:hover { text-decoration: underline; }
.site-foot__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-6);
  padding-block: var(--space-4); border-top: 1px solid var(--line);
  font-size: 14px; line-height: 20px; color: var(--ink-muted);
}
.site-foot__bottom ul { display: flex; gap: var(--space-6); }
.site-foot__bottom a { color: var(--ink-muted); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.site-foot__bottom a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 960px) { .site-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-foot__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .site-foot__grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Mobile call / estimate bar ---------- */
.mobile-bar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  gap: var(--space-3); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
  background: var(--surface-000); border-top: 1px solid var(--line); box-shadow: var(--shadow-lift);
}
.mobile-bar .np-btn { flex: 1; }
.mobile-bar .np-btn--outline { flex: 0 0 auto; }
@media (max-width: 780px) {
  .mobile-bar { display: flex; }
  /* The open menu carries the same two actions. */
  .site-head:has(.site-drawer:not([hidden])) ~ .mobile-bar { display: none; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}