/* ===================================================================
   MILWARD EXCAVATION — shared design system
   One stylesheet, one set of tokens, used by every page on the site
   (home, /contractors, /land, /homeowners) so the brand never drifts.

   PALETTE: machine yellow / charcoal / graphite / warm stone / earth
   tan / muted olive. Red is reserved for urgent + warning states only.
=================================================================== */

:root{
  --yellow:#E2A339;
  --yellow-ink:#241A06;      /* text sitting on yellow */
  --charcoal:#1C1B18;
  --charcoal-2:#262420;
  --charcoal-3:#312E27;
  --graphite:#5B564A;
  --graphite-soft:#78725F;
  --stone:#E7E0CE;           /* warm concrete tone — never pure white */
  --stone-dim:#DACFB2;
  --stone-line:#C3B695;
  --stone-line-strong:#A6976E;
  --white:#F6F1E3;           /* warm near-white, used for chip fills / text-on-dark */
  --earth:#B0763F;
  --olive:#6E7A4C;
  --urgent:#B3392C;
  --urgent-ink:#3A0E08;

  --ink:var(--charcoal);
  --ink-soft:var(--graphite);
  --line:var(--stone-line);
  --line-strong:var(--stone-line-strong);

  /* the contained "workspace" tone used by the homeowner project canvas —
     warm aggregate gray / graphite (crushed limestone, road base, weathered
     equipment steel), never a page-level default. This is the DRIVEWAY
     mode's palette; .hw-band[data-tone="cool"] (drainage) and
     [data-tone="olive"] (grading, below) redefine these same variable
     names to their own families instead — every rule below that reads
     var(--workspace)/var(--workspace-2)/var(--workspace-line) or the
     --hw-* soft-text variables automatically follows whichever tone its
     band is in, with no duplicated rules needed. */
  --workspace:#393B3A;
  --workspace-2:#50514E;
  --workspace-line:rgba(246,241,227,0.16);
  --hw-soft:#C9BB9A;      /* secondary text on a dark homeowner band */
  --hw-soft-2:#B9AF9B;
  --hw-dim:#9A8F7A;
  --hw-dim-2:#8A7F6C;
  --hw-info-text:#E4DCC7;

  /* intermediate stops for the homeowner field-paper → project-workspace
     scroll transition (see .hw-transition). Warm aggregate-gray family,
     parallel to --mist/--slate-deep (drainage) and --clay-mid/--clay-warm
     (grading) below — just filling in the steps between the field-paper
     top and the DRIVEWAY --workspace bottom. Never used as a flat page
     background anywhere else. */
  --sand:#8B8981;
  --clay-deep:#62635F;

  /* DRAINAGE mode — a deeper, restrained, desaturated cool slate/navy
     family, deliberately never bright/cheesy blue. Same brand (yellow
     stays yellow for controls/actions/highlights everywhere), same UI
     language — only the "workspace" hue shifts once a homeowner selects
     Drainage. See .hw-band[data-tone="cool"]. */
  --drain:#212B32;
  --drain-2:#2B3941;
  --drain-line:rgba(214,227,233,0.16);
  --mist:#A7B7BE;         /* transition-gradient stop, parallel to --sand */
  --slate-deep:#3A4A54;   /* transition-gradient stop, parallel to --clay-deep */

  /* GRADING / YARD / PAD mode — muted field olive settling into warm
     clay, never lawn-service green. Same mechanism as Drainage: see
     .hw-band[data-tone="olive"]. */
  --grade:#3F4437;
  --grade-2:#4D5141;
  --grade-line:rgba(232,228,212,0.16);
  --clay-mid:#A18A70;     /* transition-gradient stop, parallel to --sand */
  --clay-warm:#805A43;    /* transition-gradient stop, parallel to --clay-deep */

  /* SMALL DEMOLITION / REMOVAL mode — equipment yellow settling into
     deep charcoal, deliberately the most colorful of the four project
     atmospheres. Kept separate from the brighter interaction --yellow
     (used for controls/CTAs/active states/markers everywhere, in every
     mode) so the project backdrop and the UI accent never blur into one
     another. Same mechanism as Drainage/Grading: see
     .hw-band[data-tone="yellow"]. */
  --demo:#242522;
  --demo-2:#34332E;
  --demo-line:rgba(246,241,227,0.16);
  --demo-yellow:#D3A62B;      /* transition-gradient stop, parallel to --sand */
  --demo-yellow-deep:#78652F; /* transition-gradient stop, parallel to --clay-deep */
}

