/* Enquiries page: avoid browser scroll anchoring during sticky-process layout. */
.mht-enquiries-page .mht-enq-process,
.mht-enquiries-page .mht-enq-section {
  overflow-anchor: none;
}

/* =============================================================================
   17c__project-story-slides.css
   Optional project story cards.
   Phase 10.10.53: copied back to the locked sticky-slide language used by
   How I Think / How I Work in 10.10.51. No glass, no blur, no GSAP.
   ========================================================================== */

.mht-project-story {
  --story-progress: 0;
  --story-title-scale: .34;
  --story-title-y: 0px;
  --story-title-opacity: 1;
  --story-scene-y: 360px;
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.mht-project-story__inner {
  position: relative;
}

.mht-project-story__header {
  position: relative;
  z-index: 1;
  text-align: center;
  pointer-events: none;
}

.mht-project-story__kicker {
  justify-content: center;
  margin-inline: auto;
}

.mht-project-story__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02em;
  margin: 0;
  color: var(--text-primary, #F6F2F7);
  font-family: var(--font-display, "Migra", Georgia, serif);
  font-weight: 700;
}

.mht-project-story__title span,
.mht-project-story__title em {
  display: block;
}

.mht-project-story__title em {
  font-style: italic;
  font-weight: 400;
  color: rgba(197, 166, 211, .72);
  -webkit-text-fill-color: rgba(197, 166, 211, .72);
}

.mht-project-story__scroll {
  position: relative;
  z-index: 4;
}

.mht-project-story__sticky {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #4C345D;
  background-image:
    radial-gradient(at 0% 100%, rgba(197,166,211,.88) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(197,166,211,.62) 0px, transparent 48%),
    radial-gradient(at 100% 100%, rgba(142,99,163,.78) 0px, transparent 44%),
    radial-gradient(at 38% 36%, rgba(76,52,93,.92) 0px, transparent 56%);
  background-size: 220% 220%;
  animation: mhtMeshMove 8s ease infinite;
  box-shadow:
    0 8px 24px rgba(0,0,0,.16),
    0 30px 80px rgba(0,0,0,.18),
    0 60px 140px rgba(0,0,0,.14);
}

.mht-project-story__sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(0,0,0,.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.34) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .21;
  pointer-events: none;
}

.mht-project-story__sticky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.08), transparent 26%, transparent 72%, rgba(0,0,0,.40)),
    radial-gradient(circle at center, transparent 32%, rgba(0,0,0,.34));
  pointer-events: none;
}

.mht-project-story__progress {
  position: absolute;
  z-index: 35;
  top: 0;
  left: calc(var(--story-progress, 0) * 100%);
  width: clamp(54px, 5.6vw, 88px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(183,140,255,0), rgba(183,140,255,.94), rgba(230,216,255,.64), rgba(183,140,255,0));
  box-shadow: 0 0 14px rgba(183,140,255,.46), 0 0 28px rgba(197,166,211,.18);
  opacity: .9;
  transform: translateX(-50%);
  pointer-events: none;
}

