/* Horizon Outdoor Works: site styles.
   Granite and pine on pale stone, Georgia red clay for anything underground, and one pink for
   the action we want (the estimate). Pink is used for nothing else, so the eye goes to it. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-text.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-next-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --stone: #eef0ea;
  --paper: #f8f9f5;
  --granite: #1f2624;
  --granite-2: #4a5451;
  --line: #c9cec6;
  --pine: #1d3a31;
  --pine-2: #2c5446;
  --pine-ink: #d6e2db;
  --clay: #a8461f;
  --clay-tint: #ebcdbb; /* red clay in the drawing */
  --tape: #c8245a;
  --tape-dark: #a11c48;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --f-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* drawing labels only */

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --band: clamp(48px, 7vw, 96px);
  --radius: 6px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--stone);
  color: var(--granite);
  font-family: var(--f-body);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pine-2); }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-weight: 800; letter-spacing: -.015em; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; }
h2 { letter-spacing: -.01em; font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--granite); color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 8px; }

.lead { font-size: clamp(1.125rem, 1.6vw, 1.25rem); color: var(--granite-2); max-width: 44ch; }
.section-intro { color: var(--granite-2); max-width: 62ch; margin-bottom: 2rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  font: 700 1rem/1.2 var(--f-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn .icon { width: 18px; height: 18px; flex: none; }
.btn-tape { background: var(--tape); color: #fff; }
.btn-tape:hover { background: var(--tape-dark); color: #fff; }
.btn-ghost { border-color: var(--granite-2); color: var(--granite); background: transparent; }
.btn-ghost:hover { border-color: var(--granite); background: var(--paper); color: var(--granite); }
.btn-ghost-light { border-color: var(--pine-ink); color: #fff; background: transparent; }
.btn-ghost-light:hover { color: #fff; background: var(--pine-2); }
.btn-block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.5rem; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.link-arrow .icon { width: 18px; height: 18px; }
.link-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.link-phone .icon { width: 16px; height: 16px; }
.trust { margin: 14px 0 0; font-size: .95rem; color: var(--granite-2); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--stone) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.site-header__bar { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin: 0; white-space: nowrap; flex: none; }
.brand__name { font-family: var(--f-display); font-weight: 800; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.brand:hover { color: inherit; }
.primary-nav { margin-left: auto; }
.primary-nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.primary-nav a { display: block; white-space: nowrap; padding: 10px 12px; text-decoration: none; font-weight: 700; font-size: .98rem; border-radius: var(--radius); }
.has-menu { position: relative; }
.has-menu > a::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  list-style: none;
  margin: 0;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px -12px rgba(31, 38, 36, .3);
  visibility: hidden;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.submenu a { font-weight: 400; padding: 8px 10px; white-space: normal; }
.submenu a:hover { background: var(--stone); color: var(--granite); }
.submenu--cols { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); min-width: 380px; }
.has-menu:hover > .submenu, .has-menu:focus-within > .submenu { visibility: visible; opacity: 1; transform: none; }
.site-header__actions { display: flex; gap: 10px; align-items: center; }
.btn-phone { min-height: 44px; padding: 8px 14px; }
.btn-header { min-height: 44px; padding: 8px 16px; }
.mobile-nav { display: none; }

@media (max-width: 1280px) {
  .primary-nav, .btn-phone { display: none; }
  .site-header__actions { margin-left: auto; }
  .mobile-nav { display: block; }
  .mobile-nav summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--granite-2); border-radius: var(--radius); font-weight: 700; cursor: pointer; }
  .mobile-nav summary::-webkit-details-marker { display: none; }
  .mobile-nav summary .icon { width: 20px; height: 20px; }
  .mobile-nav__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - var(--header-h)); overflow-y: auto; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px -16px rgba(31, 38, 36, .3); padding: 8px var(--gutter) 24px; }
  .mobile-nav__panel ul { list-style: none; padding: 0; margin: 0 0 8px; }
  .mobile-nav__panel li a { display: block; padding: 10px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
  .mobile-nav__head { font-weight: 700; font-size: .95rem; color: var(--granite-2); margin: 18px 0 2px; }
  .mobile-nav__head a { text-decoration: none; }
  .mobile-nav__cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
}
@media (max-width: 520px) {
  .site-header__bar { gap: 12px; }
  .site-header__actions { display: none; }
  .mobile-nav { margin-left: auto; }
  .brand img { width: 34px; height: 34px; }
  .brand__name { font-size: .84rem; letter-spacing: .03em; }
}
@media (max-width: 400px) {
  .brand__name { font-size: .78rem; letter-spacing: .02em; }
  .mobile-nav summary span { display: none; }
}

/* ---------- Homepage hero ---------- */
.hero { padding-block: clamp(32px, 6vw, 80px) clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(2rem, 3.4vw, 3.1rem); }
.hero .lead { max-width: 40ch; }
.hero__photo { margin: 0; }
.hero__photo img, .page-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
.hero__photo figcaption, .page-photo figcaption { margin-top: 8px; font-size: .9rem; color: var(--granite-2); }
.page-photo { margin: 0 0 2rem; }

.section-drawing { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(10px, 1.6vw, 18px); }
.section-drawing svg { display: block; width: 100%; }
.section-drawing figcaption { font-size: .875rem; color: var(--granite-2); border-top: 1px solid var(--line); margin-top: 10px; padding-top: 8px; }
.section-drawing figcaption span { font-weight: 700; color: var(--granite); margin-right: 6px; }

.sd-topsoil { fill: #8c5b3f; opacity: .5; }
.sd-sand { fill: #e8d7ae; }
.sd-pavers rect { fill: #b9bfb6; stroke: var(--granite); stroke-width: .8; }
.sd-edge { fill: var(--granite); }
.sd-wall rect { fill: #c9cdc4; stroke: var(--granite); stroke-width: 1.2; }
.sd-pipe { fill: var(--paper); stroke: var(--granite); stroke-width: 1.5; }
.sd-lines path, .sd-grass, .sd-tree path, .sd-dim path, .sd-grid path { fill: none; stroke: var(--granite); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sd-grass { stroke-width: 1.1; stroke: var(--pine-2); }
.sd-grid path { stroke-width: 1.2; stroke-dasharray: 6 4; }
.sd-tree .sd-dash { stroke: var(--clay); stroke-width: 1.3; stroke-dasharray: 4 4; }
.sd-dim path { stroke: var(--clay); stroke-width: 1.2; }
.sd-dimtext { font: 500 11px var(--f-mono); fill: var(--clay); }
.sd-stake path { stroke: var(--granite); stroke-width: 2; }
.sd-stake .sd-flag { fill: var(--clay); stroke: none; }
.sd-label text { font: 500 10.5px var(--f-mono); fill: var(--granite); }
.sd-label line { stroke: var(--granite); stroke-width: .9; }
.sd-label circle { fill: var(--granite); }
.sd-label rect { fill: var(--paper); opacity: .92; }

/* The drawing draws itself once on load; nothing loops. */
@media (prefers-reduced-motion: no-preference) {
  .section-drawing .draw path:not(.sd-dash), .section-drawing path.draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: hz-draw 1.2s cubic-bezier(.6, .1, .2, 1) .1s forwards; }
  .sd-grid, .sd-tree .sd-dash, .sd-wall, .sd-pavers, .sd-pipe, .sd-stake, .sd-label { opacity: 0; animation: hz-fade .4s ease .8s forwards; }
}
@keyframes hz-draw { to { stroke-dashoffset: 0; } }
@keyframes hz-fade { from { opacity: 0; } to { opacity: 1; } }

/* The three most common worries, answered under the hero. */
.points { list-style: none; margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px clamp(20px, 3vw, 40px); }
.points li { position: relative; padding: 14px 0 0 30px; border-top: 1px solid var(--line); font-size: 1.02rem; line-height: 1.5; }
.points li::before { content: ""; position: absolute; left: 3px; top: 21px; width: 13px; height: 7px; border-left: 2.5px solid var(--pine-2); border-bottom: 2.5px solid var(--pine-2); transform: rotate(-45deg); }

/* ---------- Inner-page hero ---------- */
.page-hero { padding-block: clamp(24px, 4vw, 48px) clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: end; }
.page-hero--card .page-hero__grid { grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); }
.page-hero .lead { max-width: 52ch; }
.page-hero .points { grid-column: 1 / -1; margin-top: 0; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 18px; font-size: .9rem; color: var(--granite-2); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Local facts for a town or service, as a plain definition list. */
.notes-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.notes-card__title { margin: 0; padding: 14px 18px 4px; font-weight: 700; font-size: 1rem; }
.notes-card dl { margin: 0; padding: 0 18px 8px; }
.notes-card dl > div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.notes-card dl > div:first-child { border-top: 0; }
.notes-card dt { font-size: .875rem; font-weight: 700; color: var(--granite-2); padding-top: 1px; }
.notes-card dd { margin: 0; font-size: .95rem; line-height: 1.45; }

/* ---------- Bands ---------- */
.band { padding-block: var(--band); }
.band--paper { background: var(--paper); border-block: 1px solid var(--line); }
.band--pine { background: var(--pine); color: var(--pine-ink); }
.band--pine h2, .band--pine h3 { color: #fff; }
.intro { padding-bottom: calc(var(--band) * .7); }

/* ---------- Prose (editable page content) ---------- */
.prose { max-width: 70ch; }
.prose > * + h2 { margin-top: 2em; }
.prose > * + h3 { margin-top: 1.6em; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 1.3em; margin-bottom: .5em; }
.prose ul > li::before { content: ""; position: absolute; left: .15em; top: .68em; width: .4em; height: .4em; background: var(--pine-2); border-radius: 50%; }
.prose ol { padding-left: 1.3em; }
.prose ol > li { margin-bottom: .5em; padding-left: .3em; }
.prose ol > li::marker { color: var(--granite-2); font-weight: 700; }
.prose strong { font-weight: 700; }
.prose a { color: var(--pine-2); font-weight: 700; }
.prose a:hover { color: var(--pine); }
.prose .hz-callout { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin: 1.6em 0; }
.prose .hz-callout > :last-child, .prose .hz-callout .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.prose .hz-callout h3 { margin-top: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 1rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: .9rem; font-weight: 700; color: var(--granite-2); border-bottom-color: var(--granite-2); }
.wp-block-table { margin: 0; overflow-x: auto; }
.wp-block-image img { border-radius: var(--radius); }
figure { margin: 0 0 1.4em; }

/* ---------- Location and service layout ---------- */
.layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); padding-block: var(--band); align-items: start; }
.side { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
.side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; }
.side-card p { margin: 0; }
.side-card__title { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
.side-map { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; }
.side-nav { border-top: 1px solid var(--line); padding-top: 14px; }
.side-nav__title { font-weight: 700; font-size: .95rem; margin: 0 0 4px; }
.side-nav__title a { text-decoration: none; color: var(--granite-2); }
.side-nav ul { list-style: none; margin: 0; padding: 0; }
.side-nav li a { display: block; padding: 8px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.side-nav a[aria-current="page"] { font-weight: 700; color: var(--pine-2); }

/* ---------- Services grid ---------- */
.services-grid__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.service-group:last-child:nth-child(odd) { grid-column: 1 / -1; }
.service-group h3 { font-size: 1.25rem; margin-bottom: 8px; }
.service-group h3 a { text-decoration: none; }
.service-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--granite-2); }
.service-list a { display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.service-list__name { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; }
.service-list__text { color: var(--granite-2); font-size: .98rem; }
.service-list a:hover .service-list__name { color: var(--pine-2); text-decoration: underline; }

/* ---------- Process ---------- */
.process__steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; margin: 1.5rem 0 0; border-top: 1px solid rgba(214, 226, 219, .35); }
.process__steps li { counter-increment: step; padding: 20px 20px 0 0; }
.process__steps li + li { padding-left: 20px; border-left: 1px solid rgba(214, 226, 219, .2); }
.process__steps li::before { content: counter(step); display: block; font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; line-height: 1; color: #f2b9a0; margin-bottom: 12px; }
.process__steps h3 { font-size: 1.1rem; }
.process__steps p { font-size: 1rem; margin: 0; }

/* ---------- Areas + map ---------- */
.areas__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.areas__list { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; border-top: 1px solid var(--granite-2); }
.areas__list a { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-weight: 700; }
.areas__map { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.area-map { display: block; width: 100%; }
.area-map__rings circle { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.area-map__rings text { font: 600 10px var(--f-body); fill: var(--granite-2); }
.area-map__center path { stroke: var(--clay); stroke-width: 2; }
.area-map__center text { font: 700 10.5px var(--f-body); fill: var(--clay); }
.area-map__pt circle { fill: var(--granite); transition: fill .15s; }
.area-map__pt text { font: 700 12.5px var(--f-body); fill: var(--granite); }
.area-map__pt:hover circle { fill: var(--pine-2); }
.area-map__pt:hover text { fill: var(--pine-2); }
.area-map__pt.is-current circle { fill: var(--clay); stroke: var(--paper); stroke-width: 2; }
.area-map__pt.is-current text { fill: var(--clay); font-size: 14px; }
.side-map .area-map__pt text { font-size: 17px; }
.side-map .area-map__pt.is-current text { font-size: 19px; }
.side-map .area-map__rings text, .side-map .area-map__center text { font-size: 14px; }

/* ---------- Cards (hub pages) ---------- */
.card-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card a { display: flex; flex-direction: column; height: 100%; padding: 22px; background: var(--stone); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; transition: border-color .15s; }
.card a:hover { color: inherit; border-color: var(--granite-2); }
.card a:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; }
.card__title { font-size: 1.3rem; margin-bottom: .4em; }
.card__meta { margin: 0 0 .3rem; font-size: .9rem; color: var(--granite-2); }
.card p { color: var(--granite-2); font-size: 1rem; }
.card .link-arrow { margin-top: auto; color: var(--pine-2); }

/* ---------- FAQ (core Details blocks) ---------- */
.faq { background: var(--paper); border-block: 1px solid var(--line); }
.wp-block-details { border-top: 1px solid var(--line); padding: 0; }
.wp-block-details:last-child { border-bottom: 1px solid var(--line); }
.wp-block-details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 18px 0; font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; font-family: var(--f-body); font-weight: 400; font-size: 1.5rem; line-height: .9; color: var(--granite-2); flex: none; }
.wp-block-details[open] summary::after { content: "\2212"; }
.wp-block-details > :not(summary) { margin: 0 0 1em; max-width: 66ch; }
.wp-block-details > :last-child { padding-bottom: 8px; }
.prose .wp-block-details summary { font-size: 1.05rem; }

/* ---------- Nearby ---------- */
.nearby { padding-block: calc(var(--band) * .75); }
.nearby__list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.nearby__list a { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--paper); }
.nearby__name { font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; }
.nearby__dist { font-size: .9rem; color: var(--granite-2); }
.nearby__list a:hover { border-color: var(--granite-2); }
.nearby__list a:hover .nearby__name { color: var(--pine-2); }

/* ---------- Estimate ---------- */
.estimate { background: var(--pine); color: var(--pine-ink); padding-block: var(--band); }
.estimate__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "head form" "next form";
  column-gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.estimate__head { grid-area: head; }
.estimate__next { grid-area: next; }
.estimate__form { grid-area: form; }
.estimate h2 { color: #fff; }
.estimate__head p { max-width: 44ch; }
.estimate__steps { list-style: none; counter-reset: es; padding: 0; margin: .4rem 0 1.4rem; }
.estimate__steps li { counter-increment: es; position: relative; padding: 0 0 12px 42px; }
.estimate__steps li::before { content: counter(es); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--pine-ink); border-radius: 50%; font-size: .85rem; font-weight: 700; }
.estimate__next-title { color: #fff; font-weight: 700; margin-bottom: .6rem; }
.estimate__call a { color: #fff; }
/* The form itself comes from the Lead Hub (embed.js). These variables make it match the site. */
.estimate__form {
  --hlh-accent: var(--tape);
  --hlh-bg: var(--paper);
  --hlh-text: var(--granite);
  --hlh-muted: var(--granite-2);
  --hlh-border: #7d8681;
  --hlh-error: #a3141f;
  --hlh-radius: var(--radius);
  --hlh-shadow: none;
  --hlh-font: var(--f-body);
  --hlh-size: 1rem;
  min-width: 0;
}
.estimate__fallback { background: var(--paper); color: var(--granite); border-radius: var(--radius); padding: clamp(20px, 3vw, 32px); display: grid; gap: 12px; }
.estimate__fallback p { margin: 0; }
.estimate__fallback-title { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; }
.estimate__fallback .link-phone { color: var(--granite); font-weight: 700; }
.hz-ref { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }

/* ---------- Footer ---------- */
.site-footer { background: var(--granite); color: #c3cac5; padding-top: clamp(40px, 6vw, 72px); font-size: 1rem; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr .9fr 1.4fr; gap: 32px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer address { font-style: normal; line-height: 1.8; }
.site-footer__head { font-weight: 700; margin-bottom: 12px; }
.site-footer__license { font-size: .9rem; }
.brand--footer { white-space: normal; }
.brand--footer .brand__name { color: #fff; font-size: .95rem; }
.cols-2 { columns: 2; column-gap: 20px; }
.site-footer__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 44px; padding-block: 20px; border-top: 1px solid #3a4441; font-size: .9rem; }
.site-footer__legal p { margin: 0; }

.mobile-bar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .layout-aside { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; grid-template-columns: 1fr 1fr; align-items: start; }
  .process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process__steps li, .process__steps li + li { padding: 20px 20px 20px 0; border-left: 0; border-bottom: 1px solid rgba(214, 226, 219, .2); }
  .nearby__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero__grid, .page-hero--card .page-hero__grid, .areas__grid, .services-grid__groups { grid-template-columns: minmax(0, 1fr); }
  .points { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .points li { padding-block: 12px; }
  .points li::before { top: 19px; }
  .service-list a { grid-template-columns: minmax(0, 1fr); }
  .estimate__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "form" "next"; row-gap: 28px; }
}

/* Phones: the bottom bar carries Call and Free estimate, so the header scrolls away instead of
   staying pinned, and parts that only help on a big screen (the drawing, maps, repeated
   quote cards, service blurbs) step aside so the page is shorter. All links stay. */
@media (max-width: 760px) {
  .site-footer__legal { padding-bottom: calc(92px + env(safe-area-inset-bottom)); } /* room for the bottom bar */
  .site-header { position: relative; }
  html { scroll-padding-top: 16px; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--pine); border-top: 1px solid rgba(255, 255, 255, .15); }
  .mobile-bar .btn { min-height: 48px; }
  .section-drawing, .areas__map, .side-map, .side-card { display: none; }
  .side { grid-template-columns: minmax(0, 1fr); }
  .service-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .service-list a { padding: 11px 0; }
  .service-list__text { display: none; }
  .service-list--single { display: block; }
  .service-list--single .service-list__name { display: none; }
  .service-list--single .service-list__text { display: block; color: var(--granite); }
  .process__steps { grid-template-columns: minmax(0, 1fr); }
  .process__steps li, .process__steps li + li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; padding: 14px 0; }
  .process__steps li::before { grid-row: span 2; margin: 0; font-size: 1.2rem; }
  .process__steps h3 { margin-bottom: .25em; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; }
  .site-footer__brand, .site-footer__areas { grid-column: 1 / -1; }
  .notes-card dl > div { grid-template-columns: 96px 1fr; }
  .faq .wp-block-details summary { padding: 15px 0; }
}
@media (max-width: 480px) {
  .actions .btn { width: 100%; }
  .nearby__list a { padding: 12px; }
}
@media print {
  .site-header, .mobile-bar, .estimate, .side { display: none; }
}