/* CASE STUDY – custom template */

.maryum-case-study {
  --mc-text: #0d0d0d;
  --mc-muted: #3D3D3D;
  --mc-line: #1c1c1c;
  --mc-bg: #fdfcf7;           
  --mc-content: 1300px;      
  --mc-gutter: 24px;         /* side padding on small screens */
  --mc-section-gap: 56px;
  --mc-slide-ratio: 2 / 1;

  color: var(--mc-text);
  font-size: 15px;
  line-height: 1.7;
  padding-bottom: 0;
  overflow-x: clip;          
}

.maryum-case-study *,
.maryum-case-study *::before,
.maryum-case-study *::after {
  box-sizing: border-box;
}

.maryum-case-study img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.maryum-case-study > section {
  width: min(var(--mc-content), calc(100% - (var(--mc-gutter) * 2)));
  margin: var(--mc-section-gap) auto 0;
}
.custom-width{
    max-width: 1257px !important;
}

/* HERO */

.maryum-case-study > .maryum-case-hero {
  margin-top: 0;
  padding-top: 20px;
}

.maryum-case-hero h1 {
  font-size: 79px !important;    
  margin: 0 0 15px;
  line-height: 64.9px !important;
  letter-spacing: 1px !important;
  color: #000 !important;
}

.maryum-case-subtitle {
  font-size: 18px;
  line-height: 29px;
  color: var(--mc-muted);
}

.maryum-case-subtitle p {
  margin: 0;
}

.maryum-case-hero-image {
  margin-top: 30px;
}

/* SECTION HEADINGS */

.maryum-case-section-heading {
  margin: 0 0 20px !important;
  font-size: 22px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0;
  color: #0A0A0A;
}


.maryum-case-about > .maryum-case-section-heading {
  font-size: clamp(28px, 3.6vw, 55px);
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 8px;
  color: #000000;
}

/* RICH TEXT (all WYSIWYG areas) */

.maryum-case-richtext {
  max-width: 100%;
}

.maryum-case-richtext p {
  margin: 0 0 1.1em;
}

.maryum-case-richtext > :last-child {
  margin-bottom: 0;
}

.maryum-case-richtext strong {
  font-weight: 600;
}

.maryum-case-richtext a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.maryum-case-richtext ul,
.maryum-case-richtext ol {
  margin: 0 0 1.1em;
  padding-left: 1.2em;
}


.maryum-case-richtext h4 {
  margin: 15px 0 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  color: #3D3D3D;
}

.maryum-case-richtext h4:first-child {
  margin-top: 0;
}

/* ABOUT + META */

.maryum-case-about {
  padding-bottom: 45px;
  border-bottom: 1px solid var(--mc-line);
}
.maryum-case-about h2 {
    line-height: 65px !important;
}
.maryum-case-about p {
    max-width: 1279px;
}

.maryum-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 80px;
  margin-top: 61px;
}

.maryum-case-meta-item span {
  display: block;
  margin-bottom: 6px;
  font-size: 22px;
  font-weight: 500;
  line-height: 27px;
  letter-spacing: 0.6px;
  color: #000000;
}

.maryum-case-meta-item strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 26px;
  color: var(--mc-muted);
}
.title_holder.qode-only-breadcrumbs-title {
    height: auto !important;
    padding-top: 60px !important;
}
.title.title_size_small {
    height: auto !important;
}

/* IMAGE GRIDS (challenge / process / approach)*/

.maryum-case-image-grid {
  display: grid;
  gap: 16px;
  margin-top: 35px;
  align-items: start;
}

.maryum-case-image-grid.cols-1 { grid-template-columns: 1fr; }
.maryum-case-image-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.maryum-case-image-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

.maryum-case-image {
  overflow: hidden;
}

/* PROCESS */

.maryum-case-process-steps {
  list-style: none;
  margin: 25px 0 0;
  padding: 0;
}
.maryum-case-process-steps h3 {
    font-size: 18px !important;
}

.maryum-case-process-step + .maryum-case-process-step {
  margin-top: 25px;
}

.maryum-case-process-step h3,
.maryum-case-approach-content h3 {
  margin: 0 0 10px !important;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
}

.maryum-case-step-number,
.maryum-case-approach-number {
  margin-right: 6px;
}

/* APPROACH */

.maryum-case-approach-item {
  margin-top: 45px;
}
div.maryum-case-approach-item:first-of-type {
    margin-top: 20px !important;
}
.maryum-case-approach > .maryum-case-richtext + .maryum-case-approach-item {
  margin-top: 32px;
}

.maryum-case-approach-content h3 {
  margin-bottom: 15px !important;
  font-size: 18px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  color: #3D3D3D !important;
}

.maryum-case-approach-item .maryum-case-image-grid {
  margin-top: 35px;
}

