/* BH Consulting Arborist
   Palette taken from the logo and the field photography:
   paper and studio grey from the portrait backdrop, pine from the needles,
   cone brown from the cone, hi-vis orange from the safety vest. */


:root {
  --paper: #f3f4f1;
  --studio: #d4d8db;
  --studio-deep: #c6cbcf;
  --ink: #1c2620;
  --ink-soft: #4a554d;
  --pine: #46601a;
  --pine-deep: #34480f;
  --cone: #8a5a24;
  --hivis: #e5631e;
  --hivis-deep: #c8520f;
  --rule: #c9cec6;
  --sheet: #f9faf7; /* lighter paper for bands, in place of pure white */
  --night: #1c2620;
  --night-text: #e6e9e3;

  --display: 'Overpass', 'Segoe UI', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --measure: 66ch;
  --wide: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
  --step: clamp(2.5rem, 5.5vw, 4.25rem);

  /* Motion: three speeds and one easing curve, used everywhere */
  --fast: 150ms;
  --base: 250ms;
  --slow: 450ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  font-feature-settings: 'kern', 'liga';
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }

/* Studio light: the paper is lit like the portrait backdrop, a touch brighter at the top centre
   and falling off gently toward the edges, with a fine grain so the gradient never shows steps.
   Both layers sit behind everything and stay put while the page scrolls, so the light feels like
   the room rather than part of the content. Sections with their own colour cover them. */
body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
body::before {
  background:
    radial-gradient(110% 65% at 50% 0%, rgb(255 255 255 / .6), rgb(255 255 255 / 0) 62%),
    radial-gradient(150% 115% at 50% 40%, rgb(0 0 0 / 0) 52%, rgb(64 80 70 / .085) 100%);
}
body::after {
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .15 0 0 0 0 .13 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--pine-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--hivis); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; top: 1rem; }

/* Type scale (perfect fourth, 1.333) */
h1, h2, h3 { font-family: var(--display); font-weight: 700; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 4.8vw, 3.8rem); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 1rem; }
h3 { font-size: 1.35rem; line-height: 1.25; margin: 2rem 0 .5rem; }
h4 { font: 600 1.0625rem/1.4 var(--sans); margin: 1.6rem 0 .35rem; }
p, ul, ol, dl { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.2rem; }
li { margin-bottom: .45rem; }
li::marker { color: var(--pine); }
strong { font-weight: 600; }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.3rem); line-height: 1.55; color: var(--ink); max-width: 40ch; text-wrap: pretty; }
.muted { color: var(--ink-soft); }
.small { font-size: .9rem; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--step) 0; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--measure); }
.prose > :last-child { margin-bottom: 0; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid transparent; }
.site-header.scrolled { border-bottom-color: var(--rule); }
.header-row { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.brand { display: block; flex: none; }
.brand img { width: 228px; height: auto; }
.nav { margin-left: auto; display: flex; align-items: center; gap: .25rem; }
.nav > a, .nav summary { font: 500 .975rem/1 var(--sans); color: var(--ink); text-decoration: none; padding: .7rem .75rem; border-radius: 4px; cursor: pointer; }
.nav > a:hover, .nav summary:hover, .nav details[open] summary { background: var(--studio); color: var(--ink); }
.nav > a[aria-current='page'] { box-shadow: inset 0 -2px 0 var(--pine); border-radius: 0; }
.nav details { position: relative; }
.nav summary { list-style: none; display: flex; align-items: center; gap: .35rem; }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ''; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav details[open] summary::after { transform: translateY(1px) rotate(225deg); }
.menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 15rem; background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: .4rem; box-shadow: 0 10px 30px -12px rgba(28, 38, 32, .35); }
.menu a { display: block; padding: .55rem .7rem; color: var(--ink); text-decoration: none; border-radius: 4px; font-size: .95rem; }
.menu a:hover, .menu a[aria-current='page'] { background: var(--paper); color: var(--pine-deep); }
.header-call { font: 600 .975rem/1 var(--sans); color: var(--ink); text-decoration: none; padding: .75rem 1rem; border: 1.5px solid var(--ink); border-radius: 4px; white-space: nowrap; }
.header-call:hover { background: var(--ink); color: var(--paper); }
.menu-toggle { display: none; }