*{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--stone); color:var(--ink);
  font-family:"IBM Plex Sans", sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit; cursor:pointer;}
img,video{ display:block; max-width:100%; }
.mono{ font-family:"IBM Plex Mono", monospace; }
.hidden{ display:none !important; }
:focus-visible{ outline:2.5px solid var(--yellow); outline-offset:2px; }

.container{ max-width:900px; margin:0 auto; padding-left:20px; padding-right:20px; }

/* ---------- shared title-block header ---------- */
header.site-header{ position:sticky; top:0; z-index:50; background:var(--stone); border-bottom:2px solid var(--charcoal); }
.tb-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 20px; gap:12px; }
.tb-mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.tb-mark svg{ width:24px; height:24px; flex-shrink:0; color:var(--charcoal); }
.tb-name{ font-family:"Archivo",sans-serif; font-weight:900; font-size:14.5px; letter-spacing:0.03em; text-transform:uppercase; }
.tb-name span.sub{ display:block; font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:9.5px; letter-spacing:0.1em; color:var(--ink-soft); margin-top:2px; text-transform:uppercase; }
.tb-call{
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:500;
  border:1.5px solid var(--charcoal); padding:9px 14px; letter-spacing:0.02em;
  background:var(--charcoal); color:var(--white); white-space:nowrap; text-decoration:none; flex-shrink:0;
}
.tb-meta{
  display:flex; border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
}
.tb-meta > div{ padding:8px 20px; border-right:1px solid var(--line); }
.tb-meta b{ color:var(--ink); font-weight:600; }
.tb-status-dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--olive); margin-right:6px; flex-shrink:0; }
.tb-meta-mobile{
  display:none; align-items:center; gap:8px; padding:8px 20px; border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft);
  flex-wrap:wrap; row-gap:2px;
}
.tb-rapid{
  display:flex; align-items:center; gap:8px; padding:8px 20px; border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink);
  background:rgba(226,163,57,0.16); border-left:3px solid var(--yellow);
}
@media (max-width:700px){
  .tb-meta{ display:none; }
  .tb-meta-mobile{ display:flex; }
}

/* ---------- shared footer ---------- */
footer.site-footer{ background:var(--charcoal); color:var(--white); }
.foot-inner{ padding-block:36px 22px; }
.foot-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px; }
.foot-btn{ font-family:"IBM Plex Mono",monospace; font-size:13.5px; letter-spacing:0.03em; padding:16px 22px; border:1.5px solid var(--white); flex:1 1 180px; text-align:center; text-decoration:none; color:var(--white); }
.foot-btn.solid{ background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink); font-weight:600; }
.foot-links{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:18px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; }
.foot-links a{ color:#C9C0A4; text-decoration:none; }
.foot-meta{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.04em; color:#8D8570; border-top:1px solid #3A362C; padding-top:16px; }

/* ---------- eyebrow / section labels ---------- */
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:20px; height:2px; background:var(--yellow); flex-shrink:0; }

/* ---------- headline scale ---------- */
h1.title{
  font-family:"Archivo",sans-serif; font-weight:900; text-transform:uppercase;
  font-size:clamp(30px,7.5vw,54px); line-height:0.98; letter-spacing:-0.005em;
}
h1.title em{ font-style:normal; color:var(--charcoal); background:var(--yellow); padding:0 6px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
h2.section-title{ font-family:"Archivo",sans-serif; font-weight:700; font-size:clamp(21px,3.6vw,28px); }

/* ---------- buttons ---------- */
.btn{ display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:13.5px; letter-spacing:0.03em; padding:15px 22px; border:1.5px solid var(--charcoal); text-align:center; text-decoration:none; color:var(--charcoal); background:none; }
.btn.solid{ background:var(--charcoal); color:var(--white); }
.btn.accent{ background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink); font-weight:700; }
.btn.urgent{ background:var(--urgent); border-color:var(--urgent); color:var(--white); font-weight:600; }
.btn.block{ display:block; width:100%; }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-row > *{ flex:1 1 160px; }

/* ---------- FIG. / work-reference plate ---------- */
.plate-label{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.plate{
  position:relative; aspect-ratio:16/9; border:1.5px solid var(--charcoal); overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(28,27,24,0.14) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #C9BD9C 0%, #AC9D76 45%, #8D7F5C 100%);
}
.plate img{ width:100%; height:100%; object-fit:cover; display:block; }
/* wider, lower-page variant — real equipment-on-property presence rather
   than a small pasted-in image; same drafting-plate frame, just given
   more room to read at the bottom of a page. */
.plate.wide{ aspect-ratio:21/9; }
@media (max-width:640px){ .plate.wide{ aspect-ratio:4/3; } }
.plate::before, .plate::after{ content:""; position:absolute; width:16px; height:16px; border-top:2px solid var(--yellow); border-left:2px solid var(--yellow); top:10px; left:10px; }
.plate::after{ top:auto; left:auto; bottom:10px; right:10px; border-top:none; border-left:none; border-bottom:2px solid var(--yellow); border-right:2px solid var(--yellow); }
.plate-tag{ position:absolute; bottom:16px; left:16px; background:var(--stone); border:1px solid var(--charcoal); padding:5px 9px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:0.04em; max-width:calc(100% - 32px); }
.plate-cap{ margin-top:10px; font-size:13.5px; color:var(--ink-soft); }

/* ---------- small info spec grid ---------- */
.spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--charcoal); border-left:1px solid var(--line); }
.spec-cell{ padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--stone-dim); }
.spec-cell b{ display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--earth); margin-bottom:6px; }
.spec-cell p{ font-size:13.5px; color:var(--ink); }
@media (max-width:640px){ .spec-grid{ grid-template-columns:1fr; } }

