.topbar__wordmark {
  display: none;
}

@media (max-width: 760px) {
  .projects .section__intro .section__number {
    margin-top: -46px !important;
  }

  .services__middle .section__number {
    margin-top: -52px !important;
  }

  .studio__about .section__number {
    margin-top: -40px !important;
  }

  .press__intro .section__number {
    margin-top: -20px !important;
  }

  .contact__copy .section__number {
    margin-top: -56px !important;
  }

  .service-row {
    min-height: 140px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .form-note:empty {
    display: none !important;
  }

  .contact__map {
    margin-top: -21px !important;
  }
}

.hero__title .hero__title-a {
  display: inline !important;
}

/* === Smartfonowy naglowek i rozwijane menu === */
@media (max-width: 760px) {
  .topbar {
    z-index: 100 !important;
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto 42px !important;
    align-items: center !important;
    width: 100% !important;
    height: 70px !important;
    min-height: 70px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
    isolation: isolate !important;
    background: transparent !important;
    border-bottom: 0 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .topbar::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 0 -34px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(7, 9, 9, .92) 0%, rgba(7, 9, 9, .72) 52%, rgba(7, 9, 9, 0) 100%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(112%) !important;
    backdrop-filter: blur(15px) saturate(112%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 56%, transparent 100%) !important;
  }

  .topbar__logo {
    display: grid !important;
    place-items: center !important;
    width: 48px !important;
    height: 58px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .topbar__logo img {
    width: 46px !important;
    height: 58px !important;
    object-fit: contain !important;
    background: transparent !important;
    mix-blend-mode: screen !important;
    transform: scale(1.3333) !important;
    transform-origin: center !important;
  }

  .topbar__wordmark {
    display: block !important;
    min-width: 0 !important;
    justify-self: center !important;
    overflow: hidden !important;
    color: #fff !important;
    font-family: 'Manrope', var(--font-sans) !important;
    font-size: clamp(14px, 3.9vw, 19px) !important;
    font-weight: 200 !important;
    line-height: 1 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    transform: translateY(-3px) !important;
    white-space: nowrap !important;
  }

  .topbar__wordmark small {
    font: inherit !important;
    letter-spacing: inherit !important;
  }

  .topbar__nav {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    overflow: visible !important;
    transform: none !important;
  }

  .topbar__nav > a:not(.topbar__social),
  .topbar__separator {
    display: none !important;
  }

  .topbar__socialgroup {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .topbar__social,
  .topbar__social svg {
    width: 20px !important;
    height: 20px !important;
  }

  .topbar__social svg {
    transform: scale(1.3333) !important;
    transform-origin: center !important;
  }

  .topbar__social {
    display: grid !important;
    flex: 0 0 20px !important;
    place-items: center !important;
    padding: 0 !important;
    transform: none !important;
  }

  .topbar__social--fb {
    transform: translate(5px, -3px) !important;
  }

  .topbar__cta {
    display: none !important;
  }

  .topbar__menu {
    position: relative !important;
    display: block !important;
    width: 42px !important;
    height: 42px !important;
    margin: 0 !important;
    padding: 9px 4px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .topbar__menu span,
  .topbar__menu span:first-child,
  .topbar__menu span:last-child {
    position: absolute !important;
    left: 5px !important;
    display: block !important;
    width: 32px !important;
    height: 1px !important;
    margin: 0 !important;
    background: linear-gradient(90deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .68) 22%, rgba(255, 255, 255, .68) 78%, rgba(255, 255, 255, .22)) !important;
    transform-origin: center !important;
    transition: top .25s var(--ease), transform .25s var(--ease), opacity .2s var(--ease) !important;
  }

  .topbar__menu span:nth-child(1) { top: 12px !important; }
  .topbar__menu span:nth-child(2) { top: 20px !important; }
  .topbar__menu span:nth-child(3) { top: 28px !important; }

  .nav-open .topbar__menu span:nth-child(1) {
    top: 20px !important;
    transform: rotate(45deg) !important;
  }

  .nav-open .topbar__menu span:nth-child(2) {
    opacity: 0 !important;
  }

  .nav-open .topbar__menu span:nth-child(3) {
    top: 20px !important;
    transform: rotate(-45deg) !important;
  }

  .rail {
    --mobile-menu-height: clamp(420px, 64svh, 620px);
    --mobile-menu-item-height: 46px;
    --mobile-menu-gap: clamp(2.5px, calc(10.75svh - 67.5px), 35.75px);
    --mobile-menu-half-gap: clamp(1.25px, calc(5.375svh - 33.75px), 17.875px);
    z-index: 95 !important;
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    display: block !important;
    width: 100% !important;
    height: var(--mobile-menu-height) !important;
    max-height: none !important;
    padding: 72px 28px 18px !important;
    overflow: hidden !important;
    border: 0 !important;
    background: linear-gradient(180deg, rgba(7, 9, 9, .94) 0%, rgba(7, 9, 9, .84) 76%, rgba(7, 9, 9, 0) 100%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(110%) !important;
    backdrop-filter: blur(18px) saturate(110%) !important;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%) !important;
    mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-100%) !important;
    transition: opacity .28s var(--ease), transform .35s var(--ease), visibility 0s linear .35s !important;
  }

  .nav-open .rail {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition-delay: 0s !important;
  }

  .rail .brand,
  .rail__menu,
  .rail__foot {
    display: none !important;
  }

  .rail__nav {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: var(--mobile-menu-gap) !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: translateY(10px) !important;
  }

  .rail__nav a {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    flex: 0 0 auto !important;
    min-height: var(--mobile-menu-item-height) !important;
    height: var(--mobile-menu-item-height) !important;
    padding: 13px 4px !important;
    border: 0 !important;
    color: rgba(255, 255, 255, .94) !important;
    font-family: var(--font-sans) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: .18em !important;
    text-align: center !important;
    text-transform: uppercase !important;
    transform: none !important;
  }

  .rail__nav a:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    left: 31% !important;
    right: 31% !important;
    top: calc(100% + var(--mobile-menu-half-gap)) !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent) !important;
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .98)) drop-shadow(0 0 2px rgba(0, 0, 0, .95)) !important;
    pointer-events: none !important;
  }

  .rail__nav a span {
    display: none !important;
  }

}

