/* Evergreen, two doors. The page is dressed for whoever is reading it:
   cream and green for a homeowner, soil and lime for a contractor. The switch
   in the bar re-dresses everything at once. */

:root {
  --soil: #2A1F18; --soil-2: #36291F;
  --bone: #F3E9DC; --bone-soft: #CBB9A4;
  --cream: #FBF3E8; --cream-2: #F2E6D5;
  --forest: #1D3818; --forest-soft: #4B5A42;
  --green: #2F6B22; --green-press: #255619;
  --lime: #A9D046; --lime-press: #97BD37;
  --draft: #A4481A;

  --ground: var(--cream); --ground-2: var(--cream-2);
  --ink: var(--forest); --ink-soft: var(--forest-soft);
  --line: rgba(29,56,24,0.16);
  --btn-bg: var(--green); --btn-ink: #fff; --btn-press: var(--green-press);
  --focus: var(--green);

  --sc-canvas: var(--cream); --sc-surface: var(--cream-2);
  --sc-ink: var(--forest); --sc-ink-soft: var(--forest-soft);
  --sc-accent: var(--green); --sc-accent-ink: #fff;
  --sc-font-display: "Jost", "Futura", system-ui, sans-serif;
  --sc-font-text: "Figtree", "Avenir Next", system-ui, sans-serif;

  --r: 10px;
  --gut: clamp(16px, 4vw, 64px);
  --bar: 68px;
  --max: 1240px;
}
body[data-path="contractor"] {
  --ground: var(--soil); --ground-2: var(--soil-2);
  --ink: var(--bone); --ink-soft: var(--bone-soft);
  --line: rgba(243,233,220,0.16);
  --btn-bg: var(--lime); --btn-ink: var(--soil); --btn-press: var(--lime-press);
  --focus: var(--lime);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sc-font-text); -webkit-font-smoothing: antialiased; overflow-x: clip;
  transition: background-color 380ms var(--sc-ease-out), color 380ms var(--sc-ease-out);
}
::selection { background: var(--lime); color: var(--soil); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--sc-font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
body[data-path="owner"] [data-contractor], body[data-path="contractor"] [data-owner] { display: none !important; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--lime); color: var(--soil); padding: 10px 14px; border-radius: var(--r); font-weight: 600; }
.skip:focus { top: 12px; }
section { position: relative; }
section h2 { font-size: clamp(2rem, 4vw, 3.6rem); }

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; white-space: nowrap; cursor: pointer; text-decoration: none;
  font: 600 1rem/1 var(--sc-font-text);
  color: var(--btn-ink); background: var(--btn-bg); border: 2px solid var(--btn-bg); border-radius: var(--r);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 18px -10px rgba(20,14,10,0.6);
  transition: background-color 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.98); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--btn-press); border-color: var(--btn-press); } }
.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--line); border-color: currentColor; } }
.btn--big { min-height: 56px; padding: 0 28px; font-size: 1.125rem; }
.textlink { font-weight: 600; }

