@font-face {
  font-family: "Ridge Narrow";
  src: url("/assets/nimbus-sans-narrow-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}
@font-face {
  font-family: "Ridge Sans";
  src: url("/assets/nimbus-sans-regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Ridge Sans";
  src: url("/assets/nimbus-sans-bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

/* Approved Brand Book v2.0 tokens — do not substitute legacy site hex values */
:root {
  --pine: #060807;
  --ivory: #f2efe6;
  --rust: #a84b29;
  --rust-dark: #863c20;
  --line: rgba(6, 8, 7, 0.22);
  --narrow: "Ridge Narrow", "Arial Narrow", sans-serif;
  --sans: "Ridge Sans", Arial, sans-serif;
  --surface: rgba(6, 8, 7, 0.045);
  /* The property panel: the page cream with 6% of the brand rust mixed
     in. Derived from the palette, not picked by eye. */
  --panel: #EEE5DB;
  --muted: #5f6259;
  --rule: rgba(6, 8, 7, 0.22);
}

* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  background: var(--ivory);
  color: var(--pine);
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  top: -6rem;
  z-index: 1000;
}
.skip-link:focus { top: 1rem; }

/* IVORY CONTENT, DARK BANDS (owner, 2026-08-27: "the background is black,
   shouldn't it be ivory"). The marketing site's inner pages are ivory
   content between a pine header and a pine footer; the calculator was pine
   throughout, which is why crossing into it felt like a different site.
   --surface/--muted/--rule below are the ivory-mode equivalents of the dark
   card, secondary text and hairline colours this file used throughout. */
body.tool-page {
  margin: 0;
  background: var(--ivory);
  color: var(--pine);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.tool-page > main { flex: 1 0 auto; }

.tool-header, .tool-footer {
  background: var(--pine);
  color: var(--ivory);
}

.tool-page :focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
}

.tool-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
}
.tool-brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; color: inherit; }
.tool-brand img { width: 52px; height: 52px; border-radius: 50%; background: var(--ivory); object-fit: cover; }
.tool-brand__name { display: grid; line-height: 1.1; text-transform: uppercase; }
.tool-brand__name strong { font-family: var(--narrow); font-weight: 700; letter-spacing: 0.08em; font-size: 1.3rem; }
/* Same lockup as the site header (.home-brand__name small) — the owner's
   rust-type inventory caught this page running its own smaller, lighter
   version of the brand mark. */
.tool-brand__name small { font-size: 0.72rem; letter-spacing: 0.29em; color: var(--rust); font-weight: 700; margin-top: 6px; }

/* Was max-width:640px, which rendered every screen as a narrow phone column
   in the middle of a desktop window (owner, 2026-08-27). The search screen
   still wants a tight measure; the RESULT screens get the full width so the
   aerial and the services can sit side by side. */
main { max-width: 1120px; margin: 0 auto; padding: clamp(24px, 5vw, 48px) clamp(20px, 4vw, 56px) 80px; }

/* The landing band. Every value matches .inner-hero in inner-pages.css --
   this page is not allowed to look like a different site (owner item 14). */
.tool-hero {
  align-items: end;
  background: var(--pine);
  color: var(--ivory);
  display: grid;
  min-height: 300px;
}
.tool-hero__copy {
  margin: 0 auto;
  max-width: 1360px;
  padding: clamp(64px, 6.2vw, 94px) clamp(24px, 7vw, 112px) clamp(70px, 6.5vw, 98px);
  width: 100%;
}
.tool-hero__eyebrow {
  color: var(--rust);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0 0 20px;
  text-transform: uppercase;
}
.tool-hero__title {
  font-family: var(--narrow);
  font-size: clamp(4rem, 6.1vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.84;
  margin: 0;
  max-width: 980px;
  text-transform: uppercase;
}
/* The result layout carries its own hero treatment. */
body.is-result .tool-hero { display: none; }

#searchScreen { max-width: 640px; }

h1 {
  font-family: var(--narrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin: 0 0 8px;
}
.sub { color: var(--muted); margin: 0 0 28px; font-size: 0.98rem; line-height: 1.5; }

.search-wrap { position: relative; margin-bottom: 6px; }
/* Translucent, not a white box (owner, 2026-08-27). Matches the homepage
   address field: the page shows through, one hairline, square corners. */
/* OWNER 2026-08-30, comparing every text box on the site: translucent,
   basically no border (one hairline), and NOTHING changes on hover or
   focus -- no darkening, no glow, no thickening. One treatment for every
   field on this page: transparent ground, 1px var(--line), square corners.
   The caret is the focus indicator. */
input[type="text"] {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--pine);
  padding: 16px 18px;
  font-size: 1rem;
  font-family: var(--sans);
  border-radius: 0;
  min-height: 52px; /* touch target */
}

.tool-page input:focus,
.tool-page input:focus-visible,
.tool-page textarea:focus,
.tool-page textarea:focus-visible,
.tool-page select:focus,
.tool-page select:focus-visible {
  outline: none;
}
.suggestions {
  background: var(--ivory);
  border: 1px solid rgba(6, 8, 7, 0.20);
  border-top: none;
  border-radius: 0 0 4px 4px;
  overflow: hidden;
}
.suggestions button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--pine);
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 0.95rem;
  cursor: pointer;
  border-top: 1px solid var(--line);
  min-height: 48px;
}
.suggestions button:hover, .suggestions button:focus-visible { background: rgba(6,8,7,0.09); outline: none; }

.status { font-size: 0.85rem; color: #b7b1a1; min-height: 1.2em; margin-top: 10px; }
/* The confirmation replaces the form, so it carries the page's ink, not the
   muted note colour a progress line gets. */
.status strong { color: var(--pine); font-size: 1rem; }
.status a { color: var(--rust); text-decoration: none; }
.status a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The thank-you, on its own line under the confirmation and above the
   receipt (owner, 2026-09-05). Same size as the confirmation, not smaller:
   a thank-you set as fine print reads as an obligation being discharged. */
.sent-thanks {
  color: var(--pine);
  margin: 8px 0 0;
}

/* The submitted request, rendered in place -- same rows as section 02, so
   what they sent looks like what they built. */
.sent-receipt { border: 1px solid var(--line); color: var(--pine); font-size: 0.95rem; margin-top: 18px; max-width: 560px; padding: 18px 20px; }
.sent-receipt__addr { color: #8a8574; font-size: 0.82rem; letter-spacing: 0.05em; margin: 0 0 12px; text-transform: uppercase; }
.sent-receipt ul { list-style: none; margin: 0; padding: 0; }
.sent-receipt li { display: flex; gap: 16px; justify-content: space-between; padding: 6px 0; }
.sent-receipt__total { border-top: 2px solid var(--pine); display: flex; font-weight: 700; justify-content: space-between; margin: 10px 0 0; padding-top: 10px; }
.sent-receipt__terms { color: #8a8574; font-size: 0.85rem; line-height: 1.5; margin: 12px 0 0; }
.sent-receipt__link { display: inline-block; margin-top: 10px; }
.sent-photos { color: var(--muted); font-size: 0.88rem; margin: 10px 0 0; }
.status[data-error="true"] { color: var(--rust); }


.secondary {
  display: block; width: 100%; margin-top: 12px; background: none;
  border: 1px solid var(--line); color: var(--pine); padding: 14px;
  font-family: var(--sans); font-size: 0.92rem; border-radius: 4px; cursor: pointer; min-height: 48px;
}
.secondary:hover { border-color: var(--rust); }

/* Author display rules must NEVER override the HTML hidden attribute.
   A blanket rule, because the per-selector list kept missing new elements:
   .adjust__row has `display:grid`, so hiding the lawn-condition and
   property-layout rows silently did nothing and they showed on every quote. */
.tool-page [hidden] { display: none !important; }

/* ---- One-step result (Pass 2 addendum) ---- */
.promise-line { color: var(--muted); }

.price-hero { padding: 6px 0 20px; }
.price-hero__amount {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: clamp(3.4rem, 14vw, 4.8rem);
  line-height: 1;
  color: var(--pine);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.price-hero__unit { font-size: 0.95rem; color: var(--muted); margin-top: 6px; }
.price-hero__program { font-size: 0.85rem; color: var(--rust); font-weight: 600; margin-top: 4px; }

.price-sticky {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 0 12px; padding: 10px 2px;
  background: var(--pine);
  border-bottom: 1px solid var(--line);
}
.price-sticky__amount { font-family: var(--narrow); font-weight: 700; font-size: 1.6rem; color: var(--pine); line-height: 1; }
.price-sticky__unit { font-size: 0.8rem; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .price-sticky { transition: opacity .15s ease; } }

.aerial-wrap { position: relative; border-radius: 6px; overflow: hidden; border: 1px solid var(--line); background: #2a3320; aspect-ratio: 1/1; cursor: pointer; }
.aerial { width: 100%; height: 100%; object-fit: cover; display: block; }
.aerial-outline { position: absolute; inset: 0; pointer-events: none; }
.aerial-credit {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.5;
  /* Room under it before the panel heading: the provenance line and
     "Measured, not estimated" were touching, which is half of why the block
     read as one confusing instruction. */
  margin: 2px 0 20px;
}

/* "Open the photo full size" -- the instruction the aerial never carried.
   Same rust action rhythm as the summary rows, one step louder because it is
   asking for something rather than labelling something: the whole line is the
   target, and the second line says what happens next. */
.aerial-open {
  background: none;
  border: 0;
  color: var(--rust);
  cursor: pointer;
  display: block;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  margin: 12px 0 2px;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
  width: 100%;
}

.aerial-open:hover { text-decoration: underline; }
.aerial-open:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

.aerial-line {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--muted);
  padding: 10px 2px 0;
  cursor: pointer;
}
.aerial-line:hover, .aerial-line:focus-visible { color: var(--pine); }
.aerial-line:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

.receipt {
  margin-top: 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px;
  font-variant-numeric: tabular-nums;
}
.receipt:empty { display: none; }
.receipt__title { font-family: var(--narrow); font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 12px; color: var(--pine); }
.receipt__row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; font-size: 0.92rem; color: var(--muted); }
.receipt__label { flex-shrink: 1; }
.receipt__dots { flex: 1; border-bottom: 1px dotted rgba(242, 239, 230, 0.28); transform: translateY(-3px); min-width: 16px; }
.receipt__amount { color: var(--pine); font-weight: 500; white-space: nowrap; }
.receipt__row--price { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; font-weight: 700; color: var(--pine); }
.receipt__row--price .receipt__label { letter-spacing: 0.04em; }
.receipt__row--total { font-weight: 700; color: var(--pine); font-size: 1rem; }
.receipt__row--material .receipt__label { color: var(--muted); }
.receipt__remove {
  background: none;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  padding: 2px 8px;
  cursor: pointer;
}
.receipt__remove:hover, .receipt__remove:focus-visible { color: var(--pine); border-color: var(--rust); }
.receipt__supply { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }

.adjust { margin-top: 22px; border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; display: grid; gap: 14px; }
.adjust__row { display: grid; gap: 6px; }
/* First and last side by side; each cell keeps the stacked label+input. */
.adjust__row--pair { grid-template-columns: 1fr 1fr; gap: 14px; }
.adjust__row--pair > div { display: grid; gap: 6px; }
@media (max-width: 480px) { .adjust__row--pair { grid-template-columns: 1fr; } }
.adjust__row > label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }

/* The optional photo field (owner, 2026-09-05). A file input cannot take the
   site's text-box treatment -- the browser draws the button itself -- so it
   gets the same hairline box around the whole control and nothing else. */
.field-note { color: var(--muted); font-size: 0.82rem; line-height: 1.5; margin: 0; }
#reqPhotos {
  border: 1px solid var(--line);
  font: inherit;
  padding: 10px;
  width: 100%;
}
.shot-list { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); list-style: none; margin: 4px 0 0; padding: 0; }
.shot-list li { position: relative; }
.shot-list img { aspect-ratio: 1/1; border: 1px solid var(--line); display: block; object-fit: cover; width: 100%; }
/* A remove control on a thumbnail is a 44px target or it is decoration. */
.shot-list button {
  background: var(--pine);
  border: 0;
  color: var(--ivory);
  cursor: pointer;
  font: 700 0.72rem/1 var(--sans);
  letter-spacing: 0.1em;
  min-height: 28px;
  padding: 7px 9px;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 0;
}
.adjust__row select,
.adjust__row input,
.adjust__field input {
  width: 100%;
  /* Translucent like the address field, not a solid grey box (owner:
     "the color background looks odd"). One field treatment site-wide. */
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--pine);
  font-family: var(--sans);
  font-size: 1rem;
  padding: 10px 12px;
  appearance: none;
  -webkit-appearance: none;
}
/* Same browser behaviour as the homepage hero (owner, 2026-09-01: the name,
   mobile and email boxes "still look olds school or someting" -- that is
   Chrome's autofill wash, not the field styling). These sit on an opaque
   page, so the inset shadow can hold the page colour and the field keeps the
   site's one text-box treatment: transparent, one hairline, nothing else. */
