/*
 * Globalne style przeniesione 1:1 z inline <style> Webflow (global_embed, page_specific_css,
 * Nav CSS, Custom CSS) — w oryginalnym eksporcie żyły w <div class="w-embed"> w index.html,
 * czyli w treści <body>, PO wczytaniu normalize.css / components.css / studio-brothers-123.css.
 *
 * Ten plik jest linkowany w layout.tsx jako <link> PO trzech plikach Webflow (nie importowany
 * przez Next.js jako "globals.css"), żeby zachować tę samą kolejność w kaskadzie CSS —
 * inaczej reguły takie jak `a { text-decoration: inherit }` przegrywałyby z
 * `a { text-decoration: underline }` ze studio-brothers-123.css.
 */

body {
  font-size: 1.1111111111111112vw;
}

@media screen and (min-width: 1440px) {
  body {
    font-size: 1rem;
  }
}

.container {
  max-width: 90em;
}

a,
.w-nav-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

body {
  /*
   * Metric fallback (typekit-fonts.css) sits between the Adobe face and generic
   * sans-serif so a late font swap does not visibly jump hero/nav metrics.
   */
  font-family: helvetica-neue-lt-pro, helvetica-neue-lt-pro-fallback, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

.w-richtext > :last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}

.w-select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

@media screen and (max-width: 991px) {
  /*
   * Mobile/tablet base size. Root rem ≈ 16px; .page_wrapper is 1.05em at ≤767,
   * so 0.833rem × 1.05 ≈ 14px readable body text (was ~0.688rem → ~11.6px).
   * Em-based headings scale proportionally (~20% larger) but stay sane;
   * rem/clamp heroes (home watermark/title) are unaffected.
   */
  body {
    font-size: 0.833rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1100px) {
  .text_14px {
    font-size: 0.6222222222222223rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1250px) {
  .text_12px {
    font-size: 0.5610416666666667rem;
  }
}

/*
 * Reset natywnego wyglądu <button> — w oryginalnym eksporcie Webflow te elementy
 * (.menu_button, .dropdown_toggle, .lang_dd_toggle) są zwykłymi <div>. W Next.js
 * użyto semantycznych <button> dla dostępności/interakcji, ale normalize.css nie
 * usuwa natywnego tła/ramki przeglądarki dla <button>, więc trzeba to zresetować
 * ręcznie — inaczej widać białe, kwadratowe "duchy" przycisków w nawigacji.
 */
.menu_button,
.dropdown_toggle,
.lang_dd_toggle,
.slider-button-prev,
.slider-button-next {
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

/*
 * Karty członków zespołu na /o-studio (popup "Przeczytaj więcej") oraz przycisk
 * "Wróć" w popupie — w oryginalnym eksporcie to <a>, w Next.js to <button> (bo nie
 * prowadzą pod żaden URL, tylko otwierają/zamykają popup), więc trzeba zresetować
 * natywne tło/ramkę przycisku tak jak przy .menu_button wyżej.
 */
button.card,
.team_popup_top_wrap button.link-block {
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  width: 100%;
}

/*
 * /o-studio team — static grid (no Swiper).
 * Desktop: all 4 people fully visible in one row.
 * Tablet: 2×2. Mobile: stacked.
 *
 * Without these rules, .team_people_grid is a plain block and button.card
 * { width: 100% } stacks every person full-width under the previous one.
 */
.team_people_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 0.75em;
  row-gap: 2.88em;
  width: 100%;
  max-width: 100%;
  /* Restores gap lost when team Swiper nav was removed:
     nav buttons (~4.75em) + .swiper-navigation.is--team padding-bottom (2.63em). */
  margin-top: 7.38em;
  box-sizing: border-box;
  /* Clip only the people grid — never the beige section (avoids Clutch side effects). */
  overflow-x: clip;
}

.team_people_grid > .text_14px.is--label {
  grid-column: 1 / -1;
}

.team_people_grid > .card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  background: none;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.team_people_grid .card_text_wrap.is--team-card,
.team_people_grid .card_text_wrap.is--team-card.is--iwona {
  max-width: 100%;
}

@media screen and (max-width: 991px) {
  .team_people_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2em;
    /* Was: nav ~4.75em + .swiper-navigation.is--team padding 1em top/bottom. */
    margin-top: 5.75em;
  }
}

@media screen and (max-width: 479px) {
  .team_people_grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.75em;
    margin-top: 3.5em;
  }
}

/* Nav CSS */
.navbar.on-scroll .navbar_bg {
  opacity: 1;
}

/*
 * Hide/show na scroll — .navbar jest już position:fixed (Webflow).
 * Transform nie zmienia layoutu strony; płynne wysuwanie w górę / powrót.
 */
.navbar {
  transition: transform 0.35s ease;
}

.navbar.is-nav-hidden {
  transform: translateY(-100%);
}

.nav_link:hover .nav_link_line,
.nav_link.w--current .nav_link_line,
.dropdown_toggle:hover .nav_link_line,
.dropdown_toggle.w--open .nav_link_line,
.dropdown_toggle.w--current .nav_link_line {
  transform: translate(0%, 0);
}

/*
 * Nav services dropdown — more air, fewer ornaments, hover bridge.
 * Invisible ::before fills the gap between trigger and panel so the menu
 * does not close when the pointer travels diagonally / through dead space.
 */
.dropdown_toggle {
  padding: 0.35em 0;
}

.dropdown_navigation.w--open {
  top: 100%;
  margin-top: 0;
  padding: 1.35em 1.5em;
  min-width: 18.5em;
  grid-column-gap: 0;
  grid-row-gap: 1.1em;
  background-color: var(--_colors---colors-neutral--lightest);
}

.dropdown_navigation.w--open::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.85em;
}

.dropdown_navigation .link-block.is--dropdown {
  padding: 0.15em 0;
}

.dropdown_navigation .link-block.is--dropdown .button_arrow,
.dropdown_navigation .link-block.is--dropdown .link_line {
  display: none;
}

/*
 * Dropdown hover weight without layout shift.
 * Invisible bold duplicate (::after + data-text) reserves the wider metric
 * so 400 → 500 (Helvetica Neue LT Pro medium) does not reflow the panel.
 *
 * IMPORTANT: do NOT use inline-grid + grid-area:1/1 on ::after alone.
 * Explicitly placed ::after claims cell (1,1); the text node then
 * auto-places onto row 2 — a full blank line of top air inside the panel
 * (visibility:hidden still occupies space). height:0 + overflow:hidden
 * reserves width only.
 */
.dropdown_navigation .link-block.is--dropdown .is--dd-label {
  display: inline-block;
  font-weight: 400;
}

.dropdown_navigation .link-block.is--dropdown .is--dd-label::after {
  content: attr(data-text);
  font-weight: 500;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .dropdown_navigation .link-block.is--dropdown:hover .is--dd-label,
  .dropdown_navigation .link-block.is--dropdown:focus-visible .is--dd-label {
    font-weight: 500;
    color: var(--_colors---colors-neutral--darker);
  }
}

