/* Saguaro Handyman — work-order / carbon-copy job ticket design
   Palette: desert terracotta + sand + deep brown, carbon pink/yellow hints.
   Type: Zilla Slab (display) + Alegreya Sans (body) + system mono (ticket data). */

:root {
  --ink: #33241a;            /* deep brown — the pen */
  --ink-soft: #5c4634;
  --paper: #f3e9d5;          /* sand — white copy */
  --paper-deep: #e8dbbf;
  --paper-edge: #d9c9a6;
  --terra: #b04a24;          /* terracotta — the printed form */
  --terra-dark: #8a3819;
  --carbon-pink: #f0d6cd;    /* pink copy */
  --carbon-pink-deep: #e4bfb3;
  --carbon-yellow: #f2e6bb;  /* yellow copy */
  --carbon-yellow-deep: #e5d494;
  --rule: #c9b58e;           /* printed rule lines */
  --stamp: #9e3b1c;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --slab: "Zilla Slab", "Rockwell", serif;
  --body: "Alegreya Sans", "Segoe UI", "Trebuchet MS", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  font-family: var(--body);
  font-size: 1.075rem;
  line-height: 1.55;
  color: var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(51, 36, 26, 0.035) 34px 35px),
    var(--paper);
}

/* ---------- shared bones ---------- */

.sheet {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a { color: var(--terra-dark); text-underline-offset: 3px; }
a:hover { color: var(--terra); }

h1, h2, h3 { font-family: var(--slab); line-height: 1.12; }

.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0.02em; }

/* ---------- triplicate strip ---------- */

.triplicate {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 1.25rem;
  display: flex;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  align-items: center;
}
.copy-chip {
  display: inline-block;
  width: 0.7rem; height: 0.7rem;
  border: 1px solid rgba(243, 233, 213, 0.6);
  vertical-align: -1px;
  margin-right: 0.35rem;
}
.chip-white { background: var(--paper); }
.chip-pink { background: var(--carbon-pink-deep); }
.chip-yellow { background: var(--carbon-yellow-deep); }

/* ---------- form header / hero ---------- */

.order-head {
  padding: 1.6rem 0 0;
}

.order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.order-meta > div {
  flex: 1 1 10rem;
  padding: 0.5rem 0.75rem 0.6rem;
  border-right: 1px solid var(--rule);
}
.order-meta > div:last-child { border-right: none; }
.order-meta .field-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--terra-dark);
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.order-meta .field-value { font-weight: 700; }

.hero {
  position: relative;
  padding: 2.6rem 0 2.8rem;
}


.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: end;
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 4.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.hero h1 .thin { font-weight: 400; color: var(--terra-dark); }
@media (min-width: 1200px) {
  .hero h1 .thin { display: block; }
}

.hero .trade-line {
  font-family: var(--slab);
  font-size: clamp(1.15rem, 2.6vw, 1.55rem);
  color: var(--ink-soft);
  margin-top: 0.5rem;
  max-width: 34rem;
}

.hero .plain-pitch {
  margin-top: 1.1rem;
  max-width: 34rem;
}

.hero-cactus { flex-shrink: 0; }

.cta-row {
  margin-top: 1.7rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.btn {
  display: inline-block;
  font-family: var(--slab);
  font-weight: 600;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--ink);
}
.btn-call {
  background: var(--terra);
  color: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
}
.btn-call:hover { background: var(--terra-dark); color: var(--paper); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--paper-edge);
}
.btn-ghost:hover { border-color: var(--terra-dark); color: var(--terra-dark); }