/* OWNER 2026-09-01: "close the calculator address box autofill override.
   That's the field I actually photographed the orange outline in." The rule
   below covered the name/mobile/email fields but not #addressInput, which
   sits in .search-wrap -- and autocomplete="off" is a request Chrome is free
   to ignore on a field it recognises as an address. Named explicitly now. */
.search-wrap input:-webkit-autofill,
.search-wrap input:-webkit-autofill:hover,
.search-wrap input:-webkit-autofill:focus,
.search-wrap input:-webkit-autofill:active,
.adjust__row input:-webkit-autofill,
.adjust__row input:-webkit-autofill:hover,
.adjust__row input:-webkit-autofill:focus,
.adjust__field input:-webkit-autofill,
.adjust__field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--pine);
  -webkit-box-shadow: 0 0 0 1000px var(--ivory) inset;
  box-shadow: 0 0 0 1000px var(--ivory) inset;
  caret-color: var(--pine);
  transition: background-color 100000s ease-in-out 0s;
}

.adjust__row select {
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.adjust__field { display: flex; align-items: center; gap: 10px; }
.adjust__field span { color: var(--muted); font-size: 0.9rem; }
.data-badge {
  position: absolute; top: 10px; right: 10px;
  background: rgba(6,8,7,0.82);
  border: 1px solid var(--line);
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.size-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.size-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 14px 16px; }
.size-card .label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 6px; }
.size-card .value { font-family: var(--narrow); font-size: 1.4rem; font-weight: 700; }
.size-card.mow { border-color: var(--rust); }
.size-card.mow .value { color: var(--rust); }

