.mnl-csh {

  --paper: #FAFAFA;
  --ink: #15130E;
  --muted: #66625A;
  --line: #E3E1DB;
  --panel: #F0EFEB;
  --accent: #2E2497;
  --accent-ink: #FAFAFA;
  --orange: #F8953B;
  --night: #050505;
  --night-ink: #FAFAFA;
  --night-muted: #A9A49B;
  --night-line: #2E2C28;
  --cream: #FBF0EA;

  --font: "Hanken Grotesk", "Chalet", "Helvetica Neue", Arial, system-ui, sans-serif;
  --gutter: clamp(32px, 5vw, 64px);
  --max: 1280px;

  --font-heading: var(--font);
  --body-size: 1.0625rem;
  --body-leading: 1.6;
  --hero-size: clamp(6rem, 17vw, 17rem);
  --heading-size: clamp(2.25rem, 5vw, 4.5rem);
  --section-space: clamp(88px, 9vw, 144px);
  --card-radius: 16px;
  --cta-bg: #2E2497;
  --cta-ink: #FAFAFA;
  --cta-muted: #DCD9F2;
  --cta-border: #5A52B8;
  --cta-button-border: #A49DE0;
  --compare-ink: #15130E;
  --compare-paper: #FAFAFA;
  --hero-weight: 400;
  --hero-tracking: -.07em;
  --cover-focus: 50% 50%;
  --photo-focus: 50% 80%;
  /* Full-width host, one internal content grid; Elementor owns outer spacing. */
  --content-edge: max(var(--gutter), calc((100cqw - var(--max)) / 2 + var(--gutter)));
  --header-clearance: var(--detected-header-height, 0px);
  --hero-top-gap: 32px;
  --hero-bottom-gap: 64px;
  --hero-gap: clamp(28px, 3vw, 40px);
  --track-gap: 20px;
  --grid-gap: clamp(40px, 5vw, 80px);
  --ease: cubic-bezier(.22, 1, .36, 1);

  color-scheme: light;
  box-sizing: border-box;
  padding: 0;

}
@media (prefers-color-scheme: dark) {
.mnl-csh:not([data-theme="light"]) {

    color-scheme: dark;
    --paper: #0F0E0C;
    --ink: #F2F0EB;
    --muted: #A9A49B;
    --line: #2C2A26;
    --panel: #1A1916;
    --accent: #A9A2FF;
    --accent-ink: #0F0E0C;
  
}

}
.mnl-csh[data-theme="dark"] {

  color-scheme: dark;
  --paper: #0F0E0C;
  --ink: #F2F0EB;
  --muted: #A9A49B;
  --line: #2C2A26;
  --panel: #1A1916;
  --accent: #A9A2FF;
  --accent-ink: #0F0E0C;

}
.mnl-csh *,
.mnl-csh *::before,
.mnl-csh *::after {
 box-sizing: inherit; 
}
.mnl-csh {
 scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 72px); -webkit-text-size-adjust: 100%; 
}
.mnl-csh {

  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;

}
.mnl-csh img {
 display: block; max-width: 100%; height: auto; 
}
.mnl-csh a {
 color: inherit; 
}
.mnl-csh :focus-visible {
 outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; 
}
.mnl-csh .sr-only {
 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; 
}
.mnl-csh .mnl-csh-content {
 width: 100%; max-width: var(--max); min-width: 0; margin-inline: auto; padding-inline: var(--gutter); 
}
.mnl-csh .label {
 display: flex; gap: 12px; margin: 0; font-size: .9375rem; font-weight: 500; 
}
.mnl-csh .label b {
 color: var(--accent); font-weight: 500; 
}
.mnl-csh .h2 {
 margin: 0; font-weight: 400; font-size: var(--heading-size); line-height: 1; letter-spacing: -.04em; 
}
.mnl-csh .lead {
 margin: 0; max-width: 46ch; color: var(--muted); 
}
.mnl-csh .skip {
 position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); border-radius: 999px; text-decoration: none; 
}
.mnl-csh .skip:focus {
 top: calc(env(safe-area-inset-top, 0px) + 12px); 
}

