/* Brand: charrontreecare.homes — services
   Tabbed work cards: removal, trim, stump, inspection and cleanup. */

.cha47-svcpage .cha47-kicker {
  margin: 0;
  color: var(--cha47-olive-2);
  font-family: var(--cha47-display);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.cha47-svc-intro > *,
.cha47-svc-stage > h2,
.cha47-svc-copy > *,
.cha47-svc-still > *,
.cha47-svc-reach-inner > * {
  margin: 0;
}

.cha47-svcpage {
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 48px);
}

.cha47-svc-intro {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  max-width: 42rem;
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--cha47-line);
}

.cha47-svc-intro h1 {
  max-width: 16em;
  font-size: clamp(2.05rem, 4vw, 3.35rem);
}

.cha47-svc-lead {
  max-width: 40rem;
  color: var(--cha47-soft);
}

.cha47-svc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.2rem;
}

.cha47-svc-stage {
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  padding-top: clamp(28px, 4vw, 44px);
}

.cha47-svc-stage h2,
.cha47-svc-reach h2 {
  max-width: 16em;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.cha47-svc-stage .svc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin: 0;
}

.cha47-svc-stage .svc-tab {
  margin: 0;
  min-height: 42px;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--cha47-line);
  border-radius: 2px;
  background: var(--cha47-surface-2);
  color: var(--cha47-ink);
  font-family: var(--cha47-display);
  font-size: 0.92rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-align: left;
  cursor: pointer;
}

.cha47-svc-stage .svc-tab:hover {
  border-color: var(--cha47-olive-2);
  color: var(--cha47-ink);
}

.cha47-svc-stage .svc-tab.active,
.cha47-svc-stage .svc-tab.active:hover {
  background: var(--cha47-olive);
  border-color: transparent;
  color: var(--cha47-accent-ink);
}

@media (max-width: 640px) {
  .cha47-svc-stage .svc-tab {
    flex: 1 1 calc(50% - 8px);
  }
}

.cha47-svc-catalog {
  display: grid;
  gap: 12px;
  width: 100%;
}

.cha47-svc-card {
  display: grid;
  grid-template-columns: minmax(200px, 0.58fr) minmax(0, 1.42fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
  width: 100%;
  min-width: 0;
  padding: clamp(14px, 2vw, 22px);
  border: 1px solid var(--cha47-line);
  border-top: 3px solid var(--cha47-olive);
  border-radius: 2px;
  background: var(--cha47-surface);
}

.cha47-svc-still {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  align-content: start;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.cha47-svc-still img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--cha47-surface-2);
}

.cha47-svc-still figcaption {
  color: var(--cha47-soft);
  font-size: 0.84rem;
}

.cha47-svc-copy {
  display: grid;
  grid-template-rows: auto auto auto auto;
  gap: 0.7rem;
  align-content: start;
  justify-items: start;
  min-width: 0;
  width: 100%;
  text-align: left;
}

.cha47-svc-copy p:not(.cha47-kicker) {
  color: var(--cha47-soft);
}

.cha47-svc-copy .cha47-btn {
  justify-self: start;
  align-self: end;
}

html.dna-svc-tabs .cha47-svcpage .service-item:not(.svc-tab-hidden) {
  animation: none;
}

.cha47-svc-reach {
  padding: clamp(36px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
  background: var(--cha47-surface);
  border-top: 1px solid var(--cha47-line);
}

.cha47-svc-reach-inner {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  max-width: 40rem;
}

.cha47-svc-reach-inner > p {
  color: var(--cha47-soft);
}

.cha47-svc-facts {
  display: grid;
  gap: 0.35rem;
}

.cha47-svc-facts a {
  color: var(--cha47-olive-2);
  font-weight: 650;
  overflow-wrap: anywhere;
}

@media (max-width: 800px) {
  .cha47-svc-card {
    grid-template-columns: 1fr;
  }

  .cha47-svc-still {
    order: 2;
  }

  .cha47-svc-still img {
    aspect-ratio: 16 / 10;
  }

  .cha47-svc-intro h1,
  .cha47-svc-stage h2,
  .cha47-svc-reach h2 {
    max-width: none;
  }
}

@media (max-width: 520px) {
  .cha47-svc-actions {
    display: grid;
    width: 100%;
  }

  .cha47-svc-actions .cha47-btn,
  .cha47-svc-reach-inner > .cha47-btn,
  .cha47-svc-copy .cha47-btn {
    width: 100%;
    justify-self: stretch;
  }
}