/*
 * Project atmosphere layer.
 *
 * The native Elementor structure stays unchanged. Every decorative surface is
 * a pointer-transparent pseudo-element, and motion is activated by the
 * project-only runtime through classes or custom properties.
 */

body.single-tpi_project.family-monograph {
  --project-accent: #365f70;
  --project-accent-rgb: 54, 95, 112;
  --project-secondary: #a56f49;
  --project-secondary-rgb: 165, 111, 73;
  --project-glow-opacity: .16;
  --project-pointer-x: 72%;
  --project-pointer-y: 24%;
  --project-sweep-angle: 108deg;
  --project-sweep-width: 32%;
  --project-cta-start: #294e5d;
  --project-cta-end: #1c2529;
  --project-effect-ease: cubic-bezier(.2, .72, .22, 1);
}

body.single-tpi_project.family-monograph.project-tone-daylight {
  --project-accent: #735437;
  --project-accent-rgb: 184, 132, 76;
  --project-secondary: #ba9a73;
  --project-secondary-rgb: 186, 154, 115;
  --project-glow-opacity: .19;
  --project-pointer-x: 78%;
  --project-pointer-y: 20%;
  --project-sweep-angle: 112deg;
  --project-sweep-width: 42%;
  --project-cta-start: #765438;
  --project-cta-end: #20292a;
}

body.single-tpi_project.family-monograph.project-tone-signal {
  --project-accent: #6c5400;
  --project-accent-rgb: 220, 176, 38;
  --project-secondary: #315fca;
  --project-secondary-rgb: 49, 95, 202;
  --project-glow-opacity: .2;
  --project-pointer-x: 68%;
  --project-pointer-y: 30%;
  --project-sweep-angle: 90deg;
  --project-sweep-width: 15%;
  --project-cta-start: #5f4b00;
  --project-cta-end: #142b5c;
}

body.single-tpi_project.family-monograph.project-tone-material {
  --project-accent: #365f70;
  --project-accent-rgb: 62, 111, 130;
  --project-secondary: #9b6745;
  --project-secondary-rgb: 155, 103, 69;
  --project-glow-opacity: .17;
  --project-pointer-x: 64%;
  --project-pointer-y: 24%;
  --project-sweep-angle: 122deg;
  --project-sweep-width: 27%;
  --project-cta-start: #315866;
  --project-cta-end: #252322;
}

html[data-theme="dark"] body.single-tpi_project.family-monograph.project-tone-daylight {
  --project-accent: #d8b58a;
  --project-accent-rgb: 216, 181, 138;
}

html[data-theme="dark"] body.single-tpi_project.family-monograph.project-tone-signal {
  --project-accent: #f2c94c;
  --project-accent-rgb: 242, 201, 76;
}

html[data-theme="dark"] body.single-tpi_project.family-monograph.project-tone-material {
  --project-accent: #8fc1d5;
  --project-accent-rgb: 143, 193, 213;
  --project-secondary: #c08a66;
  --project-secondary-rgb: 192, 138, 102;
}

/* Keep the shared header action AA-readable on dark project pages. */
html[data-theme="dark"] body.single-tpi_project.family-monograph .header-enquiry {
  background: #3159cf;
  color: #fff;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-monograph {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) :is(
  .case-header,
  .case-hero,
  .case-brief,
  .case-movements > article,
  .drawing-split,
  .proof-band,
  .route-cta
) {
  isolation: isolate;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) :is(
  .case-header,
  .case-brief,
  .case-movements > article,
  .drawing-split,
  .proof-band,
  .route-cta
) {
  overflow: clip;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) :is(
  .case-header,
  .case-brief,
  .case-movements > article,
  .drawing-split,
  .proof-band,
  .route-cta
) > :not(.chapter-rail) {
  position: relative;
  z-index: 1;
}

