/* Tree Wisemen homepage extras (tw_home.py) */
.brand img { height: 52px; width: auto; }
.hdr .brand img, .hdr.is-stuck .brand img { height: 46px; }
/* announcement bar + nav stay put on scroll (owner 11/4) */
.topbar { position: sticky; top: 0; z-index: 51; }
.hdr { top: 38px; }
.quote { scroll-margin-top: 128px; }
section[id] { scroll-margin-top: 118px; }
@media (max-width: 860px) { .hdr .brand img, .hdr.is-stuck .brand img { height: 40px; } }
/* 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-climb-d.jpg") 50% 50% / 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-climb-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%); }
@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; } }

/* owner 11/9: "The list is too vertical". Phones: link lists and badges sit side by side instead of one long column. Every link stays. */
/* owner 11/9: "Show real icons and badges", "as symmetrical as you can": four identical tiles, each a link to the real profile */
.tw-social { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.1rem; }
.tw-badge { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 0.8rem 0.45rem 0.75rem; background: #fff; border: 1px solid #DADCE0; border-radius: 14px; color: #1E2A24; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.tw-badge:hover { border-color: #9FCB38; box-shadow: 0 6px 18px -12px rgba(7, 32, 20, 0.4); }
.tw-badge__logo { display: flex; align-items: center; justify-content: center; gap: 0.3rem; height: 40px; margin-bottom: 0.5rem; }
.tw-badge__logo img { display: block; width: auto; height: 40px; }
.tw-badge__logo img[src*="facebook"], .tw-badge__logo img[src*="instagram"] { height: 36px; }
.tw-badge b { font-size: 0.93rem; font-weight: 700; line-height: 1.2; }
.tw-badge small { margin-top: 0.12rem; font-size: 0.77rem; color: #5A665F; line-height: 1.25; }
@media (max-width: 860px) { .tw-social { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } }
/* owner 11/9: "Fix any cut off box": site.css zeroes the bottom border of the buttons in the phone menu, which cut the outlined Call button open */
.nav .nav__cta a.btn { border-bottom: 1px solid transparent; }
.nav .nav__cta a.btn--ghost { border-bottom-color: rgba(7, 32, 20, 0.3); }
/* every button pair keeps a gap: the storm section's two buttons stacked with no space between them on phones */
.ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; }
@media (max-width: 640px) {
  .chips:not(.towns) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .chips:not(.towns) .chip { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 0.4rem 0.55rem; border-radius: 12px; font-size: 0.84rem; line-height: 1.22; }
  .chips:not(.towns) .lbl { grid-column: 1 / -1; margin: 0; }
  .foot .top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.7rem 1.1rem; padding-top: 2.4rem; }
  .foot .top > div:nth-child(1), .foot .top > div:nth-child(4), .foot .top > div:nth-child(5) { grid-column: 1 / -1; }
  .foot .top > div:nth-child(4) ul, .foot .top > div:nth-child(5) ul { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.7rem; }
  .foot ul { gap: 0; }
  .foot ul a { padding: 0.36rem 0; line-height: 1.25; }
}

/* homepage hero: the climber fills it (owner 11/9). Left side stays dark for the headline, the middle opens up so he is bright. */
.hero:not(.hero--about)::before { background: linear-gradient(90deg, rgba(7, 32, 20, 0.84) 0%, rgba(7, 32, 20, 0.62) 34%, rgba(7, 32, 20, 0.2) 52%, rgba(7, 32, 20, 0.1) 100%); }
@media (max-width: 860px) { .hero:not(.hero--about)::before { background: linear-gradient(180deg, rgba(7, 32, 20, 0.6) 0%, rgba(7, 32, 20, 0.54) 44%, rgba(7, 32, 20, 0.26) 54%, rgba(7, 32, 20, 0.26) 70%, rgba(7, 32, 20, 0.78) 88%, #072014 100%); } }
/* tablets: the form starts higher up the photo, so slide the photo up to keep him above the form; the tint ends where the photo ends */
@media (min-width: 641px) and (max-width: 860px) { .hero:not(.hero--about) { background-position: center calc(100vw * -0.525); } .hero:not(.hero--about)::before { height: calc(100vw * 1.2533); max-height: none; } }
.work-grid { grid-auto-flow: dense; } /* a square tile backfills the hole a wide tile leaves on phones and tablets */