/* ============================================================
   PROJECT — Case study detail page (reusable across projects)
   Built on cosmoframe tokens. Light base with dark feature
   sections, mirroring the homepage's light/dark rhythm.
   ============================================================ */

.project {
  position: relative;
  z-index: 2;
  background-color: var(--color-bg);
}

/* Full-bleed helper: breaks out of .container padding to edge-to-edge */
.project__bleed {
  width: 100%;
}

/* ============================================================
   NAV — light treatment over the dark hero (top, pre-collapse)
   Once collapsed into the white pill, normal styling resumes.
   ============================================================ */

.has-dark-hero .nav:not(.is-collapsed) .nav__logo-full {
  filter: brightness(0) invert(1);
}

.has-dark-hero .nav:not(.is-collapsed) .nav__link {
  color: #ffffff;
}

.has-dark-hero .nav:not(.is-collapsed) .nav__link--has-dropdown::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><path d='M1 1l3 3 3-3' stroke='%23ffffff' stroke-width='1' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.has-dark-hero .nav:not(.is-collapsed) .nav__contact {
  background-color: #ffffff;
  color: var(--color-fg);
}

.has-dark-hero .nav:not(.is-collapsed) .nav__contact:hover {
  background-color: var(--color-accent);
  color: var(--color-fg);
}

/* ============================================================
   HERO — full-screen black. The big title is pinned in the centre
   while the mower image scrolls past behind it; once the image
   runs out, the title scrolls away too. Pure CSS (position: sticky).
   ============================================================ */

/* ── HERO scroll sequence ──────────────────────────────────────────────
   Whole image visible & scrolling from the start.
   Title + CTA pinned (sticky) over it. At scroll = 100vh the hero ends
   and text gets carried away together with the last part of the image.

   Structure:
     .proj-hero            height: 200vh, position: relative
       .proj-hero__media   position: absolute; inset: 0  → fills 200vh, scrolls
       .proj-hero__stage   position: sticky; top: 0; height: 100vh → pinned 0..100vh
   ─────────────────────────────────────────────────────────────────── */

/* Figma canvas: 1512×1868px, viewport at design: 780px tall.
   Hero height = 1868/780 = 239.7vh ≈ 240vh.
   Image top in Figma: 503px.
   503px expressed as % of hero height: 503/1868 = 26.93%.
   On any screen this maps to exactly 26.93% of 240vh = 64.6vh — precise. */
.proj-hero {
  position: relative;
  height: 240vh;
  height: 240svh;
  background: #000;
  overflow: clip;
}

/* Image: 26.93% of the hero = exactly Figma top:503px scaled proportionally */
.proj-hero__media {
  position: absolute;
  top: 26.93%;   /* 503/1868 — proportional to hero height, screen-size independent */
  left: 0;
  right: 0;
  z-index: 0;
}

.proj-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  /* spider-hero.png already has the diagonal alpha mask baked in (RGBA PNG) */
}

/* Stage: sticky slab — holds title + CTA.
   Sticks from scroll=0 to scroll=100vh (hero bottom − stage height).
   After that it scrolls away with the remaining image. */
.proj-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  z-index: 2;
  background: transparent;
  pointer-events: none;
}

.proj-hero__title {
  position: absolute;
  top: 272px;
  left: var(--page-padding);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: var(--tracking-hero);
  color: #ffffff;
}

.proj-hero__cta {
  position: absolute;
  bottom: 54px;
  left: var(--page-padding);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 38px;
  border-radius: var(--radius-pill);
  background-color: rgba(132, 132, 132, 0.2);
  color: #ffffff;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.1;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.proj-hero__cta:hover {
  background-color: var(--color-accent);
  color: var(--color-fg);
}

.proj-hero__cta svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Everything after hero stacks on top */
.proj-meta,
.proj-projects,
.proj-results,
.proj-credits,
.proj-feature,
.proj-statement,
.proj-final,
.proj-next,
.project .contact {
  position: relative;
  z-index: 2;
}