/* ===================================================================
   REACTIVE INTAKE — single page, no navigation, no step counters.
   Used by /contractors and /land. Sections stack, answered sections
   condense in place with an obvious "Change" affordance, and later
   sections are appended below — nothing already on the page disappears.
=================================================================== */
.intake{ max-width:640px; margin:0 auto; padding:8px 20px 40px; }
.intake-lede{ padding:0 0 8px; }

.rf-section{ padding-block:22px; border-top:1px solid var(--line); }
.rf-section:first-child{ border-top:none; }
.rf-eyebrow{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.rf-section h3{ font-size:clamp(18px,3.6vw,22px); font-weight:700; font-family:"Archivo",sans-serif; }
.rf-section p.help{ margin-top:6px; color:var(--ink-soft); font-size:13.5px; max-width:56ch; }

/* answered / condensed state */
.rf-answer{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.rf-answer-body b.val{ display:block; font-size:16px; font-weight:700; margin-top:2px; }
.rf-answer-body .val .urgent-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--urgent); margin-right:7px; }
/* deliberately loud: this is the one place a customer edits an answer
   without using the browser back button, so it gets the system's one
   reserved-red treatment instead of blending into the layout like a
   quiet secondary link. SOLID red by default (not just on hover, since
   mobile has no hover) — high-contrast white text, always legible on
   both the light bands and the dark homeowner workspace band without a
   separate per-theme override. */
.rf-change{
  font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:var(--white); background:var(--urgent); border:1.5px solid var(--urgent); padding:11px 16px;
  min-height:44px; flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  transition:background-color 0.15s ease, border-color 0.15s ease;
}
.rf-change::before{ content:"✎"; font-size:12px; line-height:1; }
.rf-change:hover{ background:var(--urgent-ink); border-color:var(--urgent-ink); }
.rf-change:active{ background:var(--urgent-ink); border-color:var(--urgent-ink); }
.rf-change:focus-visible{ outline:2.5px solid var(--yellow); outline-offset:3px; }

.chip-grid{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.chip{
  text-align:left; background:var(--white); border:1.5px solid var(--line-strong); color:var(--ink);
  padding:15px 16px; font-size:15px; font-family:"IBM Plex Sans",sans-serif; display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.chip .sub{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:3px; font-family:"IBM Plex Sans",sans-serif; }
.chip:hover{ border-color:var(--charcoal); }
.chip.selected{ background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink); }
.chip.selected .sub{ color:rgba(36,26,6,0.75); }
.chip .tag{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--line-strong); padding:4px 7px; flex-shrink:0; }
.chip .tag.urgent-tag{ border-color:var(--urgent); color:var(--urgent); }
.chip.selected .tag.urgent-tag{ border-color:var(--urgent-ink); color:var(--urgent-ink); background:rgba(179,57,44,0.16); }

