/* Match the header and footer slashes by angle, not by a fixed pixel cut.
   Skew depends on element height, so the angle stays constant under browser zoom. */
@media (min-width:1024px) {
  #iutil { overflow:hidden; }
  #iutil .iutil-light {
    clip-path:none;
    transform-origin:top left;
    transform:skewX(-20deg);
  }
  .imd-f-light {
    clip-path:none;
    transform-origin:top left;
    transform:translateX(-100%) skewX(-20deg);
  }
  .imd-footer.imd-f-in .imd-f-light {
    transform:translateX(0) skewX(-20deg);
  }
}
/* Keep the diagonal through normal desktop zoom levels. At narrower widths
   use two link columns so the brand remains clear of the slanted edge. */
@media (min-width:1024px) and (max-width:1279px) {
  .imd-f-grid {
    grid-template-columns:minmax(290px,34%) minmax(0,1fr);
    gap:clamp(90px,10vw,130px);
  }
  .imd-f-brand {
    grid-column:1;
    background:transparent;
    padding:0 12px 0 0;
    border-radius:0;
    margin:0;
  }
  .imd-f-links {
    grid-column:2;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 24px;
  }
  .imd-f-light {
    display:block;
    width:calc(24px + 34% + 54px);
  }
}