/* ── Tablet & below: static stack, no scroll trick ── */
@media (max-width: 1023px) {
  .proj-hero {
    height: auto;
    overflow: visible;
  }
  .proj-hero__media {
    position: relative;
    top: auto;
    height: auto;
  }
  .proj-hero__stage {
    position: relative;
    top: auto;
    height: auto;
    padding: 48px var(--page-padding) 56px;
    background: #000;
    pointer-events: auto;
  }
  .proj-hero__title { position: static; margin-bottom: 40px; }
  .proj-hero__cta   { position: static; }
}

@media (max-width: 767px) {
  .proj-hero__stage { padding-top: 116px; }
}

/* ── Simple hero variant — used on non-Spider project pages.
   No sticky scroll trick: title top-left, image fills below. ── */
.proj-hero--simple {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.proj-hero--simple .proj-hero__stage {
  position: relative;
  top: auto;
  height: auto;
  padding: 160px var(--page-padding) 56px;
  background: transparent;
  pointer-events: auto;
  z-index: 2;
  flex-shrink: 0;
}

.proj-hero--simple .proj-hero__title {
  position: static;
  margin-bottom: 40px;
}

.proj-hero--simple .proj-hero__cta {
  position: static;
}

.proj-hero--simple .proj-hero__media {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex: 1;
  z-index: 0;
}

.proj-hero--simple .proj-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 65vh;
  object-fit: cover;
}

@media (max-width: 767px) {
  .proj-hero--simple .proj-hero__stage {
    padding-top: 116px;
  }
}

/* ============================================================
   META — intro paragraph + info blocks
   ============================================================ */

.proj-meta {
  background: #000;
  color: #ffffff;
  display: grid;
  grid-template-columns: 545px 247px 247px 1fr;   /* Figma x: 0 / 545 / 792 / 1039 */
  column-gap: 0;
  row-gap: 0;
  padding-top: 125px;            /* gap from image bottom (1483 → 1608) */
  padding-bottom: 125px;
  align-items: start;
}

.proj-meta__intro {
  max-width: 420px;
  font-size: var(--text-body-l);        /* 20px */
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.4px;
  color: #6e6e74;
  margin: 0;
}

.proj-meta__intro strong {
  color: #ffffff;
  font-weight: 500;
}

.proj-meta__col {
  display: flex;
  flex-direction: column;
  gap: 22px;                     /* rows at y 1608 / 1684 (76px apart) */
}

.proj-info {
  display: flex;
  flex-direction: column;
}

.proj-info__label {
  font-size: var(--text-body-l);        /* 20px */
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.4px;
  color: #6e6e74;
}

.proj-info__value {
  font-size: var(--text-body-l);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.4px;
  color: #ffffff;
}

@media (max-width: 1023px) {
  .proj-meta {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-12);
    row-gap: var(--space-12);
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
  .proj-meta__intro {
    grid-column: 1 / -1;
    max-width: 560px;
    margin-bottom: var(--space-6);
  }
}

