/* ============================================================
   Hammer & Rose — Design System
   Vintage tradesman badge brand · senior-friendly sizing
   Palette from Round Badge Branding Kit (2026-08)
   ============================================================ */

:root {
  --charcoal:     #272A2B;
  --charcoal-2:   #33383A;
  --gold:         #B98927;
  --gold-soft:    #D9B966;
  --cream:        #F7EFDC;
  --cream-2:      #FDF8EC;
  --rose:         #B83A39;
  --rose-dark:    #9E2F2E;
  --sage:         #5B8657;
  --wood:         #C38B30;
  --ink-soft:     #4A4E50;
  --line:         rgba(185,137,39,.45);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Archivo', 'Segoe UI', Arial, sans-serif;
}

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

html { scroll-behavior:smooth; }

body {
  font-family: var(--sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--cream);
  /* subtle paper grain */
  background-image:
    radial-gradient(rgba(185,137,39,.05) 1px, transparent 1px);
  background-size: 22px 22px;
}

img { max-width:100%; }

h1,h2,h3 { font-family: var(--serif); font-weight:700; line-height:1.15; }

.container { max-width:1080px; margin:0 auto; padding:0 24px; }

/* --- double gold rule, like the card --- */
.rule {
  height:7px; border-top:2px solid var(--gold); border-bottom:1px solid var(--gold);
  margin: 0 auto; width:120px; opacity:.85;
}
.rule.wide { width:100%; }

/* --- buttons: big, obvious, senior-friendly --- */
.btn {
  display:inline-block; font-family:var(--sans); font-weight:700;
  font-size:21px; padding:18px 34px; border-radius:10px;
  border:3px solid transparent; cursor:pointer; text-decoration:none;
  text-align:center; transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
.btn:active { transform: translateY(1px); }
.btn-rose { background:var(--rose); color:#fff; box-shadow:0 4px 14px rgba(184,58,57,.35); }
.btn-rose:hover { background:var(--rose-dark); }
.btn-gold { background:transparent; color:var(--charcoal); border-color:var(--gold); }
.btn-gold:hover { background:rgba(185,137,39,.12); }
.btn-charcoal { background:var(--charcoal); color:var(--cream); }
.btn-charcoal:hover { background:#000; }
.btn-block { display:block; width:100%; }

/* --- top bar --- */
.topbar {
  background:var(--cream-2);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.topbar-inner {
  display:flex; align-items:center; gap:20px;
  padding:10px 24px; max-width:1080px; margin:0 auto;
}
.topbar img { height:64px; width:64px; }
.topbar .brand {
  font-family:var(--serif); font-size:26px; font-weight:700; letter-spacing:.5px;
}
.topbar .brand small {
  display:block; font-family:var(--sans); font-weight:600; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
}
.topbar .spacer { flex:1; }
.topbar .phone {
  font-family:var(--sans); font-weight:800; font-size:24px; color:var(--charcoal);
  text-decoration:none; white-space:nowrap;
}
.topbar .phone span { color:var(--gold); font-size:14px; display:block;
  letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.topbar .btn { font-size:18px; padding:13px 22px; }

/* --- pills / chips --- */
.chip {
  display:inline-flex; align-items:center; gap:8px;
  border:1.5px solid var(--line); border-radius:999px;
  padding:8px 18px; font-weight:600; font-size:17px; background:var(--cream-2);
}
.chip .dot { width:9px; height:9px; border-radius:50%; background:var(--sage); }

/* --- status pills (admin) --- */
.pill {
  display:inline-block; font-size:14.5px; font-weight:700; letter-spacing:.04em;
  padding:5px 13px; border-radius:999px; text-transform:uppercase;
}
.pill-new       { background:var(--rose);  color:#fff; }
.pill-contacted { background:var(--gold);  color:#fff; }
.pill-estimate  { background:#7A6A45;      color:#fff; }
.pill-scheduled { background:var(--sage);  color:#fff; }
.pill-completed { background:var(--charcoal); color:var(--cream); }
.pill-followup  { background:transparent; color:var(--rose); border:2px solid var(--rose); }

/* --- cards --- */
.card {
  background:var(--cream-2); border:1.5px solid var(--line);
  border-radius:14px; padding:28px;
}

/* --- forms --- */
label { display:block; font-weight:700; font-size:18px; margin-bottom:8px; }
input[type=text], input[type=tel], input[type=email], input[type=password], textarea, select {
  width:100%; font-family:var(--sans); font-size:20px; padding:16px;
  border:2px solid rgba(39,42,43,.35); border-radius:10px; background:#fff;
  color:var(--charcoal);
}
input:focus, textarea:focus, select:focus {
  outline:3px solid rgba(185,137,39,.5); border-color:var(--gold);
}

/* --- footer --- */
footer {
  background:var(--charcoal); color:var(--cream); margin-top:90px;
  border-top:6px solid var(--gold);
}
footer .container { padding:56px 24px 40px; text-align:center; }
footer img { height:110px; margin-bottom:18px; }
footer .foot-name { font-family:var(--serif); font-size:26px; margin-bottom:6px; }
footer .foot-line { color:rgba(247,239,220,.75); font-size:17px; }
footer .foot-line a { color:var(--gold); text-decoration:none; font-weight:700; }
footer .fine { margin-top:26px; font-size:14.5px; color:rgba(247,239,220,.45); }

@media (max-width: 760px) {
  body { font-size:18px; }
  .topbar .brand small { display:none; }
  .topbar .brand { font-size:20px; }
  .topbar img { height:48px; width:48px; }
  .topbar .phone { font-size:19px; }
  .topbar .btn { display:none; }
}