/* Tree Removal Cost Estimator — "Field Ticket" design system v2
   Token system:
   --paper   #E7DEC5  page ground, manila work-order paper
   --paper2  #F4EED9  lighter paper for the clipboard/ticket surface (never pure white)
   --ink     #201A10  near-black, warm carbon-pencil cast
   --pine    #23392B  structural color: bars, borders, pine ink stamps
   --hazard  #E2551A  single loud accent: CTA, hazard stamp, focal ring
   --wood    #B4A47F  dividers, muted borders, "aged paper" edges
   Type: Archivo (display, 800/900) / IBM Plex Sans (body) / IBM Plex Mono (all data — the signature)
*/

:root {
  --paper: #E7DEC5;
  --paper2: #F4EED9;
  --ink: #201A10;
  --pine: #23392B;
  --pine-deep: #16261B;
  --hazard: #E2551A;
  --hazard-deep: #B93F0F;
  --wood: #B4A47F;

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

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

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--paper);
  /* Cheap paper grain: two offset dot grids at low opacity */
  background-image:
    radial-gradient(rgba(32, 26, 16, 0.05) 1px, transparent 1px),
    radial-gradient(rgba(32, 26, 16, 0.035) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 3px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: 0;
}

/* Typography */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.025em;
  color: var(--ink);
}

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.02;
}

h2 {
  font-size: 1.4rem;
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

h3 {
  font-size: 1.05rem;
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

a {
  color: var(--pine);
}

/* Layout wrapper */
.wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* ============================================================
   STICKY CALL BAR — the conversion mechanism. Fixed to the top
   at all times, styled as a torn ticket stub, never a bare link.
   ============================================================ */
.sticky-call-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  background: var(--pine-deep);
  border-bottom: 3px solid var(--hazard);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  padding: 0.55rem var(--spacing-sm);
}

.sticky-call-bar .cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  /* hazard-deep, not hazard: this text sits at 0.95rem, below the AA
     "large text" threshold (18.66px bold) that would let the brighter
     --hazard clear 3:1 — hazard-deep measures ~5.5:1 against white and
     passes AA at normal-text size. */
  background: var(--hazard-deep);
  color: #fff8ee;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.25rem;
  border-radius: 3px;
  border: 1px solid #8a2f0a;
  box-shadow:
    0 2px 0 #8a2f0a,
    0 5px 10px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sticky-call-bar .cta-button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sticky-call-bar .cta-button:hover {
  transform: translateY(1px);
  box-shadow:
    0 1px 0 var(--hazard-deep),
    0 3px 6px rgba(0, 0, 0, 0.3);
}

.sticky-call-bar .cta-button:focus-visible {
  outline: 2px solid #fff8ee;
  outline-offset: 3px;
}

/* ============================================================
   HERO — headline + hand-drawn trunk cross-section illustration
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--spacing-lg);
  align-items: center;
  margin-bottom: var(--spacing-xl);
  padding-top: var(--spacing-lg);
}

.hero-copy h1 {
  color: var(--ink);
  margin-bottom: var(--spacing-sm);
}

.tagline {
  font-size: 1.05rem;
  color: var(--pine);
  font-weight: 600;
  font-family: var(--font-mono);
}

.tagline::before {
  content: '// ';
  color: var(--hazard);
}

.hero-illustration {
  width: 168px;
  height: 154px;
  color: var(--ink);
  flex-shrink: 0;
}

.hero-illustration .ring-bark { stroke: var(--pine); }
.hero-illustration .ring { stroke: var(--ink); }
.hero-illustration .ring-core { stroke: var(--hazard); fill: rgba(226, 85, 26, 0.1); }
.hero-illustration .hero-cracks { stroke: var(--wood); }
.hero-illustration .hero-measure line,
.hero-illustration .hero-measure path { stroke: var(--pine); }
.hero-illustration .hero-measure-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  fill: var(--pine);
}

@media (max-width: 640px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-illustration {
    width: 120px;
    height: 110px;
    justify-self: start;
    order: -1;
  }
}

/* ============================================================
   CLIPBOARD — the form container. A "field notes" sheet with a
   clip graphic and a torn/perforated seam before the results.
   ============================================================ */
.estimator-form {
  display: grid;
  gap: var(--spacing-lg);
  margin-bottom: 0;
  background: var(--paper2);
  border: 1px solid var(--wood);
  border-top: 6px solid var(--pine);
  padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
  position: relative;
  box-shadow: 0 10px 24px -12px rgba(22, 38, 27, 0.35), 0 2px 0 rgba(255,255,255,0.4) inset;
}

.estimator-form::before {
  content: 'FIELD ESTIMATE WORKSHEET';
  position: absolute;
  top: -1px;
  right: var(--spacing-md);
  transform: translateY(-100%);
  background: var(--pine);
  color: var(--paper2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.65rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.form-group > label {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--pine);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-group > label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--hazard);
  border-radius: 50%;
  flex-shrink: 0;
}

label {
  font-weight: 500;
  color: var(--ink);
  font-size: 0.95rem;
}

/* ============================================================
   TICK-LEDGER — segmented option "buttons" reworked as a field
   checklist: hand-drawn tick boxes in a bordered ledger row.
   ============================================================ */
.button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--wood);
  background: rgba(180, 164, 127, 0.08);
}

