/* =========================================================
   pbw-custom.css
   pommesblauweiss 2026
   ========================================================= */

/* =========================================================
   01 — base / variables / rendering
   ========================================================= */

:root {
  --pbw-dark-grey: #3c4650;
  --pbw-accent: #00b7ff;
  --pbw-white-soft: rgba(255, 255, 255, 0.85);

  --pbw-hello-width: min(84vw, 96dvh);
  --pbw-work-width: min(84vw, 86dvh);
  --pbw-side-nav-right: calc((100vw - var(--pbw-hello-width)) / 6 - 4px);

  --pbw-reveal-duration: 1s;
  --pbw-reveal-delay: 0.24s;
  --pbw-reveal-easing: cubic-bezier(0.22, 0.61, 0.36, 1);

  --pbw-section-title-size: 30px;
  --pbw-section-title-line-height: 1.08;
  --pbw-section-title-tracking: -0.015em;

  --pbw-counter-size: 22px;
  --pbw-counter-line-height: 1.2;
  --pbw-counter-number-weight: 700;
  --pbw-counter-separator-weight: 400;
  --pbw-counter-separator-gap: 9px;

  --pbw-work-pagination-arrow-edge-shift: 13px;

  /* project back-to-work alignment */
  --pbw-project-back-link-y: -24px;
  --pbw-project-back-arrow-x: -13px;
  --pbw-project-back-arrow-y: 2px;
  --pbw-project-back-text-x: -24px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   03 — typography
   ========================================================= */

/* body copy */

.pbw-body,
.pbw-body p,
.text-lead,
.text-normal,
.wpb_text_column p {
  line-height: 1.6;
}

/* section titles */

.pbw-section-title,
.pbw-section-title h1,
.pbw-section-title h2,
.pbw-section-title h3,
.pbw-section-title h4,
.pbw-section-title h5,
.pbw-section-title h6,
.pbw-section-title .heading-text {
  margin: 0;

  font-size: var(--pbw-section-title-size) !important;
  font-weight: 400 !important;
  line-height: var(--pbw-section-title-line-height) !important;
  letter-spacing: var(--pbw-section-title-tracking) !important;
}

/* ---------------------------------------------------------
   03a — editorial copy preset
   Opt-in for longer text content in lab, practice and contact
   --------------------------------------------------------- */

.pbw-editorial-copy .uncode_text_column > p,
.uncode_text_column.pbw-editorial-copy > p {
  margin-top: 0 !important;
  margin-bottom: 0.7em !important;
  line-height: 1.42 !important;
}

.pbw-editorial-copy .uncode_text_column > h4,
.uncode_text_column.pbw-editorial-copy > h4 {
  margin: 1.7em 0 0.55em !important;

  color: var(--pbw-accent) !important;

  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.pbw-editorial-copy .uncode_text_column > h4:first-child,
.uncode_text_column.pbw-editorial-copy > h4:first-child {
  margin-top: 0 !important;
}

/* =========================================================
   04 — section reveal
   ========================================================= */

/*
   Sequence:
   title → upper line → content → lower line

   Opacity-only reveal.
   The initial hidden state is enabled only after JavaScript
   adds .pbw-reveal-ready to the section.
*/

/* initial state */

.pbw-section-reveal.pbw-reveal-ready .pbw-reveal-title,
.pbw-section-reveal.pbw-reveal-ready .pbw-reveal-line-top,
.pbw-section-reveal.pbw-reveal-ready .pbw-reveal-content,
.pbw-section-reveal.pbw-reveal-ready .pbw-reveal-line-bottom {
  opacity: 0;

  transition: opacity var(--pbw-reveal-duration) var(--pbw-reveal-easing);

  will-change: opacity;
}

/* title */

.pbw-section-reveal.pbw-reveal-ready .pbw-reveal-title {
  transition-delay: 0s;
}

/* upper line */

.pbw-section-reveal.pbw-reveal-ready .pbw-reveal-line-top {
  transition-delay: var(--pbw-reveal-delay);
}

/* content */

.pbw-section-reveal.pbw-reveal-ready .pbw-reveal-content {
  transition-delay: calc(var(--pbw-reveal-delay) * 2);
}

/* lower line */

.pbw-section-reveal.pbw-reveal-ready .pbw-reveal-line-bottom {
  transition-delay: calc(var(--pbw-reveal-delay) * 3);
}

/* revealed state */

.pbw-section-reveal.pbw-reveal-ready.is-revealed .pbw-reveal-title,
.pbw-section-reveal.pbw-reveal-ready.is-revealed .pbw-reveal-line-top,
.pbw-section-reveal.pbw-reveal-ready.is-revealed .pbw-reveal-content,
.pbw-section-reveal.pbw-reveal-ready.is-revealed .pbw-reveal-line-bottom {
  opacity: 1;

  will-change: auto;
}

/* accessibility */

@media (prefers-reduced-motion: reduce) {
  .pbw-section-reveal.pbw-reveal-ready .pbw-reveal-title,
  .pbw-section-reveal.pbw-reveal-ready .pbw-reveal-line-top,
  .pbw-section-reveal.pbw-reveal-ready .pbw-reveal-content,
  .pbw-section-reveal.pbw-reveal-ready .pbw-reveal-line-bottom {
    opacity: 1;

    transition: none;
  }
}

/* =========================================================
   05 — main navigation
   ========================================================= */

/*
   Font family remains controlled by the Uncode Font Stack.
   Desktop navigation explicitly uses the Bold variant.
*/

@media (min-width: 960px) {
  #masthead .menu-primary-inner > li > a,
  #masthead .menu-primary-inner > li > a.cursor-init {
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }
}

/* active / hover */

.menu-primary-inner .current-menu-item > a,
.menu-primary-inner a:hover,
.navbar-nav .current-menu-item > a,
.navbar-nav li a:hover,
.menu-smart .current-menu-item > a,
.menu-smart a:hover {
  color: var(--pbw-accent);
}

/* active state on Portfolio Singles */

@media (min-width: 960px) {
  /* Work Single */
  body.single-portfolio:not(:has(.pbw-lab-content))
    #masthead
    .menu-primary-inner
    > li.pbw-menu-work
    > a,
  body.single-portfolio:not(:has(.pbw-lab-content))
    #masthead
    .menu-primary-inner
    > li.pbw-menu-work
    > a.cursor-init {
    color: var(--pbw-accent) !important;
  }

  /* Lab Single */
  body.single-portfolio:has(.pbw-lab-content)
    #masthead
    .menu-primary-inner
    > li.pbw-menu-lab
    > a,
  body.single-portfolio:has(.pbw-lab-content)
    #masthead
    .menu-primary-inner
    > li.pbw-menu-lab
    > a.cursor-init {
    color: var(--pbw-accent) !important;
  }
}

/* Hello state on the homepage */

@media (min-width: 960px) {
  body.fp-viewing-hello #masthead .menu-primary-inner > li.pbw-menu-hello > a,
  body.fp-viewing-hello
    #masthead
    .menu-primary-inner
    > li.pbw-menu-hello
    > a.cursor-init {
    color: var(--pbw-accent) !important;
  }
}

/* ---------------------------------------------------------
   05b — desktop navigation separators
   --------------------------------------------------------- */

@media (min-width: 960px) {
  #masthead .menu-primary-inner > li {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  #masthead .menu-primary-inner > li > a,
  #masthead .menu-primary-inner > li > a.cursor-init {
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  #masthead .menu-primary-inner > li:not(:last-child)::after {
    content: "|";
    display: inline-block;
    color: var(--pbw-white-soft);
    font-family: "ff-meta-correspondence-web-p", sans-serif;
    font-size: 22px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    vertical-align: baseline;
  }
}

