/* ==========================================================================
   Phones and small tablets. Everything except the hidden menu button sits
   inside the media query, so the desktop layout stays exactly as it is.
   ========================================================================== */

.menu-toggle { display: none; }

/* Header: from tablet width down the navigation no longer fits in one row,
   so logo and menu button share one row and the navigation folds out below */
@media (max-width: 1080px) {
  /* same height and rail divider as the desktop header while the left column is there */
  .site-header__bar { flex-wrap: wrap; min-height: 76px; }
  .site-header__brand { align-self: stretch; display: flex; align-items: center; box-shadow: 1px 0 0 var(--c-line); }
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-left: auto;
    margin-right: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--c-text-strong);
    cursor: pointer;
  }
  .menu-toggle span { display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
  .site-header.is-open .menu-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .site-header.is-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .site-header.is-open .menu-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .menu-toggle:focus-visible { outline: 2px solid var(--c-text-strong); outline-offset: -2px; }

  .topnav { display: none; }
  .site-header.is-open .topnav {
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 16px 20px;
    border-left: 0;
    border-top: 1px solid var(--c-line);
    white-space: normal;
    overflow: visible;
    font-size: 14px;
  }
  .site-header.is-open .topnav__link { min-height: 48px; border-bottom: 1px solid var(--c-line); }
  .site-header.is-open .topnav__cta { margin: 16px 0 0; justify-content: center; min-height: 48px; }
}

@media (max-width: 760px) {

  /* Header: compact once the left column is gone */
  :root { --header-h: 61px; }
  .site-header__bar { min-height: 0; }
  .site-header__brand { flex: 1 1 auto; padding: 16px; box-shadow: none; }

  /* "Ausgewählte Projekte": as much space below the label as above it */
  #usecases > .rail { padding-bottom: 24px; }

  /* Framework: no light running around the ring on phones */
  .orbit__glow, .node__icon::after { display: none; }

  /* Framework: pinned and built step by step while scrolling, like on desktop */
  .orbit-wrap {
    --orbit-h: 390px;
    --orbit-top: clamp(110px, calc(50svh - 150px), 400px);
    height: 1150px;
  }
  .orbit-pin { position: sticky; top: var(--orbit-top); }

  /* Chart: pinned and drawn while scrolling, like on desktop (about 640px of scrolling for the full line) */
  .chart-wrap { height: 900px; }
  .chart-pin { position: sticky; top: clamp(110px, calc(50svh - 140px), 400px); }

  /* Cards are not stacked on phones */
  /* cards stack while scrolling, like on desktop; the top offset comes from main.js */
  .card { position: sticky; top: var(--card-top, calc(var(--header-h) - 1px)); }

  /* Grids reach the edges: the empty hero rail goes, the "Ansatz" grid also runs behind its label */
  #top > .rail { display: none; }
  #ansatz .rail { position: relative; z-index: 1; }
  #ansatz .grid-track { top: -38px; }

  /* Hero */
  .hero-band { padding: 56px 16px 40px; height: calc(100vh * 4 / 5); height: calc(100svh * 4 / 5); }   /* four fifths of the screen on phones */
  .hero-title { font-size: 46px; line-height: 1.04; }
  .hero-lead { margin-top: 20px; font-size: 17px; }
  .chart-wrap { margin-top: 40px; }

  /* Headings and statements */
  .h-section { font-size: 32px; line-height: 1.1; }
  .h-section__sub { display: inline-block; margin-top: 10px; font-size: 21px; line-height: 1.25; }
  .statements { margin-top: 48px; gap: 32px; }
  .statement { font-size: 21px; line-height: 1.22; }
  .statement--spaced { margin-top: 48px; }
  .h-lead { font-size: 22px; line-height: 1.2; padding-right: 16px; }

  /* Framework */
  .orbit-wrap { margin-top: 32px; }
  .node__label { font-size: 10px; padding: 2px 4px; }
  .tip { width: min(280px, calc(100vw - 48px)); }

  /* Logo band */
  .logo-band { margin-top: 40px; margin-left: -16px; }   /* runs to the left screen edge like on the right */
  .logo-band__item { height: 52px; padding: 0 18px; }
  .logo--mckinsey { height: 24px; }
  .logo--bain { height: 23px; }
  .logo--tum { height: 20px; }
  .logo--oxford { height: 29px; }
  .logo--rwth { height: 25px; }
  .logo--uc-davis { height: 44px; }
  .logo--ucl { height: 24px; }

  /* Cases */
  .card { padding-top: 40px; padding-bottom: 48px; gap: 20px; }
  .card__title { flex-basis: 100%; font-size: 24px; }
  .card__body { flex-basis: 100%; }
  .impact__value { font-size: 36px; }

  /* Footer */
  .site-footer__main { gap: 8px 20px; }
}