@media (max-width: 960px) {
  .brand img { width: 190px; }
  .menu-toggle { display: inline-flex; margin-left: auto; align-items: center; gap: .5rem; font: 600 .95rem/1 var(--sans); background: none; border: 1.5px solid var(--ink); color: var(--ink); padding: .65rem .9rem; border-radius: 4px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--rule); flex-direction: column; align-items: stretch; padding: .5rem var(--gutter) 1.25rem; max-height: calc(100vh - 76px); overflow: auto; }
  .nav.open { display: flex; }
  .nav > a, .nav summary { padding: .9rem .25rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .menu { position: static; border: 0; box-shadow: none; background: transparent; padding: 0 0 .5rem .75rem; }
  .header-call { margin-top: 1rem; text-align: center; }
  .header-call.desktop { display: none; }
}
@media (min-width: 961px) { .header-call.mobile { display: none; } }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: 600 1rem/1 var(--sans); padding: 1rem 1.35rem; border-radius: 4px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; }
.btn-primary { background: var(--hivis); color: var(--ink); border-color: var(--hivis); }
.btn-primary:hover { background: var(--hivis-deep); border-color: var(--hivis-deep); color: #fff; }
.btn-plain { color: var(--ink); border-color: var(--ink); background: transparent; }
.btn-plain:hover { background: var(--ink); color: var(--paper); }

/* Hero (home) */
.hero { background: var(--studio); overflow: hidden; position: relative; isolation: isolate; }
/* Soft studio-light falloff, centred on the portrait. Multiplied over the photo too, so the photo's backdrop and the hero stay one surface. */
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: multiply;
  background: radial-gradient(ellipse 55% 75% at 74% 52%, rgb(255 255 255 / 0) 35%, rgb(150 160 165 / .16) 100%); }
.hero-copy { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 2rem; }
.hero-copy { padding: clamp(2.5rem, 4.5vw, 3.75rem) 0; }
.hero-copy .lede { max-width: 34ch; }
.hero-figure { align-self: end; margin: 0; position: relative; }
.hero-figure figcaption { z-index: 2; }
.hero-figure img { width: 100%; max-width: 620px; margin-left: auto; margin-right: auto; }
.hero-figure figcaption { position: absolute; right: 0; bottom: 1.25rem; font-size: .85rem; color: var(--ink-soft);  }
.hero-meta { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--studio-deep); display: flex; flex-wrap: wrap; gap: .5rem 2rem; font-size: .95rem; color: var(--ink-soft); }
.hero-meta a { color: var(--ink); }
.hero-meta { align-items: center; }
.hero-badge { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: var(--ink-soft); line-height: 1.4; }
.hero-badge img { width: 64px; height: auto; flex: none; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .15)); }
.hero-badge strong { display: block; color: var(--ink); font-weight: 600; }
.hero-badge:hover strong, .hero-badge:focus-visible strong { text-decoration: underline; }
.hero-notes { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; }
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding-bottom: 1.5rem; }
  .hero-figure img { max-width: 330px; margin: 0 auto; }
  .hero-figure figcaption { display: none; }
  .hero::after { background: radial-gradient(ellipse 80% 45% at 50% 82%, rgb(255 255 255 / 0) 30%, rgb(150 160 165 / .14) 100%); }
}

/* Page head (inner pages) */
.page-head { background: var(--studio); padding: clamp(2.75rem, 6vw, 4.75rem) 0 clamp(2.25rem, 5vw, 3.5rem); }
.page-head .lede { max-width: 52ch; }
.page-head.with-figure .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 3rem; align-items: center; }
.page-head.with-figure figure { margin: 0; }
.page-head.with-figure img { border-radius: 3px; }
/* Photo that lines up with the text beside it: top at the breadcrumb, bottom at the last line of the intro.
   The photo fills that box and is trimmed from the bottom (sweater) or the sides (backdrop), never the top. */