.hero-phone-note {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* the stamp — on desktop it lives in a reserved band ABOVE the headline
   (the hero's extra top padding is that band), so it never crowds the
   type no matter how the h1 wraps or how large the visitor's fonts are. */
/* Wide screens (>=1200px): "/ Mesa, AZ" drops to its own headline line
   (as it already does on smaller screens), which clears the whole right
   side of the headline block — the stamp floats there, beside the title.
   Below 1200px the stamp docks in flow, centered above the headline;
   below 861px (the phone layout) it is gone entirely. */
.stamp {
  position: absolute;
  top: 4.6rem;
  right: 0;
  transform: rotate(-4deg);
  border: 3px solid var(--stamp);
  border-radius: 6px;
  color: var(--stamp);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.7rem 1.1rem;
  line-height: 1.5;
  opacity: 0.82;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.stamp .stamp-big { font-size: 1.3rem; display: block; }

/* ---------- section furniture ---------- */

section { padding: 2.8rem 0; }

.line-item-head {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  margin-bottom: 1.6rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.5rem;
}
.line-no {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--paper);
  background: var(--terra);
  padding: 0.15rem 0.5rem;
  letter-spacing: 0.05em;
}
.line-item-head h2 {
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.line-item-head .head-note {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* perforation divider */
.perf {
  height: 26px;
  position: relative;
  background:
    repeating-linear-gradient(90deg,
      var(--paper-edge) 0 14px,
      transparent 14px 26px) center / 100% 2px no-repeat;
}
.perf::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 3px at 13px 50%, var(--paper-deep) 98%, transparent) repeat-x;
  background-size: 26px 100%;
  opacity: 0.9;
}

/* torn edge divider (SVG lives inline in HTML) */
.tear { display: block; width: 100%; height: 18px; }

/* ---------- services: work-to-be-performed checklist ---------- */

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 0 2.5rem;
}
.check-item {
  display: grid;
  /* minmax(0,1fr): a long word must wrap, not stretch the track past the viewport */
  grid-template-columns: 1.5rem minmax(0, 1fr);
  overflow-wrap: break-word;
  gap: 0.8rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.check-item svg { margin-top: 0.25rem; }
.check-item h3 { font-size: 1.15rem; margin-bottom: 0.15rem; }
.check-item p { font-size: 0.98rem; color: var(--ink-soft); }

.services-footnote {
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* ---------- service area: routing slip ---------- */

.area-band {
  background: var(--paper-deep);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.area-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}
.route-list { list-style: none; }
.route-list li {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--slab);
  font-size: 1.2rem;
}
.route-list .route-code {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--terra-dark);
  min-width: 3.2rem;
}
.route-list .route-note {
  margin-left: auto;
  font-family: var(--body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-align: right;
}
.area-copy p + p { margin-top: 0.9rem; }

/* ---------- recent jobs: ticket board ---------- */

.ticket-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1.3rem;
}
.ticket {
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 3px 3px 0 var(--paper-edge);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.ticket:nth-child(3n+2) { background: var(--carbon-pink); }
.ticket:nth-child(3n) { background: var(--carbon-yellow); }
.ticket-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  padding: 0.45rem 0.8rem;
  border-bottom: 1px dashed var(--ink-soft);
  color: var(--ink-soft);
}
.ticket-body { padding: 0.8rem 0.8rem 0.9rem; flex: 1; }
.ticket-body h3 { font-size: 1.12rem; margin-bottom: 0.2rem; }
.ticket-body .hood { font-size: 0.9rem; color: var(--ink-soft); }
.ticket-tally {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.8rem;
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.8rem;
}
.ticket-tally .band { font-weight: 700; }
.ticket-tally .closed {
  color: var(--stamp);
  border: 1.5px solid var(--stamp);
  border-radius: 3px;
  padding: 0 0.3rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  transform: rotate(-3deg);
}
/* photo stapled to the ticket */
.photo-clip {
  position: absolute;
  top: -14px; left: 12px;
  width: 20px; height: 42px;
  transform: rotate(8deg);
}
.photo-tape {
  position: absolute;
  top: -9px; left: 50%;
  width: 84px; height: 22px;
  transform: translateX(-50%) rotate(-2deg);
}

.board-note {
  margin-top: 1.3rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 40rem;
}

/* ---------- trust: carbon copies ---------- */

.carbon-stack { display: grid; gap: 1.4rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.carbon-note {
  padding: 1.4rem 1.5rem;
  border: 1.5px solid var(--ink);
  position: relative;
}
.carbon-note.pink { background: var(--carbon-pink); transform: rotate(-0.5deg); }
.carbon-note.yellow { background: var(--carbon-yellow); transform: rotate(0.4deg); }
.carbon-note h3 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  color: var(--terra-dark);
}
.carbon-note p { font-size: 0.98rem; }
.carbon-note .copy-tag {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.reviews { margin-top: 2.2rem; }
.reviews h3 {
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}
.review-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
}
.review-row blockquote {
  border-left: 3px solid var(--terra);
  padding-left: 1rem;
  font-size: 1rem;
}
.review-row cite {
  display: block;
  margin-top: 0.7rem;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.review-row cite::before { content: "— "; }

/* ---------- estimate form: bottom of the work order ---------- */

.order-foot {
  background: var(--paper-deep);
  border-top: 1px solid var(--rule);
}
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 2.5rem;
  align-items: start;
}
.form-intro p + p { margin-top: 0.9rem; }
.form-intro .call-instead {
  margin-top: 1.4rem;
  font-family: var(--slab);
  font-size: 1.25rem;
}

form.estimate {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 1.5rem 1.6rem 1.7rem;
  box-shadow: 4px 4px 0 var(--paper-edge);
}
form.estimate .form-head {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--terra-dark);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  margin-bottom: 1.1rem;
  display: flex;
  justify-content: space-between;
}
.field { margin-bottom: 1.1rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.field input,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--ink);
  padding: 0.35rem 0.1rem;
}
.field textarea {
  border: 1.5px solid var(--ink);
  background: repeating-linear-gradient(0deg, transparent 0 1.9em, var(--rule) 1.9em calc(1.9em + 1px));
  line-height: 1.9;
  padding: 0.4rem 0.6rem;
  resize: vertical;
  min-height: 7.5em;
}
.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
}
.field .err {
  display: none;
  font-size: 0.82rem;
  color: var(--stamp);
  margin-top: 0.25rem;
}
.field.invalid .err { display: block; }
.field.invalid input,
.field.invalid textarea { border-color: var(--stamp); }