/* ---------------------------------------------------------
   05c — mobile header divider
   --------------------------------------------------------- */

@media (max-width: 959px) {
  #masthead .menu-container.menu-shadows {
    box-shadow: 0 4px 10px -10px rgba(0, 0, 0, 0.6);
  }
}

/* =========================================================
   06 — section layout
   ========================================================= */

.pbw-section,
.pbw-hello,
.fp-section:has(.pbw-hello) {
  background-color: var(--pbw-dark-grey);
}

/* shared section headline spacing */

.pbw-section .pbw-section-line-top {
  margin-top: 24px !important;
}

.pbw-section .row.row-parent {
  padding-top: 12px !important;
}

/* =========================================================
   06b — section layout
   ========================================================= */

/* Optical vertical alignment of homepage sections. */

.fp-section > .row > .row-inner > .wpb_column {
  transform: translateY(-18px);
}

/* =========================================================
   07 — hello gallery
   ========================================================= */

/*
   The Media Gallery defines the visible hello width.
   Responsive sizing is handled centrally in section 11.
*/

/* remove internal spacing */

.pbw-main-reel,
.pbw-main-reel .uncode-single-media,
.pbw-main-reel .tmb,
.pbw-main-reel .t-entry-visual,
.pbw-main-reel .dummy {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.pbw-main-reel {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* visible hello media */

.pbw-hello .un-media-gallery.owl-carousel-wrapper {
  position: relative !important;

  max-width: none !important;

  margin-top: 8px !important;
  margin-right: auto !important;
  margin-bottom: 48px !important;
  margin-left: auto !important;
}

/* carousel viewport */

.pbw-hello .owl-carousel-container {
  overflow: hidden !important;
}

/* hello media */

.pbw-main-reel img,
.pbw-main-reel video,
.pbw-main-reel iframe {
  display: block;

  width: 100% !important;
  height: auto;

  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* =========================================================
   08 — hello navigation
   ========================================================= */

/* ---------------------------------------------------------
   08a — hello navigation
   --------------------------------------------------------- */

/* navigation container */

.pbw-hello .pbw-hello-nav {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;

  z-index: 20 !important;

  margin-top: 18px !important;

  transform: translateX(calc(-50% + 3px)) !important;
}

/* navigation layout */

.pbw-hello .pbw-hello-nav .uncode-owl-nav-in,
.pbw-hello .pbw-hello-nav .uncode-owl-nav-safe,
.pbw-hello .pbw-hello-nav .uncode-nav-dots {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  margin: 0 !important;
}

.pbw-hello .pbw-hello-nav .uncode-owl-nav-in,
.pbw-hello .pbw-hello-nav .uncode-owl-nav-safe {
  position: relative !important;
}

/* remove unused helper elements */

.pbw-hello .pbw-hello-nav .uncode-nav-limit-before,
.pbw-hello .pbw-hello-nav .uncode-nav-limit-after,
.pbw-hello .pbw-hello-nav .uncode-nav-index > span {
  display: none !important;
}

/* numeric items */

.pbw-hello-nav .uncode-nav-index {
  display: inline-flex !important;
  align-items: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  color: var(--pbw-white-soft) !important;

  font-family: "ff-meta-correspondence-web-p", sans-serif !important;
  font-size: var(--pbw-counter-size) !important;
  font-style: normal !important;
  font-weight: var(--pbw-counter-number-weight) !important;
  line-height: var(--pbw-counter-line-height) !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
}

/* generated content */

.pbw-hello-nav .uncode-nav-index::before,
.pbw-hello-nav .uncode-nav-index::after {
  font-family: "ff-meta-correspondence-web-p", sans-serif !important;
  font-size: inherit !important;
  font-style: normal !important;
  font-weight: var(--pbw-counter-number-weight) !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  font-variant-numeric: tabular-nums !important;
}

/* numbering */

.pbw-hello-nav .uncode-nav-index[data-key="0"]::before {
  content: "01";
}
.pbw-hello-nav .uncode-nav-index[data-key="1"]::before {
  content: "02";
}
.pbw-hello-nav .uncode-nav-index[data-key="2"]::before {
  content: "03";
}

/* separators */

.pbw-hello-nav .uncode-nav-index:not(:last-child)::after {
  content: "|";
  margin: 0 var(--pbw-counter-separator-gap);
  color: var(--pbw-white-soft);
  font-weight: var(--pbw-counter-separator-weight) !important;
}

/* active */

.pbw-hello-nav .uncode-nav-index.active-index::before {
  color: var(--pbw-accent) !important;
}

/* ---------------------------------------------------------
   08b — hello arrow navigation
   --------------------------------------------------------- */

/*
   Native Uncode arrow module.
   Width is controlled globally in section 11.
*/

/* arrow module */

.pbw-hello .pbw-hello-arrows {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;

  z-index: 30 !important;

  height: 100% !important;

  transform: translateX(-50%) !important;

  pointer-events: none !important;
}

.pbw-hello .pbw-hello-arrows.limit-width {
  width: var(--pbw-hello-width) !important;
  max-width: none !important;
}

/* navigation layout */

.pbw-hello .pbw-hello-arrows .uncode-owl-nav-in,
.pbw-hello .pbw-hello-arrows .uncode-owl-nav-safe {
  position: relative !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* remove unused helper elements */

.pbw-hello .pbw-hello-arrows .uncode-nav-limit-before,
.pbw-hello .pbw-hello-arrows .uncode-nav-limit-after {
  display: none !important;
}

/* arrow buttons and wrappers */

.pbw-hello .pbw-hello-arrows .uncode-nav-prev,
.pbw-hello .pbw-hello-arrows .uncode-nav-next,
.pbw-hello .pbw-hello-arrows .uncode-nav-container-wrap,
.pbw-hello .pbw-hello-arrows .uncode-nav-container,
.pbw-hello .pbw-hello-arrows .uncode-nav-container > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.pbw-hello .pbw-hello-arrows .uncode-nav-container-wrap,
.pbw-hello .pbw-hello-arrows .uncode-nav-container,
.pbw-hello .pbw-hello-arrows .uncode-nav-container > span {
  width: 96px !important;
  height: 96px !important;
}

/* arrow position and click area */

.pbw-hello .pbw-hello-arrows .uncode-nav-prev,
.pbw-hello .pbw-hello-arrows .uncode-nav-next {
  position: absolute !important;
  top: 50% !important;

  width: 144px !important;
  height: 144px !important;

  transform: translateY(-50%) !important;

  pointer-events: auto !important;
}

.pbw-hello .pbw-hello-arrows .uncode-nav-prev {
  left: calc(2% - 24px) !important;
}

.pbw-hello .pbw-hello-arrows .uncode-nav-next {
  right: calc(2% - 24px) !important;
}

/* arrow styling */

.pbw-hello .pbw-hello-arrows i.fa {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  background-color: rgba(255, 255, 255, 0.95) !important;

  transition: background-color 0.2s ease;
}

/* arrow mask */

.pbw-hello .pbw-hello-arrows i.fa {
  -webkit-mask: url("/wp-content/uploads/2026/07/icon_arrow.svg") center /
    contain no-repeat;

  mask: url("/wp-content/uploads/2026/07/icon_arrow.svg") center / contain
    no-repeat;

  color: transparent !important;
}

/* mirror left arrow */

.pbw-hello .pbw-hello-arrows .uncode-nav-prev i.fa {
  transform: scaleX(-1);
}

/* hover / keyboard */

.pbw-hello .pbw-hello-arrows .uncode-nav-container:hover i.fa,
.pbw-hello .pbw-hello-arrows .uncode-nav-container:focus-visible i.fa {
  background-color: var(--pbw-accent) !important;
}

/* ---------------------------------------------------------
   08c — hello play button
   --------------------------------------------------------- */

.pbw-hello .owl-carousel-wrapper-nav {
  position: relative !important;
}

/* play module */

.pbw-hello .pbw-hello-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  z-index: 25 !important;

  width: 144px !important;
  height: 144px !important;

  margin: 0 !important;

  transform: translate(calc(-50% + 6px), -50%) !important;

  cursor: pointer;
}

/* play mask */

.pbw-hello .pbw-hello-play .icon-media {
  -webkit-mask: url("/wp-content/uploads/2026/07/icon_play.svg") center /
    contain no-repeat;

  mask: url("/wp-content/uploads/2026/07/icon_play.svg") center / contain
    no-repeat;
}

/* hide original play image */

.pbw-hello .pbw-hello-play .icon-media img {
  opacity: 0 !important;
}

/* hover */

.pbw-hello .pbw-hello-play .btn-disable-hover {
  display: block !important;
  width: 96px !important;
  height: 96px !important;

  pointer-events: auto !important;
}

.pbw-hello .pbw-hello-play .btn-disable-hover:hover .icon-media {
  background-color: var(--pbw-accent) !important;
}

/* play icon */

.pbw-hello .pbw-hello-play .icon-media {
  display: block !important;

  width: 96px !important;
  height: 96px !important;

  background-color: rgba(255, 255, 255, 0.95) !important;

  transition: background-color 0.2s ease;
}

/* icon wrapper */

.pbw-hello .pbw-hello-play .icon-box-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 144px !important;
  height: 144px !important;
}

/* pointer events */

.pbw-hello .pbw-hello-play {
  pointer-events: none !important;
}

.pbw-hello .pbw-hello-play .icon-box-icon {
  pointer-events: auto !important;
  cursor: pointer;
}

/* disable gallery click */

.pbw-hello .owl-item.active a {
  pointer-events: none !important;
}


/* ---------------------------------------------------------
   08d — hello control readiness
   --------------------------------------------------------- */

.pbw-hello .pbw-hello-nav,
.pbw-hello .pbw-hello-arrows,
.pbw-hello .pbw-hello-play {
  visibility: hidden !important;
  opacity: 0 !important;
}

.fp-section.active.fp-completely:has(
  .pbw-hello .un-media-gallery .owl-stage-outer
) .pbw-hello .pbw-hello-nav,
.fp-section.active.fp-completely:has(
  .pbw-hello .un-media-gallery .owl-stage-outer
) .pbw-hello .pbw-hello-arrows,
.fp-section.active.fp-completely:has(
  .pbw-hello .un-media-gallery .owl-stage-outer
) .pbw-hello .pbw-hello-play {
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   09 — dividers / frame system
   ========================================================= */

.pbw-divider {
  opacity: 0.55;
}

/* =========================================================
   10 — onepage side navigation
   ========================================================= */

.onepage-pagination {
  right: var(--pbw-side-nav-right) !important;
}

/* dots */

.onepage-pagination .cd-dot {
  width: 7px !important;
  height: 7px !important;

  background-color: #fff !important;

  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* active / hover */

.onepage-pagination .is-selected .cd-dot,
.onepage-pagination a:hover .cd-dot {
  background-color: var(--pbw-accent) !important;
}

/* labels */

.onepage-pagination .cd-label {
  min-width: 0 !important;
  padding: 3px 8px 6px !important;

  background: var(--pbw-accent) !important;
  color: #fff !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  white-space: nowrap !important;
}

/* remove theme label shapes */

.onepage-pagination .cd-label::before,
.onepage-pagination .cd-label::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   11 — responsive
   ========================================================= */

/*
   Two-state responsive system:

   - desktop: 960px and above
   - mobile: below 960px
*/

/* default desktop */

.pbw-hello .un-media-gallery.owl-carousel-wrapper,
.pbw-hello .pbw-hello-nav,
.pbw-hello .pbw-hello-arrows {
  width: var(--pbw-hello-width) !important;
}

/* mobile */

@media (max-width: 959px) {
  :root {
    --pbw-hello-width: min(94vw, 96dvh);
    --pbw-counter-size: 16px;
  }

  /* 11a — mobile header logo */

  #masthead #logo-container-mobile .logo-image,
  #masthead #logo-container-mobile .logo-image img {
    width: 97px !important;
    height: auto !important;
  }

  /* 11b — mobile section title */

  .pbw-section-title,
  .pbw-section-title h1,
  .pbw-section-title h2,
  .pbw-section-title h3,
  .pbw-section-title h4,
  .pbw-section-title h5,
  .pbw-section-title h6,
  .pbw-section-title .heading-text {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  .pbw-hello-nav .uncode-nav-index {
    font-size: var(--pbw-counter-size) !important;
    line-height: 1.15 !important;
  }

  .pbw-hello .un-media-gallery.owl-carousel-wrapper {
    margin-bottom: 0px !important;
  }

  .pbw-hello .pbw-hello-nav {
    margin-top: 10px !important;
  }

  .onepage-pagination {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

    /* 11c — mobile hello navigation alignment */

  .pbw-hello .pbw-hello-nav {
    transform: translateX(-50%) !important;
  }

    /* 11d — mobile hello media alignment */

  .pbw-hello .un-media-gallery.owl-carousel-wrapper {
    left: 50% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
  }

    /* 11e — mobile hello controls */

  .pbw-hello .pbw-hello-arrows .uncode-nav-container-wrap,
  .pbw-hello .pbw-hello-arrows .uncode-nav-container,
  .pbw-hello .pbw-hello-arrows .uncode-nav-container > span {
    width: 64px !important;
    height: 64px !important;
  }

  .pbw-hello .pbw-hello-arrows .uncode-nav-prev,
  .pbw-hello .pbw-hello-arrows .uncode-nav-next {
    width: 96px !important;
    height: 96px !important;
  }

  .pbw-hello .pbw-hello-arrows .uncode-nav-prev {
    left: calc(2% - 24px) !important;
  }

  .pbw-hello .pbw-hello-arrows .uncode-nav-next {
    right: calc(2% - 24px) !important;
  }

  .pbw-hello .pbw-hello-play {
    width: 96px !important;
    height: 96px !important;
  }

  .pbw-hello .pbw-hello-play .btn-disable-hover,
  .pbw-hello .pbw-hello-play .icon-media {
    width: 64px !important;
    height: 64px !important;
  }

  .pbw-hello .pbw-hello-play .icon-box-icon {
    width: 96px !important;
    height: 96px !important;
  }
}

/* =========================================================
   12 — work / portfolio
   ========================================================= */

/* Shared content frame; Work overrides the width below so its
   three card rows, pagination, and closing line fit the viewport. */

.pbw-work .pbw-section-content,
.pbw-practice .pbw-section-content,
.pbw-portfolio-single .pbw-section-content {
  width: var(--pbw-hello-width) !important;
  max-width: none !important;

  margin-right: auto !important;
  margin-left: auto !important;
}

/* Work-specific viewport cap. */
.pbw-work .pbw-section-content {
  width: var(--pbw-work-width) !important;
}

/* work filters */

@media (min-width: 960px) {
  .pbw-work .pbw-work-grid .isotope-filters .menu-smart > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #index-470071 .isotope-filters .menu-horizontal {
    width: 100% !important;
    max-width: none !important;

    margin-right: 0 !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  #index-470071 .isotope-filters {
    position: relative;
    top: -18px;
  }

  #index-470071 .isotope-filters .menu-smart > li > span {
    display: inline-flex !important;
    align-items: baseline !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap;
  }

  .pbw-work
    .pbw-work-grid
    .isotope-filters
    .menu-smart
    > li
    > span
    > a.isotope-nav-link,
  .pbw-work
    .pbw-work-grid
    .isotope-filters
    .menu-smart
    > li
    > span
    > a.isotope-nav-link:visited {
    display: inline-block !important;

    padding-right: 6px !important;
    padding-left: 6px !important;

    color: var(--pbw-white-soft) !important;
    -webkit-text-fill-color: var(--pbw-white-soft) !important;

    font-family: "ff-meta-correspondence-web-p", sans-serif !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: lowercase !important;

    opacity: 1 !important;
    filter: none !important;
  }

  .pbw-work
    .pbw-work-grid
    .isotope-filters
    .menu-smart
    > li:not(:last-child)
    > span::after {
    content: "|";
    display: inline-block;

    color: var(--pbw-white-soft);

    font-family: "ff-meta-correspondence-web-p", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    vertical-align: baseline;
  }

  .pbw-work
    .pbw-work-grid
    .isotope-filters
    .menu-smart
    > li
    > span
    > a.isotope-nav-link.active,
  .pbw-work
    .pbw-work-grid
    .isotope-filters
    .menu-smart
    > li
    > span
    > a.isotope-nav-link:hover,
  .pbw-work
    .pbw-work-grid
    .isotope-filters
    .menu-smart
    > li
    > span
    > a.isotope-nav-link:focus-visible {
    color: var(--pbw-accent) !important;
    -webkit-text-fill-color: var(--pbw-accent) !important;

    opacity: 1 !important;
    filter: none !important;
  }
}

/* work cards — title hover transition */
#index-470071 .tmb.tmb-all-hover .t-entry-title a {
  transition:
    color 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86),
    -webkit-text-fill-color 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
}

/* work cards — unified hover */

#index-470071 .tmb.tmb-all-hover:hover .t-entry-title a,
#index-470071 .tmb.tmb-all-hover:focus-within .t-entry-title a {
  color: var(--pbw-accent) !important;
  -webkit-text-fill-color: var(--pbw-accent) !important;
}