.tag-toggle-grid{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; }
.tag-toggle{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:0.03em; text-transform:uppercase;
  border:1.5px solid var(--line-strong); background:var(--white); color:var(--ink); padding:9px 13px;
}
.tag-toggle.selected{ background:var(--charcoal); border-color:var(--charcoal); color:var(--white); }

.field{ margin-bottom:14px; }
.field label{ display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:6px; }
.field input[type="text"], .field input[type="tel"], .field textarea{
  width:100%; background:var(--white); border:1.5px solid var(--line); padding:13px 14px; font-size:15px; color:var(--ink);
  font-family:"IBM Plex Sans",sans-serif;
}
.field textarea{ min-height:100px; resize:vertical; }
.field input:focus, .field textarea:focus{ border-color:var(--charcoal); outline:none; }
.field .note{ font-size:12px; color:var(--ink-soft); margin-top:5px; }

.info-panel{ border:1.5px solid var(--charcoal); background:var(--white); padding:16px; margin-top:14px; }
.info-panel .label{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.info-panel p{ font-size:14px; color:var(--ink); }
.info-panel.urgent{ border-color:var(--urgent); background:rgba(179,57,44,0.06); }
.info-panel.urgent .label{ color:var(--urgent); }
.info-panel.notice{ border-color:var(--line-strong); background:var(--stone-dim); }

/* site evaluation checkbox card */
.site-eval-card{ border:1.5px solid var(--line-strong); background:var(--white); padding:16px; margin-top:14px; }
.site-eval-check{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; }
.site-eval-check input{ width:20px; height:20px; margin-top:2px; accent-color:var(--yellow); flex-shrink:0; }
.site-eval-check span.label-text{ font-size:14.5px; font-weight:600; }
.site-eval-card p.note{ margin-top:10px; font-size:13px; color:var(--ink-soft); }
.site-eval-card.locked{ opacity:0.6; }
.site-eval-card.locked .site-eval-check{ pointer-events:none; }

.rf-continue{ margin-top:20px; }

/* optional compact detail rows within a section (utilities/access/etc) */
.detail-group{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.detail-group .dg-label{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:8px; }
.dg-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.dg-chip{ font-family:"IBM Plex Sans",sans-serif; font-size:13.5px; border:1.5px solid var(--line-strong); background:var(--white); padding:9px 13px; }
.dg-chip.selected{ background:var(--charcoal); border-color:var(--charcoal); color:var(--white); }

/* file attach */
.attach-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.attach-btn{ flex:1 1 160px; text-align:center; padding:15px; border:1.5px solid var(--charcoal); background:var(--white); font-family:"IBM Plex Mono",monospace; font-size:12.5px; letter-spacing:0.03em; text-transform:uppercase; }
.attach-btn .count{ display:block; margin-top:4px; color:var(--earth); font-weight:600; }

/* field-ticket summary */
.ticket{ border:2px solid var(--charcoal); background:var(--white); padding:20px; margin-top:18px; }
.ticket-head{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px; flex-wrap:wrap; gap:6px; }
.ticket-id{ font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
.ticket-row{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.ticket-row:last-child{ border-bottom:none; }
.ticket-row span.k{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft); flex-shrink:0; }
.ticket-row span.v{ text-align:right; font-weight:600; }

/* video / field-reference panel (Option B — dark panel, overlay text) */
.video-panel{
  position:relative; margin-top:16px; border:1.5px solid var(--charcoal); background:var(--charcoal);
  aspect-ratio:16/10; overflow:hidden; max-width:340px;
}
.video-panel video, .video-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.video-panel .vp-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:14px;
  background:linear-gradient(180deg, rgba(28,27,24,0) 35%, rgba(28,27,24,0.88) 100%);
  pointer-events:none;
}
.video-panel .vp-label{ font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--yellow); margin-bottom:6px; }
.video-panel .vp-copy{ font-size:13px; color:var(--white); line-height:1.4; max-width:32ch; }
.video-panel.no-video{ display:flex; align-items:center; justify-content:center; }

/* draft persistence indicator */
.draft-indicator{
  display:inline-flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace; font-size:10.5px;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-top:10px;
}
.draft-indicator .dot{ width:6px; height:6px; border-radius:50%; background:var(--olive); }

/* persistent call/text bar — no step counter, no "back to overview" */
.escape-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:flex; border-top:2px solid var(--charcoal); background:var(--stone);
}
.escape-bar a{
  flex:1; text-align:center; padding:16px 10px; font-family:"Archivo",sans-serif; font-weight:700; font-size:14px;
  text-decoration:none; display:flex; align-items:center; justify-content:center; gap:6px;
}
.escape-bar a:first-child{ background:var(--charcoal); color:var(--white); border-right:2px solid var(--charcoal); }
.escape-bar a:last-child{ background:var(--yellow); color:var(--yellow-ink); }
body.has-escape-bar .intake{ padding-bottom:100px; }
@media (min-width:760px){
  .escape-bar{ position:sticky; max-width:900px; margin:0 auto; border:1.5px solid var(--charcoal); }
  body.has-escape-bar .intake{ padding-bottom:60px; }
}

