/* Tree Wisemen homepage extras (tw_home.py) */
.brand img { height: 52px; width: auto; }
.hdr.is-stuck .brand img { height: 46px; }
/* hero = their best Facebook photos (owner 11/4: "the video in the hero sucks"): crane trucks on desktop, their truck on phones */
.hero { background: #072014 url("/assets/hero-tw-photo-d.jpg") 50% 35% / cover no-repeat; }
.hero::before { height: 100%; background: linear-gradient(90deg, rgba(7, 32, 20, 0.86) 0%, rgba(7, 32, 20, 0.6) 45%, rgba(7, 32, 20, 0.25) 100%); }
@media (max-width: 860px) {
  .hero { background-image: url("/assets/hero-tw-photo-m.jpg"); background-size: 100% auto; background-position: center top; }
  .hero::before { height: calc(100vw * 16 / 9); background: linear-gradient(180deg, rgba(7, 32, 20, 0.6) 0%, rgba(7, 32, 20, 0.45) 40%, rgba(7, 32, 20, 0.75) 80%, #072014 100%); }
}
.hero .lede b { color: #B4DA57; }
.tw-textbtn { grid-column: 1 / -1; width: 100%; background: transparent; color: var(--ink); border: 1.5px solid rgba(7, 32, 20, 0.22); gap: 0.5rem; }
.tw-textbtn:hover { border-color: #4E7417; color: #4E7417; }
.tw-storm__in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.tw-storm__in h2 { margin-top: 0.4rem; }
.tw-storm__in .intro { max-width: 40rem; }
.costs .chips { margin-top: 0.6rem; }
/* their job videos: portrait tiles, tap to play */
.tw-vids { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.tw-vid { margin: 0; position: relative; border-radius: var(--radius, 14px); overflow: hidden; background: #072014; }
.tw-vid video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.tw-vid__play { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(159, 203, 56, 0.95); color: #072014; display: grid; place-items: center; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }
.tw-vid.is-playing .tw-vid__play { opacity: 0; pointer-events: none; }
.tw-vid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 0.8rem 0.7rem; font-size: 0.85rem; line-height: 1.3; color: #fff;
  background: linear-gradient(180deg, rgba(7, 32, 20, 0) 0%, rgba(7, 32, 20, 0.85) 100%); }
.tw-social { margin-top: 1.1rem; color: var(--ink-soft, #3a4a3f); font-size: 0.95rem; }
.tw-social a { color: #4E7417; font-weight: 600; }
@media (max-width: 1040px) { .tw-vids { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tw-vid:nth-child(n+4) { display: none; } }
@media (max-width: 860px) { .tw-vids { display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; }
  .tw-vid { flex: 0 0 62vw; scroll-snap-align: start; display: block; } .tw-vid:nth-child(n+4) { display: block; } }
@media (max-width: 560px) { .brand img { height: 44px; } .tw-storm__in .ctas { width: 100%; } .tw-storm__in .ctas .btn { flex: 1; } }