/* =========================================================
   PAGE-SPECIFIC LAYOUT
   ========================================================= */

/* ---------------- Home Hero ---------------- */
/* Visual-only slideshow band (no text overlay) */
.hero-visual{
  position: relative;
  height: clamp(360px, 76vh, 720px);
  overflow: hidden;
}
/* Content sits below the visual, on solid background */
.hero-content{
  padding-block: clamp(3.5rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem);
}
.hero-content .hero-grid{ align-items: center; }

.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
  padding-top: calc(var(--nav-h) + 1rem);
}
.hero .wrap{ position:relative; z-index:4; padding-bottom: clamp(3rem, 8vw, 5rem); width:100%; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:end;
}
.hero-copy .eyebrow{ margin-bottom: 1.4rem; }
.hero-copy h1{ margin-bottom: 1.4rem; }
.hero-copy .lede{ max-width: 46ch; color: #dfe6e1; margin-bottom: 2.1rem; }
.hero-aside{ display:flex; flex-direction:column; gap:1.4rem; align-items:flex-start; }
.hero-aside .stat-cluster{ flex-direction:column; gap:1.1rem; }
.hero-aside .stat{ display:flex; align-items:baseline; gap:.7rem; }
.hero-aside .stat .num{ font-size:1.6rem; }
.hero-aside .stat .lbl{ margin-top:0; }
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-aside{ flex-direction:row; flex-wrap:wrap; gap: 1.6rem 2.4rem; }
}
.scroll-cue{
  position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family: var(--font-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase;
  color: var(--steel);
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-cue .line{ width:1px; height:26px; background: linear-gradient(180deg, var(--green), transparent); }
@keyframes bob{ 0%,100%{ transform: translate(-50%, 0); } 50%{ transform: translate(-50%, 8px); } }

/* ---------------- Service feature grid (home) ---------------- */
.feature-card{ padding: 2rem 1.8rem; }

/* ---------------- Service rows (services.html) ---------------- */
.service-row{
  display:grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.service-row:not(:last-child){ border-bottom: 1px solid rgba(255,255,255,.08); }
.service-row.reverse{ direction: rtl; }
.service-row.reverse > *{ direction: ltr; }
.service-row .media{
  border-radius: var(--radius-md);
  overflow:hidden;
  aspect-ratio: 5/4;
  position:relative;
  border:1px solid rgba(111,207,87,.2);
}
.service-row .media img{ width:100%; height:100%; object-fit:cover; }
.service-row .idx-mark{
  position:absolute; top:1rem; left:1rem;
  font-family: var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color: var(--green);
  background: rgba(10,13,11,.75);
  border: 1px solid rgba(111,207,87,.4);
  padding:.3rem .7rem;
  border-radius: 999px;
}
.service-row .content h3{ margin-bottom: .9rem; }
.service-row .content p{ color: var(--steel); margin-bottom:1.2rem; }
.service-row .pricing-line{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:1.4rem; }
.service-row .tag-list{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.4rem; }
.tag-pill{
  font-family: var(--font-mono); font-size:.68rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--steel); border:1px solid rgba(255,255,255,.16); padding:.35rem .75rem; border-radius:999px;
}
@media (max-width: 780px){
  .service-row, .service-row.reverse{ grid-template-columns: 1fr; direction:ltr; }
}

/* ---------------- Process timeline ---------------- */
.timeline{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.3rem;
  counter-reset: step;
}
@media (max-width: 980px){ .timeline{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 620px){ .timeline{ grid-template-columns: 1fr; } }
.step{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 1.6rem 1.3rem;
  position:relative;
}
.step .step-num{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight:700;
  color: var(--green);
  display:block;
  margin-bottom: .8rem;
}
.step h4{ margin-bottom:.5rem; text-transform:none; font-size:1rem; }
.step p{ color: var(--steel); font-size:.87rem; }

/* ---------------- Shop ---------------- */
.shop-cat-nav{
  position: sticky;
  top: calc(var(--nav-h) + .75rem);
  z-index: 40;
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  padding-block: 1rem;
  margin-bottom: 1rem;
}
.shop-category{ scroll-margin-top: calc(var(--nav-h) + 5.5rem); }
.shop-category + .shop-category{ margin-top: clamp(3rem, 6vw, 4.5rem); }
.cat-head{ display:flex; align-items:baseline; gap:1rem; margin-bottom:1.8rem; flex-wrap:wrap; }
.cat-head h3{ text-transform:uppercase; }
.cat-count{ font-family: var(--font-mono); font-size:.75rem; color: var(--steel); }

.product-card .card-body{ display:flex; flex-direction:column; gap:.9rem; }
.product-card .row-between{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }

/* ---------------- Values / about ---------------- */
.workshop-figure{
  border-radius: var(--radius-lg);
  overflow:hidden;
  border: 1px solid rgba(111,207,87,.2);
}
.workshop-figure img{ width:100%; height:100%; object-fit:cover; }
.about-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items:center;
}
@media (max-width: 820px){ .about-split{ grid-template-columns:1fr; } }

/* ---------------- Contact ---------------- */
.contact-methods{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
@media (max-width: 980px){ .contact-methods{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .contact-methods{ grid-template-columns: 1fr; } }
.method-card{
  padding: 1.8rem 1.6rem;
  text-align:left;
}
.method-card .icon-badge{ margin-bottom: 1.2rem; }
.method-card h4{ text-transform:none; margin-bottom:.4rem; }
.method-card p, .method-card a{ color: var(--steel); font-size:.92rem; }
.method-card a:hover{ color: var(--green); }

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items:stretch;
}
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.form-panel{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}

/* ---------------- Testimonials ---------------- */
.rating-banner{
  display:flex;
  align-items:center;
  gap: 1.6rem;
  flex-wrap:wrap;
}
.rating-banner .big-num{
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 4.5rem);
  font-weight:700;
  color: var(--green);
  line-height:1;
}

/* ---------------- CTA banner ---------------- */
.cta-banner{
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  position:relative;
  overflow:hidden;
  text-align:center;
}
.cta-banner h2{ margin-bottom: 1rem; }
.cta-banner p{ color: rgba(255,255,255,.75); max-width:56ch; margin-inline:auto; margin-bottom:2rem; }
.cta-banner .btn-row{ justify-content:center; }

/* ---------------- Coverage cities small grid ---------------- */
.coverage-cities{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 700px){ .coverage-cities{ grid-template-columns: 1fr; } }
.city-card{
  padding: 1.6rem;
  text-align:center;
  border: 1px dashed rgba(111,207,87,.3);
  border-radius: var(--radius-md);
}
.city-card .city-name{ font-family: var(--font-display); font-size:1.3rem; font-weight:700; text-transform:uppercase; color:#fff; }
.city-card .city-tag{ font-family: var(--font-mono); font-size:.7rem; color: var(--steel); margin-top:.4rem; display:block; }