@media (max-width: 767px) {
  .proj-meta {
    grid-template-columns: 1fr;
    row-gap: var(--space-8);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* ============================================================
   FEATURE SECTION (light — wraps slider + promo)
   Part of the one large light content block.
   ============================================================ */

.proj-feature {
  background-color: var(--color-bg);
  color: var(--color-fg);
  padding-top: var(--space-24);
  padding-bottom: var(--space-24);
}

.proj-section-title {
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

/* ============================================================
   SLIDER (horizontal, snap)
   ============================================================ */

.proj-slider__head {
  margin-bottom: var(--space-12);
}

.proj-slider {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: var(--page-padding);
}

.proj-slider::-webkit-scrollbar {
  display: none;
}

.proj-slider__track {
  display: flex;
  gap: var(--space-6);
  /* leading offset aligns first card with .container gutter */
  padding-left: max(var(--page-padding), calc((100vw - var(--page-max-width)) / 2 + var(--page-padding)));
}

.proj-slider__track::after {
  content: "";
  flex: 0 0 var(--page-padding);
}

.proj-card {
  position: relative;
  flex: 0 0 min(880px, 82vw);
  aspect-ratio: 880 / 549;
  scroll-snap-align: start;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #e6e6e9;
}

.proj-card img,
.proj-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}

.proj-card:hover img,
.proj-card:hover video {
  transform: scale(1.04);
}

.proj-card__caption {
  position: absolute;
  top: var(--space-8);
  left: var(--space-8);
  right: var(--space-8);
  z-index: 2;
  max-width: 560px;
  font-size: var(--text-body-l);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-body-l);
}

.proj-card__caption--dark { color: var(--color-fg); }
.proj-card__caption--light { color: #ffffff; }

/* ----- Arrows ----- */
.proj-slider__nav {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-10);
}

.proj-arrow {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  border: none;
  background-color: #e6e6e9;
  color: var(--color-fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

.proj-arrow svg {
  width: 18px;
  height: 18px;
}

.proj-arrow:hover {
  background-color: #dadade;
}

.proj-arrow:disabled,
.proj-arrow.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ============================================================
   PRODUCT PROMO (big heading + 2-col image grid)
   ============================================================ */

.proj-promo {
  margin-top: var(--space-20);
}

.proj-promo__head {
  margin-bottom: var(--space-16);
}

.proj-promo__title {
  font-size: clamp(36px, 5.5vw, 72px);
  font-weight: 500;
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-display);
}

.proj-promo__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.proj-promo__grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
}

@media (max-width: 767px) {
  .proj-promo__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   STATEMENT + FINAL IMAGE
   ============================================================ */

.proj-statement {
  padding-top: var(--space-20);
  padding-bottom: var(--space-12);
}

.proj-statement__title {
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.proj-final {
  padding-bottom: var(--space-24);
}

.proj-final img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-lg);
}

/* ============================================================
   NEXT / BACK TO WORK
   ============================================================ */

.proj-next {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--space-16) var(--page-padding);
  border-top: 1px solid var(--color-stroke);
}

.proj-next__label {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-small);
  color: var(--color-muted);
}

.proj-next__title {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: var(--tracking-display);
  color: var(--color-fg);
  transition: color var(--duration-fast) var(--ease-out);
}

.proj-next__arrow {
  margin-left: auto;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-circle);
  background-color: var(--color-fg);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}

.proj-next__arrow svg { width: 22px; height: 22px; }

.proj-next:hover .proj-next__arrow {
  background-color: var(--color-accent);
  color: var(--color-fg);
  transform: translateX(4px);
}

/* ============================================================
   MOBILE — no horizontal side-scroll; everything stacks
   ============================================================ */

@media (max-width: 767px) {
  .proj-slider {
    overflow: visible;
  }
  .proj-slider__track {
    flex-direction: column;
    padding-left: var(--page-padding);
    padding-right: var(--page-padding);
    gap: var(--space-4);
  }
  .proj-slider__track::after { display: none; }
  .proj-card {
    flex: none;
    width: 100%;
    aspect-ratio: 4 / 3;
  }
  .proj-slider__nav { display: none; }

  .proj-meta { gap: var(--space-8); }

  .proj-next {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .proj-next__arrow { margin-left: 0; }
}

/* ============================================================
   SCROLL-REVEAL initial states (cleared by GSAP / .is-ready)
   ============================================================ */

.no-js .proj-reveal { opacity: 1; }

/* ============================================================
   PROJECTS SECTION — Figma 194:633
   bg: #1d1d1f (same as --color-fg), 125px top+bottom padding
   All grid cards, tabs, billboard.
   ============================================================ */

.proj-projects {
  background-color: var(--color-fg);
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.proj-projects__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 125px var(--page-padding) 125px;
}

/* --- Header: heading left, subline right --- */
.proj-projects__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 0;
}

.proj-projects__heading {
  font-size: clamp(36px, 3.57vw, 54px);
  font-weight: 500;
  letter-spacing: -2.16px;
  line-height: var(--leading-tight);
  color: #ffffff;
  flex-shrink: 0;
  margin: 0;
}

