/* Real content stays in normal flow without JavaScript or with reduced motion. */
.roofing-slash-panels {display:none}
@media (min-height:540px) and (prefers-reduced-motion:no-preference) {
  .roofing-opening.slash-ready {
    --slash-open:0;
    --slash-copy:1;
    --slash-reveal:0;
    position:relative;
    background:var(--cream,#f8f6ef);
  }
  .slash-ready::after {content:"";display:block;height:100svh}
  .slash-ready .roofing-opening-stage {position:sticky;top:0;isolation:isolate}
  .slash-ready .roofing-hero:not([data-gallery]) {
    position:absolute;inset:0 0 auto;z-index:3;
    height:100svh;min-height:0;max-height:none;
    overflow:hidden;background:transparent;
    padding:clamp(44px,8svh,80px) 8vw;
  }
  .slash-ready .roofing-hero>img,
  .slash-ready .roofing-hero::after {display:none}
  .slash-ready .roofing-slash-panels {display:block;position:absolute;inset:0;z-index:-1;pointer-events:none}
  .slash-ready .roofing-slash-panel {position:absolute;inset:0;will-change:transform}
  .slash-ready .roofing-slash-panel img {width:100%;height:100%;object-fit:cover;object-position:center 42%}
  .slash-ready .roofing-slash-panel::after {
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(6,30,30,.73),rgba(6,30,30,.13)),linear-gradient(0deg,rgba(6,30,30,.4),transparent 70%);
  }
  .slash-ready .roofing-slash-left {
    clip-path:polygon(0 0,68.1% 0,32.1% 100%,0 100%);
    transform:translate3d(calc(var(--slash-open) * -72vw),calc(var(--slash-open) * -12svh),0);
  }
  .slash-ready .roofing-slash-right {
    clip-path:polygon(68% 0,100% 0,100% 100%,32% 100%);
    transform:translate3d(calc(var(--slash-open) * 72vw),calc(var(--slash-open) * 12svh),0);
  }
  .slash-ready .roofing-hero .hero-copy {
    opacity:var(--slash-copy);
    transform:translate3d(calc((1 - var(--slash-copy)) * -36px),0,0);
  }
  .slash-ready .roofing-opening-content {
    opacity:var(--slash-reveal);
    transform:translateY(calc((1 - var(--slash-reveal)) * 36px));
  }
  .slash-opening .roofing-hero {pointer-events:none}
  .slash-cleared .roofing-hero {visibility:hidden}
}

@media (max-width:760px) and (min-height:540px) and (prefers-reduced-motion:no-preference) {
  .slash-ready::after {height:75svh}
  .slash-ready .roofing-hero:not([data-gallery]) {align-items:center;padding:28px 26px 120px}
  .slash-ready .roofing-hero .hero-copy {width:100%;max-width:540px}
  .slash-ready .roofing-hero h1 {font-size:clamp(38px,10vw,62px)}
  .slash-ready .roofing-hero .hero-description {margin-bottom:24px}
  .slash-ready .roofing-hero .actions {gap:10px}
  .slash-ready .roofing-hero .button {min-height:48px}
  .slash-ready .roofing-hero .experience-note {margin-top:22px}
}