/* project metadata */

.pbw-project-meta .uncode-wrapper.uncode-custom-fields,
.pbw-project-meta .uncode-custom-fields p {
  margin: 0 !important;
  padding: 0 !important;

  text-align: left !important;
}

.pbw-project-meta .detail-container {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start !important;

  width: auto !important;
  gap: 0.22em;

  color: var(--pbw-white-soft);
  font-size: 22px;
  font-style: normal;
  line-height: 1.25;
}

.pbw-project-meta .detail-label {
  display: inline-block !important;
  flex: 0 0 3.2em !important;

  color: var(--pbw-accent) !important;
  font-weight: 700 !important;
}

.pbw-project-meta .detail-label::after {
  content: ":";
}

.pbw-project-meta .detail-value {
  color: var(--pbw-white-soft) !important;
  font-weight: 400 !important;
  margin-left: 0 !important;
}

.pbw-portfolio-single .pbw-project-meta,
.pbw-portfolio-single .pbw-section-line-bottom {
  margin-top: 24px !important;
}

/* back to work / lab */

.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link:link,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link:link,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link:visited,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: var(--pbw-white-soft) !important;
  -webkit-text-fill-color: var(--pbw-white-soft);

  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
}

.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link::before,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link::before {
  content: "";
  display: block;
  flex: 0 0 auto;

  width: 48px;
  height: 48px;

  background-color: var(--pbw-white-soft) !important;
  transition: background-color 0.2s ease;

  -webkit-mask: url("/wp-content/uploads/2026/07/icon_arrow.svg") center / contain no-repeat;
  mask: url("/wp-content/uploads/2026/07/icon_arrow.svg") center / contain no-repeat;

  transform: scaleX(-1);
}

