/* Roofing workshop story: an opaque, inset card over the original photograph. */
@media screen {
  .roofing-site .story {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:grid;
    grid-template-columns:1fr;
    min-height:clamp(520px,42vw,680px);
    background:#e9eee4;
  }
  .roofing-site .story > img.workshop-forklift {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-height:0;
    max-height:none;
    object-fit:cover;
    object-position:50% 55%;
    z-index:0;
  }
  .roofing-site .story .story-copy {
    position:relative;
    z-index:2;
    justify-self:end;
    align-self:center;
    width:42%;
    max-width:600px;
    margin:clamp(32px,4vw,64px);
    padding:clamp(28px,3.2vw,48px);
    background:#f8f6ef;
    border:1px solid #d4d8cb;
    border-radius:2px;
    box-shadow:0 8px 24px rgba(17,32,22,.12);
  }
  .roofing-site .story .story-copy p:not(.eyebrow) { color:#294638; }
}

@media screen and (max-width:800px) {
  /* Keep the whole photo and inset the opaque card across its lower edge. */
  .roofing-site .story { display:block; min-height:0; }
  .roofing-site .story > img.workshop-forklift {
    position:static;
    width:100%;
    height:auto;
    min-height:0;
    max-height:none;
    object-fit:contain;
  }
  .roofing-site .story .story-copy {
    width:auto;
    max-width:none;
    margin:-32px clamp(18px,5vw,32px) 24px;
    padding:28px 24px;
  }
}