/* ===== Services Hero (matches your contact/about/shop style) ===== */
.services-hero {
  position: relative;
  width: 100%;
  min-height: 55vh;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: url('https://images.unsplash.com/photo-1506806732259-39c2d0268443?auto=format&fit=crop&w=1920&q=80')
              center center / cover no-repeat; /* swap if you like */
}
.services-hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,.2), rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55));
}
.services-hero__inner { position: relative; z-index: 2; }
.services-hero h1 { font-size: clamp(2.2rem, 2rem + 1.5vw, 3.2rem); margin: 0 0 .4rem; }
.services-hero p  { font-size: clamp(1rem, .9rem + .5vw, 1.2rem); opacity: .95; }

/* ===== Services Section ===== */
.services-wrap { padding: 4.5rem 1rem; }

.services-head { text-align: center; max-width: 800px; margin: 0 auto 2.2rem; }
.services-head .kicker {
  display: inline-block; font-weight: 800; letter-spacing: .12em;
  color: #f59e0b; text-transform: uppercase; font-size: .8rem; margin-bottom: .35rem;
}
.services-head h2 { margin: 0 0 .35rem; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.services-head p  { color: #6b7280; }

/* Cards Grid */
.services-grid {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* Service Card */
.service-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 1.4rem;
  box-shadow: 0 14px 28px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease;
  display: grid; gap: .8rem;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 36px rgba(0,0,0,.10);
}
.svc-icon {
  width: 54px; height: 54px; border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(245,158,11,.12);
  font-size: 1.25rem;
}
.service-card h3 { margin: .2rem 0 0; font-size: 1.2rem; }
.service-card p  { color: #5b5b5b; line-height: 1.7; }

.svc-points {
  list-style: none; padding: 0; margin: .2rem 0 .6rem;
  display: grid; gap: .4rem;
}
.svc-points li { position: relative; padding-left: 1.25rem; }
.svc-points li::before {
  content: "•"; position: absolute; left: 0; top: 0; line-height: 1.1;
  color: #f59e0b; font-weight: 900;
}

.svc-btn { margin-top: .2rem; }

/* CTA Row */
.services-cta {
  margin-top: 2.2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(16,185,129,.1));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 1.75rem 1.25rem;
}
.services-cta h3 { margin: 0 0 .25rem; }
.services-cta p  { margin: 0 0 .9rem; color: #374151; }
/* ===== Animation tokens ===== */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --dur-1: .5s;
  --dur-2: .7s;
  --dur-3: 1s;
}

/* Default hidden state for reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  will-change: opacity, transform;
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}

/* When in view */
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Variants via data-anim */
.reveal[data-anim="fade-up"]      { transform: translateY(18px); }
.reveal[data-anim="fade-down"]    { transform: translateY(-18px); }
.reveal[data-anim="fade-left"]    { transform: translateX(18px); }
.reveal[data-anim="fade-right"]   { transform: translateX(-18px); }
.reveal[data-anim="scale-in"]     { transform: scale(.96); }
.reveal[data-anim="pop"]          { transform: scale(.9) translateY(8px); }

.reveal.in-view[data-anim="scale-in"],
.reveal.in-view[data-anim="pop"]  { transform: none; }

/* Stagger container: children animate with delays */
.stagger > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.stagger.in-view > * {
  opacity: 1;
  transform: none;
}
.stagger.in-view > *[style*="--d:"] {
  transition-delay: var(--d);
}

/* Subtle hover/lift for cards & buttons (already have transitions) */
.service-card {
  transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 36px rgba(0,0,0,.12);
}
.btn {
  transition: transform .15s var(--ease-out), box-shadow .25s var(--ease-out), opacity .2s var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); opacity: .9; }

/* Hero background slow zoom + overlay fade */
@keyframes hero-zoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}
.services-hero {
  overflow: hidden;
}
.services-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: inherit;              /* uses the same background image */
  transform-origin: center;
  animation: hero-zoom 20s var(--ease-out) both;
  z-index: 0;
  filter: brightness(1) saturate(1.02);
}
.services-hero > * { position: relative; z-index: 1; }

/* Make overlay fade in softly */
.services-hero__overlay {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.services-hero.in-view .services-hero__overlay {
  opacity: 1;
}

/* Newsletter / CTA subtle pulse for the icon box */
.svc-icon {
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out);
}
.service-card:hover .svc-icon { transform: scale(1.06); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .stagger > *,
  .services-hero::before,
  .services-hero__overlay,
  .service-card,
  .btn,
  .svc-icon {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
/* Shimmer on load for hero text */
:root {
  --shimmer-light: rgba(0,0,0,0.1);   /* faint black */
  --shimmer-mid:   rgba(0,0,0,0.6);   /* stronger black */
}

.shimmer-text {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--shimmer-light) 0%,
    var(--shimmer-mid) 50%,
    var(--shimmer-light) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: hero-shimmer 1.2s cubic-bezier(.22,1,.36,1) infinite;
}

@keyframes hero-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: 0% 0; }
}

/* When shimmer ends, restore black text */
.shimmer-done {
  color: #000;                /* <-- black text */
  background: none !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .shimmer-text {
    animation: none !important;
    color: white!important;
    background: none !important;
  }
}