.button-group button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 1px dashed var(--wood);
  border-right: 1px dashed var(--wood);
  transition: background 0.15s ease;
}

.button-group button:hover {
  background: rgba(35, 57, 43, 0.08);
}

.button-group button:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: -2px;
}

.tick-box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--ink);
  background: var(--paper2);
  position: relative;
  transform: rotate(-1.5deg);
}

.tick-box::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 8px;
  height: 4px;
  border-left: 2.5px solid var(--pine);
  border-bottom: 2.5px solid var(--pine);
  transform: rotate(-45deg) scale(0);
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.button-group button.active {
  background: rgba(226, 85, 26, 0.08);
}

.button-group button.active .tick-box {
  border-color: var(--pine);
  background: #fff;
}

.button-group button.active .tick-box::after {
  transform: rotate(-45deg) scale(1);
}

.button-group button.active .tick-label {
  color: var(--pine);
  font-weight: 700;
}

.tick-label {
  line-height: 1.25;
}

/* Sliders — styled like a tape-measure ruler */
.dbh-value {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--hazard);
  font-size: 1.1rem;
}

input[type="range"] {
  width: 100%;
  height: 10px;
  -webkit-appearance: none;
  appearance: none;
  background:
    repeating-linear-gradient(to right, var(--ink) 0, var(--ink) 1px, transparent 1px, transparent 8px),
    linear-gradient(to right, var(--wood) 0%, var(--wood) calc(var(--slider-percent, 0) * 1%), var(--paper2) calc(var(--slider-percent, 0) * 1%), var(--paper2) 100%);
  outline: none;
  border: 1px solid var(--wood);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 24px;
  border-radius: 2px;
  background: var(--hazard);
  cursor: pointer;
  border: 2px solid var(--pine-deep);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-top: -7px;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 24px;
  border-radius: 2px;
  background: var(--hazard);
  cursor: pointer;
  border: 2px solid var(--pine-deep);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

input[type="range"]:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 4px;
}

/* Dropdown */
select {
  padding: 0.7rem var(--spacing-sm);
  border: 1px solid var(--wood);
  background: var(--paper2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}

select:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
  border-color: var(--pine);
}

/* Checkbox group (extras) reuses the tick-ledger look */
.checkbox-group {
  display: grid;
  border: 1px solid var(--wood);
  background: rgba(180, 164, 127, 0.08);
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px dashed var(--wood);
}

.checkbox-wrapper:last-child {
  border-bottom: none;
}

input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--pine);
  flex-shrink: 0;
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}

.checkbox-wrapper label {
  font-size: 0.92rem;
  cursor: pointer;
}

/* Calculate button */
.calculate-btn {
  background: var(--pine);
  color: var(--paper2);
  border: none;
  padding: 1.1rem var(--spacing-lg);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 2px;
  margin-top: var(--spacing-xs);
  width: 100%;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--pine-deep);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.calculate-btn:hover {
  background: #1c3023;
}

.calculate-btn:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--pine-deep);
}

.calculate-btn:focus-visible {
  outline: 2px solid var(--hazard);
  outline-offset: 2px;
}

