/* Bottom Colophon Bar (2-Column Grid matching Hairline Dividers: Column 1 holds Left & Center at ends, Column 2 holds Right at end) */
.f3-footer-colophon-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--f3-works-grid-gap, var(--f3-gutter-x, 25px));
  width: 100%;
  align-items: center;
  padding-top: 23px;
  padding-bottom: 25px;
  margin-bottom: 0px;
  border-top: 1px solid rgba(3, 3, 3, 0.15);
  position: relative;
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--type-mono-a-weight, 400);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  line-height: 1;
  text-transform: uppercase;
  color: rgba(3, 3, 3, 0.45);
}

.f3-footer-colophon-bar::before,
.f3-footer-colophon-bar::after {
  content: '';
  position: absolute;
  width: var(--f3-divider-square-size, 2px);
  height: var(--f3-divider-square-size, 2px);
  background-color: #030303;
  top: -1px;
  pointer-events: none;
  z-index: 2;
}

.f3-footer-colophon-bar::before {
  left: 0;
}

.f3-footer-colophon-bar::after {
  right: 0;
}

.f3-colophon-left {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  text-align: left;
  color: rgba(3, 3, 3, 0.45);
}

.f3-colophon-center {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  color: rgba(3, 3, 3, 0.45);
}

.f3-colophon-right {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  text-align: right;
  color: rgba(3, 3, 3, 0.45);
}

.f3-colophon-privacy-link {
  font-family: var(--type-mono-a-font, var(--font-mono, 'PP Supply Mono', monospace));
  font-size: var(--type-mono-a-size, 11px);
  font-weight: var(--type-mono-a-weight, 400);
  letter-spacing: var(--type-mono-a-spacing, 0.5px);
  line-height: var(--type-mono-a-line, 13px);
  color: rgba(3, 3, 3, 0.45);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease, opacity 0.2s ease;
  cursor: pointer;
}

.f3-colophon-privacy-link:hover,
.f3-colophon-privacy-link:focus-visible {
  color: #030303;
  opacity: 1;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Future Three)
   ========================================================================== */

/* Laptop & Medium (< 1120px) */

/* Mobile / Tablet (< 960px) */
@media (max-width: 960px) {
  .f3-intro-lockup {
    margin-bottom: 60px;
  }

}

/* Mobile / Tablet (< 768px) */
@media (max-width: 768px) {
  .f3-intro-lockup {
    flex-direction: column;
    gap: 32px;
    margin-bottom: 40px;
  }

  .f3-intro-right-col {
    margin-left: 0;
    max-width: 100%;
  }

}

/* Mobile (< 640px) */
@media (max-width: 640px) {

  .f3-footer-main-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
    min-height: auto;
  }

  .f3-footer-left-stage {
    flex-direction: column;
    gap: 24px;
  }

  .f3-footer-socials-wrap {
    justify-content: flex-start;
    margin-top: 0;
  }

  .f3-footer-socials-list {
    align-items: flex-start;
    text-align: left;
  }

  .f3-footer-social-item,
  .f3-footer-social-link {
    text-align: left;
  }

  .f3-footer-email-link,
  .f3-footer-location,
  .f3-footer-social-link {
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 1.35;
  }

  .f3-footer-right-stage {
    gap: 24px;
  }

  .f3-footer-emblem-wrap {
    justify-content: flex-start;
  }

  .f3-footer-brand-signature {
    justify-content: flex-start;
    margin-top: 0;
  }

  .f3-signature-text {
    text-align: left;
    font-size: clamp(42px, 11vw, 68px);
  }

  .f3-footer-colophon-bar {
    grid-template-columns: 1fr;
    row-gap: 12px;
    text-align: left;
  }

  .f3-colophon-left,
  .f3-colophon-center,
  .f3-colophon-right {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 960px) {
  .f3-footer-main-grid {
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}

/* ==========================================================================
   SCROLL-DRIVEN EDITORIAL CASCADE REVEAL SYSTEM
   Emil Kowalski 580ms Editorial Reveal with Asymmetric Stagger
   ========================================================================== */
.f3-scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.58s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.58s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.f3-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger deltas for editorial flow */
/* 1. Recent Works Section */
.f3-intro-lockup.f3-scroll-reveal.is-revealed,
.f3-intro-divider-row.f3-scroll-reveal.is-revealed {
  transition-delay: 0.02s;
}

.f3-featured-tag-row.f3-scroll-reveal.is-revealed {
  transition-delay: 0.04s;
}

/* Grid View Cards */

/* List / Gallery View Cards & Dividers */
.f3-gallery-hairline-divider.f3-scroll-reveal.is-revealed {
  transition-delay: 0.02s;
}

.f3-gallery-row .f3-gallery-card-wrap:nth-of-type(1).f3-scroll-reveal.is-revealed {
  transition-delay: 0.04s;
}

.f3-gallery-row .f3-gallery-card-wrap:nth-of-type(2).f3-scroll-reveal.is-revealed {
  transition-delay: 0.10s;
}

.f3-gallery-row .f3-gallery-card-wrap:nth-of-type(3).f3-scroll-reveal.is-revealed {
  transition-delay: 0.16s;
}

/* 2. Focus / Services Directory Section */

/* 3. Contact Stage */
.f3-section-contact .f3-single-divider-row.f3-scroll-reveal.is-revealed {
  transition-delay: 0.02s;
}

.f3-contact-left-col.f3-scroll-reveal.is-revealed {
  transition-delay: 0.04s;
}

.f3-contact-action-row:nth-child(1).f3-scroll-reveal.is-revealed {
  transition-delay: 0.09s;
}

.f3-contact-action-row:nth-child(2).f3-scroll-reveal.is-revealed {
  transition-delay: 0.14s;
}

.f3-contact-action-row:nth-child(3).f3-scroll-reveal.is-revealed {
  transition-delay: 0.19s;
}

.f3-contact-corners-bar.f3-scroll-reveal.is-revealed {
  transition-delay: 0.22s;
}

/* ==========================================================================
   SCROLL-DRIVEN TYPEWRITER TEXT REVEAL SYSTEM
   Zero layout-shift character sequence
   ========================================================================== */

/* Future Three® Staggered Line Mask Text Reveal */
.f3-line-mask {
  display: block;
  overflow: hidden;
  padding-top: 0.04em;
  padding-bottom: 0.12em;
  margin-top: -0.04em;
  margin-bottom: -0.12em;
}

.f3-line-inner {
  display: block;
  opacity: 0;
  transform: translate3d(0, 110%, 0);
  transition: transform 0.60s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.50s cubic-bezier(0.32, 0.72, 0, 1);
  transition-delay: calc(var(--line-idx, 0) * 72ms);
  will-change: transform, opacity;
}

.is-revealed .f3-line-inner,
.f3-line-inner.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .f3-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .f3-line-mask {
    overflow: visible;
  }

  .f3-line-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}