/* Shared by the ported case-study pages: the "On this page" links (case.js marks the current one) */
.toc-link { display: block; padding: 7px 0 7px 12px; border-left: 2px solid transparent; font-size: 14px; text-decoration: none; color: #6e6e75; font-weight: 400; transition: color .2s, border-color .2s; }
.toc-link:hover { color: #0c0c0c; }
.toc-link.on { border-left-color: #0c0c0c; color: #0c0c0c; font-weight: 600; }

/* Case-study heroes: the hero runs 110px past the bottom of the screen, so only the top of the white curve shows. The artboards use 822px, a 1440x785 window. */
.cs-hero { height: calc(100svh + 37px) !important; min-height: 680px; max-height: 1110px; }

/* phones: the hero hugs its mockup instead of filling the screen, with a shallower curve */
@media (max-width: 700px) {
  .cs-hero { height: auto !important; min-height: 0; max-height: none; padding: 20px 16px 0 !important; }
  .cs-hero-media { padding-bottom: 44px !important; }
  .cs-hero-media[style*="end center"] { padding-bottom: 0 !important; }   /* Domino's: the cropped edge still runs under the curve */
  .cs-hero-media > img { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; }
  .cs-curve { height: 56px !important; }
  .qw-title, .om-title, .ah-title { font-size: 40px !important; overflow-wrap: anywhere; }   /* long words like "neighbourhood" fit the screen */
}