.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link:hover,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link:hover,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link:focus-visible,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link:focus-visible {
  color: var(--pbw-accent) !important;
  -webkit-text-fill-color: var(--pbw-accent);
}

.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link:hover::before,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link:hover::before,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link:focus-visible::before,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link:focus-visible::before {
  background-color: var(--pbw-accent) !important;
}

.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link {
  position: relative;
  top: var(--pbw-project-back-link-y);
}

.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-project-back-link::before,
.pbw-portfolio-single .pbw-project-back .uncode_text_column a.pbw-lab-back-link::before {
  position: relative;
  left: var(--pbw-project-back-arrow-x);
  top: var(--pbw-project-back-arrow-y);
  margin-right: var(--pbw-project-back-text-x);
}

/* ---------------------------------------------------------
   12a — work native pagination
   --------------------------------------------------------- */

@media (min-width: 960px) {
  #index-470071 .cssgrid-footer {
    margin-top: 16px !important;
  }

  #index-470071 .cssgrid-footer .pagination {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
    line-height: 1 !important;

    counter-reset: pbw-work-page;
  }

  #index-470071 .pagination > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #index-470071 .pagination > li:not(.page-prev):not(.page-next) {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    vertical-align: middle;

    counter-increment: pbw-work-page;
  }

  #index-470071 .pagination > li:not(.page-prev):not(.page-next) > .btn {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #index-470071 .pagination .page-numbers {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    font-size: 0 !important;
    line-height: 1 !important;

    background: transparent !important;
    border-radius: 0 !important;
  }

  #index-470071 .pagination .page-numbers::before {
    content: counter(pbw-work-page, decimal-leading-zero);

    color: var(--pbw-white-soft);
    -webkit-text-fill-color: var(--pbw-white-soft);

    font-family: "ff-meta-correspondence-web-p", sans-serif;
    font-size: var(--pbw-counter-size);
    font-style: normal;
    font-weight: var(--pbw-counter-number-weight);
    line-height: var(--pbw-counter-line-height);
    font-variant-numeric: tabular-nums;
  }

  #index-470071 .pagination .page-numbers.current::before,
  #index-470071 .pagination a.page-numbers:hover::before,
  #index-470071 .pagination a.page-numbers:focus-visible::before {
    color: var(--pbw-accent);
    -webkit-text-fill-color: var(--pbw-accent);
  }

  #index-470071
    .pagination
    > li:not(.page-prev):not(.page-next):not(:nth-last-child(2))::after {
    content: "|";

    display: inline-block;
    margin: 0 var(--pbw-counter-separator-gap);

    color: var(--pbw-white-soft);

    font-family: "ff-meta-correspondence-web-p", sans-serif;
    font-size: var(--pbw-counter-size);
    font-style: normal;
    font-weight: var(--pbw-counter-separator-weight);
    line-height: var(--pbw-counter-line-height);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    transform: translateY(-1px);
  }

  #index-470071 .pagination > li.page-prev,
  #index-470071 .pagination > li.page-next {
    width: 48px !important;
    height: 48px !important;

    position: relative;
    top: -10px;
  }

  #index-470071 .pagination > li.page-prev {
    float: left;
    left: calc(-1 * var(--pbw-work-pagination-arrow-edge-shift));
  }

  #index-470071 .pagination > li.page-next {
    float: right;
    right: calc(-1 * var(--pbw-work-pagination-arrow-edge-shift));
  }

  #index-470071 .pagination > li.page-prev > .btn,
  #index-470071 .pagination > li.page-next > .btn {
    display: grid !important;
    place-items: center;

    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--pbw-white-soft) !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  #index-470071 .pagination > li.page-prev i,
  #index-470071 .pagination > li.page-next i {
    display: none !important;
  }

  #index-470071 .pagination > li.page-prev > .btn::before,
  #index-470071 .pagination > li.page-next > .btn::before {
    content: "";

    display: block;
    width: 48px;
    height: 48px;

    background-color: currentColor;

    -webkit-mask: url("/wp-content/uploads/2026/07/icon_arrow.svg") center /
      contain no-repeat;
    mask: url("/wp-content/uploads/2026/07/icon_arrow.svg") center / contain
      no-repeat;
  }

  #index-470071 .pagination > li.page-prev > .btn::before {
    transform: scaleX(-1);
  }

  #index-470071 .pagination > li.page-prev > .btn:hover,
  #index-470071 .pagination > li.page-prev > .btn:focus-visible,
  #index-470071 .pagination > li.page-next > .btn:hover,
  #index-470071 .pagination > li.page-next > .btn:focus-visible {
    color: var(--pbw-accent) !important;
  }

  #index-470071 .pagination > li.page-prev > .btn.btn-disable-hover,
  #index-470071 .pagination > li.page-next > .btn.btn-disable-hover {
    visibility: hidden;
    pointer-events: none;
  }

  /* work — tighter closing line below pagination */
  .pbw-work-content + .pbw-section-line-bottom {
    margin-top: 12px !important;
  }
}


