/* Give the entire industry copy column and its buttons room before the diagonal.
   Move the panel edge, leaving the photograph's size and crop unchanged. */
@media screen and (min-width:701px) {
    .ts-hero-stage:before {
        clip-path:polygon(0 0,62% 0,50% 100%,0 100%);
    }
}

/* Match the stacked composition to the copy column's mobile breakpoint. */
@media screen and (max-width:700px) {
    .ts-hero-inner { padding-bottom:234px; }
    .ts-hero-photo { inset:auto 0 0;height:240px; }
    .ts-hero-stage:before {
        clip-path:none;
        background:linear-gradient(180deg,#092333 0,#092333 calc(100% - 240px),#09233300 calc(100% - 170px));
    }
    .ts-hero-stage:after { display:none; }
}

/* Keep the photographic composition stable beyond desktop widths. The navy
   background can fill the screen; the subject should not keep growing with it.
   Existing stacked phone/tablet layouts stay in their page stylesheets. */
@media screen and (min-width:1101px) {
    :is(.ta-hero,.tw-feature-hero,.rd-hero,.pi-hero,.ct-hero,.tn-hero,.tg-hero,.tg-help-banner) {
        --banner-gutter:max(0px,calc((100% - 1840px)/2));
    }

    :is(.ta-hero-photo,.tw-hero-photo,.rd-hero-photo,.pi-hero-photo,.ct-hero-photo,.tn-hero-photo,.tg-hero-photo,.tg-help-photo) {
        left:auto;
        right:var(--banner-gutter);
        width:min(74%,1200px);
    }

    /* The building needs a near-landscape window to retain the entrance,
       foreground sign and roof together. */
    .ta-hero-photo { width:min(60%,1040px); }
    .ta-hero-photo img { object-position:center 48%; }
    .tw-hero-photo img { object-position:center 62%; }
    .ct-hero-photo { width:min(71%,1000px); }
    .ct-hero-photo img { object-position:center 45%; }
    .tg-hero-photo { width:min(61%,1050px); }
    .tg-help-photo { width:min(55%,900px); }

    :is(.ta-hero-photo,.tw-hero-photo,.rd-hero-photo,.pi-hero-photo,.ct-hero-photo,.tn-hero-photo,.tg-help-photo) {
        mask-image:linear-gradient(90deg,transparent,#000 12%);
    }

    /* Anchor the copy's shading/diagonal to the same bounded scene. */
    .ta-hero:after,.tw-feature-hero:after,.rd-hero:before,.rd-hero:after,
    .pi-hero:before,.pi-hero:after,.ct-hero:before,.tn-hero:after,
    .tg-hero:after,.tg-help-banner:after {
        left:var(--banner-gutter);
        right:var(--banner-gutter);
    }
}

@media screen and (min-width:1841px) {
    .ta-hero:after,.tw-feature-hero:after,.rd-hero:before,.rd-hero:after,
    .pi-hero:before,.pi-hero:after,.ct-hero:before,.tn-hero:after,
    .tg-hero:after,.tg-help-banner:after {
        mask-image:linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent);
    }
    :is(.ta-hero-photo,.tw-hero-photo,.rd-hero-photo,.pi-hero-photo,.ct-hero-photo,.tn-hero-photo,.tg-help-photo) {
        mask-image:linear-gradient(90deg,transparent,#000 12%,#000 90%,transparent);
    }
}