@media (max-width: 1199px) {
  .about-intro__inner {
    grid-template-columns: 1fr;
    padding: 2.5vw 0 0;
  }

  .about-intro__label {
    max-width: none;
  }

  .about-intro__main {
    max-width: none;
  }

  .about-intro__text {
    line-height: 1.45;
  }

  :root {
    --container: calc(100vw - 2.5vw);
  }

  .hero {
    min-height: 47.916vw;
  }

  .site-header,
  .site-nav-panel {
    --nav-h: 3.75vw;
    --nav-logo-left: 2.5vw;
    --nav-logo-top: 1.145vw;
    --nav-logo-w: 5vw;
    --nav-logo-h: 1.666vw;
    --nav-menu-right: 2.5vw;
    --nav-menu-top: 1.354vw;
    --nav-menu-w: 1.666vw;
    --nav-menu-h: 1.25vw;
  }

  .about {
    padding-top: 0;
  }

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

  .about p {
    line-height: 1.4;
  }

  .feature-list {
    height: auto;
  }

  .feature-list__sticky {
    position: relative;
    min-height: unset;
  }

  .feature-list__stage {
    width: 100vw;
    grid-template-columns: 1fr;
    gap: 1.458vw;
    padding: 2.083vw 1.25vw 2.083vw 0;
  }

  .feature-media {
    width: 100%;
    max-width: 35.416vw;
    height: auto;
    aspect-ratio: 858 / 911;
    margin: 0 auto;
  }

  .feature-copy-zone {
    align-self: auto;
    min-height: 0;
  }

  .feature-copy-stack {
    min-height: 10.937vw;
  }

  .feature-copy-item h4 {
    line-height: 1.18;
  }

  .projects-marquee .card {
    width: clamp(11.458vw, 42vw, 16.666vw);
  }

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

  .site-footer__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-left: 0;
  }

  .video-hero {
    margin-top: 12.5vw;
    height: 39.583vw;
  }
}