.proj-projects__subline {
  font-size: var(--text-body-l);
  font-weight: 400;
  letter-spacing: var(--tracking-body-l);
  line-height: var(--leading-normal);
  color: #ffffff;
  max-width: 436px;
  margin: 5px 0 0 0;
  padding-top: 0;
}

/* --- Divider (under subline, right side) --- */
.proj-projects__divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  /* align under the subline column only — visually ~from right ~60% to edge */
  margin-left: calc(100% - 436px - var(--page-padding) - var(--page-padding));
  margin-top: 20px;
  margin-bottom: 0;
}

/* --- Tabs --- */
.proj-tabs {
  display: flex;
  gap: 0;
  margin-top: 54px;
  margin-bottom: 46px;
}

.proj-tab {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: 50px;
  color: #86868c;
  transition: color var(--duration-fast) var(--ease-out);
}

.proj-tab.is-active {
  color: #ffffff;
}

.proj-tab:hover {
  color: rgba(255, 255, 255, 0.8);
}

.proj-tab__name {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.38vw, 36px);
  font-weight: 500;
  letter-spacing: -0.72px;
  line-height: 1;
}

.proj-tab__count {
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1;
  opacity: 0.7;
}

/* --- 4-col card grid --- */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.proj-grid--row1 {
  height: 605px;
}

.proj-grid--row2 {
  height: 425px;
  margin-top: 0;
}

.proj-grid__card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: #000;
}

.proj-grid__card--light {
  background: #ffffff;
}

.proj-grid__card--gradient {
  background: linear-gradient(160deg, #2a2a2e 0%, #111 100%);
}

.proj-grid__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--ease-out);
}

.proj-grid__card:hover .proj-grid__media {
  transform: scale(1.04);
}

/* Overlay for "THE FIRST SPIDER" card */
.proj-grid__card--overlay .proj-grid__card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.proj-grid__card-text {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.15;
  color: #ffffff;
  text-transform: uppercase;
  margin: 0;
}

/* --- Grid labels row (below each grid row) --- */
.proj-grid__labels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 40px;
}

.proj-grid__labels--single {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.proj-grid__label-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proj-grid__label-title {
  font-family: var(--font-display);
  font-size: var(--text-body-l);
  font-weight: 500;
  letter-spacing: var(--tracking-body-l);
  color: #ffffff;
  line-height: 1.2;
}

.proj-grid__label-sub {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: -0.24px;
  color: #86868c;
  line-height: 1.4;
}

/* --- Billboard --- */
.proj-billboard {
  margin-top: 0;
}

.proj-billboard__card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #111;
  height: 714px;
  position: relative;
}

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

/* ============================================================
   FILTERED VIEW — kdyz je aktivni jiny tab nez "All".
   Grid se prepne na uhledne 2 sloupce s auto vyskou, takze
   vybrane polozky vyplni rady a prazdne rady se sbali.
   "All" = puvodni designovy layout (pevne vysky, 4 sloupce).
   ============================================================ */
.proj-projects.is-filtering .proj-grid,
.proj-projects.is-filtering .proj-grid__labels {
  grid-template-columns: repeat(2, 1fr);
  height: auto;
}

.proj-projects.is-filtering .proj-grid__card {
  aspect-ratio: 4 / 5;
  height: auto;
}

/* jemny fade-in vybranych karet pri prepnuti filtru */
.proj-projects.is-filtering .proj-grid__card {
  animation: proj-filter-in 450ms var(--ease-out) both;
}