.price-block { margin-top: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; }
.price-amount { font-family: var(--narrow); font-weight: 700; font-size: 2.6rem; color: var(--pine); }
.price-unit { font-size: 0.85rem; color: var(--muted); }
.price-program { font-size: 0.85rem; color: var(--rust); font-weight: 600; margin-top: 2px; }

.why { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.why-row { display: flex; justify-content: space-between; font-size: 0.9rem; padding: 5px 0; color: var(--muted); }
.why-row span:last-child { color: var(--pine); font-weight: 500; }

/* The season note used to sit in a tinted, outlined box. The owner: "not in
   box or highlighted or outlined" -- it is ordinary prose under the town's
   name now, which is what it always was. */

.addon-box { margin-top: 22px; }
/* The checkout step on a low-confidence read (owner, 2026-09-02). A step,
   not a line: it takes the send button's place until one of its two
   buttons is pressed. Fields follow the site text-box standard (transparent,
   one hairline, nothing changes on hover or focus). */
.checkout { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 22px; }
.checkout__title { font-family: var(--narrow); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.01em; line-height: 1.1; margin: 0 0 14px; text-transform: uppercase; color: var(--pine); }
.checkout__figures { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.95rem; color: var(--pine); margin: 0 0 12px; }
.checkout__figures strong { font-weight: 700; }
.checkout__dot { color: var(--muted); }
.checkout__text { font-size: 0.9rem; color: var(--muted); line-height: 1.55; margin: 0 0 18px; max-width: 58ch; }
.checkout__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout__actions .cta, .checkout__actions .secondary { margin-top: 0; }
.checkout__fields { display: grid; gap: 14px; margin: 0 0 16px; }
.checkout__fields .adjust__row--pair { gap: 14px; }
.checkout__photo { background: none; border: 0; color: var(--rust); cursor: pointer; font-family: var(--sans); font-size: 0.85rem; padding: 0; text-align: left; }
.checkout__photo:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .checkout__actions { grid-template-columns: 1fr; } .checkout__figures { flex-direction: column; gap: 4px; } .checkout__dot { display: none; } }
.addon-box label { font-size: 0.85rem; color: var(--muted); display: block; margin-bottom: 8px; }
textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--pine);
  border-radius: 0;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 0.92rem;
  resize: vertical;
  min-height: 60px;
}

.cta {
  display: block; width: 100%; margin-top: 22px;
  background: var(--rust); color: var(--ivory); border: none;
  padding: 17px; font-family: var(--narrow); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 1rem;
  border-radius: 4px; cursor: pointer; min-height: 52px;
}
.cta:hover { background: var(--rust-dark); }
.cta:disabled { opacity: 0.6; cursor: not-allowed; }

.flag-link {
  display: inline-block; margin-top: 14px; font-size: 0.8rem;
  color: var(--muted); text-decoration: underline;
  background: none; border: none; cursor: pointer; font-family: var(--sans);
  min-height: 44px; padding: 10px 0;
}
.flag-link:hover { color: var(--rust); }

.confirm-screen, .out-of-area, .not-found { text-align: center; padding: 40px 10px; }
.confirm-screen h2, .out-of-area h2, .not-found h2 { font-family: var(--narrow); text-transform: uppercase; font-size: 1.5rem; }
.confirm-screen p, .out-of-area p, .not-found p { color: var(--muted); max-width: 380px; margin: 10px auto 0; line-height: 1.5; }
/* The out-of-area answer (Andrew, 2026-09-05). The link out to the towns we
   do cover is the useful half of a no, so it gets the site's rust rather
   than the muted grey the paragraph inherits. */
