/* ============================================================
   STONEMOSS GARDEN CO. — HOME PAGE CSS
   ============================================================ */

/* ── HERO ── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 40%;
  filter: sepia(0.15) brightness(0.55) contrast(1.05);
}
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(28,26,23,0.96) 0%,
    rgba(28,26,23,0.70) 40%,
    rgba(28,26,23,0.25) 75%,
    transparent 100%
  );
}
.hero__content {
  position: relative; z-index: 2;
  padding-bottom: var(--sp-20); padding-top: 140px;
  max-width: 820px;
}
.hero__eyebrow {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.hero__eyebrow-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--copper-rim), transparent); max-width: 48px; }
.hero__eyebrow-text {
  font-family: var(--font-label); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--copper-bright);
  white-space: nowrap;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 6.5vw, var(--fs-5xl));
  font-weight: 900; color: var(--plaster-warm);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-6);
}
.hero__title em { font-style: italic; color: var(--copper-bright); display: block; }
.hero__desc {
  font-size: var(--fs-md); color: var(--text-on-dark-dim);
  line-height: var(--lh-loose); max-width: 54ch; margin-bottom: var(--sp-8);
  font-style: italic;
}
.hero__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-12); }

/* Hero stats */
.hero__stats {
  display: flex; gap: 0;
  border: 1px solid rgba(184,115,51,0.25);
  background: rgba(28,26,23,0.80);
  backdrop-filter: blur(8px);
  max-width: 680px;
}
.hero-stat { flex: 1; padding: var(--sp-5) var(--sp-6); text-align: center; border-right: 1px solid rgba(184,115,51,0.15); }
.hero-stat:last-child { border-right: none; }
.hero-stat__num {
  display: block; font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 900;
  color: var(--copper-bright); line-height: 1; margin-bottom: var(--sp-1);
}
.hero-stat__label {
  font-family: var(--font-label); font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-on-dark-dim);
}

/* ── TRUST STRIP ── */
.trust-strip {
  background: var(--concrete-deep);
  border-top: 2px solid var(--copper-aged); border-bottom: 1px solid rgba(184,115,51,0.20);
  padding: var(--sp-4) 0;
}
.trust-strip__list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.trust-strip__item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-label); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--plaster-cool); padding: var(--sp-2) var(--sp-6); white-space: nowrap;
}
.trust-strip__icon { color: var(--copper-bright); }
.trust-strip__sep { width: 1px; height: 18px; background: rgba(184,115,51,0.25); flex-shrink: 0; }

/* ── INTRO ── */
.intro-sect { background: var(--plaster-warm); }
.intro-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--sp-16); align-items: center; }
.intro-img-col { position: relative; }
.intro-img-frame {
  position: relative; padding: var(--sp-3); background: var(--cream);
  border: var(--b-stone); box-shadow: var(--sh-card);
}
.intro-img-frame img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: sepia(0.08) brightness(0.95); transition: transform var(--dur-slow) var(--ease); }
.intro-img-frame:hover img { transform: scale(1.02); }
.intro-badge {
  position: absolute; bottom: var(--sp-5); right: calc(-1 * var(--sp-8));
  background: var(--concrete); border: 2px solid var(--copper-aged);
  padding: var(--sp-5) var(--sp-7); text-align: center; box-shadow: var(--sh-card);
  background-image: var(--tex-concrete);
}
.intro-badge__num { display: block; font-family: var(--font-display); font-size: var(--fs-3xl); color: var(--copper-bright); line-height: 1; margin-bottom: var(--sp-1); }
.intro-badge__label { font-family: var(--font-label); font-size: var(--fs-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--plaster-cool); line-height: 1.6; }
.intro-body { font-size: var(--fs-base); color: var(--text-mid); line-height: var(--lh-loose); margin-bottom: var(--sp-4); }
.intro-values { display: flex; flex-direction: column; gap: var(--sp-4); margin: var(--sp-8) 0 var(--sp-8); }
.intro-value { display: flex; gap: var(--sp-4); align-items: flex-start; }
.intro-value__mark { color: var(--copper); font-size: var(--fs-xl); flex-shrink: 0; line-height: 1; margin-top: 2px; }
.intro-value__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text-warm); margin-bottom: var(--sp-1); }
.intro-value__text { font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-body); }

/* ── SERVICES PREVIEW ── */
.svcs-sect { background: var(--concrete); background-image: var(--tex-concrete); }
.sect-header { margin-bottom: var(--sp-12); }
.svcs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.svc-card {
  background: var(--concrete-mid); border: 1px solid rgba(184,115,51,0.18);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color var(--dur-mid), box-shadow var(--dur-mid), transform var(--dur-mid);
}
.svc-card:hover { border-color: var(--copper-rim); box-shadow: var(--sh-copper); transform: translateY(-3px); }
.svc-card__img-wrap { height: 210px; overflow: hidden; position: relative; }
.svc-card__img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.2) brightness(0.7); transition: transform var(--dur-slow); }
.svc-card:hover .svc-card__img { transform: scale(1.04); }
.svc-card__num { position: absolute; bottom: var(--sp-4); left: var(--sp-4); background: var(--concrete-deep); border: 1px solid var(--copper-aged); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: var(--fs-md); color: var(--copper-bright); }
.svc-card__body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.svc-card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--plaster-warm); margin-bottom: var(--sp-3); }
.svc-card__text { font-size: var(--fs-sm); color: var(--text-on-dark-dim); line-height: var(--lh-loose); flex: 1; margin-bottom: var(--sp-5); font-style: italic; }
.svc-card__link { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--copper-bright); }

