/* Hero slider — preview build 2026-11-05 v4 flush under header + headline full column */
.hero-slider{position:relative;background:var(--panel);color:var(--panel-ink);overflow:hidden;padding:0;margin:0}
.hero-slider .hero-slides{position:relative}
.hero-slider .hero-slide{display:none}
.hero-slider .hero-slide.is-active{display:block}
.hero-slider .hero-slide[hidden]{display:none!important}
.hero-slider .hero-slide.is-active[hidden]{display:block!important}
.hero-slider .hero{padding-block:0;padding-bottom:56px;margin:0}
.hero-slider > .hero-slides > .hero-slide > .hero{padding-top:0}
.hero-slider-controls{position:absolute;left:0;right:0;bottom:12px;z-index:4;display:flex;align-items:center;justify-content:center;gap:14px;pointer-events:none}
.hero-slider-controls > *{pointer-events:auto}
.hero-slider-btn{appearance:none;border:0;background:rgba(0,0,0,.45);color:#fff;width:40px;height:40px;border-radius:999px;cursor:pointer;font:700 1.1rem/1 var(--f-display);line-height:1}
.hero-slider-btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.hero-slider-dots{display:flex;gap:8px}
.hero-slider-dot{appearance:none;border:0;width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.hero-slider-dot[aria-current=true]{background:var(--orange)}
.hero-slider-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Full-bleed photo slides */
.hero-bleed{position:relative;min-height:560px;display:flex;align-items:stretch;padding:0;overflow:hidden;background:#0a1a1e}
.hero-bleed-media{position:absolute;inset:0;z-index:0}
.hero-bleed-media picture,.hero-bleed-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 50%}
.hero-bleed-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(6,18,22,.9) 0%, rgba(6,18,22,.78) 28%, rgba(6,18,22,.5) 48%, rgba(6,18,22,.18) 68%, rgba(6,18,22,0) 86%),
    linear-gradient(0deg, rgba(6,18,22,.58) 0%, rgba(6,18,22,0) 40%)}
.hero-bleed.hero-hfc .hero-bleed-shade{
  background:
    linear-gradient(90deg, rgba(4,8,14,.92) 0%, rgba(4,8,14,.8) 30%, rgba(4,8,14,.48) 50%, rgba(4,8,14,.16) 70%, rgba(4,8,14,0) 88%),
    linear-gradient(0deg, rgba(4,8,14,.62) 0%, rgba(4,8,14,0) 42%)}
.hero-bleed.hero-bf .hero-bleed-shade{
  background:
    linear-gradient(90deg, rgba(10,6,14,.92) 0%, rgba(10,6,14,.78) 34%, rgba(10,6,14,.45) 54%, rgba(10,6,14,.14) 74%, rgba(10,6,14,0) 90%),
    linear-gradient(0deg, rgba(10,6,14,.6) 0%, rgba(10,6,14,0) 40%)}
.hero-bleed-inner{position:relative;z-index:2;display:flex;align-items:center;width:100%;min-height:560px;padding:56px 56px 76px max(20px,calc((100vw - 1160px)/2 + 20px))}
.hero-bleed .hero-copy{
  max-width:min(680px, 100%);
  width:100%;
  gap:18px;
  padding:0; /* override base .hero-copy side padding that collapses wide viewports */
  position:relative;
  z-index:1;
  box-sizing:border-box;
}
.hero-bleed .hero-copy .eyebrow{color:#FFD28A}
.hero-bleed .hero-copy h1{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);max-width:none;width:100%}
.hero-bleed .hero-copy .lede{color:#E8F2F4;text-shadow:0 1px 2px rgba(0,0,0,.35);max-width:68ch;width:100%}
.hero-bleed .btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.hero-bleed .hero-stats{display:flex;gap:28px;flex-wrap:wrap;padding-top:6px;border-top:1px solid rgba(255,255,255,.18);max-width:65ch}
.hero-bleed .hero-stats div{display:flex;flex-direction:column;gap:2px;padding-top:14px}
.hero-bleed .hero-stats b{font:800 1.5rem/1 var(--f-display);color:#fff}
.hero-bleed .hero-stats span{font-size:.88rem;color:#BCD7DD}
.hero-bleed .hero-note{font-size:.82rem;color:#BCD7DD;max-width:65ch}
.hero-bleed .hero-note a{color:#fff}
.hero-bleed .hero-caption{font-size:.75rem;color:rgba(207,228,232,.75);max-width:65ch;margin:0}

/* Hub page bleed hero (Smart Garden) */
.hub-hero-bleed{position:relative;min-height:340px;overflow:hidden;background:#0a1a1e;margin:0}
.hub-hero-bleed .hero-bleed-media{position:absolute;inset:0}
.hub-hero-bleed .hero-bleed-media picture,.hub-hero-bleed .hero-bleed-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:78% 45%}
.hub-hero-bleed .hero-bleed-shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(6,18,22,.9) 0%, rgba(6,18,22,.65) 40%, rgba(6,18,22,.2) 70%, transparent 100%),
             linear-gradient(0deg, rgba(6,18,22,.45) 0%, transparent 45%)}
.hub-hero-bleed .hub-hero-inner{position:relative;z-index:2;padding:48px 20px 40px;max-width:1160px;margin:0 auto}
.hub-hero-bleed .hub-hero-inner .stack{max-width:680px}
.hub-hero-bleed .hub-hero-inner .lede{max-width:65ch}
.hub-hero-bleed .hub-hero-inner .crumbs a{color:#CFE4E8}
.hub-hero-bleed .hub-hero-inner .eyebrow{color:#FFD28A}
.hub-hero-bleed .hub-hero-inner h1{color:#fff}
.hub-hero-bleed .hub-hero-inner .lede{color:#E8F2F4}

@media (max-width:860px){
  .hero-slider .hero{padding-bottom:64px}
  .hero-bleed{min-height:520px}
  .hero-bleed-inner{min-height:520px;padding:36px 20px 80px}
  .hero-bleed-media picture,.hero-bleed-media img{object-position:82% 50%}
  .hub-hero-bleed{min-height:280px}
  .hub-hero-bleed .hero-bleed-media picture,.hub-hero-bleed .hero-bleed-media img{object-position:85% 50%}
}
@media (min-width:1280px){
  .hero-bleed .hero-copy{max-width:660px}
}
@media (min-width:1440px){
  .hero-bleed .hero-copy{max-width:680px}
}
@media (min-width:1920px){
  .hero-bleed .hero-copy{max-width:680px}
}
@media (prefers-reduced-motion:reduce){
  .hero-slider *{transition:none!important;animation:none!important}
}