/* One opening rhythm for every page: the same space between the navigation and
   the first line of text, and hero illustrations that start level with the text
   instead of centring against it. Loaded last on every page. */
:root {
  --hero-top: clamp(40px, 4.5vw, 64px);
}

/* The element that owns the space above the hero text. */
main :is(
  .sw-hero > .wrap[class*="-opening"],
  .sw-hero.sw-uitstel-hero, .sw-hero.sw-suppletie-hero,
  .sw-hero.sw-deposit-hero, .sw-hero.sw-btw-hero,
  .k-article > .k-hero.wrap, .k-library > .k-library-hero,
  .lp > .lp-hero, .offices-story > .offices-hero,
  .advisor-page > .ad-hero, .connections > .cn-hero,
  .brand-home > .brand-hero.home-hero,
  .bespoke > section.dm-intro, .bespoke > section.sl-hero,
  .bespoke > section.sc-hero, .bespoke > section.pl-intro,
  .bespoke > section.nx-hero, .bespoke > section.mg-hero,
  .bespoke > section.fo-hero, .bespoke > section.cv-hero,
  .bespoke > section.cl-hero,
  .price-hero .price-hero-grid,
  .tool-design > section:first-child
) {
  padding-top: var(--hero-top);
}

/* Text beside an illustration: both start on the same line. */
main :is(
  .sw-hero > .wrap[class*="-opening"],
  .k-article > .k-hero.wrap, .k-library-hero .k-library-opening,
  .lp-hero .lp-opening, .offices-hero .offices-hero-grid,
  .ad-hero .ad-hero-grid, .cn-hero .cn-hero-grid,
  .bespoke > section.sc-hero > .wrap, .bespoke > section.sl-hero,
  .bespoke > section.cv-hero, .bespoke > section.cl-hero,
  .price-hero .price-hero-grid,
  .tool-design > section.td-vpb-hero, .tool-design > section.td-vies-hero,
  .tool-design > section.td-recon-hero, .tool-design > section.td-planning-hero,
  .tool-design > section.td-icp-hero, .td-intake-hero .td-intake-hero-grid
) {
  align-items: start;
}

/* Illustrations that centred themselves with auto margins or absolute offsets. */
main .td-vies-hero .td-vies-batch { margin-block: 0; }
@media (min-width: 1100px) {
  html.js main .home-hero .brand-stage {
    top: var(--hero-top);
    translate: none;
  }
}