/**
 * TEMAGUE shared foundation + backward-compatibility styles.
 *
 * This file intentionally preserves the earlier shared component rules used by
 * legacy dynamic blocks, saved WordPress content, single posts/pages, floating
 * UI, and common visual tokens. Current rebuilt-home overrides live in main.css.
 */

/*
 * TEMAGUE Client — Front-end styles
 * Consolidated after full desktop/mobile section audit.
 */

:root {
  --px-bg: #070707;
  --px-surface: #101010;
  --px-card: #0b0b0b;
  --px-text: #f4f4f2;
  --px-muted: #9c9c98;
  --px-line: #292929;
  --px-max: 1180px;
  --px-link-hover: #f4c430;
}

* {
  box-sizing: border-box;
}
html {
  /* Keep native document scrolling responsive for keyboard navigation. */
  scroll-behavior: auto;
}
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--px-bg);
  color: var(--px-text);
  font-family: 'Poppins', Arial, sans-serif;
}
img,
video {
  max-width: 100%;
}
button,
input,
textarea,
select {
  font: inherit;
}

.px-wrap {
  width: min(calc(100% - 48px), var(--px-max));
  margin-inline: auto;
}
.px-section {
  padding: 120px 0;
  border-bottom: 1px solid var(--px-line);
}
.px-eyebrow {
  margin: 0 0 18px;
  color: #b7b7b2;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Unified section titles. */
.px-section h2,
.px-faq-title,
.px-final h2 {
  margin-top: 0;
  color: #efefef;
  font-family: 'Poppins', sans-serif;
  font-size: 52px;
  font-weight: 900;
  line-height: 1.2em;
  letter-spacing: -1.1px;
  overflow-wrap: break-word;
}

/* Unified point/item titles. */
.px-section h3,
.px-faq-list .px-faq-item summary {
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2em;
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
  text-decoration: none;
}

/* Unified explanatory/body copy. */
.px-section .px-lead,
.px-section-head p,
.px-why-grid p,
.px-product-copy p,
.px-testimonial-grid blockquote p,
.px-faq-answer p,
.px-about-intro,
.px-final p {
  color: #e8e8e8;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 400;
}

.px-button {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 13px 17px;
  border: 0;
  background: #f2f2ef;
  color: #090909;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

/* Shared link icon. */
.px-link-symbol {
  width: 30px;
  height: 30px;
  display: inline-block;
  flex: 0 0 30px;
  overflow: visible;
  vertical-align: middle;
  fill: none;
  stroke: #fff;
  stroke-width: 2.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 1 SVG unit = 1 CSS px: top 22px, bottom 30px.
   Both lines share the same left starting point; the lower line extends
   farther to the right. The lower line reaches the toggle's right edge,
   so the visible hamburger margin matches the header shell inset. */

@keyframes pxSearchReveal {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Search inside the mobile drawer uses the same component with a compact skin. */

/* =========================================================
   HERO
   ========================================================= */
.px-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(680px, 92svh, 980px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--px-line);
  background: var(--px-bg);
}
.px-hero-media,
.px-hero-video,
.px-hero .px-overlay {
  position: absolute;
  inset: 0;
}

.px-hero-media {
  z-index: 0;
  overflow: hidden;
  background: #050505;
}

.px-hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.px-hero .px-overlay {
  position: absolute;
  inset: 0;
}
.px-hero-slides {
  z-index: 0;
  overflow: hidden;
}
.px-hero-slide {
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1.02);
  transition:
    opacity 1s ease,
    transform 8s ease;
  will-change: opacity, transform;
}
.px-hero .px-overlay {
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.44)),
    radial-gradient(circle at center, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.34));
}
.px-hero-content {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 48px), var(--px-max));
  margin: 0 auto;
  padding-block: clamp(120px, 13svh, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.px-hero-copy {
  width: min(100%, 970px);
  margin: 0 auto;
  text-align: center;
}
.px-hero-eyebrow {
  margin: 0 0 18px;
  text-align: center;
}
.px-hero h1 {
  max-width: 970px;
  margin: 0 auto;
  color: #efefef;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(46px, 6.8vw, 94px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}

.px-hero-headline-2 {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.px-hero-description {
  max-width: 720px;
  margin: 26px auto 0;
  color: #e8e8e8;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
  text-align: center;
}

.px-hero-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 30px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid #ffffff;
  padding: 13px 20px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.px-hero-link:hover,
.px-hero-link:focus-visible {
  border-color: var(--px-link-hover);
  text-decoration: none;
}
.px-hero-link-icon {
  width: 30px;
  height: 30px;
  stroke-width: 2.65;
}

/* =========================================================
   ABOUT + PERSUASION
   ========================================================= */
.px-about,
.px-persuasion.px-about-style {
  padding: 92px 0;
  background: transparent;
  border-bottom: 1px solid var(--px-line);
}
.px-about .px-about-wrap,
.px-persuasion .px-about-wrap {
  width: min(calc(100% - 48px), var(--px-max));
}
.px-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 72px;
  align-items: center;
}
.px-about-content {
  max-width: 720px;
  min-width: 0;
  text-align: left;
}
.px-about-content .px-eyebrow {
  margin: 0 0 34px;
  text-align: left;
  letter-spacing: 0.42em;
}
.px-about-content h2 {
  max-width: 760px;
  margin: 0 0 34px;
  text-align: left;
}
.px-about-intro {
  max-width: 720px;
  margin: 0;
  line-height: 1.45;
  text-align: left;
}
.px-about-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 48px;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}
.px-about-link:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.px-about-link-icon {
  width: 30px;
  height: 30px;
  stroke-width: 2.65;
}
.px-about-photo {
  position: relative;
  width: 100%;
  max-width: 460px;
  justify-self: end;
  padding: 24px 18px 18px;
}
.px-about-polaroid {
  position: relative;
  background: #efefed;
  padding: 24px 18px 52px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  transform: rotate(-0.25deg);
}
.px-about-image {
  aspect-ratio: 1.5/1;
  overflow: hidden;
  background: #d8d8d4;
}
.px-about-image img,
.px-about-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}
.px-about-tape {
  position: absolute;
  z-index: 3;
  top: 5px;
  width: 112px;
  height: 42px;
  background: rgba(238, 238, 232, 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  clip-path: polygon(4% 10%, 96% 0, 100% 88%, 7% 100%, 0 33%);
}
.px-about-tape-left {
  left: -9px;
  transform: rotate(-27deg);
}
.px-about-tape-right {
  right: -8px;
  transform: rotate(27deg) scaleX(-1);
}

/* =========================================================
   WHY US
   ========================================================= */
.px-why {
  background: transparent;
}
.px-why-head {
  max-width: 920px;
  margin: 0 auto 88px;
  text-align: center;
}
.px-why-head .px-eyebrow {
  margin: 0 0 10px;
  letter-spacing: 0.42em;
}
.px-why-head h2 {
  max-width: none;
  margin: 0 auto 4px;
}
.px-why-intro {
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.45;
}
.px-why .px-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  border: 0;
}
.px-why-card {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.px-why-image-link {
  display: block;
  margin-bottom: 34px;
  text-decoration: none;
}
.px-why-image {
  width: 100%;
  aspect-ratio: 1.9/1;
  overflow: hidden;
  background: #e9e9e9;
}
.px-why-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  transition: transform 0.35s ease;
}
.px-why-card:hover .px-why-image img {
  transform: scale(1.02);
}
.px-why-card h3 {
  margin: 0 0 8px;
}
.px-why-card p {
  margin: 0 0 24px;
  line-height: 1.42;
}
.px-why-link {
  display: inline-block;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 800;
  font-style: italic;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================
   PRODUCTS
   ========================================================= */
.px-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 45px;
}
.px-section-head h2 {
  max-width: 760px;
  margin: 0;
}
.px-section-head p {
  max-width: 560px;
  margin: 0;
  line-height: 1.5;
}
.px-product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--px-line);
  border-left: 1px solid var(--px-line);
}
.px-product-card {
  min-width: 0;
  background: var(--px-card);
  border-right: 1px solid var(--px-line);
  border-bottom: 1px solid var(--px-line);
}
.px-product-card > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.px-product-image {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #131313;
}
.px-product-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition:
    transform 0.5s ease,
    filter 0.5s ease;
}
.px-product-card:hover .px-product-image img {
  transform: scale(1.025);
  filter: grayscale(0.2);
}
.px-product-copy {
  padding: 28px;
}
.px-product-copy h3 {
  margin: 0 0 12px;
}
.px-product-copy p {
  margin: 0;
  line-height: 1.5;
}
.px-price {
  margin: 16px 0;
}
.px-price del {
  color: #777;
}
.px-product-copy .px-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.px-product-copy .px-link-icon {
  width: 30px;
  height: 30px;
  stroke-width: 2.65;
}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.px-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 45px;
  border-top: 1px solid var(--px-line);
  border-left: 1px solid var(--px-line);
}
.px-testimonial-grid blockquote {
  min-width: 0;
  min-height: 250px;
  margin: 0;
  padding: 34px;
  border-right: 1px solid var(--px-line);
  border-bottom: 1px solid var(--px-line);
}
.px-testimonial-grid blockquote p {
  margin: 0;
  line-height: 1.45;
}
.px-testimonial-grid blockquote footer {
  margin-top: 55px;
  color: var(--px-muted);
  font-size: 12px;
}
.px-avatar {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
}

/* =========================================================
   FAQ
   ========================================================= */
.px-faq-section {
  padding: 26px 0 28px;
  background: transparent;
  border-bottom: 0;
}
.px-faq-section .px-eyebrow {
  margin-bottom: 18px;
}
.px-faq-title {
  max-width: 760px;
  margin: 0 0 45px;
}
.px-faq-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}
.px-faq-item {
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 7px;
  background: #202020;
}
.px-faq-item summary {
  min-height: 73px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  cursor: pointer;
  list-style: none;
}
.px-faq-item summary::-webkit-details-marker {
  display: none;
}
.px-faq-item summary::marker {
  content: '';
}
.px-faq-chevron {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-right: 1.6px solid #f1f1f1;
  border-bottom: 1.6px solid #f1f1f1;
  transform: rotate(45deg) translateY(-3px);
  transition: transform 0.2s ease;
}
.px-faq-item[open] .px-faq-chevron {
  transform: rotate(225deg) translate(-2px, -2px);
}
.px-faq-answer {
  padding: 0 24px 21px;
}
.px-faq-answer p {
  max-width: none;
  margin: 0;
  line-height: 1.55;
}

/* =========================================================
   FINAL CTA
   ========================================================= */
.px-final {
  padding: 150px 0;
  background: var(--px-bg);
  color: var(--px-text);
  text-align: center;
  border-bottom: 1px solid var(--px-line);
}
.px-final h2 {
  max-width: 760px;
  margin: 0 auto 26px;
}
.px-final p {
  margin: 0 auto;
  line-height: 1.5;
}
.px-final-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid #ffffff;
  padding: 14px 22px;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.px-final-link:hover,
.px-final-link:focus-visible {
  color: var(--px-link-hover);
  border-color: var(--px-link-hover);
}
.px-final-link-icon {
  flex: 0 0 30px;
}

/* =========================================================
   FOOTER + FLOATING UI
   ========================================================= */
.px-footer {
  padding: 80px 0 28px;
  background: #050505;
}
.px-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 70px;
  text-align: center;
}
.px-footer h3,
.px-footer h4 {
  font-family: 'Poppins', sans-serif;
}
.px-footer p,
.px-footer a {
  color: #8f8f8b;
  font-size: 13px;
}
.px-footer a {
  text-decoration: none;
}
.px-footer-links {
  display: grid;
  gap: 10px;
}
.px-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.px-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #efefef;
  text-decoration: none;
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}
.px-social-link svg {
  width: 28px;
  height: 28px;
  display: block;
}
.px-social-link:hover,
.px-social-link:focus-visible {
  color: #f4c430;
  transform: translateY(-2px);
}
.px-social-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 6px;
}
.px-footer-bottom {
  margin-top: 55px;
  padding-top: 24px;
  border-top: 1px solid var(--px-line);
  color: #777;
  font-size: 12px;
  text-align: center;
}
.px-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 0;
  text-decoration: none;
  transform-origin: center;
  transition: transform 0.25s ease;
}
.px-whatsapp-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.px-whatsapp:hover,
.px-whatsapp:focus-visible {
  transform: scale(1.08);
}
@media (max-width: 480px) {
  .px-whatsapp {
    width: 54px;
    height: 54px;
    right: 16px;
    bottom: 16px;
  }
}
.px-cookie {
  position: fixed;
  z-index: 1200;
  left: 22px;
  bottom: 22px;
  width: min(410px, calc(100% - 44px));
  padding: 24px;
  background: #111;
  border: 1px solid #333;
}
.px-cookie[hidden] {
  display: none;
}
.px-cookie h3 {
  margin: 0 0 8px;
}
.px-cookie p {
  color: #aaa;
  font-size: 13px;
}
.px-cookie-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.px-cookie button {
  padding: 10px 14px;
  border: 0;
  background: #eee;
  cursor: pointer;
}
.px-cookie-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  color: #fff;
  font-size: 20px;
}

/* Single post/page: give the article body a comfortable visual break from the post header/meta. */
body.single .wp-block-post-content,
body.page:not(.home) .wp-block-post-content {
  margin-top: 36px;
}
.wp-block-post-content > .alignfull {
  margin-block-start: 0;
}
@media (max-width: 1180px) {
  .px-hero {
    min-height: max(680px, 88svh);
  }
  .px-hero-content {
    width: min(calc(100% - 30px), var(--px-max));
    padding-block: 116px;
  }
  .px-hero h1 {
    font-size: clamp(44px, 8vw, 74px);
  }
}

@media (max-width: 900px) {
  .px-wrap {
    width: min(calc(100% - 30px), var(--px-max));
  }
  .px-section {
    padding: 80px 0;
  }

  .px-about,
  .px-persuasion.px-about-style {
    padding: 72px 0;
  }
  .px-about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .px-about-content {
    max-width: 760px;
    margin: 0;
  }
  .px-about-photo {
    max-width: 560px;
    justify-self: center;
  }
  .px-about-link {
    margin-top: 36px;
  }

  .px-why-head {
    margin-bottom: 58px;
  }
  .px-why .px-why-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .px-why-image-link {
    margin-bottom: 24px;
  }
  .px-why-image {
    aspect-ratio: 1.8/1;
  }

  .px-product-grid {
    grid-template-columns: 1fr;
  }
  .px-testimonial-grid {
    grid-template-columns: 1fr;
  }
  .px-faq-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-faq-title {
    margin-bottom: 32px;
  }

  .px-footer-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }
}

@media (max-width: 620px) {
  /* Mobile section titles: compact while preserving the desktop hierarchy. */
  .px-section h2,
  .px-faq-title,
  .px-final h2 {
    font-size: 40px;
    font-weight: 900;
    line-height: 1.2em;
    letter-spacing: -1.1px;
  }
  .px-wrap,
  .px-about .px-about-wrap,
  .px-persuasion .px-about-wrap {
    width: min(calc(100% - 28px), var(--px-max));
  }

  .px-hero {
    min-height: max(620px, 84svh);
  }
  .px-hero-content {
    width: min(calc(100% - 28px), var(--px-max));
    padding-block: 92px;
  }
  .px-hero h1 {
    font-size: clamp(32px, 9.2vw, 46px);
    line-height: 1;
  }

  .px-section {
    padding: 56px 0;
  }
  .px-about,
  .px-persuasion.px-about-style {
    padding: 58px 0 64px;
  }
  .px-about-content .px-eyebrow {
    margin-bottom: 26px;
  }
  .px-about-content h2 {
    margin-bottom: 24px;
  }
  .px-about-link {
    margin-top: 30px;
  }
  .px-about-photo {
    max-width: 100%;
    padding: 20px 12px 12px;
  }
  .px-about-polaroid {
    padding: 16px 14px 42px;
  }
  .px-about-tape {
    width: 86px;
    height: 34px;
  }

  .px-why-head {
    margin-bottom: 44px;
  }
  .px-why .px-why-grid {
    gap: 46px;
  }

  .px-section-head {
    display: block;
  }
  .px-section-head h2 {
    margin-bottom: 18px;
  }
  .px-product-copy {
    padding: 22px;
  }

  .px-faq-section {
    padding: 28px 0 18px;
  }
  .px-faq-list {
    grid-template-columns: 1fr;
  }
  .px-faq-item summary {
    min-height: 66px;
    padding: 0 20px;
  }
  .px-faq-answer {
    padding: 0 20px 18px;
  }

  .px-final {
    padding: 48px 0 18px;
  }
  .px-footer {
    padding-top: 60px;
  }
  .px-cookie {
    left: 14px;
    bottom: 14px;
    width: calc(100% - 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .px-hero-slide {
    transform: none;
    transition: opacity 0.2s linear;
  }
  .px-hero-slide.is-active {
    transform: none;
  }
}

/* =========================================================
   GLOBAL LINK HOVER
   Warm yellow accent shared by text links, navigation and
   link icons. Interactive controls keep their own UI colors.
   ========================================================= */
a {
  transition: color 0.18s ease;
}
a:hover,
a:focus-visible,
.px-footer a:hover,
.px-footer a:focus-visible,
.px-hero-link:hover,
.px-hero-link:focus-visible,
.px-about-link:hover,
.px-about-link:focus-visible,
.px-why-link:hover,
.px-why-link:focus-visible,
.px-product-card > a:hover .px-link,
.px-product-card > a:focus-visible .px-link,
.px-product-copy .px-link:hover,
.px-product-copy .px-link:focus-visible {
  color: var(--px-link-hover);
}

/* SVG link-chain icons inherit the same hover accent. */
a:hover .px-link-symbol,
a:focus-visible .px-link-symbol,
a:hover .px-link-icon,
a:focus-visible .px-link-icon,
.px-product-card > a:hover .px-link-symbol,
.px-product-card > a:focus-visible .px-link-symbol {
  stroke: var(--px-link-hover);
}

/* Single post & page: comfortable mobile reading gutters. */
@media (max-width: 620px) {
  body.single .wp-block-post-content,
  body.page:not(.home) .wp-block-post-content {
    margin-top: 28px;
  }

  body.single .wp-site-blocks > .wp-block-group,
  body.page:not(.home) .wp-site-blocks > .wp-block-group {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  body.single .wp-block-post-featured-image.alignwide,
  body.page:not(.home) .wp-block-post-featured-image.alignwide {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
}

/* v1.1.68 — mobile WhatsApp icon/label spacing */

/* v1.1.68 — mobile spacing between WhatsApp CTA and hamburger */

/* v1.1.68 — final hero headline color on dark/video background */
.px-hero .px-hero-copy h1,
.px-hero .px-hero-copy .px-hero-headline-2 {
  color: #7cff6b;
}

/* v1.1.68 — robust hero video rendering */
.px-hero-media {
  display: block;
  visibility: visible;
  opacity: 1;
}

.px-hero-video {
  display: block;
  visibility: visible;
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

/* v1.1.68 — content sections below Hero: comfortable gutters + slightly smaller typography */
body.home main > section:not(.px-hero) .px-wrap {
  width: min(calc(100% - 64px), var(--px-max));
}

body.home main > section:not(.px-hero) h2 {
  font-size: clamp(28px, 3.4vw, 48px);
}

body.home main > section:not(.px-hero) h3 {
  font-size: clamp(20px, 2vw, 28px);
}

body.home main > section:not(.px-hero) p,
body.home main > section:not(.px-hero) li,
body.home main > section:not(.px-hero) a,
body.home main > section:not(.px-hero) button {
  font-size: 15px;
}

@media (max-width: 900px) {
  body.home main > section:not(.px-hero) .px-wrap {
    width: min(calc(100% - 40px), var(--px-max));
  }

  body.home main > section:not(.px-hero) h2 {
    font-size: clamp(26px, 5vw, 38px);
  }

  body.home main > section:not(.px-hero) h3 {
    font-size: clamp(19px, 3vw, 25px);
  }
}

@media (max-width: 620px) {
  body.home main > section:not(.px-hero) .px-wrap {
    width: min(calc(100% - 32px), var(--px-max));
  }

  body.home main > section:not(.px-hero) h2 {
    font-size: 28px;
  }

  body.home main > section:not(.px-hero) h3 {
    font-size: 20px;
  }

  body.home main > section:not(.px-hero) p,
  body.home main > section:not(.px-hero) li,
  body.home main > section:not(.px-hero) a,
  body.home main > section:not(.px-hero) button {
    font-size: 14px;
  }
}

/* v1.1.68 — full-width photo grid above Testimonials */
.px-photo-grid {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.px-photo-grid-row {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}

.px-photo-grid-row-top {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.px-photo-grid-row-bottom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.px-photo-grid-item {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #111;
}

.px-photo-grid-row-top .px-photo-grid-item {
  aspect-ratio: 2.05 / 1;
}

.px-photo-grid-row-bottom .px-photo-grid-item {
  aspect-ratio: 3.05 / 1;
}

.px-photo-grid-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 1;
  filter: none;
  transform: none;
}

/* Explicitly no tint/gradient/overlay on this section. */
.px-photo-grid-item::before,
.px-photo-grid-item::after {
  content: none;
}

@media (max-width: 900px) {
  .px-photo-grid-row-top,
  .px-photo-grid-row-bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .px-photo-grid-row-top .px-photo-grid-item,
  .px-photo-grid-row-bottom .px-photo-grid-item {
    aspect-ratio: 1.55 / 1;
  }

  .px-photo-grid-row-top .px-photo-grid-item:last-child {
    grid-column: 1 / -1;
    aspect-ratio: 2.2 / 1;
  }
}

@media (max-width: 620px) {
  .px-photo-grid-row-top,
  .px-photo-grid-row-bottom {
    grid-template-columns: 1fr;
  }

  .px-photo-grid-row-top .px-photo-grid-item,
  .px-photo-grid-row-bottom .px-photo-grid-item,
  .px-photo-grid-row-top .px-photo-grid-item:last-child {
    grid-column: auto;
    aspect-ratio: 16 / 10;
  }
}

/* v1.1.68 — randomized sequential reveal for Photo Grid */
.px-photo-grid-item {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.985);
  transition:
    opacity 0.72s cubic-bezier(0.2, 0.75, 0.25, 1),
    transform 0.82s cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: var(--px-photo-delay, 0ms);
  will-change: opacity, transform;
}

.px-photo-grid-item[data-reveal-origin='left'] {
  transform: translate3d(-42px, 0, 0) scale(0.985);
}

.px-photo-grid-item[data-reveal-origin='right'] {
  transform: translate3d(42px, 0, 0) scale(0.985);
}

.px-photo-grid-item[data-reveal-origin='up'] {
  transform: translate3d(0, -34px, 0) scale(0.985);
}

.px-photo-grid-item[data-reveal-origin='down'] {
  transform: translate3d(0, 34px, 0) scale(0.985);
}

.px-photo-grid-item[data-reveal-origin='zoom'] {
  transform: scale(0.94);
}

.px-photo-grid.is-revealed .px-photo-grid-item {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .px-photo-grid-item,
  .px-photo-grid-item[data-reveal-origin] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* v1.1.68 — original kinetic image + typography showcase */
.px-kinetic-showcase {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #050505;
  color: #fff;
}

.px-kinetic-stage {
  position: relative;
  width: 100%;
  height: clamp(620px, 78vw, 900px);
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 78% 22%, rgba(62, 91, 255, 0.15), transparent 27%),
    radial-gradient(circle at 18% 78%, rgba(124, 255, 107, 0.1), transparent 28%), #050505;
}

.px-kinetic-photo {
  position: absolute;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
  animation: pxKineticPhoto 7.5s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
}

.px-kinetic-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  opacity: 1;
}

.px-kinetic-photo-a {
  width: 30vw;
  height: 25vw;
  min-width: 300px;
  min-height: 250px;
  left: 7%;
  top: 12%;
  animation-delay: 0s;
}
.px-kinetic-photo-b {
  width: 26vw;
  height: 34vw;
  min-width: 260px;
  min-height: 340px;
  right: 7%;
  top: 7%;
  animation-delay: -1.9s;
}
.px-kinetic-photo-c {
  width: 34vw;
  height: 21vw;
  min-width: 340px;
  min-height: 210px;
  left: 19%;
  bottom: 7%;
  animation-delay: -3.8s;
}
.px-kinetic-photo-d {
  width: 25vw;
  height: 19vw;
  min-width: 250px;
  min-height: 190px;
  right: 15%;
  bottom: 10%;
  animation-delay: -5.7s;
}

.px-kinetic-word {
  position: absolute;
  z-index: 4;
  margin: 0;
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.075em;
  white-space: nowrap;
  pointer-events: none;
  animation: pxKineticWord 6.2s cubic-bezier(0.45, 0, 0.2, 1) infinite both;
}

.px-kinetic-word-build {
  left: 3%;
  top: 39%;
  color: #fff;
  font-size: clamp(76px, 15vw, 230px);
}

.px-kinetic-word-better {
  right: 2%;
  bottom: 27%;
  color: #7cff6b;
  font-size: clamp(70px, 13vw, 205px);
  animation-delay: -3.1s;
}

.px-kinetic-pill,
.px-kinetic-line {
  position: absolute;
  z-index: 6;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  animation: pxKineticFloat 4.2s ease-in-out infinite alternate;
}

.px-kinetic-pill {
  padding: 10px 16px;
  border-radius: 999px;
  font-size: clamp(12px, 1.15vw, 17px);
  color: #050505;
}

.px-kinetic-pill-green {
  left: 4%;
  top: 7%;
  background: #7cff6b;
}
.px-kinetic-pill-blue {
  right: 34%;
  top: 13%;
  background: #79a7ff;
  animation-delay: -1.1s;
}
.px-kinetic-pill-orange {
  left: 6%;
  bottom: 12%;
  background: #ff9a52;
  animation-delay: -2.2s;
}
.px-kinetic-pill-pink {
  right: 4%;
  bottom: 6%;
  background: #ff8ed8;
  animation-delay: -3.3s;
}

.px-kinetic-line {
  font-size: clamp(15px, 1.9vw, 28px);
  color: #fff;
}

.px-kinetic-line-one {
  left: 39%;
  top: 5%;
}
.px-kinetic-line-two {
  right: 4%;
  top: 55%;
  color: #b8a5ff;
  animation-delay: -1.7s;
}

.px-kinetic-orbit {
  position: absolute;
  z-index: 1;
  width: 44vw;
  height: 44vw;
  min-width: 420px;
  min-height: 420px;
  left: 29%;
  top: 17%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  animation: pxKineticOrbit 10s linear infinite;
}

.px-kinetic-dot {
  position: absolute;
  z-index: 7;
  border-radius: 50%;
  animation: pxKineticPulse 1.6s ease-in-out infinite alternate;
}

.px-kinetic-dot-one {
  width: 22px;
  height: 22px;
  right: 27%;
  top: 8%;
  background: #ffe66d;
}
.px-kinetic-dot-two {
  width: 14px;
  height: 14px;
  left: 13%;
  bottom: 29%;
  background: #7ddcff;
  animation-delay: -0.8s;
}

@keyframes pxKineticPhoto {
  0%,
  100% {
    opacity: 0.18;
    transform: translate3d(-18px, 52px, 0) scale(0.91) rotate(-1.8deg);
  }
  12%,
  34% {
    opacity: 1;
    transform: translate3d(10px, -8px, 0) scale(1.025) rotate(0.8deg);
  }
  46%,
  64% {
    opacity: 0.72;
    transform: translate3d(-12px, 16px, 0) scale(0.985) rotate(-0.6deg);
  }
  76%,
  90% {
    opacity: 0.28;
    transform: translate3d(22px, -30px, 0) scale(0.95) rotate(1.4deg);
  }
}

@keyframes pxKineticWord {
  0%,
  100% {
    opacity: 0.12;
    transform: translate3d(-7vw, 0, 0) scale(0.96);
  }
  15%,
  36% {
    opacity: 1;
    transform: translate3d(1vw, -4px, 0) scale(1.025);
  }
  48%,
  66% {
    opacity: 0.55;
    transform: translate3d(-1vw, 8px, 0) scale(0.99);
  }
  78%,
  92% {
    opacity: 0.18;
    transform: translate3d(7vw, -6px, 0) scale(0.97);
  }
}

@keyframes pxKineticFloat {
  0% {
    transform: translate3d(-14px, -12px, 0) rotate(-2deg) scale(0.98);
  }
  50% {
    transform: translate3d(10px, 6px, 0) rotate(0.8deg) scale(1.03);
  }
  100% {
    transform: translate3d(18px, 14px, 0) rotate(2deg) scale(1);
  }
}

@keyframes pxKineticOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pxKineticPulse {
  from {
    transform: scale(0.7);
    opacity: 0.45;
  }
  to {
    transform: scale(1.25);
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .px-kinetic-stage {
    height: 760px;
  }
  .px-kinetic-photo-a {
    width: 43vw;
    height: 34vw;
    left: 3%;
    top: 14%;
  }
  .px-kinetic-photo-b {
    width: 38vw;
    height: 48vw;
    right: 3%;
    top: 8%;
  }
  .px-kinetic-photo-c {
    width: 48vw;
    height: 30vw;
    left: 8%;
    bottom: 10%;
  }
  .px-kinetic-photo-d {
    width: 35vw;
    height: 28vw;
    right: 4%;
    bottom: 16%;
  }
  .px-kinetic-word-build {
    top: 43%;
  }
  .px-kinetic-word-better {
    bottom: 29%;
  }
}

@media (max-width: 620px) {
  .px-kinetic-stage {
    height: 680px;
    min-height: 680px;
  }
  .px-kinetic-photo {
    min-width: 0;
    min-height: 0;
  }
  .px-kinetic-photo-a {
    width: 54vw;
    height: 42vw;
    left: 0;
    top: 13%;
  }
  .px-kinetic-photo-b {
    width: 46vw;
    height: 62vw;
    right: 0;
    top: 7%;
  }
  .px-kinetic-photo-c {
    width: 62vw;
    height: 39vw;
    left: 0;
    bottom: 8%;
  }
  .px-kinetic-photo-d {
    width: 42vw;
    height: 35vw;
    right: 0;
    bottom: 17%;
  }
  .px-kinetic-word-build {
    left: 2%;
    top: 42%;
    font-size: 20vw;
  }
  .px-kinetic-word-better {
    right: 2%;
    bottom: 31%;
    font-size: 17vw;
  }
  .px-kinetic-pill {
    padding: 8px 11px;
    font-size: 10px;
  }
  .px-kinetic-pill-blue {
    right: 5%;
    top: 40%;
  }
  .px-kinetic-line-one {
    left: 4%;
    top: 4%;
  }
  .px-kinetic-line-two {
    right: 3%;
    top: 59%;
  }
  .px-kinetic-orbit {
    width: 430px;
    height: 430px;
    min-width: 0;
    min-height: 0;
    left: 4%;
    top: 18%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-kinetic-photo,
  .px-kinetic-word,
  .px-kinetic-pill,
  .px-kinetic-line,
  .px-kinetic-orbit,
  .px-kinetic-dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* v1.1.68 — faster, busier kinetic motion */
.px-kinetic-photo-a {
  animation-name: pxKineticPhotoA;
}
.px-kinetic-photo-b {
  animation-name: pxKineticPhotoB;
}
.px-kinetic-photo-c {
  animation-name: pxKineticPhotoC;
}
.px-kinetic-photo-d {
  animation-name: pxKineticPhotoD;
}

.px-kinetic-pill-green {
  animation: pxKineticDriftA 3.2s ease-in-out infinite alternate;
}
.px-kinetic-pill-blue {
  animation: pxKineticDriftB 3.7s ease-in-out infinite alternate;
}
.px-kinetic-pill-orange {
  animation: pxKineticDriftC 3.4s ease-in-out infinite alternate;
}
.px-kinetic-pill-pink {
  animation: pxKineticDriftD 3.9s ease-in-out infinite alternate;
}

.px-kinetic-line-one {
  animation: pxKineticLineA 4.5s ease-in-out infinite;
}
.px-kinetic-line-two {
  animation: pxKineticLineB 4.9s ease-in-out infinite;
}

.px-kinetic-orbit {
  animation:
    pxKineticOrbit 8s linear infinite,
    pxKineticOrbitPulse 3.2s ease-in-out infinite alternate;
}

.px-kinetic-dot-one {
  animation: pxKineticDotA 2.2s ease-in-out infinite alternate;
}

.px-kinetic-dot-two {
  animation: pxKineticDotB 2.5s ease-in-out infinite alternate;
}

@keyframes pxKineticPhotoA {
  0%,
  100% {
    opacity: 0.2;
    transform: translate3d(-30px, 42px, 0) scale(0.92) rotate(-2deg);
  }
  25% {
    opacity: 1;
    transform: translate3d(18px, -18px, 0) scale(1.03) rotate(1deg);
  }
  55% {
    opacity: 0.82;
    transform: translate3d(-10px, 10px, 0) scale(0.99) rotate(-0.7deg);
  }
  80% {
    opacity: 0.35;
    transform: translate3d(28px, -24px, 0) scale(0.95) rotate(1.6deg);
  }
}
@keyframes pxKineticPhotoB {
  0%,
  100% {
    opacity: 0.22;
    transform: translate3d(28px, -34px, 0) scale(0.93) rotate(1.8deg);
  }
  24% {
    opacity: 1;
    transform: translate3d(-20px, 18px, 0) scale(1.035) rotate(-1.1deg);
  }
  58% {
    opacity: 0.76;
    transform: translate3d(10px, -6px, 0) scale(0.985) rotate(0.5deg);
  }
  82% {
    opacity: 0.32;
    transform: translate3d(-26px, 26px, 0) scale(0.95) rotate(-1.3deg);
  }
}
@keyframes pxKineticPhotoC {
  0%,
  100% {
    opacity: 0.18;
    transform: translate3d(-26px, -28px, 0) scale(0.91) rotate(-1.5deg);
  }
  28% {
    opacity: 1;
    transform: translate3d(24px, 14px, 0) scale(1.025) rotate(0.9deg);
  }
  60% {
    opacity: 0.7;
    transform: translate3d(-12px, -8px, 0) scale(0.99) rotate(-0.4deg);
  }
  84% {
    opacity: 0.3;
    transform: translate3d(18px, 30px, 0) scale(0.95) rotate(1.2deg);
  }
}
@keyframes pxKineticPhotoD {
  0%,
  100% {
    opacity: 0.2;
    transform: translate3d(24px, 36px, 0) scale(0.92) rotate(1.4deg);
  }
  22% {
    opacity: 1;
    transform: translate3d(-18px, -16px, 0) scale(1.03) rotate(-0.8deg);
  }
  54% {
    opacity: 0.8;
    transform: translate3d(8px, 8px, 0) scale(0.985) rotate(0.6deg);
  }
  79% {
    opacity: 0.34;
    transform: translate3d(-24px, -26px, 0) scale(0.95) rotate(-1.4deg);
  }
}

@keyframes pxKineticDriftA {
  from {
    transform: translate3d(-18px, -10px, 0) rotate(-3deg);
  }
  to {
    transform: translate3d(22px, 14px, 0) rotate(2deg);
  }
}
@keyframes pxKineticDriftB {
  from {
    transform: translate3d(16px, -14px, 0) rotate(2deg);
  }
  to {
    transform: translate3d(-20px, 18px, 0) rotate(-2deg);
  }
}
@keyframes pxKineticDriftC {
  from {
    transform: translate3d(-12px, 16px, 0) rotate(2deg);
  }
  to {
    transform: translate3d(20px, -18px, 0) rotate(-2deg);
  }
}
@keyframes pxKineticDriftD {
  from {
    transform: translate3d(14px, 12px, 0) rotate(-2deg);
  }
  to {
    transform: translate3d(-22px, -14px, 0) rotate(2deg);
  }
}

@keyframes pxKineticLineA {
  0%,
  100% {
    opacity: 0.35;
    transform: translate3d(-24px, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(26px, -8px, 0);
  }
}
@keyframes pxKineticLineB {
  0%,
  100% {
    opacity: 0.35;
    transform: translate3d(24px, 0, 0);
  }
  50% {
    opacity: 1;
    transform: translate3d(-28px, 10px, 0);
  }
}

@keyframes pxKineticOrbitPulse {
  from {
    scale: 0.96;
    opacity: 0.45;
  }
  to {
    scale: 1.04;
    opacity: 0.9;
  }
}

@keyframes pxKineticDotA {
  from {
    transform: translate3d(-18px, -12px, 0) scale(0.7);
    opacity: 0.45;
  }
  to {
    transform: translate3d(18px, 14px, 0) scale(1.4);
    opacity: 1;
  }
}
@keyframes pxKineticDotB {
  from {
    transform: translate3d(14px, 16px, 0) scale(0.75);
    opacity: 0.4;
  }
  to {
    transform: translate3d(-20px, -14px, 0) scale(1.35);
    opacity: 1;
  }
}

/* v1.1.68 — continuous kinetic choreography */
.px-kinetic-word {
  display: flex;
  overflow: visible;
  animation: none;
}
.px-kinetic-word > span {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
.px-kinetic-word-build > span {
  animation: pxBuildLetter 6.8s cubic-bezier(0.22, 0.75, 0.22, 1) infinite both;
  animation-delay: calc(var(--i) * 0.14s);
}
.px-kinetic-word-better > span {
  animation: pxBetterLetter 7.2s cubic-bezier(0.22, 0.75, 0.22, 1) infinite both;
  animation-delay: calc(1.15s + var(--i) * 0.13s);
}
@keyframes pxBuildLetter {
  0%,
  5% {
    opacity: 0;
    transform: translate3d(-72vw, -10vh, 0) rotate(-14deg) scale(0.82);
  }
  17%,
  52% {
    opacity: 1;
    transform: none;
  }
  61% {
    opacity: 1;
    transform: translateX(4vw);
  }
  76%,
  100% {
    opacity: 0;
    transform: translate3d(115vw, 5vh, 0) rotate(10deg) scale(0.94);
  }
}
@keyframes pxBetterLetter {
  0%,
  7% {
    opacity: 0;
    transform: translate3d(-115vw, 8vh, 0) rotate(12deg) scale(0.82);
  }
  20%,
  54% {
    opacity: 1;
    transform: none;
  }
  63% {
    opacity: 1;
    transform: translateX(-4vw);
  }
  78%,
  100% {
    opacity: 0;
    transform: translate3d(-115vw, -5vh, 0) rotate(-10deg) scale(0.94);
  }
}
.px-kinetic-photo-a {
  animation: pxSweepA 6.4s cubic-bezier(0.35, 0.7, 0.2, 1) infinite both;
}
.px-kinetic-photo-b {
  animation: pxSweepB 7.1s cubic-bezier(0.35, 0.7, 0.2, 1) -1.7s infinite both;
}
.px-kinetic-photo-c {
  animation: pxSweepC 6.8s cubic-bezier(0.35, 0.7, 0.2, 1) -3.2s infinite both;
}
.px-kinetic-photo-d {
  animation: pxSweepD 7.5s cubic-bezier(0.35, 0.7, 0.2, 1) -4.8s infinite both;
}
@keyframes pxSweepA {
  0%,
  8% {
    opacity: 0;
    transform: translate3d(-120vw, -18vh, 0) rotate(-7deg) scale(0.88);
  }
  24%,
  55% {
    opacity: 1;
    transform: none;
  }
  72%,
  100% {
    opacity: 0;
    transform: translate3d(120vw, 14vh, 0) rotate(7deg) scale(0.94);
  }
}
@keyframes pxSweepB {
  0%,
  8% {
    opacity: 0;
    transform: translate3d(115vw, -12vh, 0) rotate(8deg) scale(0.9);
  }
  23%,
  54% {
    opacity: 1;
    transform: none;
  }
  73%,
  100% {
    opacity: 0;
    transform: translate3d(-115vw, 16vh, 0) rotate(-8deg) scale(0.94);
  }
}
@keyframes pxSweepC {
  0%,
  8% {
    opacity: 0;
    transform: translate3d(-110vw, 20vh, 0) rotate(6deg) scale(0.9);
  }
  25%,
  57% {
    opacity: 1;
    transform: none;
  }
  75%,
  100% {
    opacity: 0;
    transform: translate3d(118vw, -18vh, 0) rotate(-7deg) scale(0.94);
  }
}
@keyframes pxSweepD {
  0%,
  8% {
    opacity: 0;
    transform: translate3d(112vw, 18vh, 0) rotate(-7deg) scale(0.9);
  }
  24%,
  56% {
    opacity: 1;
    transform: none;
  }
  74%,
  100% {
    opacity: 0;
    transform: translate3d(-118vw, -16vh, 0) rotate(7deg) scale(0.94);
  }
}
.px-kinetic-pill-green,
.px-kinetic-line-one {
  animation: pxRunA 4.8s ease-in-out infinite;
}
.px-kinetic-pill-blue,
.px-kinetic-line-two {
  animation: pxRunB 5.1s ease-in-out infinite;
}
.px-kinetic-pill-orange {
  animation: pxRunA 5.3s -1.4s ease-in-out infinite;
}
.px-kinetic-pill-pink {
  animation: pxRunB 5.5s -2.2s ease-in-out infinite;
}
@keyframes pxRunA {
  0%,
  100% {
    transform: translate3d(-9vw, -8px, 0);
    opacity: 0.25;
  }
  50% {
    transform: translate3d(8vw, 10px, 0);
    opacity: 1;
  }
}
@keyframes pxRunB {
  0%,
  100% {
    transform: translate3d(10vw, -9px, 0);
    opacity: 0.25;
  }
  50% {
    transform: translate3d(-9vw, 11px, 0);
    opacity: 1;
  }
}
.px-kinetic-ring-copy {
  position: absolute;
  z-index: 8;
  width: clamp(130px, 15vw, 220px);
  aspect-ratio: 1;
  right: 23%;
  top: 31%;
  pointer-events: none;
  animation: pxRingSpin 7s linear infinite;
}
.px-kinetic-ring-copy svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.px-kinetic-ring-copy text {
  fill: #ffe66d;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 2.2px;
}
@keyframes pxRingSpin {
  to {
    transform: rotate(360deg);
  }
}
.px-kinetic-marquee {
  position: absolute;
  z-index: 10;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 5, 5, 0.72);
}
.px-kinetic-marquee-top {
  top: 0;
}
.px-kinetic-marquee-bottom {
  bottom: 0;
}
.px-kinetic-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.px-kinetic-track span {
  flex: none;
  padding: 10px 0;
  font-size: clamp(12px, 1.15vw, 16px);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.px-kinetic-marquee-top .px-kinetic-track {
  animation: pxQuoteRight 15s linear infinite;
  color: #fff;
}
.px-kinetic-marquee-bottom .px-kinetic-track {
  animation: pxQuoteLeft 16s linear infinite;
  color: #7cff6b;
}
@keyframes pxQuoteLeft {
  to {
    transform: translateX(-50%);
  }
}
@keyframes pxQuoteRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
@media (max-width: 620px) {
  .px-kinetic-ring-copy {
    right: 4%;
    top: 29%;
    width: 120px;
  }
  .px-kinetic-track span {
    padding: 8px 0;
    font-size: 10px;
  }
}

/* v1.1.68 — refined kinetic timing + fragmented photo transitions */

/* Circular copy is intentionally calm and comfortable. */
.px-kinetic-ring-copy {
  animation-duration: 18s;
}

/* BUILD/BETTER: entrance stays lively; exit is slower and clearly letter-by-letter. */
.px-kinetic-word-build > span {
  animation: pxBuildLetter77 9.4s cubic-bezier(0.22, 0.75, 0.22, 1) infinite both;
  animation-delay: calc(var(--i) * 0.16s);
}
.px-kinetic-word-better > span {
  animation: pxBetterLetter77 9.8s cubic-bezier(0.22, 0.75, 0.22, 1) infinite both;
  animation-delay: calc(0.9s + var(--i) * 0.16s);
}
@keyframes pxBuildLetter77 {
  0%,
  5% {
    opacity: 0;
    transform: translate3d(-72vw, -8vh, 0) rotate(-12deg) scale(0.84);
  }
  16%,
  50% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
  58% {
    opacity: 1;
    transform: translate3d(3vw, 0, 0);
  }
  78%,
  100% {
    opacity: 0;
    transform: translate3d(115vw, 4vh, 0) rotate(8deg) scale(0.95);
  }
}
@keyframes pxBetterLetter77 {
  0%,
  6% {
    opacity: 0;
    transform: translate3d(-115vw, 7vh, 0) rotate(10deg) scale(0.84);
  }
  17%,
  51% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0) scale(1);
  }
  59% {
    opacity: 1;
    transform: translate3d(-3vw, 0, 0);
  }
  79%,
  100% {
    opacity: 0;
    transform: translate3d(-115vw, -4vh, 0) rotate(-8deg) scale(0.95);
  }
}

/* Container remains in place; the image itself is assembled from five pieces. */
.px-kinetic-photo-a,
.px-kinetic-photo-b,
.px-kinetic-photo-c,
.px-kinetic-photo-d {
  animation: none;
  opacity: 1;
  transform: none;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.px-photo-fragments {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.px-photo-piece {
  position: absolute;
  display: block;
  background-repeat: no-repeat;
  background-size: 100% 500%;
  opacity: 0;
  will-change: transform, opacity, filter, clip-path;
}

/* PHOTO A — five horizontal slices assemble top-to-bottom. */
.px-kinetic-photo-a .px-photo-piece {
  left: 0;
  width: 100%;
  height: 20%;
  top: calc(var(--piece) * 20%);
  background-position: center calc(var(--piece) * 25%);
  animation: pxSliceAssemble 8.4s cubic-bezier(0.25, 0.75, 0.2, 1) infinite both;
  animation-delay: calc(var(--piece) * 0.14s);
}
@keyframes pxSliceAssemble {
  0%,
  7% {
    opacity: 0;
    transform: translate3d(calc((var(--piece) - 2) * 10vw), -32vh, 0)
      rotate(calc((var(--piece) - 2) * 1.5deg));
    filter: blur(7px);
  }
  22%,
  57% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  68% {
    opacity: 0.9;
    transform: scaleX(0.995);
  }
  86%,
  100% {
    opacity: 0;
    transform: translate3d(calc((var(--piece) - 2) * 16vw), 18vh, 0) scale(0.72);
    filter: blur(13px);
  }
}

/* PHOTO B — irregular puzzle-like pieces arrive from four directions. */
.px-kinetic-photo-b .px-photo-piece {
  background-size: 200% 300%;
  animation: pxPuzzleAssemble 9s cubic-bezier(0.3, 0.75, 0.2, 1) infinite both;
  animation-delay: calc(var(--piece) * 0.17s);
}
.px-kinetic-photo-b .px-photo-piece-0 {
  left: 0;
  top: 0;
  width: 52%;
  height: 36%;
  background-position: 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 82% 72%, 82% 100%, 54% 100%, 54% 82%, 0 82%);
}
.px-kinetic-photo-b .px-photo-piece-1 {
  right: 0;
  top: 0;
  width: 52%;
  height: 52%;
  background-position: 100% 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 36% 100%, 36% 78%, 0 78%, 0 44%, 18% 44%, 18% 22%, 0 22%);
}
.px-kinetic-photo-b .px-photo-piece-2 {
  left: 0;
  top: 31%;
  width: 55%;
  height: 42%;
  background-position: 0 50%;
  clip-path: polygon(0 0, 65% 0, 65% 18%, 100% 18%, 100% 78%, 76% 78%, 76% 100%, 0 100%);
}
.px-kinetic-photo-b .px-photo-piece-3 {
  right: 0;
  top: 48%;
  width: 58%;
  height: 52%;
  background-position: 100% 100%;
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%, 0 35%, 22% 35%);
}
.px-kinetic-photo-b .px-photo-piece-4 {
  left: 0;
  bottom: 0;
  width: 48%;
  height: 32%;
  background-position: 0 100%;
  clip-path: polygon(0 0, 72% 0, 72% 18%, 100% 18%, 100% 100%, 0 100%);
}
@keyframes pxPuzzleAssemble {
  0%,
  6% {
    opacity: 0;
    transform: translate3d(calc((var(--piece) - 2) * 34vw), calc((2 - var(--piece)) * 20vh), 0)
      rotate(calc((var(--piece) - 2) * 7deg)) scale(0.8);
    filter: blur(5px);
  }
  24%,
  59% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  72% {
    opacity: 0.82;
    transform: scale(0.99);
  }
  88%,
  100% {
    opacity: 0;
    transform: translate3d(calc((2 - var(--piece)) * 10vw), calc((var(--piece) - 2) * 10vh), 0) scale(0.35);
    filter: blur(16px);
  }
}

/* PHOTO C — five vertical shutters arrive one after another. */
.px-kinetic-photo-c .px-photo-piece {
  top: 0;
  height: 100%;
  width: 20%;
  left: calc(var(--piece) * 20%);
  background-size: 500% 100%;
  background-position: calc(var(--piece) * 25%) center;
  animation: pxShutterAssemble 8.8s cubic-bezier(0.25, 0.75, 0.2, 1) infinite both;
  animation-delay: calc(var(--piece) * 0.13s);
}
@keyframes pxShutterAssemble {
  0%,
  7% {
    opacity: 0;
    transform: translate3d(0, calc((var(--piece) - 2) * 24vh), 0) rotateY(70deg);
  }
  23%,
  58% {
    opacity: 1;
    transform: none;
  }
  72% {
    opacity: 0.85;
  }
  89%,
  100% {
    opacity: 0;
    transform: translate3d(calc((var(--piece) - 2) * 12vw), -12vh, 0) scale(0.45);
    filter: blur(14px);
  }
}

/* PHOTO D — staggered mosaic fragments with a softer dissolve-out. */
.px-kinetic-photo-d .px-photo-piece {
  width: 52%;
  height: 52%;
  background-size: 200% 200%;
  animation: pxMosaicAssemble 9.3s cubic-bezier(0.3, 0.75, 0.2, 1) infinite both;
  animation-delay: calc(var(--piece) * 0.15s);
}
.px-kinetic-photo-d .px-photo-piece-0 {
  left: 0;
  top: 0;
  background-position: 0 0;
}
.px-kinetic-photo-d .px-photo-piece-1 {
  right: 0;
  top: 0;
  background-position: 100% 0;
}
.px-kinetic-photo-d .px-photo-piece-2 {
  left: 24%;
  top: 24%;
  background-position: 50% 50%;
  z-index: 2;
}
.px-kinetic-photo-d .px-photo-piece-3 {
  left: 0;
  bottom: 0;
  background-position: 0 100%;
}
.px-kinetic-photo-d .px-photo-piece-4 {
  right: 0;
  bottom: 0;
  background-position: 100% 100%;
}
@keyframes pxMosaicAssemble {
  0%,
  6% {
    opacity: 0;
    transform: translate3d(calc((var(--piece) - 2) * 26vw), calc((var(--piece) - 2) * -15vh), 0)
      rotate(calc((var(--piece) - 2) * 6deg)) scale(0.72);
  }
  24%,
  60% {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
  74% {
    opacity: 0.7;
    transform: scale(0.94);
  }
  90%,
  100% {
    opacity: 0;
    transform: translate3d(calc((var(--piece) - 2) * 7vw), calc((var(--piece) - 2) * 6vh), 0) scale(0.18);
    filter: blur(18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-photo-piece {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* v1.1.68 — cinematic fast-cut technology advertisement hero */
.px-tech-ad-hero {
  position: relative;
  min-height: clamp(650px, 92vh, 980px);
  overflow: hidden;
  background: #020202;
  color: #fff;
  isolation: isolate;
}
.px-tech-ad-media,
.px-tech-ad-clip,
.px-tech-ad-flash,
.px-tech-ad-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.px-tech-ad-media {
  z-index: 0;
  background: #000;
}
.px-tech-ad-clip {
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  filter: contrast(1.08) saturate(1.04);
  transition:
    opacity 0.22s linear,
    transform 2.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.px-tech-ad-clip.is-active {
  opacity: 1;
  transform: scale(1);
}
.px-tech-ad-clip.is-leaving {
  opacity: 0;
  transform: scale(1.05);
}
.px-tech-ad-flash {
  z-index: 2;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  mix-blend-mode: screen;
}
.px-tech-ad-flash.is-flashing {
  animation: pxTechFlash 0.24s ease-out;
}
@keyframes pxTechFlash {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
  }
}
.px-tech-ad-grid {
  z-index: 3;
  pointer-events: none;
  opacity: 0.13;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 25%, #000 80%, transparent 100%);
}
.px-tech-ad-hero:after {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.24) 54%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.62), transparent 50%);
}
.px-tech-ad-copy {
  position: absolute;
  z-index: 6;
  left: max(32px, 6vw);
  right: max(32px, 6vw);
  top: 50%;
  transform: translateY(-47%);
  max-width: 1100px;
}
.px-tech-kicker {
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
  letter-spacing: 0.18em;
  margin-bottom: 18px;
  animation: pxTechKicker 5.6s ease-in-out infinite;
}
.px-tech-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.08em 0.22em;
  font-weight: 900;
  font-size: clamp(60px, 10vw, 150px);
  line-height: 0.79;
  letter-spacing: -0.07em;
  text-transform: uppercase;
}
.px-tech-title > span {
  display: inline-block;
  animation: pxTechTitleIn 5.6s cubic-bezier(0.2, 0.75, 0.2, 1) infinite both;
}
.px-tech-title .px-tech-title-future {
  color: #7cff6b;
  animation-delay: 0.12s;
}
.px-tech-title-alt {
  margin-top: 16px;
  font-size: clamp(46px, 7.6vw, 112px);
}
.px-tech-title-alt > span:first-child {
  animation-delay: 0.3s;
}
.px-tech-title-alt > span:last-child {
  animation-delay: 0.42s;
}
.px-tech-outline {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
}
.px-tech-sub {
  margin: 26px 0 22px;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.px-tech-cta {
  display: inline-flex;
  position: relative;
  z-index: 7;
}
@keyframes pxTechTitleIn {
  0%,
  7% {
    opacity: 0;
    transform: translate3d(0, 70px, 0) skewY(5deg);
  }
  17%,
  68% {
    opacity: 1;
    transform: none;
  }
  78%,
  100% {
    opacity: 0;
    transform: translate3d(45px, -24px, 0) skewY(-2deg);
  }
}
@keyframes pxTechKicker {
  0%,
  10% {
    opacity: 0;
    letter-spacing: 0.32em;
  }
  20%,
  75% {
    opacity: 1;
    letter-spacing: 0.18em;
  }
  90%,
  100% {
    opacity: 0;
  }
}
.px-tech-ad-stamp {
  position: absolute;
  z-index: 7;
  right: 4vw;
  top: 17%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  animation: pxTechStamp 12s linear infinite;
}
@keyframes pxTechStamp {
  to {
    transform: rotate(360deg);
  }
}
.px-tech-ad-index {
  position: absolute;
  z-index: 7;
  right: 4vw;
  bottom: 5%;
  display: flex;
  gap: 90px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
}
.px-tech-ad-index:before {
  content: '';
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
}
@media (max-width: 620px) {
  .px-tech-ad-hero {
    min-height: 720px;
  }
  .px-tech-ad-copy {
    left: 16px;
    right: 16px;
    top: 49%;
  }
  .px-tech-title {
    font-size: clamp(48px, 16vw, 76px);
    line-height: 0.84;
  }
  .px-tech-title-alt {
    font-size: clamp(40px, 13vw, 64px);
  }
  .px-tech-ad-stamp {
    width: 100px;
    height: 100px;
    right: 16px;
    top: 14%;
    font-size: 9px;
  }
  .px-tech-ad-index {
    right: 16px;
    bottom: 4%;
    gap: 55px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-tech-ad-clip,
  .px-tech-title > span,
  .px-tech-kicker,
  .px-tech-ad-stamp {
    animation: none;
    transition: none;
  }
}

/* v1.1.68 — mobile hero headline: one line per headline */
@media (max-width: 620px) {
  .px-tech-ad-copy {
    left: 16px;
    right: 16px;
  }

  .px-tech-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    width: 100%;
    gap: 0.18em;
    white-space: nowrap;
    font-size: clamp(30px, 9.6vw, 44px);
    line-height: 0.9;
    letter-spacing: -0.065em;
  }

  .px-tech-title-alt {
    margin-top: 12px;
    font-size: clamp(29px, 9.2vw, 42px);
  }

  .px-tech-title > span {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .px-tech-title-build,
  .px-tech-title-future,
  .px-tech-title-alt > span {
    white-space: nowrap;
  }
}

/* v1.1.68 — cinematic About section, visually connected to Hero */
.px-about-cinematic {
  position: relative;
  overflow: hidden;
  background: #050505;
  color: #fff;
  isolation: isolate;
  padding: clamp(80px, 10vw, 150px) 0;
}
.px-about-cinematic:before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 32%, rgba(124, 255, 107, 0.09), transparent 28%),
    linear-gradient(180deg, #050505, #090909);
  z-index: -2;
}
.px-about-tech-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.09;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.13) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.px-about-cinematic-wrap {
  position: relative;
}
.px-about-cinematic-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  padding-top: 14px;
  margin-bottom: clamp(38px, 5vw, 70px);
}
.px-about-cinematic .px-eyebrow {
  color: #7cff6b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin: 0;
}
.px-about-counter {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.58);
}
.px-about-cinematic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
  gap: clamp(48px, 8vw, 120px);
  align-items: center;
}
.px-about-cinematic-copy h2 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(46px, 6.2vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: #fff;
  text-transform: uppercase;
}
.px-about-cinematic .px-about-intro {
  max-width: 660px;
  margin: 30px 0 0;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.76);
}
.px-about-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.px-about-tech-tags span {
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 7px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
}
.px-about-cinematic-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  color: #7cff6b;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 255, 107, 0.55);
  padding-bottom: 8px;
}
.px-about-arrow {
  font-size: 21px;
  transition: transform 0.25s ease;
}
.px-about-cinematic-link:hover .px-about-arrow {
  transform: translate(5px, -5px);
}
.px-about-cinematic-visual {
  position: relative;
  min-width: 0;
}
.px-about-frame {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #111;
  clip-path: polygon(0 0, 92% 0, 100% 8%, 100% 100%, 8% 100%, 0 92%);
}
.px-about-frame img,
.px-about-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.08) saturate(0.82);
  transform: scale(1.04);
  transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.px-about-cinematic.is-motion-visible .px-about-frame img,
.px-about-cinematic.is-motion-visible .px-about-frame video {
  transform: scale(1);
}
.px-about-frame:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.38));
}
.px-about-scanline {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  height: 1px;
  top: 10%;
  background: #7cff6b;
  box-shadow: 0 0 18px rgba(124, 255, 107, 0.75);
  opacity: 0.7;
  animation: pxAboutScan 5.5s ease-in-out infinite;
}
@keyframes pxAboutScan {
  0%,
  100% {
    top: 8%;
    opacity: 0.15;
  }
  50% {
    top: 88%;
    opacity: 0.75;
  }
}
.px-about-frame-label {
  position: absolute;
  z-index: 4;
  left: 16px;
  bottom: 15px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #fff;
}
.px-about-orbit {
  position: absolute;
  right: -48px;
  top: -48px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(124, 255, 107, 0.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #7cff6b;
  animation: pxAboutOrbit 16s linear infinite;
}
.px-about-orbit span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  max-width: 86px;
}
@keyframes pxAboutOrbit {
  to {
    transform: rotate(360deg);
  }
}

/* Scroll both directions: elements leave softly and re-enter whenever section comes back into view. */
.px-motion-ready .px-about-cinematic [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  filter: blur(5px);
  transition:
    opacity 0.72s ease,
    transform 0.85s cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 0.72s ease;
}
.px-motion-ready .px-about-cinematic .px-about-cinematic-visual[data-motion-item] {
  transform: translate3d(52px, 28px, 0) scale(0.96);
}
.px-about-cinematic.is-motion-visible [data-motion-item] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
.px-about-cinematic.is-motion-visible [data-motion-item]:nth-child(2) {
  transition-delay: 0.08s;
}
.px-about-cinematic.is-motion-visible [data-motion-item]:nth-child(3) {
  transition-delay: 0.16s;
}
.px-about-cinematic.is-motion-visible [data-motion-item]:nth-child(4) {
  transition-delay: 0.24s;
}

@media (max-width: 900px) {
  .px-about-cinematic-grid {
    grid-template-columns: 1fr;
    gap: 52px;
  }
  .px-about-cinematic-copy h2 {
    font-size: clamp(40px, 8vw, 64px);
  }
  .px-about-cinematic-visual {
    width: min(78vw, 520px);
    margin-left: auto;
  }
}
@media (max-width: 620px) {
  .px-about-cinematic {
    padding: 72px 0;
  }
  .px-about-cinematic-head {
    margin-bottom: 34px;
  }
  .px-about-cinematic-grid {
    gap: 42px;
  }
  .px-about-cinematic-copy h2 {
    font-size: clamp(34px, 10.5vw, 48px);
  }
  .px-about-cinematic .px-about-intro {
    margin-top: 22px;
    font-size: 14px;
  }
  .px-about-cinematic-visual {
    width: 88%;
    margin: 0 0 0 auto;
  }
  .px-about-orbit {
    width: 94px;
    height: 94px;
    right: -22px;
    top: -28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-motion-ready .px-about-cinematic [data-motion-item] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .px-about-scanline,
  .px-about-orbit {
    animation: none;
  }
}

/* v1.1.68 — unified cinematic/digital visual language across homepage sections */
.px-cinematic-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 18px;
}
.px-cinematic-section:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 84% 18%, rgba(124, 255, 107, 0.055), transparent 28%),
    radial-gradient(circle at 12% 88%, rgba(121, 167, 255, 0.045), transparent 24%), #050505;
}
.px-cinematic-section:after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.055;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.px-cinematic-section .px-eyebrow {
  color: #7cff6b;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.px-cinematic-section h2,
.px-cinematic-section h3 {
  color: #fff;
}
.px-cinematic-section p {
  color: rgba(255, 255, 255, 0.72);
}
.px-cinematic-section a {
  transition:
    color 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

/* WHY US — sharp editorial cards */
.px-cinematic-why {
  padding-block: clamp(82px, 9vw, 140px);
  min-height: auto;
  height: auto;
}
.px-cinematic-why .px-why-head {
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  padding-top: 16px;
}
.px-cinematic-why .px-why-grid {
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.px-cinematic-why .px-why-card {
  background: #080808;
  padding-bottom: 24px;
  overflow: hidden;
}
.px-cinematic-why .px-why-image {
  overflow: hidden;
}
.px-cinematic-why .px-why-image img {
  filter: saturate(0.75) contrast(1.08);
  transition:
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.5s ease;
}
.px-cinematic-why .px-why-card:hover .px-why-image img {
  transform: scale(1.045);
  filter: saturate(1) contrast(1.05);
}
.px-cinematic-why .px-why-card h3,
.px-cinematic-why .px-why-card p,
.px-cinematic-why .px-why-card .px-why-link {
  margin-left: 22px;
  margin-right: 22px;
}
.px-cinematic-why .px-why-link {
  color: #7cff6b;
}

/* PRODUCTS — dark tech catalog */
.px-cinematic-products {
  padding-block: clamp(82px, 9vw, 140px);
  min-height: auto;
  height: auto;
}
.px-cinematic-products .px-section-head {
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  padding-top: 16px;
}
.px-cinematic-products .px-product-grid {
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.px-cinematic-products .px-product-card {
  background: #080808;
}
.px-cinematic-products .px-product-image {
  overflow: hidden;
}
.px-cinematic-products .px-product-image img {
  filter: saturate(0.72) contrast(1.08);
  transition:
    transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.4s ease;
}
.px-cinematic-products .px-product-card:hover img {
  transform: scale(1.05);
  filter: saturate(1);
}
.px-cinematic-products .px-product-copy {
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.25), #080808);
  color: #fff;
}
.px-cinematic-products .px-link {
  color: #7cff6b;
}

/* PERSUASION — retain content but remove the old light/polaroid feeling */
.px-cinematic-persuasion {
  padding-block: clamp(82px, 9vw, 140px);
  min-height: auto;
  height: auto;
}
.px-cinematic-persuasion .px-about-grid {
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  padding-top: clamp(30px, 4vw, 56px);
}
.px-cinematic-persuasion .px-about-polaroid {
  background: #0b0b0b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: 0;
  transform: none;
  box-shadow: none;
}
.px-cinematic-persuasion .px-about-tape {
  display: none;
}
.px-cinematic-persuasion .px-about-image {
  clip-path: polygon(0 0, 94% 0, 100% 8%, 100% 100%, 6% 100%, 0 92%);
}
.px-cinematic-persuasion .px-about-image img,
.px-cinematic-persuasion .px-about-image video {
  filter: saturate(0.75) contrast(1.08);
}
.px-cinematic-persuasion .px-about-link {
  color: #7cff6b;
}

/* TESTIMONIALS — premium dark quote panels */
.px-cinematic-testimonials {
  padding-block: clamp(82px, 9vw, 140px);
  min-height: auto;
  height: auto;
}
.px-cinematic-testimonials .px-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  padding-top: 16px;
}
.px-cinematic-testimonials .px-testimonial-grid {
  gap: 1px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.px-cinematic-testimonials blockquote {
  margin: 0;
  background: #080808;
  border: 0;
  padding: clamp(24px, 3vw, 42px);
  position: relative;
}
.px-cinematic-testimonials blockquote:before {
  content: '“';
  position: absolute;
  right: 20px;
  top: 4px;
  font-size: 72px;
  line-height: 1;
  color: rgba(124, 255, 107, 0.18);
  font-weight: 900;
}
.px-cinematic-testimonials blockquote footer {
  color: #7cff6b;
}

/* FAQ — clean technical rows */
.px-cinematic-faq {
  padding-block: clamp(82px, 9vw, 140px);
}
.px-cinematic-faq .px-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  padding-top: 16px;
}
.px-cinematic-faq .px-faq-list {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.px-cinematic-faq .px-faq-item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
}
.px-cinematic-faq .px-faq-item summary {
  color: #fff;
}
.px-cinematic-faq .px-faq-answer p {
  color: rgba(255, 255, 255, 0.7);
}

/* FINAL CTA — closes the page like the end-frame of the Hero */
.px-cinematic-final {
  min-height: clamp(460px, 58vw, 700px);
  display: grid;
  align-items: center;
  background: #050505;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.px-cinematic-final:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 72% 45%, rgba(124, 255, 107, 0.13), transparent 30%), #050505;
}
.px-cinematic-final .px-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 18px;
}
.px-cinematic-final h2 {
  color: #fff;
  max-width: 900px;
  letter-spacing: -0.045em;
}
.px-cinematic-final p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 680px;
}
.px-cinematic-final .px-final-link {
  color: #7cff6b;
  border-color: rgba(124, 255, 107, 0.55);
}

/* Reusable bidirectional motion for every converted section. */
.px-motion-ready .px-cinematic-section [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
  filter: blur(4px);
  transition:
    opacity 0.68s ease,
    transform 0.82s cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 0.68s ease;
}
.px-cinematic-section.is-motion-visible [data-motion-item] {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.px-cinematic-section.is-motion-visible [data-motion-item]:nth-child(2) {
  transition-delay: 0.07s;
}
.px-cinematic-section.is-motion-visible [data-motion-item]:nth-child(3) {
  transition-delay: 0.14s;
}
.px-cinematic-section.is-motion-visible [data-motion-item]:nth-child(4) {
  transition-delay: 0.21s;
}

/* Keep the kinetic showcase as the high-energy interlude, but visually bridge it. */
.px-cinematic-kinetic {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 620px) {
  .px-cinematic-section:after {
    background-size: 48px 48px;
  }
  .px-cinematic-why,
  .px-cinematic-products,
  .px-cinematic-persuasion,
  .px-cinematic-testimonials,
  .px-cinematic-faq {
    padding-block: 72px;
    min-height: auto;
    height: auto;
  }
  .px-cinematic-why .px-why-card h3,
  .px-cinematic-why .px-why-card p,
  .px-cinematic-why .px-why-card .px-why-link {
    margin-left: 16px;
    margin-right: 16px;
  }
  .px-cinematic-final {
    min-height: 520px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-motion-ready .px-cinematic-section [data-motion-item] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* v1.1.68 — unified UI details + TEMAGUE-inspired Why Us structure */

/* One shared micro-UI language derived from the approved About section. */
.px-card-tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 18px 22px 0;
}
.px-card-tech-tags span,
.px-final-tech-tags span {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 9px;
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #fff;
}
.px-ui-text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #7cff6b;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 255, 107, 0.52);
  padding-bottom: 7px;
  width: max-content;
}
.px-ui-arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform 0.25s ease;
}
a.px-ui-text-link:hover .px-ui-arrow,
.px-product-card:hover .px-ui-arrow {
  transform: translate(4px, -4px);
}

/* WHY US: editorial, tall, left-aligned cards inspired by the supplied TEMAGUE reference,
   while retaining this theme's own typography, colors, content and motion. */
.px-cinematic-why .px-why-head {
  text-align: left;
  max-width: 900px;
  margin-left: 0;
  margin-right: auto;
}
.px-cinematic-why .px-why-head h2,
.px-cinematic-why .px-why-head p {
  text-align: left;
  margin-left: 0;
}
.px-cinematic-why .px-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: clamp(34px, 5vw, 64px);
}
.px-cinematic-why .px-why-card {
  min-height: clamp(540px, 55vw, 720px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 0 0 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
  background: #080808;
}
.px-cinematic-why .px-why-card:last-child {
  border-right: 0;
}
.px-cinematic-why .px-why-card:nth-child(2) {
  background: #f2f2f0;
  color: #050505;
}
.px-cinematic-why .px-why-card:nth-child(2) h3,
.px-cinematic-why .px-why-card:nth-child(2) p {
  color: #050505;
}
.px-cinematic-why .px-why-card:nth-child(2) .px-card-tech-tags span {
  color: #050505;
  border-color: rgba(5, 5, 5, 0.3);
}
.px-cinematic-why .px-why-image-link {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}
.px-cinematic-why .px-why-image {
  width: 100%;
  height: clamp(270px, 29vw, 400px);
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  background: #0b0b0b;
}
.px-cinematic-why .px-why-card:nth-child(2) .px-why-image {
  border-bottom-color: rgba(5, 5, 5, 0.18);
}
.px-cinematic-why .px-why-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.px-cinematic-why .px-why-card h3 {
  margin: 20px 22px 0;
  font-size: clamp(25px, 2.3vw, 34px);
  line-height: 1.03;
  letter-spacing: -0.035em;
}
.px-cinematic-why .px-why-card p {
  margin: 15px 22px 0;
  line-height: 1.6;
  flex: 1;
}
.px-cinematic-why .px-why-link {
  margin: 24px 22px 0;
}
.px-cinematic-why .px-why-card:nth-child(2) .px-why-link {
  color: #050505;
  border-color: rgba(5, 5, 5, 0.5);
}

/* Products and persuasion now use the same tags + text-arrow CTA family. */
.px-cinematic-products .px-product-copy .px-card-tech-tags {
  margin: 16px 0 0;
}
.px-cinematic-products .px-product-copy .px-ui-text-link {
  margin-top: 18px;
}
.px-cinematic-persuasion .px-about-tech-tags {
  margin-top: 28px;
}
.px-final-tech-tags {
  margin-top: 28px;
}
.px-cinematic-final .px-final-link {
  margin-top: 28px;
}

@media (max-width: 900px) {
  .px-cinematic-why .px-why-grid {
    grid-template-columns: 1fr;
  }
  .px-cinematic-why .px-why-card {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  }
  .px-cinematic-why .px-why-card:last-child {
    border-bottom: 0;
  }
  .px-cinematic-why .px-why-image {
    height: clamp(280px, 62vw, 500px);
  }
}
@media (max-width: 620px) {
  .px-card-tech-tags {
    margin-left: 16px;
    margin-right: 16px;
  }
  .px-cinematic-why .px-why-card h3,
  .px-cinematic-why .px-why-card p,
  .px-cinematic-why .px-why-link {
    margin-left: 16px;
    margin-right: 16px;
  }
  .px-cinematic-why .px-why-image {
    height: 72vw;
  }
}

/* v1.1.68 — Why Us cleanup + left-aligned final section */
.px-cinematic-why .px-why-card {
  justify-content: flex-start;
}
.px-cinematic-why .px-why-card p {
  flex: 0 0 auto;
  margin-bottom: 28px;
}

/* "MULAI DARI SINI" / final CTA: deliberate left editorial composition */
.px-cinematic-final {
  text-align: left;
  min-height: auto;
  height: auto;
}
.px-cinematic-final .px-wrap {
  width: min(calc(100% - 64px), var(--px-max));
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.px-cinematic-final .px-eyebrow,
.px-cinematic-final h2,
.px-cinematic-final p,
.px-cinematic-final .px-final-tech-tags,
.px-cinematic-final .px-final-link {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}
.px-cinematic-final h2 {
  max-width: 820px;
  line-height: 0.94;
}
.px-cinematic-final p {
  max-width: 620px;
  line-height: 1.7;
}
.px-cinematic-final .px-final-tech-tags {
  display: flex;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .px-cinematic-final .px-wrap {
    width: min(calc(100% - 40px), var(--px-max));
  }
}
@media (max-width: 620px) {
  .px-cinematic-final .px-wrap {
    width: min(calc(100% - 32px), var(--px-max));
  }
}

/* v1.1.68 — full-width asymmetric portfolio mosaic below About */
.px-portfolio-mosaic {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #050505;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.px-portfolio-mosaic-head {
  min-height: 64px;
  padding: 0 max(16px, 2.2vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  background: #050505;
}
.px-portfolio-mosaic-kicker,
.px-portfolio-mosaic-index {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
}
.px-portfolio-mosaic-kicker {
  color: #7cff6b;
}
.px-portfolio-mosaic-index {
  color: rgba(255, 255, 255, 0.52);
}

.px-portfolio-mosaic-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(90px, 8.5vw, 150px);
  grid-auto-flow: dense;
  gap: 2px;
  background: #050505;
}
.px-portfolio-tile {
  position: relative;
  overflow: hidden;
  background: #111;
  min-height: 0;
}
.px-portfolio-tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.08);
  transform: scale(1.035);
  transition:
    transform 0.85s cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 0.45s ease;
}
.px-portfolio-tile:hover img {
  transform: scale(1.085);
  filter: saturate(1) contrast(1.05);
}
.px-portfolio-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 35%, rgba(0, 0, 0, 0.68) 100%);
  transition: background 0.35s ease;
}
.px-portfolio-tile:hover .px-portfolio-shade {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.76) 100%);
}

/* Deliberately irregular editorial mosaic — no equal card rhythm. */
.px-portfolio-tile-1 {
  grid-column: span 5;
  grid-row: span 3;
}
.px-portfolio-tile-2 {
  grid-column: span 3;
  grid-row: span 4;
}
.px-portfolio-tile-3 {
  grid-column: span 4;
  grid-row: span 2;
}
.px-portfolio-tile-4 {
  grid-column: span 4;
  grid-row: span 2;
}
.px-portfolio-tile-5 {
  grid-column: span 5;
  grid-row: span 2;
}
.px-portfolio-tile-6 {
  grid-column: span 3;
  grid-row: span 3;
}
.px-portfolio-tile-7 {
  grid-column: span 4;
  grid-row: span 3;
}
.px-portfolio-tile-8 {
  grid-column: span 5;
  grid-row: span 2;
}
.px-portfolio-tile-9 {
  grid-column: span 3;
  grid-row: span 2;
}
.px-portfolio-tile-10 {
  grid-column: span 4;
  grid-row: span 2;
}

.px-portfolio-label {
  position: absolute;
  z-index: 3;
  left: clamp(14px, 1.5vw, 24px);
  bottom: clamp(14px, 1.5vw, 22px);
  margin: 0;
  width: max-content;
  max-width: calc(100% - 28px);
  font-size: clamp(16px, 1.65vw, 26px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: none;
  transition: transform 0.3s ease;
}
.px-portfolio-tile:hover .px-portfolio-label {
  transform: translateY(-4px);
}
.px-portfolio-label-tag {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  color: #fff;
  background: rgba(5, 5, 5, 0.22);
  backdrop-filter: blur(5px);
}
.px-portfolio-label-green {
  padding: 8px 11px;
  background: #7cff6b;
  color: #050505;
}
.px-portfolio-label-white {
  padding: 8px 11px;
  background: #fff;
  color: #050505;
}
.px-portfolio-label-line {
  color: #fff;
  border-bottom: 2px solid #7cff6b;
  padding-bottom: 5px;
}
.px-portfolio-label-blue {
  padding: 8px 11px;
  background: #79a7ff;
  color: #050505;
}

/* Uses the same two-way viewport motion language as About. */
.px-motion-ready .px-portfolio-mosaic [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.62s ease,
    transform 0.78s cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 0.62s ease;
}
.px-portfolio-mosaic.is-motion-visible [data-motion-item] {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.px-portfolio-mosaic.is-motion-visible .px-portfolio-tile:nth-child(2) {
  transition-delay: 0.04s;
}
.px-portfolio-mosaic.is-motion-visible .px-portfolio-tile:nth-child(3) {
  transition-delay: 0.08s;
}
.px-portfolio-mosaic.is-motion-visible .px-portfolio-tile:nth-child(4) {
  transition-delay: 0.12s;
}
.px-portfolio-mosaic.is-motion-visible .px-portfolio-tile:nth-child(5) {
  transition-delay: 0.16s;
}

@media (max-width: 900px) {
  .px-portfolio-mosaic-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: 110px;
  }
  .px-portfolio-tile-1 {
    grid-column: span 4;
    grid-row: span 3;
  }
  .px-portfolio-tile-2 {
    grid-column: span 2;
    grid-row: span 3;
  }
  .px-portfolio-tile-3 {
    grid-column: span 3;
    grid-row: span 2;
  }
  .px-portfolio-tile-4 {
    grid-column: span 3;
    grid-row: span 2;
  }
  .px-portfolio-tile-5 {
    grid-column: span 4;
    grid-row: span 2;
  }
  .px-portfolio-tile-6 {
    grid-column: span 2;
    grid-row: span 3;
  }
  .px-portfolio-tile-7 {
    grid-column: span 4;
    grid-row: span 3;
  }
  .px-portfolio-tile-8 {
    grid-column: span 3;
    grid-row: span 2;
  }
  .px-portfolio-tile-9 {
    grid-column: span 3;
    grid-row: span 2;
  }
  .px-portfolio-tile-10 {
    grid-column: span 6;
    grid-row: span 2;
  }
}
@media (max-width: 620px) {
  .px-portfolio-mosaic-head {
    min-height: 56px;
  }
  .px-portfolio-mosaic-index {
    display: none;
  }
  .px-portfolio-mosaic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 128px;
  }
  .px-portfolio-tile-1 {
    grid-column: span 2;
    grid-row: span 2;
  }
  .px-portfolio-tile-2 {
    grid-column: span 1;
    grid-row: span 2;
  }
  .px-portfolio-tile-3 {
    grid-column: span 1;
    grid-row: span 1;
  }
  .px-portfolio-tile-4 {
    grid-column: span 1;
    grid-row: span 1;
  }
  .px-portfolio-tile-5 {
    grid-column: span 2;
    grid-row: span 2;
  }
  .px-portfolio-tile-6 {
    grid-column: span 1;
    grid-row: span 2;
  }
  .px-portfolio-tile-7 {
    grid-column: span 1;
    grid-row: span 2;
  }
  .px-portfolio-tile-8 {
    grid-column: span 2;
    grid-row: span 1;
  }
  .px-portfolio-tile-9 {
    grid-column: span 1;
    grid-row: span 1;
  }
  .px-portfolio-tile-10 {
    grid-column: span 1;
    grid-row: span 1;
  }
  .px-portfolio-label {
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-motion-ready .px-portfolio-mosaic [data-motion-item] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* v1.1.68 — About image is intentionally shorter */
.px-about-cinematic .px-about-cinematic-visual {
  align-self: center;
}
.px-about-cinematic .px-about-frame {
  aspect-ratio: auto;
  height: clamp(360px, 38vw, 520px);
}
@media (max-width: 900px) {
  .px-about-cinematic .px-about-frame {
    height: clamp(340px, 58vw, 460px);
  }
}
@media (max-width: 620px) {
  .px-about-cinematic .px-about-frame {
    height: 340px;
  }
}

/* v1.1.68 — Why Us: image-free editorial icon cards */
.px-cinematic-why .px-why-card {
  min-height: 460px;
}
.px-cinematic-why .px-why-icon-stage {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 34px 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(135deg, rgba(124, 255, 107, 0.05), transparent 48%), #080808;
}
.px-cinematic-why .px-why-icon-stage svg {
  width: 112px;
  height: 112px;
  fill: none;
  stroke: #7cff6b;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.px-cinematic-why .px-why-card:nth-child(2) .px-why-icon-stage {
  background: #f2f2f0;
  border-bottom-color: rgba(5, 5, 5, 0.18);
}
.px-cinematic-why .px-why-card:nth-child(2) .px-why-icon-stage svg {
  stroke: #050505;
}
@media (max-width: 620px) {
  .px-cinematic-why .px-why-icon-stage {
    height: 170px;
    padding: 26px 16px;
  }
  .px-cinematic-why .px-why-icon-stage svg {
    width: 88px;
    height: 88px;
  }
}

/* v1.1.68 — center the final portfolio row */
@media (min-width: 901px) {
  .px-portfolio-mosaic-grid {
    grid-auto-flow: row;
  }
  .px-portfolio-tile-9 {
    grid-column: 3 / span 3;
    grid-row: auto;
  }
  .px-portfolio-tile-10 {
    grid-column: 5 / span 4;
    grid-row: auto;
  }
}

/* v1.1.68 — About Us: true full-bleed right visual + compact header rhythm */
.px-about-cinematic .px-about-cinematic-copy h2 {
  margin: 0 0 clamp(18px, 2vw, 28px);
}
.px-about-cinematic .px-about-intro {
  margin-top: 0;
}
.px-about-action-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-top: 34px;
}
.px-about-action-row .px-about-cinematic-link {
  margin-top: 0;
  flex: 0 0 auto;
}
.px-about-copy-orbit {
  flex: 0 0 auto;
  pointer-events: none;
}
.px-about-copy-orbit .px-about-orbit {
  position: relative;
  inset: auto;
}

@media (min-width: 901px) {
  .px-about-cinematic {
    padding: 0;
    min-height: 700px;
    overflow: hidden;
  }
  .px-about-cinematic .px-about-cinematic-wrap {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    min-height: 700px;
    position: relative;
  }
  /* Section label sits close to the title and overlays the full-bleed image on the right. */
  .px-about-cinematic .px-about-cinematic-head {
    position: absolute;
    z-index: 8;
    top: 28px;
    left: max(32px, calc((100vw - var(--px-max)) / 2));
    right: max(32px, calc((100vw - var(--px-max)) / 2));
    margin: 0;
    padding-top: 12px;
  }
  .px-about-cinematic .px-about-cinematic-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.92fr);
    gap: clamp(42px, 6vw, 92px);
    align-items: stretch;
    min-height: 700px;
  }
  .px-about-cinematic .px-about-cinematic-copy {
    align-self: center;
    padding: 108px 0 54px max(32px, calc((100vw - var(--px-max)) / 2));
    min-width: 0;
  }
  .px-about-cinematic .px-about-cinematic-visual {
    width: 100%;
    height: 700px;
    min-height: 700px;
    margin: 0;
    align-self: stretch;
  }
  .px-about-cinematic .px-about-frame {
    width: 100%;
    height: 100%;
    min-height: 700px;
    aspect-ratio: auto;
    clip-path: none;
    border: 0;
  }
  .px-about-cinematic .px-about-frame img,
  .px-about-cinematic .px-about-frame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .px-about-frame-label {
    left: 18px;
    bottom: 18px;
  }
  .px-about-action-row {
    max-width: 660px;
  }
  .px-about-copy-orbit .px-about-orbit {
    width: 118px;
    height: 118px;
  }
}

@media (max-width: 900px) {
  .px-about-action-row {
    align-items: flex-end;
  }
  .px-about-copy-orbit .px-about-orbit {
    width: 104px;
    height: 104px;
  }
}
@media (max-width: 620px) {
  .px-about-action-row {
    gap: 18px;
    margin-top: 28px;
  }
  .px-about-copy-orbit .px-about-orbit {
    width: 88px;
    height: 88px;
  }
}

/* v1.1.68 — About Us correction: CTA/orbit up + image reaches exact bottom divider */
@media (min-width: 901px) {
  .px-about-cinematic {
    position: relative;
    min-height: 700px;
    padding: 48px 0 18px;
    min-height: auto;
    height: auto;
  }
  .px-about-cinematic .px-about-cinematic-wrap {
    position: relative;
    min-height: 700px;
  }
  .px-about-cinematic .px-about-cinematic-grid {
    position: relative;
    min-height: 700px;
    grid-template-columns: minmax(0, 54%) minmax(0, 46%);
  }
  .px-about-cinematic .px-about-cinematic-copy {
    grid-column: 1;
    position: relative;
    z-index: 3;
    padding-top: 92px;
    padding-bottom: 42px;
  }
  .px-about-action-row {
    margin-top: 18px;
    align-items: flex-end;
    justify-content: space-between;
  }
  .px-about-action-row .px-about-cinematic-link {
    margin-top: 0;
    align-self: flex-end;
  }
  .px-about-copy-orbit {
    align-self: flex-end;
    margin: 0;
    padding: 0;
  }
  .px-about-copy-orbit .px-about-orbit {
    width: 118px;
    height: 118px;
    margin: 0;
  }
  .px-about-cinematic .px-about-cinematic-visual {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    height: auto;
    min-height: 0;
    margin: 0;
  }
  .px-about-cinematic .px-about-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }
  .px-about-cinematic .px-about-frame img,
  .px-about-cinematic .px-about-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .px-about-cinematic .px-about-cinematic-head {
    z-index: 9;
  }
}

/* v1.1.68 — asymmetric 3-card quote grid directly below Hero */
.px-hero-quote-grid {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #050505;
  overflow: hidden;
}
.px-hero-quote-grid-inner {
  display: grid;
  grid-template-columns: minmax(0, 39fr) minmax(0, 61fr);
  grid-template-rows: clamp(250px, 28vw, 430px) clamp(250px, 28vw, 430px);
  width: 100%;
  gap: 0;
}
.px-hero-quote-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border: 0;
}
.px-hero-quote-card-1 {
  grid-column: 1;
  grid-row: 1;
}
.px-hero-quote-card-2 {
  grid-column: 2;
  grid-row: 1;
}
.px-hero-quote-card-3 {
  grid-column: 1/-1;
  grid-row: 2;
}
.px-hero-quote-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.px-hero-quote-card:hover img {
  transform: scale(1.035);
}
.px-hero-quote-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.px-hero-quote-light .px-hero-quote-overlay {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.14));
}
.px-hero-quote-dark .px-hero-quote-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.48));
}
.px-hero-quote-blue .px-hero-quote-overlay {
  background: linear-gradient(90deg, rgba(0, 33, 110, 0.18), rgba(0, 0, 0, 0.22));
}
.px-hero-quote-card p {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 3vw, 52px);
  bottom: clamp(20px, 3vw, 46px);
  max-width: 80%;
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 3.3vw, 54px);
  line-height: 0.92;
  font-weight: 900;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28);
}
.px-hero-quote-light p {
  color: #090909;
  text-shadow: none;
}
@media (max-width: 700px) {
  .px-hero-quote-grid-inner {
    grid-template-columns: 42% 58%;
    grid-template-rows: 190px 210px;
  }
  .px-hero-quote-card p {
    left: 14px;
    bottom: 14px;
    max-width: 88%;
    font-size: clamp(17px, 5.2vw, 28px);
  }
}

/* v1.1.68 — Hero standard height + vertically centered content */

.px-tech-ad-copy {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .px-tech-ad-copy {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

@media (max-width: 620px) {
  .px-tech-ad-copy {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

/* v1.2.32 — canonical header geometry. Keep one positioning model at all scroll states. */
body.home main {
  margin-top: 0;
  padding-top: 0;
}
body.home .px-tech-ad-hero {
  margin-top: 0;
  padding-top: 0;
}
@media (min-width: 901px) {
  body.home .px-tech-ad-hero {
    top: 0;
  }
}

/* Refined label: no long mechanical rule;


/* v1.1.68 — Portfolio Mosaic desktop bottom row: tiles 9 & 10 side by side */
@media (min-width: 901px) {
  .px-portfolio-mosaic-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .px-portfolio-tile-9 {
    grid-column: 3 / span 4;
    grid-row: auto;
    justify-self: stretch;
    align-self: stretch;
    width: auto;
    margin: 0;
  }

  .px-portfolio-tile-10 {
    grid-column: 7 / span 4;
    grid-row: auto;
    justify-self: stretch;
    align-self: stretch;
    width: auto;
    margin: 0;
  }
}

/* v1.1.68 — floating contact button: double chat-bubble icon */
.px-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #00b04b;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  text-decoration: none;
  overflow: visible;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}
.px-whatsapp:hover,
.px-whatsapp:focus-visible {
  transform: scale(1.06);
  background: #009941;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.px-whatsapp .px-floating-chat-icon {
  display: block;
  width: 40px;
  height: 40px;
  color: #fff;
  overflow: visible;
}
@media (max-width: 480px) {
  .px-whatsapp {
    right: 16px;
    bottom: 16px;
    width: 52px;
    height: 52px;
  }
}

/* v1.1.68 — guaranteed-visible white double chat icon */
.px-whatsapp .px-floating-chat-icon {
  display: block;
  width: 40px;
  height: 40px;
  overflow: visible;
}
.px-whatsapp .px-floating-chat-icon .px-chat-bubble-back {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.px-whatsapp .px-floating-chat-icon .px-chat-bubble-front {
  fill: #fff;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.px-whatsapp .px-floating-chat-icon .px-chat-line {
  fill: #00b04b;
  stroke: none;
}
@media (max-width: 480px) {
  .px-whatsapp .px-floating-chat-icon {
    width: 34px;
    height: 34px;
  }
}

/* v1.1.68 — floating contact icon rebuilt with pure HTML/CSS */
.px-whatsapp {
  font-size: 0;
  line-height: 0;
}

.px-whatsapp .px-chat-glyph {
  position: relative;
  display: block;
  width: 38px;
  height: 38px;
  visibility: visible;
  opacity: 1;
}

.px-whatsapp .px-chat-glyph-back {
  position: absolute;
  right: 1px;
  bottom: 2px;
  display: block;
  width: 23px;
  height: 19px;
  border: 3px solid #fff;
  border-radius: 7px;
  box-sizing: border-box;
  background: transparent;
}
.px-whatsapp .px-chat-glyph-back::after {
  content: '';
  position: absolute;
  right: 1px;
  bottom: -7px;
  width: 8px;
  height: 8px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: skew(18deg);
  background: transparent;
}

.px-whatsapp .px-chat-glyph-front {
  position: absolute;
  left: 0;
  top: 1px;
  display: block;
  width: 29px;
  height: 23px;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.px-whatsapp .px-chat-glyph-front::after {
  content: '';
  position: absolute;
  left: 5px;
  bottom: -6px;
  width: 9px;
  height: 9px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.px-whatsapp .px-chat-glyph-line {
  position: absolute;
  left: 7px;
  display: block;
  height: 3px;
  border-radius: 3px;
  background: #00b04b;
}
.px-whatsapp .px-chat-glyph-line-1 {
  top: 7px;
  width: 15px;
}
.px-whatsapp .px-chat-glyph-line-2 {
  top: 13px;
  width: 11px;
}

@media (max-width: 480px) {
  .px-whatsapp .px-chat-glyph {
    transform: scale(0.88);
    transform-origin: center;
  }
}

/* v1.1.68 — floating contact stack: promo badge + online sparkle */
.px-floating-contact-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.px-floating-contact-stack .px-whatsapp {
  position: relative;
  right: auto;
  bottom: auto;
  flex: 0 0 auto;
  pointer-events: auto;
}

/* subtle online twinkles */
.px-online-spark {
  position: absolute;
  z-index: 4;
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7cff6b;
  box-shadow:
    0 0 0 2px rgba(124, 255, 107, 0.1),
    0 0 10px rgba(124, 255, 107, 0.95),
    0 0 18px rgba(124, 255, 107, 0.55);
  pointer-events: none;
  animation: pxOnlineSpark 1.9s ease-in-out infinite;
}
.px-online-spark-1 {
  top: 4px;
  right: 5px;
  animation-delay: 0s;
}
.px-online-spark-2 {
  top: 12px;
  right: -2px;
  width: 4px;
  height: 4px;
  animation-delay: 0.55s;
}
.px-online-spark-3 {
  top: -1px;
  right: 16px;
  width: 3px;
  height: 3px;
  animation-delay: 1.05s;
}
@keyframes pxOnlineSpark {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.68);
  }
  45% {
    opacity: 1;
    transform: scale(1.2);
  }
  62% {
    opacity: 0.55;
    transform: scale(0.92);
  }
}

/* circular promo badge above the chat button */
.px-floating-promo-badge {
  position: relative;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 18px;
  box-sizing: border-box;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(18, 24, 34, 0.98) 0%,
    rgba(7, 11, 17, 0.99) 72%
  );
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  pointer-events: none;
  overflow: hidden;
}

/* rotating visual ring; text stays still because only this layer rotates */
.px-floating-promo-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #1c8cff 0deg 42deg,
    transparent 42deg 112deg,
    #7cff6b 112deg 158deg,
    transparent 158deg 240deg,
    #1c8cff 240deg 292deg,
    transparent 292deg 360deg
  );
  animation: pxPromoSpin 7s linear infinite;
}
.px-floating-promo-spin::before {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #090d13;
}
.px-floating-promo-spin::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.16);
}

.px-floating-promo-text {
  position: relative;
  z-index: 2;
  display: block;
  width: 82px;
  color: #fff;
  text-align: center;
  font-size: 10px;
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
  transform: none;
}

@keyframes pxPromoSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 480px) {
  .px-floating-contact-stack {
    right: 16px;
    bottom: 16px;
    gap: 10px;
  }
  .px-floating-promo-badge {
    width: 96px;
    height: 96px;
    padding: 14px;
  }
  .px-floating-promo-text {
    width: 70px;
    font-size: 8.5px;
    line-height: 1.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-floating-promo-spin,
  .px-online-spark {
    animation: none;
  }
}

/* v1.1.68 — refine floating promo badge text centering + contact icon geometry */

/* Keep promo text mathematically centered inside the circular badge */
.px-floating-promo-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.px-floating-promo-text {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: 78px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.23;
  font-weight: 800;
  letter-spacing: 0;
}

/* Clean up the contact icon proportions */
.px-whatsapp .px-chat-glyph {
  width: 36px;
  height: 36px;
}

.px-whatsapp .px-chat-glyph-front {
  left: 1px;
  top: 2px;
  width: 27px;
  height: 22px;
  border-radius: 7px;
}

.px-whatsapp .px-chat-glyph-front::after {
  left: 5px;
  bottom: -5px;
  width: 8px;
  height: 8px;
}

.px-whatsapp .px-chat-glyph-back {
  right: 1px;
  bottom: 2px;
  width: 21px;
  height: 18px;
  border-width: 3px;
  border-radius: 6px;
}

.px-whatsapp .px-chat-glyph-back::after {
  right: 1px;
  bottom: -6px;
  width: 7px;
  height: 7px;
  border-right-width: 3px;
  border-bottom-width: 3px;
}

.px-whatsapp .px-chat-glyph-line {
  left: 7px;
  height: 3px;
}

.px-whatsapp .px-chat-glyph-line-1 {
  top: 7px;
  width: 14px;
}

.px-whatsapp .px-chat-glyph-line-2 {
  top: 13px;
  width: 10px;
}

/* make the online sparkle a little cleaner and less intrusive */
.px-online-spark-1 {
  top: 3px;
  right: 4px;
  width: 6px;
  height: 6px;
}
.px-online-spark-2 {
  top: 10px;
  right: -1px;
  width: 3px;
  height: 3px;
}
.px-online-spark-3 {
  top: 0;
  right: 14px;
  width: 2px;
  height: 2px;
}

@media (max-width: 480px) {
  .px-floating-promo-text {
    width: 66px;
    font-size: 8px;
    line-height: 1.22;
  }
  .px-whatsapp .px-chat-glyph {
    width: 31px;
    height: 31px;
    transform: none;
  }
  .px-whatsapp .px-chat-glyph-front {
    width: 24px;
    height: 19px;
  }
  .px-whatsapp .px-chat-glyph-back {
    width: 19px;
    height: 16px;
  }
}

/* v1.1.68 — online indicator becomes a white petromax-like breathing outer ring */

.px-floating-contact-stack .px-whatsapp {
  position: relative;
  isolation: isolate;
}

/* soft white breathing halo around the outer circle */
.px-floating-contact-stack .px-whatsapp::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.88);
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.55),
    0 0 18px rgba(255, 255, 255, 0.28),
    0 0 28px rgba(255, 255, 255, 0.14);
  opacity: 0.34;
  transform: scale(0.98);
  animation: pxPetromaxGlow 2.35s ease-in-out infinite;
  pointer-events: none;
}

/* a second thin glow layer makes the pulse feel like light, not a blinking dot */
.px-floating-contact-stack .px-whatsapp::after {
  content: '';
  position: absolute;
  z-index: -2;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.36);
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.18);
  opacity: 0.12;
  animation: pxPetromaxGlowOuter 2.35s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pxPetromaxGlow {
  0%,
  100% {
    opacity: 0.22;
    transform: scale(0.985);
    border-color: rgba(255, 255, 255, 0.54);
    box-shadow:
      0 0 5px rgba(255, 255, 255, 0.28),
      0 0 12px rgba(255, 255, 255, 0.14),
      0 0 20px rgba(255, 255, 255, 0.08);
  }
  45% {
    opacity: 0.95;
    transform: scale(1.045);
    border-color: rgba(255, 255, 255, 1);
    box-shadow:
      0 0 10px rgba(255, 255, 255, 0.9),
      0 0 22px rgba(255, 255, 255, 0.5),
      0 0 36px rgba(255, 255, 255, 0.22);
  }
  62% {
    opacity: 0.54;
    transform: scale(1.015);
  }
}

@keyframes pxPetromaxGlowOuter {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.98);
  }
  45% {
    opacity: 0.34;
    transform: scale(1.06);
  }
  62% {
    opacity: 0.16;
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-floating-contact-stack .px-whatsapp::before,
  .px-floating-contact-stack .px-whatsapp::after {
    animation: none;
    opacity: 0.45;
    transform: none;
  }
}

/* v1.1.68 — high-intensity white petromax pulse on floating contact ring */
.px-floating-contact-stack .px-whatsapp::before {
  inset: -6px;
  border: 2.5px solid #fff;
  opacity: 0.42;
  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.85),
    0 0 18px rgba(255, 255, 255, 0.65),
    0 0 34px rgba(255, 255, 255, 0.42),
    0 0 52px rgba(255, 255, 255, 0.2);
  animation: pxPetromaxGlowStrong 1.8s ease-in-out infinite;
}
.px-floating-contact-stack .px-whatsapp::after {
  inset: -11px;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  opacity: 0.22;
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.55),
    0 0 38px rgba(255, 255, 255, 0.3),
    0 0 62px rgba(255, 255, 255, 0.16);
  animation: pxPetromaxGlowOuterStrong 1.8s ease-in-out infinite;
}
@keyframes pxPetromaxGlowStrong {
  0%,
  100% {
    opacity: 0.24;
    transform: scale(0.985);
    box-shadow:
      0 0 5px rgba(255, 255, 255, 0.35),
      0 0 12px rgba(255, 255, 255, 0.18),
      0 0 22px rgba(255, 255, 255, 0.08);
  }
  42% {
    opacity: 1;
    transform: scale(1.055);
    border-color: #fff;
    box-shadow:
      0 0 10px rgba(255, 255, 255, 1),
      0 0 24px rgba(255, 255, 255, 0.95),
      0 0 46px rgba(255, 255, 255, 0.7),
      0 0 72px rgba(255, 255, 255, 0.38);
  }
  55% {
    opacity: 0.9;
    transform: scale(1.04);
  }
  72% {
    opacity: 0.36;
    transform: scale(1);
  }
}
@keyframes pxPetromaxGlowOuterStrong {
  0%,
  100% {
    opacity: 0.08;
    transform: scale(0.97);
  }
  42% {
    opacity: 0.72;
    transform: scale(1.09);
  }
  55% {
    opacity: 0.52;
    transform: scale(1.065);
  }
  72% {
    opacity: 0.14;
    transform: scale(1);
  }
}

/* v1.1.68 — logged-in mobile: header returns to viewport top after admin bar scrolls away */

/* WordPress uses the shorter admin bar on wider logged-in screens */

/* keep the floating badge independent of footer layout */
.px-floating-contact-stack {
  max-width: 116px;
}

/* =========================================================
   v1.1.68 — CODE AUDIT / CANONICAL OVERRIDE LAYER
   Purpose: stabilize layout after iterative revisions without
   removing existing settings, renderers, or section features.
   ========================================================= */

/* ---------- Global overflow safety ---------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- Header / WordPress admin bar ---------- */

/* ---------- Hero ---------- */
body.home main,
body.home .px-tech-ad-hero {
  margin-top: 0;
  padding-top: 0;
}
.px-tech-ad-hero {
  height: clamp(620px, 78vh, 780px);
  min-height: 620px;
  max-height: 780px;
}
.px-tech-ad-copy {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
@media (max-width: 900px) {
  .px-tech-ad-hero {
    height: clamp(560px, 76vh, 700px);
    min-height: 560px;
    max-height: 700px;
  }
}
@media (max-width: 620px) {
  .px-tech-ad-hero {
    height: clamp(520px, 72vh, 620px);
    min-height: 520px;
    max-height: 620px;
  }
}

/* ---------- Portfolio final row desktop ---------- */
@media (min-width: 901px) {
  .px-portfolio-mosaic-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  .px-portfolio-tile-9 {
    grid-column: 3 / span 4;
    grid-row: auto;
    width: auto;
    margin: 0;
  }
  .px-portfolio-tile-10 {
    grid-column: 7 / span 4;
    grid-row: auto;
    width: auto;
    margin: 0;
  }
}

/* ---------- Floating contact stack ---------- */
.px-floating-contact-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 99999;
  width: 116px;
  max-width: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}
.px-floating-contact-stack .px-whatsapp {
  position: relative;
  right: auto;
  bottom: auto;
  pointer-events: auto;
}
.px-online-spark {
  display: none;
}
@media (max-width: 480px) {
  .px-floating-contact-stack {
    right: 14px;
    bottom: 16px;
    width: 96px;
    max-width: 96px;
    gap: 10px;
  }
}

/* v1.1.68 — Trusted Businesses / Logo Section
   Left-aligned copy + real multi-logo carousel with visible local examples. */
.px-trusted-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 78% 8%, rgba(120, 145, 180, 0.16), transparent 30%),
    radial-gradient(circle at 52% 120%, rgba(40, 52, 70, 0.13), transparent 42%),
    linear-gradient(180deg, #0a0d12 0%, #07090d 100%);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.px-trusted-decor {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.px-trusted-decor-lines {
  top: -20px;
  left: -8px;
  width: 170px;
  height: 330px;
  opacity: 0.26;
  background: repeating-linear-gradient(
    45deg,
    transparent 0 11px,
    rgba(255, 255, 255, 0.16) 12px 13px,
    transparent 14px 24px
  );
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.px-trusted-decor-arc {
  width: 720px;
  height: 720px;
  right: -300px;
  top: -325px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  box-shadow:
    inset 0 0 100px rgba(255, 255, 255, 0.015),
    0 0 100px rgba(98, 126, 164, 0.05);
}

.px-trusted-strip-inner {
  width: min(calc(100% - 56px), 1320px);
  margin-inline: auto;
  padding: 70px 0 58px;
}

.px-trusted-strip-head {
  max-width: 780px;
  margin: 0 0 56px;
  text-align: left;
}

.px-trusted-strip-label-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  margin-bottom: 24px;
}

.px-trusted-strip-line {
  width: 48px;
  height: 1px;
  background: rgba(255, 255, 255, 0.34);
}

.px-trusted-strip-label-row .px-trusted-strip-line:last-child {
  display: none;
}

.px-trusted-strip-label {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.px-trusted-strip-title {
  display: block;
  margin: 0;
  color: #f8fafc;
  font-size: clamp(40px, 4.5vw, 68px);
  line-height: 1.02;
  font-weight: 750;
  letter-spacing: -0.05em;
  text-align: left;
}

.px-trusted-strip-description {
  display: block;
  max-width: 720px;
  margin: 24px 0 0;
  color: #b7c0ce;
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  text-align: left;
}

.px-trusted-carousel {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.px-trusted-arrow {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.015);
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.px-trusted-arrow:hover,
.px-trusted-arrow:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.58);
  transform: scale(1.04);
}

.px-trusted-arrow span {
  display: block;
  margin-top: -4px;
  font-size: 38px;
  line-height: 1;
  font-weight: 300;
}

.px-trusted-strip-logos {
  display: flex;
  align-items: center;
  gap: 34px;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}

.px-trusted-strip-logos::-webkit-scrollbar {
  display: none;
}

.px-trusted-strip-item {
  flex: 0 0 calc((100% - 170px) / 6);
  min-width: 145px;
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
  scroll-snap-align: start;
}

.px-trusted-strip-item img {
  display: block;
  width: 100%;
  height: 62px;
  max-width: 172px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: none;
}

.px-trusted-indicators {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}

.px-trusted-indicators span {
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.px-trusted-indicators span.is-active {
  background: #fff;
}

@media (max-width: 1000px) {
  .px-trusted-strip {
    min-height: 560px;
  }

  .px-trusted-strip-inner {
    width: min(calc(100% - 40px), 1180px);
    padding: 60px 0 50px;
  }

  .px-trusted-strip-head {
    margin-bottom: 44px;
  }

  .px-trusted-carousel {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 12px;
  }

  .px-trusted-arrow {
    width: 44px;
    height: 44px;
  }

  .px-trusted-strip-item {
    flex-basis: calc((100% - 54px) / 4);
    min-width: 145px;
  }
}

@media (max-width: 620px) {
  .px-trusted-strip {
    min-height: auto;
  }

  .px-trusted-strip-inner {
    width: min(calc(100% - 28px), 1180px);
    padding: 48px 0 42px;
  }

  .px-trusted-strip-head {
    margin-bottom: 36px;
  }

  .px-trusted-strip-label-row {
    gap: 12px;
    margin-bottom: 19px;
  }

  .px-trusted-strip-line {
    width: 34px;
  }

  .px-trusted-strip-label {
    font-size: 10px;
    letter-spacing: 0.26em;
  }

  .px-trusted-strip-title {
    font-size: 38px;
  }

  .px-trusted-strip-description {
    margin-top: 18px;
    font-size: 14px;
    line-height: 1.65;
  }

  .px-trusted-carousel {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .px-trusted-arrow {
    width: 38px;
    height: 38px;
  }

  .px-trusted-arrow span {
    font-size: 30px;
  }

  .px-trusted-strip-item {
    flex-basis: 78%;
    min-width: 145px;
    min-height: 78px;
  }

  .px-trusted-strip-item img {
    height: 54px;
    max-width: 165px;
  }

  .px-trusted-indicators {
    gap: 10px;
    margin-top: 32px;
  }

  .px-trusted-indicators span {
    width: 34px;
    height: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-trusted-strip-logos {
    scroll-behavior: auto;
  }
  .px-trusted-arrow {
    transition: none;
  }
}

/* v1.1.68 — Trusted section copy: single-line desktop title + description */
@media (min-width: 1001px) {
  .px-trusted-strip-head {
    max-width: none;
    width: 100%;
  }

  .px-trusted-strip-title {
    white-space: nowrap;
    max-width: none;
  }

  .px-trusted-strip-description {
    white-space: nowrap;
    max-width: none;
  }
}

@media (max-width: 1000px) {
  .px-trusted-strip-title,
  .px-trusted-strip-description {
    white-space: normal;
  }
}

/* v1.1.68 — FOOTER: single source of truth */
.px-footer.px-editorial-footer {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #050505;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.px-editorial-footer,
.px-editorial-footer * {
  box-sizing: border-box;
}

/* ---------- top 3-column area ---------- */
.px-editorial-footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr) minmax(250px, 0.78fr);
  width: 100%;
  min-width: 0;
  align-items: stretch;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.px-editorial-footer-top > div {
  min-width: 0;
  padding: 38px 42px;
  border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.px-editorial-footer-top > div:last-child {
  border-right: 0;
}

.px-editorial-footer-logo {
  display: block;
  max-width: 180px;
  max-height: 56px;
  object-fit: contain;
}

.px-editorial-footer-wordmark {
  display: block;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.px-editorial-footer-brand p {
  max-width: 350px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  line-height: 1.65;
}

.px-editorial-footer-kicker {
  display: block;
  margin: 0;
  color: #7cff6b;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.px-editorial-footer-message {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.px-editorial-footer-message h2 {
  margin: 34px 0 0;
  color: #fff;
  font-size: clamp(48px, 6.2vw, 94px);
  line-height: 0.86;
  font-weight: 800;
  letter-spacing: -0.065em;
}

.px-editorial-footer-message h2 em {
  color: #7cff6b;
  font-style: normal;
}

.px-editorial-footer-social {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.px-editorial-social-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  margin-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.px-editorial-social-list > a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 10px 0;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
}

.px-editorial-social-name {
  display: contents;
}

.px-editorial-social-icon {
  grid-column: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  line-height: 0;
}

.px-editorial-social-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  max-width: 24px;
  max-height: 24px;
}

.px-editorial-social-icon svg .is-fill {
  fill: currentColor;
  stroke: none;
}

.px-editorial-social-name > span:last-child {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.px-editorial-social-list > a > span:last-child {
  grid-column: 3;
  width: 18px;
  justify-self: end;
  text-align: center;
}

.px-editorial-social-list > a:hover,
.px-editorial-social-list > a:focus-visible {
  color: #7cff6b;
}

/* ---------- explore links ---------- */
.px-editorial-footer-links {
  display: grid;
  grid-template-columns: minmax(140px, 0.32fr) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  width: 100%;
  padding: 20px 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.px-editorial-footer-link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 24px;
  min-width: 0;
}

.px-editorial-footer-link-row a {
  color: rgba(255, 255, 255, 0.76);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
}

.px-editorial-footer-link-row a:hover,
.px-editorial-footer-link-row a:focus-visible {
  color: #7cff6b;
}

/* ---------- legal / copyright row ----------
   Important: vertical spacing is intentionally symmetrical. */
.px-editorial-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 28px 42px;
  gap: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.px-editorial-footer-bottom-left,
.px-editorial-footer-bottom-right {
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
}

.px-editorial-footer-bottom-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.px-editorial-footer-bottom-left a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.px-editorial-footer-bottom-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  flex: 0 0 auto;
}

.px-editorial-footer-legal {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 0;
}

.px-editorial-footer-legal a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.px-editorial-footer-legal-sep {
  color: rgba(255, 255, 255, 0.34);
  font-size: 11px;
  line-height: 1;
}

.px-editorial-footer-toplink {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.px-editorial-footer-toplink span:last-child {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.26);
}

.px-editorial-footer-toplink:hover,
.px-editorial-footer-toplink:focus-visible {
  color: #7cff6b;
}

/* ---------- giant wordmark ----------
   Two-column composition:
   DESIGN = full section height
   BUILD + BETTER = two equal stacked rows */
.px-editorial-footer-type {
  display: grid;
  grid-template-columns: minmax(0, 1.36fr) minmax(0, 1fr);
  width: 100%;
  height: clamp(300px, 25vw, 440px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #050505;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.px-editorial-footer-type-design,
.px-editorial-footer-type-stack,
.px-editorial-footer-type-build,
.px-editorial-footer-type-better {
  min-width: 0;
  min-height: 0;
}

.px-editorial-footer-type-design {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0 0 clamp(18px, 2.2vw, 42px);
  overflow: hidden;
  color: #fff;
  font-size: clamp(118px, 17.4vw, 330px);
  line-height: 0.72;
  font-weight: 900;
  letter-spacing: -0.09em;
  white-space: nowrap;
}

.px-editorial-footer-type-stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  overflow: hidden;
}

.px-editorial-footer-type-build,
.px-editorial-footer-type-better {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: clamp(12px, 1.2vw, 24px);
  overflow: hidden;
  white-space: nowrap;
  font-size: clamp(74px, 9.2vw, 174px);
  line-height: 0.76;
  font-weight: 900;
  letter-spacing: -0.075em;
}

.px-editorial-footer-type-build {
  color: transparent;
  -webkit-text-stroke: 2px #7cff6b;
  text-stroke: 2px #7cff6b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.px-editorial-footer-type-better {
  color: #fff;
}

/* Optical centering: top and bottom whitespace are intentionally equal. */
.px-editorial-footer-type-design,
.px-editorial-footer-type-build,
.px-editorial-footer-type-better {
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .px-editorial-footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .px-editorial-footer-social {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
  }

  .px-editorial-social-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }

  .px-editorial-social-list > a {
    padding: 10px 14px;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
  }

  .px-editorial-footer-bottom {
    padding-inline: 32px;
  }
}

@media (max-width: 760px) {
  .px-editorial-footer-top {
    display: block;
  }

  .px-editorial-footer-top > div {
    width: 100%;
    padding: 32px 20px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }

  .px-editorial-footer-message h2 {
    margin-top: 28px;
    font-size: clamp(48px, 15vw, 72px);
  }

  .px-editorial-social-list {
    display: block;
    border-left: 0;
  }

  .px-editorial-social-list > a {
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    padding: 10px 0;
    border-right: 0;
  }

  .px-editorial-footer-links {
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }

  .px-editorial-footer-link-row {
    justify-content: flex-start;
  }

  .px-editorial-footer-bottom {
    display: block;
    padding: 24px 20px;
  }

  .px-editorial-footer-bottom-right {
    margin-top: 18px;
    justify-content: space-between;
    gap: 16px;
  }

  .px-editorial-footer-legal {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .px-editorial-footer-type {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    height: 180px;
  }

  .px-editorial-footer-type-design {
    padding-left: 8px;
    font-size: 24vw;
  }

  .px-editorial-footer-type-build,
  .px-editorial-footer-type-better {
    padding-left: 8px;
    font-size: 13vw;
    -webkit-text-stroke-width: 1px;
  }
}

/* v1.1.68 — giant footer wordmark responsive tuning */
@media (min-width: 761px) and (max-width: 1180px) {
  .px-editorial-footer-type {
    height: clamp(250px, 28vw, 340px);
  }
  .px-editorial-footer-type-design {
    font-size: 18.2vw;
  }
  .px-editorial-footer-type-build,
  .px-editorial-footer-type-better {
    font-size: 9.7vw;
  }
}

/* v1.1.68 — WordPress footer integration boundary only */
body .wp-site-blocks > .four-my-theme-footer-part {
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  display: block;
}

/* v1.1.68 — exact user footer widget CSS; single source of truth */
/* Reset & Container Utama Full Width */
.tm-footer-wrapper {
  background-color: #000000;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  width: 100%;
  margin: 0;
  padding: 18px 40px 24px 40px;
  box-sizing: border-box;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}

.tm-footer-container {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

/* --- BAGIAN ATAS (TOP SECTION - 4 KOLOM) --- */
.tm-footer-top {
  display: grid;
  grid-template-columns: 360px 260px 1fr auto;
  align-items: start;
  gap: 30px;
  padding-bottom: 2px;
  position: relative;
}

/* Kolom 1: Brand */

.tm-logo {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 2px;
  color: #ffffff;
  margin: 0;
  line-height: 1;
}

.tm-logo span {
  font-size: 14px;
  vertical-align: super;
  font-weight: normal;
}

.tm-tagline {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
}

.tm-brand-desc {
  font-size: 13px;
  color: #a0a0a0;
  margin: 0;
  line-height: 1.5;
}

/* Kolom 2: Slogan */
.tm-slogan-col {
  text-align: left;
  padding-left: 25px;
  border-left: 1.5px solid #444444;
}

.tm-number-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #888888;
  margin-bottom: 6px;
  font-weight: 600;
}

.tm-number-badge::before,
.tm-number-badge::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 1px;
  background-color: #666666;
}

.tm-slogan-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.2;
}

.tm-slogan-subtitle {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0;
  color: #666666;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Kolom 3: Motif Orisinal */
.tm-pattern-col {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 0;
  opacity: 0.35;
  padding: 0 10px;
}

/* Kolom 4: Social Media Icons */
.tm-social-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  justify-self: end;
  justify-content: flex-start;
}

.tm-social-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tm-social-link {
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 22px;
  transition:
    opacity 0.3s,
    transform 0.2s;
}

.tm-social-link i {
  color: #ffffff;
  pointer-events: none;
  display: block;
}

.tm-social-link:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.tm-social-text {
  font-size: 11px;
  letter-spacing: 2px;
  color: #888888;
  text-transform: uppercase;
  font-weight: 600;
  text-align: left;
}

/* --- GARIS PEMBATAS HORIZONTAL --- */
.tm-divider-horizontal {
  width: 100%;
  height: 1px;
  background-color: #333333;
  margin: 4px 0 8px;
}

/* --- BAGIAN BAWAH --- */
.tm-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.tm-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
}

.tm-nav-links a {
  color: #dddddd;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.3s;
}

.tm-nav-links a:hover {
  color: #ffffff;
}

.tm-nav-separator {
  color: #444444;
  font-size: 12px;
}

.tm-bottom-right-action {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tm-family-site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1.5px solid #666666;
  padding: 10px 18px;
  width: 210px;
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 600;
  transition: border-color 0.3s;
}

.tm-family-site:hover {
  border-color: #ffffff;
}

.tm-triangle-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #ffffff;
  display: inline-block;
}

.tm-back-to-top {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.tm-back-btn-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.tm-back-btn-circle i {
  font-size: 14px;
  color: #ffffff;
}

.tm-back-to-top:hover .tm-back-btn-circle {
  border-color: #ffffff;
  background-color: #222222;
}

.tm-footer-sub-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  font-size: 12px;
  color: #777777;
}

.tm-sub-slogan {
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  margin-left: auto;
  text-align: right;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 1100px) {
  .tm-footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 35px;
  }
  .tm-pattern-col {
    display: none;
  }
  .tm-social-col {
    justify-self: start;
  }
}

@media (max-width: 768px) {
  .tm-footer-wrapper {
    padding: 40px 20px 30px 20px;
  }

  .tm-footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .tm-slogan-col {
    border-left: none;
    padding-left: 0;
  }

  .tm-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .tm-bottom-right-action {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  .tm-family-site {
    width: 100%;
    box-sizing: border-box;
  }

  .tm-footer-sub-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* =========================================================
   HOMEPAGE SECTION SYSTEM — v1.1.69
   Single source of truth for section spacing and intro type.
   Keeps special visual layouts intact while making every
   standard label → title → description rhythm consistent.
   ========================================================= */
:root {
  --px-section-space: 72px;
  --px-section-gap: 20px;
  --px-section-label-gap: 16px;
  --px-section-description-gap: 18px;
  --px-section-label-size: 11px;
  --px-section-title-size: 48px;
  --px-section-description-size: clamp(14px, 1.15vw, 17px);
  --px-section-title-line: 1.08;
  --px-section-description-line: 1.75;
}

/* Equal outer spacing for every homepage section after Hero. */
body.home main > section {
  margin-top: 0;
  margin-bottom: 0;
}
body.home main > .px-hero + section,
body.home main > section:not(.px-hero) + section {
  margin-top: var(--px-section-gap);
}

body.home
  main
  > section:not(.px-hero):not(.px-hero-quote-grid):not(.px-kinetic-showcase):not(.px-portfolio-mosaic) {
  padding-top: var(--px-section-space);
  padding-bottom: var(--px-section-space);
}

/* Standard section label. */
body.home main .px-eyebrow,
body.home main .px-trusted-strip-label {
  margin: 0 0 var(--px-section-label-gap);
  color: rgba(255, 255, 255, 0.78);
  font-family: 'Poppins', sans-serif;
  font-size: var(--px-section-label-size);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body.home main .px-trusted-strip-label-row {
  margin-bottom: var(--px-section-label-gap);
}
body.home main .px-trusted-strip-label-row .px-trusted-strip-label {
  margin-bottom: 0;
}

/* Standard section title. */
body.home main .px-section h2,
body.home main .px-available-designs h2,
body.home main .px-about-cinematic h2,
body.home main .px-faq-title,
body.home main .px-final h2,
body.home main .px-trusted-strip-title {
  margin: 0;
  color: #efefef;
  font-family: 'Poppins', sans-serif;
  font-size: var(--px-section-title-size);
  font-weight: 900;
  line-height: var(--px-section-title-line);
  letter-spacing: -1px;
  overflow-wrap: break-word;
}

/* Standard section description. */
body.home main .px-section .px-lead,
body.home main .px-section-description,
body.home main .px-section-head > p,
body.home main .px-why-intro,
body.home main .px-about-intro,
body.home main .px-faq-intro,
body.home main .px-final > .px-wrap > p,
body.home main .px-trusted-strip-description {
  max-width: 760px;
  margin-top: var(--px-section-description-gap);
  margin-bottom: 0;
  color: rgba(244, 244, 242, 0.72);
  font-family: 'Poppins', sans-serif;
  font-size: var(--px-section-description-size);
  font-weight: 400;
  line-height: var(--px-section-description-line);
}

/* Remove legacy one-off heading margins that caused drift. */
body.home main .px-about-cinematic-copy > h2,
body.home main .px-why-head > h2,
body.home main .px-section-head > h2,
body.home main .px-cinematic-testimonials > .px-wrap > h2,
body.home main .px-faq-title,
body.home main .px-final h2 {
  margin-bottom: 0;
}

/* Products uses the same vertical intro rhythm as every other section. */
body.home main .px-section-head {
  display: block;
  margin-top: 0;
  margin-bottom: 42px;
}
body.home main .px-section-head > h2,
body.home main .px-section-head > p {
  max-width: 760px;
}

/* Keep section-specific alignment, but not section-specific spacing. */
body.home main .px-why-head {
  margin-top: 0;
  margin-bottom: 42px;
}
body.home main .px-about-content .px-eyebrow,
body.home main .px-why-head .px-eyebrow,
body.home main .px-faq-section .px-eyebrow {
  margin-bottom: var(--px-section-label-gap);
  letter-spacing: 0.22em;
}
body.home main .px-testimonial-grid,
body.home main .px-faq-list {
  margin-top: 42px;
}
body.home main .px-faq-title {
  max-width: 760px;
}

/* Trusted section follows the exact same typography and vertical rhythm. */
body.home main .px-trusted-strip-inner {
  padding-top: 0;
  padding-bottom: 0;
}
body.home main .px-trusted-strip-head {
  max-width: 860px;
  margin: 0 0 42px;
}
body.home main .px-trusted-strip-title,
body.home main .px-trusted-strip-description {
  white-space: normal;
}

/* Prevent trailing child margins from creating unequal section bottoms. */
body.home main > section:not(.px-hero) > :last-child,
body.home main > section:not(.px-hero) > .px-wrap > :last-child {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  :root {
    --px-section-space: 56px;
    --px-section-title-size: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --px-section-space: 44px;
    --px-section-gap: 16px;
    --px-section-label-gap: 14px;
    --px-section-description-gap: 16px;
    --px-section-label-size: 10px;
    --px-section-title-size: 32px;
  }

  body.home main .px-section-head,
  body.home main .px-why-head,
  body.home main .px-trusted-strip-head {
    margin-bottom: 32px;
  }
  body.home main .px-testimonial-grid,
  body.home main .px-faq-list {
    margin-top: 32px;
  }
}

/* =========================================================
   FOOTER SYSTEM — v1.1.93
   Consolidated footer rules. Replaces the accumulated v1.1.70–v1.1.92
   override stack with one predictable desktop/mobile layout.
   ========================================================= */

/* WordPress template-part boundary: no phantom spacing around footer. */
body .wp-site-blocks > .four-my-theme-footer-part,
.four-my-theme-footer-part,
.four-my-theme-footer-part > .wp-block-shortcode {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
}

.tm-footer-wrapper {
  --tm-footer-x: 40px;
  --tm-footer-top-y: 18px;
  --tm-footer-text: 15px;
  --tm-footer-muted: #8a8a8a;
  --tm-footer-line: #333333;
  width: 100%;
  margin: 0;
  padding: 0 var(--tm-footer-x) 24px;
  box-sizing: border-box;
  overflow: hidden;
  background: #000;
  color: #fff;
}

.tm-footer-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}

.tm-footer-top {
  display: grid;
  grid-template-columns: 360px 260px minmax(120px, 1fr) auto;
  align-items: start;
  column-gap: 30px;
  row-gap: 0;
  margin: 0;
  padding: var(--tm-footer-top-y) 0 12px;
  min-height: 0;
  height: auto;
  background: #000;
}

.tm-brand-col,
.tm-slogan-col,
.tm-pattern-col,
.tm-social-col {
  min-width: 0;
  min-height: 0;
  height: auto;
  margin: 0;
}

.tm-brand-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tm-logo {
  margin: 0;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 2px;
}
.tm-logo span {
  font-size: 16px;
  font-weight: 400;
  vertical-align: super;
}
.tm-tagline {
  margin: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.tm-brand-desc {
  margin: 0;
  color: #a0a0a0;
  font-size: 15px;
  line-height: 1.5;
}

.tm-slogan-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 25px;
  border-left: 1.5px solid #444;
}
.tm-number-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #888;
  font-size: 14px;
  font-weight: 600;
}
.tm-number-badge::before,
.tm-number-badge::after {
  content: '';
  width: 16px;
  height: 1px;
  background: #666;
}
.tm-slogan-title,
.tm-slogan-subtitle {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tm-slogan-title {
  color: #fff;
}
.tm-slogan-subtitle {
  color: #666;
}

.tm-family-site {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 210px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1.5px solid #666;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
.tm-family-site:hover {
  border-color: #fff;
}
.tm-family-site-desktop {
  margin-top: 18px;
}
.tm-family-site-mobile {
  display: none;
}

.tm-pattern-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  opacity: 0.35;
}
.tm-pattern-svg {
  width: 100%;
  max-width: 280px;
  height: 64px;
}

.tm-social-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-self: end;
  gap: 2px;
}
.tm-social-icons {
  display: flex;
  align-items: center;
  gap: 9px;
}
.tm-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.tm-social-link i {
  display: block;
  color: #fff;
  pointer-events: none;
}
.tm-social-link:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}
.tm-social-text {
  margin: -2px 0 0;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.tm-divider-horizontal {
  width: 100%;
  height: 1px;
  margin: 4px 0 8px;
  background: var(--tm-footer-line);
}

.tm-footer-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  margin: 0;
  min-height: 0;
}
.tm-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  white-space: nowrap;
}
.tm-nav-links a {
  color: #ddd;
  font-size: 15px;
  line-height: 1.25;
  text-decoration: none;
  transition: color 0.2s ease;
}
.tm-nav-links a:hover {
  color: #fff;
}
.tm-nav-separator {
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}

.tm-bottom-right-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}
.tm-back-to-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.tm-back-btn-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1.5px solid #666;
  border-radius: 50%;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}
.tm-back-btn-circle i {
  color: #fff;
  font-size: 14px;
}
.tm-back-to-top:hover .tm-back-btn-circle {
  border-color: #fff;
  background: #222;
}

.tm-footer-sub-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: -40px;
  color: #777;
  font-size: 14px;
  line-height: 1.3;
  pointer-events: none;
}
.tm-sub-slogan {
  margin-left: auto;
  color: #777;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-align: right;
  text-transform: uppercase;
}

.tm-triangle-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #fff;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .tm-footer-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: 24px;
  }
  .tm-pattern-col {
    display: none;
  }
  .tm-social-col {
    justify-self: start;
  }
  .tm-footer-sub-bottom {
    margin-top: 10px;
  }
}

@media (max-width: 900px) {
  .tm-footer-wrapper {
    --tm-footer-x: 18px;
    /* v1.1.97: slightly more breathing room between the top divider and TEMAGUE on mobile. */
    --tm-footer-top-y: 18px;
    padding-bottom: 22px;
  }

  .tm-footer-top {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: max-content;
    row-gap: 18px;
    padding: var(--tm-footer-top-y) 0 16px;
  }

  .tm-brand-col,
  .tm-slogan-col,
  .tm-social-col {
    transform: none;
    margin: 0;
    padding-top: 0;
  }

  .tm-pattern-col {
    display: none;
  }

  .tm-slogan-col {
    padding-left: 0;
    border-left: 0;
  }

  .tm-family-site-desktop {
    display: flex;
    width: 100%;
    margin-top: 18px;
  }
  .tm-family-site-mobile {
    display: none;
  }

  .tm-social-col {
    justify-self: start;
    align-items: flex-start;
  }
  .tm-social-icons {
    gap: 18px;
  }
  .tm-social-text {
    margin-top: 0;
  }

  .tm-divider-horizontal {
    margin: 6px 0 14px;
  }

  .tm-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .tm-nav-links {
    width: 100%;
    overflow: visible;
  }
  .tm-nav-links a {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.55px;
  }
  .tm-nav-separator {
    flex: 0 0 auto;
    padding: 0 8px;
    font-size: 19px;
  }

  .tm-bottom-right-action {
    width: 100%;
    justify-content: flex-start;
    margin: 0;
  }

  .tm-footer-sub-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 18px;
    padding: 0;
    pointer-events: auto;
  }
  .tm-sub-slogan {
    margin: 0;
    text-align: left;
  }
}

@media (max-width: 430px) {
  .tm-footer-wrapper {
    --tm-footer-x: 14px;
  }
  .tm-nav-links a {
    font-size: 16px;
    letter-spacing: -0.7px;
  }
  .tm-nav-separator {
    padding: 0 5px;
    font-size: 17px;
  }
}

/* v1.1.94 — mobile footer bottom order
   Legal links -> copyright -> slogan -> Back to top. */
.tm-back-to-top-mobile {
  display: none;
}

@media (max-width: 900px) {
  .tm-footer-bottom .tm-back-to-top {
    display: none;
  }

  .tm-footer-sub-bottom {
    width: 100%;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    text-align: center;
  }

  .tm-footer-sub-bottom > div:first-child {
    width: 100%;
    text-align: center;
  }

  .tm-footer-sub-bottom .tm-sub-slogan {
    width: 100%;
    margin: 0;
    text-align: center;
  }

  .tm-footer-sub-bottom .tm-back-to-top-mobile {
    display: flex;
    width: max-content;
    margin: 6px auto 0;
    justify-content: center;
  }
}

/* v1.1.95 — mobile footer bottom: compact, left aligned */
@media (max-width: 900px) {
  .tm-footer-bottom {
    align-items: flex-start;
  }

  .tm-footer-sub-bottom {
    width: 100%;
    align-items: flex-start;
    gap: 4px;
    margin-top: 5px;
    padding: 0;
    text-align: left;
  }

  .tm-footer-sub-bottom > div:first-child,
  .tm-footer-sub-bottom .tm-sub-slogan {
    width: auto;
    margin: 0;
    text-align: left;
  }

  .tm-footer-sub-bottom .tm-back-to-top-mobile {
    display: flex;
    width: max-content;
    margin: 2px 0 0;
    justify-content: flex-start;
  }
}

/* v1.1.96 — mobile footer: remove the empty action row between legal links and copyright.
   On mobile both Family Site and desktop Back-to-top are hidden inside
   .tm-bottom-right-action, so the wrapper itself must not participate in layout. */
@media (max-width: 900px) {
  .tm-footer-bottom > .tm-bottom-right-action {
    display: none;
  }

  .tm-footer-bottom {
    gap: 0;
  }

  .tm-footer-sub-bottom {
    margin-top: 6px;
    gap: 4px;
  }
}

/* =========================================================
   ONE DESIGN / ONE BUSINESS — exclusive-design manifesto
   ========================================================= */
.px-exclusive-manifesto {
  position: relative;
  overflow: visible;
  padding: clamp(38px, 4vw, 66px) 0 clamp(33px, 3.5vw, 56px);
  color: #f4f4f2;
  background: #080808;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.px-exclusive-manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(50% - 0.5px),
      rgba(255, 255, 255, 0.055) 50%,
      transparent calc(50% + 0.5px)
    ),
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.07), transparent 30%);
}
.px-exclusive-manifesto-wrap {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 64px), var(--px-max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  column-gap: clamp(48px, 8vw, 132px);
  align-items: end;
}
.px-exclusive-manifesto-heading {
  min-width: 0;
}
.px-exclusive-manifesto-index {
  display: block;
  margin: 0 0 28px;
  color: #7cff6b;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.22em;
}
.px-exclusive-manifesto h2 {
  margin: 0;
  color: #f4f4f2;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(52px, 7.25vw, 112px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}
.px-exclusive-manifesto h2 span {
  display: block;
}
.px-exclusive-manifesto h2 .px-exclusive-title-line {
  display: block;
}
.px-exclusive-manifesto h2 .px-exclusive-title-line--business {
  color: #7cff6b;
  -webkit-text-fill-color: #7cff6b;
}
.px-exclusive-manifesto h2 .px-exclusive-business-outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #f4f4f2;
  text-stroke: 1px #f4f4f2;
}
.px-exclusive-manifesto-copy {
  max-width: 510px;
  padding-bottom: 5px;
}
.px-exclusive-manifesto-copy p {
  margin: 0;
  color: rgba(244, 244, 242, 0.72);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.75;
}
.px-exclusive-manifesto-copy .px-exclusive-manifesto-lead {
  margin-bottom: 22px;
  color: #f4f4f2;
  font-size: clamp(17px, 1.45vw, 22px);
  font-weight: 700;
  line-height: 1.45;
}
.px-exclusive-manifesto-flow {
  grid-column: 1 / -1;
  margin-top: clamp(58px, 7vw, 96px);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.34);
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 20px;
  align-items: center;
  color: #f4f4f2;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.px-exclusive-manifesto-flow > span:first-child {
  color: #7cff6b;
}
.px-exclusive-manifesto-flow > span:nth-child(3) {
  color: #f4f4f2;
}
.px-exclusive-manifesto-flow > span:nth-child(5) {
  color: rgba(244, 244, 242, 0.58);
}
.px-exclusive-manifesto-arrow {
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0;
}
@media (max-width: 900px) {
  .px-exclusive-manifesto-wrap {
    width: min(calc(100% - 40px), var(--px-max));
    grid-template-columns: 1fr;
  }
  .px-exclusive-manifesto-copy {
    max-width: 640px;
    margin-top: 42px;
    padding-bottom: 0;
  }
}
@media (max-width: 640px) {
  .px-exclusive-manifesto {
    padding: 33px 0 29px;
  }
  .px-exclusive-manifesto-wrap {
    width: min(calc(100% - 30px), var(--px-max));
  }
  .px-exclusive-manifesto-index {
    margin-bottom: 22px;
  }
  .px-exclusive-manifesto h2 {
    font-size: clamp(42px, 13vw, 66px);
    line-height: 0.91;
    letter-spacing: -0.06em;
  }
  .px-exclusive-manifesto h2 span:last-child {
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
  }
  .px-exclusive-manifesto-copy {
    margin-top: 36px;
  }
  .px-exclusive-manifesto-flow {
    margin-top: 48px;
    padding-top: 20px;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
  }
  .px-exclusive-manifesto-arrow {
    width: 24px;
    transform: rotate(90deg);
    text-align: left;
    font-size: 21px;
  }
}

/* =========================================================
   AVAILABLE DESIGNS — exclusive ready-made collection
   ========================================================= */
.px-available-designs {
  background: #f2f2ee;
  color: #090909;
  padding: clamp(58px, 6vw, 94px) 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.px-available-wrap {
  width: min(calc(100% - 64px), var(--px-max));
  margin: 0 auto;
}
.px-available-head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
  gap: clamp(36px, 7vw, 110px);
  align-items: end;
  margin-bottom: clamp(38px, 5vw, 72px);
}
.px-available-label {
  margin: 0 0 18px;
  font:
    700 11px/1 Poppins,
    sans-serif;
  letter-spacing: 0.2em;
  color: #555;
  text-transform: uppercase;
}
.px-available-head h2 {
  margin: 0;
  max-width: 900px;
  font:
    900 clamp(42px, 6vw, 92px)/0.92 Poppins,
    sans-serif;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.px-available-intro {
  margin: 0 0 5px;
  max-width: 500px;
  font:
    400 clamp(14px, 1.1vw, 17px)/1.7 Poppins,
    sans-serif;
  color: #555;
}
.px-available-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.px-available-card {
  min-width: 0;
}
.px-available-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 8/5;
  background: #111;
  color: #fff;
}
.px-available-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition:
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    filter 0.4s ease;
  filter: saturate(0.78) contrast(1.04);
}
.px-available-media:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 52%, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}
.px-available-media:hover img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.02);
}
.px-available-status {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  background: #080808;
  color: #fff;
  font:
    700 10px/1 Poppins,
    sans-serif;
  letter-spacing: 0.14em;
}
.px-available-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7cff6b;
  box-shadow: 0 0 0 3px rgba(124, 255, 107, 0.15);
}
.px-available-open {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 16px;
  font:
    400 28px/1 Poppins,
    sans-serif;
  color: #7cff6b;
}
.px-available-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 18px 2px 4px;
  border-top: 1px solid #111;
}
.px-available-meta p {
  margin: 0 0 6px;
  font:
    700 9px/1 Poppins,
    sans-serif;
  letter-spacing: 0.16em;
  color: #777;
}
.px-available-meta h3 {
  margin: 0;
  font:
    800 clamp(17px, 1.5vw, 22px)/1.15 Poppins,
    sans-serif;
  letter-spacing: -0.025em;
}
.px-available-meta strong {
  white-space: nowrap;
  font:
    800 clamp(16px, 1.35vw, 20px)/1.15 Poppins,
    sans-serif;
}
.px-available-bottom {
  margin-top: clamp(34px, 4vw, 58px);
  padding-top: 20px;
  border-top: 1px solid #111;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.px-available-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: #090909;
  text-decoration: none;
  font:
    800 12px/1 Poppins,
    sans-serif;
  letter-spacing: 0.12em;
}
.px-available-bottom a span {
  font-size: 22px;
  color: #7cff6b;
}
.px-available-bottom p {
  margin: 0;
  font:
    700 10px/1 Poppins,
    sans-serif;
  letter-spacing: 0.16em;
  color: #777;
}
.px-available-bottom p span {
  color: #7cff6b;
  margin: 0 7px;
}
@media (max-width: 900px) {
  .px-available-wrap {
    width: min(calc(100% - 40px), var(--px-max));
  }
  .px-available-head {
    grid-template-columns: 1fr;
  }
  .px-available-intro {
    max-width: 650px;
  }
  .px-available-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .px-available-card:last-child {
    grid-column: 1/-1;
  }
  .px-available-card:last-child .px-available-media {
    aspect-ratio: 32/9;
  }
}
@media (max-width: 640px) {
  .px-available-designs {
    padding: 46px 0;
  }
  .px-available-wrap {
    width: min(calc(100% - 30px), var(--px-max));
  }
  .px-available-head {
    gap: 22px;
    margin-bottom: 34px;
  }
  .px-available-head h2 {
    font-size: clamp(38px, 12vw, 56px);
  }
  .px-available-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .px-available-card:last-child {
    grid-column: auto;
  }
  .px-available-media,
  .px-available-card:last-child .px-available-media {
    aspect-ratio: 8/5;
  }
  .px-available-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
  .px-available-bottom p {
    line-height: 1.5;
  }
}

/* v1.2.02 — bidirectional reveal motion for homepage sections added/updated in the exclusive-design flow. */
.px-motion-ready .px-scroll-motion [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.62s ease,
    transform 0.82s cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 0.62s ease;
  will-change: opacity, transform, filter;
}
.px-motion-ready .px-scroll-motion.motion-from-above [data-motion-item] {
  transform: translate3d(0, -34px, 0) scale(0.985);
}
.px-scroll-motion.is-motion-visible [data-motion-item] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .px-motion-ready .px-scroll-motion [data-motion-item] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* v1.2.03 — floating contact + hero stamp refinement */
/* Keep only the contact control and use a conventional edge offset. */
.px-floating-contact-stack {
  right: 16px;
  width: auto;
  max-width: none;
  gap: 0;
}
.px-floating-promo-badge,
.px-floating-promo-spin,
.px-floating-promo-text {
  display: none;
}

/* Lower the rotating hero stamp so its centre sits alongside the hero description. */
@media (min-width: 901px) {
  .px-tech-ad-stamp {
    top: calc(50% + 112px);
    transform: translateY(-50%);
    right: 4vw;
  }
}
@media (max-width: 900px) {
  .px-tech-ad-stamp {
    top: calc(50% + 94px);
    transform: translateY(-50%);
  }
}
@media (max-width: 480px) {
  .px-floating-contact-stack {
    right: 10px;
  }
}

/* v1.2.04 — final floating contact + hero stamp alignment */
.px-floating-contact-stack {
  right: 6px;
}
@media (max-width: 480px) {
  .px-floating-contact-stack {
    right: 4px;
  }
}
/* JS aligns the stamp vertically with the hero CTA; keep it anchored on the right. */
@media (min-width: 621px) {
  .px-tech-ad-stamp {
    right: 4vw;
  }
}

/* v1.2.05 — hero CTA points to Available Designs; stamp sits one level above CTA and rotates continuously. */
.px-tech-cta {
  align-items: center;
  gap: 12px;
  scroll-behavior: smooth;
}
.px-tech-cta-arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.px-tech-cta:hover .px-tech-cta-arrow,
.px-tech-cta:focus-visible .px-tech-cta-arrow {
  transform: rotate(45deg) translate(2px, 2px);
}
.px-tech-ad-stamp {
  animation: pxTechStamp 12s linear infinite;
  transform-origin: 50% 50%;
}
@media (prefers-reduced-motion: reduce) {
  .px-tech-ad-stamp {
    animation: none;
  }
}
html {
  scroll-behavior: smooth;
}

/* v1.2.06 — hero stamp horizontal refinement + explicit bidirectional motion for the three post-hero sections. */
@media (min-width: 621px) {
  .px-tech-ad-stamp {
    right: 8vw;
  }
}
.px-motion-ready .px-exclusive-manifesto.px-scroll-motion [data-motion-item],
.px-motion-ready .px-available-designs.px-scroll-motion [data-motion-item],
.px-motion-ready .px-hero-quote-grid.px-scroll-motion [data-motion-item] {
  opacity: 0;
  transform: translate3d(0, 36px, 0) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.62s ease,
    transform 0.82s cubic-bezier(0.2, 0.75, 0.2, 1),
    filter 0.62s ease;
}
.px-motion-ready .px-exclusive-manifesto.px-scroll-motion.motion-from-above [data-motion-item],
.px-motion-ready .px-available-designs.px-scroll-motion.motion-from-above [data-motion-item],
.px-motion-ready .px-hero-quote-grid.px-scroll-motion.motion-from-above [data-motion-item] {
  transform: translate3d(0, -36px, 0) scale(0.985);
}
.px-exclusive-manifesto.px-scroll-motion.is-motion-visible [data-motion-item],
.px-available-designs.px-scroll-motion.is-motion-visible [data-motion-item],
.px-hero-quote-grid.px-scroll-motion.is-motion-visible [data-motion-item] {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
@media (prefers-reduced-motion: reduce) {
  .px-motion-ready .px-exclusive-manifesto.px-scroll-motion [data-motion-item],
  .px-motion-ready .px-available-designs.px-scroll-motion [data-motion-item],
  .px-motion-ready .px-hero-quote-grid.px-scroll-motion [data-motion-item] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* v1.2.07 — contact edge position + refined south-east CTA arrow. */
.px-floating-contact-stack {
  right: 0;
}
@media (max-width: 480px) {
  .px-floating-contact-stack {
    right: 0;
  }
}
.px-tech-cta-arrow {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none;
  transition: transform 0.28s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.px-tech-cta:hover .px-tech-cta-arrow,
.px-tech-cta:focus-visible .px-tech-cta-arrow {
  transform: translate(3px, 2px);
}

/* v1.2.08 — hero stamp further left + outlined DESIGN word in section 01. */
@media (min-width: 621px) {
  .px-tech-ad-stamp {
    right: 12vw;
  }
}
.px-exclusive-manifesto .px-exclusive-design-outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #f4f4f2;
  text-stroke: 1.5px #f4f4f2;
  font: inherit;
  letter-spacing: inherit;
}
@media (max-width: 640px) {
  .px-exclusive-manifesto .px-exclusive-design-outline {
    -webkit-text-stroke-width: 1px;
    text-stroke-width: 1px;
  }
}

/* v1.2.10 — footer services dropdown */
.tm-services-dropdown {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  z-index: 30;
  min-width: 100%;
  background: #000;
  border: 1px solid #666;
  padding: 8px 0;
  box-sizing: border-box;
}
.tm-services-dropdown a {
  display: block;
  padding: 11px 18px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.08em;
}
.tm-services-dropdown a:hover {
  background: #151515;
}
.tm-copyright-site {
  color: inherit;
  text-decoration: none;
}
.tm-copyright-site:hover {
  color: #fff;
}

/* v1.2.12 — footer services dropdown: prevent clipping by footer wrapper */
.tm-footer-wrapper,
.tm-footer-container,
.tm-footer-top,
.tm-slogan-col {
  overflow: visible;
}
.tm-services-dropdown {
  z-index: 90;
}
@media (max-width: 900px) {
  .tm-footer-wrapper,
  .tm-footer-container,
  .tm-footer-top,
  .tm-slogan-col {
    overflow: visible;
  }
}

/* v1.2.13 — premium editorial motion showcase */
.px-premium-motion {
  position: relative;
  overflow: hidden;
  background: #050505;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.px-premium-motion__frame {
  position: relative;
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(58px, 6.5vw, 104px) clamp(22px, 4vw, 64px) 0;
}
.px-premium-motion__meta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #a8a8a8;
}
.px-premium-motion__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
  gap: clamp(42px, 6vw, 110px);
  align-items: center;
  min-height: clamp(620px, 68vw, 900px);
  padding: clamp(54px, 6vw, 90px) 0;
}
.px-premium-motion__copy {
  position: relative;
  z-index: 5;
  align-self: center;
}
.px-premium-motion__kicker {
  margin: 0 0 26px;
  color: #72ff62;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.19em;
}
.px-premium-motion__copy h2 {
  margin: 0;
  font-size: clamp(64px, 7.6vw, 128px);
  line-height: 0.78;
  letter-spacing: -0.075em;
  font-weight: 900;
  text-transform: uppercase;
}
.px-premium-motion__copy h2 span {
  display: block;
  white-space: nowrap;
}
.px-premium-motion__copy h2 .is-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.88);
  text-stroke: 1.5px rgba(255, 255, 255, 0.88);
}
.px-premium-motion__copy h2 .is-accent {
  color: #72ff62;
}
.px-premium-motion__lead {
  max-width: 560px;
  margin: 38px 0 0;
  font-size: clamp(16px, 1.45vw, 22px);
  line-height: 1.55;
  color: #aaa;
}
.px-premium-motion__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}
.px-premium-motion__tags span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.14em;
  color: #ddd;
}
.px-premium-motion__visual {
  position: relative;
  height: clamp(520px, 48vw, 720px);
  isolation: isolate;
}
.px-premium-motion__visual:before {
  content: '';
  position: absolute;
  inset: 7% 5% 8% 8%;
  border: 1px solid rgba(114, 255, 98, 0.22);
  z-index: -1;
  transform: rotate(-2deg);
}
.px-premium-motion__image {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.34);
  will-change: transform;
}
.px-premium-motion__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.08);
  transition:
    filter 0.6s ease,
    transform 1.1s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.px-premium-motion__image:hover img {
  filter: saturate(1) contrast(1.03);
  transform: scale(1.025);
}
.px-premium-motion__image figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.12em;
}
.px-premium-motion__image--main {
  left: 9%;
  top: 10%;
  width: 66%;
  height: 68%;
  z-index: 2;
  animation: pxPremiumFloatMain 9s ease-in-out infinite alternate;
}
.px-premium-motion__image--top {
  right: 0;
  top: 0;
  width: 36%;
  height: 34%;
  z-index: 4;
  animation: pxPremiumFloatTop 8s ease-in-out infinite alternate;
}
.px-premium-motion__image--bottom {
  right: 3%;
  bottom: 0;
  width: 43%;
  height: 38%;
  z-index: 5;
  animation: pxPremiumFloatBottom 10s ease-in-out infinite alternate;
}
@keyframes pxPremiumFloatMain {
  to {
    transform: translate3d(-8px, 10px, 0);
  }
}
@keyframes pxPremiumFloatTop {
  to {
    transform: translate3d(-12px, 14px, 0) rotate(-1deg);
  }
}
@keyframes pxPremiumFloatBottom {
  to {
    transform: translate3d(10px, -12px, 0) rotate(1deg);
  }
}
.px-premium-motion__orbit {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  z-index: 7;
  animation: pxPremiumSpin 20s linear infinite;
}
.px-premium-motion__orbit:after {
  content: '+';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #72ff62;
  font-size: 26px;
  font-weight: 300;
}
.px-premium-motion__orbit span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.13em;
  color: #aaa;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: start center;
  padding-top: 8px;
}
@keyframes pxPremiumSpin {
  to {
    transform: rotate(360deg);
  }
}
.px-premium-motion__ticker {
  margin-inline: calc(clamp(22px, 4vw, 64px) * -1);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  height: 58px;
  display: flex;
  align-items: center;
  background: #72ff62;
  color: #050505;
}
.px-premium-motion__ticker > div {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: pxPremiumTicker 26s linear infinite;
}
.px-premium-motion__ticker span {
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
  padding: 0 28px;
}
.px-premium-motion__ticker i {
  font-style: normal;
  font-size: 13px;
}
@keyframes pxPremiumTicker {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 900px) {
  .px-premium-motion__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 50px;
  }
  .px-premium-motion__copy h2 {
    font-size: clamp(58px, 14vw, 104px);
  }
  .px-premium-motion__visual {
    height: min(112vw, 660px);
  }
  .px-premium-motion__image--main {
    left: 0;
    width: 70%;
  }
  .px-premium-motion__image--top {
    width: 39%;
  }
  .px-premium-motion__image--bottom {
    width: 48%;
  }
  .px-premium-motion__orbit {
    width: 116px;
    height: 116px;
    left: 3%;
  }
}
@media (max-width: 560px) {
  .px-premium-motion__frame {
    padding-top: 42px;
  }
  .px-premium-motion__meta {
    font-size: 8px;
    letter-spacing: 0.12em;
  }
  .px-premium-motion__grid {
    padding: 44px 0 50px;
  }
  .px-premium-motion__copy h2 {
    font-size: 17vw;
    line-height: 0.82;
  }
  .px-premium-motion__lead {
    margin-top: 28px;
    font-size: 15px;
  }
  .px-premium-motion__visual {
    height: 125vw;
    max-height: 560px;
  }
  .px-premium-motion__image--main {
    top: 9%;
    width: 78%;
    height: 64%;
  }
  .px-premium-motion__image--top {
    width: 43%;
    height: 31%;
  }
  .px-premium-motion__image--bottom {
    width: 53%;
    height: 35%;
  }
  .px-premium-motion__orbit {
    bottom: 1%;
    width: 92px;
    height: 92px;
  }
  .px-premium-motion__ticker {
    height: 50px;
  }
  .px-premium-motion__ticker span {
    font-size: 10px;
    padding: 0 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-premium-motion__image,
  .px-premium-motion__orbit,
  .px-premium-motion__ticker > div {
    animation: none;
  }
}

/* v1.2.14 — kinetic feature lab: a full-motion capability showcase */
.px-feature-lab {
  position: relative;
  overflow: hidden;
  background: #020202;
  color: #fff;
  border-block: 1px solid rgba(255, 255, 255, 0.15);
}
.px-feature-lab__stage {
  position: relative;
  min-height: clamp(720px, 82vw, 1080px);
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 50%, rgba(114, 255, 98, 0.08), transparent 28%), #020202;
}
.px-feature-lab__stage:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}
.px-feature-lab__topline {
  position: absolute;
  z-index: 20;
  top: 26px;
  left: clamp(20px, 4vw, 64px);
  right: clamp(20px, 4vw, 64px);
  display: flex;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: #aaa;
}
.px-feature-lab__word {
  position: absolute;
  left: -8%;
  width: 116%;
  z-index: 1;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
}
.px-feature-lab__word div {
  width: max-content;
  font-size: clamp(76px, 11.5vw, 190px);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}
.px-feature-lab__word--one {
  top: 13%;
  transform: rotate(-3deg);
}
.px-feature-lab__word--one div {
  color: #72ff62;
  animation: pxLabRunLeft 19s linear infinite;
}
.px-feature-lab__word--two {
  bottom: 14%;
  transform: rotate(2.2deg);
  z-index: 7;
}
.px-feature-lab__word--two div {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.88);
  animation: pxLabRunRight 24s linear infinite;
}
@keyframes pxLabRunLeft {
  to {
    transform: translateX(-33.333%);
  }
}
@keyframes pxLabRunRight {
  from {
    transform: translateX(-33.333%);
  }
  to {
    transform: translateX(0);
  }
}
.px-feature-lab__canvas {
  position: absolute;
  inset: 9% clamp(20px, 4vw, 64px) 10%;
  perspective: 1300px;
  transform-style: preserve-3d;
}
.px-feature-lab__card {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.55);
  will-change: transform;
  transform-style: preserve-3d;
}
.px-feature-lab__card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.7) contrast(1.1);
  animation: pxLabImagePulse 8s ease-in-out infinite alternate;
}
.px-feature-lab__card span {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 12px;
  background: #050505;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.16em;
}
.px-feature-lab__card--a {
  left: 4%;
  top: 26%;
  width: 29%;
  height: 42%;
  z-index: 4;
  animation: pxLabA 8s ease-in-out infinite alternate;
}
.px-feature-lab__card--b {
  left: 36%;
  top: 13%;
  width: 24%;
  height: 32%;
  z-index: 5;
  animation: pxLabB 7s ease-in-out infinite alternate;
}
.px-feature-lab__card--c {
  right: 7%;
  top: 29%;
  width: 31%;
  height: 43%;
  z-index: 6;
  animation: pxLabC 9s ease-in-out infinite alternate;
}
.px-feature-lab__card--d {
  left: 43%;
  bottom: 5%;
  width: 20%;
  height: 27%;
  z-index: 8;
  animation: pxLabD 6.5s ease-in-out infinite alternate;
}
@keyframes pxLabA {
  to {
    transform: translate3d(16px, -18px, 55px) rotate(-2deg);
  }
}
@keyframes pxLabB {
  to {
    transform: translate3d(-13px, 22px, 90px) rotate(2.5deg);
  }
}
@keyframes pxLabC {
  to {
    transform: translate3d(-20px, -15px, 70px) rotate(1.5deg);
  }
}
@keyframes pxLabD {
  to {
    transform: translate3d(12px, -20px, 120px) rotate(-3deg);
  }
}
@keyframes pxLabImagePulse {
  to {
    transform: scale(1.055);
    filter: saturate(1) contrast(1.05);
  }
}
.px-feature-lab__core {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  width: clamp(130px, 13vw, 210px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #050505;
  border: 1px solid rgba(114, 255, 98, 0.55);
  box-shadow:
    0 0 0 16px rgba(114, 255, 98, 0.025),
    0 0 80px rgba(114, 255, 98, 0.1);
}
.px-feature-lab__core b {
  font-size: clamp(28px, 3vw, 48px);
  font-weight: 300;
  color: #72ff62;
}
.px-feature-lab__ring {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  animation: pxLabSpin 13s linear infinite;
}
.px-feature-lab__ring span {
  position: absolute;
  top: 6px;
  left: 50%;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.16em;
  white-space: nowrap;
  transform: translateX(-50%);
}
@keyframes pxLabSpin {
  to {
    transform: rotate(360deg);
  }
}
.px-feature-lab__cross {
  position: absolute;
  z-index: 15;
  font-size: 32px;
  font-weight: 200;
  color: #72ff62;
  animation: pxLabSpin 9s linear infinite;
}
.px-feature-lab__cross--a {
  left: 15%;
  bottom: 11%;
}
.px-feature-lab__cross--b {
  right: 13%;
  top: 10%;
  animation-direction: reverse;
}
.px-feature-lab__rail {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: 58px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #72ff62;
  color: #050505;
  border-top: 1px solid #72ff62;
}
.px-feature-lab__rail > div {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: pxLabRail 16s linear infinite;
}
.px-feature-lab__rail span {
  padding: 0 28px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.15em;
}
.px-feature-lab__rail i {
  font-style: normal;
  font-size: 18px;
}
@keyframes pxLabRail {
}
@media (max-width: 760px) {
  .px-feature-lab__stage {
    min-height: 760px;
  }
  .px-feature-lab__topline {
    top: 20px;
    font-size: 7px;
  }
  .px-feature-lab__word div {
    font-size: 21vw;
  }
  .px-feature-lab__word--one {
    top: 14%;
  }
  .px-feature-lab__word--two {
    bottom: 17%;
  }
  .px-feature-lab__canvas {
    inset: 10% 18px 10%;
  }
  .px-feature-lab__card--a {
    left: 0;
    top: 28%;
    width: 54%;
    height: 32%;
  }
  .px-feature-lab__card--b {
    left: auto;
    right: 1%;
    top: 18%;
    width: 42%;
    height: 26%;
  }
  .px-feature-lab__card--c {
    right: 0;
    top: 52%;
    width: 55%;
    height: 31%;
  }
  .px-feature-lab__card--d {
    left: 8%;
    bottom: 7%;
    width: 36%;
    height: 22%;
  }
  .px-feature-lab__core {
    width: 118px;
    left: 51%;
    top: 48%;
  }
  .px-feature-lab__cross--a {
    left: 4%;
    bottom: 16%;
  }
  .px-feature-lab__cross--b {
    right: 4%;
    top: 12%;
  }
  .px-feature-lab__rail {
    height: 50px;
  }
  .px-feature-lab__rail span {
    font-size: 9px;
    padding: 0 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-feature-lab * {
    animation: none;
  }
}

/* v1.2.15 — scroll-driven immersive capability showcase */
.px-immersive-showcase {
  --p: 0;
  position: relative;
  height: 330vh;
  background: #020202;
  color: #fff;
}
.px-immersive-showcase__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 72% 42%, rgba(114, 255, 98, 0.11), transparent 24%), #020202;
}
.px-immersive-showcase__stage:before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size:
    8.333vw 100%,
    100% 25%;
  opacity: 0.6;
  pointer-events: none;
}
.px-immersive-showcase__hud,
.px-immersive-showcase__footer {
  position: absolute;
  z-index: 30;
  left: clamp(20px, 4vw, 64px);
  right: clamp(20px, 4vw, 64px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.2em;
}
.px-immersive-showcase__hud {
  top: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  color: #aaa;
}
.px-immersive-showcase__footer {
  bottom: 24px;
  color: #fff;
}
.px-immersive-showcase__footer span:first-child {
  color: #72ff62;
}
.px-immersive-showcase__scene {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  transform-style: preserve-3d;
}
.px-immersive-showcase__ghost {
  position: absolute;
  z-index: 0;
  left: -2vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(150px, 28vw, 520px);
  line-height: 0.7;
  font-weight: 950;
  letter-spacing: -0.08em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.px-immersive-card {
  position: absolute;
  z-index: 5;
  margin: 0;
  overflow: hidden;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: 0 45px 120px rgba(0, 0, 0, 0.55);
  will-change: transform, opacity, clip-path;
  transform-style: preserve-3d;
}
.px-immersive-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.72) contrast(1.08);
  transform: scale(1.06);
}
.px-immersive-card figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 13px;
  background: #050505;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.17em;
}
.px-immersive-card--1 {
  left: 12%;
  top: 16%;
  width: 48%;
  height: 68%;
}
.px-immersive-card--2 {
  left: 54%;
  top: 22%;
  width: 34%;
  height: 58%;
  opacity: 0;
}
.px-immersive-card--3 {
  left: 22%;
  top: 14%;
  width: 56%;
  height: 72%;
  opacity: 0;
}
.px-immersive-showcase__type {
  position: absolute;
  z-index: 12;
  inset: 0;
  pointer-events: none;
}
.px-immersive-showcase__type span {
  position: absolute;
  font-size: clamp(72px, 11vw, 190px);
  font-weight: 950;
  line-height: 0.8;
  letter-spacing: -0.07em;
  white-space: nowrap;
}
.px-immersive-showcase__type span:nth-child(1) {
  left: 4%;
  top: 39%;
  color: #72ff62;
}
.px-immersive-showcase__type span:nth-child(2) {
  right: 4%;
  top: 39%;
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
  opacity: 0;
}
.px-immersive-showcase__type span:nth-child(3) {
  left: 50%;
  top: 39%;
  transform: translateX(-50%);
  opacity: 0;
}
.px-immersive-showcase__orb {
  position: absolute;
  z-index: 20;
  right: 7%;
  bottom: 11%;
  width: 132px;
  aspect-ratio: 1;
  border: 1px solid rgba(114, 255, 98, 0.65);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(2, 2, 2, 0.82);
  backdrop-filter: blur(10px);
}
.px-immersive-showcase__orb span {
  position: absolute;
  top: 10px;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.15em;
  animation: pxImmersiveSpin 12s linear infinite;
}
.px-immersive-showcase__orb b {
  color: #72ff62;
  font-size: 27px;
  font-weight: 300;
}
@keyframes pxImmersiveSpin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 700px) {
  .px-immersive-showcase {
    height: 300vh;
  }
  .px-immersive-showcase__stage {
    min-height: 560px;
  }
  .px-immersive-showcase__hud {
    top: 18px;
    font-size: 7px;
  }
  .px-immersive-showcase__footer {
    bottom: 18px;
    font-size: 7px;
  }
  .px-immersive-card--1 {
    left: 8%;
    top: 19%;
    width: 72%;
    height: 58%;
  }
  .px-immersive-card--2 {
    left: 26%;
    top: 23%;
    width: 66%;
    height: 54%;
  }
  .px-immersive-card--3 {
    left: 10%;
    top: 18%;
    width: 80%;
    height: 61%;
  }
  .px-immersive-showcase__type span {
    font-size: 20vw;
  }
  .px-immersive-showcase__type span:nth-child(1),
  .px-immersive-showcase__type span:nth-child(2),
  .px-immersive-showcase__type span:nth-child(3) {
    top: 43%;
  }
  .px-immersive-showcase__orb {
    width: 92px;
    right: 5%;
    bottom: 10%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-immersive-showcase {
    height: auto;
  }
  .px-immersive-showcase__stage {
    position: relative;
    height: 760px;
  }
  .px-immersive-showcase__orb span {
    animation: none;
  }
}

/* v1.2.16 — immersive footer services reveal */
.tm-services-dropdown {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: min(520px, calc(100vw - 40px));
  min-width: 360px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(4, 4, 4, 0.97);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(18px);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px) scale(0.965);
  transform-origin: bottom left;
  transition:
    opacity 0.32s ease,
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.32s ease;
}
.tm-services-dropdown:before {
  content: 'SELECT A SERVICE';
  display: block;
  padding: 16px 20px 13px;
  color: #72ff62;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.22em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.tm-services-dropdown a {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr 26px;
  align-items: center;
  min-height: 66px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 850;
  letter-spacing: -0.02em;
  white-space: normal;
  overflow: hidden;
  transition:
    color 0.3s ease,
    padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s ease;
}
.tm-services-dropdown a:last-child {
  border-bottom: 0;
}
.tm-services-dropdown a:before {
  content: '0' counter(tmService);
  counter-increment: tmService;
  color: #777;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.12em;
}
.tm-services-dropdown {
  counter-reset: tmService;
}
.tm-services-dropdown a:after {
  content: '';
  justify-self: end;
  width: 18px;
  height: 18px;
  background: #72ff62;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 5v2h7.18L5 17.58 6.42 19 17 8.42V15.6h2V5H8.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.4 5v2h7.18L5 17.58 6.42 19 17 8.42V15.6h2V5H8.4z'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translate(-5px, 5px);
  opacity: 0.6;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}
.tm-services-dropdown a:hover,
.tm-services-dropdown a:focus-visible {
  background: #72ff62;
  color: #050505;
  padding-left: 26px;
  outline: none;
}
.tm-services-dropdown a:hover:before,
.tm-services-dropdown a:focus-visible:before {
  color: #050505;
}
.tm-services-dropdown a:hover:after,
.tm-services-dropdown a:focus-visible:after {
  color: #050505;
  opacity: 1;
  transform: translate(0, 0);
}
@media (min-width: 901px) {
  .tm-services-dropdown {
    left: 0;
    bottom: calc(100% + 12px);
  }
}
@media (max-width: 900px) {
  .tm-services-dropdown {
    left: 0;
    bottom: calc(100% + 10px);
    width: min(440px, calc(100vw - 32px));
    min-width: 0;
  }
  .tm-services-dropdown a {
    min-height: 58px;
    font-size: 15px;
  }
  .tm-services-dropdown:before {
    padding: 13px 16px 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-services-dropdown,
  .tm-services-dropdown a,
  .tm-services-dropdown a:after {
    transition: none;
  }
}

/* v1.2.17 — creative-development playground + full-screen services experience */
.px-creative-lab {
  --mx: 50%;
  --my: 50%;
  --p: 0;
  position: relative;
  height: 260vh;
  background: #050505;
  color: #fff;
}
.px-creative-lab__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
}
.px-creative-lab__sticky:before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    circle 260px at var(--mx) var(--my),
    rgba(124, 255, 107, 0.16),
    transparent 70%
  );
  z-index: 2;
}
.px-creative-lab__top,
.px-creative-lab__bottom {
  position: absolute;
  z-index: 30;
  left: 3vw;
  right: 3vw;
  display: flex;
  justify-content: space-between;
  font:
    800 9px/1.2 Arial,
    sans-serif;
  letter-spacing: 0.19em;
}
.px-creative-lab__top {
  top: 24px;
  border-bottom: 1px solid #555;
  padding-bottom: 13px;
  color: #aaa;
}
.px-creative-lab__bottom {
  bottom: 20px;
}
.px-creative-lab__bottom span:first-child {
  color: #7cff6b;
}
.px-creative-lab__word {
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2vw;
  font-weight: 950;
  font-size: clamp(90px, 17vw, 300px);
  line-height: 0.72;
  letter-spacing: -0.085em;
  white-space: nowrap;
}
.px-creative-lab__word span {
  display: block;
  will-change: transform;
}
.px-creative-lab__word span:nth-child(2) {
  color: #7cff6b;
}
.px-creative-lab__word span:nth-child(3) {
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
}
.px-creative-lab__canvas {
  position: absolute;
  inset: 0;
  perspective: 1200px;
}
.px-lab-media {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 30px 90px #000;
  will-change: transform, clip-path;
  transition: filter 0.35s ease;
}
.px-lab-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
  transition:
    filter 0.5s,
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.px-lab-media:hover img {
  filter: grayscale(0);
  transform: scale(1.06);
}
.px-lab-media i {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 55%, rgba(124, 255, 107, 0.25));
  mix-blend-mode: screen;
}
.px-lab-media--a {
  left: 5%;
  top: 18%;
  width: 28vw;
  height: 52vh;
  z-index: 5;
}
.px-lab-media--b {
  right: 5%;
  top: 12%;
  width: 25vw;
  height: 34vh;
  z-index: 11;
}
.px-lab-media--c {
  right: 15%;
  bottom: 9%;
  width: 32vw;
  height: 34vh;
  z-index: 7;
}
.px-lab-lens {
  position: absolute;
  z-index: 25;
  left: var(--mx);
  top: var(--my);
  width: 118px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #7cff6b;
  background: rgba(5, 5, 5, 0.5);
  backdrop-filter: invert(0.9) grayscale(1);
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: width 0.2s;
}
.px-lab-lens span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.18em;
}
.px-lab-lens b {
  position: absolute;
  right: 18px;
  bottom: 15px;
  color: #7cff6b;
  font-size: 20px;
}
.px-creative-lab:hover .px-lab-lens {
  width: 138px;
}
.px-lab-cross {
  position: absolute;
  z-index: 20;
  font: 200 44px/1 Arial;
  color: #7cff6b;
}
.px-lab-cross--1 {
  left: 42%;
  top: 18%;
}
.px-lab-cross--2 {
  right: 8%;
  bottom: 27%;
  transform: rotate(45deg);
}
.px-creative-lab__rail {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  bottom: 58px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  overflow: hidden;
  padding: 8px 0;
  background: #050505;
}
.px-creative-lab__rail div {
  width: max-content;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.22em;
  animation: pxLabRail 18s linear infinite;
}
@keyframes pxLabRail {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 700px) {
  .px-creative-lab {
    height: 220vh;
  }
  .px-creative-lab__sticky {
    min-height: 560px;
  }
  .px-creative-lab__word {
    font-size: 22vw;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    padding-left: 7vw;
  }
  .px-lab-media--a {
    left: 8%;
    top: 17%;
    width: 55vw;
    height: 38vh;
  }
  .px-lab-media--b {
    right: 6%;
    top: 28%;
    width: 42vw;
    height: 25vh;
  }
  .px-lab-media--c {
    right: 8%;
    bottom: 17%;
    width: 58vw;
    height: 28vh;
  }
  .px-lab-lens {
    display: none;
  }
  .px-creative-lab__top span:last-child {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-creative-lab {
    height: auto;
  }
  .px-creative-lab__sticky {
    position: relative;
    height: 760px;
  }
  .px-creative-lab__rail div {
    animation: none;
  }
}

.tm-services-dropdown {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-width: 0;
  padding: clamp(28px, 4vw, 64px);
  border: 0;
  background: #070707;
  z-index: 99999;
  overflow: auto;
  display: block;
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition:
    transform 0.65s cubic-bezier(0.76, 0, 0.24, 1),
    opacity 0.25s,
    visibility 0.65s;
  box-sizing: border-box;
}
.tm-services-close {
  position: absolute;
  right: clamp(24px, 4vw, 64px);
  top: clamp(24px, 4vw, 54px);
  border: 0;
  background: none;
  color: #fff;
  font: 800 10px/1 Arial;
  letter-spacing: 0.18em;
  cursor: pointer;
}
.tm-services-close span {
  display: inline-grid;
  place-items: center;
  margin-left: 12px;
  width: 42px;
  height: 42px;
  border: 1px solid #666;
  border-radius: 50%;
  font-size: 25px;
  font-weight: 300;
  transition: 0.25s;
}
.tm-services-close:hover span {
  background: #7cff6b;
  color: #000;
  border-color: #7cff6b;
  transform: rotate(90deg);
}
.tm-services-kicker {
  margin-top: 5vh;
  color: #7cff6b;
  font: 900 10px/1 Arial;
  letter-spacing: 0.22em;
}
.tm-services-list {
  margin-top: clamp(55px, 9vh, 100px);
  border-top: 1px solid #444;
}
.tm-services-list a {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: clamp(18px, 2.3vh, 30px) 0;
  border-bottom: 1px solid #444;
  color: #fff;
  background: none;
  text-decoration: none;
  white-space: normal;
}
.tm-services-list em {
  font: 800 9px/1 Arial;
  letter-spacing: 0.16em;
  color: #777;
  font-style: normal;
}
.tm-services-list strong {
  font:
    950 clamp(40px, 7vw, 110px)/0.82 Arial,
    sans-serif;
  letter-spacing: -0.065em;
  transition: 0.3s;
}
.tm-services-list span {
  font: 700 10px/1.2 Arial;
  letter-spacing: 0.1em;
  color: #999;
  transition: 0.3s;
}
.tm-services-list a:hover strong {
  color: #7cff6b;
  transform: translateX(18px);
}
.tm-services-list a:hover span {
  color: #fff;
}
.tm-services-foot {
  margin-top: 24px;
  text-align: right;
  font: 900 9px/1 Arial;
  letter-spacing: 0.2em;
  color: #777;
}
body.tm-services-open {
  overflow: hidden;
}
@media (max-width: 700px) {
  .tm-services-dropdown {
    padding: 24px 20px;
  }
  .tm-services-kicker {
    margin-top: 8vh;
  }
  .tm-services-list {
    margin-top: 55px;
  }
  .tm-services-list a {
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 20px 0;
  }
  .tm-services-list strong {
    font-size: 12vw;
  }
  .tm-services-list span {
    display: none;
  }
  .tm-services-close {
    right: 20px;
    top: 20px;
  }
  .tm-services-foot {
    text-align: left;
  }
}

/* v1.2.18 — ambient creative-lab motion: alive at rest, theme background inherited */
.px-creative-lab {
  background: transparent;
}
.px-creative-lab__rail {
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(8px);
}
.px-creative-lab__sticky:after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 34%, rgba(124, 255, 107, 0.055), transparent 25%),
    radial-gradient(circle at 82% 66%, rgba(255, 255, 255, 0.035), transparent 23%);
  animation: pxLabAmbientField 11s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.px-lab-media img {
  animation: pxLabImageBreath 9s ease-in-out infinite alternate;
  will-change: transform, filter;
}
.px-lab-media--b img {
  animation-duration: 11.5s;
  animation-direction: alternate-reverse;
}
.px-lab-media--c img {
  animation-duration: 13s;
}
.px-lab-media i {
  animation: pxLabSheen 7s ease-in-out infinite;
  will-change: transform, opacity;
}
.px-lab-media--b i {
  animation-delay: -2.2s;
}
.px-lab-media--c i {
  animation-delay: -4.1s;
}
.px-lab-lens {
  animation: pxLabLensAlive 4.8s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(124, 255, 107, 0.12);
}
.px-lab-cross {
  animation: pxLabCrossAlive 8s linear infinite;
}
.px-lab-cross--2 {
  animation-duration: 11s;
  animation-direction: reverse;
}
.px-creative-lab__word span {
  animation: pxLabTypePulse 7s ease-in-out infinite alternate;
}
.px-creative-lab__word span:nth-child(2) {
  animation-delay: -2s;
}
.px-creative-lab__word span:nth-child(3) {
  animation-delay: -4s;
}
@keyframes pxLabAmbientField {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(-1deg) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(3%, 2%, 0) rotate(2deg) scale(1.08);
    opacity: 1;
  }
}
@keyframes pxLabImageBreath {
  0% {
    scale: 1;
    filter: grayscale(1) contrast(1.15);
  }
  100% {
    scale: 1.055;
    filter: grayscale(0.82) contrast(1.2);
  }
}
@keyframes pxLabSheen {
  0%,
  25% {
    transform: translate3d(-45%, -45%, 0);
    opacity: 0.15;
  }
  55% {
    opacity: 0.55;
  }
  80%,
  100% {
    transform: translate3d(45%, 45%, 0);
    opacity: 0.12;
  }
}
@keyframes pxLabLensAlive {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(124, 255, 107, 0.12);
  }
  50% {
    box-shadow: 0 0 0 18px rgba(124, 255, 107, 0);
  }
}
@keyframes pxLabCrossAlive {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pxLabTypePulse {
  0% {
    letter-spacing: -0.085em;
    filter: blur(0);
  }
  100% {
    letter-spacing: -0.065em;
    filter: blur(0.15px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-creative-lab__sticky:after,
  .px-lab-media img,
  .px-lab-media i,
  .px-lab-lens,
  .px-lab-cross,
  .px-creative-lab__word span {
    animation: none;
  }
}

/* v1.2.19 — motion-graphics choreography: static assets behave like an always-running campaign film */
.px-creative-lab__word {
  animation: pxLabWordStage 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.px-creative-lab__word span {
  animation: none;
}
.px-creative-lab__word span:nth-child(1) {
  animation: pxLabWordA 6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.px-creative-lab__word span:nth-child(2) {
  animation: pxLabWordB 6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
.px-creative-lab__word span:nth-child(3) {
  animation: pxLabWordC 6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
@keyframes pxLabWordStage {
  0%,
  100% {
    gap: 2.2vw;
  }
  35% {
    gap: 5vw;
  }
  58% {
    gap: 0.5vw;
  }
  78% {
    gap: 3.5vw;
  }
}
@keyframes pxLabWordA {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  20% {
    translate: -5vw -3vh;
    rotate: -3deg;
  }
  45% {
    translate: 3vw 4vh;
    rotate: 2deg;
  }
  70% {
    translate: -2vw 1vh;
    rotate: -1deg;
  }
}
@keyframes pxLabWordB {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  25% {
    translate: 3vw 6vh;
    rotate: 5deg;
  }
  50% {
    translate: -4vw -5vh;
    rotate: -4deg;
  }
  75% {
    translate: 2vw -1vh;
    rotate: 2deg;
  }
}
@keyframes pxLabWordC {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  18% {
    translate: 5vw -5vh;
    rotate: 3deg;
  }
  48% {
    translate: -2vw 5vh;
    rotate: -2deg;
  }
  76% {
    translate: 4vw 1vh;
    rotate: 4deg;
  }
}
.px-lab-media {
  transition: filter 0.2s ease;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center;
}
.px-lab-media--a {
  animation-name: pxLabCardA;
  animation-duration: 8s;
}
.px-lab-media--b {
  animation-name: pxLabCardB;
  animation-duration: 9.5s;
}
.px-lab-media--c {
  animation-name: pxLabCardC;
  animation-duration: 11s;
}
@keyframes pxLabCardA {
  0% {
    margin-left: 0;
    margin-top: 0;
    clip-path: inset(0 0 0 0);
  }
  35% {
    margin-left: 7vw;
    margin-top: -4vh;
    clip-path: inset(8% 0 15% 0);
  }
  65% {
    margin-left: -2vw;
    margin-top: 5vh;
    clip-path: inset(0 12% 0 4%);
  }
  100% {
    margin-left: 5vw;
    margin-top: 1vh;
    clip-path: inset(4% 3% 4% 3%);
  }
}
@keyframes pxLabCardB {
  0% {
    margin-right: 0;
    margin-top: 0;
    clip-path: inset(0);
  }
  40% {
    margin-right: 9vw;
    margin-top: 7vh;
    clip-path: inset(0 8% 18% 0);
  }
  72% {
    margin-right: -2vw;
    margin-top: -3vh;
    clip-path: inset(12% 0 0 10%);
  }
  100% {
    margin-right: 4vw;
    margin-top: 4vh;
    clip-path: inset(3%);
  }
}
@keyframes pxLabCardC {
  0% {
    margin-right: 0;
    margin-bottom: 0;
    clip-path: inset(0);
  }
  32% {
    margin-right: -6vw;
    margin-bottom: 7vh;
    clip-path: inset(10% 0 0 14%);
  }
  67% {
    margin-right: 8vw;
    margin-bottom: -2vh;
    clip-path: inset(0 15% 12% 0);
  }
  100% {
    margin-right: 2vw;
    margin-bottom: 5vh;
    clip-path: inset(4%);
  }
}
.px-lab-media img {
  animation: pxLabFilmPan 7s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
  transform-origin: center;
}
.px-lab-media--b img {
  animation-delay: -2.1s;
  animation-duration: 8.5s;
}
.px-lab-media--c img {
  animation-delay: -4.4s;
  animation-duration: 10s;
}
@keyframes pxLabFilmPan {
  0% {
    transform: scale(1.03) translate3d(-3%, 0, 0);
    filter: grayscale(1) contrast(1.15);
  }
  45% {
    transform: scale(1.15) translate3d(3%, -2%, 0);
    filter: grayscale(0.6) contrast(1.18);
  }
  100% {
    transform: scale(1.08) translate3d(-1%, 3%, 0);
    filter: grayscale(0.9) contrast(1.2);
  }
}
.px-lab-hud {
  position: absolute;
  z-index: 24;
  color: #fff;
  font-family: Arial, sans-serif;
  pointer-events: none;
}
.px-lab-hud small {
  display: block;
  color: #7cff6b;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.22em;
  margin-bottom: 5px;
}
.px-lab-hud--percent {
  left: 42%;
  top: 14%;
  width: 150px;
}
.px-lab-hud--percent strong {
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.8;
  letter-spacing: -0.07em;
}
.px-lab-hud--percent > i {
  font-size: 14px;
  font-style: normal;
  margin-left: 3px;
}
.px-lab-hud--percent > span {
  display: block;
  height: 2px;
  background: #333;
  margin-top: 11px;
  overflow: hidden;
}
.px-lab-hud--percent > span b {
  display: block;
  width: 1%;
  height: 100%;
  background: #7cff6b;
  box-shadow: 0 0 12px #7cff6b;
}
.px-lab-hud--odo {
  left: 5%;
  bottom: 16%;
  border: 1px solid #555;
  background: rgba(0, 0, 0, 0.55);
  padding: 10px 12px;
  backdrop-filter: blur(8px);
}
.px-lab-odometer {
  display: flex;
  gap: 2px;
}
.px-lab-odometer b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 34px;
  background: #111;
  border: 1px solid #333;
  font-size: 19px;
  line-height: 1;
  overflow: hidden;
}
.px-lab-scan {
  position: absolute;
  z-index: 19;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: #7cff6b;
  box-shadow: 0 0 16px rgba(124, 255, 107, 0.65);
  animation: pxLabScan 4.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  opacity: 0.7;
}
.px-lab-scan span {
  position: absolute;
  right: 4vw;
  top: -12px;
  font: 800 7px/1 Arial;
  letter-spacing: 0.16em;
  color: #7cff6b;
}
.px-lab-scan span:after {
  content: 'SCANNING';
}
@keyframes pxLabScan {
  0% {
    transform: translateY(8vh);
    opacity: 0;
  }
  12% {
    opacity: 0.75;
  }
  88% {
    opacity: 0.55;
  }
  100% {
    transform: translateY(82vh);
    opacity: 0;
  }
}
.px-lab-orbit {
  position: absolute;
  z-index: 23;
  right: 6%;
  top: 52%;
  width: 90px;
  height: 90px;
  border: 1px solid #555;
  border-radius: 50%;
  animation: pxLabOrbitSpin 7s linear infinite;
}
.px-lab-orbit:before,
.px-lab-orbit:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: #555;
  transform: translate(-50%, -50%);
}
.px-lab-orbit:before {
  width: 130%;
  height: 1px;
}
.px-lab-orbit:after {
  height: 130%;
  width: 1px;
}
.px-lab-orbit i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7cff6b;
  left: 50%;
  top: -5px;
  box-shadow: 0 0 15px #7cff6b;
}
.px-lab-orbit b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 900 8px/1 Arial;
  letter-spacing: 0.18em;
}
@keyframes pxLabOrbitSpin {
  to {
    transform: rotate(360deg);
  }
}
.px-creative-lab:hover .px-lab-media {
  animation-duration: 3.5s;
}
.px-creative-lab:hover .px-creative-lab__word span {
  animation-duration: 2.8s;
}
.px-creative-lab:hover .px-lab-orbit {
  animation-duration: 2.5s;
}
.px-creative-lab:hover .px-lab-scan {
  animation-duration: 2.2s;
}
@media (max-width: 700px) {
  .px-lab-hud--percent {
    left: auto;
    right: 6%;
    top: 11%;
    width: 105px;
  }
  .px-lab-hud--percent strong {
    font-size: 42px;
  }
  .px-lab-hud--odo {
    left: 7%;
    bottom: 15%;
  }
  .px-lab-orbit {
    width: 62px;
    height: 62px;
    right: 7%;
    top: 58%;
  }
  .px-lab-media {
    animation-duration: 7s;
  }
  .px-creative-lab__word {
    animation-duration: 9s;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-creative-lab__word,
  .px-creative-lab__word span,
  .px-lab-media,
  .px-lab-media img,
  .px-lab-scan,
  .px-lab-orbit {
    animation: none;
  }
}

/* v1.2.20 — interactive playground: draggable, throwable media cards */
.px-creative-lab__canvas {
  touch-action: pan-y;
}
.px-lab-media[data-lab-draggable] {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  transform-origin: center;
  transition:
    filter 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.px-lab-media[data-lab-draggable].is-grabbed {
  cursor: grabbing;
  z-index: 80;
  animation: none;
  border-color: #7cff6b;
  box-shadow:
    0 42px 120px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(124, 255, 107, 0.5);
  filter: saturate(1.12);
}
.px-lab-media[data-lab-draggable].is-grabbed img {
  filter: grayscale(0) contrast(1.08);
  transform: scale(1.045);
}
.px-lab-media[data-lab-draggable].was-played {
  animation: none;
}
.px-lab-media[data-lab-draggable]::after {
  content: 'DRAG';
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 5;
  padding: 5px 7px;
  background: #7cff6b;
  color: #000;
  font:
    900 8px/1 Arial,
    sans-serif;
  letter-spacing: 0.14em;
  opacity: 0;
  transform: translateY(-5px);
  transition: 0.2s ease;
}
.px-lab-media[data-lab-draggable]:hover::after,
.px-lab-media[data-lab-draggable].is-grabbed::after {
  opacity: 1;
  transform: none;
}
.px-lab-reset {
  position: absolute;
  z-index: 35;
  right: 3vw;
  bottom: 94px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 9px 12px;
  font:
    800 8px/1 Arial,
    sans-serif;
  letter-spacing: 0.16em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: 0.2s ease;
}
.px-lab-reset:hover {
  background: #7cff6b;
  color: #000;
  border-color: #7cff6b;
  transform: translateY(-2px);
}
.px-creative-lab.is-playing .px-creative-lab__top span:last-child {
  color: #7cff6b;
}
@media (max-width: 700px) {
  .px-lab-reset {
    right: 6%;
    bottom: 96px;
  }
  .px-lab-media[data-lab-draggable]::after {
    opacity: 0.8;
  }
}

/* v1.2.21 — playable intruder hunt */
.px-lab-cross {
  display: none;
}
.px-lab-gamehud {
  position: absolute;
  z-index: 72;
  left: 3vw;
  bottom: 92px;
  display: flex;
  align-items: center;
  gap: 10px;
  font:
    900 9px/1 Arial,
    sans-serif;
  letter-spacing: 0.15em;
  pointer-events: none;
}
.px-lab-gamehud > span {
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(9px);
  padding: 9px 11px;
}
.px-lab-gamehud b {
  color: #7cff6b;
  font-size: 13px;
  margin-left: 5px;
}
.px-lab-gamehud .px-game-combo {
  opacity: 0.45;
  transition: 0.2s;
}
.px-lab-gamehud .px-game-combo.is-hot {
  opacity: 1;
  border-color: #7cff6b;
  transform: scale(1.06);
}
.px-lab-enemy-layer {
  position: absolute;
  inset: 0;
  z-index: 65;
  pointer-events: none;
  overflow: hidden;
}
.px-lab-enemy {
  --enemy-rot: 0deg;
  position: absolute;
  width: clamp(58px, 5.8vw, 88px);
  aspect-ratio: 1;
  pointer-events: auto;
  cursor: crosshair;
  border: 0;
  background: transparent;
  padding: 0;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.55));
  animation:
    pxEnemySpawn 0.28s cubic-bezier(0.2, 1.5, 0.3, 1) both,
    pxEnemyHover 1.25s ease-in-out 0.28s infinite alternate;
  touch-action: manipulation;
}
.px-lab-enemy__body {
  position: absolute;
  inset: 13%;
  background: #7cff6b;
  clip-path: polygon(20% 0, 80% 0, 100% 23%, 88% 76%, 67% 100%, 33% 100%, 12% 76%, 0 23%);
  box-shadow: inset 0 0 0 3px #050505;
  transition: transform 0.1s ease;
}
.px-lab-enemy__body:before {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  top: 31%;
  height: 18%;
  background: #050505;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 14% 100%);
}
.px-lab-enemy__body:after {
  content: 'AI';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18%;
  text-align: center;
  color: #050505;
  font:
    1000 9px/1 Arial,
    sans-serif;
  letter-spacing: 0.12em;
}
.px-lab-enemy i,
.px-lab-enemy b {
  position: absolute;
  background: #7cff6b;
}
.px-lab-enemy i {
  left: 0;
  right: 0;
  top: 49%;
  height: 2px;
}
.px-lab-enemy b {
  top: 0;
  bottom: 0;
  left: 49%;
  width: 2px;
}
.px-lab-enemy:hover .px-lab-enemy__body {
  transform: scale(1.14) rotate(8deg);
}
.px-lab-enemy.is-armored .px-lab-enemy__body {
  background: #fff;
}
.px-lab-enemy.is-armored .px-lab-enemy__body:after {
  content: 'AI²';
}
.px-lab-enemy.is-hit {
  animation: pxEnemyHit 0.24s ease both;
  pointer-events: none;
}
.px-lab-burst {
  position: absolute;
  z-index: 70;
  width: 8px;
  height: 8px;
  pointer-events: none;
}
.px-lab-burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  background: #7cff6b;
  animation: pxBurst 0.55s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
  transform: rotate(var(--r)) translateX(0);
}
@keyframes pxEnemySpawn {
  from {
    opacity: 0;
    transform: scale(0.15) rotate(-35deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(var(--enemy-rot));
  }
}
@keyframes pxEnemyHover {
  to {
    transform: translateY(-9px) rotate(calc(var(--enemy-rot) + 5deg));
  }
}
@keyframes pxEnemyHit {
  to {
    opacity: 0;
    transform: scale(1.8) rotate(35deg);
    filter: blur(7px);
  }
}
@keyframes pxBurst {
  to {
    opacity: 0;
    transform: rotate(var(--r)) translateX(var(--d)) scale(0.15);
  }
}
@media (max-width: 700px) {
  .px-lab-gamehud {
    left: 6%;
    bottom: 96px;
  }
  .px-lab-enemy {
    width: 58px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-lab-enemy {
    animation: none;
  }
  .px-lab-burst i {
    animation-duration: 0.01ms;
  }
}

/* v1.2.22 — playground composition + varied enemy classes + boss encounter */
/* Keep the left half available for gameplay. Render stays top-left; title becomes a right-side stack. */
.px-lab-hud--odo {
  display: none;
}
.px-lab-hud--percent {
  left: 3vw;
  right: auto;
  top: 72px;
  width: clamp(112px, 11vw, 164px);
  z-index: 74;
}
.px-lab-hud--percent strong {
  font-size: clamp(34px, 4.4vw, 66px);
}
.px-creative-lab__word {
  inset: 0 3vw 0 auto;
  width: min(35vw, 520px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  text-align: right;
  font-size: clamp(74px, 10vw, 178px);
  line-height: 0.72;
  animation: none;
}
.px-creative-lab__word span {
  animation: pxLabRightWord 7.5s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform-origin: right center;
}
.px-creative-lab__word span:nth-child(2) {
  animation-delay: -2.5s;
}
.px-creative-lab__word span:nth-child(3) {
  animation-delay: -5s;
}
@keyframes pxLabRightWord {
  0%,
  100% {
    transform: translate3d(0, 0, 0) skewX(0);
    letter-spacing: -0.085em;
  }
  35% {
    transform: translate3d(-1.8vw, -5px, 0) skewX(-3deg);
    letter-spacing: -0.06em;
  }
  68% {
    transform: translate3d(0.8vw, 8px, 0) skewX(2deg);
    letter-spacing: -0.095em;
  }
}

/* Enemy palette and silhouettes. */
.px-lab-enemy {
  --enemy: #7cff6b;
  --enemy-ink: #050505;
  --enemy-glow: rgba(124, 255, 107, 0.48);
  width: clamp(58px, 5.8vw, 88px);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 13px var(--enemy-glow));
}
.px-lab-enemy.is-size-lg {
  width: clamp(104px, 10vw, 158px);
}
.px-lab-enemy.is-size-xl {
  width: clamp(150px, 15vw, 230px);
}
.px-lab-enemy.is-blue {
  --enemy: #2f7dff;
  --enemy-ink: #020817;
  --enemy-glow: rgba(47, 125, 255, 0.55);
}
.px-lab-enemy.is-red {
  --enemy: #ff354d;
  --enemy-ink: #140104;
  --enemy-glow: rgba(255, 53, 77, 0.55);
}
.px-lab-enemy.is-white {
  --enemy: #f5f5f2;
  --enemy-ink: #050505;
  --enemy-glow: rgba(255, 255, 255, 0.3);
}
.px-lab-enemy.is-black {
  --enemy: #090909;
  --enemy-ink: #e8e8e8;
  --enemy-glow: rgba(47, 125, 255, 0.45);
}
.px-lab-enemy__body {
  background: var(--enemy);
  box-shadow:
    inset 0 0 0 3px var(--enemy-ink),
    0 0 24px var(--enemy-glow);
}
.px-lab-enemy__body:before {
  background: var(--enemy-ink);
}
.px-lab-enemy__body:after {
  color: var(--enemy-ink);
}
.px-lab-enemy i,
.px-lab-enemy b {
  background: var(--enemy);
  box-shadow: 0 0 9px var(--enemy-glow);
}
.px-lab-enemy.is-black .px-lab-enemy__body {
  border: 1px solid #2f7dff;
}
.px-lab-enemy.is-black .px-lab-enemy__body:after {
  color: #fff;
}
.px-lab-enemy.is-scout .px-lab-enemy__body {
  clip-path: polygon(50% 0, 100% 42%, 72% 100%, 28% 100%, 0 42%);
}
.px-lab-enemy.is-scout .px-lab-enemy__body:after {
  content: 'SCOUT';
}
.px-lab-enemy.is-virus .px-lab-enemy__body {
  border-radius: 50%;
  clip-path: polygon(
    50% 0,
    61% 22%,
    82% 9%,
    78% 34%,
    100% 50%,
    77% 60%,
    91% 82%,
    64% 76%,
    50% 100%,
    39% 77%,
    16% 91%,
    23% 63%,
    0 50%,
    22% 39%,
    9% 17%,
    38% 24%
  );
}
.px-lab-enemy.is-virus .px-lab-enemy__body:after {
  content: 'VIRUS';
}
.px-lab-enemy.is-glitch .px-lab-enemy__body {
  clip-path: polygon(9% 8%, 88% 0, 100% 28%, 79% 45%, 94% 72%, 64% 100%, 35% 84%, 0 96%, 12% 55%, 0 28%);
}
.px-lab-enemy.is-glitch .px-lab-enemy__body:after {
  content: 'GLITCH';
}

/* Boss: deliberately much larger, darker and more threatening than normal enemies. */
.px-lab-enemy.is-boss {
  --enemy: #ff203d;
  --enemy-ink: #050505;
  --enemy-glow: rgba(255, 32, 61, 0.72);
  width: clamp(210px, 24vw, 390px);
  aspect-ratio: 1.12;
  z-index: 90;
  filter: drop-shadow(0 28px 45px #000) drop-shadow(0 0 32px rgba(255, 32, 61, 0.55));
  animation:
    pxBossSpawn 0.48s cubic-bezier(0.15, 1.35, 0.2, 1) both,
    pxBossBreathe 1.1s ease-in-out 0.5s infinite alternate;
}
.px-lab-enemy.is-boss .px-lab-enemy__body {
  inset: 8%;
  clip-path: polygon(
    50% 0,
    61% 16%,
    78% 4%,
    80% 22%,
    100% 18%,
    88% 40%,
    100% 54%,
    82% 62%,
    90% 88%,
    66% 79%,
    50% 100%,
    34% 79%,
    10% 89%,
    18% 62%,
    0 54%,
    12% 40%,
    0 18%,
    20% 22%,
    22% 4%,
    39% 16%
  );
  background: linear-gradient(135deg, #070707 0 48%, #ff203d 49% 58%, #090909 59% 100%);
  border: 1px solid #ff203d;
  box-shadow:
    inset 0 0 0 4px #000,
    inset 0 0 42px rgba(255, 32, 61, 0.45),
    0 0 35px rgba(255, 32, 61, 0.35);
}
.px-lab-enemy.is-boss .px-lab-enemy__body:before {
  left: 27%;
  right: 27%;
  top: 35%;
  height: 13%;
  background: #ff203d;
  box-shadow: 0 0 18px #ff203d;
}
.px-lab-enemy.is-boss .px-lab-enemy__body:after {
  content: 'NEXUS';
  bottom: 22%;
  color: #fff;
  font-size: clamp(10px, 1.1vw, 16px);
  text-shadow: 0 0 10px #ff203d;
}
.px-lab-enemy.is-boss:after {
  content: 'BOSS  ·  5 HITS';
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #ff5267;
  font:
    900 9px/1 Arial,
    sans-serif;
  letter-spacing: 0.18em;
}
@keyframes pxBossSpawn {
  from {
    opacity: 0;
    transform: scale(0.08) rotate(-20deg);
    filter: blur(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(var(--enemy-rot));
    filter: drop-shadow(0 28px 45px #000) drop-shadow(0 0 32px rgba(255, 32, 61, 0.55));
  }
}
@keyframes pxBossBreathe {
  to {
    transform: translateY(-12px) rotate(calc(var(--enemy-rot) + 2deg)) scale(1.035);
  }
}
.px-lab-enemy.is-damaged .px-lab-enemy__body {
  animation: pxEnemyDamage 0.16s linear 1;
}
@keyframes pxEnemyDamage {
  25% {
    filter: brightness(2.2);
  }
  50% {
    transform: translateX(-7px);
  }
  75% {
    transform: translateX(7px);
  }
}
.px-lab-burst i {
  background: var(--burst, #7cff6b);
}

@media (max-width: 700px) {
  .px-lab-hud--percent {
    left: 6%;
    top: 68px;
    width: 105px;
  }
  .px-creative-lab__word {
    right: 5vw;
    width: 46vw;
    font-size: 16vw;
    align-items: flex-end;
    padding: 0;
  }
  .px-lab-enemy.is-size-lg {
    width: 88px;
  }
  .px-lab-enemy.is-size-xl {
    width: 118px;
  }
  .px-lab-enemy.is-boss {
    width: min(54vw, 240px);
  }
}

/* v1.2.23 — arcade-grade Creative Lab presentation */
.px-creative-lab__sticky {
  background: transparent;
}
.px-lab-enemy-layer {
  cursor: crosshair;
}
.px-lab-enemy {
  transition: none;
  animation:
    pxEnemyEnter 0.32s cubic-bezier(0.16, 0.8, 0.2, 1) both,
    pxEnemyRoam 2.6s ease-in-out 0.32s infinite alternate;
  will-change: transform, filter;
}
.px-lab-enemy:before {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px solid color-mix(in srgb, var(--enemy-color, #7cff6b) 38%, transparent);
  clip-path: polygon(
    0 0,
    25% 0,
    25% 2px,
    2px 2px,
    2px 25%,
    0 25%,
    0 0,
    100% 0,
    100% 25%,
    calc(100% - 2px) 25%,
    calc(100% - 2px) 2px,
    75% 2px,
    75% 0,
    100% 100%,
    75% 100%,
    75% calc(100% - 2px),
    calc(100% - 2px) calc(100% - 2px),
    calc(100% - 2px) 75%,
    100% 75%,
    0 100%,
    0 75%,
    2px 75%,
    2px calc(100% - 2px),
    25% calc(100% - 2px),
    25% 100%
  );
}
.px-lab-enemy.is-scout {
  --enemy-color: #2f7dff;
}
.px-lab-enemy.is-virus {
  --enemy-color: #ff354d;
}
.px-lab-enemy.is-glitch {
  --enemy-color: #7cff6b;
}
.px-lab-enemy.is-black {
  --enemy-color: #8aa0ff;
}
.px-lab-enemy.is-white {
  --enemy-color: #fff;
}
.px-lab-enemy.is-boss {
  --enemy-color: #ff203d;
}
.px-enemy-hp {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -12px;
  height: 3px;
  background: #242424;
  overflow: hidden;
}
.px-enemy-hp u {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--enemy-color);
  box-shadow: 0 0 10px var(--enemy-color);
  transition: width 0.18s;
}
@keyframes pxEnemyEnter {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(-25deg);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(var(--enemy-rot));
    filter: none;
  }
}
@keyframes pxEnemyRoam {
  to {
    transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(calc(var(--enemy-rot) + 7deg));
  }
}
.px-lab-enemy.is-boss {
  animation:
    pxEnemyEnter 0.5s cubic-bezier(0.16, 0.8, 0.2, 1) both,
    pxBossRoam 3.4s ease-in-out 0.5s infinite alternate;
}
@keyframes pxBossRoam {
  to {
    transform: translate3d(var(--drift-x), var(--drift-y), 0) rotate(calc(var(--enemy-rot) + 3deg))
      scale(1.045);
  }
}
.px-lab-enemy.is-escape {
  animation: pxEnemyEscape 0.35s ease-in both;
}
@keyframes pxEnemyEscape {
  to {
    opacity: 0;
    transform: scale(1.8) rotate(30deg);
    filter: blur(10px);
  }
}
.px-lab-burst.is-mega {
  z-index: 80;
}
.px-lab-burst.is-mega:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--burst);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pxShock 0.65s ease-out forwards;
}
@keyframes pxShock {
  to {
    width: 260px;
    height: 260px;
    opacity: 0;
  }
}
.px-lab-gamehud {
  left: 3vw;
  right: auto;
  bottom: 88px;
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid #333;
  backdrop-filter: blur(12px);
  font: 800 9px/1 Arial;
  letter-spacing: 0.13em;
}
.px-lab-gamehud span {
  white-space: nowrap;
}
.px-lab-gamehud b {
  color: #fff;
  font-size: 13px;
}
.px-game-lives b {
  color: #ff354d;
  letter-spacing: 0.08em;
}
.px-game-combo.is-hot {
  color: #7cff6b;
  transform: scale(1.12);
}
.px-game-alert {
  position: absolute;
  z-index: 75;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.82);
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.px-game-alert small {
  display: block;
  color: #ff354d;
  font: 900 8px/1 Arial;
  letter-spacing: 0.28em;
  margin-bottom: 8px;
}
.px-game-alert strong {
  display: block;
  font: 950 clamp(42px, 8vw, 118px)/0.75 Arial;
  letter-spacing: -0.07em;
  text-shadow: 0 0 40px #000;
}
.px-game-alert span {
  display: block;
  margin-top: 13px;
  color: #aaa;
  font: 800 9px/1 Arial;
  letter-spacing: 0.22em;
}
.px-game-alert.is-show {
  animation: pxGameAlert 1.2s cubic-bezier(0.16, 0.8, 0.2, 1) both;
}
@keyframes pxGameAlert {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
    filter: blur(12px);
  }
  18%,
  72% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: none;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.12);
  }
}
.px-game-bossbar {
  position: absolute;
  z-index: 70;
  top: 82px;
  left: 50%;
  width: min(520px, 58vw);
  transform: translateX(-50%) translateY(-25px);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: 0.35s;
}
.px-game-bossbar.is-show {
  opacity: 1;
  transform: translateX(-50%);
}
.px-game-bossbar span {
  display: block;
  color: #ff5267;
  font: 900 9px/1 Arial;
  letter-spacing: 0.22em;
  margin-bottom: 8px;
}
.px-game-bossbar i {
  display: block;
  height: 6px;
  border: 1px solid #5a1821;
  padding: 1px;
}
.px-game-bossbar i b {
  display: block;
  width: 100%;
  height: 100%;
  background: #ff203d;
  box-shadow: 0 0 18px #ff203d;
  transition: width 0.18s;
}
.px-game-bossbar em {
  display: block;
  margin-top: 6px;
  color: #aaa;
  font: 800 8px/1 Arial;
  font-style: normal;
}
.px-game-crosshair {
  position: absolute;
  z-index: 69;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(124, 255, 107, 0.8);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.15s,
    transform 0.15s;
}
.px-game-crosshair:before,
.px-game-crosshair:after {
  content: '';
  position: absolute;
  background: #7cff6b;
}
.px-game-crosshair:before {
  left: 50%;
  top: -7px;
  width: 1px;
  height: 46px;
}
.px-game-crosshair:after {
  top: 50%;
  left: -7px;
  width: 46px;
  height: 1px;
}
.px-game-crosshair.is-active {
  opacity: 0.8;
  transform: translate(-50%, -50%) scale(1);
}
.px-creative-lab.is-game-damaged .px-creative-lab__sticky {
  animation: pxDamageScreen 0.28s linear 1;
}
@keyframes pxDamageScreen {
  20% {
    transform: translateX(-7px);
    filter: contrast(1.4) saturate(1.5);
  }
  40% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-4px);
  }
  100% {
    transform: none;
    filter: none;
  }
}
@media (max-width: 700px) {
  .px-lab-gamehud {
    left: 5vw;
    right: 5vw;
    bottom: 86px;
    gap: 9px;
    justify-content: space-between;
  }
  .px-lab-gamehud span {
    font-size: 7px;
  }
  .px-lab-gamehud b {
    font-size: 10px;
  }
  .px-game-bossbar {
    top: 92px;
    width: 72vw;
  }
  .px-game-crosshair {
    display: none;
  }
  .px-game-alert strong {
    font-size: 15vw;
  }
  .px-lab-enemy-layer {
    cursor: default;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-lab-enemy,
  .px-lab-enemy.is-boss {
    animation: none;
  }
  .px-game-alert.is-show {
    animation: none;
    opacity: 1;
  }
}

/* v1.2.24 — Pulse Reactor mini-game. Replaces the legacy 260vh showcase and removes its dead scroll space. */
.px-arcade {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.px-arcade__stage {
  position: relative;
  height: clamp(680px, 88vh, 920px);
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 50% 48%, #111 0, #050505 38%, #000 76%);
  cursor: none;
  touch-action: manipulation;
}
.px-arcade__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.px-arcade__grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.13;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, 0.035) 4px);
  mix-blend-mode: screen;
}
.px-arcade__hud {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 24px 3vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.px-arcade__hud > div {
  display: grid;
  gap: 4px;
}
.px-arcade__hud small,
.px-arcade__hud span,
.px-arcade__footer {
  font:
    800 8px/1.1 Arial,
    sans-serif;
  letter-spacing: 0.2em;
  color: #8d8d8d;
}
.px-arcade__hud strong {
  font:
    950 clamp(22px, 3vw, 44px)/0.85 Arial,
    sans-serif;
  letter-spacing: -0.04em;
}
.px-arcade__center {
  width: min(34vw, 360px);
  text-align: center;
}
.px-arcade__center b {
  font: 900 10px/1 Arial;
  letter-spacing: 0.22em;
}
.px-arcade__center i {
  display: block;
  height: 4px;
  margin-top: 10px;
  border: 1px solid #333;
  padding: 1px;
}
.px-arcade__center u {
  display: block;
  width: 100%;
  height: 100%;
  background: #78ff67;
  box-shadow: 0 0 18px #78ff67;
  transition: width 0.2s;
}
.px-arcade__combo {
  text-align: right;
}
.px-arcade__combo strong {
  color: #78ff67;
}
.px-arcade__intro {
  position: absolute;
  z-index: 15;
  left: 7vw;
  top: 50%;
  transform: translateY(-46%);
  width: min(620px, 76vw);
  transition:
    opacity 0.45s,
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.45s;
}
.px-arcade__intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-42%) scale(0.96);
  pointer-events: none;
}
.px-arcade__intro small {
  font: 900 8px/1 Arial;
  letter-spacing: 0.3em;
  color: #78ff67;
}
.px-arcade__intro h2 {
  margin: 16px 0 22px;
  font:
    950 clamp(70px, 11vw, 180px)/0.69 Arial,
    sans-serif;
  letter-spacing: -0.085em;
}
.px-arcade__intro h2 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
}
.px-arcade__intro p {
  max-width: 430px;
  color: #aaa;
  font: 500 14px/1.55 Arial;
  margin: 0 0 28px;
}
.px-arcade__intro button {
  display: flex;
  align-items: center;
  gap: 34px;
  border: 1px solid #fff;
  background: #fff;
  color: #000;
  padding: 15px 18px 15px 20px;
  font: 900 10px/1 Arial;
  letter-spacing: 0.16em;
  cursor: pointer;
  transition: 0.25s;
}
.px-arcade__intro button:hover {
  background: #78ff67;
  border-color: #78ff67;
  gap: 48px;
}
.px-arcade__intro button b {
  font-size: 18px;
}
.px-arcade__message {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
}
.px-arcade__message strong {
  display: block;
  font: 950 clamp(52px, 9vw, 140px)/0.72 Arial;
  letter-spacing: -0.07em;
}
.px-arcade__message span {
  display: block;
  margin-top: 15px;
  color: #78ff67;
  font: 900 9px/1 Arial;
  letter-spacing: 0.26em;
}
.px-arcade__message.is-show {
  animation: pxArcadeMessage 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes pxArcadeMessage {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.65);
    filter: blur(12px);
  }
  18%,
  68% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    filter: none;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.15);
  }
}
.px-arcade__cursor {
  position: absolute;
  z-index: 20;
  left: 0;
  top: 0;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border: 1px solid rgba(120, 255, 103, 0.8);
  border-radius: 50%;
  pointer-events: none;
  transition:
    width 0.12s,
    height 0.12s,
    margin 0.12s;
}
.px-arcade__cursor:before,
.px-arcade__cursor:after {
  content: '';
  position: absolute;
  background: #78ff67;
}
.px-arcade__cursor:before {
  left: 50%;
  top: -7px;
  width: 1px;
  height: 56px;
}
.px-arcade__cursor:after {
  top: 50%;
  left: -7px;
  width: 56px;
  height: 1px;
}
.px-arcade__cursor i {
  position: absolute;
  inset: 13px;
  border: 1px solid #fff;
  border-radius: 50%;
  animation: pxAim 1.2s linear infinite;
}
@keyframes pxAim {
  to {
    transform: rotate(360deg);
  }
}
.px-arcade__footer {
  position: absolute;
  z-index: 12;
  left: 3vw;
  right: 3vw;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 14px;
  pointer-events: none;
}
.px-arcade__footer button {
  pointer-events: auto;
  border: 0;
  background: none;
  color: #888;
  font: 900 8px/1 Arial;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.px-arcade__footer button:hover {
  color: #78ff67;
}
/* neutralise all legacy showcase dimensions if stale markup/styles are cached */
.px-creative-lab {
  height: auto;
  min-height: 0;
}
.px-creative-lab__sticky {
  position: relative;
  height: auto;
  min-height: 0;
}
@media (max-width: 700px) {
  .px-arcade__stage {
    height: 720px;
    min-height: 720px;
    cursor: default;
  }
  .px-arcade__hud {
    padding: 18px 5vw;
    grid-template-columns: 1fr 1fr;
  }
  .px-arcade__center {
    position: absolute;
    left: 5vw;
    right: 5vw;
    top: 70px;
    width: auto;
  }
  .px-arcade__hud strong {
    font-size: 24px;
  }
  .px-arcade__intro {
    left: 6vw;
    top: 52%;
    width: 88vw;
  }
  .px-arcade__intro h2 {
    font-size: 19vw;
  }
  .px-arcade__intro p {
    font-size: 12px;
    max-width: 82vw;
  }
  .px-arcade__cursor {
    display: none;
  }
  .px-arcade__footer {
    left: 5vw;
    right: 5vw;
  }
  .px-arcade__footer span:nth-child(2) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-arcade__cursor i,
  .px-arcade__message.is-show {
    animation: none;
  }
}

/* v1.2.25 — clear victory state */
.px-arcade__intro.is-win em {
  color: #78ff67;
}
.px-arcade__intro.is-win button {
  box-shadow:
    0 0 0 1px rgba(120, 255, 103, 0.35),
    0 0 42px rgba(120, 255, 103, 0.16);
}

/* v1.2.29 — arcade-first game controls */
.px-arcade__intro button[data-arcade-start] {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-width: min(430px, 90vw);
  min-height: 92px;
  padding: 22px 34px;
  border: 2px solid #78ff67;
  background: linear-gradient(180deg, #202820 0%, #0a0d0a 52%, #020302 100%);
  color: #fff;
  font:
    950 clamp(22px, 2.7vw, 38px)/1 Arial,
    sans-serif;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  clip-path: polygon(
    18px 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    18px 100%,
    0 calc(100% - 18px),
    0 18px
  );
  box-shadow:
    0 0 0 1px rgba(120, 255, 103, 0.18),
    0 0 32px rgba(120, 255, 103, 0.22),
    inset 0 0 30px rgba(120, 255, 103, 0.08),
    0 9px 0 #182018,
    0 14px 28px rgba(0, 0, 0, 0.55);
  text-shadow: 0 0 16px rgba(120, 255, 103, 0.42);
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 0.16s ease,
    filter 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
  animation: pxGameButtonIdle 1.9s ease-in-out infinite;
}
.px-arcade__intro button[data-arcade-start]::before {
  content: 'PRESS TO PLAY';
  position: absolute;
  top: 8px;
  left: 18px;
  font:
    800 7px/1 Arial,
    sans-serif;
  letter-spacing: 0.24em;
  color: #78ff67;
  opacity: 0.8;
}
.px-arcade__intro button[data-arcade-start]::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  clip-path: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 18px rgba(120, 255, 103, 0.05);
}
.px-arcade__intro button[data-arcade-start] span {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}
.px-arcade__intro button[data-arcade-start] b {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(120, 255, 103, 0.8);
  border-radius: 50%;
  font-size: 0;
  background: rgba(120, 255, 103, 0.08);
  box-shadow: inset 0 0 18px rgba(120, 255, 103, 0.12);
}
.px-arcade__intro button[data-arcade-start] b::before {
  content: '▶';
  font:
    900 20px/1 Arial,
    sans-serif;
  color: #78ff67;
  transform: translateX(2px);
}
.px-arcade__intro button[data-arcade-start]:hover {
  background: linear-gradient(180deg, #2d3a2c 0%, #0d120d 55%, #020302 100%);
  border-color: #fff;
  gap: 22px;
  transform: translateY(-3px) scale(1.025);
  filter: brightness(1.12);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 54px rgba(120, 255, 103, 0.34),
    inset 0 0 38px rgba(120, 255, 103, 0.12),
    0 11px 0 #182018,
    0 18px 34px rgba(0, 0, 0, 0.58);
}
.px-arcade__intro button[data-arcade-start]:active {
  transform: translateY(7px) scale(0.99);
  box-shadow:
    0 0 30px rgba(120, 255, 103, 0.28),
    inset 0 0 38px rgba(120, 255, 103, 0.16),
    0 2px 0 #182018,
    0 7px 14px rgba(0, 0, 0, 0.5);
}
.px-arcade__intro.is-win button[data-arcade-start] {
  border-color: #78ff67;
  background: linear-gradient(180deg, #233423, #081008 58%, #020302);
  animation: pxGameWinButton 1.25s ease-in-out infinite;
  box-shadow:
    0 0 0 1px rgba(120, 255, 103, 0.28),
    0 0 55px rgba(120, 255, 103, 0.3),
    inset 0 0 34px rgba(120, 255, 103, 0.12),
    0 9px 0 #183018,
    0 14px 28px rgba(0, 0, 0, 0.55);
}
.px-arcade__intro.is-win button[data-arcade-start]::before {
  content: 'RUN IT BACK';
}
@keyframes pxGameButtonIdle {
  0%,
  100% {
    filter: brightness(1);
    box-shadow:
      0 0 0 1px rgba(120, 255, 103, 0.18),
      0 0 26px rgba(120, 255, 103, 0.16),
      inset 0 0 28px rgba(120, 255, 103, 0.07),
      0 9px 0 #182018,
      0 14px 28px rgba(0, 0, 0, 0.55);
  }
  50% {
    filter: brightness(1.08);
    box-shadow:
      0 0 0 1px rgba(120, 255, 103, 0.28),
      0 0 48px rgba(120, 255, 103, 0.3),
      inset 0 0 34px rgba(120, 255, 103, 0.12),
      0 9px 0 #182018,
      0 14px 28px rgba(0, 0, 0, 0.55);
  }
}
@keyframes pxGameWinButton {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.025);
  }
}
@media (max-width: 700px) {
  .px-arcade__intro button[data-arcade-start] {
    min-width: min(88vw, 390px);
    min-height: 82px;
    padding: 20px 22px;
    font-size: clamp(20px, 7vw, 30px);
  }
  .px-arcade__intro button[data-arcade-start] b {
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .px-arcade__intro button[data-arcade-start] {
    animation: none;
  }
}

/* v1.2.32 — floating contact icon: restore clean rear-bubble geometry.
   Keep the original bubble intact; only refine the small lower-right tail. */
.px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::after {
  content: '';
  position: absolute;
  right: 1px;
  bottom: -6px;
  width: 7px;
  height: 7px;
  border: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  border-radius: 0 0 1px 0;
  background: transparent;
  clip-path: none;
  transform: skewX(14deg);
  transform-origin: top right;
  box-sizing: border-box;
  pointer-events: none;
}
@media (max-width: 480px) {
  .px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::after {
    right: 1px;
    bottom: -6px;
    width: 7px;
    height: 7px;
  }
}

/* v1.2.32 — precise rear chat-bubble tail + pure-black section 01 */
.px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::before {
  content: '';
  display: block;
  position: absolute;
  right: -3px;
  bottom: -8px;
  width: 10px;
  height: 9px;
  background: #fff;
  border: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: none;
  pointer-events: none;
}
.px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 6px;
  height: 5px;
  background: #00b04b;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: none;
  pointer-events: none;
}
.px-exclusive-manifesto {
  background: #000000;
}
.px-exclusive-manifesto::before {
  background: none;
}

/* v1.2.33 — final micro-adjustment: clean, compact rear chat-bubble tail */
.px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::before {
  content: none;
  display: none;
}
.px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: -5px;
  width: 5px;
  height: 5px;
  background: transparent;
  border: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  border-radius: 0 0 1px 0;
  clip-path: none;
  transform: skewX(10deg);
  transform-origin: top right;
  box-sizing: border-box;
  pointer-events: none;
}

/* v1.2.34 — contact icon micro-finish: align rear-bubble tail with the outline */
.px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::after {
  right: 2px;
  bottom: -4px;
  width: 5px;
  height: 5px;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  border-radius: 0 0 1px 0;
  transform: skewX(6deg);
  transform-origin: top right;
}

/* v1.2.36 — rear chat tail: compact pointed mirror of the front bubble tail.
   A small white outer triangle with a green inset keeps the rear bubble outlined. */
.px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::before {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: -7px;
  width: 9px;
  height: 8px;
  background: #fff;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: none;
  pointer-events: none;
  z-index: 0;
}
.px-floating-contact-stack .px-whatsapp .px-chat-glyph-back::after {
  content: '';
  display: block;
  position: absolute;
  right: 3px;
  bottom: -3px;
  width: 4px;
  height: 4px;
  background: #00b04b;
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: none;
  pointer-events: none;
  z-index: 1;
}

/* Desktop header: persistent search bar positioned to the right of WhatsApp CTA. */

/* Hero remains the first visual layer under the fixed overlay header. */
body.home main,
body.home .px-tech-ad-hero {
  margin-top: 0;
  padding-top: 0;
}
.px-tech-ad-hero {
  position: relative;
  top: auto;
  transform: none;
  overflow: hidden;
  overflow: clip;
}
.px-tech-ad-media {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.px-tech-ad-clip {
  backface-visibility: hidden;
}

/* Keep header geometry deterministic at every breakpoint. */

/* v1.2.17 — unified section canvas
   Keep the page canvas and every top-level content section pure black.
   Component/card/media backgrounds remain intentionally independent. */
html,
body,
.wp-site-blocks,
main {
  background-color: #000;
}

:is(
  .px-hero,
  .px-exclusive-manifesto,
  .px-hero-quote-grid,
  .px-available-designs,
  .px-section,
  .px-portfolio-mosaic,
  .px-arcade,
  .px-final,
  .wp-site-blocks > .wp-block-group
) {
  background-color: #000;
}

/* =========================================================
   v1.2.18 — HOMEPAGE SECTION RHYTHM AUDIT
   Single source of truth for vertical rhythm from Hero to Final CTA.
   - no inter-section margin/gap
   - equal top/bottom section spacing
   - consistent divider between every section
   - pure-black section canvas
   ========================================================= */
:root {
  --px-home-section-space: 48px;
  --px-home-divider: rgba(255, 255, 255, 0.14);
}

body.home main {
  display: block;
  margin: 0;
  padding: 0;
}

body.home main > section {
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  background: #000;
  border-top: 0;
  border-bottom: 1px solid var(--px-home-divider);
}

/* All content sections use exactly the same vertical breathing room. */

/* Hero keeps its cinematic viewport treatment, while its content receives the
   same top/bottom rhythm and the same divider as every following section. */
body.home main > .px-hero {
  padding: 0;
}
body.home main > .px-hero .px-hero-content,
body.home main > .px-hero .px-tech-ad-content {
  padding-top: var(--px-home-section-space);
  padding-bottom: var(--px-home-section-space);
}

/* Remove legacy outer spacing that could visually create gaps between sections. */
body.home main > section > :first-child {
  margin-top: 0;
}
body.home main > section > :last-child {
  margin-bottom: 0;
}

/* Full-bleed / experimental sections previously carried their own conflicting
   padding or borders. Their internal layout is preserved; only outer rhythm is unified. */
body.home .px-exclusive-manifesto,
body.home .px-hero-quote-grid,
body.home .px-available-designs,
body.home .px-about,
body.home .px-portfolio-mosaic,
body.home .px-cinematic-why,
body.home .px-cinematic-products,
body.home .px-cinematic-persuasion,
body.home .px-arcade,
body.home .px-cinematic-testimonials,
body.home .px-cinematic-faq,
body.home .px-cinematic-final,
body.home .px-final {
  margin: 0;
  padding-top: var(--px-home-section-space);
  padding-bottom: var(--px-home-section-space);
  background: #000;
  border-top: 0;
  border-bottom: 1px solid var(--px-home-divider);
}

/* The Available Designs section used a light-theme text palette in an older
   iteration. On the unified black canvas it must remain readable. */
body.home .px-available-designs,
body.home .px-available-designs h2,
body.home .px-available-designs h3,
body.home .px-available-designs p,
body.home .px-available-designs a {
  color: #fff;
}
body.home .px-available-designs .px-available-kicker,
body.home .px-available-designs .px-available-status,
body.home .px-available-designs .px-available-link {
  color: #7cff6b;
}

@media (max-width: 900px) {
  :root {
    --px-home-section-space: 36px;
  }
}

@media (max-width: 620px) {
  :root {
    --px-home-section-space: 28px;
  }
}

/* =========================================================
   v1.2.20 — COMPACT SECTION RHYTHM + PREMIUM COOKIE BAR
   Homepage sections below the hero use 50% of v1.2.18 spacing.
   Cookie consent is a full-width, edge-to-edge futuristic bottom bar.
   ========================================================= */
body.home main > section:not(.px-hero) {
  padding-top: var(--px-home-section-space);
  padding-bottom: var(--px-home-section-space);
}

.px-cookie {
  position: fixed;
  z-index: 1200;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(280px, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  padding: 18px clamp(24px, 4vw, 72px);
  margin: 0;
  color: #fff;
  background: rgba(5, 5, 5, 0.96);
  border: 0;
  border-top: 1px solid rgba(124, 255, 107, 0.72);
  box-shadow:
    0 -18px 60px rgba(0, 0, 0, 0.38),
    0 -1px 20px rgba(124, 255, 107, 0.06);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.px-cookie[hidden] {
  display: none;
}
.px-cookie::before {
  content: '';
  position: absolute;
  left: clamp(24px, 4vw, 72px);
  top: -1px;
  width: clamp(72px, 10vw, 160px);
  height: 1px;
  background: #7cff6b;
  box-shadow: 0 0 18px rgba(124, 255, 107, 0.65);
}
.px-cookie h3 {
  margin: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.px-cookie p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 13px;
  line-height: 1.55;
}
.px-cookie p a {
  color: #7cff6b;
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 255, 107, 0.4);
}
.px-cookie p a:hover {
  border-bottom-color: #7cff6b;
}
.px-cookie-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.px-cookie-actions > span {
  display: none;
}
.px-cookie-actions button {
  min-width: 112px;
  padding: 11px 20px;
  color: #050505;
  background: #7cff6b;
  border: 1px solid #7cff6b;
  border-radius: 0;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
}
.px-cookie-actions button:hover,
.px-cookie-actions button:focus-visible {
  color: #7cff6b;
  background: transparent;
  box-shadow: 0 0 22px rgba(124, 255, 107, 0.12);
  outline: none;
}
.px-cookie-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 28px;
  height: 28px;
  padding: 0;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  border: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
.px-cookie-close:hover {
  color: #7cff6b;
}

@media (max-width: 760px) {
  .px-cookie {
    grid-template-columns: 1fr auto;
    gap: 8px 18px;
    padding: 16px 44px 16px 18px;
  }
  .px-cookie h3 {
    grid-column: 1 / -1;
  }
  .px-cookie p {
    font-size: 12px;
  }
  .px-cookie-actions {
    grid-column: 2;
    grid-row: 2;
  }
  .px-cookie-actions button {
    min-width: 94px;
    padding: 10px 14px;
  }
  .px-cookie::before {
    left: 18px;
    width: 82px;
  }
}

@media (max-width: 480px) {
  .px-cookie {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px 42px 15px 16px;
  }
  .px-cookie h3,
  .px-cookie p,
  .px-cookie-actions {
    grid-column: 1;
    grid-row: auto;
  }
  .px-cookie-actions {
    justify-content: flex-start;
  }
}

/* =========================================================
   v1.2.21 — UNIFIED HORIZONTAL GUTTER SYSTEM
   One shared left/right content rule for every contained homepage
   section below Hero. Intentionally edge-to-edge sections keep their
   own full-width layout (quote grid, portfolio mosaic, arcade/game).
   ========================================================= */
:root {
  --px-home-gutter: 32px;
  --px-content-width: min(calc(100% - (var(--px-home-gutter) * 2)), var(--px-max));
}

/* Match both native block templates and older templates containing a main wrapper. */
body.home :is(.px-section, .px-final, .px-exclusive-manifesto, .px-available-designs)
  > :is(.px-wrap, .px-about-wrap, .px-exclusive-manifesto-wrap, .px-available-wrap) {
  width: var(--px-content-width);
  margin-left: auto;
  margin-right: auto;
}

/* Explicit full-width exceptions: their visual grids/stages are meant
   to touch both viewport edges and must not inherit the content gutter. */
body.home main > .px-hero-quote-grid,
body.home main > .px-portfolio-mosaic,
body.home main > .px-arcade {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 900px) {
  :root {
    --px-home-gutter: 20px;
  }
}

@media (max-width: 620px) {
  :root {
    --px-home-gutter: 16px;
  }
}

/* =========================================================
   v1.2.22 — COMPACT SECTION RHYTHM + UNIFIED LABEL UNDERLINE
   All homepage sections below Hero use 50% of v1.2.21 vertical space.
   Every semantic section label uses the same text-width green underline.
   ========================================================= */
:root {
  --px-home-section-space: 24px;
  --px-section-label-underline: #7cff6b;
  --px-section-label-underline-gap: 7px;
  --px-section-label-underline-height: 1px;
}

/* Labels are inline-block so the underline can never extend beyond the text. */
body.home
  main
  :is(.px-eyebrow, .px-available-label, .px-exclusive-manifesto-kicker, .px-trusted-strip-label) {
  position: relative;
  display: table;
  width: max-content;
  max-width: 100%;
  padding-bottom: var(--px-section-label-underline-gap);
  border: 0;
  text-decoration: none;
}

body.home
  main
  :is(.px-eyebrow, .px-available-label, .px-exclusive-manifesto-kicker, .px-trusted-strip-label)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--px-section-label-underline-height);
  background: var(--px-section-label-underline);
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  :root {
    --px-home-section-space: 18px;
  }
}

@media (max-width: 620px) {
  :root {
    --px-home-section-space: 14px;
  }
}

.tg-footer {
  --tg-gutter: var(--px-home-gutter, 32px);
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
  color: #f4f4f4;
  font-family: var(--wp--preset--font-family--body, 'Poppins', sans-serif);
}
.tg-footer * {
  box-sizing: border-box;
}
.tg-footer-inner {
  width: min(calc(100% - (var(--tg-gutter) * 2)), var(--px-max, 1440px));
  margin: 0 auto;
  padding-top: 24px;
}
.tg-footer-rule {
  height: 1px;
  background: rgba(255, 255, 255, 0.58);
  width: 100%;
}
.tg-footer-main {
  display: grid;
  grid-template-columns: minmax(300px, 1.15fr) minmax(480px, 1.55fr) auto;
  gap: 38px;
  align-items: center;
  padding: 20px 0 18px;
}
.tg-footer-logo {
  display: inline-block;
  color: #f7f7f7;
  text-decoration: none;
  font-size: clamp(32px, 3vw, 54px);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 0.95;
}
.tg-footer-logo span {
  color: #b8f43d;
}
.tg-footer-tagline {
  margin-top: 10px;
  font-size: 13px;
  letter-spacing: 0.22em;
}
.tg-footer-brand p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.5;
}
.tg-footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 3vw, 54px);
  white-space: nowrap;
}
.tg-footer-nav a {
  color: #f3f3f3;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}
.tg-footer-nav a span {
  margin-left: 10px;
  color: #b8f43d;
}
.tg-footer-nav a:hover {
  color: #b8f43d;
}
.tg-footer-socials {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding-left: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.55);
}
.tg-footer-socials a {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #fff;
}
.tg-footer-socials svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  display: block;
}
.tg-footer-socials a:hover {
  color: #b8f43d;
}
.tg-footer-legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 17px 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
}
.tg-footer-legal nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.tg-footer-legal a {
  color: inherit;
  text-decoration: none;
}
.tg-footer-legal a:hover {
  color: #fff;
}
.tg-footer-legal i {
  display: block;
  width: 1px;
  height: 12px;
  background: rgba(255, 255, 255, 0.5);
}
.px-capabilities-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  gap: 22px;
  padding: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(13px, 1.35vw, 21px);
  font-weight: 750;
  letter-spacing: -0.02em;
  text-align: center;
}
.px-capabilities-list span {
  white-space: nowrap;
}
.tg-footer-wordmark {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 0;
  overflow: hidden;
  color: #e8e8e8;
  font-size: clamp(110px, 17.8vw, 360px);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.075em;
  white-space: nowrap;
  text-align: center;
  transform: translateY(2px);
}
@media (max-width: 1180px) {
  .tg-footer-main {
    grid-template-columns: 1fr auto;
  }
  .tg-footer-nav {
    grid-column: 1/-1;
    grid-row: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .tg-footer-socials {
    grid-column: 2;
    grid-row: 1;
  }
  .px-capabilities-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .tg-footer-inner {
    padding-top: 18px;
  }
  .tg-footer-main {
    display: block;
    padding: 18px 0;
  }
  .tg-footer-brand p br {
    display: none;
  }
  .tg-footer-nav {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 20px;
  }
  .tg-footer-socials {
    margin-top: 24px;
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    justify-content: flex-start;
    gap: 18px;
  }
  .tg-footer-legal {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .tg-footer-legal nav {
    flex-wrap: wrap;
    gap: 10px 14px;
  }
  .px-capabilities-list {
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
    text-align: left;
  }
  .tg-footer-wordmark {
    font-size: clamp(78px, 24vw, 160px);
    line-height: 0.82;
  }
}

/* v1.2.25 — footer social placement + true edge-to-edge TEMAGUE wordmark */
.tg-footer-main {
  grid-template-columns: minmax(300px, 1.15fr) minmax(480px, 1.55fr);
  align-items: center;
}
.tg-footer-brand .tg-footer-socials {
  margin-top: 18px;
  padding: 0;
  border: 0;
  justify-content: flex-start;
  gap: 18px;
}
.tg-footer-wordmark {
  width: 100%;
  margin: 0;
  padding: 0 0 clamp(72px, 7vw, 132px);
  overflow: hidden;
  font-size: clamp(110px, 18.5vw, 390px);
  line-height: 0.72;
  letter-spacing: -0.085em;
  white-space: nowrap;
  text-align: center;
  transform: scaleX(1.075);
  transform-origin: center top;
}
@media (max-width: 1180px) {
  .tg-footer-main {
    grid-template-columns: minmax(280px, 0.9fr) minmax(420px, 1.1fr);
  }
  .tg-footer-nav {
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}
@media (max-width: 760px) {
  .tg-footer-main {
    display: block;
  }
  .tg-footer-brand .tg-footer-socials {
    margin-top: 18px;
    padding: 0;
    border: 0;
    gap: 18px;
  }
  .tg-footer-wordmark {
    font-size: clamp(78px, 25vw, 170px);
    line-height: 0.76;
    padding-bottom: 72px;
    transform: scaleX(1.08);
  }
}

/* =========================================================
   v1.2.26 — CANONICAL SECTION TYPOGRAPHY + ISOLATED CONTACT
   One authority for homepage section labels/titles and a
   fixed, out-of-flow contact control that cannot shift layout.
   ========================================================= */
:root {
  --tg-section-label-font: 'Poppins', sans-serif;
  --tg-section-label-size: 11px;
  --tg-section-label-weight: 700;
  --tg-section-label-line: 1.3;
  --tg-section-label-track: 0.22em;
  --tg-section-title-font: 'Poppins', sans-serif;
  --tg-section-title-size: 48px;
  --tg-section-title-weight: 900;
  --tg-section-title-line: 1.08;
}

/* Section labels: same family, size, weight, tracking and underline. */
body.home main :is(.px-eyebrow, .px-trusted-strip-label, .px-available-label, .px-exclusive-manifesto-index) {
  width: max-content;
  max-width: 100%;
  display: block;
  position: relative;
  margin-top: 0;
  padding: 0 0 5px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--tg-section-label-font);
  font-size: var(--tg-section-label-size);
  font-weight: var(--tg-section-label-weight);
  line-height: var(--tg-section-label-line);
  letter-spacing: var(--tg-section-label-track);
  text-transform: uppercase;
}
body.home
  main
  :is(.px-eyebrow, .px-trusted-strip-label, .px-available-label, .px-exclusive-manifesto-index)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #7cff6b;
  opacity: 1;
  transform: none;
}

/* Section titles: one typographic scale for every actual section heading. */
body.home
  main
  :is(
    .px-exclusive-manifesto-heading > h2,
    .px-available-head h2,
    .px-section h2,
    .px-about-cinematic h2,
    .px-cinematic-testimonials > .px-wrap > h2,
    .px-faq-title,
    .px-final h2,
    .px-trusted-strip-title
  ) {
  font-family: var(--tg-section-title-font);
  font-size: var(--tg-section-title-size);
  font-weight: var(--tg-section-title-weight);
  line-height: var(--tg-section-title-line);
  letter-spacing: -1px;
}

/* Floating contact is its own viewport layer: never participates in document flow. */
.px-floating-contact-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  top: auto;
  left: auto;
  width: 64px;
  height: 64px;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  z-index: 2147483000;
  pointer-events: none;
  transform: none;
  contain: layout style;
}
.px-floating-contact-stack .px-whatsapp {
  position: absolute;
  inset: 0;
  width: 64px;
  height: 64px;
  margin: 0;
  flex: none;
  pointer-events: auto;
  transform: none;
}

@media (max-width: 1024px) {
  :root {
    --tg-section-title-size: 40px;
  }
}
@media (max-width: 767px) {
  :root {
    --tg-section-label-size: 10px;
    --tg-section-title-size: 32px;
  }
}
@media (max-width: 480px) {
  .px-floating-contact-stack {
    right: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
  }
  .px-floating-contact-stack .px-whatsapp {
    width: 56px;
    height: 56px;
  }
}

/* v1.2.27 — footer legal alignment + clean brand social icons */
.tg-footer-legal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
}
.tg-footer-copyright {
  justify-self: start;
  white-space: nowrap;
}
.tg-footer-backtop {
  justify-self: center;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  white-space: nowrap;
  font-weight: 600;
}
.tg-footer-backtop span {
  margin-left: 7px;
  color: #b8f43d;
}
.tg-footer-backtop:hover {
  color: #fff;
}
.tg-footer-legal-links {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  white-space: nowrap;
}
.tg-footer-socials a {
  width: 24px;
  height: 24px;
}
.tg-footer-socials svg {
  width: 24px;
  height: 24px;
  overflow: visible;
}
@media (max-width: 980px) {
  .tg-footer-legal {
    grid-template-columns: 1fr auto;
    gap: 14px 24px;
  }
  .tg-footer-copyright {
    grid-column: 1;
    grid-row: 1;
  }
  .tg-footer-backtop {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }
  .tg-footer-legal-links {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: end;
    flex-wrap: wrap;
    white-space: normal;
  }
}
@media (max-width: 620px) {
  .tg-footer-legal {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .tg-footer-copyright,
  .tg-footer-backtop,
  .tg-footer-legal-links {
    justify-self: auto;
  }
  .tg-footer-legal-links {
    justify-content: flex-start;
    gap: 10px 14px;
  }
}

/* v1.2.28 — official Font Awesome brand glyphs for footer social icons */
.tg-footer-socials .tg-icon {
  font-size: 22px;
  line-height: 1;
  display: block;
  color: currentColor;
  font-style: normal;
}

/* v1.2.29 — footer vertical rhythm + FAQ question typography */
/* Keep the capability row directly beneath the legal row with the same
   vertical rhythm used between the upper divider and copyright row. */
.tg-footer-legal {
  padding-top: 17px;
  padding-bottom: 17px;
  margin: 0;
}
.px-capabilities-list {
  margin: 0;
  padding-top: 17px;
  padding-bottom: 22px;
  min-height: 0;
}
/* FAQ questions use the site's normal copy size, retaining bold emphasis. */
.px-section .px-faq-list .px-faq-item summary,
.px-faq-list .px-faq-item summary,
.px-faq-item summary {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .px-section .px-faq-list .px-faq-item summary,
  .px-faq-list .px-faq-item summary,
  .px-faq-item summary {
    font-size: 16px;
  }
}

/* v1.2.32 mobile scroll stability guard */

/* v1.2.34 — approved TEMAGUE hero: exactly two headline rows */
.px-tech-ad-copy .px-tech-title,
.px-tech-ad-copy .px-tech-title-alt {
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  gap: 0.16em;
  font-size: clamp(42px, 7.1vw, 104px);
  line-height: 0.86;
}
.px-tech-ad-copy .px-tech-title-alt {
  margin-top: 14px;
}
.px-tech-ad-copy .px-tech-title > span {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .px-tech-ad-copy .px-tech-title,
  .px-tech-ad-copy .px-tech-title-alt {
    gap: 0.14em;
    font-size: clamp(27px, 8.35vw, 40px);
    letter-spacing: -0.06em;
  }
}

/* v1.2.36 — footer lower-row vertical rhythm correction
   The legal row and capability row form one compact footer unit. The previous
   desktop composition left an oversized visual void between them. Keep the
   distance below the copyright row equal to the distance from the divider
   above it, without changing the full-width TEMAGUE wordmark. */
@media (min-width: 981px) {
  .tg-footer-legal {
    min-height: 0;
    height: auto;
    padding: 17px 0;
    margin: 0;
  }
  .px-capabilities-list {
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 17px 0 22px;
    position: static;
    inset: auto;
    transform: none;
  }
}

/* v1.2.37 — audit hardening.
   Keep floating contact independent from document flow and make footer rows
   rely on normal flow instead of negative-margin compensation. */
.px-floating-contact-stack {
  isolation: isolate;
}
.tg-footer-legal,
.px-capabilities-list {
  box-sizing: border-box;
}

/* v1.2.38 — footer structural rhythm + responsive edge-safe wordmark
   Canonical footer authority. No negative margins, no horizontal scale transforms. */
.tg-footer-legal {
  margin: 0;
  padding-top: 17px;
  padding-bottom: 17px;
  min-height: 0;
  height: auto;
}
.px-capabilities-list {
  margin: 0;
  padding-top: 0;
  padding-bottom: 22px;
  min-height: 0;
  height: auto;
  position: static;
  inset: auto;
  transform: none;
}
.tg-footer-wordmark {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 2px clamp(88px, 7vw, 132px);
  box-sizing: border-box;
  overflow: visible;
  color: #e8e8e8;
  font-size: clamp(92px, 15.8vw, 330px);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: initial;
  transform: none;
}
.tg-footer-wordmark > span {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  line-height: inherit;
}
@media (max-width: 760px) {
  .tg-footer-legal {
    padding-top: 17px;
    padding-bottom: 17px;
  }
  .px-capabilities-list {
    padding-top: 0;
    padding-bottom: 18px;
  }
  .tg-footer-wordmark {
    width: 100%;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 72px;
    font-size: clamp(48px, 15.2vw, 116px);
    line-height: 0.76;
    transform: none;
    overflow: visible;
  }
}

/* v1.2.39 — canonical footer rhythm + compact fluid TEMAGUE wordmark.
   Structural fix only: no negative margins and no transform-based stretching. */
.tg-footer-legal {
  margin: 0;
  padding-top: 17px;
  padding-bottom: 0;
  min-height: 0;
  height: auto;
}
.px-capabilities-list {
  margin: 0;
  padding-top: 17px;
  padding-bottom: 22px;
  min-height: 0;
  height: auto;
  position: static;
  inset: auto;
  transform: none;
}
.tg-footer-wordmark {
  display: block;
  width: 100vw;
  max-width: none;
  margin: 0;
  padding: 0 0 clamp(88px, 7vw, 132px);
  overflow: hidden;
  box-sizing: border-box;
  color: #dedede;
  line-height: 0;
  transform: none;
}
.tg-footer-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.tg-footer-wordmark text {
  fill: currentColor;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 190px;
  font-weight: 900;
  letter-spacing: -8px;
}
@media (max-width: 760px) {
  .tg-footer-legal {
    padding-top: 17px;
    padding-bottom: 0;
  }
  .px-capabilities-list {
    padding-top: 17px;
    padding-bottom: 18px;
  }
  .tg-footer-wordmark {
    padding-bottom: 72px;
  }
}


/* v1.3.22 — FAQ question size requested +2px from the 16px baseline. */
.px-section .px-faq-list .px-faq-item summary,
.px-faq-list .px-faq-item summary,
.px-faq-item summary {
  font-size: 18px;
}
@media (max-width: 760px) {
  .px-section .px-faq-list .px-faq-item summary,
  .px-faq-list .px-faq-item summary,
  .px-faq-item summary {
    font-size: 18px;
  }
}


/* v1.3.27 — footer contact hierarchy + balanced wordmark rhythm.
   The contact group remains in the existing right column; no new footer geometry. */
.tg-footer-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.tg-footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 26px;
}
.tg-footer-contact a {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.82);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.45;
}
.tg-footer-contact a:hover { color: #fff; }
.tg-footer-contact .tg-icon {
  width: 18px;
  flex: 0 0 18px;
  margin: 0;
  color: #b8f43d;
  text-align: center;
  font-size: 15px;
}
.tg-footer-right .tg-footer-nav {
  width: 100%;
  justify-content: flex-start;
}
/* Match the visual breathing room below the large wordmark to the
   compact legal-to-wordmark rhythm above it. */
.tg-footer-wordmark {
  padding-bottom: 24px;
}
@media (max-width: 1180px) {
  .tg-footer-right .tg-footer-nav { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .tg-footer-right { margin-top: 28px; }
  .tg-footer-contact { margin-bottom: 22px; }
  .tg-footer-right .tg-footer-nav { margin-top: 0; }
  .tg-footer-wordmark { padding-bottom: 24px; }
}


/* v1.3.28 — footer rhythm, social breathing room, invite copy, compact capabilities. */
.tg-footer-rule {
  height: 2px;
}
.tg-footer-main {
  padding-top: 22px;
  padding-bottom: 24px;
}
.tg-footer-brand .tg-footer-socials {
  margin-top: 22px;
  min-height: 30px;
  align-items: center;
}
.tg-footer-socials a {
  width: 28px;
  height: 28px;
  overflow: visible;
}
.tg-footer-socials .tg-icon {
  line-height: 1.15;
}
.tg-footer-invite {
  margin: 0 0 22px;
  max-width: 620px;
}
.tg-footer-invite h2 {
  margin: 0 0 9px;
  color: #f7f7f7;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: .08em;
}
.tg-footer-invite p {
  margin: 0;
  max-width: 540px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.55;
}
.tg-footer-contact {
  margin-bottom: 0;
}
.px-section.px-capabilities-strip {
  padding-top: 36px;
  padding-bottom: 36px;
}
@media (max-width: 760px) {
  .tg-footer-main {
    padding-top: 22px;
    padding-bottom: 24px;
  }
  .tg-footer-brand .tg-footer-socials {
    margin-top: 22px;
  }
  .tg-footer-invite {
    margin-bottom: 20px;
  }
  .px-section.px-capabilities-strip {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* v1.3.30 — standalone capabilities section rhythm.
   This is intentionally NOT a footer component. Its vertical space is
   approximately two visible capital-letter heights above and below. */
.px-section.px-capabilities-strip {
  padding-top: 32px;
  padding-bottom: 32px;
}
.px-capabilities-list {
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
}
@media (max-width: 760px) {
  .px-section.px-capabilities-strip {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/* v1.3.31 — canonical standalone capabilities geometry.
   The strip is a homepage section, not a footer row. Equal block padding and
   an explicit one-line text box make the distance from the text line box to
   the upper and lower section edges mathematically identical. */
.px-section.px-capabilities-strip {
  display: block;
  margin: 0;
  padding-block: 32px;
  padding-inline: 0;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
}
.px-capabilities-strip > .px-wrap {
  margin-block: 0;
  padding-block: 0;
}
.px-capabilities-strip .px-capabilities-list {
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  line-height: 1;
  position: static;
  inset: auto;
  transform: none;
}
.px-capabilities-strip .px-capabilities-list > span {
  margin: 0;
  padding: 0;
  line-height: 1;
}
@media (max-width: 760px) {
  .px-section.px-capabilities-strip {
    padding-block: 32px;
  }
}


/* v1.3.32 — canonical footer boundary rhythm.
   The footer starts at its divider: no extra spacer is inserted before the
   rule. The first footer content row uses one shared vertical spacing value,
   so the divider-to-content rhythm stays consistent instead of accumulating
   legacy top padding. */
.tg-footer-inner {
  padding-top: 0;
}
.tg-footer-main {
  padding-top: 24px;
  padding-bottom: 24px;
}
@media (max-width: 760px) {
  .tg-footer-inner {
    padding-top: 0;
  }
  .tg-footer-main {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}


/* v1.3.34 — large footer wordmark visual symmetry.
   Remove legacy bottom-only spacer and crop the SVG canvas at the source so
   the black breathing room below TEMAGUE matches the space above it. */
.tg-footer-wordmark {
  padding-bottom: 0;
}
.tg-footer-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
@media (max-width: 760px) {
  .tg-footer-wordmark { padding-bottom: 0; }
}


/* v1.3.35 — footer wordmark balanced breathing room.
   The wordmark is kept at its intended height; equal wrapper padding provides
   the same black breathing room above and below without cropping the glyphs. */
.tg-footer-wordmark {
  padding-top: 32px;
  padding-bottom: 32px;
  box-sizing: border-box;
  line-height: 0;
}
.tg-footer-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: visible;
}
@media (max-width: 760px) {
  .tg-footer-wordmark {
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

/* v1.3.36 — canonical lower-footer rhythm.
   Use the existing divider-to-copyright spacing as the single reference.
   Do not add a second spacer above the giant wordmark: its SVG already has
   its own visual top breathing room. Keep only the matching lower edge space. */
.tg-footer-legal {
  padding-top: 17px;
  padding-bottom: 17px;
  margin: 0;
}
.tg-footer-wordmark {
  padding-top: 0;
  padding-bottom: 17px;
  margin: 0;
  box-sizing: border-box;
  line-height: 0;
}
@media (max-width: 760px) {
  .tg-footer-legal {
    padding-top: 17px;
    padding-bottom: 17px;
  }
  .tg-footer-wordmark {
    padding-top: 0;
    padding-bottom: 17px;
  }
}


/* v1.3.37 — lower-footer visual rhythm root fix.
   One visual spacing token controls all three gaps:
   divider -> copyright, copyright -> TEMAGUE, TEMAGUE -> footer edge.
   Legacy lower padding on the legal row is removed so it cannot stack with
   the wordmark's own spacing. The SVG viewport is cropped to the capital
   glyph area so hidden font-canvas whitespace no longer inflates the gap. */
:root { --tg-footer-lower-gap: 17px; }
.tg-footer-legal {
  padding-top: var(--tg-footer-lower-gap);
  padding-bottom: 0;
  margin: 0;
}
.tg-footer-wordmark {
  padding-top: var(--tg-footer-lower-gap);
  padding-bottom: var(--tg-footer-lower-gap);
  margin: 0;
  box-sizing: border-box;
  line-height: 0;
}
.tg-footer-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: hidden;
}
@media (max-width: 760px) {
  .tg-footer-legal {
    padding-top: var(--tg-footer-lower-gap);
    padding-bottom: 0;
  }
  .tg-footer-wordmark {
    padding-top: var(--tg-footer-lower-gap);
    padding-bottom: var(--tg-footer-lower-gap);
  }
}

/* v1.3.39 — hero video playback root fix. Media-only rules: do not alter hero copy geometry. */
.px-tech-ad-hero > .px-tech-ad-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  display: block;
}
.px-tech-ad-hero .px-tech-ad-clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  visibility: visible;
}
.px-tech-ad-hero .px-tech-ad-clip.is-active {
  opacity: 1;
}


/* =========================================================
   v1.3.40 — responsive body-copy system + exclusive alignment
   Reuse the approved Exclusive paragraph scale for the requested homepage
   and footer copy. Keep heading hierarchy intact while making it fluid.
   ========================================================= */
:root {
  --tg-fluid-copy-size: clamp(14px, 1.15vw, 17px);
  --tg-fluid-copy-line: 1.75;
}

/* Start Your Project description: same fluid rule as Exclusive body copy. */
body.home main .px-final > .px-wrap > p {
  font-size: var(--tg-fluid-copy-size);
  font-weight: 400;
  line-height: var(--tg-fluid-copy-line);
}

/* Footer descriptive/contact/legal copy uses the same responsive scale. */
.tg-footer-brand > p,
.tg-footer-invite > p,
.tg-footer-contact a,
.tg-footer-copyright {
  font-size: var(--tg-fluid-copy-size);
  font-weight: 400;
  line-height: var(--tg-fluid-copy-line);
}

/* LET'S WORK TOGETHER remains a heading, but is fluid rather than fixed. */
.tg-footer-invite > h2 {
  font-size: var(--tg-fluid-copy-size);
  line-height: 1.35;
}

/* Exclusive right-hand copy is vertically centered in its grid track.
   This removes the bottom-heavy alignment without positional hacks. */
.px-exclusive-manifesto-copy {
  align-self: center;
  padding-bottom: 0;
}

/* Full-bleed TEMAGUE wordmark. Keep sizing relative to the footer rather
   than 100vw: viewport units include the browser scrollbar on some logged-out
   views and can push the final glyph past the visible right edge. The SVG
   owns a tiny, symmetric optical inset at both sides. */
.tg-footer-wordmark {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
.tg-footer-wordmark svg {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  overflow: hidden;
}
.tg-footer-wordmark text {
  letter-spacing: -10px;
}

/* v1.3.41 — footer social-to-divider breathing room.
   Add one text-line of space before the footer divider so the social icons
   never visually touch the rule. Keep the existing icon sizing/alignment. */
.tg-footer-main {
  padding-bottom: 40px;
}
@media (max-width: 760px) {
  .tg-footer-main {
    padding-bottom: 40px;
  }
}


/* =========================================================
   v1.3.44 — Exclusive / Start Your Project shared typography
   Root fix: both sections now consume the same selectors and values instead
   of maintaining a second Start Your Project typography override.
   ========================================================= */
body.home main :is(.px-exclusive-manifesto-index, .px-final .px-eyebrow) {
  display: block;
  width: max-content;
  max-width: 100%;
  position: relative;
  margin: 0 0 28px;
  padding: 0 0 5px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--tg-section-label-font);
  font-size: var(--tg-section-label-size);
  font-weight: var(--tg-section-label-weight);
  line-height: var(--tg-section-label-line);
  letter-spacing: var(--tg-section-label-track);
  text-transform: uppercase;
}

body.home main :is(.px-exclusive-manifesto-heading > h2, .px-final h2) {
  margin: 0;
  color: #f4f4f2;
  font-family: var(--tg-section-title-font);
  font-size: var(--tg-section-title-size);
  font-weight: var(--tg-section-title-weight);
  line-height: var(--tg-section-title-line);
  letter-spacing: -1px;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

body.home main :is(.px-exclusive-manifesto-copy > p:not(.px-exclusive-manifesto-lead), .px-final > .px-wrap > p) {
  max-width: 510px;
  color: rgba(244, 244, 242, 0.72);
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 400;
  line-height: 1.75;
}
body.home main .px-final > .px-wrap > p {
  margin: 22px auto 0;
}

/* Preserve the existing section alignments; typography is shared above. */
body.home main .px-final {
  text-align: center;
}

/* =========================================================
   v1.3.45 — footer legal row fixed 13px
   Copyright, Back to Top and all legal links intentionally share one fixed
   type size on desktop and mobile. This overrides older fluid/fixed rules.
   ========================================================= */
.tg-footer-copyright,
.tg-footer-backtop,
.tg-footer-legal-links,
.tg-footer-legal-links a {
  font-size: 13px;
}

/* =========================================================
   v1.3.50 — compact footer contact group
   Keep location, email and WhatsApp as a compact utility group.
   This intentionally overrides the earlier fluid footer-copy rule through
   normal source order; no !important and no positional hacks.
   ========================================================= */
.tg-footer-contact {
  gap: 8px;
}
.tg-footer-contact a {
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
}


/* v1.3.55 — Exclusive section uses the shared homepage reveal motion safely.
   It may reveal again like the other motion sections, but always enters from below.
   Avoiding the upward transform prevents the top of the large copy from being clipped
   during reverse-scroll re-entry. No forced dimensions or specificity hacks are used. */
.px-motion-ready .px-exclusive-manifesto.px-scroll-motion.motion-from-above [data-motion-item] {
  transform: translate3d(0, 36px, 0) scale(0.985);
}
.px-exclusive-manifesto {
  overflow-x: clip;
  overflow-y: visible;
}
.px-exclusive-manifesto.is-motion-visible [data-motion-item] {
  will-change: auto;
}


/* v1.3.54 — manifesto motion stability on upward re-entry.
   Keep the section itself visible; animate only its inner content and avoid
   filter/scale geometry changes that could visually crop the lower edge. */
.px-motion-ready .px-exclusive-manifesto.px-scroll-motion [data-motion-item] {
  filter: none;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.58s ease, transform 0.72s cubic-bezier(0.2, 0.75, 0.2, 1);
  will-change: opacity, transform;
}
.px-motion-ready .px-exclusive-manifesto.px-scroll-motion.motion-from-above [data-motion-item] {
  transform: translate3d(0, 28px, 0);
}
.px-exclusive-manifesto.px-scroll-motion.is-motion-visible [data-motion-item] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* v1.3.55 — canonical north-east arrow geometry from the supplied reference. */
:is(.px-available-open, .px-about-arrow, .px-ui-arrow, .px-mega-column h3 > span[aria-hidden="true"], .px-mega-maintenance > span[aria-hidden="true"], [data-arcade-start] b) svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: currentColor;
}


/* v1.3.56 — preserve ONE BUSINESS. on one title line and match the compact supplied arrow reference. */
.px-exclusive-manifesto h2 .px-exclusive-title-line--business > .px-exclusive-one,
.px-exclusive-manifesto h2 .px-exclusive-title-line--business > .px-exclusive-business-outline {
  display: inline;
}
:is(.px-available-open, .px-about-arrow, .px-ui-arrow, .px-mega-column h3 > span[aria-hidden="true"], .px-mega-maintenance > span[aria-hidden="true"], [data-arcade-start] b) svg {
  width: 0.92em;
  height: 0.92em;
}


/* v1.3.57 — post-hero manifesto upward-scroll boundary fix.
   Keep the reveal compositor isolated from the following section divider and
   avoid a stale translated frame touching the section boundary. */
body.home .px-exclusive-manifesto {
  isolation: isolate;
  overflow: visible;
}
body.home .px-exclusive-manifesto > .px-exclusive-manifesto-wrap {
  backface-visibility: hidden;
  transform-style: flat;
}
body.home .px-exclusive-manifesto.px-scroll-motion.is-motion-visible > .px-exclusive-manifesto-wrap {
  transform: translate3d(0, 0, 0) scale(1);
}


/* =========================================================
   v1.3.59 — Back to Top reference match
   Reference proportions: compact open chevron above a single uppercase label.
   The chevron is SVG geometry rather than a font glyph, so its stroke length,
   angle and weight stay identical across browsers/platforms.
   ========================================================= */
.tg-footer-backtop {
  justify-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.tg-footer-backtop-mark {
  display: block;
  width: 25.65px;
  height: 15.2px;
  overflow: visible;
}
.tg-footer-backtop-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 4.5;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.tg-footer-backtop-label {
  margin: 0;
  color: #fff;
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 14.08px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .44px;
  text-transform: uppercase;
}
.tg-footer-backtop:hover,
.tg-footer-backtop:focus-visible {
  color: #fff;
}
@media (max-width: 620px) {
  .tg-footer-backtop {
    align-self: center;
  }
}

/* =========================================================
   v1.3.65 — Footer social underline spacing refinement
   Keep each brand icon unchanged while giving its underline
   deliberate breathing room and a stronger visual weight.
   ========================================================= */
.tg-footer-socials a {
  height: auto;
  min-height: 28px;
  padding-bottom: 8px;
  border-bottom: 2px solid currentColor;
  box-sizing: content-box;
  text-decoration: none;
}

/* =========================================================
   v1.3.67 — Footer social polish
   Clean, conventional icon row: no permanent underline.
   A subtle lift + brand accent on hover provides feedback
   without adding visual clutter to the footer.
   ========================================================= */
.tg-footer-socials {
  gap: 20px;
}
.tg-footer-socials a {
  width: 24px;
  height: 24px;
  min-height: 0;
  padding-bottom: 0;
  border-bottom: 0;
  box-sizing: border-box;
  position: relative;
  text-decoration: none;
  transition: color .22s ease, transform .22s ease, opacity .22s ease;
}
.tg-footer-socials a::after {
  content: none;
  display: none;
}
.tg-footer-socials a:hover,
.tg-footer-socials a:focus-visible {
  color: #b8f43d;
  transform: translateY(-2px);
}
.tg-footer-socials a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}
@media (prefers-reduced-motion: reduce) {
  .tg-footer-socials a {
    transition: none;
  }
  .tg-footer-socials a:hover,
  .tg-footer-socials a:focus-visible {
    transform: none;
  }
}

/* =========================================================
   v1.3.70 — Footer brand heading single-line refinement
   Keep the new positioning statement compact on desktop.
   ========================================================= */
@media (min-width: 769px) {
  .tg-footer-logo {
    font-size: clamp(24px, 2.05vw, 36px);
    letter-spacing: -0.045em;
    line-height: 1;
    white-space: nowrap;
  }
}


/* =========================================================
   v1.3.71 — Footer social navigation label
   Gives the compact social icon row a deliberate editorial lead-in.
   ========================================================= */
.tg-footer-socials-label {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 8px;
  color: rgba(255,255,255,.72);
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .tg-footer-socials { gap: 18px; }
  .tg-footer-socials-label {
    margin-right: 4px;
    font-size: 10px;
    letter-spacing: .12em;
  }
}


/* =========================================================
   v1.3.72 — Footer social divider + tighter icon rhythm
   Structural divider is a real element (not a fragile pseudo-element)
   so it renders consistently for logged-in and logged-out visitors.
   ========================================================= */
.tg-footer-brand .tg-footer-socials {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 16px;
  row-gap: 12px;
}
.tg-footer-socials-label {
  margin-right: 0;
}
.tg-footer-socials .tg-footer-socials-divider {
  display: inline-block;
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  height: 0;
  margin: 0 4px 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.72);
  background: none;
  opacity: 1;
}
.tg-footer-socials a {
  flex: 0 0 24px;
}
@media (max-width: 760px) {
  .tg-footer-brand .tg-footer-socials {
    column-gap: 14px;
  }
  .tg-footer-socials .tg-footer-socials-divider {
    flex-basis: 42px;
    width: 42px;
    min-width: 42px;
  }
}
@media (max-width: 480px) {
  .tg-footer-brand .tg-footer-socials {
    column-gap: 12px;
  }
  .tg-footer-socials .tg-footer-socials-divider {
    flex-basis: 28px;
    width: 28px;
    min-width: 28px;
  }
}


/* =========================================================
   v1.3.74 — Footer MADE DISTINCTIVE outlined treatment
   Keep WEBSITES, solid; render only MADE DISTINCTIVE. as
   transparent lettering with a crisp white outline.
   ========================================================= */
.tg-footer-logo .tg-footer-logo-outline {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #f7f7f7;
  paint-order: stroke fill;
}

@supports not (-webkit-text-stroke: 1px #fff) {
  .tg-footer-logo .tg-footer-logo-outline {
    color: #f7f7f7;
  }
}


/* v1.3.75 — Footer WEBSITES, brand-green treatment */
.tg-footer-logo .tg-footer-logo-websites {
  color: #7cff6b;
  -webkit-text-fill-color: #7cff6b;
}


/* Footer inline icon primitives (v1.4.0 cleanup). */
.tg-footer .tg-icon {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tg-footer .tg-icon .is-fill {
  fill: currentColor;
  stroke: none;
}


/* v1.4.2 — canonical Font Awesome treatment for Threads, location and WhatsApp. */
.tg-icon-fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  font-size: 1em;
  line-height: 1;
  flex: 0 0 auto;
}
.tg-footer-socials .tg-icon-fa {
  width: auto;
  height: auto;
  font-size: 28px;
}
.tg-footer-contact .tg-icon-fa {
  width: 20px;
  height: 20px;
  font-size: 18px;
  text-align: center;
}

/* v1.4.3 — optical icon sizing refinement. */
.tg-footer-socials .fa-threads {
  font-size: 24px;
}
.tg-footer-contact .tg-icon:not(.tg-icon-fa) {
  width: 20px;
  height: 20px;
}


/* =========================================================
   ABOUT TEMAGUE — canonical section layout
   IMPORTANT: this section follows the same final homepage rhythm used by
   the surrounding sections. Do not reintroduce one-off outer spacing.
   ========================================================= */
body.home .px-about-temague {
  margin: 0;
  padding-top: var(--px-home-section-space);
  padding-bottom: var(--px-home-section-space);
  background: #000;
}
.px-about-temague-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: clamp(48px, 7vw, 88px);
  align-items: start;
}
.px-about-temague-copy {
  min-width: 0;
  max-width: 760px;
}
body.home main .px-about-temague .px-eyebrow {
  margin-bottom: var(--px-section-label-gap);
}
body.home main .px-about-temague h2 {
  margin: 0;
  max-width: 720px;
}
body.home main .px-about-temague .px-about-intro {
  margin-top: var(--px-section-description-gap);
  max-width: 680px;
}
.px-about-temague-principle {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.px-about-temague-principle span { color: #7cff6b; }
.px-about-temague-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.42);
  padding-bottom: 6px;
}
.px-about-temague-link:hover,
.px-about-temague-link:focus-visible {
  border-bottom-color: #7cff6b;
}
.px-about-temague-arrow {
  display: inline-flex;
  width: 20px;
  height: 20px;
}
.px-about-temague-arrow svg { width: 100%; height: 100%; }
.px-about-temague-media {
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #101010;
}
.px-about-temague-media img,
.px-about-temague-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .px-about-temague-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .px-about-temague-copy { max-width: 760px; }
  .px-about-temague-media {
    width: min(100%, 620px);
    aspect-ratio: 2 / 1;
  }
}
@media (max-width: 620px) {
  .px-about-temague-grid { gap: 30px; }
  .px-about-temague-principle { margin-top: 22px; }
  .px-about-temague-link { margin-top: 24px; }
  .px-about-temague-media { aspect-ratio: 16 / 9; }
}

/* =========================================================
   v1.4.8 — ABOUT RHYTHM: AVAILABLE DESIGNS IS THE REFERENCE
   Keep this block canonical: About intentionally mirrors the final
   Available Designs outer rhythm instead of relying on legacy About rules.
   ========================================================= */
body.home .px-about-temague {
  margin: 0;
  padding-top: var(--px-home-section-space);
  padding-bottom: var(--px-home-section-space);
  border-bottom: 1px solid var(--px-home-divider);
}
body.home main .px-about-temague .px-eyebrow {
  margin: 0 0 18px;
  padding-bottom: var(--px-section-label-underline-gap);
  font: 700 11px/1 Poppins, sans-serif;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.px-about-temague-grid {
  align-items: start;
}
.px-about-temague-media {
  align-self: start;
  height: clamp(210px, 18vw, 280px);
  aspect-ratio: auto;
}
@media (max-width: 900px) {
  .px-about-temague-media {
    width: min(100%, 620px);
    height: clamp(210px, 34vw, 280px);
    aspect-ratio: auto;
  }
}
@media (max-width: 620px) {
  .px-about-temague-media {
    width: 100%;
    height: clamp(180px, 52vw, 240px);
    aspect-ratio: auto;
  }
}


/* =========================================================
   v1.4.9 — ABOUT OUTER RHYTHM ROOT FIX
   Dynamic blocks are not guaranteed to be direct children of <main>.
   Use the same non-direct selector strategy as Available Designs so the
   legacy .px-section { padding:120px 0 } can never win.
   ========================================================= */
body.home .px-about-temague {
  box-sizing: border-box;
  margin: 0;
  padding-top: var(--px-home-section-space);
  padding-bottom: var(--px-home-section-space);
  background: #000;
  border-top: 0;
  border-bottom: 1px solid var(--px-home-divider);
}

/* =========================================================
   v1.4.10 — ABOUT MEDIA: MATCH COPY COLUMN HEIGHT
   Desktop/tablet: the image starts with the copy and stretches exactly to
   the copy column's bottom edge. Mobile keeps a natural landscape ratio.
   ========================================================= */
@media (min-width: 901px) {
  .px-about-temague-grid {
    align-items: stretch;
  }
  .px-about-temague-media {
    align-self: stretch;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }
}
@media (max-width: 900px) {
  .px-about-temague-media {
    align-self: start;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}


/* =========================================================
   v1.4.16 — AVAILABLE DESIGNS CARD GAP
   Increase the Available Designs card spacing by a further 25% from v1.4.15
   (29.4px -> 36.75px). Grid columns remain fluid, so card/media width
   adjusts naturally without fixed-width overrides.
   ========================================================= */
@media (min-width: 641px) {
  .px-available-grid {
    gap: 36.75px;
  }
}


/* =========================================================
   v1.4.19 — THREADS FOOTER ICON REFINEMENT
   Threads only: 40% smaller glyph inside a solid white,
   true square tile with softly rounded corners. Other icons untouched.
   ========================================================= */
.tg-footer-socials .tg-footer-social-link--threads {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  aspect-ratio: 1 / 1;
  flex: 0 0 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #000;
  overflow: hidden;
}
.tg-footer-socials .tg-footer-social-link--threads .fa-threads {
  font-size: 14.4px; /* 40% smaller than the previous 24px glyph */
  line-height: 1;
  color: #000;
}
.tg-footer-socials .tg-footer-social-link--threads:hover,
.tg-footer-socials .tg-footer-social-link--threads:focus-visible {
  background: #fff;
  color: #000;
}


/* =========================================================
   v1.4.20 — FOOTER CONNECTION LAYOUT
   Remove the former brand/campaign copy from the footer top row.
   Left: project invitation. Right: social + contact utility, right aligned.
   Desktop contact items stay on one horizontal line; smaller screens wrap
   naturally to protect readability without fixed positioning.
   ========================================================= */
.tg-footer-main.tg-footer-main--connect {
  grid-template-columns: minmax(280px, .9fr) minmax(560px, 1.6fr);
  gap: clamp(40px, 7vw, 120px);
  align-items: start;
}
.tg-footer-invite--left {
  margin: 0;
  max-width: 560px;
  justify-self: start;
  text-align: left;
}
.tg-footer-connect {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 22px;
  text-align: right;
}
.tg-footer-connect .tg-footer-socials {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.tg-footer-connect .tg-footer-contact {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: clamp(18px, 2.4vw, 34px);
}
.tg-footer-connect .tg-footer-contact a {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 980px) {
  .tg-footer-main.tg-footer-main--connect {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .tg-footer-connect {
    align-items: flex-start;
    text-align: left;
  }
  .tg-footer-connect .tg-footer-socials,
  .tg-footer-connect .tg-footer-contact {
    justify-content: flex-start;
  }
  .tg-footer-connect .tg-footer-contact {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}
@media (max-width: 560px) {
  .tg-footer-connect .tg-footer-socials {
    flex-wrap: wrap;
  }
  .tg-footer-connect .tg-footer-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* =========================================================
   v1.4.21 — FOOTER CONTACT TYPOGRAPHY PARITY
   Location, email and WhatsApp use the exact same typography source as the
   project-invitation description. Keeping both selectors in one rule ensures
   their fluid sizing, weight and line-height remain identical responsively.
   ========================================================= */
.tg-footer-invite > p,
.tg-footer-connect .tg-footer-contact a {
  font-size: var(--tg-fluid-copy-size);
  font-weight: 400;
  line-height: var(--tg-fluid-copy-line);
}

/* =========================================================
   v1.4.22 — Footer "Stay Connected" emphasis
   Keep the existing typography and responsive behavior; only increase
   the label weight so the social heading reads as a clear bold anchor.
   ========================================================= */
.tg-footer-socials-label {
  font-weight: 700;
}

/* =========================================================
   v1.4.27 — FOOTER SOCIAL ICON RHYTHM + THREADS REFINEMENT
   Keep the label/divider relationship intact while tightening only the
   spacing between consecutive social icon links. Threads retains its
   existing white tile, now with sharp corners and a heavier glyph.
   ========================================================= */
.tg-footer-connect .tg-footer-socials .tg-footer-social-link + .tg-footer-social-link {
  margin-left: -8px;
}
.tg-footer-socials .tg-footer-social-link--threads {
  border-radius: 0;
}
.tg-footer-socials .tg-footer-social-link--threads .fa-threads {
  -webkit-text-stroke: 0.55px currentColor;
  paint-order: stroke fill;
}
@media (max-width: 560px) {
  .tg-footer-connect .tg-footer-socials .tg-footer-social-link + .tg-footer-social-link {
    margin-left: -6px;
  }
}

/* =========================================================
   v1.4.28 — THREADS NATIVE WEIGHT + TIGHTER FOOTER CONTACT
   Restore the native Font Awesome Threads glyph weight while preserving the
   solid white sharp-cornered square tile. Tighten only the horizontal rhythm
   between location, email and WhatsApp contact items.
   ========================================================= */
.tg-footer-socials .tg-footer-social-link--threads .fa-threads {
  -webkit-text-stroke: 0;
  paint-order: normal;
}
.tg-footer-connect .tg-footer-contact {
  gap: clamp(8px, 1.15vw, 16px);
}
@media (max-width: 980px) {
  .tg-footer-connect .tg-footer-contact {
    column-gap: 12px;
  }
}


/* v1.4.30 — canonical local hero video. Single media layer, no remote source or clip stack. */
.px-tech-ad-hero { position: relative; background: #071713; overflow: hidden; }
.px-tech-ad-hero > .px-tech-ad-media { position:absolute; inset:0; z-index:0; overflow:hidden; background:#071713; pointer-events:none; }
.px-tech-ad-hero .px-hero-native-video { position:absolute; inset:0; width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; object-position:center; display:block; opacity:1; visibility:visible; transform:none; filter:none; }
.px-tech-ad-hero .px-hero-video-overlay { position:absolute; inset:0; background:rgba(0,0,0,.22); z-index:1; pointer-events:none; }
.px-tech-ad-hero .px-tech-ad-copy, .px-tech-ad-hero .px-tech-ad-index { position:relative; z-index:2; }

/* =========================================================
   v1.4.31 — HERO COPY CENTER + CLEAR MEDIA CANONICAL FIX
   Final override only: one centering model, one subtle readability shade.
   Removes legacy cinematic pseudo-overlay/fog from the active hero.
   ========================================================= */
.px-tech-ad-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(620px, 78svh, 780px);
  height: clamp(620px, 78svh, 780px);
  max-height: none;
  isolation: isolate;
}
.px-tech-ad-hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.px-tech-ad-hero > .px-tech-ad-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.px-tech-ad-hero .px-hero-native-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: none !important;
  opacity: 1 !important;
}
.px-tech-ad-hero .px-hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.10) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}
.px-tech-ad-hero .px-tech-ad-copy {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 2;
  width: min(calc(100% - 64px), 1180px);
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 96px 0 64px;
  transform: none !important;
  align-self: center;
}
.px-tech-ad-hero .px-tech-ad-index {
  z-index: 2;
}
@media (max-width: 900px) {
  .px-tech-ad-hero {
    min-height: clamp(560px, 76svh, 700px);
    height: clamp(560px, 76svh, 700px);
  }
  .px-tech-ad-hero .px-tech-ad-copy {
    width: min(calc(100% - 40px), 1180px);
    padding: 88px 0 56px;
  }
}
@media (max-width: 620px) {
  .px-tech-ad-hero {
    min-height: clamp(520px, 72svh, 620px);
    height: clamp(520px, 72svh, 620px);
  }
  .px-tech-ad-hero .px-tech-ad-copy {
    width: calc(100% - 28px);
    padding: 78px 0 46px;
  }
}

/* =========================================================
   v1.4.32 — CANONICAL ISOLATED HERO
   Fresh component namespace. The Hero no longer participates in the legacy
   px-tech-ad cinematic rules, clip switching, pseudo fog, or looping copy
   animations. One local video, one shade, one centering model.
   ========================================================= */
.tg-hero {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(620px, 78svh, 780px);
  min-height: 620px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #071713;
  color: #fff;
}
.tg-hero__media,
.tg-hero__video,
.tg-hero__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tg-hero__media { z-index: 0; overflow: hidden; pointer-events: none; }
.tg-hero__video {
  display: block;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
}
.tg-hero__shade {
  z-index: 1;
  background: rgba(0, 0, 0, 0.14);
  opacity: 1;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tg-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: min(calc(100% - 64px), 1180px);
  height: 100%;
  margin: 0 auto;
  padding: 84px 0 52px;
}
.tg-hero__copy {
  position: static;
  width: 100%;
  max-width: 1100px;
  margin: 0;
  padding: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  filter: none;
}
.tg-hero__copy,
.tg-hero__copy * { animation: none !important; }
.tg-hero__kicker {
  margin: 0 0 18px;
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .18em;
  color: #fff;
}
.tg-hero__title {
  display: flex;
  flex-wrap: nowrap;
  gap: .16em;
  width: 100%;
  margin: 0;
  font-size: clamp(42px, 7.1vw, 104px);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tg-hero__title--second { margin-top: 14px; }
.tg-hero__title > span { display: inline-block; flex: 0 0 auto; white-space: nowrap; }
.tg-hero__accent { color: #7cff6b; }
.tg-hero__outline {
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  text-stroke: 2px #fff;
}
.tg-hero__subtitle {
  max-width: 760px;
  margin: 26px 0 22px;
  font-size: clamp(16px, 1.5vw, 22px);
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: .04em;
  color: #fff;
  opacity: 1;
}
.tg-hero__cta { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: 12px; }
.tg-hero__cta-arrow { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tg-hero__index {
  position: absolute;
  z-index: 3;
  right: 4vw;
  bottom: 5%;
  display: flex;
  gap: 90px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
  color: #fff;
}
.tg-hero__index::before {
  content: '';
  position: absolute;
  left: 30px;
  right: 30px;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,.5);
}
@media (max-width: 900px) {
  .tg-hero { height: clamp(560px, 76svh, 700px); min-height: 560px; }
  .tg-hero__inner { width: min(calc(100% - 40px), 1180px); padding: 76px 0 44px; }
}
@media (max-width: 620px) {
  .tg-hero { height: clamp(520px, 72svh, 620px); min-height: 520px; }
  .tg-hero__inner { width: calc(100% - 28px); padding: 68px 0 38px; }
  .tg-hero__title { gap: .14em; font-size: clamp(27px, 8.35vw, 40px); letter-spacing: -.06em; }
  .tg-hero__subtitle { font-size: 16px; line-height: 1.55; }
  .tg-hero__index { right: 14px; bottom: 18px; gap: 58px; }
}

/* Footer description requested in v1.4.32. */
.tg-footer-invite > p { color: #666; }

/* v1.4.33 — footer legal row colour refinement.
   Only copyright + the three legal links use #666.
   Back to Top intentionally retains its existing colour and hover treatment. */
.tg-footer-copyright,
.tg-footer-copyright a,
.tg-footer-legal-links,
.tg-footer-legal-links a {
  color: #666;
}

/* v1.4.34 — Single post/page light reading surface.
   Scope is intentionally limited to regular single posts and non-home pages,
   so the homepage and footer retain their existing colour system. */
body.single,
body.page:not(.home) {
  background: #ffffff;
  color: #000000;
}
body.single .wp-site-blocks > .wp-block-group:not(.four-my-theme-footer-part),
body.page:not(.home) .wp-site-blocks > .wp-block-group:not(.four-my-theme-footer-part) {
  background-color: #ffffff;
  color: #000000;
}
body.single .wp-block-post-title,
body.single .wp-block-post-content,
body.single .wp-block-post-content p,
body.single .wp-block-post-content li,
body.single .wp-block-post-content h1,
body.single .wp-block-post-content h2,
body.single .wp-block-post-content h3,
body.single .wp-block-post-content h4,
body.single .wp-block-post-content h5,
body.single .wp-block-post-content h6,
body.page:not(.home) .wp-block-post-title,
body.page:not(.home) .wp-block-post-content,
body.page:not(.home) .wp-block-post-content p,
body.page:not(.home) .wp-block-post-content li,
body.page:not(.home) .wp-block-post-content h1,
body.page:not(.home) .wp-block-post-content h2,
body.page:not(.home) .wp-block-post-content h3,
body.page:not(.home) .wp-block-post-content h4,
body.page:not(.home) .wp-block-post-content h5,
body.page:not(.home) .wp-block-post-content h6 {
  color: #000000;
}
body.single .wp-block-post-content a,
body.page:not(.home) .wp-block-post-content a {
  color: #000000;
}

/* v1.4.37 — Single-post breadcrumb + five-star rating. */
body.single .tg-single-breadcrumb {
  margin: 0 0 14px;
  color: #000;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .09em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
body.single .tg-single-breadcrumb a,
body.single .tg-single-breadcrumb span {
  color: inherit;
}
body.single .tg-single-breadcrumb a {
  text-decoration: none;
}
body.single .tg-single-breadcrumb a:hover,
body.single .tg-single-breadcrumb a:focus-visible {
  text-decoration: underline;
}
body.single .tg-single-breadcrumb__home {
  display: inline-flex;
  vertical-align: -2px;
  align-items: center;
}
body.single .tg-breadcrumb-home-icon {
  width: 15px;
  height: 15px;
  display: block;
}
body.single .tg-single-breadcrumb__sep {
  display: inline-flex;
  vertical-align: -2px;
  align-items: center;
  justify-content: center;
  padding: 0 .45em;
  opacity: .55;
}
body.single .tg-single-breadcrumb__sep svg {
  width: 12px;
  height: 12px;
  display: block;
}
body.single .tg-single-rating {
  margin: 10px 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
body.single .tg-single-rating__stars {
  color: #f5b800;
  font-size: 20px;
  letter-spacing: .12em;
}
body.single .tg-single-rating__text {
  color: #000;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

/* v1.4.39 — Wider single-post canvas, premium share panel and related sidebar. */
body.single .tg-single-shell { max-width:none; }
body.single .tg-single-shell > * { width:min(calc(100% - (var(--px-home-gutter, 32px) * 2)), var(--px-max, 1180px)); max-width:none; margin-left:auto; margin-right:auto; }
body.single .tg-single-heading { margin-bottom:8px; }
body.single .tg-single-heading .wp-block-post-title { max-width:none; width:100%; margin-left:0; margin-right:0; }
body.single .tg-single-layout { align-items:flex-start; gap:64px; margin-top:24px; }
body.single .tg-single-main { min-width:0; }
body.single .tg-single-main > .wp-block-post-content { max-width:none; }
body.single .tg-single-sidebar { min-width:280px; }
body.single .tg-related { position:sticky; top:110px; border-top:1px solid #d8d8d8; padding-top:20px; }
body.single .tg-related__head span { display:block; margin-bottom:5px; font-size:10px; font-weight:600; letter-spacing:.15em; color:#777; }
body.single .tg-related__head h2 { margin:0 0 20px; color:#000; font-size:24px; line-height:1.15; letter-spacing:-.03em; }
body.single .tg-related__list { display:grid; gap:0; }
body.single .tg-related__item { display:grid; grid-template-columns:88px minmax(0,1fr); gap:14px; padding:16px 0; border-top:1px solid #ececec; }
body.single .tg-related__item:first-child { border-top:0; padding-top:0; }
body.single .tg-related__thumb { display:block; height:76px; overflow:hidden; border-radius:8px; background:#f1f1f1; }
body.single .tg-related__thumb img, body.single .tg-related__placeholder { width:100%; height:100%; object-fit:cover; display:block; }
body.single .tg-related__category { display:block; margin-bottom:4px; color:#777; font-size:9px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
body.single .tg-related__body h3 { margin:0; font-size:14px; line-height:1.35; font-weight:600; letter-spacing:-.015em; }
body.single .tg-related__body h3 a { color:#000; text-decoration:none; }
body.single .tg-related__read { display:inline-flex; gap:5px; align-items:center; margin-top:8px; color:#555; font-size:10px; text-decoration:none; }
body.single .tg-related__read span { transition:transform .2s ease; }
body.single .tg-related__read:hover span { transform:translate(2px,-2px); }
body.single .tg-related__empty { color:#666; font-size:13px; }
body.single .tg-share { margin-top:52px; padding:22px 0; border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; display:flex; align-items:center; justify-content:space-between; gap:24px; }
body.single .tg-share__copy { display:flex; flex-direction:column; gap:4px; }
body.single .tg-share__eyebrow { color:#777; font-size:9px; font-weight:600; letter-spacing:.15em; }
body.single .tg-share__copy strong { color:#000; font-size:18px; line-height:1.2; }
body.single .tg-share__buttons { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
body.single .tg-share__button { height:42px; display:inline-flex; align-items:center; gap:8px; padding:0 13px; border:1px solid #d9d9d9; border-radius:999px; background:#fff; color:#111; font-size:11px; font-weight:500; line-height:1; text-decoration:none; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
body.single .tg-share__button svg { width:15px; height:15px; fill:currentColor; }
body.single .tg-share__button:hover { transform:translateY(-2px); border-color:#aaa; box-shadow:0 8px 22px rgba(0,0,0,.08); }
@media (max-width: 900px) {
  body.single .tg-single-layout { display:block; }
  body.single .tg-single-sidebar { margin-top:56px; }
  body.single .tg-related { position:static; }
  body.single .tg-related__list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  body.single .tg-related__item, body.single .tg-related__item:first-child { grid-template-columns:100px minmax(0,1fr); border-top:1px solid #ececec; padding:16px 0; }
}
@media (max-width: 600px) {
  body.single .tg-single-shell { padding-left:20px; padding-right:20px; }
  body.single .tg-single-layout { margin-top:18px; }
  body.single .tg-share { align-items:flex-start; flex-direction:column; }
  body.single .tg-share__buttons { justify-content:flex-start; }
  body.single .tg-share__button span { display:none; }
  body.single .tg-share__button { width:42px; padding:0; justify-content:center; }
  body.single .tg-related__list { grid-template-columns:1fr; }
}


/* v1.4.40 — Align single-post canvas to the exact header/footer content margins + sidebar search. */
body.single .tg-single-shell { padding-left:0; padding-right:0; }
body.single .tg-related-search { margin-top:28px; padding-top:22px; border-top:1px solid #d8d8d8; }
body.single .tg-related-search__label { display:block; margin-bottom:10px; color:#000; font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
body.single .tg-related-search form { position:relative; margin:0; }
body.single .tg-related-search input[type=search] { width:100%; height:46px; margin:0; padding:0 48px 0 14px; border:1px solid #d5d5d5; border-radius:8px; outline:0; background:#fff; color:#111; font:inherit; font-size:13px; box-shadow:none; transition:border-color .2s ease,box-shadow .2s ease; }
body.single .tg-related-search input[type=search]:focus { border-color:#888; box-shadow:0 0 0 3px rgba(0,0,0,.05); }
body.single .tg-related-search button { position:absolute; top:0; right:0; width:46px; height:46px; display:grid; place-items:center; padding:0; border:0; background:transparent; color:#111; cursor:pointer; }
body.single .tg-related-search button svg { width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; }
@media (max-width:900px) { body.single .tg-single-shell > * { width:min(calc(100% - 40px), var(--px-max, 1180px)); } }
@media (max-width:620px) { body.single .tg-single-shell > * { width:min(calc(100% - 32px), var(--px-max, 1180px)); } body.single .tg-single-shell { padding-left:0; padding-right:0; } }

/* v1.4.41 — single-post share: icon-only Font Awesome treatment */
body.single .tg-share { justify-content:flex-start; gap:12px; }
body.single .tg-share__copy { display:none !important; }
body.single .tg-share__lead,
body.single .tg-share__button { width:42px; height:42px; padding:0; display:inline-flex; align-items:center; justify-content:center; flex:0 0 42px; border:1px solid #d9d9d9; border-radius:50%; background:#fff; color:#111; text-decoration:none; }
body.single .tg-share__lead { background:#111; border-color:#111; color:#fff; }
body.single .tg-share__lead i { font-size:15px; }
body.single .tg-share__buttons { justify-content:flex-start; gap:8px; }
body.single .tg-share__button { gap:0; font-size:16px; }
body.single .tg-share__button i { font-size:16px; line-height:1; }
body.single .tg-share__button span:not(.screen-reader-text) { display:none; }
body.single .tg-share__button:hover { transform:translateY(-2px); border-color:#999; box-shadow:0 8px 22px rgba(0,0,0,.08); }

/* v1.4.42 — single-post share: unframed lead icon + branded wide social pills */
body.single .tg-share__lead {
  width:auto;
  height:auto;
  min-width:0;
  flex:0 0 auto;
  padding:0 5px 0 0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#111;
  box-shadow:none;
}
body.single .tg-share__lead i { font-size:22px; line-height:1; }
body.single .tg-share__button {
  width:52px;
  height:36px;
  flex:0 0 52px;
  padding:0 14px;
  border-radius:999px;
  background:#fff;
}
body.single .tg-share__button i { font-size:17px; }
body.single .tg-share__button--facebook { color:#1877F2; border-color:rgba(24,119,242,.32); }
body.single .tg-share__button--x { color:#000; border-color:rgba(0,0,0,.24); }
body.single .tg-share__button--linkedin { color:#0A66C2; border-color:rgba(10,102,194,.32); }
body.single .tg-share__button--whatsapp { color:#25D366; border-color:rgba(37,211,102,.38); }
body.single .tg-share__button--facebook:hover { border-color:#1877F2; background:rgba(24,119,242,.055); }
body.single .tg-share__button--x:hover { border-color:#000; background:rgba(0,0,0,.04); }
body.single .tg-share__button--linkedin:hover { border-color:#0A66C2; background:rgba(10,102,194,.055); }
body.single .tg-share__button--whatsapp:hover { border-color:#25D366; background:rgba(37,211,102,.06); }


/* v1.4.45 — interactive per-post star rating with live vote counter. */
body.single .tg-single-rating { flex-wrap:wrap; }
body.single .tg-single-rating__stars { display:inline-flex; align-items:center; gap:3px; letter-spacing:0; }
body.single .tg-rating-star { appearance:none; -webkit-appearance:none; width:24px; height:28px; display:inline-grid; place-items:center; margin:0; padding:0; border:0; background:transparent; color:#d5d5d5; font-size:18px; line-height:1; cursor:pointer; transition:color .16s ease,transform .16s ease; }
body.single .tg-rating-star.is-active, body.single .tg-rating-star.is-preview { color:#f5b800; }
body.single .tg-rating-star:hover { transform:translateY(-1px) scale(1.06); }
body.single .tg-rating-star:focus-visible { outline:2px solid #111; outline-offset:2px; border-radius:3px; }
body.single .tg-single-rating.is-rated .tg-rating-star { cursor:default; }
body.single .tg-single-rating.is-rated .tg-rating-star:hover { transform:none; }
body.single .tg-single-rating__text { display:inline-flex; align-items:center; gap:7px; }
body.single .tg-single-rating__text strong { font-weight:500; }
body.single .tg-rating-dot { color:#9a9a9a; }
body.single .tg-rating-feedback { width:100%; min-height:14px; color:#666; font-size:11px; line-height:1.3; }


/* =========================================================
   v1.4.46 — FOOTER TYPOGRAPHY REFINEMENT
   Alex Brush for Stay Connected; contact copy 1px smaller and #777.
   Shared footer selectors make this apply to every footer context.
   ========================================================= */
.tg-footer-socials-label {
  font-family: "Alex Brush", cursive;
  font-weight: 400;
}
.tg-footer-connect .tg-footer-contact a {
  font-size: calc(var(--tg-fluid-copy-size) - 1px);
  color: #777;
}
.tg-footer-connect .tg-footer-contact a:hover {
  color: #777;
}


/* =========================================================
   v1.4.47 — FOOTER CONNECT LABEL + CONTACT ICON REFINEMENT
   Restore the prior contact text colour, scale contact icons with the
   1px-smaller copy, and present Stay Connected in Alex Brush.
   ========================================================= */
.tg-footer-socials-label {
  font-family: "Alex Brush", cursive;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  color: #fff;
}
.tg-footer-connect .tg-footer-contact a {
  font-size: calc(var(--tg-fluid-copy-size) - 1px);
  color: rgba(255,255,255,.82);
}
.tg-footer-connect .tg-footer-contact a:hover { color: #fff; }
.tg-footer-connect .tg-footer-contact .tg-icon-fa {
  width: 19px;
  height: 19px;
  font-size: 17px;
}
.tg-footer-connect .tg-footer-contact .tg-icon:not(.tg-icon-fa) {
  width: 19px;
  height: 19px;
  font-size: 14px;
  flex-basis: 17px;
}
@media (max-width: 480px) {
  .tg-footer-socials-label { font-size: 15px; }
}


/* =========================================================
   v1.4.48 — FOOTER STAY CONNECTED NORMALIZATION
   Match the standard footer typeface, restore uppercase copy,
   and use the same soft-grey tone as the footer divider.
   ========================================================= */
.tg-footer-socials-label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
@media (max-width: 480px) {
  .tg-footer-socials-label { font-size: 11px; }
}


/* =========================================================
   v1.4.49 — FOOTER STAY CONNECTED EMPHASIS
   Match LET'S WORK TOGETHER size while using extra-bold weight.
   ========================================================= */
.tg-footer-socials-label {
  font-size: var(--tg-fluid-copy-size);
  font-weight: 800;
  line-height: 1.35;
}
@media (max-width: 480px) {
  .tg-footer-socials-label { font-size: var(--tg-fluid-copy-size); }
}

/* =========================================================
   v1.4.50 — FOOTER CONTACT + BACK TO TOP PROPORTION REFINEMENT
   Contact icons scale directly with the reduced contact copy.
   Back to Top matches the legal-link type size, with its chevron
   reduced proportionally for a balanced footer utility row.
   ========================================================= */
.tg-footer-connect .tg-footer-contact a {
  align-items: center;
}
.tg-footer-connect .tg-footer-contact .tg-icon-fa,
.tg-footer-connect .tg-footer-contact .tg-icon:not(.tg-icon-fa) {
  width: 1em;
  height: 1em;
  min-width: 1em;
  flex: 0 0 1em;
  font-size: 1em;
  line-height: 1;
}
.tg-footer-backtop-label {
  font-size: 13px;
}
.tg-footer-backtop-mark {
  width: 23.7px;
  height: 14px;
}

/* =========================================================
   v1.4.51 — MOBILE FOOTER CONTACTS IN ONE ROW
   Keep the existing contact typography/icon sizes unchanged; only restore a
   single horizontal row on mobile for location, email and WhatsApp.
   ========================================================= */
@media (max-width: 560px) {
  .tg-footer-connect .tg-footer-contact {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(7px, 2.2vw, 12px);
    width: 100%;
  }
  .tg-footer-connect .tg-footer-contact a {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
}

/* =========================================================
   v1.4.53 — FOOTER SOCIAL BLOCK VERTICAL REFINEMENT
   Lower STAY CONNECTED + social icons slightly so the social row sits
   visually closer to the location / email / WhatsApp contact row.
   Sizes and horizontal spacing remain unchanged.
   ========================================================= */
.tg-footer-connect .tg-footer-socials {
  position: relative;
  top: 8px;
}
\n\n/* v1.4.54 — refined single-post share panel */
body.single .tg-share {
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:34px;
  padding:16px 18px;
  border:1px solid #e8e8e8;
  border-radius:14px;
  background:#fafafa;
  box-shadow:0 8px 24px rgba(0,0,0,.035);
}
body.single .tg-share__heading {
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
}
body.single .tg-share__lead {
  width:auto;
  height:auto;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  color:#111;
}
body.single .tg-share__lead i { font-size:18px; line-height:1; }
body.single .tg-share__title {
  display:inline-block;
  color:#111;
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
  white-space:nowrap;
}
body.single .tg-share__buttons {
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
}
body.single .tg-share__button {
  position:relative;
  width:46px;
  height:34px;
  flex:0 0 46px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #e2e2e2;
  border-radius:9px;
  background:#fff;
  color:#111;
  box-shadow:0 2px 8px rgba(0,0,0,.035);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}
body.single .tg-share__button i { font-size:16px; line-height:1; }
body.single .tg-share__button--facebook { color:#1877F2; border-color:#e2e2e2; }
body.single .tg-share__button--x { color:#111; border-color:#e2e2e2; }
body.single .tg-share__button--linkedin { color:#0A66C2; border-color:#e2e2e2; }
body.single .tg-share__button--whatsapp { color:#25D366; border-color:#e2e2e2; }
body.single .tg-share__button:hover {
  transform:translateY(-2px);
  border-color:#cfcfcf;
  background:#fff;
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
@media (max-width:600px) {
  body.single .tg-share { gap:12px; padding:14px; align-items:center; }
  body.single .tg-share__heading { gap:7px; }
  body.single .tg-share__title { font-size:11px; }
  body.single .tg-share__button { width:42px; height:32px; flex-basis:42px; }
}


/* v1.4.55 — rating metadata spacing + icon separator. */
body.single .tg-single-rating { column-gap: 10px; row-gap: 6px; }
body.single .tg-rating-feedback {
  width:auto; min-height:0; display:none; align-items:center; gap:10px;
  margin:0; color:#666; font-size:11px; line-height:1.3;
}
body.single .tg-rating-feedback.is-visible { display:inline-flex; }
body.single .tg-rating-feedback__separator {
  flex:0 0 auto; font-size:4px; color:#9a9a9a; line-height:1;
}

/* v1.4.56 — give the rating separator real breathing room on both sides. */
body.single .tg-rating-feedback {
  gap: 0;
  margin-left: 2px;
}
body.single .tg-rating-feedback__separator {
  margin-left: 10px;
  margin-right: 10px;
}

/* v1.4.57 — keep rating metadata and saved-rating feedback perfectly aligned. */
body.single .tg-single-rating,
body.single .tg-single-rating__text,
body.single .tg-rating-feedback,
body.single .tg-rating-feedback.is-visible {
  align-items: center;
}
body.single .tg-single-rating__text,
body.single .tg-rating-feedback {
  line-height: 1.3;
}
body.single .tg-rating-feedback__separator {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background: currentColor;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  transform: none;
}
body.single .tg-rating-feedback__separator::before { display:none; }
body.single [data-rating-feedback-text] { display:inline-flex; align-items:center; line-height:1.3; }
\n\n/* v1.4.58 — definitive rating-row alignment fix.\n   All metadata now shares one flex formatting context and identical font metrics. */\nbody.single .tg-single-rating {\n  display:flex;\n  align-items:center;\n}\nbody.single .tg-single-rating__text {\n  display:inline-flex;\n  align-items:center;\n  flex-wrap:wrap;\n  column-gap:7px;\n  row-gap:4px;\n  font-size:13px;\n  line-height:1.3;\n}\nbody.single .tg-single-rating__text > strong,\nbody.single .tg-single-rating__text > span,\nbody.single [data-rating-feedback-text] {\n  line-height:1.3;\n}\nbody.single .tg-rating-feedback {\n  display:none;\n  align-items:center;\n  width:auto;\n  min-height:0;\n  margin:0;\n  gap:7px;\n  color:#666;\n  font-size:inherit;\n  line-height:inherit;\n}\nbody.single .tg-rating-feedback.is-visible {\n  display:inline-flex;\n  align-items:center;\n}\nbody.single .tg-rating-feedback__separator {\n  display:block;\n  flex:0 0 5px;\n  width:5px;\n  height:5px;\n  margin:0 3px;\n  border-radius:50%;\n  background:#9a9a9a;\n  font-size:0;\n  line-height:0;\n}\nbody.single [data-rating-feedback-text] {\n  display:block;\n  font-size:inherit;\n}\n
/* v1.4.59 — align the opening single-post paragraph with the sidebar start. */
@media (min-width: 901px) {
  body.single .tg-single-main > .wp-block-post-content {
    margin-top: 20px;
  }
  body.single .tg-single-main > .wp-block-post-content > :first-child {
    margin-block-start: 0;
  }
}

/* v1.4.60 — single-post content/sidebar top alignment.
   Remove both the legacy article offset and WordPress block-flow margin so the
   opening article content begins on the same horizontal line as the sidebar. */
@media (min-width: 901px) {
  body.single .tg-single-main > .wp-block-post-content {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }
  body.single .tg-single-main > .wp-block-post-content > :first-child {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }
  body.single .tg-single-main > .wp-block-post-featured-image:empty {
    display: none !important;
    margin: 0 !important;
  }
}

/* v1.4.43 — rounded hero CTA only. */
.tg-hero__cta {
  border-radius: 999px;
}




/* FINAL — TRUE first-screen hero.
   Header is fixed and overlays the hero, therefore DO NOT subtract header height. */
body.home .px-hero {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  overflow: hidden;
}
@supports (height: 100dvh) {
  body.home .px-hero {
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
  }
}
body.home .px-hero-content {
  min-height: 100%;
  box-sizing: border-box;
}

/* The section after hero starts only after the full first viewport. */
body.home .px-hero + section {
  margin-top: 0;
}




/* FINAL — remove hero bottom-right text / number / strip */
.tg-hero__index,
.tg-hero__index::before,
.tg-hero__index::after,
.tg-hero__index span {
  display: none;
}


/* FINAL — hero: no eyebrow, one headline, one visual line.
   Last word = transparent/white outline; penultimate = green; all earlier words = white. */
.tg-hero__kicker { display: none; }
.tg-hero__title--single {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: .22em;
  width: max-content;
  max-width: none;
}
.tg-hero__title--single .tg-hero__headline-white { color: #fff; }
.tg-hero__title--single .tg-hero__accent { color: var(--tg-accent, #c8e84a); }
.tg-hero__title--single .tg-hero__outline {
  color: transparent;
  -webkit-text-stroke: 1.5px #fff;
  text-stroke: 1.5px #fff;
}


/* FINAL — hero headline 50% smaller + content positioned toward bottom */
body.home .tg-hero__inner {
  min-height: 100%;
  display: flex;
  align-items: flex-end;
  box-sizing: border-box;
  padding-bottom: clamp(58px, 8vh, 92px);
}

body.home .tg-hero__copy {
  margin-top: auto;
  margin-bottom: 0;
}

/* Keep the single-line headline behavior from the previous revision */
body.home .tg-hero__title--single {
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (max-width: 620px) {
  body.home .tg-hero__inner {
    align-items: flex-end;
    padding-bottom: clamp(42px, 7vh, 64px);
  }
}


/* REPAIR — explicit hero headline size; never inherit a tiny percentage */
body.home .tg-hero__title--single {
  font-size: clamp(30px, 3.15vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
@media (max-width: 620px) {
  body.home .tg-hero__title--single {
    font-size: clamp(25px, 7.2vw, 34px);
  }
}


/* FINAL — mobile hero headline must remain exactly one line */
@media (max-width: 620px) {
  body.home .tg-hero__title--single {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: max-content;
    max-width: none;
    font-size: clamp(15px, 4.35vw, 22px);
    line-height: 1.05;
    gap: .20em;
  }
  body.home .tg-hero__title--single > span {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}


/* FINAL — ideal hero content rhythm for current headline size */
body.home .tg-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

body.home .tg-hero__title--single {
  margin: 0;
}

body.home .tg-hero__subtitle {
  margin-top: 18px;
  margin-bottom: 0;
}

body.home .tg-hero__cta {
  margin-top: 24px;
  margin-bottom: 0;
}

@media (max-width: 620px) {
  body.home .tg-hero__subtitle {
    margin-top: 14px;
  }

  body.home .tg-hero__cta {
    margin-top: 20px;
  }
}


/* v1.4.62 — site title frame derived from hero CTA geometry */
.px-site-header .px-brand {
  margin-left: calc(var(--px-page-gutter, 24px) * -1);
}
.px-site-header .px-brand-link {
  position: relative;
  z-index: 0;
  padding: 8px 17px 9px var(--px-page-gutter, 24px);
}
.px-site-header .px-brand-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: 0 999px 999px 0;
  background: rgba(55, 117, 239, .38);
  border: 1px solid rgba(115, 167, 255, .72);
  backdrop-filter: blur(5px);
}

/* Editorial kinetic typography */
body.home .tg-hero--editorial-motion { position: relative; isolation: isolate; }
body.home .tg-hero--editorial-motion .tg-hero__shade { background: rgba(0,0,0,.22); }
body.home .tg-editorial-motion {
  position:absolute; z-index:2; inset:80px 0 0; overflow:hidden; pointer-events:none;
}
body.home .tg-editorial-beat { position:absolute; inset:0; opacity:0; visibility:hidden; }
body.home .tg-editorial-beat.is-active { opacity:1; visibility:visible; }
body.home .tg-editorial-line, body.home .tg-editorial-brand {
  position:absolute; color:#fff; text-transform:uppercase; white-space:nowrap;
  opacity:0; will-change:transform,opacity,clip-path;
}
body.home .tg-editorial-line {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  line-height:.88; letter-spacing:-.045em;
}
body.home .tg-editorial-line--a { font-size:clamp(40px,6.6vw,106px); font-weight:700; }
body.home .tg-editorial-line--b { font-size:clamp(25px,4.1vw,66px); font-weight:400; }

/* Seven intentionally different editorial compositions */
body.home .tg-editorial-beat--1 .tg-editorial-line--a { left:5vw; top:24%; }
body.home .tg-editorial-beat--1 .tg-editorial-line--b { right:6vw; top:52%; text-align:right; font-weight:700; }
body.home .tg-editorial-beat--2 .tg-editorial-line--a { right:5vw; top:22%; text-align:right; font-size:clamp(28px,4.4vw,72px); font-weight:400; }
body.home .tg-editorial-beat--2 .tg-editorial-line--b { left:6vw; top:48%; font-size:clamp(48px,7.7vw,124px); font-weight:700; }
body.home .tg-editorial-beat--3 .tg-editorial-line--a { left:7vw; top:30%; font-size:clamp(54px,8.4vw,136px); }
body.home .tg-editorial-beat--3 .tg-editorial-line--b { left:39vw; top:55%; font-size:clamp(20px,3vw,48px); }
body.home .tg-editorial-beat--4 .tg-editorial-line--a { right:7vw; top:27%; text-align:right; }
body.home .tg-editorial-beat--4 .tg-editorial-line--b { right:12vw; top:54%; text-align:right; font-size:clamp(34px,5.3vw,86px); font-weight:700; }
body.home .tg-editorial-beat--5 .tg-editorial-line--a { left:6vw; top:45%; font-size:clamp(26px,4vw,64px); font-weight:400; }
body.home .tg-editorial-beat--5 .tg-editorial-line--b { left:28vw; top:30%; font-size:clamp(52px,8.2vw,132px); font-weight:700; }
body.home .tg-editorial-beat--6 .tg-editorial-line--a { right:7vw; top:29%; text-align:right; font-size:clamp(48px,7.5vw,120px); }
body.home .tg-editorial-beat--6 .tg-editorial-line--b { left:7vw; top:58%; font-weight:400; }
body.home .tg-editorial-beat--7 .tg-editorial-line--a { left:8vw; top:29%; font-weight:400; }
body.home .tg-editorial-beat--7 .tg-editorial-line--b { right:6vw; top:43%; text-align:right; font-size:clamp(58px,9vw,146px); font-weight:700; }

/* Reveal directions vary beat-to-beat instead of using one generic slide. */
body.home .tg-editorial-line--a { transform:translate3d(-5vw,0,0); clip-path:inset(0 100% 0 0); }
body.home .tg-editorial-line--b { transform:translate3d(5vw,0,0); clip-path:inset(0 0 0 100%); }
body.home .tg-editorial-beat:nth-child(even) .tg-editorial-line--a { transform:translate3d(0,-42px,0); clip-path:inset(100% 0 0 0); }
body.home .tg-editorial-beat:nth-child(even) .tg-editorial-line--b { transform:translate3d(0,42px,0); clip-path:inset(0 0 100% 0); }
body.home .tg-editorial-beat.is-enter .tg-editorial-line {
  opacity:1; transform:translate3d(0,0,0); clip-path:inset(0);
  transition:transform .68s cubic-bezier(.16,.84,.22,1),clip-path .68s cubic-bezier(.16,.84,.22,1),opacity .2s linear;
}
body.home .tg-editorial-beat.is-enter .tg-editorial-line--b { transition-delay:.16s; }
body.home .tg-editorial-beat.is-exit .tg-editorial-line { opacity:0; transition:opacity .3s ease,transform .38s ease; }
body.home .tg-editorial-beat.is-exit .tg-editorial-line--a { transform:translate3d(3vw,0,0); }
body.home .tg-editorial-beat.is-exit .tg-editorial-line--b { transform:translate3d(-3vw,0,0); }

/* Only closing TEMAGUE uses site-title typography. */
body.home .tg-editorial-beat--brand .tg-editorial-brand {
  left:50%; top:47%; font-family:"Syne",sans-serif; font-size:clamp(62px,12vw,190px);
  font-weight:800; line-height:.78; letter-spacing:-.105em;
  transform:translate(-50%,-50%) scale(.88); clip-path:inset(0 50%);
}
body.home .tg-editorial-beat--brand.is-enter .tg-editorial-brand {
  opacity:1; transform:translate(-50%,-50%) scale(1); clip-path:inset(0);
  transition:transform .78s cubic-bezier(.16,.84,.22,1),clip-path .78s cubic-bezier(.16,.84,.22,1),opacity .25s linear;
}
body.home .tg-editorial-beat--brand.is-exit .tg-editorial-brand {
  opacity:0; transform:translate(-50%,-50%) scale(1.04); transition:opacity .35s ease,transform .35s ease;
}

/* Preserve old vertical CTA placement; horizontal position is true center. */
body.home .tg-hero--editorial-motion > .tg-hero__cta--true-center {
  position:absolute; z-index:4; left:50%; bottom:clamp(58px,8vh,92px);
  margin:0; transform:translateX(-50%); white-space:nowrap;
}
body.home .tg-hero--editorial-motion > .tg-hero__cta--true-center:hover,
body.home .tg-hero--editorial-motion > .tg-hero__cta--true-center:focus-visible { transform:translateX(-50%); }

/* Mobile uses a protected inner safe zone and independent positions. */
@media (max-width:620px) {
  .px-site-header .px-brand-link { padding-top:7px; padding-bottom:8px; padding-right:14px; }
  body.home .tg-editorial-motion { inset:68px 0 0; }
  body.home .tg-editorial-line {
    white-space:normal; width:max-content; max-width:82vw; overflow-wrap:normal; word-break:normal;
  }
  body.home .tg-editorial-line--a { font-size:clamp(29px,9.8vw,47px); }
  body.home .tg-editorial-line--b { font-size:clamp(18px,6vw,29px); }

  body.home .tg-editorial-beat--1 .tg-editorial-line--a { left:7vw; top:25%; }
  body.home .tg-editorial-beat--1 .tg-editorial-line--b { right:7vw; top:52%; }
  body.home .tg-editorial-beat--2 .tg-editorial-line--a { right:7vw; top:25%; font-size:clamp(23px,7.5vw,36px); }
  body.home .tg-editorial-beat--2 .tg-editorial-line--b { left:7vw; top:49%; font-size:clamp(34px,11vw,53px); }
  body.home .tg-editorial-beat--3 .tg-editorial-line--a { left:7vw; top:28%; font-size:clamp(36px,11.5vw,56px); }
  body.home .tg-editorial-beat--3 .tg-editorial-line--b { left:15vw; top:55%; font-size:clamp(17px,5.5vw,27px); }
  body.home .tg-editorial-beat--4 .tg-editorial-line--a { right:7vw; top:28%; }
  body.home .tg-editorial-beat--4 .tg-editorial-line--b { right:7vw; top:54%; font-size:clamp(27px,8.6vw,42px); }
  body.home .tg-editorial-beat--5 .tg-editorial-line--a { left:7vw; top:51%; font-size:clamp(21px,6.8vw,33px); }
  body.home .tg-editorial-beat--5 .tg-editorial-line--b { left:7vw; top:29%; font-size:clamp(35px,11.2vw,55px); }
  body.home .tg-editorial-beat--6 .tg-editorial-line--a { right:7vw; top:28%; font-size:clamp(34px,10.8vw,53px); }
  body.home .tg-editorial-beat--6 .tg-editorial-line--b { left:7vw; top:57%; }
  body.home .tg-editorial-beat--7 .tg-editorial-line--a { left:7vw; top:29%; }
  body.home .tg-editorial-beat--7 .tg-editorial-line--b { right:7vw; top:45%; font-size:clamp(38px,12vw,59px); }
  body.home .tg-editorial-beat--brand .tg-editorial-brand { font-size:clamp(50px,17vw,84px); max-width:88vw; }
  body.home .tg-hero--editorial-motion > .tg-hero__cta--true-center { bottom:clamp(42px,7vh,64px); }
}


/* v1.4.63 — closing TEMAGUE: responsive fit on desktop/tablet/mobile + broad black shadow */
body.home .tg-editorial-beat--brand {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-inline: clamp(22px, 5vw, 80px);
}
body.home .tg-editorial-beat--brand .tg-editorial-brand {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  font-size: clamp(42px, 10.8vw, 174px);
  line-height: .82;
  white-space: nowrap;
  text-align: center;
  transform: scale(.88);
  transform-origin: center center;
  text-shadow:
    0 0 clamp(24px, 4vw, 64px) rgba(0,0,0,.98),
    0 clamp(8px, 1.3vw, 20px) clamp(34px, 6vw, 92px) rgba(0,0,0,.88);
}
body.home .tg-editorial-beat--brand.is-enter .tg-editorial-brand {
  transform: scale(1);
}
body.home .tg-editorial-beat--brand.is-exit .tg-editorial-brand {
  transform: scale(1.035);
}
@media (max-width: 1024px) {
  body.home .tg-editorial-beat--brand {
    padding-inline: clamp(26px, 6vw, 62px);
  }
  body.home .tg-editorial-beat--brand .tg-editorial-brand {
    font-size: clamp(44px, 12vw, 104px);
  }
}
@media (max-width: 620px) {
  body.home .tg-editorial-beat--brand {
    padding-inline: clamp(20px, 7vw, 30px);
  }
  body.home .tg-editorial-beat--brand .tg-editorial-brand {
    font-size: clamp(36px, 12.4vw, 62px);
  }
}
@media (max-width: 390px) {
  body.home .tg-editorial-beat--brand {
    padding-inline: 18px;
  }
  body.home .tg-editorial-beat--brand .tg-editorial-brand {
    font-size: clamp(32px, 11.7vw, 46px);
  }
}


/* v1.4.65 — FINAL closing-brand viewport-fit audit.
   The word itself, not its containing block, owns the responsive width. */
body.home .tg-editorial-beat--brand {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0;
  overflow: visible;
}

body.home .tg-editorial-beat--brand .tg-editorial-brand {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.105em;
  white-space: nowrap;
  text-align: center;
  font-size: min(10.2vw, 174px);
  transform: scale(.88);
  transform-origin: 50% 50%;
  text-shadow:
    0 0 clamp(22px, 3.6vw, 58px) rgba(0,0,0,.98),
    0 clamp(7px, 1.2vw, 18px) clamp(30px, 5vw, 82px) rgba(0,0,0,.88);
}

body.home .tg-editorial-beat--brand.is-enter .tg-editorial-brand {
  transform: scale(1);
}

body.home .tg-editorial-beat--brand.is-exit .tg-editorial-brand {
  transform: scale(1.025);
}

/* Tablet: approximately 10% total breathing room. */
@media (max-width: 1024px) {
  body.home .tg-editorial-beat--brand .tg-editorial-brand {
    font-size: min(11.8vw, 100px);
  }
}

/* Phones: conservative width so the complete T–E remains visible. */
@media (max-width: 620px) {
  body.home .tg-editorial-beat--brand {
    padding-inline: 0;
  }
  body.home .tg-editorial-beat--brand .tg-editorial-brand {
    font-size: 11.6vw;
    max-width: none;
    text-shadow:
      0 0 28px rgba(0,0,0,.98),
      0 10px 42px rgba(0,0,0,.88);
  }
}

/* Narrow phones get a larger guaranteed side safety zone. */
@media (max-width: 420px) {
  body.home .tg-editorial-beat--brand .tg-editorial-brand {
    font-size: 10.9vw;
  }
}

@media (max-width: 360px) {
  body.home .tg-editorial-beat--brand .tg-editorial-brand {
    font-size: 10.4vw;
  }
}


/* v1.4.66 — Hero animation copy preserves capitalization entered in Homepage Settings. */
body.home .tg-hero-kinetic__text,
body.home .tg-hero-kinetic__brand,
body.home .tg-motion-word,
body.home .tg-motion-brand,
body.home .tg-editorial-line,
body.home .tg-editorial-brand {
  text-transform: none;
}


/* v1.4.68 — final hero copy case audit */
body.home .tg-editorial-beat.is-active .tg-editorial-line,
body.home .tg-editorial-beat.is-active .tg-editorial-brand {
  text-transform: none;
}


/* v1.4.69 — HERO TYPOGRAPHY GLYPH-CLIPPING FULL AUDIT
   Preserve descenders (g/y/p/q/j) throughout entrance, hold and exit animations. */
body.home .tg-editorial-stage,
body.home .tg-editorial-beat,
body.home .tg-editorial-copy,
body.home .tg-editorial-line-wrap {
  overflow: visible;
}

body.home .tg-editorial-line {
  display: block;
  box-sizing: border-box;
  line-height: 1.02;
  padding-top: .03em;
  padding-bottom: .16em;
  margin-bottom: -.08em;
  text-transform: none;
  overflow: visible;
}

body.home .tg-editorial-line::before,
body.home .tg-editorial-line::after {
  overflow: visible;
}

/* Keep the animation masks roomy enough to reveal the full glyph box. */
body.home .tg-editorial-mask,
body.home .tg-editorial-line-mask {
  overflow: hidden;
  padding-top: .08em;
  padding-bottom: .22em;
  margin-top: -.08em;
  margin-bottom: -.22em;
}

/* Closing brand also gets a safe glyph box without changing its responsive width logic. */
body.home .tg-editorial-beat--brand .tg-editorial-brand {
  line-height: .94;
  padding-top: .04em;
  padding-bottom: .12em;
  box-sizing: border-box;
}


/* v1.4.70 — frame reaches screen edge; site-title text remains on the shared left gutter */
.px-site-header .px-brand {
  margin-left: calc(var(--px-page-gutter, 24px) * -1);
}

.px-site-header .px-brand-link {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  margin-left: 0;
  padding-left: var(--px-page-gutter, 24px);
}

.px-site-header .px-brand-link::before {
  left: 0;
  border-radius: 0 999px 999px 0;
}


/* v1.4.71 — audited site-title geometry.
   Brand/text stays in normal header flow. Only the visual frame escapes to viewport edge. */
.px-site-header .px-brand {
  margin-left: 0;
}

.px-site-header .px-brand-link {
  position: relative;
  z-index: 0;
  margin: 0;
  padding-left: 0;
}

.px-site-header .px-brand-link::before {
  left: calc(var(--px-page-gutter, 24px) * -1);
  right: 0;
  width: auto;
  border-radius: 0 999px 999px 0;
}

/* Match the header's responsive gutter values used by this theme. */
@media (max-width: 620px) {
  .px-site-header .px-brand-link::before {
    left: calc(var(--px-page-gutter, 18px) * -1);
  }
}


/* v1.4.75 — premium hero CTA refinement; existing center/bottom positioning is untouched. */
body.home .tg-hero__cta {
  font-family: "Zalando Sans Expanded", sans-serif;
  font-weight: 600;
  letter-spacing: .015em;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.035)),
    rgba(8,10,12,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 10px 28px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.home .tg-hero__cta .tg-hero__cta-arrow {
  width: 1.08em;
  height: 1.08em;
  stroke-width: 1.9;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.32));
}

body.home .tg-hero__cta:hover,
body.home .tg-hero__cta:focus-visible {
  border-color: rgba(255,255,255,.72);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.065)),
    rgba(8,10,12,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 12px 34px rgba(0,0,0,.42);
}


/* v1.4.76 — higher-contrast premium Hero CTA; positioning untouched. */
body.home .tg-hero__cta {
  color: #000;
  font-family: "Zalando Sans Expanded", sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #d8ff66 0%, #b9ef38 100%);
  border: 1px solid rgba(231,255,161,.96);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 0 0 1px rgba(0,0,0,.14),
    0 10px 30px rgba(0,0,0,.42),
    0 0 24px rgba(200,232,74,.18);
  text-shadow: none;
}

body.home .tg-hero__cta .tg-hero__cta-arrow {
  color: #000;
  stroke: #000;
  stroke-width: 2.15;
  filter: none;
}

body.home .tg-hero__cta:hover,
body.home .tg-hero__cta:focus-visible {
  color: #000;
  background: linear-gradient(180deg, #e4ff88 0%, #c8f34f 100%);
  border-color: rgba(245,255,211,1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 0 0 1px rgba(0,0,0,.16),
    0 13px 34px rgba(0,0,0,.48),
    0 0 30px rgba(200,232,74,.26);
}


/* v1.4.78 — HERO KINETIC TEXT EDGE-CLIPPING AUDIT
   Protect wide/italic/anti-aliased glyph edges on both left and right without moving choreography. */
body.home .tg-editorial-line {
  box-sizing: border-box;
  padding-left: .08em;
  padding-right: .12em;
  margin-left: -.08em;
  margin-right: -.12em;
  overflow: visible;
}

body.home .tg-editorial-mask,
body.home .tg-editorial-line-mask {
  box-sizing: border-box;
  padding-left: .14em;
  padding-right: .18em;
  margin-left: -.14em;
  margin-right: -.18em;
}

/* Right-anchored lines need extra reveal room at the physical text edge. */
body.home .tg-editorial-line[style*="right"],
body.home .tg-editorial-beat .tg-editorial-line--a,
body.home .tg-editorial-beat .tg-editorial-line--b {
  max-width: calc(100vw - 4vw);
}


/* v1.4.79 — single post + single page H1 titles: 25% smaller than current theme size. */
body.single-post .wp-block-post-title,
body.page:not(.home) .wp-block-post-title {
  font-size: 75%;
}


/* v1.4.80 — DEFINITIVE single post/page title sizing.
   Explicit responsive H1 size; does not rely on percentage inheritance. */
body.single-post .tg-single-heading .wp-block-post-title,
body.single-post h1.wp-block-post-title,
body.page:not(.home) h1.wp-block-post-title {
  font-size: clamp(30px, 4.5vw, 54px);
  line-height: 1.08;
}

/* Page date must stay hidden even when WordPress has a Site Editor template
   saved in the database that overrides templates/page.html. */
body.page:not(.home) .wp-block-post-date {
  display: none;
}

@media (max-width: 620px) {
  body.single-post .tg-single-heading .wp-block-post-title,
  body.single-post h1.wp-block-post-title,
  body.page:not(.home) h1.wp-block-post-title {
    font-size: clamp(27px, 9vw, 38px);
  }
}


/* v1.4.81 — scene 6: stand apart directly below Built to, same right edge. */
body.home .tg-editorial-beat--6 .tg-editorial-line--a {
  right: 7vw;
  top: 29%;
  text-align: right;
}
body.home .tg-editorial-beat--6 .tg-editorial-line--b {
  right: 7vw;
  left: auto;
  top: calc(29% + clamp(58px, 8.4vw, 134px));
  text-align: right;
}
@media (max-width: 620px) {
  body.home .tg-editorial-beat--6 .tg-editorial-line--a {
    right: 7vw;
    top: 28%;
    text-align: right;
  }
  body.home .tg-editorial-beat--6 .tg-editorial-line--b {
    right: 7vw;
    left: auto;
    top: calc(28% + clamp(48px, 13vw, 68px));
    text-align: right;
  }
}


/* v1.4.82 — scene 2: One design / one business centered as a two-line composition. */
body.home .tg-editorial-beat--2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

body.home .tg-editorial-beat--2 .tg-editorial-line--a,
body.home .tg-editorial-beat--2 .tg-editorial-line--b {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  width: auto;
  max-width: 92vw;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

body.home .tg-editorial-beat--2 .tg-editorial-line--a {
  color: #e3262e;
}

body.home .tg-editorial-beat--2 .tg-editorial-line--b {
  color: #fff;
}


/* v1.4.83 — scene 1: Website design / without the ordinary, left aligned. */
body.home .tg-editorial-beat--1 .tg-editorial-line--a,
body.home .tg-editorial-beat--1 .tg-editorial-line--b {
  left: 7vw;
  right: auto;
  text-align: left;
}

@media (max-width: 620px) {
  body.home .tg-editorial-beat--1 .tg-editorial-line--a,
  body.home .tg-editorial-beat--1 .tg-editorial-line--b {
    left: 7vw;
    right: auto;
    text-align: left;
  }
}


/* v1.4.88 — scene 2: both lines extra bold. */
body.home .tg-editorial-beat--2 .tg-editorial-line--a,
body.home .tg-editorial-beat--2 .tg-editorial-line--b {
  font-weight: 900;
}


/* v1.4.88 — premium hero CTA launch icon; CTA positioning untouched. */
body.home .tg-hero__cta .tg-hero__cta-arrow {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* v1.4.89 — section immediately below Hero: exact reference background #1F1F1F, full bleed. */
body.home .px-exclusive-manifesto {
  background-color: #1f1f1f;
  background-image: none;
}

body.home .px-exclusive-manifesto::before,
body.home .px-exclusive-manifesto::after {
  background-image: none;
}


/* v1.4.90 — section immediately after the #1F1F1F manifesto: full white surface. */
body.home .px-hero-quote-grid {
  background-color: #fff;
  background-image: none;
  color: #111;
}

body.home .px-hero-quote-grid h1,
body.home .px-hero-quote-grid h2,
body.home .px-hero-quote-grid h3,
body.home .px-hero-quote-grid h4,
body.home .px-hero-quote-grid p,
body.home .px-hero-quote-grid li,
body.home .px-hero-quote-grid span:not(.fa):not(.fas):not(.far):not(.fab) {
  color: #111;
}

body.home .px-hero-quote-grid a:not(.px-button) {
  color: #111;
}


/* v1.4.91 — audited white canvas for the complete section directly after the manifesto.
   Override the late canonical black homepage surface rule with later + more-specific selectors. */
html body.home main section.px-hero-quote-grid,
html body.home main .px-hero-quote-grid,
html body.home section.px-hero-quote-grid,
html body.home .px-hero-quote-grid {
  background-color: #fff;
  background-image: none;
  color: #111;
}

html body.home .px-hero-quote-grid::before,
html body.home .px-hero-quote-grid::after,
html body.home .px-hero-quote-grid-inner::before,
html body.home .px-hero-quote-grid-inner::after {
  background-color: transparent;
  background-image: none;
}

html body.home .px-hero-quote-grid-inner {
  background-color: #fff;
  background-image: none;
}

html body.home .px-hero-quote-grid h1,
html body.home .px-hero-quote-grid h2,
html body.home .px-hero-quote-grid h3,
html body.home .px-hero-quote-grid > p,
html body.home .px-hero-quote-grid-inner > p {
  color: #111;
}


/* v1.4.92 — ACTUAL front-page order audit:
   Hero -> One Design manifesto -> Available Designs -> Hero Quote Grid.
   Therefore Available Designs is the section directly below the #1F1F1F manifesto. */
html body.home main section.px-available-designs,
html body.home main .px-available-designs,
html body.home section.px-available-designs,
html body.home .px-available-designs {
  background-color: #fff;
  background-image: none;
  color: #111;
  border-color: rgba(0,0,0,.12);
}

html body.home .px-available-designs::before,
html body.home .px-available-designs::after {
  background-color: transparent;
  background-image: none;
}

html body.home .px-available-designs > div,
html body.home .px-available-designs .px-wrap,
html body.home .px-available-designs .px-section-head {
  background-color: transparent;
  background-image: none;
}

html body.home .px-available-designs h1,
html body.home .px-available-designs h2,
html body.home .px-available-designs h3,
html body.home .px-available-designs h4,
html body.home .px-available-designs p,
html body.home .px-available-designs li,
html body.home .px-available-designs .px-section-description {
  color: #111;
}

/* Keep muted copy readable on white. */
html body.home .px-available-designs [class*="meta"],
html body.home .px-available-designs [class*="eyebrow"],
html body.home .px-available-designs [class*="kicker"] {
  color: rgba(17,17,17,.66);
}


/* v1.4.93 — corrected full template-order audit.
   front-page.html is Hero -> One Design manifesto -> ABOUT.
   This is the true section immediately below the #1F1F1F manifesto. */
html body.home main section.px-section,
html body.home main .px-section,
html body.home section.px-section,
html body.home .px-section {
  background-color: #fff;
  background-image: none;
  color: #111;
  border-color: rgba(0,0,0,.12);
}

html body.home .px-section::before,
html body.home .px-section::after {
  background-color: transparent;
  background-image: none;
}

html body.home .px-section > div,
html body.home .px-section .px-wrap,
html body.home .px-section [class*="content"] {
  background-color: transparent;
}

html body.home .px-section h1,
html body.home .px-section h2,
html body.home .px-section h3,
html body.home .px-section h4,
html body.home .px-section p,
html body.home .px-section li,
html body.home .px-section .px-section-description,
html body.home .px-section .px-about-intro,
html body.home .px-section .px-about-temague-principle,
html body.home .px-section .px-about-temague-link {
  color: #111;
}

html body.home .px-section .px-about-temague-link {
  border-color: rgba(17,17,17,.42);
}

/* v1.9.79 — Customizer-driven homepage media and Hero slideshow. */
.tg-hero__media.is-slideshow .tg-hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms ease;
  will-change: opacity;
}
.tg-hero__media.is-slideshow .tg-hero__slide.is-active {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tg-hero__media.is-slideshow .tg-hero__slide {
    transition: none;
  }
}

.tg-ed-intro-grid.is-media-empty {
  grid-template-columns: minmax(0, 1fr);
}
.tg-ed-intro-grid.is-media-empty > div {
  max-width: 760px;
}

.tg-services-visual.has-custom-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tg-services-custom-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.tg-story-grid figure > img,
.tg-careers-grid--business figure > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.tg-showcase-cta-art.has-custom-image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.tg-showcase-cta-custom-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.tg-footer-brand > img {
  display: block;
  width: auto;
  max-width: min(280px, 100%);
  max-height: 64px;
  object-fit: contain;
  object-position: left center;
}