.mnl-csh .progress {

  position: sticky; margin-top: calc(-3px - env(safe-area-inset-bottom, 0px));
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  height: calc(3px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--orange);
  background-clip: content-box;
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;

}
.mnl-csh .hero {

  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--hero-gap);
  padding-top: calc(var(--header-clearance) + var(--hero-top-gap));
  padding-bottom: var(--hero-bottom-gap);

}
.mnl-csh .hero__kicker {
 margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .9375rem; color: var(--muted); 
}
.mnl-csh .hero__title {

  margin: 0 0 0 -.06em;
  font-weight: 400;
  font-size: var(--hero-size);
  line-height: .8;
  letter-spacing: -.07em;

}
.mnl-csh .hero__line {
 display: block; overflow: hidden; padding-bottom: .06em; 
}
.mnl-csh .hero__line > span {
 display: inline-block; 
}
.mnl-csh .hero__char {
 display: inline-block; will-change: transform; 
}
.mnl-csh .hero__meta {

  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);

}
.mnl-csh .hero__meta dt {
 font-size: .875rem; color: var(--muted); 
}
.mnl-csh .hero__meta dd {
 margin: 4px 0 0; font-weight: 500; 
}
.mnl-csh .cover { container-type:inline-size; position: relative; width: 100%; height: auto; overflow: hidden; }
.mnl-csh .cover__media { position: relative; inset: auto; width: 100%; height: auto; }
.mnl-csh .cover__media img { display: block; width: 100%; height: auto; object-fit: contain; }
.mnl-csh .cover__chip {
 position: absolute; left: var(--content-edge); bottom: var(--gutter); max-width: calc(100% - 2 * var(--content-edge)); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .875rem; 
}
.mnl-csh .challenge {
 padding-block: var(--section-space); 
}
.mnl-csh .challenge__grid {
 display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--grid-gap); align-items: start; 
}
.mnl-csh .challenge__text {
 margin: 28px 0 0; font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.12; letter-spacing: -.03em; 
}
.mnl-csh .challenge__text .w {
 transition: color .2s; 
}
.mnl-csh.is-motion .challenge__text .w {
 color: var(--line); 
}
.mnl-csh .challenge__text .w.on {
 color: var(--ink); 
}
.mnl-csh .challenge__photo {
 overflow: hidden; border-radius: 8px; aspect-ratio: 4 / 5; 
}
.mnl-csh .challenge__photo img {
 width: 100%; height: 118%; object-fit: cover; object-position: 50% 80%; will-change: transform; 
}
@media (max-width: 1024px) {
.mnl-csh .challenge__grid {
 grid-template-columns: minmax(0, 1fr); 
}
.mnl-csh .challenge__photo {
 max-width: 420px; 
}

}
.mnl-csh .process {
 padding-top: clamp(64px, 8vw, 112px); 
}
.mnl-csh .process__head {
 display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; 
}
.mnl-csh .process__head .h2 {
 max-width: 14ch; margin-top: 20px; 
}
.mnl-csh .process__counter {
 margin: 0; font-size: .9375rem; color: var(--muted); font-variant-numeric: tabular-nums; 
}
.mnl-csh .process__viewport {
 container-type: inline-size;

  margin-top: clamp(32px, 4vw, 56px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scroll-padding-inline: var(--content-edge);
  overscroll-behavior-inline: contain;
  padding-bottom: clamp(64px, 8vw, 112px);

}
.mnl-csh .process__track {
 list-style: none; margin: 0; padding: 0 var(--content-edge); display: flex; gap: var(--track-gap); width: max-content; 
}
.mnl-csh .is-pinned .process__viewport {
 overflow: clip; scroll-snap-type: none; 
}
/* The horizontal Process has its own vertical runway. ScrollTrigger pins
   the inner pane only for this interval; the section itself always remains
   in document flow. No fixed or sticky CSS on the entire case-study section. */
.mnl-csh .process.is-pinned {
  height: calc(var(--process-height, 100svh) + var(--process-distance, 0px));
  display: block;
  padding: 0;
  position: relative;
}
.mnl-csh .process.is-pinned .process__sticky {
  position: relative;
  top: 0;
  height: calc(var(--process-height, 100svh) - var(--process-offset, 0px));
  display: flex;
  flex-direction: column;
  padding-top: clamp(24px, 4vh, 48px);
  padding-bottom: clamp(24px, 4vh, 40px);
  min-height: 0;
}
.mnl-csh .is-pinned .process__head .h2 {
 font-size: clamp(2rem, 4vw, 3.5rem); 
}
.mnl-csh .process.is-pinned > .process__sticky > .mnl-csh-content {
 width: 100%; 
}
.mnl-csh .is-pinned .process__viewport {
 flex: 1 1 auto; min-height: 0; margin-top: clamp(20px, 3vh, 40px); padding-bottom: 0; 
}
.mnl-csh .is-pinned .process__track {
 height: 100%;
 will-change: transform;
}
.mnl-csh .is-pinned .panel {
 height: 100%; min-height: 0; 
}
.mnl-csh .is-pinned .panel__media {
 height: 100%; min-height: 0; justify-content: center; 
}
.mnl-csh .is-pinned .panel__media img {
 min-height: 0; max-height: 100%; width: auto; max-width: 100%; object-fit: contain; flex: 0 1 auto; 
}
.mnl-csh .panel {

  scroll-snap-align: start;
  scroll-margin-inline: 0;
  width: min(1040px, calc(100cqw - 2 * var(--content-edge)));
  flex: 0 0 auto;
  min-height: min(68svh, 640px);
  background: var(--panel);
  border-radius: var(--card-radius);
  padding: clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: center;

}
.mnl-csh .panel__info {
 display: flex; flex-direction: column; gap: 14px; 
}
.mnl-csh .panel__meta {
 margin: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: .8125rem; 
}
.mnl-csh .chip {
 padding: 4px 12px; border-radius: 999px; border: 1px solid var(--muted); color: var(--muted); 
}
.mnl-csh .chip--on {
 background: var(--accent); border-color: var(--accent); color: var(--accent-ink); 
}
.mnl-csh .panel h3 {
 margin: 0; font-weight: 400; font-size: clamp(1.625rem, 2.6vw, 2.5rem); line-height: 1.05; letter-spacing: -.03em; 
}
.mnl-csh .panel p {
 margin: 0; max-width: 40ch; 
}
.mnl-csh .panel__media {
 display: flex; flex-direction: column; gap: 12px; 
}
.mnl-csh .panel__media img {
 width: 100%; border-radius: 8px; 
}
.mnl-csh .dots {
 display: flex; gap: 6px; list-style: none; margin: 4px 0 0; padding: 0; 
}
.mnl-csh .dots li {
 width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(21, 19, 14, .18); 
}
@media (max-width: 767px) {
.mnl-csh .panel {
 grid-template-columns: minmax(0, 1fr); min-height: 0; 
}

}
.mnl-csh .decision {
 padding-block: clamp(32px, 6vw, 96px) var(--section-space); 
}
.mnl-csh .decision__grid {
 display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--grid-gap); align-items: center; 
}
.mnl-csh .decision__copy {
 display: flex; flex-direction: column; gap: 22px; 
}
.mnl-csh .compare {
 position: relative; aspect-ratio: 1 / 1; max-width: 620px; width: 100%; justify-self: end; border-radius: var(--card-radius); overflow: hidden; background: var(--cream); --pos: 50%; touch-action: pan-y; 
}
.mnl-csh .compare img {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; 
}
.mnl-csh .compare__top {
 clip-path: inset(0 0 0 var(--pos)); 
}
.mnl-csh .compare__line {
 position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--compare-ink); pointer-events: none; 
}
.mnl-csh .compare__knob {
 position: absolute; top: 50%; left: var(--pos); width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--compare-ink); color: var(--compare-paper); display: grid; place-items: center; pointer-events: none; transition: transform .25s var(--ease); 
}
.mnl-csh .compare__tag {
 position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; background: var(--compare-paper); color: var(--compare-ink); font-size: .8125rem; pointer-events: none; 
}
.mnl-csh .compare__tag--l {
 left: 16px; 
}
.mnl-csh .compare__tag--r {
 right: 16px; 
}
.mnl-csh .compare__range {
 position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; 
}
.mnl-csh .compare__range:focus-visible ~ .compare__knob {
 outline: 3px solid var(--orange); outline-offset: 3px; 
}
.mnl-csh .compare:hover .compare__knob {
 transform: scale(1.08); 
}
@media (max-width: 1024px) {
.mnl-csh .decision__grid {
 grid-template-columns: minmax(0, 1fr); 
}
.mnl-csh .compare {
 justify-self: start; 
}

}
.mnl-csh .system {
 padding-block: var(--section-space); border-top: 1px solid var(--line); 
}
.mnl-csh .system__grid {
 display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--grid-gap); margin-top: clamp(32px, 4vw, 56px); align-items: start; 
}
.mnl-csh .tabs {
 display: flex; flex-direction: column; border-top: 1px solid var(--line); 
}
.mnl-csh .tab {

  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  gap: 2px 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  transition: color .3s;

}
.mnl-csh .tab__n {
 font-size: .875rem; padding-top: .3em; 
}
.mnl-csh .tab__name {
 font-size: clamp(1.25rem, 1.8vw, 1.625rem); letter-spacing: -.02em; line-height: 1.2; 
}
.mnl-csh .tab__desc {
 grid-column: 2; font-size: .9375rem; display: none; 
}
.mnl-csh .tab[aria-selected="true"] {
 color: var(--ink); 
}
.mnl-csh .tab[aria-selected="true"] .tab__n {
 color: var(--accent); 
}
.mnl-csh .tab[aria-selected="true"] .tab__desc {
 display: block; color: var(--muted); 
}
.mnl-csh .tab:hover {
 color: var(--ink); 
}
.mnl-csh .tab:focus-visible {
 outline: 2px solid var(--accent); outline-offset: -2px; 
}
.mnl-csh .stage {
 position: relative; aspect-ratio: 1600 / 775; border-radius: var(--card-radius); overflow: hidden; background: var(--cream); 
}
.mnl-csh .stage__panel {
 position: absolute; inset: 0; opacity: 0; transform: scale(1.02); transition: opacity .6s var(--ease), transform .9s var(--ease); 
}
.mnl-csh .stage__panel.is-active {
 opacity: 1; transform: none; 
}
.mnl-csh .stage__panel img {
 width: 100%; height: 100%; object-fit: cover; 
}
.mnl-csh .stage__panel--fit img {
 object-fit: contain; padding: 4% 6%; 
}
@media (max-width: 1024px) {
.mnl-csh .system__grid {
 grid-template-columns: minmax(0, 1fr); 
}
.mnl-csh .stage {
 order: -1; 
}

}
.mnl-csh .color {

  --sw: #284A37; --sw-ink: #FBF0EA;
  background: var(--sw);
  color: var(--sw-ink);
  transition: background-color .7s var(--ease), color .7s var(--ease);
  min-height: calc(100svh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 72px;
  padding-block: clamp(80px, 10vw, 128px) clamp(28px, 4vw, 48px);

}
.mnl-csh .color .label b {
 color: inherit; opacity: .7; 
}
.mnl-csh .color > .mnl-csh-content {
 width: 100%; 
}
.mnl-csh .color__name {
 margin: 0 0 0 -.05em; font-weight: 400; font-size: clamp(4.5rem, 16vw, 16rem); line-height: .85; letter-spacing: -.065em; 
}
.mnl-csh .color__codes {
 margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: clamp(1rem, 1.6vw, 1.375rem); font-variant-numeric: tabular-nums; 
}
.mnl-csh .swatches {
 list-style: none; margin: clamp(40px, 6vw, 80px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; 
}
.mnl-csh .swatch {
 all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: .9375rem; 
}
.mnl-csh .swatch__dot {
 width: 44px; height: 44px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px currentColor; transition: transform .35s var(--ease); 
}
.mnl-csh .swatch[aria-pressed="true"] .swatch__dot {
 transform: scale(1.18); box-shadow: 0 0 0 2px var(--sw), 0 0 0 4px currentColor; 
}
.mnl-csh .swatch__state {
 opacity: .7; 
}
.mnl-csh .swatch:focus-visible {
 outline: 2px solid currentColor; outline-offset: 6px; border-radius: 999px; 
}
.mnl-csh .marquee {
 overflow: hidden; padding-block: clamp(48px, 6vw, 80px); border-bottom: 1px solid var(--line); 
}
.mnl-csh .marquee__track {
 display: flex; gap: 16px; width: max-content; animation: mnl-csh-marquee 48s linear infinite; 
}
.mnl-csh .marquee:hover .marquee__track {
 animation-play-state: paused; 
}
.mnl-csh .marquee__track img {
 height: clamp(140px, 18vw, 240px); width: auto; border-radius: 12px; 
}
@keyframes mnl-csh-marquee {
 to { transform: translateX(-50%); } 
}
.mnl-csh .type {
 padding-block: var(--section-space); 
}
.mnl-csh .type__grid {
 display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--grid-gap); align-items: center; 
}
.mnl-csh .type__grid img {
 border-radius: var(--card-radius); background: var(--cream); 
}
@media (max-width: 1024px) {
.mnl-csh .type__grid {
 grid-template-columns: minmax(0, 1fr); 
}

}
.mnl-csh .result {
 background: var(--night); color: var(--night-ink); padding-block: var(--section-space); 
}
.mnl-csh .result .label b {
 color: var(--orange); 
}
.mnl-csh .result .h2 {
 max-width: 16ch; margin-top: 20px; 
}
.mnl-csh .stats {
 margin: clamp(48px, 6vw, 88px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 40px 32px; 
}
.mnl-csh .stat {
 border-top: 1px solid var(--night-line); padding-top: 20px; display: flex; flex-direction: column-reverse; gap: 8px; 
}
.mnl-csh .stat dt {
 color: var(--night-muted); font-size: .9375rem; 
}
.mnl-csh .stat dd {
 margin: 0; font-weight: 300; font-size: clamp(4rem, 8vw, 7.5rem); line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; 
}
.mnl-csh .quote {
 margin: var(--section-space) 0 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px var(--grid-gap); 
}
.mnl-csh .quote blockquote {
 margin: 0; max-width: 26ch; font-weight: 300; font-size: clamp(1.875rem, 3.8vw, 3.25rem); line-height: 1.12; letter-spacing: -.03em; 
}
.mnl-csh .quote figcaption {
 font-size: .9375rem; color: var(--night-muted); padding-top: .6em; 
}
.mnl-csh .quote figcaption span {
 display: block; color: var(--night-ink); font-weight: 500; 
}
@media (max-width: 767px) {
.mnl-csh .quote {
 grid-template-columns: minmax(0, 1fr); 
}
.mnl-csh .quote figcaption {
 order: 2; 
}

}
.mnl-csh .more {
 position: relative; overflow: clip;
 padding-block: var(--section-space); 
}
.mnl-csh .more__head {
 display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: clamp(28px, 4vw, 48px); 
}
.mnl-csh .more__all {
 font-weight: 500; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; color: var(--accent); 
}
.mnl-csh .projects {
 list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); 
}
.mnl-csh .project {
 border-bottom: 1px solid var(--line); 
}
.mnl-csh .project a {
 display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; padding: clamp(18px, 2.4vw, 28px) 0; text-decoration: none; color: var(--ink); 
}
.mnl-csh .project__n {
 font-size: .875rem; color: var(--muted); width: 2.5rem; 
}
.mnl-csh .project__name {
 font-size: clamp(2rem, 5.2vw, 4.75rem); line-height: 1; letter-spacing: -.045em; transition: transform .5s var(--ease), color .3s; 
}
.mnl-csh .project__type {
 font-size: .9375rem; color: var(--muted); text-align: right; 
}
.mnl-csh .project__thumb {
 display: none; 
}
.mnl-csh .projects:hover .project__name {
 color: var(--muted); 
}
.mnl-csh .projects .project a:hover .project__name,
.mnl-csh .projects .project a:focus-visible .project__name {
 color: var(--ink); transform: translateX(16px); 
}
.mnl-csh .follower {
 position: absolute; left: 0; top: 0; z-index: 40; width: clamp(240px, 22vw, 340px); aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.85); transition: opacity .3s, scale .3s; 
}
.mnl-csh .follower.is-on {
 opacity: 1; 
}
.mnl-csh .follower img {
 position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; 
}
.mnl-csh .follower img.is-on {
 opacity: 1; 
}
@media (hover: none), (pointer: coarse), (max-width: 767px) {
.mnl-csh .follower {
 display: none; 
}
.mnl-csh .project a {
 grid-template-columns: 88px minmax(0, 1fr); 
}
.mnl-csh .project__n {
 display: none; 
}
.mnl-csh .project__thumb {
 display: block; width: 88px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; grid-row: span 2; 
}
.mnl-csh .project__type {
 text-align: left; 
}

}
.mnl-csh .cta {
 background: var(--cta-bg); color: var(--cta-ink); padding-block: var(--section-space) clamp(40px, 5vw, 64px); 
}
.mnl-csh .cta__title {
 margin: 0 0 0 -.05em; font-weight: 400; font-size: clamp(3.25rem, 10vw, 10rem); line-height: .86; letter-spacing: -.06em; max-width: 12ch; 
}
.mnl-csh .cta__row {
 margin-top: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px 48px; 
}
.mnl-csh .cta__copy {
 margin: 0; max-width: 40ch; color: var(--cta-muted); font-size: 1.125rem; 
}
.mnl-csh .cta__actions {
 display: flex; flex-wrap: wrap; align-items: center; gap: 12px; 
}
.mnl-csh .btn {
 display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px; font-weight: 500; text-decoration: none; transition: background-color .3s, color .3s; 
}
.mnl-csh .btn--light {
 background: var(--cta-ink); color: var(--cta-bg); transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); transition: transform .35s var(--ease), background-color .3s; 
}
.mnl-csh .btn--light:hover {
 background: var(--orange); color: #15130E; 
}
.mnl-csh .btn--ghost {
 border: 1px solid var(--cta-button-border); color: var(--cta-ink); 
}
.mnl-csh .btn--ghost:hover {
 background: rgba(250, 250, 250, .1); 
}
.mnl-csh .cta :focus-visible {
 outline-color: var(--cta-ink); 
}
.mnl-csh .cta__foot {
 margin-top: clamp(80px, 10vw, 144px); padding-top: 20px; border-top: 1px solid var(--cta-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: .9375rem; color: var(--cta-muted); 
}
.mnl-csh .cta__foot a {
 color: var(--cta-ink); text-underline-offset: 4px; 
}
@media (prefers-reduced-motion: reduce) {
.mnl-csh *,
.mnl-csh *::before,
.mnl-csh *::after {
 transition-duration: .01ms !important; animation: none !important; 
}
.mnl-csh .marquee {
 overflow-x: auto; 
}

}

/* Host isolation and safe substitution. Default composition remains the source HTML. */
.mnl-csh { box-sizing: border-box; isolation: isolate; width: 100%; min-width: 0; }
.mnl-csh h1, .mnl-csh h2, .mnl-csh h3, .mnl-csh p, .mnl-csh a, .mnl-csh button { font-family: inherit; }
.mnl-csh h1, .mnl-csh h2, .mnl-csh h3 { color: inherit; }
.mnl-csh h1, .mnl-csh h2, .mnl-csh h3, .mnl-csh .h2, .mnl-csh .color__name { font-family: var(--font-heading); }
.mnl-csh button, .mnl-csh input { font: inherit; }
.mnl-csh .hero__title { font-weight: var(--hero-weight); letter-spacing: var(--hero-tracking); }
.mnl-csh .hero__char { white-space: pre; }
.mnl-csh .cover__media img { object-position: var(--cover-focus); }
.mnl-csh .challenge__photo img { object-position: var(--photo-focus); }
.mnl-csh .panel__info, .mnl-csh .project__name, .mnl-csh .hero__meta > div { min-width: 0; overflow-wrap: anywhere; }
.mnl-csh .btn { max-width: 100%; min-width: 0; white-space: normal; text-align: center; padding-block: 12px; }
.mnl-csh .hero__meta { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.mnl-csh .panel { overflow-y: auto; }
.mnl-csh .stage__panel:not(.is-active) { visibility: hidden; pointer-events: none; }
.mnl-csh .stage__panel.is-active { visibility: visible; }
.mnl-csh .color__name, .mnl-csh .cta__title { overflow-wrap: anywhere; }
@media (max-width: 767px) {
 .mnl-csh .project__name { font-size: clamp(1.5rem, 5.2vw, 4.75rem); }
}
@media (hover: none), (pointer: coarse), (max-width: 767px) {
 .mnl-csh .project__thumb { grid-column: 1; grid-row: 1 / span 2; }
 .mnl-csh .project__name, .mnl-csh .project__type { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
 .mnl-csh .progress { transition: none; }
}

/* WordPress toolbar, zero offset on the public page. */
.mnl-csh { --admin-offset: 0px; }
.admin-bar .mnl-csh { --admin-offset: 32px; }
@media (max-width:782px) { .admin-bar .mnl-csh { --admin-offset: 46px; } }
@media (max-width:600px) { .admin-bar .mnl-csh { --admin-offset: 0px; } }
.mnl-csh { font-weight: 400; letter-spacing: normal; text-align: left; overflow-wrap: anywhere; }
.mnl-csh h1, .mnl-csh h2, .mnl-csh h3, .mnl-csh a, .mnl-csh button { text-transform: none; }
.mnl-csh .cta__foot > span { min-width: 0; }
/* Restore the source's inherited defaults when hosted inside a WordPress theme. */
.mnl-csh h1, .mnl-csh h2, .mnl-csh h3 { margin: 0; line-height: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.mnl-csh p { margin: 0; }
.mnl-csh a { font-weight: inherit; line-height: inherit; }
.mnl-csh img { border: 0; box-shadow: none; border-radius: 0; }

/* 1.17.1 — full-width integration and the shared Manila breakpoints:
   <=480 compact mobile | <=767 mobile | 768–1024 tablet | >=1025 desktop.
   Site header and parent spacing remain owned by the existing page. */
:is(.elementor-widget-manila_case_study_html, .elementor-widget-manila_case_study_spektrum, .elementor-widget-manila_case_study_menzo):has([data-layout="viewport"]),
:is(.elementor-widget-manila_case_study_html, .elementor-widget-manila_case_study_spektrum, .elementor-widget-manila_case_study_menzo) > .elementor-widget-container {
  width: 100%; max-width: 100%; min-width: 0; margin: 0; padding: 0;
}
/* Full-width mode owns the horizontal box of the widget and of a dedicated
   Elementor layout shell. Every step to the widget must be an only child.
   A sibling (including a second widget) excludes that shell. */
:is(.e-con, .e-con-inner, .e-div-block, .e-flexbox, .e-grid,
    [data-element_type="e-div-block"], [data-element_type="e-flexbox"], [data-element_type="e-grid"]):has(:is(.elementor-widget-manila_case_study_html, .elementor-widget-manila_case_study_spektrum, .elementor-widget-manila_case_study_menzo) .mnl-csh[data-layout="viewport"]):not(:has(
  :is(.elementor-widget-manila_case_study_html, .elementor-widget-manila_case_study_spektrum, .elementor-widget-manila_case_study_menzo):not(:only-child),
  :not(:only-child) :is(.elementor-widget-manila_case_study_html, .elementor-widget-manila_case_study_spektrum, .elementor-widget-manila_case_study_menzo)
)),
:is(.elementor-widget-manila_case_study_html, .elementor-widget-manila_case_study_spektrum, .elementor-widget-manila_case_study_menzo):has(.mnl-csh[data-layout="viewport"]),
:is(.elementor-widget-manila_case_study_html, .elementor-widget-manila_case_study_spektrum, .elementor-widget-manila_case_study_menzo) > .elementor-widget-container:has(> .mnl-csh[data-layout="viewport"]) {
  /* Elementor can print instance spacing after this sheet or inline. */
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* The theme may apply a content width to main and section elements. Keep
   full-bleed surfaces independent of the existing .mnl-csh-content frames. */
.mnl-csh[data-layout="viewport"] > main,
.mnl-csh[data-layout="viewport"] > main > :is(.cover, .process, .color, .marquee, .result, .cta) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}

:is(.elementor-widget-manila_case_study_html, .elementor-widget-manila_case_study_spektrum, .elementor-widget-manila_case_study_menzo) .mnl-csh {
  --header-clearance: var(--detected-header-height, 0px);
}
.mnl-csh > main { width: 100%; min-width: 0; max-width: none; margin: 0; padding: 0; }
.mnl-csh [data-chapter-section], .mnl-csh .hero, .mnl-csh .cta {
  scroll-margin-top: calc(var(--header-clearance) + 24px);
}
.mnl-csh .hero__kicker { align-items: center; gap: 8px 20px; }
.mnl-csh .hero__title { width: 100%; max-width: 100%; }
.mnl-csh .hero__meta { column-gap: clamp(24px, 3vw, 40px); row-gap: 24px; }
.mnl-csh .hero__meta dd { line-height: 1.45; }
.mnl-csh .challenge__grid, .mnl-csh .decision__grid,
.mnl-csh .system__grid, .mnl-csh .type__grid { min-width: 0; }
.mnl-csh .challenge__grid > *, .mnl-csh .decision__grid > *,
.mnl-csh .system__grid > *, .mnl-csh .type__grid > * { min-width: 0; }
.mnl-csh .tab { min-height: 56px; }
.mnl-csh .color__name { line-height: 1; }
.mnl-csh .swatches > li { min-width: 0; }
.mnl-csh .swatch { max-width: 100%; }
.mnl-csh .swatch__dot { flex: 0 0 44px; }
.mnl-csh .project__type { min-width: 0; max-width: 32ch; }
.mnl-csh .cta__foot > span:first-child { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mnl-csh .panel__media { min-width: 0; }

@media (max-width: 1024px) {
  .mnl-csh { --gutter: 40px; --hero-size: clamp(6rem, 19vw, 12rem); --section-space: 88px; --grid-gap: 40px; }
  .mnl-csh .hero { min-height: 0; }
  .mnl-csh .challenge__photo { width: 100%; max-width: 560px; }
  .mnl-csh .panel { grid-template-columns: minmax(0, 1fr); min-height: 0; align-items: start; }
  .mnl-csh .panel__info { max-width: 58ch; }
  .mnl-csh .panel p { max-width: none; }
  .mnl-csh .color { min-height: 640px; }
  .mnl-csh .color__name { font-size: clamp(4rem, 14vw, 10rem); }
}

@media (max-width: 767px) {
  .mnl-csh {
    --gutter: 28px; --hero-size: clamp(5rem, 20vw, 7rem);
    --hero-top-gap: 24px; --hero-bottom-gap: 40px; --hero-gap: 24px;
    --section-space: 64px; --grid-gap: 32px; --track-gap: 16px;
    --heading-size: clamp(2rem, 8vw, 3rem);
  }

  .mnl-csh .hero { height: auto; min-height: 0; justify-content: flex-start; }
  .mnl-csh .hero__kicker { gap: 8px 16px; font-size: .8125rem; line-height: 1.4; }
  .mnl-csh .hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; padding-top: 20px; }
  .mnl-csh .hero__meta dt { font-size: .8125rem; }
  .mnl-csh .hero__meta dd { font-size: .9375rem; }
  .mnl-csh .cover__chip { bottom: 20px; font-size: .75rem; padding: 8px 12px; line-height: 1.4; }
  .mnl-csh .challenge__text { margin-top: 24px; font-size: clamp(1.625rem, 6.8vw, 2.25rem); line-height: 1.18; }
  .mnl-csh .challenge__photo { max-width: none; }
  .mnl-csh .process { padding-top: 0; }
  .mnl-csh .process__head { align-items: flex-start; gap: 24px; }
  .mnl-csh .process__head .h2 { max-width: 18ch; }
  .mnl-csh .process__viewport { margin-top: 28px; padding-bottom: 40px; }
  .mnl-csh .panel { padding: 24px; gap: 24px; overflow: visible; }
  .mnl-csh .panel h3 { font-size: 1.75rem; line-height: 1.1; }
  .mnl-csh .panel__info { gap: 16px; }
  .mnl-csh .decision { padding-top: 24px; }
  .mnl-csh .decision__copy { gap: 20px; }
  .mnl-csh .compare { max-width: none; }
  .mnl-csh .compare__knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .mnl-csh .compare__tag { top: 12px; font-size: .75rem; }
  .mnl-csh .compare__tag--l { left: 12px; }
  .mnl-csh .compare__tag--r { right: 12px; }
  .mnl-csh .system__grid { margin-top: 28px; }
  .mnl-csh .stage { aspect-ratio: 16 / 10; }
  .mnl-csh .stage__panel img { object-fit: contain; }
  .mnl-csh .tab { grid-template-columns: 1.75rem minmax(0, 1fr); padding-block: 16px; }
  .mnl-csh .tab__name { font-size: 1.25rem; }
  .mnl-csh .tab__desc { line-height: 1.5; }
  .mnl-csh .color { min-height: 0; gap: 64px; padding-block: 64px 32px; }
  .mnl-csh .color__name { font-size: clamp(3.25rem, 15vw, 6rem); }
  .mnl-csh .color__codes { margin-top: 20px; gap: 8px 20px; font-size: .9375rem; }
  .mnl-csh .swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; margin-top: 32px; }
  .mnl-csh .swatch { width: 100%; min-height: 56px; gap: 12px; font-size: .875rem; }
  .mnl-csh .swatch__dot { width: 36px; height: 36px; flex-basis: 36px; }
  .mnl-csh .marquee { padding-block: 32px; }
  .mnl-csh .marquee__track img { height: 120px; }
  .mnl-csh .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; margin-top: 32px; }
  .mnl-csh .stat dd { font-size: clamp(3rem, 14vw, 4.5rem); }
  .mnl-csh .stat dt { line-height: 1.4; }
  .mnl-csh .quote { margin-top: 56px; gap: 24px; }
  .mnl-csh .quote blockquote { font-size: clamp(1.625rem, 6.5vw, 2.25rem); line-height: 1.2; }
  .mnl-csh .project a { grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding-block: 20px; }
  .mnl-csh .project__thumb { width: 72px; }
  .mnl-csh .project__name { font-size: clamp(1.375rem, 5.6vw, 2.5rem); line-height: 1.1; }
  .mnl-csh .project__type { font-size: .8125rem; line-height: 1.4; max-width: none; }
  .mnl-csh .cta__title { font-size: clamp(3rem, 12vw, 5rem); line-height: .96; }
  .mnl-csh .cta__row { margin-top: 32px; gap: 28px; }
  .mnl-csh .cta__copy { font-size: 1rem; line-height: 1.5; }
  .mnl-csh .cta__actions { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
  .mnl-csh .btn { width: 100%; padding: 16px 20px; line-height: 1.35; }
  .mnl-csh .cta__foot { flex-direction: column; align-items: flex-start; margin-top: 48px; gap: 20px; line-height: 1.5; }
}

@media (max-width: 480px) {
  .mnl-csh { --gutter: 24px; --body-size: 1rem; }
  .mnl-csh .hero__kicker { column-gap: 12px; }
  .mnl-csh .panel { padding: 20px; }
}
@media (max-width: 359px) {
  .mnl-csh .hero__meta { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .mnl-csh .swatches { gap: 12px; }
  .mnl-csh .swatch { gap: 10px; }
}

.mnl-csh.is-motion[data-cover-effect="animated"]:not([data-editor="yes"]) .cover { height: 100svh; }
.mnl-csh.is-motion[data-cover-effect="animated"]:not([data-editor="yes"]) .cover__media { position:absolute; inset:0; height:100%; }
.mnl-csh.is-motion[data-cover-effect="animated"]:not([data-editor="yes"]) .cover__media img { height:100%; object-fit:cover; }
@media(max-width:767px) {
 .mnl-csh .hero { padding-top:calc(var(--hero-header-reserve,var(--header-clearance)) + var(--hero-mobile-top,var(--hero-top-gap))); padding-bottom:var(--hero-mobile-bottom,var(--hero-bottom-gap)); gap:var(--hero-mobile-gap,var(--hero-gap)); }
 .mnl-csh .hero__title { line-height:1.05; }
 .mnl-csh .hero__line { padding-block:.1em; }
 .mnl-csh .hero__line > [data-split] { display:block; overflow-wrap:anywhere; }
}

.elementor-widget-manila_case_study_spektrum .mnl-csh {
  --orange: #728B38;
  --cta-bg: #0C2C6D;
  --cta-ink: #FDFBF4;
  --cta-muted: #C1CCEA;
  --cta-border: #697FAF;
  --cta-button-border: #C1CCEA;
}
@media (max-width: 767px) {
  .elementor-widget-manila_case_study_spektrum .mnl-csh { --hero-size: clamp(3rem, 17vw, 7rem); }
}

.mnl-csh .case-uses { padding-block-start: var(--section-space); }
.mnl-csh .case-uses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 32px var(--grid-gap);
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.mnl-csh .case-uses__item { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.mnl-csh .case-uses__item img { width: 100%; height: auto; margin-bottom: 8px; }
.mnl-csh .case-uses__item span { color: var(--muted); }
.mnl-csh .case-uses__item:is(:hover,:focus-visible) strong { text-decoration: underline; }