/* ===================================================================
   HOMEOWNER SCROLL WORKSPACE — full-page composition, not a boxed
   panel. Bands gradate from the light Milward shell into a warmer
   project-workspace tone as the visitor scrolls further in.
=================================================================== */
.hw-flow{ position:relative; }
.hw-band{
  padding-block:36px; transition:background-color 0.4s ease;
}
.hw-band[data-tone="light"]{ background:var(--stone); color:var(--ink); }
.hw-band[data-tone="warm"]{ background:var(--workspace); color:var(--white); }
/* DRAINAGE mode: same dark-band mechanics as warm, but every variable a
   dark band's rules read (below) resolves to the cool slate family
   instead — no rule duplication needed for the color shift itself. */
.hw-band[data-tone="cool"]{
  background:var(--drain); color:var(--white);
  --workspace:var(--drain);
  --workspace-2:var(--drain-2);
  --workspace-line:var(--drain-line);
  --hw-soft:#A9BAC2;
  --hw-soft-2:#8FA3AC;
  --hw-dim:#7E8F98;
  --hw-dim-2:#66767E;
  --hw-info-text:#D7E1E6;
}
/* GRADING / YARD / PAD mode: same dark-band mechanics again, resolving
   to the muted field-olive family instead. */
.hw-band[data-tone="olive"]{
  background:var(--grade); color:var(--white);
  --workspace:var(--grade);
  --workspace-2:var(--grade-2);
  --workspace-line:var(--grade-line);
  --hw-soft:#C2BFA0;
  --hw-soft-2:#AEA98A;
  --hw-dim:#8F8C71;
  --hw-dim-2:#787660;
  --hw-info-text:#E4E1CB;
}
/* SMALL DEMOLITION / REMOVAL mode: same dark-band mechanics again,
   resolving to the equipment-yellow/charcoal family instead. */
.hw-band[data-tone="yellow"]{
  background:var(--demo); color:var(--white);
  --workspace:var(--demo);
  --workspace-2:var(--demo-2);
  --workspace-line:var(--demo-line);
  --hw-soft:#C7B27A;
  --hw-soft-2:#B39F68;
  --hw-dim:#8F8259;
  --hw-dim-2:#786C4A;
  --hw-info-text:#E9DFC0;
}

/* ---------------------------------------------------------------
   THE TRANSITION ZONE — a single tall section whose background is
   one continuous gradient from field-paper down to the workspace
   earth tone. There is no JS driving this: scrolling through the
   section's own height IS the color transition, so it can never
   stutter or jank. Content sits in three unhurried "beats" spaced
   down the height by generous padding, each colored for whatever
   part of the gradient sits behind it at that point — light ink on
   the paper/sand top half, warm cream on the clay/earth bottom half.
   Interface chrome (borders, boxes) is deliberately absent here —
   this stretch is editorial, not interactive.
------------------------------------------------------------------ */
.hw-transition{
  background:linear-gradient(to bottom,
    var(--stone) 0%,
    var(--stone-dim) 20%,
    var(--sand) 42%,
    var(--clay-deep) 72%,
    var(--workspace) 100%);
  padding-block:14vh 10vh;
}
/* the same field-paper-to-workspace transition, but shifted toward a
   cool, wet-slate gradient for Drainage mode — still no JS driving it,
   still just scrolling through the section's own height. */
.hw-transition[data-mode="drainage"]{
  background:linear-gradient(to bottom,
    var(--stone) 0%,
    var(--stone-dim) 20%,
    var(--mist) 42%,
    var(--slate-deep) 72%,
    var(--drain) 100%);
}
/* the same transition, settling into muted field olive / warm clay for
   Grading / Yard / Pad mode. */
