/* Compact proof, work reel, and illuminated family-business cards. */
.reel-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 85% 12%, rgba(197, 111, 54, .18), transparent 28%), #090b0c;
}

.reel-heading { max-width: 900px; margin-bottom: 42px; }
.reel-heading h2 {
  font-family: Georgia, serif;
  text-transform: uppercase;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .92;
  margin: 0;
  max-width: 900px;
}
.reel-heading > p:last-child { color: var(--muted); font-size: 17px; line-height: 1.6; max-width: 620px; }
.reel-stage { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.reel-feature { position: relative; min-height: 660px; overflow: hidden; background: #050607; }
.reel-feature video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel-label {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 17px 19px;
  background: rgba(8, 10, 11, .78);
  border: 1px solid rgba(235, 154, 93, .55);
  backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 14px;
  align-items: center;
  pointer-events: none;
}
.reel-label span { grid-row: 1 / 3; color: var(--copper-light); font-family: Georgia, serif; font-size: 25px; }
.reel-label strong { text-transform: uppercase; letter-spacing: .08em; }
.reel-label small { color: #c5cbce; }
.reel-strip { display: grid; grid-template-rows: repeat(3, 1fr); gap: 14px; }
.reel-tile { position: relative; min-height: 0; margin: 0; overflow: hidden; background: #111; }
.reel-tile img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.74) contrast(1.08); transition: transform .5s ease, filter .5s ease; }
.reel-tile:hover img { transform: scale(1.04); filter: saturate(1) contrast(1.06); }
.reel-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 8, 9, .08), rgba(6, 8, 9, .78)); }
.reel-tile figcaption { position: absolute; z-index: 1; right: 18px; bottom: 16px; text-align: right; }
.reel-tile span, .reel-tile strong { display: block; text-transform: uppercase; }
.reel-tile span { color: var(--copper-light); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.reel-tile strong { font-family: Georgia, serif; font-size: 20px; margin-top: 4px; }
.reel-cta { display: flex; justify-content: space-between; gap: 24px; margin-top: 14px; padding: 21px 24px; border: 1px solid var(--line); color: #c9ced0; text-decoration: none; text-transform: uppercase; font-size: 11px; letter-spacing: .12em; }
.reel-cta strong { color: var(--copper-light); }

.businesses { background: #0e1215; color: var(--paper); }
.businesses .eyebrow { color: var(--copper-light); }
.businesses .section-heading > p { color: #aeb5b8; }
.business-grid { gap: 14px; }
.business-card {
  position: relative;
  isolation: isolate;
  min-height: 225px;
  padding: 27px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .035);
  color: #f2eee8;
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease, background .28s ease;
}
.business-card::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(125deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .015) 56%); backdrop-filter: blur(13px); }
.business-card::after { content: ""; position: absolute; z-index: -1; inset: -1px; opacity: 0; background: radial-gradient(circle at 76% 32%, var(--card-glow), transparent 46%); transition: opacity .35s ease; }
.business-card:hover, .business-card:focus-visible, .business-card.is-lit { transform: translateY(-4px); border-color: var(--card-line); box-shadow: 0 18px 48px var(--card-shadow); background: rgba(255, 255, 255, .055); }
.business-card:hover::after, .business-card:focus-visible::after, .business-card.is-lit::after { opacity: 1; }
.business-card-ranch { --card-glow: rgba(241, 193, 72, .34); --card-line: rgba(241, 193, 72, .7); --card-shadow: rgba(155, 104, 12, .22); }
.business-card-k4m { --card-glow: rgba(48, 115, 184, .42); --card-line: rgba(218, 174, 74, .72); --card-shadow: rgba(20, 62, 114, .28); }
.business-watermark { position: absolute; z-index: -1; right: -2%; top: 50%; width: 46%; max-height: 84%; object-fit: contain; transform: translateY(-50%) scale(.92); opacity: .09; filter: grayscale(1); transition: opacity .35s ease, transform .35s ease, filter .35s ease; }
.business-card:hover .business-watermark, .business-card:focus-visible .business-watermark, .business-card.is-lit .business-watermark { opacity: .3; transform: translateY(-50%) scale(1); filter: grayscale(0) saturate(1.2) drop-shadow(0 0 18px var(--card-line)); }
.business-card span { color: var(--copper-light); font-size: 10px; }
.business-card strong { font-size: clamp(24px, 2.6vw, 37px); line-height: 1.02; margin: 28px 0 18px; max-width: 70%; }
.business-card em { font-size: 10px; }
.business-tags { max-width: 72%; color: #b8bdc0 !important; }

@media (max-width: 920px) {
  .reel-stage { grid-template-columns: 1fr; }
  .reel-feature { min-height: 620px; }
  .reel-strip { grid-template-columns: repeat(3, 1fr); grid-template-rows: 230px; }
}

@media (max-width: 560px) {
  .reel-feature { min-height: 540px; }
  .reel-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .reel-tile { flex: 0 0 82%; height: 220px; scroll-snap-align: start; }
  .reel-cta { display: block; line-height: 1.6; }
  .reel-cta strong { display: block; margin-top: 5px; }
  .business-card { min-height: 210px; }
  .business-card strong { max-width: 75%; }
}