/* An independent grid row centers the cue across the full hero without overlays. */
.roofing-site .roofing-hero:not([data-gallery]) {
  display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(min-content,1fr) auto;
  row-gap:24px; align-items:end;
}
.roofing-site .roofing-hero > .hero-copy {grid-row:1;justify-self:start}
.roofing-site .homepage-scroll-cue {
  grid-row:2; justify-self:center; display:flex; flex-direction:column;
  align-items:center; gap:10px; width:fit-content;
  min-height:44px; max-width:100%; margin:0; padding:6px 12px;
  color:#fff; font-size:17px; line-height:1.4; font-weight:600;
  text-align:center; text-decoration:none;
}
.roofing-site .homepage-scroll-cue-arrow {
  display:inline-grid; place-items:center; flex:none;
  width:64px; height:64px; border:2px solid currentColor; border-radius:50%;
  font-size:42px; line-height:1;
}
.roofing-site .slash-ready .homepage-scroll-cue {opacity:var(--slash-copy)}
.roofing-site .homepage-scroll-cue:hover span:last-child {text-decoration:underline}
.roofing-site .homepage-scroll-cue:focus-visible {outline:3px solid #fff;outline-offset:4px;border-radius:3px}
@keyframes homepage-cue-nudge {0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:no-preference) {
  html:has(.homepage-scroll-cue) {scroll-behavior:smooth}
  .roofing-site .homepage-scroll-cue.cue-pulse .homepage-scroll-cue-arrow {animation:homepage-cue-nudge 2.5s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce) {
  html:has(.homepage-scroll-cue) {scroll-behavior:auto!important}
  .roofing-site .homepage-scroll-cue-arrow {animation:none!important;transform:none!important}
}
@media (max-width:760px) {
  .roofing-site .roofing-hero:not([data-gallery]) {row-gap:20px}
  .roofing-site .homepage-scroll-cue {font-size:16px}
  .roofing-site .homepage-scroll-cue-arrow {width:56px;height:56px;font-size:38px}
}