@keyframes proj-filter-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .proj-projects.is-filtering .proj-grid,
  .proj-projects.is-filtering .proj-grid__labels {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PAIRED ITEM GRID — karta + popisek pohromade (.proj-item).
   Kazda karta ma popisek primo pod sebou, takze se nikdy
   "neodlepi" (ani na mobilu) a filtr je paruje automaticky.
   Karty drzi 9:16 (reels) na vsech velikostech.
   ============================================================ */
.proj-grid--items {
  grid-template-columns: repeat(4, 1fr);
  gap: 44px 12px;
  height: auto;
  align-items: start;
}

.proj-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.proj-item .proj-grid__card {
  aspect-ratio: 9 / 16;     /* reels 9:16 */
  height: auto;
  width: 100%;
}

/* Media vyplni kartu absolutne — height:100% se neda spocitat proti
   vysce z aspect-ratio, takze fixujeme pres inset:0 (cover, zadne bile mezery) */
.proj-item .proj-grid__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* spodni 4 karty — pomer presne na obrazky 340x425 */
.proj-item--card425 .proj-grid__card {
  aspect-ratio: 340 / 425;
}

/* billboard / wide item — pres celou sirku */
.proj-item--wide { grid-column: 1 / -1; }
.proj-item--wide .proj-grid__card { aspect-ratio: 16 / 9; }  /* full-width banner, vyssi nez predtim */

@media (max-width: 1023px) {
  .proj-grid--items { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .proj-grid--items { grid-template-columns: 1fr; gap: 28px; }
}

/* ============================================================
   RESULTS SECTION — Figma 195:928
   ============================================================ */

.proj-results {
  background-color: var(--color-fg);
  color: #ffffff;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.proj-results__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 125px var(--page-padding) 125px;
}

.proj-results__heading {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.72px;
  color: #ffffff;
  margin: 0 0 76px 0;
  line-height: 1.1;
}

/* 4-col stat cards */
.proj-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 100px;
}

.proj-stat {
  border: 2px solid #D2D2D8;
  border-radius: var(--radius-lg);
  padding: 40px 28px 28px;
  display: flex;
  flex-direction: column;
  min-height: 198px;
  justify-content: space-between;
}

.proj-stat__number {
  font-family: var(--font-display);
  font-size: clamp(36px, 3.57vw, 54px);
  font-weight: 500;
  letter-spacing: -2.16px;
  color: #ffffff;
  line-height: 1;
}

.proj-stat__label {
  font-family: var(--font-display);
  font-size: var(--text-body-l);
  font-weight: 400;
  letter-spacing: var(--tracking-body-l);
  color: #86868c;
  line-height: var(--leading-normal);
  max-width: 220px;
}

/* Testimonial */
.proj-testimonial {
  max-width: var(--page-max-width);
  margin-left: auto;
  padding-left: calc(100% - 694px - var(--page-padding) - var(--page-padding));
}

.proj-testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.38vw, 36px);
  font-weight: 500;
  letter-spacing: -0.72px;
  color: #ffffff;
  line-height: var(--leading-snug);
  max-width: 694px;
  margin: 0 0 32px 0;
}

.proj-testimonial__byline {
  display: flex;
  align-items: center;
  gap: 16px;
}

.proj-testimonial__avatar {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 6px;
}

.proj-testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1);
}

.proj-testimonial__attr {
  font-family: var(--font-display);
  font-size: var(--text-body-l);
  font-weight: 400;
  letter-spacing: var(--tracking-body-l);
  color: #86868c;
}

/* ============================================================
   CREDITS / NEXT CASE SECTION — Figma 195:1141
   ============================================================ */

.proj-credits {
  background-color: var(--color-fg);
  color: #ffffff;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.proj-credits__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 125px var(--page-padding) 125px;
  display: grid;
  grid-template-columns: 818fr 588fr;
  gap: 12px;
  align-items: start;
}

/* Both cards share */
.proj-credits__card {
  border-radius: var(--radius-lg);
  background: #000;
  height: 524px;
  position: relative;
  overflow: hidden;
}

/* Left card — Credits
   Figma layout (top→bottom): Credits title | grid | Learn about us pill */
.proj-credits__card--left {
  display: flex;
  flex-direction: column;
  padding: 42px;
  gap: 0;
}