/* ---------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto; z-index: 40; height: var(--bar);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 0 var(--gut);
  background: color-mix(in oklab, var(--ground) 94%, transparent);
  border-bottom: 1px solid var(--line);
  transition: background-color 380ms var(--sc-ease-out);
}
.bar__logo img { height: 44px; width: auto; }
.bar__right { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.bar__phone { font-weight: 700; text-decoration: none; font-variant-numeric: tabular-nums; }
.switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--ground-2); border: 1px solid var(--line); }
.switch button {
  position: relative; z-index: 1; min-height: 40px; padding: 0 18px; border: 0; background: none; cursor: pointer;
  font: 600 0.9375rem/1 var(--sc-font-text); color: var(--ink-soft); border-radius: 999px;
  transition: color 200ms var(--sc-ease-out);
}
.switch button[aria-checked="true"] { color: var(--btn-ink); }
.switch__thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: var(--btn-bg); box-shadow: 0 6px 14px -8px rgba(20,14,10,0.7);
  transition: transform 320ms var(--sc-ease-out), background-color 320ms var(--sc-ease-out);
}
body[data-path="contractor"] .switch__thumb { transform: translateX(100%); }
.lang { display: inline-flex; padding: 3px; border-radius: 8px; border: 1px solid var(--line); }
.lang button { min-width: 40px; min-height: 34px; border: 0; border-radius: 6px; background: none; cursor: pointer; font: 600 0.8125rem/1 var(--sc-font-text); color: var(--ink-soft); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.dock { display: none; }

/* --------------------------------------------------------------- hero -- */
.hero { min-height: 100svh; padding-top: var(--bar); display: grid; grid-template-rows: auto auto; align-content: start; overflow: hidden; box-sizing: border-box; }
.hero__back { position: absolute; inset: var(--bar) 0 auto 0; height: 44svh; z-index: 0; }
.hero__back img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.hero__mid { position: relative; z-index: 1; padding: calc(44svh - 56px) var(--gut) 28px; max-width: 70rem; }
.hero__where { display: table; margin-bottom: 12px; padding: 6px 12px; border-radius: 6px; background: var(--ground); font: 600 0.8125rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; }
.hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 20ch;
}
.doors { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 var(--gut) 40px; }
.door {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 20px;
  text-align: left; cursor: pointer; padding: 12px; border-radius: 14px; font: inherit;
  background: var(--cream); color: var(--forest); border: 2px solid transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 24px 44px -26px rgba(20,14,10,0.7);
  transition: transform 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out);
}
.door--site { background: var(--soil); color: var(--bone); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 24px 44px -26px rgba(0,0,0,0.9); }
.door img { grid-row: 1 / 3; width: 100%; height: 100%; min-height: 150px; object-fit: cover; border-radius: 8px; }
.door__who { align-self: end; font: 600 clamp(1.3rem, 2vw, 1.8rem)/1.1 var(--sc-font-display); letter-spacing: -0.015em; }
.door__who::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; margin-left: 0.4em; border-top: 3px solid currentColor; border-right: 3px solid currentColor; transform: translateY(-0.12em) rotate(45deg); }
.door__what { margin-top: 8px; font-size: 0.98rem; opacity: 0.85; }
@media (hover: hover) and (pointer: fine) { .door:hover { transform: translateY(-4px); } }
.door:active { transform: translateY(1px) scale(0.99); }
body[data-path="owner"] .door:not(.door--site), body[data-path="contractor"] .door--site { border-color: var(--lime); }