.hw-transition[data-mode="grading"]{
  background:linear-gradient(to bottom,
    var(--stone) 0%,
    var(--stone-dim) 20%,
    var(--clay-mid) 42%,
    var(--clay-warm) 72%,
    var(--grade) 100%);
}
/* the same transition, but the most colorful of the four — clear
   equipment yellow up top, settling into charcoal for Small
   Demolition / Removal. */
.hw-transition[data-mode="demolition"]{
  background:linear-gradient(to bottom,
    var(--stone) 0%,
    var(--stone-dim) 20%,
    var(--demo-yellow) 42%,
    var(--demo-yellow-deep) 72%,
    var(--demo) 100%);
}
.hwt-beat{ max-width:640px; margin:0 auto; padding:24px 20px; }
.hwt-beat + .hwt-beat{ margin-top:22vh; }
.hwt-beat.tone-dark{ color:var(--charcoal); }
.hwt-beat.tone-dark .eyebrow{ color:var(--graphite); }
.hwt-beat.tone-dark .eyebrow::before{ background:var(--yellow); }
.hwt-beat.tone-light{ color:var(--white); }
.hwt-beat.tone-light .eyebrow{ color:#E7D9BE; }
.hwt-beat.tone-light .eyebrow::before{ background:var(--yellow); }
.hwt-beat h2{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:clamp(22px,4.2vw,30px); line-height:1.2;
}
.hwt-beat p{ margin-top:10px; font-size:15px; line-height:1.6; max-width:52ch; }
.hwt-beat.tone-dark p{ color:var(--graphite); }
.hwt-beat.tone-light p{ color:#E7D9BE; }

.hwt-photo{
  max-width:760px; margin:0 auto; padding:0 20px;
}
.hwt-photo-frame{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:
    repeating-linear-gradient(135deg, rgba(28,27,24,0.10) 0 2px, transparent 2px 16px),
    linear-gradient(160deg, #C9BD9C 0%, #AC9D76 45%, #8D7F5C 100%);
}
.hwt-photo-frame img{ width:100%; height:100%; object-fit:cover; display:block; object-position:center 30%; }
/* very light dimming for Milward-owned reference photography only — not
   the pending placeholder (no real photo to calm) and never the
   homeowner's own uploaded photo (.photo-frame, styled separately),
   which stays at full brightness since it's a working tool, not proof. */
.hwt-photo-frame:not(.pending)::after{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,0.11); pointer-events:none;
}
.hwt-photo-frame .hwt-photo-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:20px;
  background:linear-gradient(180deg, rgba(28,27,24,0) 45%, rgba(28,27,24,0.55) 100%);
}
.hwt-photo-cap{ color:var(--white); font-size:13.5px; max-width:40ch; }
.hwt-photo-cap b{ display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--yellow); margin-bottom:6px; font-weight:500; }
/* used only when a mode has no real jobsite photography yet (see Small
   Demolition / Removal) — a plain textured placeholder instead of a
   borrowed or unrelated equipment image. */
.hwt-photo-frame.pending{
  background:
    repeating-linear-gradient(135deg, rgba(36,37,34,0.14) 0 2px, transparent 2px 16px),
    var(--demo-yellow);
}
.hwt-photo-frame.pending img{ display:none; }
.hwt-photo-pending{ display:none; }
.hwt-photo-frame.pending .hwt-photo-pending{
  /* top:0/bottom:auto with a fixed height, not inset:0 — keeps this
     clear of the bottom hwt-photo-overlay caption band even on short
     mobile frame heights, where a centered box would collide with it. */
  display:flex; position:absolute; top:0; left:0; right:0; height:60%;
  align-items:center; justify-content:center;
  flex-direction:column; text-align:center; color:var(--charcoal);
}
.hwt-photo-pending svg{ width:28px; height:28px; opacity:0.55; margin-bottom:10px; }
.hwt-photo-pending span{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; }
/* :not([data-tone="light"]) rather than [data-tone="warm"] — these
   rules are written entirely in variables, so both homeowner dark
   bands (warm driveway, cool drainage) get correct colors from one
   rule set; only the variable values differ per tone (defined above). */
