/*
 * Landing page styles for Tree and Stump Removal.
 *
 * Hand-written rather than generated, and loaded after tailwind.css. Keeping
 * the homepage in its own stylesheet means it can be reworked without
 * rebuilding the Tailwind bundle the rest of the site depends on.
 */

/* --- Hero ---------------------------------------------------------------- */
.tsr-lhero {
  position: relative;
  isolation: isolate;
  background: #163728;
  color: #fff;
  overflow: hidden;
}
.tsr-lhero__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 42%;
}
.tsr-lhero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    100deg,
    rgba(22, 55, 40, .97) 0%,
    rgba(22, 55, 40, .94) 32%,
    rgba(22, 55, 40, .66) 54%,
    rgba(22, 55, 40, .22) 76%,
    rgba(22, 55, 40, .04) 100%
  );
}
@media (max-width: 900px) {
  .tsr-lhero__img { object-position: 68% 30%; }
  .tsr-lhero::after {
    background: linear-gradient(180deg, rgba(22, 55, 40, .86) 0%, rgba(22, 55, 40, .95) 55%, rgba(22, 55, 40, .97) 100%);
  }
}

.tsr-lhero__inner { position: relative; padding-block: 3.75rem 6rem; max-width: 37rem; }
@media (min-width: 900px) { .tsr-lhero__inner { padding-block: 6.5rem 8.5rem; } }