/* EXTRA / FINAL / RESULTS */
section.maryum-case-extra {
    margin-bottom: 10px !important;
}
section.maryum-case-extra h2 {
    margin-top: 35px;
}
.maryum-case-extra .maryum-case-richtext p:last-child,
.maryum-case-final .maryum-case-richtext p:last-child {
  margin-bottom: 0;
}

.maryum-case-results-image {
  margin-top: var(--mc-section-gap);
}

/* SLIDER  (continuous linear loop, no navigation) */

.maryum-case-slider {
  /* width of one slide = half of the content column */
   --mc-slide-w: min(var(--mc-content), calc(100vw - (var(--mc-gutter) * 2)));
  --mc-slide-gap: 16px;

  position: relative;
  overflow: hidden;
}

.maryum-slider-track {
  display: flex;
  width: max-content;
  animation: maryum-marquee var(--mc-marquee-duration, 30s) linear infinite;
  will-change: transform;
}

.maryum-slide {
  flex: 0 0 var(--mc-slide-w);
  width: var(--mc-slide-w);
  margin: 0 var(--mc-slide-gap) 0 0;
}

.maryum-slide img {
  aspect-ratio: var(--mc-slide-ratio);
  object-fit: cover;
}

@keyframes maryum-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } 
}

/* pause while hovering (desktop only) */
@media (hover: hover) {
  .maryum-case-slider:hover .maryum-slider-track {
    animation-play-state: paused;
  }
}

.maryum-case-study > .maryum-case-slider--peek {
  --mc-slide-w: min(var(--mc-content), calc(100vw - (var(--mc-gutter) * 2)));

  width: 100vw;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* LIVE LINK */

.maryum-case-live {
    margin-top: 35px !important;
}

.maryum-case-live a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 22px;
  line-height: 27px!important;
  font-weight: 500;
  color: #0A0A0A;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.maryum-case-live a span {
  display: inline-block;
  transition: transform .2s ease;
}

.maryum-case-live a:hover span,
.maryum-case-live a:focus-visible span {
  transform: translateX(4px);
}

/* PREVIOUS / NEXT PROJECT */

.maryum-case-study > .maryum-case-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(var(--mc-content), calc(100% - (var(--mc-gutter) * 2)));
  margin: 40px auto 0;
}

.maryum-case-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--mc-text);
  transition: transform .2s ease;
}

.maryum-case-nav-prev:hover { transform: translateX(-3px); }
.maryum-case-nav-next:hover { transform: translateX(3px); }

/* CTA */

.maryum-case-study > .maryum-case-cta {
  width: 100%;
  margin-top: 80px;
  padding: 88px var(--mc-gutter) 96px;
  border-top: 1px solid var(--mc-line);
  text-align: center;
}

.maryum-case-cta-eyebrow {
  margin: 0 0 20px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mc-muted);
}

.maryum-case-cta h2 {
  margin: 0 0 28px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--mc-text);
}

.maryum-case-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 999px;
  background: var(--mc-text);
  color: var(--mc-bg);
  font-size: 13px;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}

.maryum-case-cta-button:hover,
.maryum-case-cta-button:focus-visible {
  opacity: .85;
  transform: translateY(-1px);
  color: var(--mc-bg);
}

/* TABLET / MOBILE */

@media (max-width: 900px) {
  .maryum-case-study {
    --mc-section-gap: 44px;
  }

  .maryum-case-meta {
    gap: 20px 40px;
  }
}

@media (max-width: 767px) {
    .maryum-case-hero h1 {
        font-size: 40px !important;
        line-height: 45px !important;
    }
    .maryum-case-about h2 {
    line-height: 40px !important;
}
}

@media (max-width: 680px) {
  .maryum-case-study {
    --mc-gutter: 18px;
    --mc-section-gap: 36px;
    font-size: 14.5px;
  }

  .maryum-case-study > .maryum-case-hero {
    padding-top: 16px;
  }

  .maryum-case-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
  }

  .maryum-case-image-grid.cols-2,
  .maryum-case-image-grid.cols-3 {
    grid-template-columns: 1fr;
  }

  
  .maryum-case-process .maryum-case-image-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }

  .maryum-case-approach-item {
    margin-top: 36px;
  }
  
  .title_subtitle_holder {
      padding: 0 25px !important;
  }

  .maryum-case-slider {
    --mc-slide-w: calc(min(var(--mc-content), 100vw - (var(--mc-gutter) * 2)) * 0.8);
    --mc-slide-gap: 10px;
  }

  .maryum-case-study > .maryum-case-cta {
    padding: 64px var(--mc-gutter) 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  
  .maryum-slider-track {
    animation: none;
  }

  .maryum-case-slider {
    overflow-x: auto;
  }

  .maryum-slide[aria-hidden="true"] {
    display: none;
  }

  .maryum-case-study * {
    transition: none !important;
  }
}