@media (max-width: 900px) {
  .site-footer__main {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: clip;
  }

  .opening-splash__word {
    left: 50%;
    top: 50%;
    font-size: clamp(33px, 6.5vw, 50px);
    letter-spacing: 1px;
    transform: translate(-50%, -50%) translateY(11px);
  }

  .opening-splash__word.is-visible {
    transform: translate(-50%, -50%) translateY(0);
  }

  .top-showcase {
    width: 100%;
    height: 150vh;
    min-height: 0;
  }

  .top-showcase iframe,
  .top-showcase .inkwell-stage {
    width: 100%;
  }

  .ring-text-overlay {
    display: flex;
  }

  .showcase-fullscreen-handoff {
    width: 100%;
  }

  .showcase-handoff__caption {
    display: flex;
    align-items: flex-end;
    padding: 0 0 clamp(28px, 10vh, 48px);
  }

  .showcase-handoff__caption h1 {
    font-size: clamp(33px, 5.2vw, 56px);
    letter-spacing: -1px;
    width: min(720px, calc(100vw - 48px));
  }

  .ring-text-layout {
    width: min(540px, calc(100vw - 36px));
    height: clamp(130px, 34vw, 175px);
    font-size: clamp(42px, 8vw, 50px);
    letter-spacing: 1px;
    transform: translateY(calc(var(--ring-text-shift, 0) * -1px));
  }

  body.ring-breathing .ring-text-word {
    transform-origin: 50% 50%;
  }

  .ring-more-top {
    left: 0%;
    top: -100%;
  }

  .ring-enjoyable {
    left: 31%;
    top: -133%;
  }

  .ring-more-bottom {
    left: 4%;
    top: 158%;
  }

  .ring-interesting {
    left: 27%;
    top: 188%;
  }

  .site-header,
  .site-nav-panel {
    --nav-h: 46px;
    --nav-logo-left: 25px;
    --nav-logo-top: 14px;
    --nav-logo-w: 54px;
    --nav-logo-h: 18px;
    --nav-menu-right: 40px;
    --nav-menu-top: 16px;
    --nav-menu-w: 19px;
    --nav-menu-h: 14px;
    --nav-panel-w: min(94vw, 280px);
  }

  .site-header__logo svg,
  .site-header__logo img {
    width: 100%;
    height: 100%;
  }

  .site-header__menu-icon {
    width: 100%;
    height: 100%;
  }

  .site-header__menu-icon img {
    width: 100%;
    height: 100%;
  }

  .site-header__menu:focus-visible {
    outline: 1px solid var(--nav-brand);
    outline-offset: 2px;
  }

  .site-nav-panel__sheet {
    width: 100%;
    height: 100%;
    transform: translateY(-105%);
  }

  .site-nav-panel__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    padding: clamp(14px, 6vw, 28px) 0 clamp(20px, 10vw, 40px);
  }

  .site-nav-panel__links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    flex: 0 0 auto;
    align-self: flex-end;
    width: 100%;
    margin: clamp(16px, calc(15vh - 30px), 40px) 0 0;
    gap: clamp(9px, 3.2vh, 14px);
  }

  .site-nav-panel__links a,
  .site-nav-panel__lang {
    font-size: clamp(12px, 2.8vw, 15px);
    padding: 2px 0;
    transform: translateX(14px);
  }

  .site-nav-panel__lang {
    margin-top: clamp(4px, 2vh, 8px);
  }

  .hero {
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    padding: 0 0 48px;
  }

  h1 {
    font-size: clamp(33px, 5.2vw, 56px);
    letter-spacing: -1px;
  }

  .hero-bottom {
    margin-top: 8px;
  }

  .socials {
    display: flex;
    gap: 4px;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .about-tag {
    display: flex;
    gap: 8px;
    line-height: 1.4;
  }

  .dot {
    width: 3px;
    height: 3px;
  }

  .about h2 {
    font-size: clamp(30px, 7.5vw, 40px);
    letter-spacing: -1px;
    margin-bottom: 14px;
  }

  .about p {
    max-width: none;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 14px;
  }

  .about-copy-zone {
    max-width: none;
  }

  .learn-more {
    display: inline-flex;
    gap: 4px;
    line-height: 1;
  }

  .learn-more::after {
    font-size: 12px;
  }

  .stats {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 0 5% 40px;
  }

  .stat-box {
    padding: 0 0 12px;
    min-height: 0;
  }

  .stat-box:nth-child(2) {
    transform: none;
  }

  .stat-box:nth-child(3) {
    transform: none;
  }

  .stat-box h3 {
    font-size: clamp(48px, 15vw, 64px);
    letter-spacing: -2px;
  }

  .stat-box p {
    margin-top: 4px;
    line-height: 1.4;
    max-width: none;
  }

  .feature-list {
    height: calc(var(--feature-count, 5) * 100svh);
  }

  .feature-list__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 100svh;
    display: block;
  }

  .feature-list__stage {
    height: 100%;
    min-height: 100%;
    grid-template-columns: 1fr;
    grid-auto-rows: min-content;
    align-content: center;
    gap: 20px;
    padding: 0 20px;
  }

  .feature-media {
    width: 100%;
    max-width: none;
    height: 44svh;
    min-height: 0;
    aspect-ratio: auto;
    margin: 0;
  }

  .feature-media-item {
    width: 100%;
    height: 100%;
    clip-path: inset(100% 0 0 0);
    -webkit-clip-path: inset(100% 0 0 0);
  }

  .feature-copy-zone {
    min-height: 0;
    height: auto;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    justify-content: flex-start;
    display: flex;
    flex-direction: column;
  }

  .feature-copy-stack {
    min-height: 110px;
    width: 100%;
  }

  .feature-copy-item {
    transform: translateY(10px);
  }

  .feature-copy-item h4 {
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 9px;
  }

  .feature-copy-item p {
    line-height: 1.5;
    max-width: none;
  }

  .ticker {
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 8px 0 11px;
  }

  .ticker-lane {
    width: 100%;
  }

  .ticker-marquee {
    display: inline-flex;
    flex-wrap: nowrap;
  }

  .ticker-seg {
    display: inline-flex;
    flex-shrink: 0;
  }

  .ticker-marquee span {
    font-size: clamp(53px, 8vw, 110px);
    letter-spacing: -1px;
  }

  .about-intro__inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 12px;
    max-width: none;
    padding: 0 5%;
  }

  .about-intro__label {
    max-width: none;
    display: flex;
    gap: 8px;
  }

  .about-intro__dot {
    flex-shrink: 0;
    width: 3px;
    height: 3px;
  }

  .about-intro__label span:last-child {
    line-height: 1.4;
  }

  .about-intro__main {
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .about-intro__text {
    line-height: 1.6;
  }

  .about-intro__link-wrap {
    padding-top: 19px;
  }

  .pic-big-section {
    width: 100%;
    height: auto;
  }

  .pic-big-sticky {
    height: auto;
    min-height: 0;
  }

  .pic-big-section .pbt-stage {
    width: 100%;
    height: 100%;
  }

  .pic-big-section .pbt-panel {
    position: static;
    left: 50%;
    top: 50%;
    transform: none;
    width: 100%;
    height: auto;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  }

  .pic-big-section .pbt-image-wrap {
    position: static;
    width: 100%;
    height: 100%;
  }

  .pic-big-section .pbt-image-wrap img {
    width: 100%;
    height: 100%;
  }

  .projects.projects-marquee {
    margin: 160px 0 110px;
    width: 100%;
  }

  .projects-marquee__viewport {
    width: 100%;
  }

  .projects-marquee__track {
    display: flex;
    align-items: flex-start;
  }

  .projects-marquee__group {
    display: flex;
    align-items: flex-start;
    gap: clamp(8px, 4vw, 49px);
    padding: 0 clamp(6px, 2vw, 16px);
    flex-shrink: 0;
  }

  .projects-marquee .card {
    flex: 0 0 auto;
    width: 220px;
    display: flex;
    flex-direction: column;
  }

  .projects-marquee .card img {
    width: 100%;
    height: 120px;
    flex-shrink: 0;
  }

  .projects-marquee .card-meta {
    margin-top: 6px;
    letter-spacing: .12px;
    font-size: 12px;
  }

  .site-footer {
    padding-bottom: max(0px, env(safe-area-inset-bottom, 0px));
  }

  .site-footer__inner {
    width: min(100%, 660px);
    padding: 0 5%;
  }

  .site-footer__top {
    font-size: clamp(12px, 1.25vw, 12px);
    margin-bottom: clamp(20px, 5.5vw, 32px);
  }

  .site-footer__main {
    gap: clamp(20px, 6vw, 44px);
    padding-bottom: clamp(24px, 6vw, 36px);
  }

  .site-footer__headline {
    font-size: clamp(24px, 3.6vw, 35px);
  }

  .site-footer__nav {
    column-gap: clamp(10px, 3vw, 20px);
    row-gap: 14px;
    margin-left: 0;
  }

  .site-footer__col-title {
    margin: 0 0 7px;
  }

  .site-footer__links li {
    margin: 0 0 5px;
  }

  .site-footer__links a:hover {
    text-underline-offset: 2px;
  }

  .site-footer__meta {
    padding: 0 0 8px;
  }

  .site-footer__bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }

  .site-footer__legal,
  .site-footer__social {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
  }

  .site-footer__rule {
    height: 1px;
    width: 100%;
  }

  .site-footer__mark {
    width: 100%;
    min-height: clamp(110px, 34vw, 180px);
    padding: 18px 0 48px;
    display: flex;
    align-items: flex-end;
  }

  .site-footer__mark-inner {
    width: 100%;
    min-height: clamp(100px, 32vw, 170px);
    display: flex;
    align-items: flex-end;
  }

  .text-pressure-title {
    align-self: flex-end;
  }

  .text-pressure-flex {
    display: flex;
    align-items: flex-end;
    width: 100%;
  }

  .text-pressure-title span {
    flex: 0 0 auto;
  }

  .text-pressure-stroke span::after {
    -webkit-text-stroke-width: 2px;
  }

  .music-toggle {
    right: 7px;
    bottom: 9px;
    border-radius: 500px;
    letter-spacing: 0.4px;
    padding: 6px 7px;
    backdrop-filter: blur(2px);
  }

  #about {
    margin-top: 60px;
    padding: 20px 5% 0;
  }

  .top-showcase~section:not(.video-hero):not(.projects):not(.about) {
    margin-top: 75px;
  }

  .top-showcase~.about-intro+.pic-big-section {
    margin-top: 38px;
  }

  .top-showcase~.site-footer {
    margin-top: 60px;
  }

  .feature-spot-cluster {
    width: 100%;
    height: 100%;
  }

  .feature-spot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 11px 5px var(--feature-spot-glow);
  }

  .feature-copy-zone--text-lit .feature-spot--trail {
    border-radius: 10px;
    box-shadow:
      0 0 0 1px var(--feature-spot-ring),
      0 0 16px 5px var(--feature-spot-glow-strong),
      0 0 28px 10px rgba(65, 0, 153, 0.18);
  }

  .site-nav-spot-cluster {
    width: 100%;
    height: 100%;
  }

  .site-nav-spot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 11px 5px rgba(65, 0, 153, 0.22);
  }

  .site-nav-panel__links--spot-lit .site-nav-spot--trail {
    border-radius: 500px;
    box-shadow:
      0 0 0 1px rgba(196, 168, 255, 0.35),
      0 0 16px 5px rgba(65, 0, 153, 0.38),
      0 0 28px 10px rgba(65, 0, 153, 0.18);
  }

  .video-hero {
    margin-top: 0;
    height: 0;
  }
}