/* Mobile-first, no framework. Fixes from the old site are marked FIX. */
:root {
  --green-900: #12321f; --green-700: #1f5b36; --green-500: #2f8a52; --green-100: #e7f3ea;
  --ink: #17201a; --muted: #55635a; --line: #d5ddd7; --bg: #fbfcfb; --error: #a4161a; --warn: #8a5a00;
  --radius: 10px; --header-h: 4rem;
  color-scheme: light;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55; color: var(--ink); background: var(--bg);
}
*, *::before, *::after { box-sizing: border-box; }
/* FIX: anchors/focused titles no longer hide under the sticky header */
html { scroll-padding-top: calc(var(--header-h) + 1rem); }
body { margin: 0; overflow-x: clip; } /* FIX: nothing can push past the right edge */
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; color: var(--green-900); }
h1 { font-size: clamp(1.8rem, 5vw + 1rem, 3rem); margin: 0 0 .5rem; }
a { color: var(--green-700); }
:focus-visible { outline: 3px solid var(--green-500); outline-offset: 2px; }
.wrap { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.narrow { max-width: 42rem; }
.section { padding-block: 2rem; }
.muted, .hint { color: var(--muted); font-size: .9rem; }
.skip-link { position: absolute; left: -999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 10; background: #fff; padding: .5rem; }

/* Header: sticky (in normal flow) instead of fixed, so it never overlaps page titles */
.site-header { position: relative; z-index: 5; background: #fff; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; min-height: var(--header-h); padding-block: .5rem; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--green-900); text-decoration: none; min-width: 0; }
.brand span { overflow-wrap: anywhere; }
.site-header nav { order: 3; flex-basis: 100%; min-width: 0; }
/* FIX: nav wraps / scrolls inside its own box instead of overflowing the page */
.nav-list { display: flex; gap: .25rem 1rem; list-style: none; margin: 0; padding: 0 0 .25rem; overflow-x: auto; scrollbar-width: thin; }
.nav-list a { display: block; padding: .4rem 0; white-space: nowrap; text-decoration: none; }
.nav-list a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.header-inner > .button { margin-left: auto; }
/* Sticky only where it is one slim row; on phones it would cover a third of the screen */
@media (min-width: 48rem) { .site-header { position: sticky; top: 0; } }
@media (min-width: 60rem) {
  .site-header nav { order: 0; flex-basis: auto; margin-left: auto; }
  .nav-list { flex-wrap: wrap; overflow: visible; }
  .header-inner > .button { margin-left: 0; }
}

.hero { background: var(--green-100); padding-block: 2.5rem; }
/* FIX: headings use a solid dark colour on a light background (old outdoor heading was washed out) */
.hero h1 { color: var(--green-900); }
.lead { font-size: 1.15rem; max-width: 40rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--green-700); margin: 0 0 .25rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.button { display: inline-block; background: var(--green-700); color: #fff; border: 0; border-radius: var(--radius); padding: .75rem 1.2rem; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; min-height: 44px; }
.button:hover { background: var(--green-900); }
.button-secondary { background: #fff; color: var(--green-700); box-shadow: inset 0 0 0 2px var(--green-700); }
.button-small { padding: .45rem .8rem; min-height: 36px; font-size: .95rem; }

.card-grid, .choice-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.card, .choice { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; }
.choice { display: block; text-decoration: none; color: inherit; }
.choice:hover { border-color: var(--green-500); }
.media-split { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .media-split { grid-template-columns: 1fr 1fr; align-items: center; } }
.tag-list { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; }
.tag-list li { background: #fff; border: 1px solid var(--line); border-radius: 99px; padding: .15rem .7rem; font-size: .9rem; }
details { border-bottom: 1px solid var(--line); padding: .6rem 0; } summary { cursor: pointer; font-weight: 600; }
figcaption { color: var(--muted); font-size: .9rem; margin-top: .4rem; }

/* Forms */
.stepped-form .step { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 1rem 1.2rem 1.4rem; margin: 0 0 1rem; min-width: 0; }
.step legend { font-weight: 700; font-size: 1.15rem; padding: 0 .3rem; color: var(--green-900); }
.step-num { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); }
.field { margin: 0 0 1rem; border: 0; padding: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 600; margin-bottom: .3rem; }
/* FIX: full-width inputs that wrap, so long addresses are never truncated */
input:not([type=radio]):not([type=checkbox]), textarea { width: 100%; font: inherit; padding: .65rem .75rem; border: 1px solid #9aa79f; border-radius: 8px; background: #fff; }
input:user-invalid, textarea:user-invalid { border-color: var(--error); }
.option, .inline { display: flex; gap: .5rem; align-items: center; padding: .5rem 0; font-weight: 400 !important; }
.inline { display: inline-flex; margin-right: 1rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.notice { border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1rem; background: var(--green-100); overflow-wrap: anywhere; }
.notice-error { background: #fde8e8; color: var(--error); }
.notice-warn { background: #fff4d6; color: var(--warn); }
.photo-preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: .5rem; list-style: none; padding: 0; }
.photo-preview img { aspect-ratio: 1; object-fit: cover; }
.step-done { opacity: .85; }
.address-confirmed { overflow-wrap: anywhere; }

/* FIX: thanks/status page is centred on every screen size */
.thanks { display: grid; place-items: center; min-height: 60vh; padding: 2rem 1rem; }
.thanks-card { width: min(100%, 34rem); text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; }
.summary { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; text-align: left; margin: 1rem auto; max-width: 24rem; }
.summary dt { font-weight: 600; } .summary dd { margin: 0; }
h1 small { font-size: 1rem; color: var(--muted); }

/* Footer: FIX grid with minmax(0,1fr) so long links wrap instead of overflowing */
.site-footer { background: var(--green-900); color: #e8efe9; margin-top: 2rem; padding-block: 2rem; }
.site-footer a:not(.button) { color: #fff; }
.footer-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-shell main { padding-block: 2rem; }
.stack { display: grid; gap: .5rem; }

/* Lawn map ("Is this right?") */
.map-editor { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #dfe6dc; }
.lawn-map { display: block; width: 100%; height: auto; aspect-ratio: 800 / 560; touch-action: none; }
.area { stroke-width: 3; cursor: default; }
.area-lawn { fill: rgb(47 138 82 / .45); stroke: #1f5b36; }
.area-under_tree { fill: rgb(230 140 20 / .55); stroke: #8a4d00; stroke-dasharray: 8 5; }
.map-editor:has(.handle) .area, [data-editable] .area { cursor: move; }
.area.is-selected { stroke: #fff; stroke-width: 4; }
.area:focus-visible { outline: none; stroke: #ffd400; stroke-width: 5; }
.handle { fill: #fff; stroke: #12321f; stroke-width: 3; cursor: grab; }
.map-totals { font-weight: 600; }
.key { padding: 0 .35rem; border-radius: 4px; font-weight: 600; }
.key-lawn { background: rgb(47 138 82 / .3); } .key-tree { background: rgb(230 140 20 / .35); }
.map-tools .actions { margin-bottom: 1rem; }
.map-workbench { position:relative; isolation:isolate; background:#10291e; color:#fff; }
.map-navigation { display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:10px; background:#10291e; }
.map-tool { min-height:42px; padding:9px 12px; border:1px solid #b6cbbd; border-radius:7px; background:#fff; color:#153322; font:600 .85rem/1.2 system-ui,sans-serif; cursor:pointer; }
.map-tool:hover { background:#e4f3e9; } .map-tool:focus-visible { outline:3px solid #ffdf36; outline-offset:2px; }
.map-tool[aria-pressed="true"] { background:#143c2a; color:#fff; border-color:#95deb4; box-shadow:inset 0 0 0 2px #95deb4; }
.map-tool:disabled { opacity:.38; cursor:default; }
.map-navigation .map-tool { background:#214c36; color:#fff; border-color:#557a63; }
.map-overlay-strength { display:flex; align-items:center; gap:8px; margin:0 0 0 auto; font-size:.75rem; font-weight:500; }
.map-overlay-strength input { width:85px; margin:0; padding:0; accent-color:#16df76; }
.map-viewport { height:clamp(430px,62vh,650px); width:100%; background:#24372d; color:#12251a; touch-action:none; }
.map-viewport .leaflet-control-zoom a { width:42px; height:42px; line-height:42px; color:#10291e; }
.map-viewport .leaflet-control { box-shadow:0 3px 14px #0005; }
.map-viewport .service-polygon { cursor:pointer; filter:drop-shadow(0 0 1px #153322); }
.polygon-tools { padding:10px; background:#eaf2ec; color:#173322; border-top:1px solid #a6b9ac; }
.polygon-tools[hidden], .polygon-drawing-actions[hidden] { display:none; }
.polygon-command-row,.polygon-history-row,.polygon-drawing-actions { display:flex; flex-wrap:wrap; gap:6px; }
.polygon-history-row { margin-top:8px; padding-top:8px; border-top:1px solid #c3d1c6; }
.polygon-drawing-actions { margin-top:8px; }
.map-tool.tool-lawn { border-color:#159c55; } .map-tool.tool-berm { border-color:#187cf7; color:#095dca; }
.map-tool.tool-cut { border-color:#ce4545; color:#9b2929; }
.map-tool-status { padding:10px 12px; margin:0; background:#163b29; color:#eef9f0; font-size:.82rem; line-height:1.5; }
.map-tool-status.map-error { background:#7f2525; }
.map-live-summary { display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; padding:10px 12px; background:#fff; color:#143322; font-size:.85rem; border-top:1px solid #aec3b4; }
.map-live-price { white-space:nowrap; }
.photo-remove { width:100%; min-height:36px; padding:5px; border:1px solid var(--line); border-radius:5px; color:var(--green-900); background:#fff; font:inherit; cursor:pointer; }
.map-workbench:is([data-mode="lawn"],[data-mode="berm"],[data-mode="under_tree"],[data-mode="cut"]) :is(.polygon-command-row,.polygon-history-row) { display:none; }
.map-workbench:is([data-mode="lawn"],[data-mode="berm"],[data-mode="under_tree"],[data-mode="cut"]) .polygon-drawing-actions { margin-top:0; }
.map-expanded { position:fixed; inset:10px; z-index:10000; display:grid; grid-template-rows:auto minmax(0,1fr) auto auto auto; border:2px solid #173c2a; border-radius:12px; box-shadow:0 0 0 20px #0009; overflow:hidden; }
.map-expanded .map-viewport { height:100%; min-height:0; }
.map-expanded .polygon-tools { max-height:32vh; overflow:auto; }
@media(max-width:40rem) { .map-navigation { padding:8px; }.map-overlay-strength { width:100%; justify-content:space-between; margin-left:0; }.map-overlay-strength input { width:48%; }.map-expanded { inset:4px; }.map-tool { min-height:44px; }.map-viewport { height:480px; } }
@media(max-width:40rem) { .map-workbench:not([data-mode="view"]) .map-overlay-strength { display:none; } }

/* Booking on the status page */
.booking { text-align: left; border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
.booking h2 { font-size: 1.2rem; }
.slot-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.slot { display: flex; gap: .5rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem; font-weight: 400 !important; cursor: pointer; }
.slot:has(input:checked) { border-color: var(--green-700); background: var(--green-100); }

/* Quote accept page (/q/<token>) */
.accept-card { width: min(100%, 40rem); text-align: left; }
.accept-card > h1, .accept-card > .eyebrow, .accept-card > .muted { text-align: center; }
.accept-block { border-top: 1px solid var(--line); margin-top: 1.25rem; padding-top: 1rem; }
.accept-block h2 { font-size: 1.2rem; margin-top: 0; }
.accept-card .breakdown { width: 100%; border-collapse: collapse; }
.accept-card .breakdown th, .accept-card .breakdown td { padding: .35rem 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; vertical-align: top; }
.accept-card .breakdown td { text-align: right; white-space: nowrap; padding-left: 1rem; }
.accept-card .breakdown .total th, .accept-card .breakdown .total td { font-weight: 700; border-bottom: 2px solid var(--green-700); }
.accept-card .summary { margin-inline: 0; }
.accept-card .map-figure { margin: .5rem 0 0; }
.accept-card .map-figure .lawn-map { border-radius: var(--radius); border: 1px solid var(--line); background: #dfe6dc; }
.deposit .button { width: 100%; }

/* Invoice (/i/<token>) and admin invoice view: print-friendly (Save as PDF) */
.invoice-wrap { max-width: 52rem; }
.invoice-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.invoice-actions form { margin: 0; }
.invoice-doc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1rem, 4vw, 2.25rem); }
.invoice-doc h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 .25rem; }
.invoice-doc p { margin: .15rem 0; }
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-bottom: 2px solid var(--green-700); padding-bottom: 1rem; }
.invoice-from { font-weight: 700; font-size: 1.15rem; color: var(--green-900); }
.invoice-title h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
.invoice-meta { display: grid; grid-template-columns: auto auto; gap: .1rem 1rem; margin: 0; font-size: .95rem; }
.invoice-meta dt { color: var(--muted); } .invoice-meta dd { margin: 0; font-weight: 600; }
.invoice-parties { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); margin: 1.25rem 0; }
.invoice-lines { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.invoice-lines th, .invoice-lines td { text-align: left; padding: .45rem 0; border-bottom: 1px solid var(--line); font-weight: 400; vertical-align: top; }
.invoice-lines thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.invoice-lines .num { text-align: right; white-space: nowrap; padding-left: 1rem; }
.invoice-lines tfoot th { text-align: right; padding-right: 1rem; }
.invoice-lines .total th, .invoice-lines .total td, .invoice-lines .balance th, .invoice-lines .balance td { font-weight: 700; }
.invoice-lines .balance th, .invoice-lines .balance td { border-top: 2px solid var(--green-700); border-bottom: 0; font-size: 1.1rem; }
.invoice-pay-info { background: var(--green-100); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.paid-stamp { color: var(--green-700); font-size: 1.1rem; }
.invoice-doc.is-void .invoice-lines { opacity: .55; text-decoration: line-through; }
@media print {
  @page { margin: 14mm; }
  :root { background: #fff; }
  .site-header, .site-footer, .skip-link, .no-print, .admin-only { display: none !important; }
  .section { padding: 0; } .wrap { width: 100%; max-width: none; }
  .invoice-doc { border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
}

/* Spam honeypot: off-screen, not display:none (some bots skip hidden inputs). */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Accept page: pay per mow vs prepaid monthly */
.plan-choice { display: grid; gap: .5rem; }
.plan-option { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: .7rem .8rem; font-weight: 400 !important; cursor: pointer; }
.plan-option input { margin-top: .3rem; }
.plan-option:has(input:checked) { border-color: var(--green-700); background: var(--green-100); }
.plan-option .hint { display: inline-block; margin-top: .25rem; }
/* Invoice before/after thumbnails */
.invoice-photos { margin-top: 1.25rem; }
.invoice-photos .photo-pair { display: flex; gap: .75rem; flex-wrap: wrap; }
.invoice-photos figure { margin: 0; flex: 1 1 140px; max-width: 320px; }
.invoice-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
@media print { .invoice-photos img { max-width: 45%; } }

/* ---- lawn quote flow (mobile first) ---- */
.lawn-flow .flow-step { margin: 0 0 1.5rem; }
.lawn-flow .lede { font-size: 1.05rem; }
.button-wide { display: block; width: 100%; text-align: center; margin-top: .75rem; }
.button[disabled] { opacity: .55; cursor: not-allowed; }
.link-button { background: none; border: 0; padding: .5rem 0; font: inherit; color: var(--green-700); text-decoration: underline; cursor: pointer; min-height: 44px; }
.result-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 .9rem; }
.big-price { font-size: 2.4rem; font-weight: 800; color: var(--green-900); margin: .1rem 0 .4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.big-price small { font-size: .95rem; font-weight: 500; color: var(--muted); }
.map-question { font-size: 1.05rem; }
.option-card { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: .7rem .9rem; margin: 0 0 .5rem; min-height: 44px; }
.option-card:has(input:checked) { border-color: var(--green-500); box-shadow: inset 0 0 0 1px var(--green-500); }
.option-card .band-price { margin-left: auto; font-variant-numeric: tabular-nums; }
.measuring { text-align: center; padding: 1rem 0; }
.skeleton-map { width: 100%; max-width: 360px; margin: 0 auto 1rem; display: block; }
.sk-plot { fill: #e9eee9; } .sk-house { fill: #cfd8d1; }
.sk-outline { fill: rgba(47,138,82,.18); stroke: var(--green-500); stroke-width: 3; stroke-dasharray: 14 10; animation: sk-trace 1.6s linear infinite, sk-pulse 2.4s ease-in-out infinite; }
@keyframes sk-trace { to { stroke-dashoffset: -48; } }
@keyframes sk-pulse { 50% { fill: rgba(47,138,82,.32); } }
.progress { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; max-width: 360px; margin: .75rem auto; }
.progress-bar { height: 100%; width: 0; background: var(--green-500); transition: width .25s linear; }
@media (prefers-reduced-motion: reduce) { .sk-outline { animation: none; } .progress-bar { transition: none; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.photo-preview { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; margin: .5rem 0 0; }
.photo-preview img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.lawn-flow [hidden] { display: none !important; }
.range-line { font-size: 1.15rem; margin: .1rem 0 .3rem; }
.range-amount { display: block; font-size: 2.2rem; font-weight: 800; color: var(--green-900); line-height: 1.15; font-variant-numeric: tabular-nums; }

/* Address bar: one input, suggestions as you type (quote flow). Mobile first. */
.combo { position: relative; }
.combo input { min-height: 48px; font-size: 1.05rem; }
.combo-list { position: static; /* in the page flow: on a phone it pushes the page down rather than covering the messages */ margin: .25rem 0 0; padding: .25rem 0; list-style: none; background: #fff;
  border: 1px solid #9aa79f; border-radius: 8px; box-shadow: 0 8px 24px rgb(0 0 0 / .12); max-height: min(60vh, 22rem); overflow-y: auto; overscroll-behavior: contain; }
.combo-list li { display: flex; flex-direction: column; gap: .1rem; padding: .7rem .9rem; min-height: 48px; cursor: pointer; border-bottom: 1px solid var(--line); touch-action: manipulation; }
.combo-list li:last-child { border-bottom: 0; }
.combo-list li[aria-selected="true"], .combo-list li:hover { background: var(--green-100); }
.combo-list .opt-main { font-weight: 600; }
.combo-list .opt-sub { color: var(--muted); font-size: .92rem; }
.combo-list .opt-out { color: var(--warn); font-size: .85rem; font-weight: 600; }
.combo-list li.combo-empty { cursor: default; color: var(--muted); }
.combo.picked input { border-color: var(--green-500); box-shadow: inset 0 0 0 1px var(--green-500); padding-right: 2.5rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%232f8a52' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .7rem center / 1.3rem; }

.area-berm{fill:#1e7df0;fill-opacity:.55;stroke:#1267d5;stroke-width:2}.key-berm{color:#1267d5}