/* Project title and metadata */
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header::before,
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header::after,
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header h1::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header::before {
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(
      circle at var(--project-pointer-x) var(--project-pointer-y),
      rgba(var(--project-accent-rgb), var(--project-glow-opacity)) 0,
      rgba(var(--project-accent-rgb), calc(var(--project-glow-opacity) * .48)) 16%,
      transparent 42%
    ),
    linear-gradient(118deg, rgba(var(--project-accent-rgb), .045), transparent 46%);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header::after {
  z-index: 2;
  right: var(--arch-gutter);
  bottom: 0;
  left: var(--arch-gutter);
  height: 1px;
  background: linear-gradient(90deg, var(--project-accent), rgba(var(--project-accent-rgb), .12), transparent 82%);
  transform: scaleX(.12);
  transform-origin: left center;
  transition: transform .82s var(--project-effect-ease);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header.is-project-effect-active::after {
  transform: scaleX(1);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header h1 {
  position: relative;
  text-shadow: 0 0 44px rgba(var(--project-accent-rgb), .09);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header h1::after {
  right: -.2ch;
  bottom: -.16em;
  width: clamp(46px, 6vw, 92px);
  height: 3px;
  background: var(--project-accent);
  box-shadow: 0 0 24px rgba(var(--project-accent-rgb), .42);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .78s var(--project-effect-ease) .08s;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header.is-project-effect-active h1::after {
  transform: scaleX(1);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header :is(dl, .tpi-native-tag-dl) > div {
  border-top-color: rgba(var(--project-accent-rgb), .32);
}

/* Native Elementor image accents fill the editorial negative space without
 * turning the project pages into a second gallery. They stay selectable in
 * the editor and become pointer-transparent only on the public page. */
body.single-tpi_project.family-monograph .project-visual {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(var(--project-accent-rgb), .3);
  background: rgba(8, 10, 12, .14);
  box-shadow: 0 24px 64px rgba(7, 10, 12, .16), 0 0 30px rgba(var(--project-accent-rgb), .08);
}

body.single-tpi_project.family-monograph .project-visual > .elementor-widget-container {
  height: 100%;
}

body.single-tpi_project.family-monograph .project-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.035);
  transition: transform .92s var(--project-effect-ease), filter .42s ease;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .project-visual {
  pointer-events: none;
}

body.single-tpi_project.family-monograph .case-header > .project-header-visual {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 0 0 auto;
  width: min(52%, 780px);
  margin: 0;
  border: 0;
  box-shadow: none;
}

body.single-tpi_project.family-monograph .project-header-visual::after,
body.single-tpi_project.family-monograph .project-cta-visual::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

body.single-tpi_project.family-monograph .project-header-visual::after {
  background:
    linear-gradient(90deg, var(--surface) 0%, var(--surface) 10%, transparent 72%),
    linear-gradient(180deg, transparent 52%, var(--surface) 108%);
}

body.single-tpi_project.family-monograph .project-header-visual img {
  opacity: .72;
  filter: saturate(.84) contrast(.96);
}

body.single-tpi_project.family-monograph .case-header > :is(div, dl):not(.chapter-rail):not(.project-header-visual) {
  z-index: 2;
}

body.single-tpi_project.family-monograph .case-header :is(dl, .tpi-native-tag-dl) {
  padding: 18px 22px;
  border: 1px solid rgba(var(--project-accent-rgb), .22);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 18px 54px rgba(7, 10, 12, .09);
  backdrop-filter: blur(14px);
}

body.single-tpi_project.family-monograph .proof-band > header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: start;
}

body.single-tpi_project.family-monograph .project-proof-visual {
  width: 100%;
  max-height: 240px;
  margin-top: clamp(26px, 3vw, 42px);
  aspect-ratio: 16 / 10;
}

body.single-tpi_project.family-monograph .project-proof-visual img {
  object-position: center;
  opacity: .78;
  filter: saturate(.74) contrast(1.02) brightness(.78);
}

body.single-tpi_project.family-monograph .case-header.is-project-effect-active .project-header-visual img,
body.single-tpi_project.family-monograph .proof-band.is-project-effect-active .project-proof-visual img,
body.single-tpi_project.family-monograph .route-cta.is-project-effect-active .project-cta-visual img {
  transform: scale(1);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) :is(
  .case-header .eyebrow,
  .case-movements span,
  .proof-band article span,
  .chapter-rail span
) {
  color: var(--project-accent);
}

/* Main project image */
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero {
  position: relative;
  box-shadow: inset 0 1px rgba(var(--project-accent-rgb), .28), inset 0 -1px rgba(var(--project-accent-rgb), .22);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero::before,
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero::before {
  z-index: 2;
  inset: 0;
  background:
    radial-gradient(circle at var(--project-pointer-x) var(--project-pointer-y), rgba(var(--project-accent-rgb), .18), transparent 34%),
    linear-gradient(180deg, transparent 56%, rgba(5, 8, 10, .28));
  opacity: .78;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero::after {
  z-index: 3;
  top: -8%;
  bottom: -8%;
  left: calc(-1 * var(--project-sweep-width));
  width: var(--project-sweep-width);
  background: linear-gradient(
    var(--project-sweep-angle),
    transparent 8%,
    rgba(255, 255, 255, .02) 28%,
    rgba(var(--project-accent-rgb), .3) 50%,
    rgba(255, 255, 255, .08) 61%,
    transparent 88%
  );
  opacity: 0;
  transform: translateX(-35%);
  mix-blend-mode: screen;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero.is-project-effect-active::after {
  animation: tpi-project-hero-sweep .85s var(--project-effect-ease) .06s both;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero img {
  transform-origin: 50% 50%;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero :is(figcaption, .tpi-native-tag-figcaption) {
  z-index: 5;
  border-left: 2px solid var(--project-accent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero > .chapter-rail {
  z-index: 6;
}

@keyframes tpi-project-hero-sweep {
  0% { opacity: 0; transform: translateX(-35%); }
  18% { opacity: .68; }
  72% { opacity: .32; }
  100% { opacity: 0; transform: translateX(520%); }
}

/* Brief and movement chapters */
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-brief::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 82%, rgba(var(--project-accent-rgb), .09), transparent 26%),
    linear-gradient(90deg, rgba(var(--project-accent-rgb), .06), transparent 26%);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-brief {
  border-block: 1px solid rgba(var(--project-accent-rgb), .16);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article {
  position: relative;
  background: var(--paper);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article::before,
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article::after,
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements h2::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article::before {
  z-index: 0;
  inset: 0;
  background: radial-gradient(circle at 82% 50%, rgba(var(--project-accent-rgb), .08), transparent 32%);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article:nth-child(even)::before {
  background: radial-gradient(circle at 18% 50%, rgba(var(--project-accent-rgb), .08), transparent 32%);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article::after {
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--project-accent), rgba(var(--project-accent-rgb), .18), transparent 74%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .82s var(--project-effect-ease) .04s;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article:nth-child(even)::after {
  background: linear-gradient(270deg, var(--project-accent), rgba(var(--project-accent-rgb), .18), transparent 74%);
  transform-origin: right center;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article.is-project-effect-active::after {
  transform: scaleX(1);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements article > div:not(.tpi-native-tag-figure) {
  background: linear-gradient(142deg, rgba(var(--project-accent-rgb), .055), transparent 44%);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements h2 {
  position: relative;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements h2::after {
  right: 0;
  bottom: -.28em;
  left: 0;
  width: 54px;
  height: 2px;
  background: var(--project-accent);
  box-shadow: 0 0 18px rgba(var(--project-accent-rgb), .28);
  transform: scaleX(.32);
  transform-origin: left center;
  transition: transform .7s var(--project-effect-ease) .2s;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article.is-project-effect-active h2::after {
  transform: scaleX(1);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements article > .tpi-native-tag-figure {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements article > .tpi-native-tag-figure::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(var(--project-accent-rgb), .14), transparent 34%, rgba(0, 0, 0, .06));
  opacity: .46;
  transition: opacity .45s ease;
}

@media (hover: hover) and (pointer: fine) {
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements article:hover > .tpi-native-tag-figure::after {
    opacity: .12;
  }
}

/* Material resolution */
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split::before,
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split::before {
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at var(--project-pointer-x) var(--project-pointer-y), rgba(var(--project-accent-rgb), .14), transparent 30%),
    radial-gradient(circle at 22% 82%, rgba(var(--project-secondary-rgb), .1), transparent 28%);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split::after {
  z-index: 3;
  inset: 18px;
  border: 1px solid rgba(var(--project-accent-rgb), .24);
  opacity: 0;
  transform: scale(.985);
  transition: opacity .72s ease, transform .82s var(--project-effect-ease);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split.is-project-effect-active::after {
  opacity: 1;
  transform: scale(1);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split > .tpi-native-tag-figure {
  box-shadow: 0 28px 70px rgba(var(--project-accent-rgb), .13);
}

/* Proof cards */
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band {
  background:
    radial-gradient(circle at 14% 18%, rgba(var(--project-accent-rgb), .2), transparent 28%),
    linear-gradient(126deg, #0c0e10, #121212 62%, #0a0b0c);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band > div {
  border-color: rgba(var(--project-accent-rgb), .34);
  background: rgba(255, 255, 255, .015);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band article {
  position: relative;
  border-color: rgba(var(--project-accent-rgb), .26);
  background: linear-gradient(142deg, rgba(var(--project-accent-rgb), .075), transparent 56%);
  transition: background-color .35s ease, border-color .35s ease;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band article::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--project-accent), transparent);
  box-shadow: 0 0 14px rgba(var(--project-accent-rgb), .32);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .72s var(--project-effect-ease);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band.is-project-effect-active article::after {
  transform: scaleX(1);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band.is-project-effect-active article:nth-child(2)::after { transition-delay: .08s; }
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band.is-project-effect-active article:nth-child(3)::after { transition-delay: .16s; }
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band.is-project-effect-active article:nth-child(4)::after { transition-delay: .24s; }

@media (hover: hover) and (pointer: fine) {
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band article:hover {
    border-color: rgba(var(--project-accent-rgb), .52);
    background-color: rgba(var(--project-accent-rgb), .065);
  }
}

/* Closing action */
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta {
  position: relative;
  background: linear-gradient(124deg, var(--project-cta-start), var(--project-cta-end));
  color: #fff;
}

body.single-tpi_project.family-monograph .route-cta > .project-cta-visual {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 0 0 auto;
  width: 48%;
  margin: 0;
  border: 0;
  box-shadow: none;
}

body.single-tpi_project.family-monograph .project-cta-visual::after {
  background:
    linear-gradient(90deg, var(--project-cta-start) 0%, rgba(0, 0, 0, .08) 52%, transparent 84%),
    linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .3));
}

body.single-tpi_project.family-monograph .project-cta-visual img {
  filter: saturate(.88) contrast(1.02) brightness(.76);
}

body.single-tpi_project.family-monograph .route-cta > :not(.chapter-rail):not(.project-cta-visual) {
  z-index: 2;
  max-width: 48%;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::before,
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(48vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  opacity: .16;
  transition: transform .82s var(--project-effect-ease), opacity .72s ease;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::before {
  top: -76%;
  right: -8%;
  background: radial-gradient(circle, rgba(var(--project-accent-rgb), .88), transparent 66%);
  transform: translate3d(9%, 12%, 0) scale(.78);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::after {
  bottom: -104%;
  left: 20%;
  background: radial-gradient(circle, rgba(var(--project-secondary-rgb), .72), transparent 67%);
  transform: translate3d(-8%, -6%, 0) scale(.72);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta.is-project-effect-active::before,
body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta.is-project-effect-active::after {
  opacity: .27;
  transform: translate3d(0, 0, 0) scale(1);
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta :is(.button, .elementor-button) {
  border-color: rgba(255, 255, 255, .88);
  background: #fff;
  color: #111;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
  transition: transform .28s ease, box-shadow .28s ease;
}

body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta :is(.button, .elementor-button):is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .24), 0 0 28px rgba(var(--project-accent-rgb), .26);
}

/* Page-specific texture */
body.single-tpi_project.family-monograph.project-tone-daylight:not(.elementor-editor-active) .case-header::before {
  background:
    radial-gradient(circle at var(--project-pointer-x) var(--project-pointer-y), rgba(var(--project-accent-rgb), .22), transparent 44%),
    linear-gradient(118deg, rgba(var(--project-secondary-rgb), .08), transparent 48%);
}

body.single-tpi_project.family-monograph.project-tone-daylight:not(.elementor-editor-active) .case-movements article > div:not(.tpi-native-tag-figure) {
  background: linear-gradient(145deg, rgba(var(--project-accent-rgb), .075), transparent 48%);
}

body.single-tpi_project.family-monograph.project-tone-signal:not(.elementor-editor-active) .case-header::before {
  background:
    radial-gradient(circle at var(--project-pointer-x) var(--project-pointer-y), rgba(var(--project-accent-rgb), .17), transparent 36%),
    repeating-linear-gradient(0deg, rgba(var(--project-accent-rgb), .055) 0 1px, transparent 1px 22px),
    linear-gradient(112deg, rgba(var(--project-secondary-rgb), .08), transparent 54%);
}

body.single-tpi_project.family-monograph.project-tone-signal:not(.elementor-editor-active) .case-hero::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 11.9%, rgba(var(--project-accent-rgb), .075) 12% 12.08%),
    linear-gradient(180deg, transparent 58%, rgba(6, 9, 14, .3));
}

body.single-tpi_project.family-monograph.project-tone-signal:not(.elementor-editor-active) .case-movements article > div:not(.tpi-native-tag-figure) {
  background:
    repeating-linear-gradient(0deg, rgba(var(--project-accent-rgb), .045) 0 1px, transparent 1px 20px),
    linear-gradient(135deg, rgba(var(--project-secondary-rgb), .055), transparent 52%);
}

body.single-tpi_project.family-monograph.project-tone-material:not(.elementor-editor-active) .case-header::before {
  background:
    radial-gradient(circle at var(--project-pointer-x) var(--project-pointer-y), rgba(var(--project-accent-rgb), .2), transparent 37%),
    radial-gradient(circle at 26% 82%, rgba(var(--project-secondary-rgb), .13), transparent 29%),
    linear-gradient(120deg, rgba(var(--project-accent-rgb), .045), transparent 52%);
}

body.single-tpi_project.family-monograph.project-tone-material:not(.elementor-editor-active) :is(
  .case-movements article > .tpi-native-tag-figure,
  .drawing-split > .tpi-native-tag-figure
) {
  outline: 1px solid rgba(var(--project-accent-rgb), .28);
  outline-offset: -1px;
  box-shadow: 0 26px 66px rgba(16, 28, 34, .18), 0 0 28px rgba(var(--project-secondary-rgb), .08);
}

body.single-tpi_project.family-monograph.project-tone-material:not(.elementor-editor-active) .case-hero::before {
  background:
    linear-gradient(118deg, transparent 36%, rgba(var(--project-accent-rgb), .12) 50%, transparent 64%),
    radial-gradient(circle at var(--project-pointer-x) var(--project-pointer-y), rgba(var(--project-secondary-rgb), .13), transparent 29%),
    linear-gradient(180deg, transparent 58%, rgba(5, 8, 10, .3));
}

@media (max-width: 900px) {
  body.single-tpi_project.family-monograph {
    --project-glow-opacity: .1;
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero::before {
    opacity: .54;
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero.is-project-effect-active::after {
    animation: none;
    left: 54%;
    opacity: .1;
    transform: skewX(-10deg);
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split::after {
    inset: 12px;
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split > .tpi-native-tag-figure {
    box-shadow: 0 18px 42px rgba(var(--project-accent-rgb), .1);
  }

  body.single-tpi_project.family-monograph .case-header > .project-header-visual {
    width: 100%;
    opacity: .2;
  }

  body.single-tpi_project.family-monograph .project-header-visual::after {
    background: linear-gradient(180deg, var(--surface) 0%, transparent 38%, var(--surface) 100%);
  }

  body.single-tpi_project.family-monograph .case-header :is(dl, .tpi-native-tag-dl) {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
  }

  body.single-tpi_project.family-monograph .project-proof-visual {
    max-height: 230px;
  }

  body.single-tpi_project.family-monograph .route-cta > :not(.chapter-rail):not(.project-cta-visual) {
    max-width: none;
  }

  body.single-tpi_project.family-monograph .route-cta > .project-cta-visual {
    position: relative !important;
    inset: auto;
    width: 100%;
    margin-top: 42px;
    aspect-ratio: 16 / 10;
    border: 1px solid rgba(255, 255, 255, .26);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .24);
  }

  body.single-tpi_project.family-monograph .project-cta-visual::after {
    background: linear-gradient(180deg, transparent 54%, rgba(0, 0, 0, .34));
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::before,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::after {
    width: 78vw;
    opacity: .12;
  }
}

@media (hover: none), (pointer: coarse) {
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements article > .tpi-native-tag-figure::after {
    opacity: .28;
    transition: none;
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta :is(.button, .elementor-button):is(:hover, :focus-visible) {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header h1::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements h2::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band article::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::before,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta .button,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta .elementor-button {
    animation: none !important;
    transition: none !important;
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-header h1::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements > article::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-movements h2::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .drawing-split::after,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .proof-band article::after {
    opacity: 1;
    transform: none;
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .case-hero::after {
    opacity: .08;
    transform: none;
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::before,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta::after {
    opacity: .18;
    transform: none;
  }

  body.single-tpi_project.family-monograph:not(.elementor-editor-active) :is(.case-hero, .drawing-split) img,
  body.single-tpi_project.family-monograph .project-visual img,
  body.single-tpi_project.family-monograph:not(.elementor-editor-active) .route-cta :is(.button, .elementor-button):is(:hover, :focus-visible) {
    transform: none !important;
    transition: none !important;
  }
}