/* ============================================================
   RESULTS — torn perforated seam, then the work-order ticket
   ============================================================ */
.results-area {
  display: none;
}

.results-area.visible {
  display: block;
  animation: resultsEnter 0.3s ease;
}

@keyframes resultsEnter {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Perforated tear line between the worksheet and the ticket */
.tear-seam {
  height: 0;
  border-top: 2px dashed var(--wood);
  margin: 0 0 var(--spacing-xl);
  position: relative;
}

.tear-seam::before,
.tear-seam::after {
  content: '';
  position: absolute;
  top: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--wood);
}

.tear-seam::before { left: -18px; }
.tear-seam::after { right: -18px; }

/* Work-order ticket (signature element) */
.work-order-card {
  background: var(--paper2);
  border: 1px solid var(--wood);
  border-top: none;
  padding: var(--spacing-lg);
  padding-top: calc(var(--spacing-lg) + 14px);
  margin-bottom: var(--spacing-lg);
  position: relative;
  box-shadow: 0 14px 28px -16px rgba(22, 38, 27, 0.45);
  clip-path: polygon(
    0% 14px, 4% 0%, 8% 14px, 12% 0%, 16% 14px, 20% 0%, 24% 14px, 28% 0%,
    32% 14px, 36% 0%, 40% 14px, 44% 0%, 48% 14px, 52% 0%, 56% 14px, 60% 0%,
    64% 14px, 68% 0%, 72% 14px, 76% 0%, 80% 14px, 84% 0%, 88% 14px, 92% 0%,
    96% 14px, 100% 0%, 100% 100%, 0% 100%
  );
  animation: cardFlash 0.4s ease;
}

@keyframes cardFlash {
  0%, 100% { border-color: var(--wood); }
  50% { border-color: var(--pine); }
}

@media (prefers-reduced-motion: reduce) {
  .work-order-card { animation: none; }
}

.ticket-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--pine);
  letter-spacing: 0.06em;
  border-bottom: 1px dashed var(--wood);
  padding-bottom: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
}

.work-order-card h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  margin-bottom: var(--spacing-xs);
  text-transform: none;
  letter-spacing: -0.02em;
}

.range-caption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--wood);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.range-display {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--spacing-lg);
  letter-spacing: -0.01em;
}