/* --------------------------------------------------------- yard check -- */
.check { max-width: var(--max); margin: 0 auto; padding: clamp(64px, 10vh, 110px) var(--gut) 40px; }
.check__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 24px 48px; align-items: end; }
.check__head p { color: var(--ink-soft); font-size: 1.125rem; max-width: 40ch; }
.yard { position: relative; margin-top: 32px; padding: clamp(18px, 3vw, 32px); border-radius: 16px; background: var(--ground-2); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 30px 60px -40px rgba(20,14,10,0.5); }
.yard__steps { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.yard__steps li { height: 5px; border-radius: 3px; background: var(--line); transition: background-color 240ms var(--sc-ease-out); }
.yard__steps li.is-on { background: var(--green); }
.yard__step { display: none; border: 0; margin: 0; padding: 0; min-width: 0; }
.yard__step.is-on { display: block; animation: stepIn 260ms var(--sc-ease-out); }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } }
.yard__step legend { font: 600 clamp(1.4rem, 2.4vw, 2rem)/1.15 var(--sc-font-display); margin-bottom: 18px; padding: 0; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile { position: relative; cursor: pointer; border-radius: 12px; overflow: hidden; background: var(--soil); color: #fff; min-height: 150px; display: flex; align-items: flex-end; }
.tile input { position: absolute; opacity: 0; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--sc-ease-out); }
.tile span { position: relative; width: 100%; padding: 40px 14px 12px; font: 600 1.125rem/1.2 var(--sc-font-display); background: linear-gradient(to top, rgba(20,14,10,0.88), rgba(20,14,10,0)); }
.tile--text { background: var(--green); align-items: center; justify-content: center; }
.tile--text span { background: none; padding: 14px; text-align: center; }
@media (hover: hover) and (pointer: fine) { .tile:hover img { transform: scale(1.04); } }
.tile:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.tile:has(input:checked) { box-shadow: 0 0 0 4px var(--lime); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; padding: 0; }
.chips span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: var(--r); background: var(--ground); border: 1.5px solid var(--line); font-weight: 600; transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out); }
.chips label:first-child span { border-color: var(--green); }
.chips input:checked + span { background: var(--green); border-color: var(--green); color: #fff; }
.chips input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.yard__other { display: grid; gap: 6px; margin-top: 18px; max-width: 26rem; font-weight: 600; font-size: 0.9375rem; }
.yard__next { margin-top: 20px; }
.yard__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 40rem; }
.yard__fields label, .bid__form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.9375rem; }
.yard__send { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.yard__note { margin-top: 12px; font-size: 0.9375rem; color: var(--ink-soft); }
.yard__error, .bid__error { margin-top: 8px; color: var(--draft); font-weight: 600; min-height: 1.4em; }
body[data-path="contractor"] .bid__error { color: #F0A070; }
.yard__back { display: none; margin-top: 16px; background: none; border: 0; padding: 8px 0; cursor: pointer; font: 600 0.9375rem/1 var(--sc-font-text); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 0.2em; }
.yard[data-at="2"] .yard__back, .yard[data-at="3"] .yard__back { display: inline-block; }
.check__call { margin-top: 18px; color: var(--ink-soft); }
.check__call a { font-weight: 700; color: var(--ink); }

input, select, textarea { font: 400 1rem/1.4 var(--sc-font-text); color: var(--forest); background: #FFFDF9; border: 1.5px solid rgba(29,56,24,0.28); border-radius: var(--r); padding: 12px 14px; min-height: 48px; width: 100%; box-sizing: border-box; caret-color: var(--green); }
input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--draft); }

/* --------------------------------------------------------------- fixes -- */
.fixes { max-width: var(--max); margin: 0 auto; padding: 40px var(--gut) 90px; }
.fixes__list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fixes__list li { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--ground); }
.fixes__list img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.fixes__list h3 { font-size: 1.35rem; }
.fixes__list p { margin-top: 4px; font-size: 0.975rem; color: var(--ink-soft); }
.fixes__list li.is-yours { order: -1; border: 2px solid var(--green); grid-column: 1 / -1; grid-template-columns: 160px 1fr; }
.fixes__list li.is-yours img { width: 160px; height: 120px; }
.fixes__list li.is-yours h3::after { content: attr(data-yours); margin-left: 12px; padding: 4px 8px; border-radius: 6px; background: var(--green); color: #fff; font: 600 0.75rem/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }

/* -------------------------------------------------------- stages (peak) -- */
.stages__stage { height: 100svh; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); background: var(--soil); color: var(--bone); }
.stages__copy { padding: 0 var(--gut); display: flex; flex-direction: column; justify-content: center; }
.stages__copy h2 { font-size: clamp(2.4rem, 4.4vw, 4.2rem); max-width: 11ch; }
.stages__copy p { margin-top: 16px; max-width: 30ch; color: var(--bone-soft); font-size: 1.125rem; }
.stages__list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; }
.stages__list li { font: 500 1.25rem/1.2 var(--sc-font-display); color: var(--bone-soft); padding-left: 16px; border-left: 3px solid transparent; transition: color 180ms var(--sc-ease-out), border-color 180ms var(--sc-ease-out); }
.stages__list li.is-on { color: var(--bone); border-left-color: var(--lime); }
.stages__view { display: flex; flex-direction: column; justify-content: center; padding: var(--bar) var(--gut) 0 0; }
.stages__frames { position: relative; width: min(100%, calc((100svh - 240px) * 0.8)); aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; background: var(--soil-2); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8); }
.stages__frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stages__frames img + img { opacity: 0; }
.terrain { position: relative; height: 84px; margin-top: 14px; width: min(100%, calc((100svh - 240px) * 0.8)); }
.terrain svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.terrain__soil { fill: #6B4A2F; }
.terrain__sod { fill: #4E8A2E; }
.terrain__line { fill: none; stroke: var(--bone); stroke-width: 3; vector-effect: non-scaling-stroke; }
.terrain__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: none; z-index: 2; min-height: 0; }
.terrain__knob { position: absolute; top: 0; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--bone); border: 3px solid var(--soil); box-shadow: 0 8px 16px -6px rgba(0,0,0,0.6); pointer-events: none; z-index: 1; }
.terrain__knob::before, .terrain__knob::after { content: ""; position: absolute; top: 50%; margin-top: -5px; border: 5px solid transparent; }
.terrain__knob::before { left: 6px; border-right-color: var(--soil); }
.terrain__knob::after { right: 6px; border-left-color: var(--soil); }
.terrain__range:focus-visible + .terrain__knob { outline: 3px solid var(--lime); outline-offset: 3px; }