@media (min-width: 821px) {
  .page-head.fit-photo .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); align-items: stretch; }
  .page-head.fit-photo figure { position: relative; min-height: 15rem; }
  .page-head.fit-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
}
@media (max-width: 820px) { .page-head.with-figure.fit-photo figure { max-width: 520px; } }
@media (max-width: 820px) { .page-head.with-figure .wrap { grid-template-columns: 1fr; gap: 2rem; } .page-head.with-figure figure { max-width: 320px; } }
.crumbs { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.crumbs a { color: var(--ink-soft); }
.crumbs span[aria-hidden] { margin: 0 .4rem; }

/* Sections */
.section { padding: var(--step) 0; }
.section + .section { padding-top: 0; }
.section.band { padding: var(--step) 0; border-block: 1px solid var(--rule);
  /* A lifted sheet: lit from the top centre, settling to paper at the bottom edge */
  background: radial-gradient(90% 120% at 50% 0%, rgb(255 255 255 / .9), rgb(255 255 255 / 0) 70%), linear-gradient(180deg, var(--sheet), color-mix(in srgb, var(--sheet) 55%, var(--paper))); }
.section.band + .section { padding-top: var(--step); }
.section.dark { background: var(--night); color: var(--night-text); padding: var(--step) 0; }
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark a { color: #cfe39b; }
.section.dark + .section { padding-top: var(--step); }

/* Report-style rows: heading in the margin, text in the body column */
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: 1rem 4rem; padding: 2.25rem 0; position: relative; }
/* The rule above each row is drawn as its own line, so it can be ruled in as the row arrives (see Motion below) */
.row::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--rule); transform-origin: left center; }
.row:first-child { padding-top: 0; }
.row:first-child::before { display: none; }
.row > :first-child h2, .row > :first-child h3 { margin-top: 0; }
.row .prose { max-width: 62ch; }
.row-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.row-head h3 { font-size: 1.45rem; }
.row-head p { color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 820px) { .row { grid-template-columns: minmax(0, 1fr); gap: .25rem; } }

/* Long-form pages with a contents list */
.doc { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 4rem; align-items: start; }
.doc-toc { position: sticky; top: 6.5rem; font-size: .92rem; }
.doc-toc p { font-weight: 600; margin-bottom: .6rem; }
.doc-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--rule); }
.doc-toc li { margin: 0; }
.doc-toc a { display: block; padding: .35rem 0 .35rem .9rem; color: var(--ink-soft); text-decoration: none; margin-left: -1px; border-left: 2px solid transparent; }
.doc-toc a:hover { color: var(--ink); border-left-color: var(--pine); }
.doc-body { max-width: var(--measure); }
.doc-body h2 { margin-top: 3.5rem; padding-top: 2.25rem; border-top: 1px solid var(--rule); }
.doc-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 960px) { .doc { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .doc-toc { position: static; } }

/* Numbered steps: only for real sequences */
.steps { list-style: none; padding: 0; counter-reset: step; margin: 1.5rem 0; }
.steps > li { counter-increment: step; position: relative; padding: 0 0 1.25rem 3.25rem; margin: 0; border-left: 1px solid var(--rule); margin-left: 1rem; }
.steps > li:last-child { border-left-color: transparent; }
.steps > li::before { content: counter(step); position: absolute; left: -1rem; top: -.15rem; width: 2rem; height: 2rem; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--pine); color: var(--pine-deep); font: 600 .9rem/1.85rem var(--sans); text-align: center; }
.band .steps > li::before { background: var(--sheet); }
.steps h3, .steps h4 { margin-top: 0; }

/* Two audiences */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.paths > div { padding: 2.5rem 2.5rem 2.5rem 0; }
.paths > div + div { padding: 2.5rem 0 2.5rem 2.5rem; border-left: 1px solid var(--rule); }
.paths .q { font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.2; margin: .25rem 0 1rem; }
.paths .who { font-weight: 600; font-size: .95rem; color: var(--pine-deep); margin: 0; }
@media (max-width: 820px) { .paths { grid-template-columns: 1fr; } .paths > div, .paths > div + div { padding: 2rem 0; border-left: 0; } .paths > div + div { border-top: 1px solid var(--rule); } }

/* Intro with portrait */
.intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.intro figure { margin: 0; }
.intro img { border-radius: 3px; }
 /* Photo height follows the text beside it; width follows from the photo's own ratio */