.tsr-chip {
  display: inline-flex; align-items: center; gap: .6rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; padding: .45rem .9rem .45rem .7rem; border-radius: 99px;
  font-size: .82rem; font-weight: 600; line-height: 1.2;
}
.tsr-chip__dot { width: 7px; height: 7px; border-radius: 99px; background: #E8590C; box-shadow: 0 0 0 3px rgba(232,89,12,.28); flex: none; }

.tsr-lhero h1 {
  color: #fff;
  font-size: clamp(2.45rem, 6vw, 4.15rem);
  line-height: 1.03;
  letter-spacing: -.03em;
  margin: 1.35rem 0 1.15rem;
}
.tsr-lhero__sub {
  color: rgba(255,255,255,.88);
  font-size: clamp(1.05rem, 2vw, 1.24rem);
  line-height: 1.55;
  margin: 0 0 2rem;
  max-width: 34rem;
}
.tsr-lhero__sub strong { color: #fff; font-weight: 600; }

.tsr-lhero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.tsr-lhero .tsr-btn--cta { box-shadow: 0 14px 30px -12px rgba(232,89,12,.75); }

.tsr-ltrust {
  display: grid; grid-template-columns: 1fr; gap: .75rem 1.5rem;
  margin: 2.35rem 0 0; padding: 0; list-style: none; max-width: 31rem;
}
@media (min-width: 560px) { .tsr-ltrust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tsr-ltrust li { display: flex; gap: .6rem; align-items: flex-start; font-size: .94rem; font-weight: 600; color: rgba(255,255,255,.93); }
.tsr-ltrust svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .08rem; color: #E8590C; }

/* --- Price strip, overlapping the hero ----------------------------------- */
.tsr-pricestrip { position: relative; z-index: 3; margin-top: -4rem; }
.tsr-pricestrip__grid {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: #E7E2D6; border: 1px solid #E7E2D6;
  border-radius: 1.25rem; overflow: hidden;
  box-shadow: 0 26px 60px -32px rgba(22,55,40,.6);
}
@media (min-width: 620px) { .tsr-pricestrip__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .tsr-pricestrip__grid { grid-template-columns: repeat(4, 1fr); } }

.tsr-pricecard { display: block; background: #fff; padding: 1.5rem 1.4rem; text-decoration: none; color: inherit; transition: background .15s ease; }
.tsr-pricecard:hover { background: #F4F8F5; color: inherit; }
.tsr-pricecard__label { margin: 0 0 .55rem; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7A4E2D; }
.tsr-pricecard__price { margin: 0 0 .35rem; font-family: "Bricolage Grotesque", Georgia, serif; font-size: 1.7rem; line-height: 1; color: #163728; font-weight: 700; }
.tsr-pricecard__note { margin: 0; font-size: .89rem; color: #5C5C56; line-height: 1.45; }

/* --- Section heads -------------------------------------------------------- */
.tsr-shead { max-width: 44rem; margin-bottom: 2.5rem; }
.tsr-shead .tsr-h2 { margin-bottom: .7rem; }
.tsr-shead p { margin: 0; font-size: 1.08rem; color: #4A4A46; }

/* --- Service cards -------------------------------------------------------- */
.tsr-scards { display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .tsr-scards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .tsr-scards { grid-template-columns: repeat(3, 1fr); } }

.tsr-scard {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid #E7E2D6; border-radius: 1.15rem;
  padding: 1.6rem; text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.tsr-scard::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: #E8590C; transform: scaleY(0); transform-origin: top; transition: transform .24s ease;
}
.tsr-scard:hover { transform: translateY(-4px); border-color: #CFE0D5; box-shadow: 0 24px 46px -28px rgba(22,55,40,.55); color: inherit; }
.tsr-scard:hover::before { transform: scaleY(1); }
.tsr-scard__icon { width: 2.9rem; height: 2.9rem; border-radius: .85rem; display: grid; place-items: center; background: #E7EFEA; color: #1F4D3A; margin-bottom: 1.05rem; }
.tsr-scard__icon svg { width: 1.5rem; height: 1.5rem; }
.tsr-scard h3 { margin: 0 0 .5rem; font-size: 1.18rem; }
.tsr-scard p { margin: 0 0 1.15rem; color: #4A4A46; font-size: .96rem; flex: 1 1 auto; }
.tsr-scard__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid #F0EBE0; padding-top: .9rem; font-size: .9rem; }
.tsr-scard__price { font-weight: 700; color: #163728; }
.tsr-scard__go { font-weight: 700; color: #1F4D3A; white-space: nowrap; }
.tsr-scard:hover .tsr-scard__go { color: #E8590C; }

/* --- Why us --------------------------------------------------------------- */
.tsr-whygrid { display: grid; gap: 1.9rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tsr-whygrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tsr-whygrid { grid-template-columns: repeat(4, 1fr); } }
.tsr-why__icon { width: 2.7rem; height: 2.7rem; border-radius: .8rem; display: grid; place-items: center; background: #F2E8DF; color: #7A4E2D; margin-bottom: .95rem; }
.tsr-why__icon svg { width: 1.4rem; height: 1.4rem; }
.tsr-whygrid h3 { margin: 0 0 .45rem; font-size: 1.1rem; }
.tsr-whygrid p { margin: 0; font-size: .96rem; color: #4A4A46; }

/* --- Feature band --------------------------------------------------------- */
.tsr-featband {
  background: #163728; color: #fff; border-radius: 1.5rem;
  padding: 2.5rem 1.75rem; display: grid; gap: 1.75rem;
  background-image: radial-gradient(circle at 85% 15%, rgba(232,89,12,.16) 0%, rgba(232,89,12,0) 55%);
}
@media (min-width: 900px) { .tsr-featband { grid-template-columns: auto 1fr; align-items: center; gap: 3rem; padding: 3.25rem 3rem; } }
.tsr-featband__date { font-family: "Bricolage Grotesque", Georgia, serif; font-weight: 700; font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1; color: #E8590C; letter-spacing: -.02em; }
.tsr-featband__date span { display: block; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: .6rem; font-family: Inter, system-ui, sans-serif; }
.tsr-featband h2 { color: #fff; margin: 0 0 .8rem; font-size: clamp(1.5rem, 3vw, 2.05rem); }
.tsr-featband p { color: rgba(255,255,255,.86); margin: 0 0 1.35rem; max-width: 58ch; }
.tsr-featband a.tsr-featband__link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(232,89,12,.8); }
.tsr-featband a.tsr-featband__link:hover { color: #E8590C; }

/* --- Areas band ----------------------------------------------------------- */
.tsr-areaband { background: #E7EFEA; }
.tsr-areaband .tsr-arealist a { border-color: #D3E2D8; }

/* --- Steps, tightened for the landing page -------------------------------- */
.tsr-landing .tsr-steps li { padding-top: 3.6rem; }

/* --- Section rhythm ------------------------------------------------------- */
.tsr-landing .tsr-section { padding-block: 3.75rem; }
@media (min-width: 768px) { .tsr-landing .tsr-section { padding-block: 5rem; } }
.tsr-landing .tsr-faq { max-width: 54rem; }

@media (prefers-reduced-motion: reduce) {
  .tsr-scard, .tsr-scard::before, .tsr-pricecard { transition: none; }
  .tsr-scard:hover { transform: none; }
}