/* ══════════════════════════════════════════════════════════════
   ZoneScout — homepage only (loaded by index.html alone)

   Restraint is the design. One typeface, ink and greys, ONE accent (the brand emerald), and amber
   only where it carries meaning (a partial check). No italics, no gradient text, no glow, and
   the header is the sitewide white one, untouched. The single artistic element is the hero's
   line drawing, a surveyor's plan in fine ink with the one lot that matters in green: it is
   what the product is about, which is why it earns the space.

   Everything is namespaced `hx-` so nothing leaks into the generated pages sharing styles.css.
   ══════════════════════════════════════════════════════════════ */

.is-home { background: #fff }

.hx-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px }
@media (max-width: 560px) { .hx-wrap { padding: 0 16px } }

.hx-sec { padding: 112px 0 }
@media (max-width: 760px) { .hx-sec { padding: 72px 0 } }
.hx-sec.tint { background: var(--paper) }

.hx-kicker { font-size: 14px; font-weight: 500; color: var(--accent); margin-bottom: 14px }

.hx-h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}
.hx-lede { font-size: 1.075rem; line-height: 1.65; color: var(--ink3); max-width: 52ch; margin-top: 16px }

.hx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 48px; margin-bottom: 52px; flex-wrap: wrap }
.hx-head > div { flex: 1 1 480px }
.hx-head > .hx-lede { margin-top: 0; flex: 0 1 420px; font-size: 1rem }

.hx-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; color: var(--accent); text-decoration: none; white-space: nowrap }
.hx-link svg { transition: transform .2s }
.hx-link:hover svg { transform: translateX(3px) }

/* Reveal on scroll — visible by default; JS opts in with .hx-js on <html>, so a failed script
   can never leave the page blank. Short and small: a settle, not a performance. */
.hx-js .hx-rv { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1) }
.hx-js .hx-rv.in { opacity: 1; transform: none }

/* ══ HERO ═══════════════════════════════════════════════════ */
.hx-hero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--border-light) }
.hx-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; min-height: 640px; padding: 72px 0 80px }
@media (max-width: 1000px) { .hx-hero-grid { grid-template-columns: 1fr; min-height: 0; padding: 48px 0 0; gap: 40px } }
.hx-hero-copy { position: relative; z-index: 2 }

.hx-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink3); margin-bottom: 24px }
.hx-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent) }

.hx-h1 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2.6rem, 5.2vw, 4.25rem);
  line-height: 1.03;
  letter-spacing: -.045em;
  color: var(--ink);
  margin-bottom: 24px;
  text-wrap: balance;
}
.hx-h1 span { color: var(--accent) }
.hx-sub { font-size: clamp(1.05rem, 1.4vw, 1.175rem); line-height: 1.6; color: var(--ink3); max-width: 32em; margin-bottom: 36px }

.hx-search {
  display: flex; align-items: center; gap: 8px;
  max-width: 540px;
  padding: 6px 6px 6px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16,29,24,.05), 0 12px 32px -16px rgba(16,29,24,.18);
  transition: border-color .2s, box-shadow .2s;
}
.hx-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(13,122,86,.12), 0 12px 32px -16px rgba(16,29,24,.18) }
.hx-search > svg { flex-shrink: 0; color: var(--ink4) }
.hx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px/1.2 var(--sans); color: var(--ink); padding: 13px 4px }
.hx-search input::placeholder { color: var(--ink4) }
.hx-search button {
  flex-shrink: 0; border: 0; cursor: pointer;
  font: 600 15px/1 var(--sans); color: #fff; background: var(--ink);
  padding: 14px 20px; border-radius: 10px;
  transition: background .2s;
}
.hx-search button:hover { background: var(--accent) }
@media (max-width: 520px) {
  .hx-search { flex-wrap: wrap; padding: 6px }
  .hx-search > svg { display: none }
  .hx-search input { padding: 12px 10px; flex-basis: 100% }
  .hx-search button { width: 100% }
}
.hx-search-hint { margin-top: 16px; font-size: 14px; color: var(--ink4) }