/* ── PROCESS ── */
.process-sect { background: var(--cream); background-image: var(--tex-paper); }
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.process-steps::before {
  content: ''; position: absolute;
  top: 26px; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--copper-rim), var(--copper-rim), transparent);
}
.proc-step { text-align: center; padding: 0 var(--sp-5); position: relative; z-index: 1; }
.proc-step__num {
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 900; color: var(--copper);
  background: var(--cream); border: 2px solid var(--copper-rim);
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-6); box-shadow: 0 0 0 4px var(--cream);
}
.proc-step__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--text-warm); margin-bottom: var(--sp-3); }
.proc-step__text { font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-loose); font-style: italic; }

/* ── TESTIMONIALS ── */
.testi-sect { background: var(--plaster-warm); }
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.testi-card { padding: var(--sp-8); display: flex; flex-direction: column; }
.testi-stars { color: var(--copper); letter-spacing: 3px; font-size: var(--fs-md); margin-bottom: var(--sp-4); }
.testi-quote { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--text-mid); line-height: var(--lh-loose); font-style: italic; flex: 1; margin: 0 0 var(--sp-5); }
.testi-author { border-top: 1px solid var(--plaster-dark); padding-top: var(--sp-4); }
.testi-name { display: block; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--text-warm); margin-bottom: var(--sp-1); }
.testi-detail { font-family: var(--font-label); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-faint); }

/* ── BLOG PREVIEW ── */
.blog-prev-sect { background: var(--concrete); background-image: var(--tex-concrete); }
.blog-prev-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-12); flex-wrap: wrap; gap: var(--sp-4); }
.blog-prev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.blog-prev-card { display: flex; flex-direction: column; overflow: hidden; background: var(--concrete-mid); border: 1px solid rgba(184,115,51,0.15); transition: border-color var(--dur-mid), box-shadow var(--dur-mid), transform var(--dur-mid); }
.blog-prev-card:hover { border-color: var(--copper-rim); box-shadow: var(--sh-copper); transform: translateY(-2px); }
.blog-prev-card__img-wrap { height: 200px; overflow: hidden; }
.blog-prev-card__img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.15) brightness(0.75); transition: transform var(--dur-slow); }
.blog-prev-card:hover .blog-prev-card__img { transform: scale(1.04); }
.blog-prev-card__body { padding: var(--sp-6); flex: 1; display: flex; flex-direction: column; }
.blog-prev-card__meta { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.blog-prev-card__date { font-family: var(--font-label); font-size: var(--fs-2xs); color: rgba(237,232,223,0.40); letter-spacing: var(--ls-wide); }
.blog-prev-card__title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; color: var(--plaster-warm); line-height: var(--lh-snug); margin-bottom: var(--sp-3); flex: 1; }
.blog-prev-card__title a { color: var(--plaster-warm); transition: color var(--dur-fast); }
.blog-prev-card__title a:hover { color: var(--copper-bright); }
.blog-prev-card__excerpt { font-size: var(--fs-sm); color: var(--text-on-dark-dim); line-height: var(--lh-loose); font-style: italic; margin-bottom: var(--sp-4); }
.blog-prev-card__read { font-family: var(--font-label); font-size: var(--fs-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--copper-bright); }

/* ── CTA SECTION ── */
.cta-sect { position: relative; padding: var(--sp-32) 0; text-align: center; overflow: hidden; }
.cta-sect__bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(184,115,51,0.10) 0%, transparent 65%), var(--concrete-mid); background-image: var(--tex-concrete); }
.cta-sect__bg::before,.cta-sect__bg::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); border: 1px solid var(--copper-rim); }
.cta-sect__bg::before { width: 360px; height: 360px; }
.cta-sect__bg::after  { width: 640px; height: 640px; opacity: 0.4; }
.cta-sect__inner { position: relative; z-index: 1; }
.cta-sect__title { font-family: var(--font-display); font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl)); font-weight: 900; color: var(--plaster-warm); line-height: var(--lh-snug); margin-bottom: var(--sp-4); }
.cta-sect__title em { font-style: italic; color: var(--copper-bright); }
.cta-sect__sub { font-size: var(--fs-md); color: var(--text-on-dark-dim); font-style: italic; max-width: 48ch; margin: 0 auto var(--sp-8); line-height: var(--lh-loose); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .intro-grid { grid-template-columns: 1fr; }
  .intro-img-col { max-width: 420px; }
  .intro-badge { right: var(--sp-4); }
  .svcs-grid { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .blog-prev-grid { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .process-steps::before { display: none; }
  .hero__stats { max-width: 100%; }
}
@media (max-width: 700px) {
  .svcs-grid { grid-template-columns: 1fr; }
  .blog-prev-grid { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
  .trust-strip__sep { display: none; }
}