/* Itemized breakdown — receipt ledger with dotted leaders */
.itemized-table {
  width: 100%;
  /* table-layout: fixed is load-bearing — auto layout lets the label
     column's natural content width push the whole table past its
     container on narrow viewports, clipping the dollar amounts
     (measured overflow on mobile: table 322px inside a 294px card). */
  table-layout: fixed;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.itemized-table tr {
  border-bottom: 1px dotted var(--wood);
}

.itemized-table td {
  padding: 0.65rem 0;
  color: var(--ink);
  vertical-align: top;
}

.itemized-table td:first-child {
  width: 64%;
  text-align: left;
  word-break: break-word;
  padding-right: 0.5rem;
}

.itemized-table td:last-child {
  width: 36%;
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}

.itemized-table tr.total-row {
  background: var(--pine-deep);
  font-weight: 700;
  font-size: 1.15rem;
  border: none;
}

.itemized-table tr.total-row td {
  padding: var(--spacing-md) 0.85rem;
  color: #fdf9ee;
}

.itemized-table tr.total-row td:first-child {
  color: #fdf9ee;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  /* "TOTAL ESTIMATE" is short but the amount is a full range ("$2,087 –
     $3,131") and needs more room than a regular single-figure row —
     override the 64/36 split so the range never clips on narrow
     viewports (measured overflow at the default split on mobile). */
  width: 34%;
}

.itemized-table tr.total-row td:last-child {
  color: #ffe8b8;
  width: 66%;
  white-space: normal;
}

.item-label {
  display: block;
  font-weight: 600;
}

.item-multiplier {
  display: block;
  font-size: 0.78rem;
  color: var(--pine);
  opacity: 0.75;
}

/* Hazard / storm ink stamp — grunge edge via SVG turbulence filter.
   Positioned BELOW the ticket-meta strip (ticket #/date) so it never
   collides with that text; sits beside the range display where the
   card has open whitespace on the right. */
.hazard-stamp {
  position: absolute;
  top: 92px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 116px;
  height: 116px;
  transform: rotate(-11deg);
  animation: stampEnter 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation-fill-mode: both;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.hazard-stamp svg {
  width: 100%;
  height: 100%;
}

.hazard-stamp-ring {
  fill: none;
  stroke: var(--hazard);
  stroke-width: 5;
  filter: url(#inkGrunge);
}

.hazard-stamp-text {
  font-family: var(--font-display);
  font-weight: 900;
  fill: var(--hazard);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

@keyframes stampEnter {
  from { transform: rotate(-11deg) scale(1.5); opacity: 0; }
  to { transform: rotate(-11deg) scale(1); opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  .hazard-stamp {
    animation: none;
    transform: rotate(-11deg) scale(1);
    opacity: 0.92;
  }
}

@media (max-width: 640px) {
  /* Narrow cards have no spare horizontal whitespace beside the range
     display, so drop absolute overlay positioning entirely and flow
     the stamp inline, centered, right after the range figure instead
     of floating over text. */
  .hazard-stamp {
    position: static;
    width: 92px;
    height: 92px;
    margin: -0.5rem auto var(--spacing-md);
  }
}

/* Honesty callout card */
.honesty-callout {
  border: 2px dashed rgba(226, 85, 26, 0.4);
  padding: var(--spacing-lg);
  background: rgba(226, 85, 26, 0.04);
  margin-bottom: var(--spacing-lg);
}

.honesty-callout h3 {
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: var(--spacing-md);
  color: var(--hazard-deep);
}

.honesty-callout ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.honesty-callout li {
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(32, 26, 16, 0.1);
  font-size: 0.95rem;
  padding-left: 1.4rem;
  position: relative;
}

.honesty-callout li::before {
  content: '\2715';
  position: absolute;
  left: 0;
  color: var(--hazard);
  font-weight: 700;
  font-size: 0.85rem;
  top: 0.7rem;
}

.honesty-callout li:last-child {
  border-bottom: none;
}

/* Call CTA button (primary, inline within results) */
.call-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  background: var(--hazard);
  color: #fff8ee;
  text-decoration: none;
  padding: 1.2rem var(--spacing-md);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 2px;
  border: none;
  cursor: pointer;
  margin-bottom: var(--spacing-md);
  box-shadow: 0 4px 0 var(--hazard-deep);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.call-cta svg {
  width: 20px;
  height: 20px;
}

.call-cta:hover {
  background: #ec6329;
}

.call-cta:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--hazard-deep);
}

.call-cta:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}

/* Email fallback link */
.email-fallback {
  text-align: center;
  margin-top: var(--spacing-sm);
  font-size: 0.85rem;
  margin-bottom: var(--spacing-xl);
}

.email-fallback a {
  color: var(--pine);
  text-decoration: underline;
}

.email-fallback a:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}

/* Utility */
.hidden { display: none !important; }

.slider-value-display {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--hazard);
}

/* FAQ / nav sections (town pages) */
.faq-section, nav {
  font-family: var(--font-body);
}

.faq-section h2 {
  margin-top: 0;
}

details {
  background: var(--paper2);
  border: 1px solid var(--wood);
  padding: 0.85rem 1rem;
}

details + details {
  border-top: none;
}

summary {
  font-family: var(--font-mono);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .wrap {
    padding: var(--spacing-md);
  }

  .estimator-form {
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg);
  }

  .button-group {
    grid-template-columns: 1fr;
  }

  .button-group button {
    border-right: none;
  }

  .work-order-card {
    padding: var(--spacing-md);
    padding-top: calc(var(--spacing-md) + 14px);
  }

  .range-display {
    font-size: 1.6rem;
  }

  .itemized-table tr.total-row {
    font-size: 1rem;
  }

  .itemized-table tr.total-row td {
    padding: var(--spacing-md) 0.6rem;
  }

  body {
    padding-bottom: 78px;
  }

  .call-cta {
    padding: 1rem;
    font-size: 1.05rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 0;
    margin: 0;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.25);
    z-index: 150;
  }

  .results-area {
    padding-bottom: 80px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}