/*
 * Sticky header fix: the header takes zero layout height and the bar floats over
 * the page. Shrinking the logo on scroll therefore never changes page height or
 * scroll position, which was causing the flicker loop around the 40px threshold.
 * #main reserves the expanded header height (--header-h is measured in header.js).
 */
.site-header {
  height: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Side padding matches the page layout width (--wrap, 1100px) so the logo
   lines up with the left edge of headlines and text. */
.site-header__bar {
  position: absolute; top: 0; left: 0; right: 0;
  max-width: none; margin: 0;
  padding-top: 14px; padding-bottom: 10px;
  padding-left: max(24px, calc((100% - var(--wrap, 1100px)) / 2 + 24px));
  padding-right: max(24px, calc((100% - var(--wrap, 1100px)) / 2 + 24px));
  background: rgba(197, 204, 203, 0.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: padding-top 0.25s ease, padding-bottom 0.25s ease;
}

/* Slightly smaller logo at the top of the page so the hero fits higher */
.site-header .brand { width: 150px; }

#main { padding-top: var(--header-h, 142px); }
@media (max-width: 860px) {
  .site-header .brand { width: 120px; }
  #main { padding-top: var(--header-h, 120px); }
}

.site-header.is-measuring *,
.site-header.is-measuring { transition: none !important; }

/* ---------- Hero: tighter spacing so the Vancouver skyline shows above the fold ---------- */
.hero__text { padding-top: 16px; position: relative; z-index: 1; }
.hero h1 { margin-top: 10px; font-size: clamp(34px, 5vw, 58px); }
.hero__lead { margin-top: 14px; }
.hero__actions { margin-top: 20px; }
.hero__art { margin-top: -56px; }
@media (max-width: 860px) {
  .hero__art { margin-top: -20px; }
}

/* Downtown skyline (v2): long, eased fades at both ends.
   Top: the sky and upper mountains dissolve gradually into the hero background.
   Bottom: the busy foreground melts into the page. Fully opaque band: 44%-54%. */
.hero__art--v2 {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.25) 17%, rgba(0, 0, 0, 0.5) 26%, rgba(0, 0, 0, 0.78) 35%, #000 44%, #000 54%, rgba(0, 0, 0, 0.78) 63%, rgba(0, 0, 0, 0.5) 73%, rgba(0, 0, 0, 0.25) 83%, rgba(0, 0, 0, 0.08) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.08) 8%, rgba(0, 0, 0, 0.25) 17%, rgba(0, 0, 0, 0.5) 26%, rgba(0, 0, 0, 0.78) 35%, #000 44%, #000 54%, rgba(0, 0, 0, 0.78) 63%, rgba(0, 0, 0, 0.5) 73%, rgba(0, 0, 0, 0.25) 83%, rgba(0, 0, 0, 0.08) 92%, transparent 100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__bar { transition: none; }
}