.mht-project-story__nav {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mht-project-story__nav-button {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.mht-project-story__nav-num {
  font-family: var(--font-display, "Migra", Georgia, serif);
  line-height: 1;
  color: #C5A6D3;
}

.mht-project-story__nav-label {
  font-family: var(--font-sans, "Blauer Nue", system-ui, sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(221,214,227,.78);
}

.mht-project-story__stage {
  position: relative;
  z-index: 5;
  overflow: visible;
}

.mht-project-story__visual-track {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mht-project-story__card {
  --slide-y: 560px;
  --slide-opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: clamp(18px, 1.85vw, 24px);
  color: var(--text-primary, #F6F2F7);
  opacity: var(--slide-opacity, 0);
  transform: translate3d(0, var(--slide-y, 560px), 0);
  will-change: transform, opacity;
  pointer-events: none;
  background-color: #141017;
  background:
    radial-gradient(circle at 18% 0%, rgba(183,140,255,0.16), transparent 34%),
    linear-gradient(145deg, #2F1F3A 0%, #141017 48%, #0D0D0D 100%);
  border-radius: 20px;
  border: 1px solid rgba(197,166,211,0.18);
  box-shadow: inset 0 1px 0 rgba(246,242,247,0.07), 0 18px 46px rgba(0,0,0,0.36);
  overflow: hidden;
  display: grid;
  grid-template-columns: clamp(58px, 5.3vw, 74px) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: clamp(12px, 1.35vw, 18px);
  row-gap: clamp(8px, 1vw, 12px);
}

.mht-project-story__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.06), transparent 30%);
  pointer-events: none;
}

.mht-project-story__card.is-active {
  border-color: rgba(197,166,211,0.24);
}

/* MIDO PHASE 10.10.61 — prevent first-paint flash before deferred JS runs.
   The PHP now prints is-story-ready immediately, so desktop receives the locked
   layout before JS. This rule makes the first active card visible during that
   initial paint instead of showing a nav-only / half-built state. JS inline
   variables take over immediately after initialization. */
.mht-project-story__card.is-active {
  --slide-y: 0px;
  --slide-opacity: 1;
}

.mht-project-story__card-title,
.mht-project-story__icon,
.mht-project-story__card-body {
  position: relative;
  z-index: 2;
}

.mht-project-story__card-title {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  align-items: baseline;
  gap: .38em;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-display, "Migra", Georgia, serif);
  font-size: clamp(1.55rem, 2.2vw, 2.25rem);
  line-height: .95;
  font-weight: 700;
  letter-spacing: -.045em;
}

.mht-project-story__card-num {
  flex: 0 0 auto;
  color: #C5A6D3;
}

.mht-project-story__card-label {
  min-width: 0;
  color: #F6F2F7;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mht-project-story__icon {
  grid-column: 1;
  grid-row: 3;
  align-self: center;
  justify-self: center;
  width: clamp(58px, 5.3vw, 74px);
  height: clamp(58px, 5.3vw, 74px);
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}



/* =============================================================================
   MIDO PHASE 10.10.54 — Project story animated icon set
   Each card type gets its own expressive inline SVG icon. The wrapper keeps the
   same locked How I Think sizing language; only transform/opacity/stroke motion.
   ========================================================================== */
.mht-project-story__icon-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.mht-project-story__icon-svg * {
  transform-box: fill-box;
  transform-origin: center;
}

/* Challenge — tangled resistance / unclear blocker */
.mht-project-story__card--challenge .mido-story-icon__challenge-line--a {
  animation: mht-story-tangle-a 4.2s ease-in-out infinite;
}
.mht-project-story__card--challenge .mido-story-icon__challenge-line--b {
  animation: mht-story-tangle-b 4.2s ease-in-out .25s infinite;
}
.mht-project-story__card--challenge .mido-story-icon__challenge-block {
  animation: mht-story-soft-resist 4.2s ease-in-out infinite;
}
.mht-project-story__card--challenge .mido-story-icon__challenge-point {
  animation: mht-story-pulse 3.2s ease-in-out infinite;
}

/* Direction — scattered options resolving into one route */
.mht-project-story__card--direction .mido-story-icon__direction-path--ghost {
  animation: mht-story-fade-route 4.6s ease-in-out infinite;
}
.mht-project-story__card--direction .mido-story-icon__direction-path--low {
  animation-delay: .5s;
}
.mht-project-story__card--direction .mido-story-icon__direction-path--clear {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  animation: mht-story-route-draw 4.6s ease-in-out infinite;
}
.mht-project-story__card--direction .mido-story-icon__direction-node--choice,
.mht-project-story__card--direction .mido-story-icon__direction-node--end,
.mht-project-story__card--direction .mido-story-icon__direction-signal {
  animation: mht-story-node-signal 4.6s ease-in-out infinite;
}
.mht-project-story__card--direction .mido-story-icon__direction-node--end { animation-delay: .38s; }
.mht-project-story__card--direction .mido-story-icon__direction-signal { animation-delay: .65s; }

/* Identity — pieces aligning into a usable visual system */
.mht-project-story__card--identity .mido-story-icon__identity-grid {
  animation: mht-story-grid-breathe 5.2s ease-in-out infinite;
}
.mht-project-story__card--identity .mido-story-icon__identity-piece--square {
  animation: mht-story-snap-square 5.2s ease-in-out infinite;
}
.mht-project-story__card--identity .mido-story-icon__identity-piece--diamond {
  animation: mht-story-snap-diamond 5.2s ease-in-out .15s infinite;
}
.mht-project-story__card--identity .mido-story-icon__identity-piece--circle {
  animation: mht-story-snap-circle 5.2s ease-in-out .3s infinite;
}
.mht-project-story__card--identity .mido-story-icon__identity-dot {
  animation: mht-story-pulse 3.4s ease-in-out infinite;
}

/* Website — hierarchy forming inside an interface */
.mht-project-story__card--website .mido-story-icon__website-frame {
  animation: mht-story-frame-breathe 4.8s ease-in-out infinite;
}
.mht-project-story__card--website .mido-story-icon__website-block--hero,
.mht-project-story__card--website .mido-story-icon__website-block--line,
.mht-project-story__card--website .mido-story-icon__website-block--cta,
.mht-project-story__card--website .mido-story-icon__website-panel {
  animation: mht-story-block-settle 4.8s ease-in-out infinite;
}
.mht-project-story__card--website .mido-story-icon__website-block--line { animation-delay: .18s; }
.mht-project-story__card--website .mido-story-icon__website-block--cta { animation-delay: .36s; }
.mht-project-story__card--website .mido-story-icon__website-panel { animation-delay: .54s; }

/* Store — product perception / buyer confidence */
.mht-project-story__card--store .mido-story-icon__store-bag,
.mht-project-story__card--store .mido-story-icon__store-handle {
  animation: mht-story-frame-breathe 5s ease-in-out infinite;
}
.mht-project-story__card--store .mido-story-icon__store-product--one,
.mht-project-story__card--store .mido-story-icon__store-product--two,
.mht-project-story__card--store .mido-story-icon__store-line {
  animation: mht-story-product-lift 5s ease-in-out infinite;
}
.mht-project-story__card--store .mido-story-icon__store-product--two { animation-delay: .18s; }
.mht-project-story__card--store .mido-story-icon__store-line { animation-delay: .32s; }
.mht-project-story__card--store .mido-story-icon__store-signal {
  animation: mht-story-pulse 3s ease-in-out infinite;
}

/* Experience — connected touchpoints / user journey */
.mht-project-story__card--experience .mido-story-icon__experience-path {
  animation: mht-story-flow-dash 5.4s ease-in-out infinite;
}
.mht-project-story__card--experience .mido-story-icon__experience-node--one,
.mht-project-story__card--experience .mido-story-icon__experience-node--two,
.mht-project-story__card--experience .mido-story-icon__experience-node--three {
  animation: mht-story-node-signal 5.4s ease-in-out infinite;
}
.mht-project-story__card--experience .mido-story-icon__experience-node--two { animation-delay: .45s; }
.mht-project-story__card--experience .mido-story-icon__experience-node--three { animation-delay: .9s; }
.mht-project-story__card--experience .mido-story-icon__experience-signal {
  animation: mht-story-orbit-soft 5.4s ease-in-out infinite;
}
.mht-project-story__card--experience .mido-story-icon__experience-ring {
  transform-origin: 40px 40px;
  animation: mht-story-ring-spin 14s linear infinite;
}

/* Result — resolved system / visible lift */
.mht-project-story__card--result .mido-story-icon__result-line {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: mht-story-result-draw 4.8s ease-in-out infinite;
}
.mht-project-story__card--result .mido-story-icon__result-dot--one,
.mht-project-story__card--result .mido-story-icon__result-dot--two,
.mht-project-story__card--result .mido-story-icon__result-dot--final {
  animation: mht-story-node-signal 4.8s ease-in-out infinite;
}
.mht-project-story__card--result .mido-story-icon__result-dot--two { animation-delay: .28s; }
.mht-project-story__card--result .mido-story-icon__result-dot--final { animation-delay: .55s; }
.mht-project-story__card--result .mido-story-icon__result-check {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: mht-story-check-draw 4.8s ease-in-out infinite;
}

@keyframes mht-story-pulse {
  0%, 100% { opacity: .92; transform: scale(1); }
  50%      { opacity: .54; transform: scale(.78); }
}
@keyframes mht-story-node-signal {
  0%, 100% { opacity: .95; transform: scale(1); }
  42%      { opacity: .42; transform: scale(.76); }
  68%      { opacity: 1; transform: scale(1.12); }
}
@keyframes mht-story-tangle-a {
  0%, 100% { opacity: .9; transform: translate3d(0,0,0); stroke-dashoffset: 0; }
  50%      { opacity: .48; transform: translate3d(2px,-2px,0); stroke-dashoffset: 10; }
}
@keyframes mht-story-tangle-b {
  0%, 100% { opacity: .82; transform: translate3d(0,0,0); stroke-dashoffset: 0; }
  50%      { opacity: .38; transform: translate3d(-2px,2px,0); stroke-dashoffset: -9; }
}
@keyframes mht-story-soft-resist {
  0%, 100% { opacity: .88; transform: scale(1); }
  50%      { opacity: .54; transform: scale(.94); }
}
@keyframes mht-story-fade-route {
  0%, 100% { opacity: .86; }
  48%      { opacity: .18; }
}
@keyframes mht-story-route-draw {
  0%   { stroke-dashoffset: 70; opacity: .28; }
  42%  { stroke-dashoffset: 0; opacity: 1; }
  72%  { stroke-dashoffset: 0; opacity: .95; }
  100% { stroke-dashoffset: -70; opacity: .28; }
}
@keyframes mht-story-grid-breathe {
  0%, 100% { opacity: .70; }
  50%      { opacity: .24; }
}
@keyframes mht-story-snap-square {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); opacity: .95; }
  46%      { transform: translate3d(4px,-3px,0) rotate(-4deg); opacity: .56; }
  68%      { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
}
@keyframes mht-story-snap-diamond {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); opacity: .96; }
  46%      { transform: translate3d(-4px,3px,0) rotate(5deg); opacity: .52; }
  68%      { transform: translate3d(0,0,0) rotate(0deg); opacity: 1; }
}
@keyframes mht-story-snap-circle {
  0%, 100% { transform: translate3d(0,0,0) scale(1); opacity: .9; }
  46%      { transform: translate3d(3px,4px,0) scale(.90); opacity: .50; }
  68%      { transform: translate3d(0,0,0) scale(1); opacity: 1; }
}
@keyframes mht-story-frame-breathe {
  0%, 100% { opacity: .92; }
  50%      { opacity: .48; }
}
@keyframes mht-story-block-settle {
  0%, 100% { opacity: .92; transform: translate3d(0,0,0); }
  44%      { opacity: .45; transform: translate3d(0,5px,0); }
  66%      { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes mht-story-product-lift {
  0%, 100% { opacity: .88; transform: translate3d(0,0,0); }
  48%      { opacity: .48; transform: translate3d(0,-4px,0); }
  70%      { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes mht-story-flow-dash {
  0%, 100% { opacity: .82; stroke-dashoffset: 0; }
  50%      { opacity: .36; stroke-dashoffset: -18; }
}
@keyframes mht-story-orbit-soft {
  0%, 100% { opacity: .94; transform: translate3d(-18px,12px,0) scale(.82); }
  50%      { opacity: .54; transform: translate3d(18px,-12px,0) scale(1); }
}
@keyframes mht-story-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes mht-story-result-draw {
  0%   { stroke-dashoffset: 80; opacity: .25; }
  42%  { stroke-dashoffset: 0; opacity: 1; }
  76%  { stroke-dashoffset: 0; opacity: .95; }
  100% { stroke-dashoffset: -80; opacity: .25; }
}
@keyframes mht-story-check-draw {
  0%, 48% { stroke-dashoffset: 24; opacity: .18; }
  66%, 88% { stroke-dashoffset: 0; opacity: .95; }
  100% { stroke-dashoffset: 24; opacity: .18; }
}

.mht-project-story__card-body {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
  min-width: 0;
  max-width: none;
  margin: 0;
  color: rgba(245,243,247,.90);
  font-family: var(--font-sans, "Blauer Nue", system-ui, sans-serif);
  font-size: clamp(.82rem, .92vw, .98rem);
  line-height: 1.46;
  letter-spacing: .005em;
  white-space: normal;
  overflow-wrap: break-word;
}

@media (min-width: 901px) {
  .mht-project-story.is-story-ready {
    height: calc((var(--story-count, 4) + 1) * 100svh);
    min-height: 0;
    padding: 0;
    margin: 0;
  }

  .mht-project-story.is-story-ready .mht-project-story__inner {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    max-width: none;
    height: 100svh;
    min-height: 0;
    margin: 0;
    padding: clamp(28px, 4vw, 46px) var(--page-x, 24px);
    display: grid;
    place-items: center;
    overflow: hidden;
  }

  .mht-project-story.is-story-ready .mht-project-story__header {
    position: absolute;
    left: 50%;
    top: 30%;
    z-index: 3;
    width: min(1320px, calc(100% - 60px));
    height: auto;
    margin: 0;
    display: block;
    transform: translate(-50%, -50%) translateY(var(--story-title-y, 0px)) scale(var(--story-title-scale, .34));
    transform-origin: center;
    opacity: var(--story-title-opacity, 1);
  }

  .mht-project-story.is-story-ready .mht-project-story__kicker {
    display: none;
  }

  .mht-project-story.is-story-ready .mht-project-story__title {
    width: auto;
    margin: 0;
    padding-bottom: .12em;
    font-size: clamp(4rem, 11vw, 12rem);
    line-height: .82;
    letter-spacing: -.075em;
    text-align: center;
  }

  .mht-project-story.is-story-ready .mht-project-story__scroll {
    width: min(1500px, 100%);
    height: min(620px, 92svh);
    min-height: 0;
    margin: 0;
    padding: 0;
    transform: translateY(var(--story-scene-y, 360px));
    will-change: transform;
  }

  .mht-project-story.is-story-ready .mht-project-story__sticky {
    --story-card-w: clamp(315px, 28vw, 430px);
    --story-card-h: clamp(205px, 18.5vw, 245px);
    --story-nav-w: clamp(230px, 18vw, 280px);
    width: 100%;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--story-nav-w) var(--story-card-w);
    gap: min(50px, 3vw);
    align-items: center;
    justify-content: center;
    place-content: center;
    padding: 0;
    border: 0;
    border-radius: clamp(22px, 3vw, 38px);
  }

  .mht-project-story.is-story-ready .mht-project-story__nav {
    align-self: center;
    justify-self: end;
    width: var(--story-nav-w);
    height: var(--story-card-h);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(197,166,211,0.18);
    border-radius: 20px;
    background:
      radial-gradient(circle at 18% 0%, rgba(183,140,255,0.10), transparent 34%),
      linear-gradient(145deg, #2F1F3A 0%, #141017 48%, #0D0D0D 100%);
    box-shadow: inset 0 1px 0 rgba(246,242,247,0.07), 0 18px 46px rgba(0,0,0,0.30);
  }

  .mht-project-story__nav-item {
    flex: 1 1 0;
    min-height: 0;
    display: block;
    border-left: 2px solid transparent;
    border-bottom: 1px solid rgba(197,166,211,0.10);
    color: rgba(221,214,227,0.72);
  }

  .mht-project-story__nav-item:last-child {
    border-bottom: 0;
  }

  .mht-project-story__nav-button {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
  }

  .mht-project-story__nav-item.is-active {
    background: rgba(183,140,255,0.08);
    border-left-color: #B78CFF;
    color: #F6F2F7;
  }

  .mht-project-story__nav-item.is-active .mht-project-story__nav-num {
    color: #B78CFF;
  }

  .mht-project-story__nav-num {
    font-size: clamp(1.15rem, 1.45vw, 1.55rem);
  }

  .mht-project-story__nav-label {
    font-size: .70rem;
    line-height: 1.1;
    letter-spacing: .14em;
  }

  .mht-project-story__nav-item.is-active .mht-project-story__nav-label {
    color: #F6F2F7;
  }

  .mht-project-story.is-story-ready .mht-project-story__stage {
    align-self: center;
    justify-self: start;
    width: var(--story-card-w);
    height: var(--story-card-h);
    min-height: 0;
  }
}

@media (max-width: 900px) {
  .mht-project-story {
    height: auto;
    padding: 82px 0 90px;
  }

  .mht-project-story__inner {
    width: 100%;
    max-width: none;
    padding-inline: var(--page-x, 24px);
  }

  .mht-project-story__header {
    position: relative;
    width: 100%;
    margin: 0 auto 8px;
    text-align: left;
  }

  .mht-project-story__kicker {
    display: none;
  }

  .mht-project-story__title {
    align-items: flex-start;
    font-size: clamp(3.2rem, 16vw, 6.4rem);
    line-height: .82;
    letter-spacing: -.075em;
    text-align: left;
  }

  .mht-project-story__scroll {
    width: 100%;
    height: auto;
    transform: none !important;
  }

  .mht-project-story__sticky {
    width: 100%;
    min-height: 0;
    padding: 24px 18px;
    border-radius: 22px;
  }

  .mht-project-story__progress {
    width: clamp(58px, 18vw, 92px);
  }

  .mht-project-story__nav {
    display: none;
  }

  .mht-project-story__stage {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }

  .mht-project-story__visual-track {
    position: relative;
    inset: auto;
    display: grid;
    gap: 16px;
    width: 100%;
    height: auto;
  }

  .mht-project-story__card {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 22px;
    opacity: 1 !important;
    transform: none !important;
    display: grid;
    grid-template-columns: clamp(70px, 6.4vw, 90px) minmax(0, 1fr);
    grid-template-rows: auto minmax(28px, 1fr) auto;
    column-gap: clamp(15px, 1.7vw, 24px);
    row-gap: 20px;
  }

  .mht-project-story__card-title {
    font-size: clamp(1.45rem, 7vw, 2.45rem);
    line-height: .95;
  }

  .mht-project-story__icon {
    width: clamp(70px, 6.4vw, 90px);
    height: clamp(70px, 6.4vw, 90px);
  }

  .mht-project-story__card-body {
    font-size: clamp(.82rem, .92vw, .98rem);
    line-height: 1.46;
  }
}

@media (max-width: 560px) {
  .mht-project-story__sticky {
    padding: 24px 18px;
  }

  /* MIDO PHASE 10.10.63 — mobile card stacking fix.
     Root cause: when Project Story / How Enquiries Work collapsed to one column,
     the icon and body kept their desktop grid-row: 3 assignments, so the text
     painted over the icon. Keep the locked How I Think mobile rhythm: title on
     top, spacer, icon, then body. */
  .mht-project-story__card {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(48px, 1fr) auto auto;
    gap: 18px;
  }

  .mht-project-story__card-title {
    grid-column: 1;
    grid-row: 1;
  }

  .mht-project-story__icon {
    grid-column: 1;
    grid-row: 3;
    width: 72px;
    height: 72px;
    align-self: end;
    justify-self: start;
  }

  .mht-project-story__card-body {
    grid-column: 1;
    grid-row: 4;
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mht-project-story,
  .mht-project-story__scroll,
  .mht-project-story__sticky,
  .mht-project-story__header,
  .mht-project-story__card {
    transform: none !important;
    transition: none !important;
  }
  .mht-project-story__card {
    opacity: 1 !important;
  }
}


/* MIDO PHASE 10.10.55 — project story nav is scroll indicator only, not clickable. */
.mht-project-story__nav,
.mht-project-story__nav-item,
.mht-project-story__nav-button {
  pointer-events: none !important;
  cursor: default !important;
  user-select: none;
}

.mht-project-story__nav-item:hover:not(.is-active) {
  background: transparent !important;
  border-left-color: transparent !important;
  color: rgba(221,214,227,0.72) !important;
}

.mht-project-story__nav-item:hover:not(.is-active) .mht-project-story__nav-num {
  color: #C5A6D3 !important;
}

.mht-project-story__nav-item:hover:not(.is-active) .mht-project-story__nav-label {
  color: rgba(221,214,227,.78) !important;
}

/* =============================================================================
   MIDO PHASE 10.10.64 — Mobile section heading scale lock
   Project Story and How Enquiries Work share this component. Desktop keeps the
   locked title-behind-scene behavior; mobile uses the standard homepage section
   heading scale so a process section never overpowers the page title.
   ========================================================================== */
@media (max-width: 900px) {
  .mht-project-story__title {
    font-size: var(--content-heading-size) !important;
    line-height: var(--content-heading-line-height) !important;
    letter-spacing: var(--content-heading-letter-spacing) !important;
    font-weight: var(--content-heading-weight) !important;
  }
}

/* =============================================================================
   MIDO PHASE 10.10.65 — Sticky story mobile card consistency
   Project Story and How Enquiries Work share this component. These rules make
   mobile cards compact, consistent, and icon-forward instead of oversized.
   ========================================================================== */
@media (max-width: 900px) {
  .mht-project-story__visual-track {
    gap: 14px !important;
  }

  .mht-project-story__card {
    min-height: clamp(276px, 58vw, 318px) !important;
    height: clamp(276px, 58vw, 318px) !important;
    padding: clamp(18px, 4.8vw, 22px) !important;
    border-radius: 20px !important;
    display: grid !important;
    grid-template-columns: clamp(80px, 14vw, 96px) minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    column-gap: clamp(14px, 3.6vw, 20px) !important;
    row-gap: 14px !important;
    align-content: stretch !important;
  }

  .mht-project-story__card-title {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: clamp(1.45rem, 5.7vw, 2.05rem) !important;
    line-height: .95 !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }

  .mht-project-story__icon {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: clamp(80px, 14vw, 96px) !important;
    height: clamp(80px, 14vw, 96px) !important;
    align-self: center !important;
    justify-self: start !important;
  }

  .mht-project-story__card-body {
    grid-column: 2 !important;
    grid-row: 3 !important;
    align-self: center !important;
    min-width: 0 !important;
    font-size: clamp(.82rem, 2.1vw, .96rem) !important;
    line-height: 1.42 !important;
    letter-spacing: .005em !important;
  }
}

@media (max-width: 560px) {
  .mht-project-story__sticky {
    padding: 20px 16px !important;
  }

  .mht-project-story__visual-track {
    gap: 14px !important;
  }

  .mht-project-story__card {
    min-height: 292px !important;
    height: 292px !important;
    padding: 20px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) auto auto !important;
    row-gap: 14px !important;
  }

  .mht-project-story__card-title {
    font-size: clamp(1.45rem, 7vw, 1.92rem) !important;
    line-height: .96 !important;
  }

  .mht-project-story__icon {
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 84px !important;
    height: 84px !important;
    align-self: end !important;
    justify-self: start !important;
  }

  .mht-project-story__card-body {
    grid-column: 1 !important;
    grid-row: 4 !important;
    align-self: start !important;
    font-size: .9rem !important;
    line-height: 1.42 !important;
  }
}


/* =============================================================================
   MIDO PHASE 10.10.71 — Editable story cards must be allowed to grow on mobile
   The previous fixed mobile height clipped longer Project Story text. Cards now
   keep the same minimum visual size but expand when admin copy needs room.
   ========================================================================== */
@media (max-width: 900px) {
  .mht-project-story__card {
    height: auto !important;
    min-height: clamp(276px, 58vw, 318px) !important;
    overflow: hidden !important;
  }

  .mht-project-story__card-body {
    overflow: visible !important;
    max-height: none !important;
  }
}

@media (max-width: 560px) {
  .mht-project-story__card {
    height: auto !important;
    min-height: 292px !important;
    grid-template-rows: auto minmax(28px, 1fr) auto auto !important;
  }

  .mht-project-story__card-title {
    white-space: normal !important;
    text-wrap: balance;
  }
}