/* ── The drawing ── */
.hx-art { position: relative; height: 560px }
@media (max-width: 1000px) { .hx-art { height: 460px; margin: 0 -24px } }
@media (max-width: 560px)  { .hx-art { height: 420px; margin: 0 -16px } }
.hx-plan {
  position: absolute; inset: -80px -220px -80px -60px;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
}
@media (max-width: 1000px) { .hx-plan { inset: 0 } }
.hx-plan svg { display: block; width: 100%; height: 100% }
.hx-plan .road { fill: none; stroke: #b9c3be; stroke-width: 1.1 }
.hx-plan .lot  { fill: none; stroke: #ccd4d0; stroke-width: .8 }
.hx-plan .bldg { fill: #f4f6f5; stroke: #e2e7e4; stroke-width: .6 }
.hx-plan .park { fill: none; stroke: #ccd4d0; stroke-width: .8; stroke-dasharray: 2 3 }
.hx-plan .tree { fill: none; stroke: #c4cec9; stroke-width: .7 }
.hx-plan .creek { fill: none; stroke: #b6cdd4; stroke-width: 1.4 }
.hx-plan .name { font: 500 11px var(--sans); letter-spacing: .24em; fill: #a3ada8; text-transform: uppercase }
.hx-plan .no { font: 400 7.5px var(--sans); fill: #b7c0bc; text-anchor: middle }
.hx-plan .sel { fill: rgba(13,122,86,.14); stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round }
.hx-plan .sel-no { font: 600 10px var(--sans); fill: var(--accent); text-anchor: middle }
.hx-plan .dim { font: 500 9px var(--sans); fill: var(--accent); text-anchor: middle }
.hx-js .hx-plan .sel { stroke-dasharray: 220; stroke-dashoffset: 220; animation: hxDraw 1.4s cubic-bezier(.5,0,.2,1) .5s forwards }
@keyframes hxDraw { to { stroke-dashoffset: 0 } }

/* ── The result card over the drawing ── */
.hx-product {
  position: absolute; z-index: 2;
  left: 8%; bottom: 36px;
  width: 340px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16,29,24,.04), 0 32px 64px -28px rgba(16,29,24,.28);
  font-size: 14px;
}
@media (max-width: 1000px) { .hx-product { left: 24px; bottom: 24px } }
@media (max-width: 560px)  { .hx-product { left: 16px; right: 16px; width: auto } }
.hx-product-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 0; font-size: 12.5px; color: var(--ink4) }
.hx-product-zone { padding: 6px 18px 12px; border-bottom: 1px solid var(--border-light) }
.hx-product-zone strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -.02em; color: var(--ink) }
.hx-product-zone span { font-size: 13.5px; color: var(--ink3) }
.hx-rows { list-style: none; padding: 2px 18px 8px }
.hx-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; color: var(--ink3) }
.hx-rows li + li { border-top: 1px solid var(--border-light) }
.hx-rows b { font-weight: 500; color: var(--ink) }

/* status text: green = cleared, amber = partial, grey = unknown. Nothing else is coloured. */
.hx-st { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap }
.hx-st::before { content: ""; width: 7px; height: 7px; border-radius: 50% }
.hx-st.ok { color: var(--accent) } .hx-st.ok::before { background: var(--accent) }
.hx-st.amber { color: #94600f } .hx-st.amber::before { background: #d99a2b }
.hx-st.grey { color: var(--ink3) } .hx-st.grey::before { background: var(--ink4) }

/* ── Numbers ── */
.hx-proof { display: grid; grid-template-columns: repeat(4, 1fr) }
.hx-proof > div { padding: 36px 28px; border-left: 1px solid var(--border-light) }
.hx-proof > div:first-child { border-left: 0; padding-left: 0 }
.hx-num { font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums }
.hx-proof p { margin-top: 10px; font-size: 14.5px; color: var(--ink3); line-height: 1.45 }
@media (max-width: 860px) {
  .hx-proof { grid-template-columns: 1fr 1fr }
  .hx-proof > div { padding: 24px 16px }
  .hx-proof > div:nth-child(odd) { border-left: 0; padding-left: 0 }
  .hx-proof > div:nth-child(n+3) { border-top: 1px solid var(--border-light) }
}

/* ══ TOOLS ═════════════════════════════════════════════════ */
.hx-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
@media (max-width: 900px) { .hx-tools { grid-template-columns: 1fr } }
.hx-tool {
  display: flex; flex-direction: column;
  padding: 30px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--border);
  color: inherit; text-decoration: none;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.hx-tool:hover { border-color: #c4ccc8; box-shadow: 0 20px 40px -24px rgba(16,29,24,.25); transform: translateY(-2px) }
.hx-tool-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-light); color: var(--accent); margin-bottom: 26px }
.hx-tool h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.025em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px }
.hx-tool h3 small { font-size: 11px; font-weight: 600; color: var(--ink3); background: var(--surface-sunken); padding: 3px 7px; border-radius: 6px; letter-spacing: 0 }
.hx-tool p { color: var(--ink3); font-size: 15px; line-height: 1.65; flex: 1 }
.hx-tool-go { margin-top: 24px; font-size: 15px; font-weight: 500; color: var(--accent); display: inline-flex; align-items: center; gap: 6px }
.hx-tool-go svg { transition: transform .2s }
.hx-tool:hover .hx-tool-go svg { transform: translateX(3px) }

/* ══ HONESTY ═══════════════════════════════════════════════ */
.hx-points { list-style: none; margin-top: 30px; display: grid; gap: 12px }
.hx-points li { display: flex; gap: 12px; color: var(--ink2); font-size: 15.5px; line-height: 1.55 }
.hx-points svg { flex-shrink: 0; margin-top: 4px; color: var(--accent) }

/* ══ RULES BY PROJECT ═════════════════════════════════════ */
.hx-rules { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border-light) }
@media (max-width: 900px) { .hx-rules { grid-template-columns: 1fr 1fr } }
@media (max-width: 560px) { .hx-rules { grid-template-columns: 1fr; border-left: 0 } }
.hx-rule {
  display: flex; flex-direction: column;
  padding: 30px 30px 28px;
  border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
  text-decoration: none; color: inherit;
  transition: background .2s;
}
.hx-rule:hover { background: var(--paper) }
.hx-rule-ico { color: var(--accent); margin-bottom: 20px; line-height: 0 }
.hx-rule h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px }
.hx-rule p { color: var(--ink3); font-size: 15px; line-height: 1.6; flex: 1 }
.hx-rule-go { margin-top: 18px; font-size: 14.5px; font-weight: 500; color: var(--accent) }

/* ══ HOW IT WORKS ═════════════════════════════════════════ */
.hx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px }
@media (max-width: 800px) { .hx-steps { grid-template-columns: 1fr; gap: 32px } }
.hx-step { border-top: 1.5px solid var(--ink); padding-top: 22px }
.hx-step-n { font-size: 14px; font-weight: 500; color: var(--ink4); margin-bottom: 16px; font-variant-numeric: tabular-nums }
.hx-step h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px }
.hx-step p { color: var(--ink3); font-size: 15px; line-height: 1.65 }