.hw-band:not([data-tone="light"]) .rf-section{ border-color:var(--workspace-line); }
.hw-band:not([data-tone="light"]) .rf-eyebrow{ color:var(--hw-soft); }
.hw-band:not([data-tone="light"]) .ink-soft-text{ color:var(--hw-soft); }
.hw-band:not([data-tone="light"]) .chip{ background:var(--workspace-2); border-color:var(--workspace-line); color:var(--white); }
.hw-band:not([data-tone="light"]) .chip .sub{ color:var(--hw-soft-2); }
.hw-band:not([data-tone="light"]) .chip.selected{ background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink); }
.hw-band:not([data-tone="light"]) .field input, .hw-band:not([data-tone="light"]) .field textarea{ background:var(--workspace-2); border-color:var(--workspace-line); color:var(--white); }
.hw-band:not([data-tone="light"]) .field label{ color:var(--hw-soft); }
.hw-band:not([data-tone="light"]) p.help{ color:var(--hw-soft-2); }
.hw-band:not([data-tone="light"]) .attach-btn{ background:var(--workspace-2); border-color:var(--workspace-line); color:var(--white); }
.hw-band:not([data-tone="light"]) .tag-toggle{ background:var(--workspace-2); border-color:var(--workspace-line); color:var(--white); }
.hw-band:not([data-tone="light"]) .info-panel{ background:var(--workspace-2); border-color:var(--workspace-line); color:var(--white); }
.hw-band:not([data-tone="light"]) .info-panel p{ color:var(--hw-info-text); }
.hw-band:not([data-tone="light"]) .info-panel .label{ color:var(--hw-soft); }
.hw-band:not([data-tone="light"]) .ticket{ background:var(--workspace-2); border-color:var(--workspace-line); color:var(--white); }
.hw-band:not([data-tone="light"]) .ticket-row{ border-color:var(--workspace-line); }
.hw-band:not([data-tone="light"]) .ticket-row span.k{ color:var(--hw-soft-2); }
.hw-band:not([data-tone="light"]) .ticket-id{ color:var(--hw-soft-2); }
.hw-band:not([data-tone="light"]) .btn{ color:var(--white); border-color:var(--white); }
.hw-band:not([data-tone="light"]) .btn.solid{ background:var(--white); color:var(--workspace); border-color:var(--white); }

.hw-columns{ display:flex; flex-direction:column; gap:18px; }
@media (max-width:859px){
  /* the canvas column's own box is short — display:contents makes its
     children (the sticky photo strip, then the scrolling tags/meta)
     direct flex items of .hw-columns, whose combined height (photo +
     tags + meta + all the questions) gives the sticky strip somewhere
     to actually stick while the page scrolls. */
  .hw-canvas-col{ display:contents; }
  .hw-canvas-sticky{
    position:sticky; top:86px; z-index:5; background:var(--workspace);
    padding-block:12px 10px; margin-inline:-20px; padding-inline:20px;
  }
  .hw-canvas-sticky .photo-frame{ aspect-ratio:16/9; }
  .hw-canvas-scroll{ padding-top:4px; }
}
@media (min-width:860px){
  .hw-columns{ flex-direction:row; align-items:flex-start; gap:36px; }
  .hw-columns .hw-canvas-col{ position:sticky; top:96px; width:320px; flex-shrink:0; }
  .hw-columns .hw-questions-col{ flex:1; min-width:0; }
}