/* --------------------------------------------------------------- homes -- */
.homes { max-width: var(--max); margin: 0 auto; padding: clamp(70px, 12vh, 130px) var(--gut) 90px; }
.homes__strip { margin-top: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.homes__strip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.homes__strip img:nth-child(even) { transform: translateY(28px); }
.visit { list-style: none; counter-reset: v; margin: 72px 0 36px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.visit li { counter-increment: v; display: grid; gap: 4px; padding-top: 16px; border-top: 2px solid var(--ink); }
.visit li::before { content: counter(v); font: 600 0.875rem/1 var(--sc-font-display); color: var(--green); }
.visit strong { font: 600 1.35rem/1.15 var(--sc-font-display); }
.visit span { color: var(--ink-soft); }

/* ------------------------------------------------------ contractor path -- */
.crews { max-width: var(--max); margin: 0 auto; padding: clamp(70px, 11vh, 120px) var(--gut) 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.crews h2 { font-size: clamp(2.3rem, 4.6vw, 4.4rem); max-width: 13ch; }
.crews__head p { margin-top: 18px; color: var(--ink-soft); font-size: 1.125rem; max-width: 44ch; }
.crews__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.crews__photo { margin: 0; }
.crews__photo img { width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(0,0,0,0.8); }
.crews__photo figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--ink-soft); }
.scope { max-width: var(--max); margin: 0 auto; padding: 40px var(--gut) 90px; }
.scope__grid { margin: 30px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
.scope__grid div { padding-top: 14px; border-top: 2px solid var(--lime); }
.scope__grid dt { font: 600 1.35rem/1.15 var(--sc-font-display); }
.scope__grid dd { margin: 6px 0 0; color: var(--ink-soft); }
.rig__stage { height: 100svh; overflow: hidden; display: flex; align-items: center; }
.rig__rail { display: flex; gap: 18px; padding: 0 var(--gut); align-items: center; }
.rig__lead { flex: 0 0 min(80vw, 360px); }
.rig__lead p { margin-top: 12px; color: var(--ink-soft); font-size: 1.125rem; }
.rig figure { flex: 0 0 auto; margin: 0; }
.rig figure img { height: 58svh; width: auto; max-width: 70vw; object-fit: cover; border-radius: var(--r); }
.rig figcaption { margin-top: 10px; font-weight: 600; color: var(--ink-soft); }
.papers { max-width: var(--max); margin: 0 auto; padding: 90px var(--gut) 40px; }
.facts { margin: 24px 0 0; max-width: 40rem; }
.fact { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fact dt { font-weight: 600; }
.fact dd { margin: 0; text-align: right; color: var(--ink-soft); }
.fact.is-empty { display: none; }
.is-draft .fact.is-empty { display: flex; border-bottom-style: dashed; border-bottom-color: var(--draft); }
.fact.is-pending dd { color: var(--draft); font-weight: 600; }
body[data-path="contractor"] .fact.is-pending dd { color: #F0A070; }
.print { margin-top: 26px; }
.bid { max-width: var(--max); margin: 0 auto; padding: 60px var(--gut) 100px; }
.bid__form { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; max-width: 52rem; }
.bid__form .wide { grid-column: 1 / -1; }
.bid__send { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* -------------------------------------------------------------- shared -- */
.area { max-width: var(--max); margin: 0 auto; padding: 90px var(--gut) 40px; border-top: 1px solid var(--line); }
.area h2 { font-size: clamp(3rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.04em; }
.area h2 span { color: var(--green); }
body[data-path="contractor"] .area h2 span { color: var(--lime); }
.area > p { margin-top: 8px; font: 500 1.35rem/1.2 var(--sc-font-display); color: var(--ink-soft); }
.area__towns { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.area__towns li { padding: 10px 16px; border-radius: var(--r); border: 1px solid var(--line); font-weight: 600; }
.area__towns li:first-child { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); }
.people { max-width: var(--max); margin: 0 auto; padding: 60px var(--gut) 80px; }
.people__row { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.people__row div { display: grid; gap: 4px; align-content: start; }
.people__row strong { font: 600 1.2rem/1.2 var(--sc-font-display); }
.people__row span { color: var(--ink-soft); font-size: 0.9375rem; }
.people__row a { font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-word; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; max-width: var(--max); margin: 0 auto; padding: 28px var(--gut) calc(36px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.9375rem; }
.foot img { width: 110px; height: auto; }
.foot__small { margin-left: auto; }

[data-draft] { display: none; }
.is-draft [data-draft] { display: block; }
.draft-note { margin-top: 16px; padding: 10px 12px; max-width: 34rem; border: 1.5px dashed var(--draft); border-radius: var(--r); color: var(--draft); font-size: 0.875rem; }

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  :root { --bar: 60px; }
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .bar { grid-template-columns: auto 1fr auto; padding: 0 12px; gap: 8px; }
  .bar__logo img { height: 34px; }
  .bar__phone { display: none; }
  .switch { justify-self: center; }
  .switch button { padding: 0 10px; min-height: 36px; font-size: 0.8125rem; }
  .lang button { min-width: 34px; }
  .dock { display: flex; gap: 10px; position: fixed; inset: auto 0 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--soil); --btn-bg: var(--lime); --btn-ink: var(--soil); --btn-press: var(--lime-press); --focus: var(--lime); box-shadow: 0 -8px 24px -12px rgba(0,0,0,0.6); transition: transform 220ms var(--sc-ease-out); }
  .dock.is-hidden { transform: translateY(110%); }
  .dock__call { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 20px; border: 2px solid var(--bone-soft); border-radius: var(--r); color: var(--bone); text-decoration: none; font-weight: 600; }
  .dock__cta { flex: 1; min-height: 52px; }

  .hero { min-height: 0; }
  .hero__back { height: 32svh; }
  .hero__mid { padding-top: calc(32svh - 44px); padding-bottom: 20px; }
  .hero h1 { font-size: 2rem; }
  .doors { grid-template-columns: 1fr; gap: 12px; padding-bottom: 28px; }
  .door { grid-template-columns: 116px 1fr; padding: 10px; column-gap: 14px; }
  .door img { min-height: 104px; }
  .door__who { font-size: 1.2rem; }
  .door__what { font-size: 0.9rem; }

  .check { padding-top: 48px; }
  .check__head { grid-template-columns: 1fr; gap: 10px; }
  .yard { padding: 16px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile { min-height: 120px; }
  .tile span { font-size: 1rem; }
  .yard__fields { grid-template-columns: 1fr; }
  .fixes__list { grid-template-columns: 1fr; }
  .fixes__list li.is-yours { grid-template-columns: 96px 1fr; }
  .fixes__list li.is-yours img { width: 96px; height: 96px; }

  .stages__stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .stages__copy { padding: calc(var(--bar) + 12px) 16px 0; }
  .stages__copy h2 { font-size: 2rem; max-width: none; }
  .stages__copy p { margin-top: 6px; font-size: 1rem; }
  .stages__list { display: flex; gap: 12px; margin-top: 12px; }
  .stages__list li { font-size: 0.9375rem; padding: 0 0 6px; border-left: 0; border-bottom: 3px solid transparent; }
  .stages__list li.is-on { border-bottom-color: var(--lime); }
  .stages__view { padding: 12px 16px 16px; justify-content: flex-start; align-items: center; }
  .stages__frames { width: 100%; max-height: calc(100svh - 330px); }
  .terrain { width: 100%; height: 70px; }

  .homes__strip { grid-template-columns: 1fr 1fr; }
  .homes__strip img:nth-child(even) { transform: none; }
  .visit { grid-template-columns: 1fr; margin-top: 40px; }
  .crews { grid-template-columns: 1fr; padding-top: 48px; }
  .scope__grid { grid-template-columns: 1fr; }
  .rig figure img { height: 46svh; max-width: 82vw; }
  .bid__form { grid-template-columns: 1fr; }
  .people__row { grid-template-columns: 1fr; }
  .foot__small { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .homes__strip img:nth-child(even) { transform: none; }
  .yard__step.is-on { animation: none; }
  body, .bar, .switch__thumb { transition: none; }
}

/* Capability sheet: the contractor path printed on its own. */
@media print {
  body { background: #fff !important; color: #111 !important; padding: 0; --ink: #111; --ink-soft: #444; --line: #ccc; }
  .bar, .dock, .hero, .path--owner, .rig, .bid, .print, .sc-grain, [data-sc-progress], .area, .skip, .draft-note { display: none !important; }
  body[data-path] .path--contractor { display: block !important; }
  .crews { grid-template-columns: 1.2fr 1fr; padding: 0 0 20px; }
  .crews__cta .btn { display: none; }
  .scope, .papers, .people, .foot { padding: 12px 0; }
  .fact.is-empty { display: none !important; }
}

/* Draft only: pick the hero headline with the client. */
.headline-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.headline-pick span { font: 600 0.75rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--draft); margin-right: 4px; }
.headline-pick button { min-width: 36px; min-height: 36px; border: 1.5px dashed var(--draft); border-radius: 8px; background: var(--ground); color: var(--draft); font: 700 0.9375rem/1 var(--sc-font-text); cursor: pointer; }
.headline-pick button[aria-pressed="true"] { background: var(--draft); color: var(--ground); border-style: solid; }