/* ══ STATES ════════════════════════════════════════════════ */
.hx-states { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px }
@media (max-width: 900px) { .hx-states { grid-template-columns: 1fr 1fr } }
@media (max-width: 420px) { .hx-states { grid-template-columns: 1fr } }
.hx-state {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  border-radius: 14px; border: 1px solid var(--border);
  background: #fff;
  text-decoration: none; color: inherit;
  transition: border-color .2s, box-shadow .2s;
}
.hx-state:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(13,122,86,.08) }
.hx-state-code { flex-shrink: 0; width: 40px; font-size: 13px; font-weight: 600; color: var(--ink4); letter-spacing: .02em }
.hx-state strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em }
.hx-state small { display: block; font-size: 13px; color: var(--ink4); margin-top: 1px }

/* ══ GUIDES ════════════════════════════════════════════════ */
.hx-guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
@media (max-width: 900px) { .hx-guides { grid-template-columns: 1fr } }
.hx-guide { display: flex; flex-direction: column; padding: 30px; border-radius: 18px; background: #fff; border: 1px solid var(--border); text-decoration: none; color: inherit; transition: border-color .25s, box-shadow .25s, transform .25s }
.hx-guide:hover { border-color: #c4ccc8; box-shadow: 0 20px 40px -24px rgba(16,29,24,.25); transform: translateY(-2px) }
.hx-guide-tag { font-size: 13px; font-weight: 500; color: var(--ink4); margin-bottom: 14px }
.hx-guide h3 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 10px }
.hx-guide p { color: var(--ink3); font-size: 15px; line-height: 1.6; flex: 1 }
.hx-guide-go { margin-top: 22px; font-size: 14.5px; font-weight: 500; color: var(--accent) }

/* ══ LEAD — the form keeps its sitewide .quote-form styles ══ */
.hx-lead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 72px; align-items: center;
  padding: 72px;
  border-radius: 28px;
  background: var(--ink); color: #fff;
}
@media (max-width: 960px) { .hx-lead { grid-template-columns: 1fr; padding: 44px 28px; gap: 32px; border-radius: 22px } }
@media (max-width: 560px) { .hx-lead { margin: 0 -16px; border-radius: 0; padding: 44px 16px } }
.hx-lead .hx-h2 { color: #fff }
.hx-lead .hx-kicker { color: var(--accent-soft) }
.hx-lead .hx-lede { color: rgba(255,255,255,.7) }
.hx-lead .hx-points li { color: rgba(255,255,255,.85) }
.hx-lead .hx-points svg { color: var(--accent-soft) }
.hx-lead .quote-form { box-shadow: none; border-radius: 18px; padding: 26px }
.hx-lead .qf-fine a { color: var(--accent) }

@media (prefers-reduced-motion: reduce) {
  .hx-js .hx-rv { opacity: 1; transform: none; transition: none }
  .hx-js .hx-plan .sel { animation: none; stroke-dashoffset: 0 }
}