.out-of-area__link a,
.out-of-area__call a { color: var(--rust); }
.out-of-area__link { margin-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.receipt__supply--note { border-top: none; padding-top: 4px; color: var(--rust); }


/* Receipt note: an explanatory line with no charge beside it. Used where the
   price would not have changed whatever the customer answered, so the receipt
   says so instead of leaving them to wonder. */
.receipt__row--note .receipt__label { color: #a49d8e; font-size: 0.9em; font-style: italic; }

/* Payment split: what's due at booking vs on completion. Shown instead of a
   bare deposit figure, because the same number reads as a demand without the
   explanation and as fairness with it. */
.price-hero__split { margin-top: 12px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 10px; }
.price-hero__due { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .92rem; padding: 3px 0; }
.price-hero__due span { color: var(--muted); }
.price-hero__due strong { font-variant-numeric: tabular-nums; }
.price-hero__why { margin-top: 8px; font-size: .78rem; line-height: 1.5; color: var(--muted); }


/* Site nav and footer on the calculator (owner, 2026-08-27: "there is also
   no menu or footer"). The brand used to link to "/", which on THIS Worker
   is the price page itself -- clicking the logo never left the calculator. */
.tool-header {
  /* Ivory at 23%, matching the marketing header. The base rule sets this to
     --line, which is a dark hairline meant for the cream half of the page --
     invisible against a pine header, which is why this had no edge at all. */
  border-bottom: 1px solid rgba(242, 239, 230, 0.23);
  justify-content: space-between;
  flex-wrap: wrap;
  /* 94px is the marketing header's fixed height. This one was 76px, so the
     wordmark and nav stepped up the moment you left the site's pages. */
  min-height: 94px;
}

.tool-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.tool-nav a {
  color: var(--ivory);
  font-family: var(--narrow);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

.tool-nav a:hover { color: var(--rust); }
.tool-nav a:focus-visible { outline: 3px solid var(--rust); outline-offset: 3px; }

.tool-footer {
  align-items: center;
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  padding: 26px clamp(20px, 4vw, 56px);
}

.tool-footer__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.tool-footer a {
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 0.92rem;
  text-decoration: none;
}

.tool-footer a:hover { color: var(--rust); }

.tool-footer span {
  font-family: var(--narrow);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  opacity: 0.7;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .tool-nav { gap: 8px 18px; }
  .tool-nav a { font-size: 0.78rem; }
}

/* The searched address, shown on the result with a way back to change it.
   The search screen hides once a price lands (owner, 2026-08-27: arriving
   from the homepage should not present another "get your price" page), so
   this row is the only place the looked-up address is visible. */
.result-address__label {
  color: var(--rust);
  display: block;
  font-family: var(--narrow);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin-bottom: 5px;
  text-transform: uppercase;
  width: 100%;
}

.result-address {
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
  gap: 8px 18px;
  justify-content: space-between;
  margin-bottom: 22px;
  padding-bottom: 12px;
}

.result-address__value {
  font-family: var(--sans);
  font-size: 1rem;
}

.result-address__change {
  background: none;
  border: 0;
  color: var(--rust);
  cursor: pointer;
  font-family: var(--narrow);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  min-height: 44px;
  padding: 0;
  text-transform: uppercase;
}

.result-address__change:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- The property on the left, its priced menu on the right ----
   Owner, 2026-08-27: "the map on the left side, and then on the right side
   should be the services". Stacks on narrow screens; the aerial keeps its
   square aspect either way. */
.result-split {
  align-items: start;
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-bottom: 26px;
}

.services-menu__title {
  font-family: var(--narrow);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.services-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.services-menu__item {
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 0;
}

.services-menu__item:first-child { border-top: 2px solid var(--pine); }

.services-menu__name {
  display: grid;
  font-family: var(--sans);
  font-size: 0.98rem;
}

.services-menu__basis {
  color: var(--muted);
  font-size: 0.78rem;
  margin-top: 2px;
}

.services-menu__price {
  display: grid;
  font-family: var(--narrow);
  font-size: 1.2rem;
  font-weight: 700;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.services-menu__price small {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 400;
  margin-top: 2px;
}

.services-menu__more {
  border-top: 1px solid var(--rule);
  margin-top: 18px;
  padding-top: 14px;
}

.services-menu__more-title {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.85rem;
  margin: 0 0 8px;
}

.services-menu__more ul {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 860px) {
  .result-split { grid-template-columns: 1fr; }
}

/* Arriving from the homepage: a real "we are working" screen instead of an
   empty search page holding an address the customer already gave us. */
/* THE WAIT SHARES THE HERO'S COLUMN (owner, 2026-09-12: "all the white
   look okay u think?" -- no). body.tool-page is a column flexbox and main
   carries `margin: 0 auto`, which on the cross axis sizes main to its
   CONTENT instead of stretching it; so a 620px screen sat centred, a quarter
   of the way in from where GET YOUR PRICE. starts, with the right half of a
   desktop window empty. is-arriving does for the wait exactly what is-result
   does for the price: main goes full-bleed and this block takes the hero
   copy's own max-width and padding, so the eyebrow lands under the eyebrow
   and the heading under the heading. */
body.is-arriving main { max-width: none; margin: 0; padding: 0; }
#arrivingScreen {
  margin: 0 auto;
  max-width: 1360px;
  width: 100%;
  padding: clamp(40px, 4.5vw, 64px) clamp(24px, 7vw, 112px) clamp(56px, 5vw, 80px);
}

/* Same eyebrow treatment the marketing pages use, so arriving here does not
   feel like arriving at a different website. */
.arriving-eyebrow {
  font-family: var(--narrow);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 10px;
}

/* The heading was a plain bold sans h2 while every other heading on the site
   is the condensed face. That mismatch is most of why the screen read as an
   unstyled fallback rather than a page. */
#arrivingScreen h2 {
  font-family: var(--narrow);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 12px;
}

#arrivingScreen .sub {
  color: var(--pine);
  font-family: var(--sans);
  font-size: 1.05rem;
  margin: 0;
}

/* An INDETERMINATE bar. It never claims a percentage, because nothing here
   knows one -- the browser makes a single request and waits. It exists to say
   "still working", which is the one honest thing a loading screen can say. */
.arriving-bar {
  height: 3px;
  background: rgba(6, 8, 7, 0.10);
  border-radius: 2px;
  overflow: hidden;
  margin: 24px 0 26px;
}
.arriving-bar span {
  display: block;
  height: 100%;
  width: 38%;
  background: var(--rust);
  border-radius: 2px;
  animation: arriving-sweep 1.6s ease-in-out infinite;
}
@keyframes arriving-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

.arriving-sources {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
/* Two columns once there is room. Same four items, same simultaneous pulse;
   this halves the height and fills the width on a desktop, and a phone keeps
   the single stack it already had. */
@media (min-width: 720px) {
  .arriving-sources { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 18px; max-width: 760px; }
}
.arriving-sources li {
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: baseline;
  gap: 12px;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--pine);
  line-height: 1.4;
}
/* The label and its description BOTH belong in the text column. Without this
   wrapper the <em> became a grid item of its own and landed in the 10px dot
   column, which on a phone broke "your lot lines" to one word per line. Caught
   in the 390px render, not in the 1280px one. */
.arriving-src { min-width: 0; }

.arriving-sources em {
  display: block;
  font-style: normal;
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 2px;
}

/* Every dot pulses on the SAME cycle, deliberately. Staggering them would
   imply a running order, and these four lookups fire together. */
.arriving-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rust);
  transform: translateY(-2px);
  animation: arriving-pulse 1.6s ease-in-out infinite;
}
@keyframes arriving-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}

.arriving-note {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 26px 0 0;
  max-width: 46ch;
}

/* Motion is the whole point of this screen, so losing it must not lose the
   meaning. With motion off the bar sits full-width and the dots sit solid:
   still clearly "working", just not moving. */
@media (prefers-reduced-motion: reduce) {
  .arriving-bar span { animation: none; width: 100%; opacity: 0.55; }
  .arriving-dot { animation: none; opacity: 1; }
}

/* Matches .desktop-cta on the marketing site. The nav wraps, so on a narrow
   window this drops to its own line rather than overflowing. */
.tool-cta {
  background: var(--rust);
  padding: 9px 18px;
}

.tool-cta:hover {
  background: #8f3f22;
  color: var(--ivory);
}

/* ===========================================================================
   RESULT SCREEN — rebuilt to the owner's brief, Aug 2026.

   It now uses the site's own structure rather than its own: a pine band with
   "Your lawn. Handled." in the same bold type as every other page, then
   numbered rows with the rust number, the rule, and the heading on the left.
   Previously this screen opened with a $43.50 the height of a headline above
   a receipt, both of which the owner crossed out — a price for one service,
   shown before the customer had chosen a service.
   =========================================================================== */

/* Geometry copied from .inner-hero on the marketing pages, deliberately and
   value for value. The owner's rule for the top of a page: "it should almost
   feel like the only thing changing on top is the words." This band was
   238px against every other page's 300px, so moving between them jumped. */
.result-hero {
  align-items: end;
  background: var(--pine);
  color: var(--ivory);
  display: grid;
  min-height: 300px;
}

.result-hero__copy {
  margin: 0 auto;
  max-width: 1360px;
  /* 24px, not 42px, at the narrow end. At 320px the old floor left 236px for
     the headline and "HANDLED." needs about 240, so the band scrolled
     sideways -- only on the one page whose headline has a long word in it.
     24px also lines the headline up with the content below, which uses the
     same floor. */
  padding: clamp(64px, 6.2vw, 94px) clamp(24px, 7vw, 112px) clamp(70px, 6.5vw, 98px);
  width: 100%;
}

