/* =================== */
/* Mobile optimisation */
/* =================== */

@media (max-width: 900px) {
  body[data-view="graphic"] #purpose,
  body[data-view="graphic"] #identity,
  body[data-view="graphic"] #priorities,
  body[data-view="graphic"] #imperatives {
    grid-template-columns: 1fr;
  }

  body[data-view="graphic"] .section-text {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-view="graphic"] .section-image {
    grid-column: 1;
    grid-row: 2;
    min-height: 18rem;
  }

  body[data-view="graphic"] #impact ul,
  body[data-view="graphic"] #whoweserve ul {
    grid-template-columns: 1fr;
    gap: 0rem;
    margin: 0;
  }

  body[data-view="graphic"] #purpose .section-text,
  body[data-view="graphic"] #identity .section-text,
  body[data-view="graphic"] #priorities .section-text,
  body[data-view="graphic"] #imperatives .section-text {
    grid-column: 1;
    grid-row: 1;
  }

  body[data-view="graphic"] #purpose .section-image,
  body[data-view="graphic"] #identity .section-image,
  body[data-view="graphic"] #priorities .section-image,
  body[data-view="graphic"] #imperatives .section-image {
    display: block;
    grid-column: 1;
    grid-row: 2;
    min-height: 18rem;
  }

body[data-view="graphic"] .imperatives-grid {
    grid-template-columns: 1fr;
  }

  #title,
  #title.hero {
    position: static !important;
    min-height: 0 !important;
    width: auto !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  .hero__content {
    position: static !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .title-strategy,
  .title-year {
    display: inline !important;
    background: transparent !important;
    padding: 0 !important;
  }

  .hero__image,
  .hero__shape {
    display: none !important;
  }

    
  .viewbar__inner {
    justify-content: space-between;
  }

  .viewbar__controls {
    position: relative;
    margin-left: auto;
  }

  .viewbar__menu-button {
    display: inline-block;
    appearance: none;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font: inherit;
    cursor: pointer;
  }

  .viewbar__menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    min-width: 16rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow);
  }

  .viewbar__controls.is-open .viewbar__menu {
    display: block;
  }

  .viewbar__label {
    display: block;
    margin: 0 0 0.75rem 0;
  }

  .viewbar__list {
    display: grid;
    gap: 0.5rem;
  }

  .viewbar__button {
    width: 100%;
    text-align: left;
  }
}