.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}
button.btn-send {
  font-family: var(--slab);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--terra);
  padding: 0.65rem 1.4rem;
  cursor: pointer;
}
button.btn-send:hover { background: var(--terra-dark); }
.form-actions .sig-line {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
  border-top: 1px solid var(--ink);
  padding-top: 0.2rem;
  flex: 1;
  min-width: 8rem;
  text-transform: uppercase;
}

.form-success {
  display: none;
  border: 2px solid var(--ink);
  background: var(--carbon-yellow);
  box-shadow: 4px 4px 0 var(--paper-edge);
  padding: 1.6rem 1.6rem 1.8rem;
}
.form-success.show { display: block; }
.form-success h3 { font-size: 1.4rem; margin-bottom: 0.6rem; }
.form-success p + p { margin-top: 0.7rem; }

/* ---------- footer ---------- */

footer {
  background: var(--ink);
  color: var(--paper);
  padding: 2.2rem 0 5.5rem;
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
}
footer a { color: var(--carbon-yellow-deep); }
footer a:hover { color: var(--paper); }
.foot-name { font-family: var(--slab); font-size: 1.2rem; }
.foot-meta { font-family: var(--mono); font-size: 0.75rem; line-height: 2; color: var(--paper-edge); }
.foot-demo {
  margin-top: 1.8rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(243, 233, 213, 0.25);
  font-size: 0.82rem;
  color: var(--paper-edge);
}

/* ---------- sticky call button (mobile) ---------- */

.sticky-call {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--terra);
  color: var(--paper);
  font-family: var(--slab);
  font-weight: 600;
  font-size: 1.15rem;
  text-align: center;
  text-decoration: none;
  padding: 0.9rem 1rem;
  border-top: 2px solid var(--ink);
  z-index: 50;
}
.sticky-call:hover { color: var(--paper); }

/* ---------- subpages (privacy / thanks) ---------- */

.subpage { padding: 3rem 0 4rem; max-width: 44rem; }
.subpage h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin-bottom: 1.2rem; text-transform: uppercase; }
.subpage h2 { font-size: 1.3rem; margin: 1.8rem 0 0.5rem; }
.subpage p + p { margin-top: 0.8rem; }
.subpage ul { margin: 0.6rem 0 0 1.2rem; }
.back-link { display: inline-block; margin-top: 2rem; font-family: var(--slab); }

/* ---------- responsive ---------- */

@media (max-width: 1199px) {
  .stamp { position: static; display: block; width: fit-content; transform: rotate(-2deg); margin: 0.4rem auto 1.5rem; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-cactus { display: none; }
  .area-grid, .form-grid, .carbon-stack { grid-template-columns: 1fr; }
  .line-item-head .head-note { display: none; }
  /* no stamp on the phone layout — Erik, 2026-08-30 */
  .stamp { display: none; }
}

@media (max-width: 720px) {
  .sticky-call { display: block; }
}

@media (max-width: 560px) {
  .wo-legend { letter-spacing: 0.06em; }
}