.result-eyebrow {
  color: var(--rust);
  font-family: var(--sans, var(--narrow));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.result-hero h2 {
  color: var(--ivory);
  font-family: var(--narrow);
  /* Same clamp as .inner-hero h1 -- the headline is the thing changing
     between pages, so it must not also change size. */
  font-size: clamp(4rem, 6.1vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.84;
  margin: 0;
  max-width: 980px;
  text-transform: uppercase;
}

/* The marketing pages drop their headline at 840px; this one did not, so at
   390px it rendered at 64px against Pricing's 52.8px -- the same band, a
   bigger headline. Same rule as .inner-hero h1 under the same breakpoint. */
@media (max-width: 840px) {
  .result-hero h2 {
    font-size: clamp(3.3rem, 13.5vw, 5.4rem);
    line-height: 0.86;
  }

  .result-hero__copy {
    padding: 58px 24px 66px;
  }
}

.result-content {
  background: var(--surface, #F2EFE6);
  color: var(--pine);
  padding: 0 clamp(24px, 7vw, 112px);
}

.result-wrap {
  margin: 0 auto;
  max-width: 1220px;
}

/* The same numbered row as About, FAQ, Service Area and the pricing page. */
.result-row {
  align-items: start;
  border-bottom: 1px solid var(--rule, rgba(6, 8, 7, 0.22));
  column-gap: clamp(40px, 6vw, 92px);
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(400px, 1.2fr);
  /* Column gutter wide, row gap tight: the picker sits in a row of its own
     under both columns, and inheriting the gutter as vertical space left a
     hole between the heading and the prices. */
  row-gap: 22px;
  padding: clamp(48px, 5vw, 76px) 0;
}

.result-row:last-child {
  border-bottom: 0;
}

.result-row__heading {
  display: grid;
  gap: 14px;
}

.result-label {
  color: var(--rust);
  font-family: var(--sans, var(--narrow));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin: 0;
  text-transform: uppercase;
}

/* Type copied from .inner-row__heading h2 on the marketing pages, value for
   value. This screen was running its headings at 3.6vw against the site's
   4.2vw and its subheadings at 1.8vw against 2.2vw -- about 14% and 18%
   smaller -- so a section here read as a smaller thing than the identical
   section on Pricing or About. */
.result-row__heading h2 {
  border-bottom: 1px solid var(--pine);
  font-family: var(--narrow);
  font-size: clamp(2.7rem, 4.2vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.9;
  margin: 0;
  padding-bottom: 22px;
  text-transform: uppercase;
}

.result-row__body {
  min-width: 0;
  /* Drop the right column so its subheading starts level with the heading
     opposite it, not level with the little number above it. The number is a
     marker, not a line of the page; hanging the subheading off it left it
     floating above everything it introduces. Matches the label's own height
     plus the gap under it. */
  padding-top: calc(0.72rem * 1.2 + 14px);
}

/* .inner-lede, value for value. */
.result-lede,
.result-subhead {
  font-family: var(--narrow);
  font-size: clamp(1.65rem, 2.2vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.03;
  margin: 0 0 22px;
  text-transform: uppercase;
}


/* The shape every section on this page shares with every page on the site:
   the number and heading on the left, a subheading on the right, the
   instruction under it in rust, then the substance. */
.result-subhead {
  margin: 34px 0 10px;
}

/* Instructions are rust. The owner: "text and i think instructions are
   usually in rust?" -- they are, everywhere else on the site. */
.result-note {
  color: var(--rust);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 26px;
}

.result-sources {
  margin: 14px 0 0;
}

/* No underline until you point at it, like the two rust actions sitting a
   few inches away in the same block. It was carrying the browser's default
   underline while UPDATE ADDRESS and ADJUST ACREAGE were not, so three rust
   labels on one screen had two different treatments. */
.result-sources a {
  color: var(--rust);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-decoration: none;
  text-transform: uppercase;
}

.result-sources a:hover {
  text-decoration: underline;
}

.result-sources a:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

/* Data-service credits (Mapbox ToS, OSM ODbL, Open-Meteo CC BY 4.0) --
   quiet on purpose: legally present, visually a footnote. */
.result-credits {
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.7;
  margin: 6px 0 0;
}

.result-credits a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.result-credits a:hover {
  color: var(--rust);
}

.result-prose {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
}

/* Three short paragraphs, not one block of six sentences (owner, 2026-08-31:
   "the summary under glenwood could be written better"). Each one answers a
   different question -- when we mow, what the winter does to that, and why
   two of the services exist -- so a skimmer can stop after any of them. */
.result-prose p {
  margin: 0 0 12px;
  /* Owner, 2026-09-01: "the text look funny under glenwood look off?" Three
     short paragraphs in a narrow column were breaking badly -- a two-word
     last line, a number stranded from its unit. `pretty` lets the browser
     balance the last lines, and the non-breaking measures below keep a
     figure and its unit on one line. */
  text-wrap: pretty;
}

.result-prose p:last-child {
  margin-bottom: 0;
}

/* Whose thermometer these numbers came off. Quieter than the prose because
   it is provenance, not information about the property. */
.result-prose__source {
  font-size: 0.78rem;
  line-height: 1.5;
  margin-top: 12px;
}

/* The value and, under it, the rust line saying what the reader can do with
   it -- or where it came from, when the answer is "nothing". */
.prop-summary__value {
  display: block;
}

.prop-summary__action {
  background: none;
  border: 0;
  color: var(--rust);
  cursor: pointer;
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-top: 5px;
  padding: 0;
  text-align: left;
  text-transform: uppercase;
}

.prop-summary__action:hover { text-decoration: underline; }
.prop-summary__action:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

/* Not a control: this one names the source of a number nobody should be
   editing. Same rhythm, no invitation. */
.prop-summary__action--static {
  color: #8a8d86;
  cursor: default;
  font-weight: 400;
  letter-spacing: 0.08em;
  /* Some of these are a source ("from the county parcel map") and some are a
     sentence ("north-facing ground holds moisture longer"). Uppercase suits
     the first and fights the second, so they stay sentence case and lean on
     colour and size to sit back. */
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  line-height: 1.45;
  text-transform: none;
}

.prop-summary__input {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--pine);
  font-family: var(--bold, var(--narrow));
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 8px;
  width: 7ch;
}

/* 01 and 02 share one row: the property on the left, the prices on the
   right. Each column carries its own number and heading, so the page still
   reads 01, 02, 03, 04 top to bottom -- it just stops making anyone scroll
   past their own lot to reach a price. */
/* The pricing page's column split, not equal halves. The owner: "the line is
   the wrong size if you look in comparison to other pages. i think pricing is
   the best comparison." The rule under a heading is as wide as the column it
   sits in, so matching the columns is what matches the rule. The left column
   only carries the photo now -- the facts moved to the full-width block
   below -- so it can afford to be the narrower one. */
.result-row--split {
  column-gap: clamp(50px, 7vw, 108px);
  grid-template-columns: minmax(250px, 0.72fr) minmax(480px, 1.28fr);
}

.result-row--split .result-col {
  min-width: 0;
}

/* The subheading sits level with the heading opposite it, not with the little
   number above it. */
.result-col--lede {
  padding-top: calc(0.72rem * 1.2 + 14px);
}

/* Air between the heading's rule and the photo under it. Butted straight up
   against the rule, the photo read as part of the heading rather than as the
   first thing the section shows. */
.result-col--photo {
  padding-top: 14px;
}

.result-col--picker {
  padding-top: 14px;
}

.result-row--split .result-lede {
  margin-top: 30px;
}

/* Runs the length of the row, under both columns, and splits again: the
   measured facts on the left, the town on the right. The facts column is
   wider because it holds a full street address; the town column holds prose,
   which wants a shorter measure anyway. */
.result-full {
  column-gap: clamp(40px, 6vw, 92px);
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1.35fr 1fr;
  min-width: 0;
  row-gap: 34px;
}

.result-facts,
.result-place {
  min-width: 0;
}


@media (max-width: 900px) {
  .result-full {
    grid-template-columns: 1fr;
  }
}

/* The three subheadings on this screen -- Pick what you want, Measured not
   estimated, and the town -- are the same size and should sit the same way.
   They did not: the town had 10px under it and the other two had 22px, so
   two headings side by side at the same height had different amounts of air
   beneath them, which is what the owner spotted. One rule for all of them. */
.result-col--lede .result-lede,
.result-full .result-lede,
.result-place .result-subhead {
  margin: 0 0 22px;
}

.result-full .prop-summary {
  grid-template-columns: minmax(150px, auto) 1fr;
}



/* Not the full column width. At 560px the photo was the loudest thing on the
   page and pushed the facts under it out of sight; the point of it is
   recognition -- that is my house -- which a smaller picture does just as
   well. */
.result-row--split .aerial-wrap {
  margin: 0;
  max-width: 380px;
  /* No frame. Sitting directly under the heading, the wrap's top border
     landed on the same pixel as the h2's rule and thickened it, and its
     bottom border added a stray line the layout never asked for. The photo
     is a photo; it has its own edges. */
  border: 0;
}

.result-col > .picker {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .result-row--split {
    grid-template-columns: 1fr;
  }
}

/* ---- Property summary ---------------------------------------------------- */

.prop-summary {
  border-top: 1px solid var(--rule, rgba(6, 8, 7, 0.22));
  display: grid;
  gap: 0;
  grid-template-columns: minmax(120px, auto) 1fr;
  margin: 0 0 20px;
}

.prop-summary dt,
.prop-summary dd {
  border-bottom: 1px solid var(--rule, rgba(6, 8, 7, 0.22));
  margin: 0;
  padding: 11px 0;
}

.prop-summary dt {
  color: #5f625d;
  font-family: var(--bold, var(--narrow));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding-right: 20px;
  text-transform: uppercase;
}

.prop-summary dd {
  font-family: var(--bold, var(--narrow));
  font-weight: 700;
}

.prop-address {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 16px;
}

.prop-address__label {
  color: #5f625d;
  font-family: var(--bold, var(--narrow));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.prop-address__value {
  font-family: var(--bold, var(--narrow));
  font-weight: 700;
}

.prop-address__change {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rust);
  color: var(--rust);
  cursor: pointer;
  font-family: var(--narrow);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0 0 2px;
  text-transform: uppercase;
}

/* ---- The picker ---------------------------------------------------------- */

.picker {
  /* The same hairline the facts table opposite uses. Full-strength pine here
     read as a second heading rule stacked under the one the h2 already
     draws -- the owner: "is there any extra line under price for your
     property and pick what you want". */
  border-top: 1px solid var(--rule, rgba(6, 8, 7, 0.22));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The jobs inside a category sit under it and read as subordinate to it:
   indented, smaller, quieter. A $100 bed edging is not the same size of
   decision as the weekly route, and listing them flat said it was. */
.picker__item--child .picker__row {
  padding-left: 22px;
}

.picker__item--child .picker__name {
  font-size: 0.86em;
  font-weight: 400;
}

.picker__item--child .picker__price {
  font-size: 0.92em;
}

/* The category's own row: opens and closes, never selectable. You do not buy
   "landscaping", you buy mulch or edging. */
.picker__price--group {
  color: #5f625d;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.picker__price--group small {
  color: var(--rust);
}

.picker__row--group:hover .picker__price--group small { text-decoration: underline; }

/* The question, where a price would be. Rust, because it is something to do
   rather than something to read -- the same signal the property panel uses
   for Update address and Adjust acreage. */
.picker__price--ask {
  color: var(--rust);
  font-family: var(--sans);
  /* A QUESTION, not a label (owner, 2026-09-01: "the what happening to the
     clippings font is still wrong"). It had the site's rust label spec --
     0.72/700/caps/0.2em -- which is built for one to three words sitting
     over a number. A whole sentence at that tracking, in the column where
     every other row shows a price, reads as a label that wandered into the
     wrong place. Sentence case at reading size reads as what it is: the row
     asking you something. */
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.35;
  text-transform: none;
}

/* No underline on hover here (owner, 2026-08-30: "do we need both?") --
   the row's own background shift is the affordance for a full-row button,
   and hover-underline stays reserved for actual links. */

.picker__ask {
  align-items: baseline;
  display: inline-flex;
  gap: 8px;
}

.picker__ask input {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--pine);
  font-family: var(--bold, var(--narrow));
  font-size: 1rem;
  font-weight: 700;
  padding: 4px 8px;
  width: 6ch;
}

.picker__ask small {
  color: #5f625d;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Range choices (owner 2026-08-31): tappable published brackets in place of
   a typed measurement. Same quiet hairline language as every field. */
.picker__ask-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.picker__ask-opt {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--pine);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  min-height: 44px;
  padding: 10px 14px;
  text-align: left;
}

/* OWNER 2026-09-01: "fix the option boxes highlighting rust on hover -- they
   should follow the text-box standard." The standard is that the hairline
   never changes: no darkening, no glow, no thickening. These are buttons, so
   they still need an affordance -- it is the same background wash .picker__row
   already uses, which the standard permits because it is not the border. The
   keyboard ring stays a real ring, offset outside the box, so it is never
   mistaken for the hairline it sits beside. */
.picker__ask-opt:hover {
  background: rgba(6, 8, 7, 0.04);
}

/* "What these mean": the link from a choice to its definition. */
/* The whole glossary, from the picker (owner, 2026-09-05: the definitions
   page should be reachable from the pricing page, the price list and this
   one). Individual choices link their own words as they come up; this is the
   list. Same spec as the per-choice link below it. */
.result-help {
  color: var(--rust);
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  margin: -12px 0 22px;
  text-decoration: none;
}

.result-help:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.picker__ask-help {
  color: var(--rust);
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  margin-top: 6px;
  text-decoration: none;
}

.picker__ask-help:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.picker__ask-opt:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

/* The founding rate is a labeled fact, not a slash. */
.picker__founding {
  color: var(--rust);
  font-weight: 700;
}

/* The prepay line: an option the customer flips, styled like a quiet
   choice row, part of the order (owner, 2026-08-31). */
.chosen__option {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--pine);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.9rem;
  min-height: 44px;
  padding: 10px 14px;
  text-align: left;
  width: 100%;
}

.chosen__option[aria-pressed="true"] {
  /* OWNER 2026-08-30: "isnt that exactly what we said was old" -- the rust
     border was a louder signal than the system's own. Selected speaks the
     same language as every chosen row: the wash, the inset rule, and the ✓
     already in the button text. Never a glowing border. */
  background: rgba(168, 75, 41, 0.07);
  box-shadow: inset 3px 0 0 var(--rust);
}

/* Same standard as .picker__ask-opt above: the hairline is constant, the
   wash is the hover affordance, the ring is the keyboard one. */
.chosen__option:hover {
  background: rgba(6, 8, 7, 0.04);
}

.chosen__option:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 2px;
}

/* A flipped-on option keeps its selected wash while hovered -- the hover wash
   must not overwrite the state. */
.chosen__option[aria-pressed="true"]:hover {
  background: rgba(168, 75, 41, 0.07);
}

/* Subtotal / tax / total stack — each line spans the total block's grid. */
.chosen__totline {
  display: flex;
  grid-column: 1 / -1;
  justify-content: space-between;
  padding: 3px 0;
  width: 100%;
}

.chosen__totline strong {
  font-size: 1.15rem;
}

.picker__row {
  align-items: baseline;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule, rgba(6, 8, 7, 0.22));
  color: inherit;
  cursor: pointer;
  display: flex;
  font: inherit;
  gap: 20px;
  justify-content: space-between;
  padding: 16px 14px 15px;
  text-align: left;
  transition: background 0.12s ease;
  width: 100%;
}

.picker__row:hover {
  background: rgba(6, 8, 7, 0.04);
}

/* Chosen is carried by a rust rule and the ✓, not by colour alone. */
.picker__item.is-chosen .picker__row {
  background: rgba(168, 75, 41, 0.07);
  box-shadow: inset 3px 0 0 var(--rust);
}

.picker__item.is-chosen .picker__name::before {
  color: var(--rust);
  content: "✓ ";
  font-weight: 700;
}

.picker__row--pending {
  cursor: default;
  opacity: 0.62;
}

.picker__name {
  display: grid;
  font-family: var(--narrow);
  font-size: 1.12rem;
  font-weight: 700;
  gap: 4px;
  min-width: 0;
  text-transform: uppercase;
}

.picker__name small {
  color: #5f625d;
  font-family: var(--regular, inherit);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.picker__price {
  display: grid;
  font-family: var(--bold, var(--narrow));
  font-size: 1.22rem;
  font-weight: 700;
  gap: 3px;
  justify-items: end;
  text-align: right;
  white-space: nowrap;
}

.picker__price small {
  color: #5f625d;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Rust, at the price size, so the column still reads as a column and the
   placeholder reads as deliberate rather than as a price that failed to load
   -- which is how the grey dash looked. */
.picker__price--pending {
  color: var(--rust);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.picker__more {
  border-left: 3px solid var(--rust);
  margin-top: 26px;
  padding: 2px 0 2px 18px;
}

.picker__more-title {
  color: var(--rust);
  font-family: var(--bold, var(--narrow));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.picker__more ul {
  margin: 0;
  padding-left: 18px;
}

.picker__more li {
  line-height: 1.5;
  margin-bottom: 5px;
}

/* ---- What you have chosen ------------------------------------------------ */

/* No rule of its own. The heading above already draws one, and a second at
   full strength a few pixels below it read as a doubled line -- the owner:
   "there is an extra black line under what you have chosen heading". The rows
   inside carry their own hairlines. */
.chosen {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The waiting state for 03, so the numbered steps never skip one. */
.chosen__empty {
  border: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chosen__item {
  align-items: baseline;
  border-bottom: 1px solid var(--rule, rgba(6, 8, 7, 0.22));
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 13px 0;
}

.chosen__name {
  display: grid;
  font-family: var(--narrow);
  font-size: 1.05rem;
  font-weight: 700;
  gap: 3px;
  text-transform: uppercase;
}

.chosen__name small {
  color: #5f625d;
  font-family: var(--regular, inherit);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.chosen__price {
  font-family: var(--bold, var(--narrow));
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.chosen-total {
  align-items: baseline;
  border-bottom: 2px solid var(--pine);
  /* Nothing to total, nothing to underline. */
  display: grid;
  gap: 4px 20px;
  grid-template-columns: 1fr auto;
  padding: 16px 0 14px;
}

.chosen-total span {
  color: #5f625d;
  font-family: var(--bold, var(--narrow));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.chosen-total strong {
  font-family: var(--narrow);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
}

.chosen-total small {
  color: #5f625d;
  font-size: 0.82rem;
  grid-column: 1 / -1;
}

@media (max-width: 840px) {
  .result-row {
    gap: 22px;
    grid-template-columns: 1fr;
    padding: 40px 0;
  }

  .result-content {
    padding: 0 24px;
  }

  .picker__row {
    padding: 15px 10px 14px;
  }
}

/* The result screen is the one view that runs the full width of the window:
   its pine band has to behave like the band on every other page rather than
   sitting as a rectangle inside main's centred column. The rows inside it
   carry their own max-width, so nothing else stretches. */
body.is-result main {
  max-width: none;
  padding: 0;
  /* margin: 0, and it is load-bearing. main carries `margin: 0 auto` for the
     search screen, and body.tool-page is a column flexbox -- where an auto
     margin on the cross axis overrides `stretch` and sizes the item to its
     content instead. Lifting only the max-width left main as wide as its
     widest child (1444px: the 1220 wrap plus 112 of padding each side) and
     centred, so the pine band grew cream gutters on any window wider than
     that. Invisible at 1280 or 1350, obvious on the owner's monitor. */
  margin: 0;
}

/* The two seasonal visit names, under the category. Slightly stronger than
   the basis line beneath it: these are product names, not an explanation. */
.picker__detail {
  color: var(--pine) !important;
  font-family: var(--bold, var(--narrow));
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}


/* ---- PREVIEW B: the property as a standing left panel ------------------- */
.result-wrap--panel {
  align-items: stretch;
  /* Tighter than the page's usual gutter. That gutter exists to separate two
     columns of the same surface; the panel is its own surface now and its
     own padding does the separating, so the old 92px read as a hole between
     two unrelated things. */
  /* Back up from 40px. Cutting it there assumed the panel's own padding
     would do the separating, but that padding is only 37px, so the real air
     between a price and a fact went from 130px to 77 and the two columns
     started crowding each other. */
  column-gap: clamp(32px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(460px, 1.9fr);
}

/* OWNER: "make the background of the panel a dark pine green but not as dark
   as the header on top." The header and the band are #060807, which is pine
   read as near-black. This is the same hue with the green left in and the
   value lifted, so the panel is clearly a different surface without becoming
   a second header. */
.prop-panel {
  /* The page cream with 12% of the brand rust mixed into it -- derived from
     the palette rather than picked by eye. Light and not dark, for two
     reasons the owner reached independently: a dark panel gives the page a
     second heavy element competing with the black hero band above it, and it
     read as intense on the one screen that should feel calm.
     
     It also deletes work. A dark surface needed six overrides to keep the
     labels, captions, prose, rules and rust readable, and two of those had
     already gone wrong -- the source captions rendered as links twice,
     because on a light surface they are told apart from the rust actions by
     colour alone. On a light panel none of that exists: everything inherits
     the same treatment it has on the rest of the page. */
  background: var(--panel);
  color: var(--pine);
  /* No left padding. The green already runs to the window edge, so the only
     thing this added was an inset that pushed the panel's content out of line
     with everything else: measured at 1280, the photo started at 123px while
     the hero headline above it started at 90. Zero here puts them on the same
     line, and the room to the left of the content is the page's own margin,
     which is what it should be. */
  padding: clamp(44px, 4.5vw, 64px) clamp(26px, 2.6vw, 38px) 56px 0;

  /* Not sticky, and the tint runs the full height of the content.
  
     Sticky was the wrong tool: this panel is around 900px tall, so on most
     screens it does not fit in the viewport, and a sticky element taller than
     its viewport cannot stick -- it scrolls, then catches at the end. That is
     what the owner saw: "how it moves with the page its not smooth."
     Ordinary scrolling is smooth by definition.
     
     Stretching also answers "i cant tell if the rust orange side panel goes
     all the way down to the footer". It does now; before, it stopped wherever
     its content ran out. */
  align-self: stretch;
}

/* Run the green out to the window's left edge. The content wrap is a centred
   1220px column, so the panel's box stops where the wrap does and left a
   strip of cream beside it -- the owner: "no ivory on the left of the green".
   
   A pseudo-element pinned to the panel's left edge, not a box-shadow: the
   first attempt used `box-shadow: -100vw 0 0`, which offsets a copy of the
   box a whole viewport to the left, so it landed entirely off screen and
   painted nothing. Offsetting is not spreading. This one is anchored at
   right: 100% and grows leftwards, and left overflow does not scroll the
   page. */
.prop-panel::before {
  background: inherit;
  bottom: 0;
  content: '';
  position: absolute;
  right: 100%;
  top: 0;
  width: 100vw;
}

/* Spacing inside the panel. These were lost when the dark-surface overrides
   were stripped out, which left the photo with margin:0 from
   .result-row--split and butted straight against the subheading under it --
   the owner: "add a space between the arial picture measured not estimated".
   Declared after that rule so they win. */
.prop-panel .aerial-wrap {
  margin: 0 0 40px;
  max-width: 100%;
}

.prop-panel .result-lede {
  margin: 0 0 22px;
}

.prop-panel .result-subhead {
  margin: 0 0 12px;
}

/* OWNER: "for B put the headers for the states above each data point not to
   the left." A narrow column cannot afford a label column beside the value --
   the address wrapped to three lines and the slope note to three more. Label
   over value, and every value gets the panel's full width. */
.prop-panel .prop-summary {
  border-top: 0;
  display: block;
  margin-bottom: 28px;
}

.prop-panel .prop-summary dt {
  border-bottom: 0;
  padding: 0 0 5px;
}

.prop-panel .prop-summary dd {
  padding: 0 0 15px;
}

.prop-panel .prop-summary dd + dt {
  border-top: 1px solid rgba(6, 8, 7, 0.20);
  padding-top: 15px;
}

.result-row--stacked {
  grid-template-columns: 1fr;
  row-gap: 26px;
}

@media (max-width: 900px) {
  .result-wrap--panel { align-items: start; grid-template-columns: 1fr; }
  .prop-panel {
    padding-left: clamp(26px, 2.6vw, 38px);
    position: static;
  }

  .prop-panel::before { display: none; }
}


/* The hero's rust rule, borrowed. Same shape as .home-rust-line on the home
   page -- 112x7 -- scaled to the panel. Preview: three positions. */
.panel-rule {
  background: var(--rust);
  display: block;
  height: 6px;
  width: 92px;
}
.panel-rule--after { margin: 0 0 22px; }


/* ---- PREVIEW: the same panel, on the right ------------------------------ */
.result-wrap--panel.is-right {
  grid-template-columns: minmax(460px, 1.9fr) minmax(280px, 0.78fr);
}

.is-right .prop-panel {
  grid-column: 2;
  grid-row: 1;
  padding-left: clamp(26px, 2.6vw, 38px);
  /* Zero. Padding here pulls the text LEFT, because the panel's box still
     ends at the content column -- only the tint bleeds past it. Setting it to
     the header's 56px moved the text from 110px off the window edge to 166,
     the opposite of the intent. The right edge of the text is the content
     column's right edge, which is the same margin the page keeps on its left. */
  padding-right: 0;
}

.is-right .result-main {
  grid-column: 1;
  grid-row: 1;
}

/* The bleed flips with it -- and unlike the left one, it has to be clipped.
   Overflow to the LEFT of the page is not scrollable and costs nothing; a
   100vw block hanging off the RIGHT doubles the document's width and the
   header, hero band and footer all stop at the old edge. overflow-x: clip
   rather than hidden, because hidden makes a scroll container and would kill
   the panel's sticky. */
.is-right .prop-panel::before {
  left: 100%;
  right: auto;
}

/* The clip has to sit on a FULL-WIDTH ancestor. Put on the wrap itself -- a
   centred 1220px column -- it cut the bleed off at the column's own edge and
   left a strip of cream at the window's. */
.result-content:has(.is-right) {
  overflow-x: clip;
}

@media (max-width: 900px) {
  .result-wrap--panel.is-right { grid-template-columns: 1fr; }
  .is-right .prop-panel,
  .is-right .result-main { grid-column: 1; grid-row: auto; }
  .is-right .prop-panel { padding-right: clamp(26px, 2.6vw, 38px); }
}

/* ---- The enlarged aerial (owner item 18) ------------------------------- */
.aerial-zoom {
  align-items: center;
  overflow-y: auto;
  background: rgba(6, 8, 7, 0.88);
  cursor: default;
  display: flex;
  flex-direction: column;
  gap: 14px;
  inset: 0;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  position: fixed;
  z-index: 200;
}
.aerial-zoom__box {
  position: relative;
  /* Leaves room under the photo for the acreage readout and the buttons --
     at 92vh the controls fell off the bottom of the screen, which on a phone
     means the customer can drag but never apply. */
  max-width: min(92vw, 62vh);
  width: 100%;
}
.aerial-zoom__img {
  border: 1px solid rgba(242, 239, 230, 0.35);
  border-radius: 6px;
  display: block;
  width: 100%;
}
.aerial-zoom__outline {
  cursor: grab;
  inset: 0;
  position: absolute;
  /* The customer drags handles on this surface, so it takes pointer events --
     and touch-action:none stops the browser scrolling the page instead of
     moving the handle under a finger. */
  touch-action: none;
}
.aerial-zoom__outline:active { cursor: grabbing; }
.aerial-edit {
  display: grid;
  gap: 8px;
  justify-items: center;
  max-width: min(92vw, 92vh);
  text-align: center;
  width: 100%;
}
.aerial-edit__read {
  color: var(--ivory);
  font-family: var(--sans);
  margin: 0;
}
.aerial-edit__read strong {
  font-family: var(--narrow);
  font-size: 1.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.aerial-edit__read span {
  color: rgba(242, 239, 230, 0.7);
  font-size: 0.85rem;
  margin-left: 10px;
}
.aerial-edit__note {
  color: rgba(242, 239, 230, 0.72);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
  max-width: 46ch;
}
.aerial-edit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 4px;
}
.aerial-edit__actions button {
  background: transparent;
  border: 1px solid rgba(242, 239, 230, 0.45);
  color: var(--ivory);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  min-height: 44px;
  padding: 0 20px;
  text-transform: uppercase;
}
.aerial-edit__apply {
  background: var(--rust);
  border-color: var(--rust);
}
.aerial-edit__apply:disabled { opacity: 0.45; cursor: default; }
.aerial-zoom__hint {
  color: rgba(242, 239, 230, 0.75);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
}