/* SilverMoose contact section, night forest concept (4 Nov 2026, local only). The lime card becomes a photo of a spruce
   forest at night (Meshy image, Private) that fades into the site background, darkened where the text and the form sit;
   text turns light. */
.contact-section.sm-forest {
  position: relative; isolation: isolate; color: #e9f1e2;
  background: transparent; border-radius: 0; box-shadow: none;
}
/* the forest fades out on every side into the site's own night sky, so there is no card edge */
/* the forest stands in the left column (an upright photo shown near its own resolution, so it stays sharp) and fades out
   on every side into the site's own night sky, so there is no card edge. contact3d.js reads the same box (52 %, 66 %). */
.contact-section.sm-forest::before {
  content: ""; position: absolute; inset: 0 48% 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 7, 8, .62) 0%, rgba(3, 7, 8, .3) 38%, rgba(3, 7, 8, 0) 62%, rgba(3, 7, 8, .25) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 92%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 7%, #000 64%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 20%, #000 92%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 7%, #000 64%, transparent 100%);
  mask-composite: intersect;
}
.sm-forest-fx {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 92%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 92%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}
/* the photo itself (285 KB) only once the section comes near: contact3d.js adds sm-forest-near, on every screen size */
.contact-section.sm-forest.sm-forest-near::before {
  background:
    linear-gradient(180deg, rgba(3, 7, 8, .62) 0%, rgba(3, 7, 8, .3) 38%, rgba(3, 7, 8, 0) 62%, rgba(3, 7, 8, .25) 100%),
    url(/contact3d-20261104/forest-clearing.webp?v=b5615304) center 66% / cover no-repeat;
}
/* the effects canvas covers only the moose's column and ends a little way under the form: fade it out before that */
.sm-forest .sm-forest-fx {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 92%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 4%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 92%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 4%, #000 74%, transparent 100%);
}
/* stacked on phones: the photo fills the whole section */
@media (max-width: 899px) { .contact-section.sm-forest::before { inset: 0; } }
.sm-forest .contact-head .eyebrow { color: #b9dc8a; }
.sm-forest .contact-head h2 { color: #f3f7ee; text-shadow: 0 2px 28px rgba(0, 0, 0, .5); }
.sm-forest .contact-head h2 em { color: #c5f477; }
.sm-forest .contact-arrow { color: #c5f477; }
.sm-forest .contact-body { border-top-color: rgba(197, 244, 119, .22); }
.sm-forest .contact-copy, .sm-forest .contact-copy a { color: #e9f1e2; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
.sm-forest .contact-copy a:hover { color: #c5f477; }
.sm-forest .contact-copy > p, .sm-forest .contact-copy > span { color: rgba(233, 241, 226, .86); }