.intro-fit { display: flex; align-items: flex-start; }
.intro-fit figure { flex: none; width: 316px; }
.intro-fit figure img { display: block; width: 100%; height: auto; }
.intro-fit .prose { flex: 1; min-width: 0; }
.intro-fit .prose > :first-child { margin-top: 0; }
.intro-fit .prose > :last-child { margin-bottom: 0; }
.intro figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .6rem; }
@media (max-width: 820px) { .intro { grid-template-columns: 1fr; } .intro figure { max-width: 420px; } .intro figure.hide-sm { display: none; } }

/* Figures inside text */
.figure { margin: 2rem 0; }
.figure img { border-radius: 3px; }
.figure figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .6rem; }
.figure.wide { max-width: none; }

/* Credentials */
.creds { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.creds li { margin: 0; min-width: 0; display: grid; grid-template-rows: 124px auto auto; gap: .6rem; align-content: start; justify-items: center; text-align: center; }
/* Each badge is sized to the same visual area rather than the same height,
   so tall badges and wide logos carry equal weight above their text. */
.creds img { align-self: center; max-width: 100%; height: auto; }
.cred-bcma img { width: 70px; }
.cred-traq img { width: 80px; }
.cred-444b img { width: 146px; height: 59px; object-fit: cover; object-position: left center; }
.cred-butternut img { width: 215px; }
.creds .cname { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.creds .cname span { display: block; font-weight: 400; color: var(--ink-soft); }
.dark .creds .cname span { color: #b9c0b8; }
.creds a { font-size: .9rem; }
@media (max-width: 820px) { .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Quote */
.quote { margin: 0; max-width: 46rem; }
.quote p { font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: 1.3; margin-bottom: 1rem; }
.quote footer { font-size: .95rem; color: var(--ink-soft); }

/* FAQ */
.faq { border-top: 1px solid var(--rule); max-width: var(--measure); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; font: 600 1.05rem/1.4 var(--sans); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: .25rem; top: .95rem; font: 400 1.5rem/1 var(--sans); color: var(--pine); }
.faq details[open] summary::after { content: '\2212'; }
.faq .answer { padding: 0 0 1.25rem; max-width: 62ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* Notes and tables */
.note { border-left: 3px solid var(--cone); padding: .2rem 0 .2rem 1.1rem; margin: 1.75rem 0; color: var(--ink); }
.note p:last-child { margin-bottom: 0; }
.updated { font-size: .9rem; color: var(--ink-soft); }
.table-wrap { overflow-x: auto; margin: 1.5rem 0 2rem; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .9rem .7rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; border-bottom: 1.5px solid var(--ink); }
td:first-child { font-weight: 600; }

/* Plan drawing */
.plan { margin: 2.5rem 0; }
.plan svg { width: 100%; height: auto; display: block; background: #fff; border: 1px solid var(--rule); border-radius: 3px; }
.plan figcaption { font-size: .88rem; color: var(--ink-soft); margin-top: .6rem; }

/* Closing call to action */
.closing > div { max-width: 46rem; margin: 0 auto; text-align: center; }
.closing .prose { margin-left: auto; margin-right: auto; text-wrap: balance; }
.closing .actions, .closing-contact { justify-content: center; }
.closing h2 { margin-bottom: .75rem; }
.closing .actions { gap: 1rem 1.75rem; }
.closing-contact { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; font-size: 1.02rem; }
.closing-contact a { color: var(--ink); }
/* Call to action: studio grey like the hero, so it reads as its own block above the dark footer */
.section.closing-band { background: var(--studio); color: var(--ink); padding: var(--step) 0; }
.section.closing-band .prose, .closing-band .contact-lines span { color: var(--ink-soft); }

/* Contact form */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; max-width: 46rem; }
.form-grid .full { grid-column: 1 / -1; }
label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .35rem; }
label .opt { font-weight: 400; color: var(--ink-soft); }
input, select, textarea { width: 100%; font: 400 1rem/1.4 var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #aab2a9; border-radius: 4px; padding: .8rem .85rem; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--hivis); outline-offset: 1px; border-color: var(--ink); }
textarea { min-height: 9rem; resize: vertical; }
input[type='file'] { padding: .6rem; background: var(--paper); }
.hint { font-size: .88rem; color: var(--ink-soft); margin: .35rem 0 0; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 1rem; font-weight: 600; }
.form-status.error { color: #a1260d; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--night); color: var(--night-text); padding: 2.75rem 0 1.25rem; font-size: .9rem; line-height: 1.5; }
.site-footer a { color: var(--night-text); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 26rem) auto auto; justify-content: space-between; gap: 1.5rem 2.5rem; }
.footer-grid h2 { font: 600 .9rem/1.4 var(--sans); color: #fff; margin: 0 0 .55rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: .2rem; }
.footer-brand p { margin: 0 0 .6rem; }
.footer-brand > img { width: 230px; margin-bottom: .9rem; }
.footer-badge { display: inline-flex; align-items: center; gap: .75rem; margin-top: .2rem; color: #aeb6ad; font-size: .875rem; line-height: 1.45; text-decoration: none; }
.footer-badge img { width: 52px; height: auto; flex: none; }
.footer-badge > span { max-width: 15rem; }
.hero-badge u, .footer-badge u { text-underline-offset: .2em; }
.footer-badge:hover span, .footer-badge:focus-visible span { color: #fff; text-decoration: underline; }
.footer-util { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid #364238; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.footer-base { margin-top: .25rem; padding-top: .6rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; color: #aeb6ad; font-size: .875rem; }
.footer-base a { color: #aeb6ad; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.25rem; } .footer-brand { grid-column: 1 / -1; } }


/* Related links at the end of service pages */
.related { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 0; list-style: none; margin: 0; }
.related li { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
/* Call and text bar, phones only. Slides up once the visitor scrolls past the page header,
   and tucks away again when the closing band or footer (which carry the same details) come into view. */
.contact-bar { display: none; }
@media (max-width: 820px) {
  .contact-bar { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: .55rem var(--gutter) calc(.55rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(6px); border-top: 1px solid var(--rule); transform: translateY(110%); visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s; }
  .contact-bar.show { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .contact-bar a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; border-radius: 4px;
    font: 600 .975rem/1 var(--sans); text-decoration: none; border: 1.5px solid var(--ink); color: var(--ink); }
  .contact-bar .cb-call { background: var(--hivis); border-color: var(--hivis); }
  .contact-bar .cb-call:active { background: var(--hivis-deep); border-color: var(--hivis-deep); color: #fff; }
  .contact-bar .cb-text:active { background: var(--ink); color: var(--paper); }
}
@media (prefers-reduced-motion: reduce) { .contact-bar, .contact-bar.show { transition: none; } }

/* Motion
   One-time moments: pages crossfade into each other, the rule above each report row
   is drawn in pine and settles to grey, and the tree protection plan draws itself in site order.
   One scroll-linked cue: the line through numbered steps fills as you read them.
   The small script in <head> (src/motion-boot.mjs) adds .motion to <html> before the page is drawn,
   only when the browser can run this and the visitor hasn't asked for reduced motion.
   Without it, everything shows in its normal resting state. Nothing here applies to print. */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  /* The header and the phone call bar stay put while the page under them changes */
  .site-header { view-transition-name: site-header; }
  .contact-bar { view-transition-name: contact-bar; }
  ::view-transition-old(root) { animation: vt-out var(--fast) ease-in both; }
  ::view-transition-new(root) { animation: vt-in var(--slow) var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }

@media screen {
  /* Report rows */
  .motion .row:not(:first-child):not(.ruled)::before { transform: scaleX(0); }
  .motion .row.ruling::before { animation: rule-in 1.1s var(--ease) var(--d, 0ms) both; }

  /* Tree protection plan: waits blank until it's on screen, then draws (start times are the --d values in src/drawings.mjs) */
  .plan .pd-grow, .plan .pd-pop { transform-box: fill-box; transform-origin: center; }
  .motion .plan[data-draw]:not(.drawn) .pd-fade { opacity: 0; }
  .motion .plan[data-draw]:not(.drawn) .pd-house { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
  .motion .plan[data-draw]:not(.drawn) .pd-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .motion .plan[data-draw]:not(.drawn) .pd-grow,
  .motion .plan[data-draw]:not(.drawn) .pd-pop { transform: scale(0); }
  .plan.drawing .pd { animation-delay: var(--d, 0ms); animation-fill-mode: both; animation-timing-function: var(--ease); }
  .plan.drawing .pd-fade { animation-name: pd-fade; animation-duration: var(--slow); }
  .plan.drawing .pd-house { animation-name: pd-house; animation-duration: 700ms; }
  .plan.drawing .pd-draw { animation-name: pd-draw; animation-duration: 550ms; }
  .plan.drawing .pd-grow { animation-name: pd-grow; animation-duration: 700ms; }
  .plan.drawing .pd-pop { animation-name: pd-grow; animation-duration: var(--base); }

  /* Numbered steps: the line fills in pine as you read down, and each number fills when you reach it */
  .motion .steps > li::before { z-index: 1; transition: background-color var(--base) var(--ease), color var(--base) var(--ease); }
  .motion .steps > li:not(:last-child)::after { content: ''; position: absolute; left: -1.5px; top: 0; bottom: 0; width: 2px;
    background: var(--pine); transform-origin: top center; transform: scaleY(var(--p, 0)); }
  .motion .steps > li.reached::before { background: var(--pine); color: #fff; }
}
@keyframes rule-in {
  0% { transform: scaleX(0); background: var(--pine); }
  55% { transform: scaleX(1); background: var(--pine); }
  100% { transform: scaleX(1); background: var(--rule); }
}
@keyframes pd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pd-draw { from { stroke-dasharray: 1; stroke-dashoffset: 1; } to { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes pd-house {
  0% { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
  70% { stroke-dasharray: 1; stroke-dashoffset: 0; fill-opacity: 0; }
  100% { stroke-dasharray: 1; stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes pd-grow { from { transform: scale(0); } to { transform: scale(1); } }

/* Replay link, shown under the plan once it has finished drawing */
.plan-replay { font: inherit; color: var(--pine); background: none; border: 0; padding: 0; margin-left: .35rem; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; cursor: pointer; }
.plan-replay:hover { color: var(--pine-deep); text-decoration-thickness: 2px; }

/* "On this page": the section you're reading is marked, and the pine marker slides between items.
   This is wayfinding rather than decoration, so it works with reduced motion too (it just doesn't slide). */
.doc-toc ol { position: relative; }
.doc-toc ol::before { content: ''; position: absolute; left: -1px; top: 0; width: 2px; height: var(--h, 0); background: var(--pine);
  transform: translateY(var(--y, 0)); opacity: 0; pointer-events: none; }
.doc-toc ol.tracking::before { opacity: 1; }
.doc-toc ol.tracking.ready::before { transition: transform var(--slow) var(--ease), height var(--slow) var(--ease); }
.doc-toc a[aria-current] { color: var(--ink); }

@media print { .site-header, .site-footer, .contact-bar, .doc-toc, .actions { display: none; } body { background: #fff; } body::before, body::after { display: none; } }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h-small { font-size: 1.45rem; }

.signature { display: block; width: 170px; height: auto; margin-top: 1.25rem; }
.section-sig { padding-bottom: clamp(2rem, 4vw, 3rem); }
.band-gap { height: var(--step); }
.legal h2 { font-size: 1.6rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.25rem; }
.legal .updated { margin-bottom: 2rem; }
.file-list { list-style: none; padding: 0; margin: .5rem 0 0; font-size: .9rem; }
.file-list li { display: flex; gap: .75rem; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--rule); margin: 0; }
.file-list li span:last-child { color: var(--ink-soft); white-space: nowrap; }
.file-list li.total { border-bottom: 0; font-weight: 600; }
.file-list li.over span { color: #a1260d; }

/* Official sources block at the end of each city guide */
.sources { margin-top: 3.5rem; padding-top: 2.25rem; border-top: 1px solid var(--rule); }
.doc-body .sources h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.sources ul { padding-left: 1.1rem; }
.sources li { margin: .35rem 0; }
table caption { text-align: left; font-weight: 600; padding-bottom: .5rem; }

/* On pages with the "On this page" sidebar, line the FAQ up with the body text column */
@media (min-width: 961px) {
  section:has(> .doc) + section[aria-labelledby="faq-h"] > .wrap { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 4rem; }
  section:has(> .doc) + section[aria-labelledby="faq-h"] > .wrap > * { grid-column: 2; }
}