/* Homepage hero: two slides, changed by tapping/clicking the left or right side (no arrows).
   Slide 1 = "Outdoor Living Experts" over a single photo. Slide 2 = "Colorado Living Redefined" over the
   putting-green-at-sunset photo. Slide 2 is a layer on top of slide 1 so both share the same layout. */
body.home-page .hero.hero-slides{cursor:pointer;-webkit-tap-highlight-color:transparent}
body.home-page .hero.hero-slides :is(a,button){cursor:pointer}

/* slide 1 elements fade out while slide 2 is showing */
body.home-page .hero-slides>.hero-copy,body.home-page .hero-slides>.hero-photo-consult{transition:opacity .7s ease}
body.home-page .hero-slides.on-2>.hero-copy,body.home-page .hero-slides.on-2>.hero-photo-consult{opacity:0;pointer-events:none}

/* slide 2 layer */
body.home-page .hero-slide2{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s;background:#122e29;overflow:hidden}
body.home-page .hero-slides.on-2 .hero-slide2{opacity:1;visibility:visible;transition:opacity .8s ease,visibility 0s}
body.home-page .hero-slide2>.hero-copy{position:relative;z-index:2;flex:1}
/* headline matches slide 1's h1 (exact size is copied from it by hero-slides.js) */
body.home-page .hero .hero-title{font-size:clamp(60px,7.4vw,112px);line-height:.99;font-weight:900;letter-spacing:-1px;margin:0 0 27px;color:inherit;text-align:center;text-shadow:0 2px 8px rgb(0 0 0 / 55%)}
body.home-page .hero .hero-title .h1-line{display:block}
body.home-page .hero .hero-title .h1-line-leaf{display:flex;align-items:center;justify-content:center;gap:.22em}
@media(max-width:760px){body.home-page .hero .hero-title{font-size:clamp(28px,9.8vw,44px);line-height:1.04;white-space:nowrap;margin-bottom:14px}}

/* two buttons where slide 1 has "Schedule a Consult" */
body.home-page .hero-duo{position:absolute;left:50%;bottom:82px;z-index:3;transform:translateX(-50%);display:flex;gap:12px;white-space:nowrap}
body.home-page .hero-duo .button{background:transparent;color:var(--cream);border:1px solid var(--cream);padding:12px 23px;min-height:44px;font-size:14px;line-height:1.4;text-shadow:none;box-shadow:none;transition:background .25s,color .25s}
body.home-page .hero-duo .button:hover{background:var(--cream);color:#122e29}
@media(max-width:760px){body.home-page .hero-duo{bottom:78px;gap:8px}body.home-page .hero-duo .button{padding:11px 14px;font-size:13px;min-height:42px}}


/* slide 2 photo, under the same shade as slide 1 */
body.home-page .hero-slide2-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
body.home-page .hero-slide2>.shade{z-index:1}

/* slide indicators (not arrows): two short bars */
body.home-page .hero-dots{position:absolute;left:50%;bottom:40px;z-index:4;transform:translateX(-50%);display:flex;gap:8px}
body.home-page .hero-dots button{width:26px;height:4px;padding:0;border:0;border-radius:4px;background:rgb(255 255 204 / 40%);transition:background .3s,width .3s}
body.home-page .hero-dots button[aria-current="true"]{width:40px;background:var(--cream)}
body.home-page .hero-dots button:focus-visible{outline:2px solid var(--cream);outline-offset:4px}
@media(max-width:760px){body.home-page .hero-dots{bottom:36px}}

/* keep "Excellence Since 2005" above both slides */
body.home-page .hero-slides .hero-foot{z-index:4}

@media(prefers-reduced-motion:reduce){body.home-page .hero-slide2,body.home-page .hero-slides>.hero-copy{transition:none}}

/* "New on the blog" ticker just under the header: label stays put, latest article titles scroll; pauses on hover/focus */
body.home-page .blog-ticker{position:absolute;left:0;right:0;top:var(--hdr,100px);z-index:5;display:flex;align-items:stretch;height:36px;background:rgb(10 22 17 / 72%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgb(255 255 204 / 14%);font-size:13.5px;cursor:auto}
body.home-page .ticker-label{flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;background:#28675b;color:#fffde6;font-family:var(--font-pencil);font-size:16px;text-decoration:none;white-space:nowrap;position:relative}
body.home-page .ticker-label::before{content:"";width:7px;height:7px;border-radius:50%;background:#a6e0c6;box-shadow:0 0 0 0 rgb(166 224 198 / 60%);animation:ticker-ping 2s ease-out infinite}
body.home-page .ticker-label::after{content:"";position:absolute;right:-12px;top:0;bottom:0;width:12px;background:linear-gradient(90deg,#28675b,transparent)}
body.home-page .ticker-window{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)}
body.home-page .ticker-track{display:flex;width:max-content;height:100%;animation:ticker-scroll 38s linear infinite}
body.home-page .blog-ticker:is(:hover,:focus-within) .ticker-track{animation-play-state:paused}
body.home-page .ticker-set{display:flex;align-items:center;flex:none}
body.home-page .ticker-item{display:inline-flex;align-items:center;gap:10px;padding:0 18px;color:#fffde6;text-decoration:none;white-space:nowrap;font-weight:600}
body.home-page .ticker-item:hover{color:#a6e0c6}
body.home-page .ticker-cta{color:#a6e0c6;font-weight:800}
body.home-page .ticker-dot{color:#a6e0c6;opacity:.7;font-size:11px}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ticker-ping{0%{box-shadow:0 0 0 0 rgb(166 224 198 / 60%)}80%,100%{box-shadow:0 0 0 7px rgb(166 224 198 / 0)}}
@media(max-width:760px){body.home-page .blog-ticker{height:34px;font-size:12.5px}body.home-page .ticker-label{font-size:14px;padding:0 12px}body.home-page .ticker-track{animation-duration:30s}}
@media(prefers-reduced-motion:reduce){body.home-page .ticker-track{animation:none}body.home-page .ticker-window{overflow-x:auto}body.home-page .ticker-label::before{animation:none}}

/* Desktop: slide 1's headline is centred in the open space between the blog ticker and the buttons
   (replaces the old fire pit alignment, which pushed it up under the ticker on wide screens).
   Slide 2 keeps its "Landscape · Design · Construction" line level with slide 1's (set by hero-slides.js). */
@media(min-width:761px){
  body.home-page .hero.hero-slides>.hero-copy{justify-content:center;padding-top:calc(var(--hdr,100px) + 56px);padding-bottom:150px}
  body.home-page .hero.hero-slides .hero-slide2>.hero-copy{justify-content:flex-end;padding-top:calc(var(--hdr,100px) + 56px);padding-bottom:var(--sub-gap,150px)}
}