.hw-canvas-wrap{ }
.canvas-label-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.photo-frame{
  position:relative; aspect-ratio:4/3; background:var(--workspace-2); border:1px dashed var(--workspace-line);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.photo-frame img{ width:100%; height:100%; object-fit:contain; }
.photo-empty{ text-align:center; color:var(--hw-dim); padding:20px; }
.photo-empty svg{ margin:0 auto 10px; width:30px; height:30px; opacity:0.6; }
.photo-empty span{ font-size:12px; display:block; }
.photo-pin{ position:absolute; width:16px; height:16px; margin-left:-8px; margin-top:-8px; border-radius:50%; background:var(--yellow); border:2px solid var(--charcoal); }
.photo-frame.marking{ cursor:crosshair; outline:2px solid var(--yellow); outline-offset:2px; }
.mark-row{ display:flex; justify-content:flex-start; align-items:center; margin-top:8px; flex-wrap:wrap; gap:8px; }
.mark-btn{ background:none; border:1px solid var(--workspace-line); color:var(--hw-soft); font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; padding:8px 10px; }
.mark-btn.active{ border-color:var(--yellow); color:var(--yellow); }
.mark-hint{ font-size:11px; color:var(--hw-dim); margin-top:6px; }
.mark-hint.prompt{ color:var(--yellow); }

.photo-tag-row{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.photo-tag{ font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:0.03em; text-transform:uppercase; border:1.5px solid var(--workspace-line); background:var(--workspace-2); color:var(--white); padding:7px 11px; }
.photo-tag.selected{ background:var(--yellow); border-color:var(--yellow); color:var(--yellow-ink); }

/* ---------- project canvas: the assembling record ---------- */
.hw-canvas-col .eyebrow{ color:var(--hw-soft); }
.hw-canvas-col .eyebrow::before{ background:var(--yellow); }
.canvas-title{ color:var(--hw-soft); transition:color 0.3s ease; }
.record-row.pending b{ color:var(--hw-dim-2); font-weight:400; }
.canvas-title.is-defined{ color:var(--yellow); animation:definePulse 0.5s ease; }
@keyframes definePulse{ 0%{ transform:scale(1); } 35%{ transform:scale(1.05); } 100%{ transform:scale(1); } }

.photo-frame{ transition:border-color 0.4s ease, border-style 0.4s ease; }
.photo-frame.is-defined{ border-color:var(--yellow); border-style:solid; }

.record-list{ margin-top:16px; list-style:none; display:flex; flex-direction:column; }
.record-row{
  font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:0.03em; text-transform:uppercase;
  color:var(--hw-soft-2); padding:8px 0; border-top:1px solid var(--workspace-line);
  animation:recordIn 0.4s ease both;
}
.record-row:first-child{ border-top:none; }
.record-row b{ color:var(--white); font-weight:600; }
.record-row .record-num{
  display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px;
  border-radius:50%; background:var(--yellow); color:var(--yellow-ink); font-weight:700; font-size:9.5px;
  margin-right:8px; flex-shrink:0; position:relative; top:-1px;
}
.record-empty{ font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--hw-dim-2); padding:8px 0; }
@keyframes recordIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

/* leader line + flag on a placed marker pin */
.pin-leader{ position:absolute; height:1.5px; background:var(--yellow); transform-origin:left center; pointer-events:none; }
.pin-flag{
  position:absolute; background:var(--yellow); color:var(--yellow-ink); font-family:"IBM Plex Mono",monospace;
  font-size:10px; font-weight:700; letter-spacing:0.02em; padding:2px 5px; white-space:nowrap;
  border:none; cursor:pointer;
}
.pin-flag:hover{ background:var(--urgent); color:var(--white); }
.pin-flag:focus-visible{ outline:2px solid var(--urgent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .record-row{ animation:none; }
  .canvas-title.is-defined{ animation:none; }
}

/* ---------- driveway field-reference proof set: a real prior job,
   curated to four frames (before / problem / progress / result) so it
   reads as case proof, not a photo dump. ---------- */
.hw-fieldref{ padding-block:40px; border-top:1px solid var(--workspace-line); }
.hw-fieldref p.help{ max-width:60ch; }
.hw-fieldref-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px; margin-top:18px;
  background:var(--workspace-line); border:1px solid var(--workspace-line);
}
.hw-fieldref-cell{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--workspace-2); }
.hw-fieldref-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
/* same very light reference-photo dimming as .hwt-photo-frame, above. */
.hw-fieldref-cell::after{
  content:''; position:absolute; inset:0; background:rgba(0,0,0,0.11); pointer-events:none;
}
.hw-fieldref-cell .hfr-tag{
  position:absolute; left:0; bottom:0; background:var(--charcoal); color:var(--yellow);
  font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; padding:4px 9px;
}
@media (min-width:600px){ .hw-fieldref-grid{ grid-template-columns:repeat(4,1fr); } }

.guidance-panel{ border-left:3px solid var(--yellow); background:rgba(226,163,57,0.08); padding:14px 16px; margin-top:14px; }
.guidance-panel .label{ font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--earth); margin-bottom:6px; }
.hw-band:not([data-tone="light"]) .guidance-panel{ background:rgba(226,163,57,0.14); }
.guidance-panel p{ font-size:13.5px; line-height:1.55; }
.guidance-panel .term{ font-weight:700; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}