.proj-credits__pill {
  display: inline-flex;
  align-self: flex-start;
  margin-top: auto;          /* pill zustane dole, text je nahore */
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: rgba(132, 132, 132, 0.2);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 400;
  text-decoration: none;
  letter-spacing: -0.32px;
  transition: background var(--duration-fast) var(--ease-out);
}

.proj-credits__pill:hover {
  background: rgba(132, 132, 132, 0.35);
}

.proj-credits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 36px;
  padding-top: 40px;
  align-content: start;      /* text seskupeny NAHORE pod titulkem (jak ve Figme) */
}

.proj-credits__col {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.proj-credits__person {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.proj-credits__name {
  font-family: var(--font-display);
  font-size: var(--text-body-l);
  font-weight: 500;
  letter-spacing: var(--tracking-body-l);
  color: #ffffff;
  line-height: 1.2;
}

.proj-credits__role {
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: 400;
  letter-spacing: -0.24px;
  color: #86868c;
}

.proj-credits__title {
  font-family: var(--font-display);
  font-size: var(--text-h2);    /* 36px */
  font-weight: 500;
  letter-spacing: -0.72px;
  color: #ffffff;
  margin: 0 0 0 0;
  align-self: flex-start;
}

/* Right card — Next case */
.proj-credits__card--right {
  display: flex;
  flex-direction: column;
}

.proj-credits__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.4;
  z-index: 0;
}

.proj-credits__right-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 42px;
}

.proj-credits__next-pill {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--color-fg);
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.32px;
  align-self: flex-start;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.proj-credits__next-pill:hover {
  background: var(--color-accent);
  color: #ffffff;
}

.proj-credits__next-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proj-credits__next-name {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.1vw, 47px);
  font-weight: 500;
  letter-spacing: -1.88px;
  color: #ffffff;
  line-height: 1.05;
  margin: 0;
}

.proj-credits__next-sub {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: var(--tracking-body-l);
  color: #86868c;
  margin: 0;
  line-height: var(--leading-normal);
}

/* ============================================================
   FOOTER bg correction — must sit on #1d1d1f
   ============================================================ */
.site-footer {
  background-color: var(--color-fg);
}

/* ============================================================
   RESPONSIVE — Projects / Results / Credits sections
   ============================================================ */

@media (max-width: 1279px) {
  .proj-grid--row1 { height: 480px; }
  .proj-grid--row2 { height: 340px; }
  .proj-billboard__card { height: 560px; }

  .proj-testimonial {
    padding-left: 0;
  }
}

