/* ============================================================================
   Hooligan Land Improvement — design pass: "RUGGED EARTH".
   Light, earthy, job-site editorial. Warm sand/paper base, deep forest-green
   structural bands, ONE surgical amber accent, Anton display headings, soil-
   strata texture, and an excavator-icon watermark as the signature element.
   Deliberately unlike the dark-blue cinematic Big D build.
   Loads AFTER styles.css + the inline brand-token <style>, so these win.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --font-heading: 'Anton', 'Inter', system-ui, sans-serif;
  --hl-amber: #B7642A;        /* surgical accent */
  --hl-amber-bright: #CD7A33; /* hover / glow */
  --hl-forest: #2B3526;       /* structural dark green */
  --hl-forest-deep: #20281C;  /* deepest panels */
  --hl-sage: #6E7E68;         /* logo/icon green — tertiary earth tone */
  --hl-sand: #F1ECE0;
  --hl-paper: #FBF9F4;
  --radius: 6px;

  /* Refine the brand tokens for the earth palette */
  --brand-primary: var(--hl-amber);
  --brand-secondary: var(--hl-forest);
  --brand-text: #23291F;
  --brand-text-muted: #5E6655;
  --brand-bg: var(--hl-paper);
  --brand-bg-alt: var(--hl-sand);
  --brand-border: #DDD6C6;
}

body { background: var(--brand-bg); color: var(--brand-text); }

/* Soil-strata texture used across earthy sections (sediment layers — on-theme). */
/* ---- Type system -------------------------------------------------------- */
h1, h2, h3,
.x-hero h1, .x-banner h1, .x-head h2, .x-bigcta h2, .cta-band h2,
.section-head h1, .section-head h2, .x-body h2, .x-prose h2 {
  font-family: var(--font-heading); font-weight: 400; letter-spacing: .01em;
}
.x-hero h1, .x-banner h1, .x-head h2, .x-bigcta h2, .cta-band h2,
.section-head h1, .section-head h2, .x-stat .num, .x-body h2, .x-prose h2,
.x-county-block h3, .x-gcat-cap h3 {
  text-transform: uppercase; letter-spacing: .015em; line-height: 1.04;
}
.x-hero h1 { font-weight: 400; font-size: clamp(2.9rem, 7vw, 5.4rem); }
/* Anton is a single heavy weight — let small headings (h4, cards, faq) stay Inter
   for legibility, but give them an industrial bolt. */
.x-svc h3, .x-feat h4, .x-step h4, .card h3, .x-faq summary, .x-trust-tx strong, .footer-grid h4 {
  font-family: 'Inter', system-ui, sans-serif; font-weight: 800; letter-spacing: .005em;
}

/* ---- Eyebrows: amber label after a survey-stake rule --------------------- */
.x-head .k, .section-head .eyebrow {
  font-family: 'Inter', system-ui, sans-serif; display: inline-flex; align-items: center; gap: 12px;
  color: var(--hl-amber); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .8rem;
}
.x-head .k::before, .section-head .eyebrow::before {
  content: ''; width: 30px; height: 3px; background: var(--hl-amber); display: inline-block; border-radius: 2px;
}
.x-head.center .k { justify-content: center; }
.x-head p, .section-head p { color: var(--brand-text-muted); }
.x-head h2 { color: var(--brand-text); }