/* =========================================================
   13 — practice
   placeholder for later
   ========================================================= */

/* =========================================================
   14 — lab
   ========================================================= */

/* shared work / lab content frame */

.pbw-lab .pbw-section-content {
    width: var(--pbw-work-width) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
}


/* ---------------------------------------------------------
   14a — lab card hover
   --------------------------------------------------------- */

  #index-70600 .tmb.tmb-all-hover .t-entry-title a {
    transition:
      color 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86),
      -webkit-text-fill-color 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
}

  #index-70600 .tmb.tmb-all-hover:hover .t-entry-title a,
  #index-70600 .tmb.tmb-all-hover:focus-within .t-entry-title a {
    color: var(--pbw-accent) !important;
    -webkit-text-fill-color: var(--pbw-accent) !important;
}


/* ---------------------------------------------------------
   14b — lab native pagination
   --------------------------------------------------------- */

@media (min-width: 960px) {
  #index-70600 .cssgrid-footer {
    margin-top: 16px !important;
  }

  #index-70600 .cssgrid-footer .pagination {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;

    border-radius: 0 !important;
    line-height: 1 !important;

    counter-reset: pbw-lab-page;
  }

  #index-70600 .pagination > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  #index-70600 .pagination > li:not(.page-prev):not(.page-next) {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;

    vertical-align: middle;
    counter-increment: pbw-lab-page;
  }

  #index-70600 .pagination > li:not(.page-prev):not(.page-next) > .btn {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #index-70600 .pagination .page-numbers {
    display: inline-block !important;

    width: auto !important;
    height: auto !important;
    margin: 0 !important;

    color: transparent !important;
    -webkit-text-fill-color: transparent !important;

    font-size: 0 !important;
    line-height: 1 !important;

    background: transparent !important;
    border-radius: 0 !important;
  }

  #index-70600 .pagination .page-numbers::before {
    content: counter(pbw-lab-page, decimal-leading-zero);

    color: var(--pbw-white-soft);
    -webkit-text-fill-color: var(--pbw-white-soft);

    font-family: "ff-meta-correspondence-web-p", sans-serif;
    font-size: var(--pbw-counter-size);
    font-style: normal;
    font-weight: var(--pbw-counter-number-weight);
    line-height: var(--pbw-counter-line-height);
    font-variant-numeric: tabular-nums;
  }

  #index-70600 .pagination .page-numbers.current::before,
  #index-70600 .pagination a.page-numbers:hover::before,
  #index-70600 .pagination a.page-numbers:focus-visible::before {
    color: var(--pbw-accent);
    -webkit-text-fill-color: var(--pbw-accent);
  }

  #index-70600
    .pagination
    > li:not(.page-prev):not(.page-next):not(:nth-last-child(2))::after {
    content: "|";

    display: inline-block;
    margin: 0 var(--pbw-counter-separator-gap);

    color: var(--pbw-white-soft);

    font-family: "ff-meta-correspondence-web-p", sans-serif;
    font-size: var(--pbw-counter-size);
    font-style: normal;
    font-weight: var(--pbw-counter-separator-weight);
    line-height: var(--pbw-counter-line-height);
    font-variant-numeric: tabular-nums;
    vertical-align: middle;
    transform: translateY(-1px);
  }

  #index-70600 .pagination > li.page-prev,
  #index-70600 .pagination > li.page-next {
    position: relative;
    top: -10px;

    width: 48px !important;
    height: 48px !important;
  }

  #index-70600 .pagination > li.page-prev {
    float: left;
    left: calc(-1 * var(--pbw-work-pagination-arrow-edge-shift));
  }

  #index-70600 .pagination > li.page-next {
    float: right;
    right: calc(-1 * var(--pbw-work-pagination-arrow-edge-shift));
  }

  #index-70600 .pagination > li.page-prev > .btn,
  #index-70600 .pagination > li.page-next > .btn {
    display: grid !important;
    place-items: center;

    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--pbw-white-soft) !important;
    background: transparent !important;
    border-radius: 0 !important;
  }

  #index-70600 .pagination > li.page-prev i,
  #index-70600 .pagination > li.page-next i {
    display: none !important;
  }

  #index-70600 .pagination > li.page-prev > .btn::before,
  #index-70600 .pagination > li.page-next > .btn::before {
    content: "";

    display: block;
    width: 48px;
    height: 48px;

    background-color: currentColor;

    -webkit-mask: url("/wp-content/uploads/2026/07/icon_arrow.svg") center /
      contain no-repeat;
    mask: url("/wp-content/uploads/2026/07/icon_arrow.svg") center / contain
      no-repeat;
  }

  #index-70600 .pagination > li.page-prev > .btn::before {
    transform: scaleX(-1);
  }

  #index-70600 .pagination > li.page-prev > .btn:hover,
  #index-70600 .pagination > li.page-prev > .btn:focus-visible,
  #index-70600 .pagination > li.page-next > .btn:hover,
  #index-70600 .pagination > li.page-next > .btn:focus-visible {
    color: var(--pbw-accent) !important;
  }

  #index-70600 .pagination > li.page-prev > .btn.btn-disable-hover,
  #index-70600 .pagination > li.page-next > .btn.btn-disable-hover {
    visibility: hidden;
    pointer-events: none;
  }
}