.dropdown_navigation .link-block.is--dropdown.w--current .is--dd-label {
  font-weight: 500;
}

/* Lang panel: remove dead margin gap; use same bridge pattern. */
.land_dd_nav.w--open {
  margin-top: 0;
  top: 100%;
  padding-top: 0.5em;
}

.land_dd_nav.w--open::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.5em;
}

/*
 * Touch / brak prawdziwego hover — sticky :hover na iOS/Android wymaga drugiego
 * tapnięcia, żeby przejść linkiem. Neutralizujemy wizualne efekty hover wszędzie,
 * zostawiając :focus-visible i stany .w--current / .is--active / .w--open.
 * Desktop z myszką (hover: hover) bez zmian.
 */
@media (hover: none) {
  /*
   * Na touch pierwsze tapnięcie ustawia sticky :hover — nie wolno otwierać
   * dropdownów przez CSS hover. Widoczność tylko przez klasę .w--open (React).
   */
  .w-dropdown:hover > .w-dropdown-list,
  .w-dropdown-toggle:hover + .w-dropdown-list {
    display: none;
  }

  .w-dropdown-list.w--open {
    display: block;
  }

  .dropdown_navigation.w--open {
    display: flex;
  }

  .nav_link:hover .nav_link_line,
  .dropdown_toggle:hover .nav_link_line {
    transform: translate(-100%);
  }

  .nav_link.w--current .nav_link_line,
  .dropdown_toggle.w--open .nav_link_line,
  .dropdown_toggle.w--current .nav_link_line {
    transform: translate(0%, 0);
  }

  .link-block:hover {
    opacity: 1;
  }

  .link-block.is--dropdown:hover {
    color: var(--_colors---colors-neutral--neutral);
  }

  .link-block.is--dropdown.w--current {
    color: var(--_colors---colors-neutral--darker);
  }

  .link-block:hover .link_line {
    transform: none;
  }

  .footer_brief_stroke_wrap.is--brief-link:hover .link-block {
    opacity: 1;
  }

  .footer_brief_stroke_wrap.is--brief-link:hover .link_line {
    transform: none;
  }

  .button:hover {
    background-color: var(--_colors---colors-neutral--darkest);
    color: var(--_colors---colors-neutral--lightest);
  }

  .button:hover:where(.w-variant-0b6cf882-6325-86cc-1f27-c933df27f514) {
    background-color: var(--_colors---colors-neutral--lightest);
    color: var(--_colors---colors-neutral--darkest);
  }

  .button.is--nav:hover {
    background-color: var(--_colors---colors-neutral--darker);
    color: var(--_colors---colors-neutral--lightest);
  }

  .card:hover .card_img {
    transform: none;
  }

  .card:hover .button_arrow {
    transform: none;
  }

  .project_card:hover .project_card_img {
    transform: none;
  }

  .project_card:hover .project_card_arrow {
    transform: none;
  }

  .nav_account_link:hover,
  .dropdown_close_link:hover {
    opacity: 1;
  }

  .lang_dd_link:hover {
    background-color: transparent;
    color: var(--_colors---colors-neutral--lightest);
  }

  .post_rich_text a:hover {
    opacity: 1;
  }

  .post_toc_link:hover:not(.is--active) {
    color: var(--_colors---colors-neutral--light);
  }

  .se_row:hover {
    background-color: transparent;
  }

  .button_job:hover {
    opacity: 1;
  }

  .benefit_card:hover {
    padding-top: 2.06em;
  }
}

@media screen and (max-width: 991px) {
  .button.is--nav {
    background-color: var(--_colors---colors-neutral--darker);
    color: var(--_colors---colors-neutral--lightest);
    font-size: 1.2em;
  }
  .menu_button.w--open ~ .nav_logo_link {
    color: var(--_colors---colors-neutral--darker);
  }
  .menu_button.w--open ~ .lang_dd .lang_dd_toggle {
    color: var(--_colors---colors-neutral--darker) !important;
  }
  .menu_button.w--open .menu_button_text_wrap {
    display: none;
  }
  .menu_button.w--open .menu_button_close_wrap {
    display: flex;
  }

  /*
   * Mobile nav: skip Usługi parent dropdown — offer children are rendered
   * as flat .is--mobile-nav-flat top-level links in Header.tsx.
   */
  .is--desktop-nav-dd {
    display: none !important;
  }
}

@media screen and (min-width: 992px) {
  .is--mobile-nav-flat {
    display: none !important;
  }
}

/* Custom CSS */
.card:hover .card_img {
  transform: scale(1.05, 1.05);
}

/* Homepage branding service card — soft phone mockup crossfade */
.card_img.phone_rotator {
  display: block;
  width: 100%;
  overflow: hidden;
}

.card_img.phone_rotator img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease;
  pointer-events: none;
}

.card_img.phone_rotator img.is-active {
  opacity: 1;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .card_img.phone_rotator img {
    transition: none;
  }
}

/*
 * Branding project tiles — soft crossfade slideshow.
 * Used on /realizacje/branding (grid) and Identyfikacja wizualna offer slider.
 * Without absolute stacking, slideshow <img>s render as a vertical block stack.
 */
.project_card_img_wrap.is--slideshow {
  aspect-ratio: 1.61;
}

.project_card_slideshow {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.4s;
}

.project_card_slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease;
  pointer-events: none;
}

.project_card_slideshow img.is-active {
  opacity: 1;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .project_card_slideshow img {
    transition: none;
  }
}

.card:hover .button_arrow {
  transform: translate(0.2em, 0);
}
.project_card:hover .project_card_img {
  transform: scale(1.05, 1.05);
}
.project_card:hover .project_card_slideshow {
  transform: scale(1.05, 1.05);
}
.project_card:hover .project_card_arrow {
  transform: translate(0.2em, 0);
}
.link-block:hover .link_line {
  transform: translate(100%, 0%);
}

/* Swiper — nadpisania wyglądu z index.html */
.swiper-navigation .swiper-scrollbar-drag {
  height: 2px;
  background: #192e57;
  border-radius: 0;
}
.swiper-navigation .swiper-scrollbar.swiper-scrollbar-horizontal.is--light .swiper-scrollbar-drag {
  height: 2px;
  background: #ece7db;
  border-radius: 0;
}
.swiper-navigation .swiper-scrollbar.swiper-scrollbar-horizontal {
  height: 2px;
  border-radius: 0;
  background: #b6c8da;
}
.swiper-button-next,
.swiper-button-prev {
  display: none;
}
.swiper {
  overflow: visible;
}

/*
 * Karuzela logotypów klientów — zastępuje @flowbase-co/boosters-carousel-ticker
 * (Finsweet) czystą animacją CSS. Zawartość jest renderowana 2x (patrz Clients.tsx),
 * animacja przesuwa o 50%, więc pętla jest bezszwowa.
 */