/* ---- Header: paper, amber top rule, sage hover underline ----------------- */
.site-header {
  border-top: 4px solid var(--hl-amber);
  /* NOTE: never use backdrop-filter/filter/transform on .site-header — it makes
     it a containing block for the fixed mobile nav and collapses the panel. */
  background: rgba(251,249,244,.96);
  border-bottom: 1px solid var(--brand-border);
}
.nav-logo img { height: 46px; }
.nav-links a { color: var(--brand-text); font-weight: 600; }
.nav-links a:not(.nav-cta) { position: relative; }
.nav-links a:not(.nav-cta)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px;
  background: var(--hl-amber); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-links a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { background: var(--hl-amber); color: #fff; font-weight: 700; letter-spacing: .02em; }
.nav-cta:hover { background: var(--hl-amber-bright); }
@media (max-width: 860px) { .nav-links { background: var(--hl-paper); } }

/* ---- Hero: earthy scrim + amber stake + ground line ---------------------- */
.x-hero { min-height: 92vh; background: var(--hl-forest-deep); }
.x-hero .x-hero-bg { filter: saturate(1.05) contrast(1.02); }
.x-hero .x-hero-scrim {
  background:
    radial-gradient(110% 80% at 80% 12%, rgba(183,100,42,.18), transparent 55%),
    linear-gradient(90deg, rgba(28,34,22,.88) 0%, rgba(28,34,22,.42) 52%, rgba(28,34,22,.12) 100%),
    linear-gradient(180deg, rgba(28,34,22,.20) 0%, rgba(28,34,22,.20) 45%, rgba(28,34,22,.92) 100%);
}
/* earth "ground line" along the bottom of the hero */
.x-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 2;
  background: linear-gradient(90deg, var(--hl-amber), var(--hl-sage));
}
.x-hero .container { position: relative; border-left: 4px solid var(--hl-amber); padding-left: clamp(20px, 3vw, 40px); }
.x-eyebrow {
  background: var(--hl-amber); color: #fff; font-family: 'Inter', sans-serif; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; border-radius: 3px; box-shadow: 0 8px 24px rgba(183,100,42,.4);
}
.x-hero h1 { color: #fff; text-shadow: 0 4px 34px rgba(0,0,0,.5); }
.x-hero .x-sub { color: #F4EFE6; font-weight: 600; font-size: clamp(1.15rem, 2.1vw, 1.5rem); letter-spacing: .04em; max-width: 46ch; }
.x-chip { color: #F4EFE6; }
.x-chip svg { color: var(--hl-amber-bright); }

/* entrance motion */
@keyframes hlUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.x-hero .x-eyebrow { animation: hlUp .6s .05s both; }
.x-hero h1 { animation: hlUp .6s .16s both; }
.x-hero .x-sub { animation: hlUp .6s .30s both; }
.x-hero .x-cta-row { animation: hlUp .6s .42s both; }
.x-hero .x-chips { animation: hlUp .6s .54s both; }

/* ---- Buttons ------------------------------------------------------------- */
.x-btn { font-weight: 800; letter-spacing: .02em; border-radius: 4px; }
.x-btn-primary { background: var(--hl-amber); color: #fff; box-shadow: 0 12px 30px rgba(183,100,42,.34); }
.x-btn-primary:hover { background: var(--hl-amber-bright); transform: translateY(-2px); }
.x-btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.x-btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.x-btn-white { color: var(--hl-forest-deep); background: #fff; }
.x-btn-white:hover { background: var(--hl-sand); }
.btn-primary, .nav-cta { background: var(--hl-amber); border-color: var(--hl-amber); }

/* ---- Stats band: forest green, amber tick numbers ------------------------ */
.x-stats { background: var(--hl-forest); border-top: 4px solid var(--hl-amber); }
.x-stats .container { padding-top: 46px; padding-bottom: 46px; gap: 0; }
.x-stat { position: relative; padding: 6px 24px; }
.x-stat + .x-stat::before { content: ''; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: rgba(255,255,255,.14); }
.x-stat .num { font-family: var(--font-heading); color: #fff; font-size: clamp(2.1rem, 3.6vw, 3.1rem); }
.x-stat .num::after { content: ''; display: block; width: 30px; height: 3px; background: var(--hl-amber); margin: 9px auto 0; border-radius: 2px; }
.x-stat .lbl { color: rgba(244,239,230,.82); letter-spacing: .04em; text-transform: uppercase; font-size: .76rem; font-weight: 600; }
@media (max-width: 680px) { .x-stat + .x-stat:nth-child(odd)::before { display: none; } }

/* ---- Soil-strata texture on alt sections (the signature ground motif) ----- */
.section-alt {
  background:
    repeating-linear-gradient(0deg, rgba(110,126,104,.05) 0, rgba(110,126,104,.05) 1px, transparent 1px, transparent 34px),
    radial-gradient(900px 420px at 88% -10%, rgba(183,100,42,.06), transparent 60%),
    var(--brand-bg-alt);
  border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border);
}

/* ---- Trust band ---------------------------------------------------------- */
.x-trustband { background: var(--hl-paper); border-top: 1px solid var(--brand-border); border-bottom: 4px solid var(--hl-amber); padding: 32px 0; }
.x-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 34px; }
@media (max-width: 760px) { .x-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .x-trust-grid { grid-template-columns: 1fr; } }
.x-trust-item { display: flex; align-items: center; gap: 14px; }
.x-trust-num { font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; color: var(--hl-amber); flex: none; min-width: 60px; }
.x-trust-ic { width: 48px; height: 48px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(110,126,104,.16); }
.x-trust-ic svg { width: 24px; height: 24px; color: var(--hl-sage); }
.x-trust-tx strong { display: block; line-height: 1.18; color: var(--brand-text); }
.x-trust-tx span { display: block; font-size: .82rem; color: var(--brand-text-muted); margin-top: 3px; }

/* ---- Service tiles (full-bleed image cards — white text over dark scrim) -- */
/* Even 2×2 grid (4 services) instead of the auto-fit row that leaves an odd card. */
.x-services { grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 720px) { .x-services { grid-template-columns: 1fr; } }
.x-svc { border-radius: var(--radius); box-shadow: 0 10px 30px rgba(34,40,28,.14); transition: transform .22s ease, box-shadow .22s ease; }
/* Deepen the base bottom-scrim with a touch of forest so the white title reads
   over busy job-site photos. */
.x-svc::after { background: linear-gradient(180deg, rgba(28,34,22,0) 26%, rgba(28,34,22,.55) 60%, rgba(28,34,22,.92) 100%); }
.x-svc::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 4; background: var(--hl-amber); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.x-svc:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(34,40,28,.26); }
.x-svc:hover::before { transform: scaleX(1); }
.x-svc:hover img { transform: scale(1.06); }
.x-svc h3 { color: #fff; text-decoration: none; }
.x-svc:hover h3 { text-decoration: none; }
.x-svc .x-arrow { color: #fff; font-weight: 800; }
.x-svc .x-arrow span { color: var(--hl-amber-bright); }

/* ---- Feature cards ------------------------------------------------------- */
.x-feat, .card { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius); transition: transform .2s, box-shadow .2s, border-color .2s; }
.x-feat { padding: 26px; }
.x-feat:hover, .card:hover { transform: translateY(-4px); border-color: var(--hl-sage); box-shadow: 0 16px 34px rgba(34,40,28,.12); }
.x-feat .ic { background: rgba(183,100,42,.12); border-radius: 10px; }
.x-feat .ic svg { color: var(--hl-amber); }
.x-feat h4, .card h3 { color: var(--brand-text); }
.x-feat p, .card p { color: var(--brand-text-muted); }
.card { padding: 22px; }

/* ---- Process steps ------------------------------------------------------- */
.x-step .n { font-family: var(--font-heading); color: transparent; -webkit-text-stroke: 2px var(--hl-amber); font-size: clamp(2.6rem, 5vw, 3.6rem); }
.x-step h4 { color: var(--brand-text); }
.x-step p { color: var(--brand-text-muted); }

/* ---- Long-form body / prose --------------------------------------------- */
.x-body h2, .x-prose h2 { color: var(--brand-text); }
.x-body .x-lead { color: var(--brand-text); }
.x-body ul li::before { background: var(--hl-amber); }
.x-body ul.x-checklist .x-ck { color: var(--hl-sage); }
.x-crumbs, .x-crumbs a { color: var(--brand-text-muted); }

/* ---- Reviews: Google-style review cards (signature styling) -------------- */
.x-revgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .x-revgrid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
.x-revcard {
  position: relative; margin: 0; background: #fff; border: 1px solid var(--brand-border);
  border-left: 4px solid var(--hl-sage); border-radius: var(--radius); padding: 24px 24px 22px;
  box-shadow: 0 8px 24px rgba(34,40,28,.07); text-align: left;
}
.x-revtop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.x-revav { flex: none; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--hl-forest); color: #fff; font-family: var(--font-heading); font-size: 1.25rem; }
.x-revwho figcaption { font-family: 'Inter', sans-serif; font-weight: 800; font-size: .98rem; color: var(--brand-text); }
.x-revsrc { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--brand-text-muted); margin-top: 2px; }
.x-revsrc svg { display: block; }
.x-revstars { color: #FBBC05; letter-spacing: 2px; font-size: 1.05rem; margin-bottom: 10px; }
.x-revcard blockquote { margin: 0; font-size: 1.0rem; line-height: 1.6; color: var(--brand-text); }
.x-revcta { text-align: center; margin-top: 30px; }

/* ---- FAQ ----------------------------------------------------------------- */
.x-faq summary { color: var(--brand-text); }
.x-faq summary::after { color: var(--hl-amber); }
.x-faq details { border-bottom-color: var(--brand-border); }
.x-faq details p { color: var(--brand-text-muted); }

/* ---- Area page lists + county blocks ------------------------------------ */
.x-county-block h3 { border-bottom-color: var(--hl-amber); color: var(--brand-text); }
.x-town-list a { color: var(--brand-text); }
.x-town-list a:hover { color: var(--hl-amber); }
.x-town-list a svg { color: var(--hl-amber); }

/* Nearby-communities chips */
.x-hoods span { background: #fff; border-color: var(--brand-border); color: var(--hl-forest); }
.x-hoods span:hover { border-color: var(--hl-sage); }

/* Area-page body headings (Anton) + lead */
.x-body h2 { margin-bottom: 10px; }
.x-body .x-lead { font-size: 1.18rem; line-height: 1.6; color: var(--brand-text); }

/* ---- Big CTA: forest green + faint excavator watermark (SIGNATURE) ------- */
.x-bigcta { background: var(--hl-forest); position: relative; overflow: hidden; border-top: 4px solid var(--hl-amber); }
.x-bigcta::before {
  content: ''; position: absolute; right: -20px; bottom: -30px; width: 340px; height: 340px; pointer-events: none;
  background: url('/assets/icon-excavation.png') no-repeat center / contain;
  filter: brightness(0) invert(1); opacity: .06;
}
.x-bigcta::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(680px 300px at 30% 0%, rgba(183,100,42,.22), transparent 70%); }
.x-bigcta .container { position: relative; z-index: 1; }
.x-bigcta h2 { color: #fff; }
.x-bigcta p { color: rgba(244,239,230,.86); }

/* ---- Contact / embeds ---------------------------------------------------- */
.embed-wrap, .x-formcard iframe, .x-instaquote-form iframe { background: #fff; border-radius: var(--radius); }
.x-formcard iframe { width: 100%; min-height: 560px; border: 0; display: block; }

/* ---- Site-wide form band (every page, above footer) ---------------------- */
.x-instaquote {
  padding: 70px 0; border-top: 4px solid var(--hl-amber);
  background:
    repeating-linear-gradient(0deg, rgba(110,126,104,.05) 0, rgba(110,126,104,.05) 1px, transparent 1px, transparent 34px),
    radial-gradient(760px 320px at 50% -10%, rgba(183,100,42,.07), transparent 60%),
    var(--brand-bg-alt);
}
.x-instaquote .container { max-width: 760px; }
.x-instaquote-form { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius); padding: 10px; box-shadow: 0 10px 30px rgba(34,40,28,.08); }
.x-instaquote-form iframe { width: 100%; min-height: 540px; border: 0; display: block; }

/* ---- Banner (service / area heroes) -------------------------------------- */
.x-banner { background: var(--hl-forest-deep); }
.x-banner .x-hero-scrim { background: linear-gradient(180deg, rgba(28,34,22,.55), rgba(28,34,22,.9)); }
.x-banner h1 { color: #fff; }

/* ---- In-body service photo strip ---------------------------------------- */
.x-svc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 10px 0 28px; }
.x-svc-gallery figure { margin: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--brand-border); }
.x-svc-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.x-svc-gallery figure:hover img { transform: scale(1.06); }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--hl-forest-deep); border-top: 4px solid var(--hl-amber); }

/* ---- Gallery ------------------------------------------------------------- */
.x-gcat { border-radius: var(--radius); overflow: hidden; }

/* ---- Scroll-driven reveal (progressive; never hides on unsupported) ------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hlReveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    .x-head, .x-svc, .x-feat, .x-step, .card, .x-trust-item, .x-gcat, .x-revcard, .x-prose > *, .x-body > * {
      animation: hlReveal linear both; animation-timeline: view(); animation-range: entry 0% entry 42%;
    }
  }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .x-hero .x-eyebrow, .x-hero h1, .x-hero .x-sub, .x-hero .x-cta-row, .x-hero .x-chips { animation: none; }
  .x-svc, .x-feat, .card { transition: none; }
}