/* ==========================================================================
   A&A Handyman Service — client brand system
   Sourced from real research (Google Maps listing + reviews, verified
   2026-09-05): owner Adam, roughly 10 years in business, 3.7 stars from 3
   reviews — a thin, mixed record shown honestly (one strong review praises
   range and quality; the star average itself is the honest signal, no
   review text beyond that positive one is echoed on-page). Real review:
   "I have used Adam for multiple services ranging from minor fence repair,
   to major demo and plumbing work. Adam's work is always done with quality
   and the homeowner in mind." (Justin Litz). Real trade range per the
   Lead's brief: tile, painting, drywall, pressure washing, fencing, decks,
   framing — a genuinely broad skill set, which is this design's hook.
   MUST be structurally distinct from demos/larrys-handyman-service/ (denim
   blue + coral + cream, Quicksand/Nunito Sans/Kalam, casual side-by-side
   split hero, chat-bubble signature element). This demo instead uses a
   warm espresso-brown + ochre/amber + sage-green palette (no blue at all),
   a full-width stacked photo hero (not a split), and a "Trade Badge Row" —
   a strip of patch-style skill badges — as its signature element instead
   of a chat mockup. Typography: Zilla Slab (sturdy slab-serif display,
   reads practical/trade rather than Larry's soft rounded Quicksand) +
   Mulish (body) — neither used elsewhere in demos/.
   This page intentionally carries ZERO Lewis Digital gold.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@500;600;700&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  --espresso: #3a2a1c;
  --espresso-deep: #241a11;
  --espresso-soft: #5c4530;
  --ochre: #c4842f;
  --ochre-bright: #dba458;
  --ochre-deep: #96631f;
  --sage: #6f8266;
  --sage-deep: #4f5f48;
  --cream: #f5efe1;
  --cream-deep: #e9dfc6;
  --white: #fffcf5;
  --ink: #241f16;
  --ink-soft: #635a46;

  --font-display: "Zilla Slab", Georgia, "Times New Roman", serif;
  --font-body: "Mulish", "Segoe UI", system-ui, sans-serif;

  --container: 1160px;
  --radius: 6px;
  --shadow: 0 20px 44px -26px rgba(36, 26, 17, 0.5);
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--ochre-deep); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; color: var(--espresso-deep); margin: 0; line-height: 1.2; }
p { margin: 0 0 0.9em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ochre-deep);
  margin: 0 0 0.6rem;
  font-weight: 700;
}
.eyebrow--light { color: var(--ochre-bright); }

.section { padding: 4.6rem 0; }
.section__title { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.section__title--light { color: var(--white); }
.section__lede { color: var(--ink-soft); font-size: 1.02rem; max-width: 44em; margin-top: 0.8rem; }
.section__lede--light { color: rgba(255,255,255,0.82); }

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  padding: 0.85rem 1.6rem; border-radius: var(--radius); border: 2px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.btn--ochre { background: var(--ochre); color: var(--white); }
.btn--ochre:hover { background: var(--ochre-bright); transform: translateY(-1px); }
.btn--big { font-size: 1.1rem; padding: 1.05rem 2.1rem; }
.btn--line-dark { border-color: var(--espresso); color: var(--espresso-deep); }
.btn--line-dark:hover { background: var(--espresso); color: var(--white); }
.btn--line-light { border-color: rgba(255,255,255,0.55); color: var(--white); }
.btn--line-light:hover { background: rgba(255,255,255,0.12); border-color: var(--white); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--cream); border-bottom: 3px solid var(--espresso); }
.site-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 24px; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand__mark { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); background: var(--espresso); color: var(--ochre-bright); font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; flex: none; }
.brand__text { display: flex; flex-direction: column; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--espresso-deep); }
.brand__tag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); }
.site-nav__links { display: flex; align-items: center; gap: 1.4rem; }
.site-nav__links a:not(.site-nav__cta) { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.92rem; display: none; }
.site-nav__cta { background: var(--espresso); color: var(--white) !important; padding: 0.55rem 1.1rem; border-radius: var(--radius); font-weight: 700; text-decoration: none; font-size: 0.9rem; }
.site-nav__cta:hover { background: var(--espresso-soft); }

/* ---------- hero: full-width stacked photo banner, copy below (NOT a split) ---------- */
.hero { background: var(--espresso-deep); }
.hero__photo-band { position: relative; width: 100%; overflow: hidden; }
.hero__photo-band img { width: 100%; height: clamp(260px, 44vw, 460px); object-fit: cover; display: block; }
.hero__photo-band figcaption {
  position: absolute; right: 0; bottom: 0; font-size: 0.68rem; color: rgba(255,255,255,0.7);
  background: rgba(36,26,17,0.72); padding: 0.4rem 0.8rem;
}
.hero__copy { padding: 2.8rem 0 3.2rem; text-align: center; }
.hero__title { color: var(--white); font-size: clamp(2rem, 4vw, 3rem); margin: 0 auto 1.1rem; max-width: 20em; }
.hero__title span { color: var(--ochre-bright); }
.hero__tagline { max-width: 40em; margin: 0 auto 1.7rem; font-size: 1.06rem; color: rgba(255,255,255,0.82); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin-bottom: 1.6rem; }
.hero__rating { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; background: rgba(255,255,255,0.08); padding: 0.5rem 1.1rem; border-radius: var(--radius); color: var(--white); font-size: 0.92rem; }
.hero__stars { color: var(--ochre-bright); letter-spacing: 0.1em; }