.home_clients_carousel {
  overflow: hidden;
}
.home_clients_track {
  width: max-content;
  /* Webflow Flowbase: fb-carousel-speed="15000" (ms per full loop of one track copy) */
  animation: home-clients-scroll 15s linear infinite;
}
.home_clients_carousel:hover .home_clients_track {
  animation-play-state: paused;
}
@keyframes home-clients-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/*
 * Statyczne rzędy logotypów technologii na /strony-internetowe-i-branding
 * (sekcja „Technologie i integracje”) — 3 osobne rzędy bez animacji marquee.
 */
.branding_tech_left_col {
  overflow: visible;
}
.branding_tech_carousel {
  overflow: visible;
}
.branding_tech_track {
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

/*
 * Sekcja FAQ (strony Oferty) — w oryginalnym eksporcie Webflow każdy .faq_exp_wrap
 * dostaje na mobile (<=767px) `grid-area: 2 / 1 / 3 / 3`, żeby rozwinięta odpowiedź
 * zajmowała pełną szerokość wiersza pod pytaniem/ikoną, ale Webflow zapisał tę regułę
 * per-instancja przez auto-generowane ID (#w-node-...) zamiast przez klasę, więc nie
 * przenosi się 1:1 do komponentu React. Odtworzone tu jako reguła klasowa.
 *
 * .faq_icon: Webflow SVG ma width="100%" i polega na kolumnie siatki 2em
 * (grid-template-columns: 1fr 1fr 2em). Jawny rozmiar jako pas bezpieczeństwa,
 * gdyby struktura DOM znów odstąpiła od 3 dzieci w .faq_item.
 */
.faq_icon {
  width: 2em;
  height: 2em;
  max-width: 2em;
  max-height: 2em;
  flex-shrink: 0;
  align-self: start;
  color: var(--_colors---colors-neutral--darkest, #000);
}

.faq_item[role="button"] {
  /* Reset natywnych stylów focus; fokus widoczny przez outline Webflow/a11y */
  outline: none;
}

.faq_item[role="button"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

@media screen and (max-width: 767px) {
  .faq_item .faq_exp_wrap {
    grid-area: 2 / 1 / 3 / 3;
  }
}

/*
 * Sekcja „Działamy na wszystkich trzech poziomach” (SEO/GEO/AEO, strona
 * Pozycjonowanie w Google i AI) — analogicznie do FAQ wyżej, trzecia karta (AEO)
 * dostaje w oryginale ID-owy override, żeby na tablecie (2-kolumnowy grid) rozciągać
 * się na całą szerokość. Tu odtworzone przez :nth-child, bo karty renderujemy z tablicy.
 */
@media screen and (max-width: 767px) and (min-width: 480px) {
  .ai-seo_levels_grid .ai-seo_levels_card:nth-child(3) {
    grid-column: span 2 / span 2;
  }
}

/* ==========================================================================
   Homepage hero — Figma SG-HERO-NOWE (14874:7685), 1440×818
   Stage lives inside .container (max-width 90em, same as other sections).
   Sizes use cqw of the stage so the Figma composition holds at 1440 and
   does not blow up on wider viewports. Title overlaps phones; phones clip
   at stage bottom like the design.
   ========================================================================== */

.section.is--home-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 0;
  background-image: linear-gradient(#fffcf5, #eee4db);
}

/*
 * Same max-width 90em as other sections, but no horizontal padding so the
 * 1440×818 stage fills the container (Figma artboard width). Inherited
 * 2.13em side padding shrank the stage (~1372×779) and made the hero short;
 * full-bleed within the container restores ~818px height at 1440 (+~5%).
 */
.container.is--home-hero {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Positioning context = Figma 1440×900 frame, capped by .container */
.home_hero_stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 900;
  container-type: inline-size;
  container-name: home-hero;
  overflow: hidden;
  pointer-events: none;
}

.home_hero_watermark {
  position: absolute;
  left: calc(100% * 34 / 1440);
  top: calc(100% * 85 / 900);
  z-index: 0;
  margin: 0;
  color: #fff;
  font-family: helvetica-neue-lt-pro, helvetica-neue-lt-pro-fallback, sans-serif;
  font-weight: 500;
  font-size: calc(100cqw * 247.122 / 1440);
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/*
 * Text Container 14874:7842 — center (304, 369) with translate(-50%,-50%)
 * (+82 vs original 287 to track phone cluster shift on 900-tall stage).
 * Overlaps phone cluster.
 */
.home_hero_title_wrap {
  position: absolute;
  left: calc(100% * 304 / 1440);
  top: calc(100% * 369 / 900);
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.home_hero_title_wrap .home_hero_title,
.home_hero_title_wrap .animated-title {
  margin: 0;
  color: var(--_colors---colors-neutral--darker, #232325);
  font-weight: 500;
  font-size: calc(100cqw * 60 / 1440);
  line-height: 1.2;
  text-align: left;
  /* Figma 3 hard lines; nowrap still honors <br> */
  white-space: nowrap;
}

/*
 * Phones cluster 14874:7689 — x:413 y:210 (+82 vs original 128),
 * so outer phones still crop on the bottom edge of the taller stage.
 * gap 51, phone 297×624
 */
.home_hero_phones {
  position: absolute;
  left: calc(100% * 413 / 1440);
  top: calc(100% * 210 / 900);
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: calc(100cqw * 51 / 1440);
  width: auto;
  max-width: none;
  pointer-events: none;
}

.home_hero_phone {
  position: relative;
  flex: 0 0 auto;
  width: calc(100cqw * 297 / 1440);
}

/* Stagger: OKRE +216 / Flügger 0 / HANK +115 */
.home_hero_phone.is--okre {
  margin-top: calc(100cqw * 216 / 1440);
  z-index: 1;
}

.home_hero_phone.is--flugger {
  margin-top: 0;
  z-index: 3;
}

.home_hero_phone.is--hank {
  margin-top: calc(100cqw * 115 / 1440);
  z-index: 2;
}

.home_hero_phone_img {
  display: block;
  width: 100%;
  height: auto;
  /* Keep smooth resized edges (avoid crisp-edges / pixelated scaling). */
  image-rendering: auto;
  -webkit-user-select: none;
  user-select: none;
}

@media screen and (max-width: 991px) {
  .container.is--home-hero {
    padding-top: 5.5em;
    padding-bottom: 0;
    padding-left: 2em;
    padding-right: 2em;
  }

  .home_hero_stage {
    aspect-ratio: auto;
    height: auto;
    overflow: visible;
    pointer-events: auto;
  }

  .home_hero_watermark {
    left: 0.75em;
    top: 0.35em;
    font-size: clamp(3.5rem, 18vw, 8rem);
  }

  .home_hero_title_wrap {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    max-width: none;
    margin-bottom: 1.5em;
    pointer-events: auto;
  }

  .home_hero_title_wrap .home_hero_title,
  .home_hero_title_wrap .animated-title {
    font-size: clamp(2rem, 7vw, 3.75rem);
    white-space: normal;
  }

  .home_hero_phones {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    max-width: 40em;
    margin: 0 auto;
    gap: 1.25em;
    justify-content: center;
  }

  .home_hero_phone {
    width: auto;
    max-width: 11em;
    flex: 1 1 0;
  }

  .home_hero_phone_img {
    width: 100%;
    height: auto;
  }

  .home_hero_phone.is--okre {
    margin-top: 4.5em;
    margin-bottom: -3.5em;
  }

  .home_hero_phone.is--flugger {
    margin-top: 0;
    margin-bottom: -1em;
  }

  .home_hero_phone.is--hank {
    margin-top: 2.5em;
    margin-bottom: -2.5em;
  }
}

@media screen and (max-width: 479px) {
  .container.is--home-hero {
    padding-top: 4.5em;
    padding-left: 1em;
    padding-right: 1em;
  }

  .home_hero_phones {
    gap: 0.6em;
  }

  .home_hero_phone {
    max-width: 7.5em;
  }

  .home_hero_phone.is--okre {
    margin-top: 3em;
    margin-bottom: -2.25em;
  }

  .home_hero_phone.is--flugger {
    margin-bottom: -0.5em;
  }

  .home_hero_phone.is--hank {
    margin-top: 1.75em;
    margin-bottom: -1.5em;
  }
}

/*
 * Animated titles — SplitText char wrappers (site-wide).
 * Keeps multi-line `<br>` titles stable and lets scale/blur animate cleanly.
 */
.animated-title {
  font-kerning: none;
  text-rendering: optimizeSpeed;
}

.animated-title .char {
  display: inline-block;
  will-change: transform, opacity, filter;
}

.animated-title .line {
  display: block;
  will-change: transform, opacity, filter;
}

/*
 * DO NOT REMOVE — Webflow gradient title accents.
 * .ai-seo_title_gradient / .ai-offer_title_gradient use
 * -webkit-text-fill-color: transparent + background-clip: text.
 * AnimatedTitle SplitText wraps letters in .char — fill-color inherits,
 * but background-image / background-clip do not, so the accent vanishes.
 * Re-apply the Webflow gradients onto the char wrappers (vertical, so
 * per-letter clip still reads as one fade). Keep in sync with
 * paintGradientSplitChars() in AnimatedTitle.tsx.
 */
.animated-title .ai-seo_title_gradient .char {
  background-image: linear-gradient(#ffe0b3, #ffd0b1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.animated-title .ai-offer_title_gradient .char {
  background-image: linear-gradient(#739ab8, #a9c4d2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Scroll color scrub — word wrappers (GSAP sets inline color). */
.scroll-color-text .scroll-color-word,
.home_intro_description .intro-word {
  display: inline-block;
}

/*
 * Kontakt — interactive MapLibre map (Carto Dark Matter + cream pin).
 * Same visual weight as .contact_img (aspect-ratio 1.7).
 */
.contact_map_wrap,
.contact_map {
  width: 100%;
  aspect-ratio: 1.7;
  overflow: hidden;
  background: #232325;
}

.contact_map .maplibregl-map {
  width: 100%;
  height: 100%;
}

.contact_map_pin {
  width: 26px;
  height: 34px;
  background-image: url("/images/map-pin.svg?v=20260802-pin-f9");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  cursor: default;
  border: none;
  box-shadow: none;
  filter: none;
}

.contact_map .maplibregl-ctrl-group {
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  background: transparent;
}

.contact_map .maplibregl-ctrl-group button {
  background-color: #2c2c2e;
  color: #fffcf5;
}

.contact_map .maplibregl-ctrl-group button + button {
  border-top-color: rgba(255, 252, 245, 0.12);
}

.contact_map .maplibregl-ctrl-group button:hover {
  background-color: #3a3a3c;
}

.contact_map .maplibregl-ctrl-icon {
  filter: invert(1) brightness(1.1);
}

/* Compact attrib is a white pill — keep text/links dark (not cream-on-white). */
.contact_map .maplibregl-ctrl-attrib {
  background: rgba(255, 255, 255, 0.92);
  color: #232325;
  font-size: 10px;
}

.contact_map .maplibregl-ctrl-attrib a,
.contact_map .maplibregl-ctrl-attrib a:visited {
  color: #232325;
}

.contact_map .maplibregl-ctrl-attrib a:hover {
  color: #000;
}

/*
 * Case study single — no TOC / author; content left-aligned using freed space.
 */
.post_component.is--single-col {
  display: block;
  width: 100%;
}

.post_component.is--single-col .post_rich_text {
  max-width: 56em;
  width: 100%;
}

/*
 * O Studio — cooperation video lighten blend (Figma / Webflow Designer).
 *
 * Why the previous `.w-background-video { mix-blend-mode: lighten }` did nothing:
 * 1. `.container { z-index: 4 }` creates a stacking context that blocks the blend
 *    backdrop from reaching `.section.bg_color_darker` (#232325), so black video
 *    pixels never lighten against the section.
 * 2. Webflow’s `.w-background-video > video { z-index: -100 }` paints the video
 *    under the blend group’s own buffer (effectively black), so lighten vs black
 *    is a no-op even when blend is applied on the wrapper.
 */
section.bg_color_darker:has(.about_coop_video_wrap) > .container {
  z-index: auto;
}

.about_coop_video_wrap {
  mix-blend-mode: lighten;
  background: transparent;
}

.about_coop_video_wrap .w-background-video {
  mix-blend-mode: normal;
  background: transparent;
}

.about_coop_video_wrap .w-background-video > video {
  z-index: 1;
  background: transparent;
}

/* Clutch widget type 4 — native auto-height / expandifr; keep host full-width */
.section--clutch .clutch-widget-root {
  width: 100%;
  max-width: 100%;
}

.section--clutch .clutch-widget {
  width: 100%;
  max-width: 100%;
  display: block;
}

.section--clutch .clutch-widget iframe {
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* Clutch injects .widgets_wrapper — force full bleed inside host */
.widgets_wrapper,
.section--clutch .widgets_wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.widgets_wrapper > *,
.section--clutch .widgets_wrapper iframe {
  width: 100% !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
 * Wyślij zapytanie / Dziękujemy — layout z Figmy (14850:4946 / 14850:15222).
 * Używa istniejących tokenów kolorów / typografii Webflow; brak dedykowanych
 * klas formularza w eksporcie, stąd lokalne klasy inquiry_* / thanks_*.
 * -------------------------------------------------------------------------- */

.container.is--inquiry,
.container.is--thanks {
  /* Match .container.is--cs-hero / .is--projects — fixed navbar offset */
  padding-top: 9.25em;
  padding-bottom: 5.3125em;
}

.inquiry_hero_title_wrap {
  border-bottom: 1px solid var(--_colors---colors-neutral--lighter, #ececec);
  margin-bottom: 6.75em;
  padding-bottom: 1.25em;
}

.inquiry_body_flex {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2.5em;
}

.inquiry_intro_col {
  flex: 0 1 28em;
  max-width: 28em;
}

.inquiry_form_col {
  flex: 1 1 44.5625em;
  max-width: 44.5625em;
  width: 100%;
  background-color: var(--_colors---colors-neutral--white, #fff);
  padding: 1.875em;
}

.inquiry_aside_col {
  flex: 1 1 22em;
  max-width: 28em;
  width: 100%;
}

.inquiry_aside_card {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
}

.inquiry_aside_card .footer_card_right_col {
  width: 100%;
}

.inquiry_aside_card .footer_card_right_col > p {
  margin: 0;
}

.inquiry_form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.375em;
  width: 100%;
}

.inquiry_fields {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.8125em;
  width: 100%;
}

.inquiry_field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.0625em;
  width: 100%;
  border-bottom: 1px solid var(--_colors---colors--beige-about, #eee4db);
  padding-bottom: 0.1875em;
}

.inquiry_field_row {
  display: flex;
  gap: 1.0625em;
  width: 100%;
}

.inquiry_field_row .inquiry_field {
  flex: 1 1 0;
  min-width: 0;
}

.inquiry_services {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875em;
  width: 100%;
  border-bottom: 1px solid var(--_colors---colors--beige-about, #eee4db);
  padding-bottom: 1.0625em;
}

.inquiry_service {
  display: flex;
  gap: 0.875em;
  align-items: flex-start;
  width: 100%;
  cursor: pointer;
}

.inquiry_field--message {
  min-height: 9.4375em;
}

.inquiry_input {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--_colors---colors-neutral--darker, #232325);
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
}

.inquiry_input::placeholder {
  color: var(--_colors---colors-neutral--light, #a19e99);
  opacity: 1;
}

.inquiry_select_wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.inquiry_select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 1.5em;
  color: var(--_colors---colors-neutral--light, #a19e99);
}

.inquiry_select:valid,
.inquiry_select:not([value=""]) {
  color: var(--_colors---colors-neutral--darker, #232325);
}

.inquiry_select_arrow {
  position: absolute;
  right: 0;
  width: 0.7em;
  height: 0.7em;
  pointer-events: none;
  color: var(--_colors---colors-neutral--darker, #232325);
}

.inquiry_textarea {
  resize: vertical;
  min-height: 5em;
  font: inherit;
}

.inquiry_legal {
  display: flex;
  flex-direction: column;
  gap: 1.0625em;
  width: 100%;
}

.inquiry_consent {
  display: flex;
  gap: 0.875em;
  align-items: flex-start;
  width: 100%;
  cursor: pointer;
}

.inquiry_checkbox {
  flex: none;
  width: 1.1875em;
  height: 1.1875em;
  margin-top: 0.1em;
  accent-color: var(--_colors---colors-neutral--darker, #232325);
}

.inquiry_error {
  color: #b42318;
  margin: 0;
}

.inquiry_brief {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5em;
  width: 100%;
}

.inquiry_brief_hint {
  margin: 0;
}

/* Native file control stays in DOM for FormData / a11y, but is visually hidden —
   the custom „Dodaj brief” button opens the picker via JS click. */
.inquiry_brief_input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.inquiry_brief_actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em 1em;
  width: 100%;
  margin-top: 0.25em;
}

/* Shape/padding/radius come from .button — only gray secondary colors here */
.button.inquiry_brief_btn {
  border-color: var(--_colors---colors-neutral--lighter, #ececec);
  background-color: var(--_colors---colors-neutral--lighter, #ececec);
  color: var(--_colors---colors-neutral--darker, #232325);
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.button.inquiry_brief_btn:hover:not(:disabled) {
  border-color: #e0e0e0;
  background-color: #e0e0e0;
  color: var(--_colors---colors-neutral--darker, #232325);
}

.button.inquiry_brief_btn:focus-visible {
  outline: 2px solid var(--_colors---colors-neutral--darker, #232325);
  outline-offset: 2px;
}

.button.inquiry_brief_btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.inquiry_brief_file {
  display: flex;
  align-items: center;
  gap: 0.75em;
  min-width: 0;
  color: var(--_colors---colors-neutral--darker, #232325);
}

.inquiry_brief_file > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18em;
}

.inquiry_brief_clear {
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--_colors---colors-neutral--light, #a19e99);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  font: inherit;
}

.inquiry_brief_clear:hover:not(:disabled) {
  color: var(--_colors---colors-neutral--darker, #232325);
}

.inquiry_brief_clear:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.inquiry_hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.thanks_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  max-width: 49.25em;
  margin: 0 auto;
  padding-top: 2em;
  padding-bottom: 2em;
}

.thanks_icon {
  width: 8.25em;
  height: 8.25em;
  color: var(--_colors---colors-neutral--darker, #232325);
  margin-bottom: 3.4375em;
}

.thanks_body {
  max-width: 26em;
  margin: 0 auto;
}

.obfuscated-email-inline {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
}

.obfuscated-email-inline:hover {
  opacity: 0.75;
}

.spacer_32px {
  height: 2em;
  width: 100%;
}

@media screen and (max-width: 991px) {
  .inquiry_hero_title_wrap {
    margin-bottom: 3em;
  }

  .inquiry_body_flex {
    flex-direction: column;
    gap: 2.5em;
  }

  .inquiry_intro_col,
  .inquiry_form_col,
  .inquiry_aside_col {
    max-width: none;
    flex: none;
  }

  .inquiry_field_row {
    flex-direction: column;
  }

  .thanks_icon {
    width: 5.5em;
    height: 5.5em;
    margin-bottom: 2em;
  }
}

/* —— Video lightbox (opinie klientów) —— */
.client_card.is-video-lightbox {
  cursor: pointer;
}

.client_card.is-video-lightbox:focus-visible {
  outline: 2px solid var(--_colors---colors-neutral--white, #fff);
  outline-offset: 4px;
}

.video_lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: color-mix(in srgb, #232325 72%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: video_lightbox_fade_in 0.22s ease-out;
}

@keyframes video_lightbox_fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.video_lightbox_dialog {
  position: relative;
  width: min(960px, 90vw);
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  --video-aspect: 16 / 9;
  animation: video_lightbox_scale_in 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.video_lightbox_dialog.is-landscape {
  width: min(960px, 90vw);
  --video-aspect: 16 / 9;
}

.video_lightbox_dialog.is-portrait {
  width: fit-content;
  max-width: min(90vw, calc(85vh * 9 / 16));
  max-height: 85vh;
  --video-aspect: 9 / 16;
}

@keyframes video_lightbox_scale_in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.video_lightbox_close {
  position: absolute;
  top: -0.25rem;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #232325 85%, transparent);
  color: var(--_colors---colors-neutral--white, #fff);
  cursor: pointer;
  transform: translateY(-110%);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.video_lightbox_close:hover,
.video_lightbox_close:focus-visible {
  background: #232325;
  color: #fff;
  outline: none;
}

.video_lightbox_close_icon {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

.video_lightbox_title {
  margin: 0;
  padding-right: 3.5rem;
  color: var(--_colors---colors-neutral--white, #fff);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.video_lightbox_frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--video-aspect, 16 / 9);
  overflow: hidden;
  border-radius: 0.5rem;
  background: #111113;
  box-shadow: 0 1.5rem 4rem color-mix(in srgb, #232325 55%, transparent);
}

.video_lightbox_dialog.is-portrait .video_lightbox_frame {
  width: auto;
  height: min(85vh, calc(100vh - 5.5rem));
  max-height: 85vh;
  max-width: 90vw;
  aspect-ratio: var(--video-aspect, 9 / 16);
}

.video_lightbox_dialog.is-landscape .video_lightbox_frame {
  width: 100%;
  aspect-ratio: var(--video-aspect, 16 / 9);
}

.video_lightbox_video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

@media screen and (max-width: 767px) {
  .video_lightbox {
    padding: 1rem;
    align-items: center;
  }

  .video_lightbox:has(.video_lightbox_dialog.is-landscape) {
    align-items: flex-end;
  }

  .video_lightbox_dialog.is-landscape {
    width: 100%;
  }

  .video_lightbox_dialog.is-portrait {
    max-width: min(92vw, calc(80vh * 9 / 16));
  }

  .video_lightbox_dialog.is-portrait .video_lightbox_frame {
    height: min(80vh, calc(100vh - 5rem));
    max-height: 80vh;
  }

  .video_lightbox_close {
    top: 0;
    right: 0;
    transform: none;
  }

  .video_lightbox_title {
    padding-right: 3rem;
    padding-top: 0.15rem;
  }
}

/*
 * Branding hero phones — left keeps Webflow stagger; only right (is--2) is
 * intentionally cropped (~80% visible). Section overflow clips the hang.
 * Avoid transform here — GSAP owns y on wrap (parallax) and img (entrance).
 */
.section.is--branding-hero {
  overflow: hidden;
}

.section.is--branding-hero .branding_hero_img {
  aspect-ratio: auto;
  object-fit: contain;
  object-position: 50% 0%;
  width: 100%;
  height: auto;
  display: block;
}

/*
 * Right phone (is--2) only: ~20% bottom crop.
 * -6.5em tuned at 1440 so ~80% of the mockup stays inside the section.
 * Left wrap (:not(.is--2)) keeps Webflow margin-bottom: 6em.
 */
.section.is--branding-hero .branding_hero_img_wrap.is--2 {
  margin-bottom: -6.5em;
}

@media screen and (max-width: 991px) {
  .section.is--branding-hero .branding_hero_img_wrap.is--2 {
    margin-bottom: -4em;
  }
}

/*
 * Left phone (Flügger) only: lower ~100px on desktop.
 * Target the img, not the wrap — wrap size stays put so HANK (is--2)
 * does not shift. No transform: GSAP owns y on wrap (parallax) and img (entrance).
 */
@media screen and (min-width: 992px) {
  .section.is--branding-hero .branding_hero_img_wrap:not(.is--2) .branding_hero_img {
    position: relative;
    top: 100px;
  }
}

/*
 * Footer „Wypełnij brief” — cały blok jest jednym linkiem.
 * Hover/focus na karcie odpala animację podkreślenia „Wyślij zapytanie”
 * (bez zagnieżdżonego <a>).
 */
a.footer_brief_stroke_wrap.is--brief-link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.footer_brief_stroke_wrap.is--brief-link:hover .link-block,
.footer_brief_stroke_wrap.is--brief-link:focus-visible .link-block {
  opacity: 0.8;
}

.footer_brief_stroke_wrap.is--brief-link:hover .link_line,
.footer_brief_stroke_wrap.is--brief-link:focus-visible .link_line {
  transform: translate(100%, 0%);
}

/*
 * Polityka prywatności — readable legal/article rhythm.
 * WP content uses semantic <h2> under page <h1>; display H2 (3em / lh 1.2)
 * is too large for long question headings, so we restyle only on this page.
 */
.container.is--legal-page {
  /* is-wpis has padding-bottom: 0 — restore comfortable section exit */
  padding-bottom: 5.3em;
}

.post_component.is--legal .post_rich_text {
  /* Slightly tighter measure than case-study 56em for long-form prose */
  max-width: 40em;
  width: 100%;
  font-size: 1em; /* ~16px desktop; mobile body scale (~14px) via global body rule */
  line-height: 1.55;
  color: var(--_colors---colors-neutral--darker, #232325);
}

.post_component.is--legal .post_rich_text h2 {
  font-size: var(--_typography---h5--font-size); /* 1.5em — section, not display */
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-top: 2.5em;
  margin-bottom: 0.75em;
  max-width: 22em;
}

.post_component.is--legal .post_rich_text h2:first-child {
  margin-top: 0;
}

.post_component.is--legal .post_rich_text h3 {
  font-size: var(--_typography---h6--font-size);
  font-weight: 500;
  line-height: 1.4;
  margin-top: 1.75em;
  margin-bottom: 0.55em;
}

.post_component.is--legal .post_rich_text p,
.post_component.is--legal .post_rich_text ul,
.post_component.is--legal .post_rich_text ol {
  margin-top: 0;
  margin-bottom: 1.1em;
  line-height: 1.55;
}

.post_component.is--legal .post_rich_text li {
  margin-bottom: 0.35em;
  line-height: 1.55;
}

.post_component.is--legal .post_rich_text ul,
.post_component.is--legal .post_rich_text ol {
  padding-left: 1.25em;
}

.post_component.is--legal .post_rich_text a,
.post_component.is--legal .post_rich_text .obfuscated-email-inline {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@media screen and (max-width: 767px) {
  .container.is--legal-page {
    padding-bottom: 4em;
  }

  .post_component.is--legal .post_rich_text h2 {
    font-size: 1.25em; /* closer to h6 on small screens */
    line-height: 1.35;
    margin-top: 2em;
    margin-bottom: 0.6em;
    max-width: none;
  }

  .post_component.is--legal .post_rich_text {
    line-height: 1.5;
  }
}

/*
 * Industries stats rotator.
 * Incoming layer is in-flow (sets slot height). Outgoing is absolutely
 * overlaid in the same slot — never a second grid row / 6 stacked items.
 */
.stats_grid.is--industries {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-auto-flow: row;
  align-items: start;
}

.stats_number_wrap.is--industries {
  align-items: flex-end;
}

.stats_number_wrap.is--industries .h1 {
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

.stats_number_wrap.is--industries .h5 {
  line-height: 1;
  padding-bottom: 0.06em;
}

.stats_col.is--industries .text_14px.is--label {
  min-height: 2.5em;
}

.industries_stat_slot {
  --industries-fade: 520ms;
  --industries-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --industries-stagger: 0ms;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: layout;
}

.industries_stat_layer.is--in {
  position: relative;
  z-index: 0;
}

.industries_stat_layer.is--in.is--swap {
  animation: industries-stat-in var(--industries-fade) var(--industries-ease) var(--industries-stagger) both;
}

.industries_stat_layer.is--out {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
  transition:
    opacity var(--industries-fade) var(--industries-ease) var(--industries-stagger),
    transform var(--industries-fade) var(--industries-ease) var(--industries-stagger),
    filter var(--industries-fade) var(--industries-ease) var(--industries-stagger);
}

.industries_stat_layer.is--out.is--exit {
  opacity: 0;
  transform: translate3d(0, -0.45em, 0);
  filter: blur(2px);
}

.industries_stat_suffix {
  display: inline;
  opacity: 0;
  transition: opacity 220ms var(--industries-ease, cubic-bezier(0.23, 1, 0.32, 1));
}

.industries_stat_suffix.is--on {
  opacity: 1;
}

@keyframes industries-stat-in {
  from {
    opacity: 0;
    transform: translate3d(0, 0.45em, 0);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
}

@media screen and (max-width: 991px) {
  .stats_grid.is--industries {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .stats_grid.is--industries {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-column-gap: 0.75em;
    grid-row-gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .industries_stat_layer.is--in.is--swap,
  .industries_stat_layer.is--out,
  .industries_stat_suffix {
    animation: none;
    transition: none;
    filter: none;
    transform: none;
  }
}

/*
 * Porady singles: full-width 16:9 player, left-aligned with article column.
 * Webflow `.wpis_video_flex` + “Wersja video” squeezed the embed to 0 height.
 */
.container.is-wpis .wpis_video_wrap {
  width: 100%;
  max-width: 56em;
  margin-top: 2.5em;
}

.container.is-wpis .wpis_video.w-embed-youtubevideo {
  position: relative;
  width: 100%;
  height: 0;
  padding: 0;
  padding-top: 56.25%;
  background-color: #111;
  background-image: none;
  overflow: hidden;
}

.container.is-wpis .wpis_video.w-embed-youtubevideo iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.container.is-wpis .wpis_video_wrap + .post_component.is--single-col {
  margin-top: 3em;
}

/*
 * In-post images: Webflow `.w-richtext figure` is max-width 60%.
 * Singles should always span the content column.
 */
.post_component.is--single-col .post_rich_text figure,
.post_component.is--single-col .post_rich_text figure.w-richtext-align-floatleft,
.post_component.is--single-col .post_rich_text figure.w-richtext-align-floatright,
.post_component.is--single-col .post_rich_text figure.w-richtext-align-center {
  float: none;
  width: 100%;
  max-width: 100%;
  display: block;
  margin: 1.5em 0;
  clear: both;
}

.post_component.is--single-col .post_rich_text img,
.post_component.is--single-col .post_rich_text figure img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * Article headings: page already has a hero H1. Body h2/h3 were inheriting
 * display sizes (3em / 2.5em). Match case-study h4/h5 scale.
 */
.post_component.is--single-col .post_rich_text h1,
.post_component.is--single-col .post_rich_text h2 {
  font-size: var(--_typography---h4--font-size);
  line-height: 1.3;
  font-weight: 500;
  margin-top: 1.25em;
  margin-bottom: 0.5em;
}

.post_component.is--single-col .post_rich_text h3,
.post_component.is--single-col .post_rich_text h4 {
  font-size: var(--_typography---h5--font-size);
  line-height: 1.35;
  font-weight: 500;
  margin-top: 1em;
  margin-bottom: 0.45em;
}

.post_component.is--single-col .post_rich_text h5,
.post_component.is--single-col .post_rich_text h6 {
  font-size: var(--_typography---h6--font-size);
  line-height: 1.4;
  font-weight: 500;
  margin-top: 0.9em;
  margin-bottom: 0.4em;
}

/* Promoted tags keep the previous visual scale (class, not tag, controls size). */
.post_component.is--single-col .post_rich_text h2.h4 {
  font-size: var(--_typography---h5--font-size);
  line-height: 1.35;
}

.post_component.is--single-col .post_rich_text h3.h5 {
  font-size: var(--_typography---h6--font-size);
  line-height: 1.4;
}

/*
 * Tips cards: pin CTA to the bottom of the row so "Zobacz video" /
 * "Przeczytaj" share one baseline when titles wrap to different line counts.
 * Grid stretch + flex column + margin-top:auto. No fixed title height.
 * Single-column (mobile) cards stay content-height, so auto margin is a no-op.
 */
.tips_grid {
  align-items: stretch;
}

.tips_card {
  height: 100%;
}

.tips_card > .link-block {
  margin-top: auto;
}

.tips_card_title {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.tips_card_title:hover,
.tips_card_title:focus-visible {
  text-decoration: underline;
}

/*
 * Footer without the brief box.
 * Desktop: flatten .footer_right_col so the row is
 *   heading | contact card | Spektrum
 * with 1fr auto 1fr. The card stays content-sized in the center;
 * leftover space becomes equal gutters on both sides.
 */
@media screen and (min-width: 992px) {
  .footer_component {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .footer_right_col {
    display: contents;
  }

  .footer_card {
    width: max-content;
    max-width: 100%;
  }

  .footer_spektrum_wrap {
    justify-self: end;
    align-self: stretch;
    min-width: 0;
    width: auto;
    max-width: 18.5em;
    padding-left: 0;
    text-align: right;
  }
}

/*
 * Tablet: heading already stacks; keep card + Spektrum as a 2-col inner grid.
 * Webflow is still 1fr .43fr .72fr here, without the brief cell that leaves a hole.
 */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .footer_right_col {
    grid-template-columns: 1fr 0.62fr;
  }
}

.footer_spektrum_logo {
  max-width: 8.1em; /* was 9.38em */
}

.footer_spektrum_wrap .text_14px {
  font-size: 0.78em; /* was .88em via --text-14px */
}

@media screen and (max-width: 767px) {
  .footer_right_col {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 479px) {
  .footer_spektrum_logo {
    max-width: 9.5em; /* was 11em */
  }
}

.container.is--project-hero > .link-block {
  margin-bottom: 2.25em;
}

/*
 * Equal vertical rhythm around the hero rule:
 * name → line (.project_hero_flex margin-top) === line → description (padding-top).
 * Webflow export was 3.13em / 5em (desktop) and 3em / 4em (≤767px).
 */
.section.is--project-hero .project_hero_flex {
  margin-top: 3.13em;
  padding-top: 3.13em;
  border-top-color: currentColor;
}

@media screen and (max-width: 767px) {
  .section.is--project-hero .project_hero_flex {
    margin-top: 3em;
    padding-top: 3em;
  }
}

.section.is--project-hero .project_hero_body {
  margin-top: 1em;
}

/*
 * Oferta: CTA zapytania (Figma 14997:12488). WWW/branding i Wdrożenia AI.
 * Wycentrowany stos: zdjęcie 124px, H3, H5, button. Tło jak hero brandingu,
 * ale w poziomie (beż → cream).
 */
.section.is--inq-cta-portrait {
  background-image: linear-gradient(
    90deg,
    var(--_colors---colors-neutral--beige),
    var(--_colors---colors-neutral--lightest)
  );
}

.container.is--inq-cta-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 992px) {
  .container.is--inq-cta-portrait {
    min-height: 39.25em;
    padding-top: 4em;
    padding-bottom: 4em;
  }
}

.offer_inq_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.44em;
  width: 100%;
  max-width: 38.56em;
  margin-left: auto;
  margin-right: auto;
}

.offer_inq_cta .h3 {
  max-width: 15.2em;
}

.offer_inq_cta .h5 {
  font-weight: 500;
}

.offer_inq_cta_photo {
  flex: none;
  width: 7.75em;
  height: 7.75em;
  border-radius: 50em;
  overflow: clip;
}

.offer_inq_cta_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

@media screen and (max-width: 767px) {
  .offer_inq_cta {
    gap: 1.15em;
  }

  .offer_inq_cta_photo {
    width: 6.5em;
    height: 6.5em;
  }
}

/*
 * /o-studio — Figma team intro immediately under „Nasz zespół”.
 * Hairline + centered 18px copy + overlapping circular avatars.
 */
.container.is--about-team-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
}

.about_team_intro_line {
  width: 100%;
  height: 1px;
  background-color: var(--_colors---colors-neutral--darker);
  opacity: 0.5;
}

.about_team_intro_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.875em;
  width: 100%;
  max-width: 46.7em;
  margin-top: 5.3em;
}

.about_team_intro_text {
  width: 100%;
  max-width: 42.375em;
  text-align: center;
}

.about_team_intro_text .text_18px {
  margin-top: 0;
  margin-bottom: 0;
}

.about_team_intro_text .text_18px + .text_18px {
  margin-top: 1.5em;
}

.about_team_intro_avatars {
  display: flex;
  align-items: center;
  justify-content: center;
}

.about_team_intro_avatar {
  position: relative;
  flex: 0 0 auto;
  width: 9.125em;
  height: 9.125em;
  margin-right: -1.6875em;
  overflow: hidden;
  border: 0.3125em solid var(--_colors---colors-neutral--beige);
  border-radius: 50%;
  background-color: var(--_colors---colors-neutral--beige);
}

.about_team_intro_avatar:last-child {
  margin-right: 0;
}

.about_team_intro_avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .about_team_intro_inner {
    gap: 1.5em;
    margin-top: 3.5em;
  }

  .about_team_intro_avatar {
    width: 5.5em;
    height: 5.5em;
    margin-right: -1em;
    border-width: 0.2em;
  }
}

@media screen and (max-width: 479px) {
  .about_team_intro_avatar {
    width: 4.5em;
    height: 4.5em;
    margin-right: -0.85em;
  }
}

/* Kontakt remote: eyebrow only (no H2, no section_title_wrap line). */
.container.is--contact-hero > .text_14px.is--label {
  margin-bottom: 2.13em;
}

/*
 * SEO hero icon scatter experiment.
 * Toggle: frontend/components/sections/SeoAiHero.tsx
 *   const SEO_HERO_ICONS_SCATTERED = true
 * Desktop: icons sit in the side gutters so they never cover H1 / lead.
 * Mobile / tablet: original flex row (no absolute scatter).
 */
.section.is--seo-hero-scattered {
  overflow: hidden;
}

@media screen and (min-width: 992px) {
  .section.is--seo-hero-scattered .container.is--ai-seo-hero {
    isolation: isolate;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logos_list {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    margin-bottom: 0;
    pointer-events: none;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_content_wrap {
    position: relative;
    z-index: 2;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap {
    position: absolute;
    pointer-events: none;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter-layer="0"] {
    width: 4.5em;
    height: 4.5em;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter-layer="1"] {
    width: 5.15em;
    height: 5.15em;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter-layer="2"] {
    width: 5.6em;
    height: 5.6em;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter-layer="3"] {
    width: 6.1em;
    height: 6.1em;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="0"] {
    top: 18%;
    left: 2.5%;
    rotate: -7deg;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="1"] {
    top: 15%;
    right: 3.5%;
    rotate: 5deg;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="2"] {
    top: 42%;
    left: 7%;
    rotate: 4deg;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="3"] {
    top: 38%;
    right: 1.5%;
    rotate: -5deg;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="4"] {
    top: 66%;
    right: 8%;
    rotate: 7deg;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="5"] {
    top: 68%;
    left: 1.5%;
    rotate: -4deg;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="6"] {
    top: 77%;
    right: 2.5%;
    rotate: -8deg;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="7"] {
    top: 80%;
    left: 8%;
    rotate: 6deg;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap img {
    animation: seo-hero-icon-in 0.72s ease-out both;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="1"] img {
    animation-delay: 0.09s;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="2"] img {
    animation-delay: 0.18s;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="3"] img {
    animation-delay: 0.27s;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="4"] img {
    animation-delay: 0.36s;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="5"] img {
    animation-delay: 0.45s;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="6"] img {
    animation-delay: 0.54s;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="7"] img {
    animation-delay: 0.63s;
  }
}

@keyframes seo-hero-icon-in {
  from {
    filter: blur(10px);
    opacity: 0.45;
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter-layer="0"] {
    width: 4em;
    height: 4em;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter-layer="1"] {
    width: 4.5em;
    height: 4.5em;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter-layer="2"] {
    width: 4.85em;
    height: 4.85em;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter-layer="3"] {
    width: 5.15em;
    height: 5.15em;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="2"] {
    left: 3.5%;
  }

  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap[data-seo-scatter="4"] {
    right: 3%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section.is--seo-hero-scattered .ai-seo_hero_logo_wrap img {
    animation: none;
    filter: none;
    opacity: 1;
  }
}

/*
 * Mobile display headings: 90% of the Webflow 767 type scale.
 * studio-brothers-123.css keeps the same tokens at 991 / 767 / 479
 * (h1 3.75em, h2 3em, h3 2.5em). User asked for mobile only, so
 * scale that 767 size here. Do not also shrink tablet 768-991.
 * Explicit em (not 0.9em) so nested headings do not compound.
 * Leaves .text_14px, .is--label, body, buttons, footer legal,
 * home-hero clamp, contact 9vw, and title-gradient .char rules alone.
 */
@media screen and (max-width: 767px) {
  h1,
  .h1 {
    font-size: 3.375em; /* 3.75em × 0.9 */
  }

  h2,
  .h2 {
    font-size: 2.7em; /* 3em × 0.9 */
  }

  h3,
  .h3 {
    font-size: 2.25em; /* 2.5em × 0.9 */
  }
}

/*
 * AI offer hero: widen the heading + lead column ~20% so copy wraps
 * differently. Desktop only; tablet 28em / mobile full-width stay as-is.
 * Does not touch .is--ai-seo-hero or .is--branding-hero.
 */
@media screen and (min-width: 992px) {
  .section.is--ai-offer-hero .ai-offer_hero_content_wrap {
    max-width: 40.57em; /* was 33.81em */
  }

  .section.is--ai-offer-hero .ai-offer_hero_text_wrap {
    max-width: 26.26em; /* was 21.88em */
  }
}


