/* Glossy / glass finish overlay — additive to /vc/index.css.
   Keeps palette, type, layout, and content untouched. */

:root {
  --gloss-green-top:    hsl(159 30% 46%);
  --gloss-green-bottom: hsl(160 30% 28%);
  --gloss-shadow-green: hsl(160 27% 26% / .35);
}

/* ---------- HEADER: glass ---------- */
header.sticky {
  background-color: hsl(var(--cream) / .72) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 -1px 0 rgba(255,255,255,.9) inset,
    0 6px 18px -12px rgba(20,30,25,.25);
}

/* Buttons intentionally left as original site styles. */


/* ---------- SERVICE CARDS ---------- */
#serves .grid > article,
#services .grid > article,
#why .grid > article {
  background-image: linear-gradient(
    to bottom,
    #ffffff 0%,
    hsl(var(--cream)) 60%
  );
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(20,30,25,.04),
    0 12px 30px -18px rgba(20,30,25,.28);
  transition: box-shadow .35s ease, transform .35s ease;
}
#serves .grid > article:hover,
#services .grid > article:hover,
#why .grid > article:hover {
  background-image: none;
  background-color: hsl(var(--orange));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 18px 40px -18px var(--gloss-shadow-green);
}

/* ---------- PHOTOS: rounded + soft green drop shadow ---------- */
#top .md\:col-span-5 > div,
#top .md\:col-span-5 img,
section img[src*="workshop-"],
section img[src*="vicki-"] {
  border-radius: 12px;
  overflow: hidden;
}
#top .md\:col-span-5 > div {
  box-shadow: 0 24px 48px -20px var(--gloss-shadow-green);
}
section img[src*="workshop-"],
section img[src*="vicki-2"] {
  box-shadow: 0 18px 36px -18px var(--gloss-shadow-green);
}