@media (max-width: 390px) {
  .topbar {
    grid-template-columns: 44px minmax(0, 1fr) auto 38px !important;
    padding-inline: 7px !important;
    gap: 5px !important;
  }

  .topbar__logo,
  .topbar__logo img {
    width: 42px !important;
  }

  .topbar__wordmark {
    font-size: 13px !important;
  }

  .topbar__socialgroup {
    gap: 4px !important;
  }

  .topbar__social,
  .topbar__social svg {
    width: 18px !important;
    height: 18px !important;
  }

  .topbar__menu {
    width: 38px !important;
  }

  .topbar__menu span,
  .topbar__menu span:first-child,
  .topbar__menu span:last-child {
    width: 28px !important;
  }
}

@media (max-width: 760px) {
  .hero__actions .button,
  .hero__worktext {
    font-family: 'Manrope', var(--font-sans) !important;
    font-weight: 200 !important;
  }

  .hero__actions .button {
    min-height: 44px !important;
  }

  .topbar__menu span,
  .hero .eyebrow::before,
  .hero .eyebrow::after,
  .hero h1.hero__title::before,
  .hero__lead::before,
  .hero__stat:not(:last-child)::after {
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .98)) drop-shadow(0 0 2px rgba(0, 0, 0, .95)) !important;
  }

  .hero h1,
  .hero .eyebrow,
  .hero__lead,
  .hero__worklink,
  .hero__stat strong,
  .hero__stat span,
  .hero .button--ghost {
    text-shadow: 0 5px 40px rgba(0, 0, 0, .99), 0 2px 11px rgba(0, 0, 0, .98) !important;
  }

  .hero__stats {
    position: static !important;
    inset: auto !important;
    transform: translateY(25px) !important;
  }

  .hero__stat {
    position: relative !important;
  }

  .hero__stat:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 12% !important;
    right: -3px !important;
    bottom: 12% !important;
    width: 1px !important;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .7), transparent) !important;
    pointer-events: none !important;
  }

  .hero__worktext {
    position: relative !important;
    top: 10px !important;
  }

  .hero__actions {
    position: relative !important;
    top: 30px !important;
    width: calc(100% - 40px) !important;
    max-width: 420px !important;
    margin-inline: auto !important;
  }

  .hero .eyebrow,
  .hero h1.hero__title,
  .hero__lead {
    position: relative !important;
    top: -8px !important;
  }

  .hero h1.hero__title {
    display: grid !important;
    grid-template-columns: max-content 1px max-content !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: clamp(7px, 2vw, 10px) !important;
    row-gap: 7px !important;
    font-size: clamp(34px, 8.7vw, 46px) !important;
    line-height: .98 !important;
    position: relative !important;
    width: 100% !important;
    max-width: 460px !important;
    margin-inline: auto !important;
    margin-bottom: 0 !important;
    text-align: center !important;
  }

  .hero__title > span:first-child {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
  }

  .hero__title > span:nth-child(2),
  .hero__title > span:last-child {
    grid-row: 2 !important;
    font-size: .62em !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap !important;
  }

  .hero__title > span:nth-child(2) {
    grid-column: 1 !important;
    justify-self: end !important;
  }

  .hero__title > span:last-child {
    grid-column: 3 !important;
    justify-self: start !important;
  }

  .hero h1.hero__title::before {
    content: "" !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 1px !important;
    height: 1.1em !important;
    align-self: center !important;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .62), transparent) !important;
  }

  .hero__title .hero__title-a {
    display: none !important;
  }

  .hero__title > span:last-child::before {
    content: "a " !important;
  }

  .hero__lead {
    margin-top: 2px !important;
    text-align: center !important;
  }

  .hero__lead::before {
    content: "" !important;
    display: block !important;
    width: clamp(90px, 34vw, 160px) !important;
    height: 1px !important;
    margin: 0 auto 7px !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .56), transparent) !important;
  }

  .hero__lead span {
    display: inline !important;
  }

  .hero .eyebrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(8px, 2.5vw, 14px) !important;
    width: calc(100% - 32px) !important;
    max-width: 420px !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .hero .eyebrow::before,
  .hero .eyebrow::after {
    content: "" !important;
    flex: 1 1 54px !important;
    min-width: 8px !important;
    max-width: 54px !important;
    height: 1px !important;
  }

  .hero .eyebrow::before {
    background: linear-gradient(90deg, transparent, rgba(198, 159, 105, .55)) !important;
  }

  .hero .eyebrow::after {
    background: linear-gradient(90deg, rgba(198, 159, 105, .55), transparent) !important;
  }
}