/* ---------- trade badge row: signature element ---------- */
.badges { background: var(--sage-deep); }
.badges__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.9rem; padding: 2rem 0; }
.badge {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  text-align: center; color: var(--white);
}
.badge__patch {
  width: 56px; height: 56px; border-radius: 50%; background: var(--cream);
  border: 3px solid var(--ochre-bright); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow);
}
.badge__patch svg { width: 28px; height: 28px; color: var(--espresso); }
.badge__label { font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em; }
.badges__note { text-align: center; font-size: 0.85rem; color: rgba(255,255,255,0.72); padding-bottom: 1.8rem; }

/* ---------- services ---------- */
.services { background: var(--cream); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.4rem; }
.service-card {
  background: var(--white); border: 1px solid var(--cream-deep); border-radius: var(--radius);
  padding: 1.6rem 1.5rem; box-shadow: var(--shadow); border-top: 4px solid var(--ochre);
}
.service-card h3 { font-size: 1.02rem; margin-bottom: 0.5rem; color: var(--espresso-deep); }
.service-card p { color: var(--ink-soft); font-size: 0.94rem; }
.services__note {
  margin-top: 1.8rem; font-size: 0.9rem; color: var(--espresso-deep);
  background: var(--cream-deep); border-radius: var(--radius); padding: 0.9rem 1.2rem; display: inline-block;
}
.services__photo { margin: 2.4rem 0 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.services__photo img { width: 100%; height: auto; max-height: 380px; object-fit: cover; }
.services__photo figcaption { font-size: 0.76rem; color: var(--ink-soft); background: var(--white); padding: 0.5rem 1rem; text-align: center; }

/* ---------- about ---------- */
.about { background: var(--white); }
.about__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; }
.about__copy p { color: var(--ink-soft); font-size: 1.02rem; }
.about__source { font-size: 0.82rem; color: var(--ink-soft); margin-top: 1rem; }
.fact-card {
  background: var(--espresso-deep); color: var(--cream); border-radius: var(--radius);
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem; box-shadow: var(--shadow);
  border-top: 4px solid var(--ochre);
}
.fact-card__row { display: flex; flex-direction: column; border-bottom: 1px solid rgba(245,239,225,0.14); padding-bottom: 1rem; }
.fact-card__row:last-child { border-bottom: none; padding-bottom: 0; }
.fact-card__value { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ochre-bright); }
.fact-card__label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(245,239,225,0.7); margin-top: 0.2rem; }

/* ---------- reviews: honest thin/mixed record ---------- */
.reviews { background: var(--cream-deep); }
.reviews__grid { display: grid; grid-template-columns: 240px 1fr; gap: 2.6rem; align-items: center; margin-top: 2rem; }
.rating-card {
  background: var(--white); border: 2px solid var(--ochre); border-radius: var(--radius);
  padding: 1.7rem 1.3rem; text-align: center; box-shadow: var(--shadow);
}
.rating-card__num { font-family: var(--font-display); font-size: 2.9rem; font-weight: 700; color: var(--espresso-deep); line-height: 1; }
.rating-card__stars { color: var(--ochre-deep); font-size: 1.1rem; letter-spacing: 0.1em; margin-top: 0.5rem; }
.rating-card__count { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.4rem; }
.reviews__copy p { color: var(--ink-soft); font-size: 1rem; }
.reviews__honest {
  margin-top: 1rem; font-size: 0.92rem; color: var(--espresso-deep); background: var(--white);
  border-left: 4px solid var(--ochre); border-radius: 4px; padding: 0.8rem 1.1rem;
}
.reviews__cta { margin: 1.2rem 0; }
.reviews__source { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.6rem; }

/* ---------- area / hours ---------- */
.visit { background: var(--white); }
.visit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }
.visit__block { border: 1px solid var(--cream-deep); border-top: 4px solid var(--sage); border-radius: var(--radius); padding: 1.6rem 1.7rem; }
.visit__block h3 { font-size: 1.05rem; color: var(--espresso-deep); margin-bottom: 0.7rem; }
.visit__block p { color: var(--ink-soft); }
.visit__block a.btn { margin-top: 0.8rem; }

/* ---------- final contact ---------- */
.contact { background: var(--espresso); color: var(--white); text-align: center; padding: 4.8rem 0; }
.contact h2 { color: var(--white); font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 0.8rem; }
.contact__lede { color: rgba(255,255,255,0.85); max-width: 34em; margin: 0 auto 1.8rem; }
.contact__meta { font-size: 0.9rem; color: rgba(255,255,255,0.72); margin-top: 1.2rem; }

/* ---------- footer ---------- */
.footer { background: var(--espresso-deep); color: rgba(255,255,255,0.68); text-align: center; padding: 1.6rem 0; font-size: 0.86rem; }
.footer a { color: var(--ochre-bright); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- responsive ---------- */
@media (min-width: 760px) {
  .site-nav__links a:not(.site-nav__cta) { display: inline; }
}
@media (max-width: 900px) {
  .about__grid { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .visit__grid { grid-template-columns: 1fr; }
  .reviews__grid { grid-template-columns: 1fr; }
  .badges__row { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .service-grid { grid-template-columns: 1fr; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .badges__row { grid-template-columns: repeat(3, 1fr); }
}