/* ---------------------------------------------------------
   14c — lab closing line
   --------------------------------------------------------- */

@media (min-width: 960px) {
  .pbw-lab .pbw-section-content + .pbw-section-line-bottom {
    margin-top: 12px !important;
  }
}

/* ---------------------------------------------------------
   14d — lab single video alignment
   --------------------------------------------------------- */

.pbw-lab-content .uncode_text_column > p:has(> iframe[src*="player.vimeo.com"]) {
  text-align: left !important;
}

.pbw-lab-content .uncode_text_column iframe[src*="player.vimeo.com"] {
  display: block !important;
  width: min(840px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 840 / 473;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   14e — lab single long-content reveal protection
   --------------------------------------------------------- */

.pbw-section-reveal:has(.pbw-lab-content).pbw-reveal-ready .pbw-reveal-title,
.pbw-section-reveal:has(.pbw-lab-content).pbw-reveal-ready .pbw-reveal-line-top,
.pbw-section-reveal:has(.pbw-lab-content).pbw-reveal-ready .pbw-reveal-content,
.pbw-section-reveal:has(.pbw-lab-content).pbw-reveal-ready .pbw-reveal-line-bottom {
  opacity: 1;
  transition: none;
  will-change: auto;
}

/* =========================================================
   15 — contact
   ========================================================= */

/* Content frame */

.pbw-contact .pbw-section-content {
  width: var(--pbw-hello-width) !important;
  max-width: none !important;

  margin-right: auto !important;
  margin-left: auto !important;
}

.pbw-contact .uncode_text_column {
  width: min(100%, 700px);
  margin-right: auto;
  margin-left: auto;
}

/* Introduction */

.pbw-contact .uncode_text_column > p:first-child {
  margin-bottom: 24px !important;

  font-size: clamp(18px, 1.35vw, 20px) !important;
  line-height: 1.32 !important;
  text-align: left;
  text-align-last: auto;
}


/* Privacy notice */

.pbw-contact .uncode_text_column.pbw-contact-privacy > p,
.pbw-contact .pbw-contact-privacy .uncode_text_column > p {
  margin: 0 !important;

  font-size: 18px !important;
  line-height: 1.32 !important;
  text-align: left;
  text-align-last: auto;
  white-space: normal;
}

.pbw-contact .pbw-contact-privacy a {
  color: var(--pbw-accent) !important;

  font-weight: 700 !important;
}

/* Form layout */

.pbw-contact .wpcf7-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 48px;
}

/* contact form desktop frame */

@media (min-width: 960px) {
  .pbw-contact .wpcf7-form {
    width: min(100%, 700px) !important;
    margin-right: auto;
    margin-left: auto;
  }
}

.pbw-contact .wpcf7-form > p {
  margin: 0 !important;
  text-align: left;
}

.pbw-contact .wpcf7-form > p:nth-of-type(3),
.pbw-contact .wpcf7-form > p:nth-of-type(4),
.pbw-contact .wpcf7-response-output {
  grid-column: 1 / -1;
}

.pbw-contact .wpcf7-form > p:nth-of-type(4) {
  display: flex;
  justify-content: flex-end;
}

.pbw-contact .wpcf7-form label,
.pbw-contact .wpcf7-form-control-wrap {
  display: block;
}

/* Interactive labels */

.pbw-contact .wpcf7-form label {
  color: var(--pbw-accent) !important;

  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

/* Fields */

.pbw-contact .wpcf7-form input:not([type="submit"]),
.pbw-contact .wpcf7-form textarea {
  width: 100%;

  background-color: #f0fafa !important;
  border-color: #f0fafa !important;
  color: var(--pbw-dark-grey) !important;
  -webkit-text-fill-color: var(--pbw-dark-grey) !important;

  font-family: inherit;
  font-size: 18px !important;
}

.pbw-contact .wpcf7-form input:not([type="submit"]) {
  height: 44px;
}

.pbw-contact .wpcf7-form textarea {
  min-height: 192px;
  resize: vertical;
}

/* Validation */

.pbw-contact .wpcf7-not-valid-tip,
.pbw-contact .wpcf7-response-output {
  color: var(--pbw-white-soft) !important;
  -webkit-text-fill-color: var(--pbw-white-soft) !important;

  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
}

.pbw-contact .wpcf7-response-output {
  margin: 0 !important;
}

/* Submit */

.pbw-contact .wpcf7-form input[type="submit"] {
  min-height: 48px;
  padding: 0 28px;

  background-color: #f0fafa !important;
  border-color: #f0fafa !important;

  color: var(--pbw-dark-grey) !important;
  -webkit-text-fill-color: var(--pbw-dark-grey) !important;

  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.pbw-contact .wpcf7-form input[type="submit"]:hover,
.pbw-contact .wpcf7-form input[type="submit"]:focus {
  background-color: #f0fafa !important;
  border-color: #f0fafa !important;

  color: var(--pbw-dark-grey) !important;
  -webkit-text-fill-color: var(--pbw-dark-grey) !important;
}

/* Mobile */

@media (max-width: 959px) {
  .pbw-contact .uncode_text_column {
    width: 100%;
  }

  .pbw-contact .uncode_text_column > p:first-child {
    font-size: 40px !important;
    white-space: normal;
  }

  .pbw-contact .wpcf7-form {
    grid-template-columns: 1fr;
    gap: 40px 48px;
  }

  .pbw-contact .wpcf7-form > p:nth-of-type(3),
  .pbw-contact .wpcf7-form > p:nth-of-type(4) {
    grid-column: auto;
  }
}