@media (max-width: 1023px) {
  .proj-grid,
  .proj-grid__labels {
    grid-template-columns: repeat(2, 1fr);
  }

  .proj-grid--row1 { height: auto; }
  .proj-grid--row2 { height: auto; }

  .proj-grid__card {
    aspect-ratio: 4 / 3;
  }

  .proj-grid--row1 .proj-grid__card { aspect-ratio: 4 / 3; }
  .proj-grid--row2 .proj-grid__card { aspect-ratio: 4 / 3; }

  .proj-billboard__card { height: 420px; }

  .proj-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .proj-credits__inner {
    grid-template-columns: 1fr;
  }

  .proj-credits__card {
    height: 420px;
  }

  .proj-projects__divider {
    margin-left: 0;
  }

  .proj-testimonial {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .proj-projects__header {
    flex-direction: column;
    gap: 16px;
  }

  .proj-projects__divider {
    margin-left: 0;
  }

  .proj-tabs {
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
  }

  .proj-tab {
    margin-right: 0;
  }

  .proj-grid,
  .proj-grid__labels {
    grid-template-columns: 1fr;
  }

  .proj-grid__card { aspect-ratio: 16 / 9; }

  .proj-billboard__card { height: 240px; }

  .proj-stats {
    grid-template-columns: 1fr;
  }

  .proj-credits__inner {
    grid-template-columns: 1fr;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .proj-credits__card {
    height: auto;
    min-height: 360px;
  }

  .proj-projects__inner,
  .proj-results__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

/* ============================================================
   IDENTITY SECTION — Figma 205:46411
   "Whole identity build from scratch"
   Blue logo-construction visual + dark text card (carousel)
   ============================================================ */

.proj-identity {
  background-color: var(--color-fg);
  color: #ffffff;
  position: relative;
  z-index: 2;
}

.proj-identity__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: 125px var(--page-padding) 125px;
}

.proj-identity__heading {
  font-size: var(--text-h2);
  font-weight: 500;
  letter-spacing: -0.72px;
  line-height: var(--leading-tight);
  color: #ffffff;
  margin: 0 0 76px 0;
}

.proj-identity__row {
  display: grid;
  grid-template-columns: 819fr 587fr;
  gap: 22px;
  align-items: stretch;
}

/* LEFT — blue construction visual (carousel stage) */
.proj-identity__visual {
  position: relative;
  aspect-ratio: 819 / 719;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #2f55d4;
}

.proj-identity__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.proj-identity__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.proj-identity__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.proj-identity__slide--mark img {
  width: 38%;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

/* RIGHT — dark text card */
.proj-identity__card {
  background-color: #000000;
  border-radius: var(--radius-lg);
  padding: 42px;
  display: flex;
  flex-direction: column;
}

.proj-identity__chip {
  align-self: flex-start;
  background-color: var(--color-overlay-light);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-size: var(--text-caption);
  font-weight: 500;
  line-height: var(--leading-tight);
  color: #ffffff;
}

.proj-identity__text {
  font-size: var(--text-h3);
  font-weight: 500;
  letter-spacing: var(--tracking-h3);
  line-height: var(--leading-normal);
  color: #ffffff;
  max-width: 503px;
  margin: 40px 0 0 0;
}

.proj-identity__arrows {
  display: flex;
  gap: 22px;
  margin-top: auto;
  padding-top: 48px;
}

.proj-identity__arrow {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-circle);
  border: none;
  background-color: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.proj-identity__arrow:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.proj-identity__arrow:active {
  transform: scale(0.94);
}

@media (max-width: 1023px) {
  .proj-identity__inner {
    padding: var(--space-20) var(--page-padding);
  }
  .proj-identity__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .proj-identity__card {
    padding: 32px;
  }
  .proj-identity__text {
    margin-top: 28px;
  }
  .proj-identity__arrows {
    padding-top: 40px;
  }
}

@media (max-width: 767px) {
  .proj-identity__heading {
    margin-bottom: 40px;
  }
}


/* ============================================================
   >>> LIGHT THEME (Next-level Gems) <<<
   Tenhle soubor = cely project.css + svetle prebiti barev.
   Strankou se linkuje MISTO project.css. Tmave stranky
   (spider, jan...) dal pouzivaji puvodni project.css.
   Prebiti jsou na konci, takze prebijou tmave hodnoty vyse.
   ============================================================ */

/* sekce: tmave pozadi -> svetle, bily text -> tmavy */
.proj-meta            { background: #ffffff; color: var(--color-fg); }
.proj-meta__intro strong { color: var(--color-fg); }
.proj-info__value     { color: var(--color-fg); }

.proj-projects        { background-color: #FFFFFF; color: var(--color-fg); }
.proj-projects__heading,
.proj-projects__subline { color: var(--color-fg); }
.proj-projects__divider { border-top-color: var(--color-stroke); }
.proj-tab.is-active   { color: var(--color-fg); }
.proj-tab:hover       { color: rgba(0, 0, 0, 0.7); }
.proj-grid__label-title { color: var(--color-fg); }

.proj-results         { background-color: #FFFFFF; color: var(--color-fg); }
.proj-results__heading,
.proj-stat__number,
.proj-testimonial__quote { color: var(--color-fg); }

/* credits: sekce svetla, karty zustavaji tmave (text v nich je bily explicitne) */
.proj-credits         { background-color: #ffffff; }

/* hero: tmavy titulek + cta na svetlem heru */
.proj-hero__title,
.proj-hero__cta       { color: var(--color-fg); }

/* hero: svetle pozadi misto cerneho (240vh scroll hero -> svetly) */
.proj-hero { background: #DBDBDD; }
.proj-hero__stage { background: transparent; }
@media (max-width: 1023px) { .proj-hero__stage { background: transparent; } }


/* ============================================================
   SHOWCASE — "Not just a pretty site" (working website)
   ============================================================ */
.proj-showcase { background-color: #ffffff; padding: 96px 0; }
.proj-showcase__inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}
.proj-showcase__heading {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.72px;
  color: var(--color-fg);
  margin: 0 0 48px;
}
.proj-showcase__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 12px;
  align-items: stretch;
}
.proj-showcase__visual {
  background: #e6e6e9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.proj-showcase__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-showcase__card {
  background: #ffffff;
  border: 1px solid var(--color-stroke);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.proj-showcase__chip {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: #f0f0f2;
  font-size: var(--text-caption);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-fg);
}
.proj-showcase__text {
  font-size: var(--text-body-l);
  line-height: 1.4;
  letter-spacing: -0.3px;
  color: var(--color-fg);
  margin: 0;
}
@media (max-width: 1023px) { .proj-showcase__row { grid-template-columns: 1fr; } }
@media (max-width: 767px)  { .proj-showcase { padding: 64px 0; } .proj-showcase__card { padding: 28px; } }


/* hero image posunout nize (desktop) — spider-style scroll hero, svetly */
@media (min-width: 1024px) {
  .proj-hero__media { top: 22%; }
}

/* showcase sipky (jako v designu) */
.proj-showcase__arrows { display: flex; gap: 12px; margin-top: auto; padding-top: 28px; }
.proj-showcase__arrow {
  width: 46px; height: 46px;
  border-radius: 20px;
  border: 1px solid var(--color-stroke);
  background: #ffffff;
  color: var(--color-fg);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.proj-showcase__arrow:hover { background: #f0f0f2; }

/* results — jemnejsi (mensi opacity) cisla jako v designu */


/* testimonial citat na pravou stranu (jak ve Figme) i na uzsim desktopu/laptopu */
@media (min-width: 1024px) {
  .proj-testimonial { padding-left: calc(100% - 694px - var(--page-padding) - var(--page-padding)); }
}


/* testimonial avatar = fotka (ne logo): vyplnit kruh, bez invertu/paddingu */
.proj-testimonial__avatar { padding: 0; }
.proj-testimonial__avatar img { object-fit: cover; filter: none; }


/* VUT — app screenshoty jsou na sirku (ne 9:16) */
.theme-vut .proj-item .proj-grid__card { aspect-ratio: 341 / 425; }
.theme-vut .proj-item--wide .proj-grid__card { aspect-ratio: 16 / 8; }
/* CarScoring — app screenshoty na sirku */
.theme-carscoring .proj-item .proj-grid__card { aspect-ratio: 341 / 425; }
.theme-carscoring .proj-item--wide .proj-grid__card { aspect-ratio: 1428 / 1001; }  /* carscoring-05 — presny pomer, neorezavat */

/* CarScoring — "Not just a pretty site" sekce svetla (jak v designu) */
.theme-carscoring .proj-identity { background-color: var(--color-bg); color: var(--color-fg); }
.theme-carscoring .proj-identity__heading { color: var(--color-fg); }
.theme-carscoring .proj-identity__card { background-color: #ffffff; border: 1px solid var(--color-stroke); }
.theme-carscoring .proj-identity__chip { background-color: #f0f0f2; color: var(--color-fg); }
.theme-carscoring .proj-identity__text { color: var(--color-fg); }
.theme-carscoring .proj-identity__arrow { background-color: #ffffff; border: 1px solid var(--color-stroke); color: var(--color-fg); }
.theme-carscoring .proj-identity__arrow:hover { background-color: #f0f0f2; }


/* CarScoring — sipky carouselu cerne (SVG ma napevno stroke=white) */
.theme-carscoring .proj-identity__arrow svg path { stroke: var(--color-fg); }