@media (max-width: 1120px) {
  .steps-grid,
  .cards-grid--triptych,
  .cards-grid--experiences,
  .thinker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feature--split,
  .experience-layout,
  .contact-layout,
  .cta-band__inner {
    grid-template-columns: 1fr;
  }

  .concept-signature__inner {
    grid-template-columns: 1fr;
  }

  .question-bridge__content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .profiles-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 860px) {
  :root {
    --shell: min(100% - 32px, 760px);
  }

  .site-header__inner {
    min-height: 64px;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% - 8px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    border: 1px solid rgba(49, 41, 35, 0.14);
    border-radius: 18px;
    background: rgba(244, 237, 228, 0.98);
    box-shadow: var(--shadow);
    color: var(--text);
  }

  .page-home .site-nav {
    background: rgba(29, 23, 22, 0.95);
    color: var(--text-light);
    border-color: rgba(255, 243, 225, 0.1);
  }

  .site-header--overlay .site-nav {
    background: rgba(29, 23, 22, 0.95);
    color: var(--text-light);
    border-color: rgba(255, 243, 225, 0.1);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a:not(.button) {
    padding: 12px 10px;
  }

  .grid--2,
  .cards-grid--duo,
  .form-grid,
  .steps-grid,
  .cards-grid--triptych,
  .cards-grid--experiences,
  .site-footer__inner,
  .pillars,
  .thinker-grid,
  .concept-grid {
    grid-template-columns: 1fr;
  }

  .experience-card--inline {
    grid-template-columns: 1fr;
  }

  .experience-card--inline img {
    min-height: 220px;
    aspect-ratio: 16 / 9;
  }

  .pillar {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .pillar:last-child {
    border-bottom: none;
  }

  .hero,
  .experience-hero {
    min-height: auto;
  }

  .hero__content,
  .experience-hero__content,
  .page-hero__inner--light {
    padding-top: 136px;
    padding-bottom: 56px;
  }

  .page-hero__inner--split {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 120px 0 56px;
  }

  .page-hero--slim {
    padding: 82px 0 18px;
  }

  .concept-hero .page-hero__inner--light {
    padding-top: 132px;
    padding-bottom: 48px;
  }

  .about-hero__inner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-top: 86px;
    padding-bottom: 20px;
  }

  .about-hero__title {
    font-size: clamp(2.9rem, 10vw, 4.1rem);
  }

  .about-hero__heading {
    min-height: auto;
  }

  .about-hero__drawing {
    min-height: 136px;
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .about-hero__drawing::before {
    inset: 18px 20px;
  }

  .about-hero__drawing::after {
    right: 40px;
    bottom: 34px;
  }

  .about-hero::after {
    inset: 14px;
    border-radius: 18px;
  }

  .section {
    padding: 84px 0;
  }

  .section--compact {
    padding: 64px 0;
  }

  .elements-strip {
    padding-top: 0;
    padding-bottom: 30px;
    margin-bottom: 24px;
  }

  .showcase__experiences {
    padding-top: 42px;
  }
}

@media (max-width: 560px) {
  :root {
    --shell: calc(100% - 24px);
  }

  .prelaunch-gate {
    padding: 16px;
  }

  .prelaunch-gate__panel {
    padding: 26px 22px 22px;
    gap: 18px;
  }

  h1 {
    font-size: clamp(2.7rem, 13vw, 4rem);
  }

  h2 {
    font-size: clamp(1.9rem, 9vw, 2.8rem);
  }

  .hero__lead,
  .experience-hero__lead,
  .page-hero__inner p {
    font-size: 1rem;
  }

  .page-hero--slim h1 {
    font-size: clamp(2.35rem, 11vw, 3.5rem);
  }

  .media-card img {
    min-height: 240px;
  }

  .question-list__item p {
    font-size: 1.08rem;
  }

  .concept-signature__lead h2 {
    max-width: 100%;
  }

  .panel,
  .info-card,
  .experience-card__body,
  .step-card,
  .timeline__item {
    padding: 24px;
  }

  .profile-card__image {
    width: 100%;
    max-width: 200px;
  }

  .timeline__item {
    padding-left: 62px;
  }

  .timeline__item::before {
    left: 24px;
  }

  .timeline__item::after {
    left: 18px;
  }

  .brand {
    gap: 10px;
  }

  .site-header .brand__badge {
    width: 40px;
    height: 40px;
  }

  .site-header .brand__wordmark {
    font-size: 1.7rem;
  }

  .brand--footer .brand__badge {
    width: 50px;
    height: 50px;
  }

  .brand--footer .brand__wordmark {
    font-size: 1.9rem;
  }

  .elements-strip__title,
  .showcase__experiences .section-heading--center h2 {
    padding: 0 12px 22px;
  }

  .elements-strip__title::after,
  .showcase__experiences .section-heading--center h2::after {
    width: 188px;
    height: 20px;
    background-size: 188px 20px;
  }
}