/* =============================================================================
   Phase 151O.8.4.1 — Global Section Heading Hard Lock

   One public section-title system. This file loads late on purpose and owns
   section-level heading typography, title-case, accent gradient, and clipping
   safety without targeting raw h1/h2/h3 tags or changing section layouts.

   Do not use this file for cards, project story motion cards, buttons, or CTA
   sizing. Those systems stay owned by their existing files.
   ========================================================================== */

:root {
  --mht-section-title-main: var(--text-primary, #F6F2F7);
  --mht-section-title-main-soft: var(--text-secondary, #DDD6E3);
  --mht-section-title-accent-solid: #B78CFF;
  --mht-section-title-accent-end: #8E63A3;
  --mht-section-title-accent-gradient: linear-gradient(90deg, #B78CFF 0%, #8E63A3 100%);
  --mht-section-title-accent-shadow: 0 0 24px rgba(183, 140, 255, .18);
  --mht-section-title-size: var(--content-heading-size, clamp(2.6rem, 3.4vw + .3rem, 4.8rem));
  --mht-section-title-compact-size: clamp(1.75rem, 2.1vw + .25rem, 2.75rem);
  --mht-section-title-large-size: clamp(4rem, 10.4vw, 11.25rem);
  --mht-section-title-line-height: 1.04;
  --mht-section-title-compact-line-height: 1.08;
  --mht-section-title-large-line-height: .94;
  --mht-section-title-letter-spacing: -.055em;
}

html[data-mht-theme-effective="light"],
html[data-mht-theme="light"] {
  --mht-section-title-main: #2F1F3A;
  --mht-section-title-main-soft: #4C345D;
  --mht-section-title-accent-solid: #B78CFF;
  --mht-section-title-accent-end: #8E63A3;
  --mht-section-title-accent-gradient: linear-gradient(90deg, #B78CFF 0%, #8E63A3 100%);
  --mht-section-title-accent-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 0 18px rgba(142, 99, 163, .13);
}

/* Canonical section heading class. Scope stays opt-in. */
.mht-section-title {
  box-sizing: border-box;
  max-width: 100%;
  margin-top: 0;
  color: var(--mht-section-title-main) !important;
  font-family: var(--font-display, "Migra", "Playfair Display", Georgia, serif) !important;
  font-weight: 700;
  letter-spacing: var(--mht-section-title-letter-spacing);
  line-height: var(--mht-section-title-line-height);
  text-transform: capitalize;
  text-wrap: balance;
  overflow: visible !important;
  padding-block: .04em .12em;
  padding-inline: .02em;
  -webkit-font-smoothing: antialiased;
}

.mht-content-heading.mht-section-title,
.mht-heading.mht-section-title,
.mht-faq__heading.mht-section-title,
.mht-about-story__heading.mht-section-title,
.mht-contact-fallback__heading.mht-section-title {
  font-size: var(--mht-section-title-size) !important;
  line-height: var(--mht-section-title-line-height) !important;
  letter-spacing: var(--mht-section-title-letter-spacing) !important;
}

.mht-section-title--compact,
.mht-project-case__section-heading.mht-section-title--compact,
.mht-contact-fallback__heading.mht-section-title--compact {
  font-size: var(--mht-section-title-compact-size) !important;
  line-height: var(--mht-section-title-compact-line-height) !important;
  letter-spacing: -.045em !important;
}

.mht-section-title--large,
.mht-section-title--hero,
.mht-who-scroll__title.mht-section-title,
.mht-project-story__title.mht-section-title,
.mht-about-page .mht-about-process--slides .mht-about-process__title.mht-section-title {
  color: var(--mht-section-title-main) !important;
  line-height: var(--mht-section-title-large-line-height) !important;
  overflow: visible !important;
}


/* What I Changed / enquiry process titles use the same one-line rhythm as the
   global model. Cards and JS remain untouched. */
.mht-project-story__title.mht-section-title {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: .16em;
  width: auto;
  max-width: min(100%, 1200px);
  margin-inline: auto;
}

.mht-project-story__title.mht-section-title span,
.mht-project-story__title.mht-section-title em {
  display: inline-block !important;
}

/* Title pieces. Important bug fix from 151O.8.4: the generic span rule must not
   recolor accent spans back to the main color. */
.mht-section-title__main,
.mht-section-title > span:not(.mht-section-title__accent):not(.mht-content-kicker__line),
.mht-section-title .mht-section-title__main,
.mht-faq__heading-white,
.mht-about-story__heading-white {
  color: var(--mht-section-title-main) !important;
  -webkit-text-fill-color: var(--mht-section-title-main) !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none;
  overflow: visible !important;
}

/* Locked accent: one purple gradient, italic, no animation, no cyan/teal/orange. */
.mht-section-title em,
.mht-section-title__accent,
.mht-section-title .mht-section-title__accent,
.mht-faq__heading-gradient,
.mht-about-story__heading-gradient,
.mht-who-scroll__title.mht-section-title em,
.mht-project-story__title.mht-section-title em,
.mht-content-heading.mht-section-title em,
.mht-heading.mht-section-title em {
  display: inline-block;
  max-width: 100%;
  color: var(--mht-section-title-accent-solid) !important;
  background: var(--mht-section-title-accent-gradient) !important;
  background-image: var(--mht-section-title-accent-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  animation: none !important;
  text-shadow: var(--mht-section-title-accent-shadow);
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: inherit;
  overflow: visible !important;
  padding-inline: .015em .07em;
  padding-block: .02em .08em;
  margin-inline-end: -.035em;
}

.mht-section-title .mht-gradient-text,
.mht-section-title .mht-gradient-text--aurora,
.mht-section-title .animated-gradient,
.mht-section-title .mht-animated-gradient,
.mht-section-title [class*="gradient"] {
  color: var(--mht-section-title-accent-solid) !important;
  background: var(--mht-section-title-accent-gradient) !important;
  background-image: var(--mht-section-title-accent-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: none !important;
  filter: none !important;
  text-shadow: var(--mht-section-title-accent-shadow);
}

/* Legacy split heading aliases now use the same system. */
.mht-faq__heading-white,
.mht-faq__heading-gradient,
.mht-about-story__heading-white,
.mht-about-story__heading-gradient {
  overflow: visible !important;
}

/* FAQ kept as a split title, but its accent is no longer a separate flat/white
   system. This directly fixes the all-white FAQ regression. */
.mht-faq__heading.mht-section-title {
  overflow: visible !important;
}

.mht-faq__heading .mht-section-title__main,
.mht-faq__heading .mht-section-title__accent {
  display: block !important;
}

/* Sticky/hero-style section titles should not split into separate lines on
   normal desktop widths. Mobile is allowed to wrap instead of crop. */
@media (min-width: 761px) {
  .mht-who-scroll__title.mht-section-title {
    width: min(1400px, calc(100% - 40px)) !important;
    white-space: nowrap !important;
    text-wrap: nowrap;
    font-size: clamp(4rem, 9.6vw, 10.9rem) !important;
    padding-inline: .08em;
  }

  .mht-who-scroll__title.mht-section-title em {
    white-space: nowrap;
  }

  .mht-project-story__title.mht-section-title,
  .mht-about-page .mht-about-process--slides .mht-about-process__title.mht-section-title {
    text-wrap: balance;
    overflow: visible !important;
  }
}

/* No-cropping safety for wrappers that previously clipped Migra italic glyphs or
   gradient text edges. This is scoped to actual heading containers, not cards. */
.mht-section-title,
.mht-section-title *,
.mht-section-head,
.mht-proof__intro,
.mht-thinking__head,
.mht-build__head,
.mht-faq__head,
.mht-page-cta__content,
.mht-about-process__header,
.mht-project-story__header,
.mht-post-single__related-inner,
.mht-resources__head {
  overflow: visible !important;
}

/* Preserve story-card layout ownership. This marker is deliberate proof that the
   title lock does not reapply glass or layout patches to story cards. */
.mht-project-story__card {
  --mht-project-story-card-protected: 1;
}

@media (max-width: 760px) {
  :root {
    --mht-section-title-size: clamp(2.25rem, 9.4vw, 3.9rem);
    --mht-section-title-compact-size: clamp(1.65rem, 6.8vw, 2.55rem);
    --mht-section-title-line-height: 1.06;
  }

  .mht-section-title {
    text-wrap: pretty;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  .mht-who-scroll__title.mht-section-title {
    width: min(100%, calc(100% - 28px)) !important;
    font-size: clamp(3.1rem, 15.5vw, 6.8rem) !important;
    line-height: .98 !important;
    white-space: normal;
  }
}

/* High-specificity cleanup for older About heading rules that used !important.
   Same global accent, not another style. */
.mht-about-page .mht-about-beliefs__title.mht-section-title em,
.mht-about-page .mht-about-process__title.mht-section-title em,
.mht-about-page .mht-about-process--slides .mht-about-process__title.mht-section-title em,
.mht-about-page .mht-about-fit__title.mht-section-title em {
  display: inline-block !important;
  color: var(--mht-section-title-accent-solid) !important;
  background: var(--mht-section-title-accent-gradient) !important;
  background-image: var(--mht-section-title-accent-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
  animation: none !important;
  text-shadow: var(--mht-section-title-accent-shadow) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  overflow: visible !important;
  padding-inline: .015em .07em;
  padding-block: .02em .08em;
}


/* =============================================================================
   Phase 151O.8.4.2 — Global Heading Overflow + Gradient Token Enforcement Fix

   This is the final hard lock for public section headings. It fixes the two
   live-review failures from 151O.8.4.1:
   1) right-side clipping on large italic/gradient words;
   2) inconsistent accent gradients between sections.

   The rule is intentionally narrow: only opt-in section title classes and their
   known legacy aliases. No raw h1/h2/h3 targeting, no button sizing, no cards,
   no project story motion-card layout.
   ========================================================================== */

:root {
  --mht-section-title-accent-solid: #B78CFF;
  --mht-section-title-accent-end: #8E63A3;
  --mht-section-title-accent-gradient: linear-gradient(90deg, #B78CFF 0%, #8E63A3 100%);
  --mht-section-title-clip-safe-inline: .18em;
  --mht-section-title-clip-safe-block-start: .10em;
  --mht-section-title-clip-safe-block-end: .20em;
  --mht-section-title-line-height: 1.08;
  --mht-section-title-large-line-height: 1.02;
}

html[data-mht-theme-effective="light"],
html[data-mht-theme="light"] {
  --mht-section-title-accent-solid: #B78CFF;
  --mht-section-title-accent-end: #8E63A3;
  --mht-section-title-accent-gradient: linear-gradient(90deg, #B78CFF 0%, #8E63A3 100%);
}

.mht-section-title,
.mht-content-heading.mht-section-title,
.mht-heading.mht-section-title,
.mht-faq__heading.mht-section-title,
.mht-about-story__heading.mht-section-title,
.mht-contact-fallback__heading.mht-section-title,
.mht-page-cta__heading.mht-section-title,
.mht-project-story__title.mht-section-title,
.mht-project-case__section-heading.mht-section-title {
  box-sizing: border-box !important;
  display: block;
  max-width: min(100%, 100%) !important;
  min-width: 0;
  color: var(--mht-section-title-main) !important;
  overflow: visible !important;
  overflow-clip-margin: 2em;
  contain: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  line-height: var(--mht-section-title-line-height) !important;
  padding-block: var(--mht-section-title-clip-safe-block-start) var(--mht-section-title-clip-safe-block-end) !important;
  padding-inline: var(--mht-section-title-clip-safe-inline) !important;
  margin-inline: calc(var(--mht-section-title-clip-safe-inline) * -1) !important;
  text-transform: capitalize;
  text-wrap: balance;
}

.mht-section-title--large,
.mht-section-title--hero,
.mht-who-scroll__title.mht-section-title,
.mht-project-story__title.mht-section-title,
.mht-about-page .mht-about-process--slides .mht-about-process__title.mht-section-title,
.mht-page-cta__heading.mht-section-title {
  line-height: var(--mht-section-title-large-line-height) !important;
  padding-block: .12em .24em !important;
  padding-inline: .22em !important;
  margin-inline: -.22em !important;
}

.mht-section-title *,
.mht-section-title__main,
.mht-section-title__accent,
.mht-section-title em,
.mht-faq__heading-white,
.mht-faq__heading-gradient,
.mht-about-story__heading-white,
.mht-about-story__heading-gradient,
.mht-section-heading-gradient {
  overflow: visible !important;
  overflow-clip-margin: 2em;
  contain: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* Main part: always solid readable text. This selector deliberately excludes
   accent aliases so the FAQ/About split cannot become all-white again. */
.mht-section-title__main,
.mht-section-title > span:not(.mht-section-title__accent):not(.mht-faq__heading-gradient):not(.mht-about-story__heading-gradient):not(.mht-content-kicker__line),
.mht-section-title .mht-section-title__main,
.mht-faq__heading-white,
.mht-about-story__heading-white {
  color: var(--mht-section-title-main) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: var(--mht-section-title-main) !important;
  text-shadow: none !important;
}

/* Accent part: one global token, same exact gradient in dark and light mode. */
.mht-section-title em,
.mht-section-title__accent,
.mht-section-title .mht-section-title__accent,
.mht-faq__heading-gradient,
.mht-about-story__heading-gradient,
.mht-section-title .mht-gradient-text,
.mht-section-title .mht-gradient-text--aurora,
.mht-section-title .animated-gradient,
.mht-section-title .mht-animated-gradient,
.mht-section-title .mht-section-heading-gradient,
.mht-section-title [class*="gradient"] {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: content-box !important;
  color: var(--mht-section-title-accent-solid) !important;
  background: var(--mht-section-title-accent-gradient) !important;
  background-image: var(--mht-section-title-accent-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-fill-color: transparent !important;
  font-style: italic !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  letter-spacing: inherit;
  padding-inline: .02em .20em !important;
  padding-block: .03em .14em !important;
  margin-inline-end: -.02em !important;
  text-shadow: none !important;
  animation: none !important;
  filter: none !important;
  white-space: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Sections whose wrappers previously clipped large italic glyphs or text edges. */
.mht-section-head,
.mht-work__intro,
.mht-work__heading-group,
.mht-proof__intro,
.mht-thinking__head,
.mht-build__head,
.mht-build__head > div,
.mht-faq__head,
.mht-page-cta__content,
.mht-about-story__header,
.mht-about-process__header,
.mht-about-beliefs__head,
.mht-about-fit__head,
.mht-project-story__header,
.mht-project-case__section-head,
.mht-post-single__related-inner,
.mht-home-problem__head,
.mht-resources__head,
.mht-storefront-lite__head {
  overflow: visible !important;
  overflow-clip-margin: 2em;
  contain: none !important;
  clip-path: none !important;
}

/* Split headings retain their line breaks, but they now share one title system. */
.mht-faq__heading .mht-section-title__main,
.mht-faq__heading .mht-section-title__accent,
.mht-about-story__heading .mht-section-title__main,
.mht-about-story__heading .mht-section-title__accent {
  display: block !important;
  max-width: none !important;
}

/* CTA screenshot heading: glass/size stays owned by the CTA files; this only
   protects gradient text edges. */
.mht-page-cta__heading.mht-section-title {
  width: auto !important;
  max-width: min(850px, 100%) !important;
}

/* How I Think and story headings stay one-line when there is enough viewport,
   but fall back to wrapping before clipping. */
@media (min-width: 761px) {
  .mht-who-scroll__title.mht-section-title {
    width: auto !important;
    max-width: calc(100vw - (var(--site-gutter, 40px) * 2)) !important;
    white-space: nowrap !important;
    text-wrap: nowrap;
  }

  .mht-project-story__title.mht-section-title,
  .mht-about-page .mht-about-process--slides .mht-about-process__title.mht-section-title {
    width: auto !important;
    max-width: calc(100vw - (var(--site-gutter, 40px) * 2)) !important;
  }
}

@media (max-width: 760px) {
  .mht-section-title,
  .mht-content-heading.mht-section-title,
  .mht-heading.mht-section-title,
  .mht-faq__heading.mht-section-title,
  .mht-page-cta__heading.mht-section-title,
  .mht-project-story__title.mht-section-title {
    white-space: normal !important;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    padding-inline: .14em !important;
    margin-inline: -.14em !important;
  }

  .mht-section-title em,
  .mht-section-title__accent,
  .mht-section-title .mht-section-title__accent,
  .mht-faq__heading-gradient,
  .mht-about-story__heading-gradient {
    padding-inline-end: .22em !important;
  }
}


/* =============================================================================
   Phase 151O.8.4.3 — Process / story heading scale parity fix

   How I Think is the approved process-heading reference. The single-project
   What I Changed section and the Enquiries How It Works section share the
   project-story sticky process component, so their headings must use the same
   large title-behind-container scale.

   This is typography/heading parity only. Do not put glass back on
   .mht-project-story__card, do not change cards, JS, CTA sizing, buttons, or
   the locked #B78CFF → #8E63A3 accent gradient.
   ========================================================================== */
@media (min-width: 901px) {
  .mht-project-story.is-story-ready .mht-project-story__title.mht-section-title--hero {
    width: auto !important;
    max-width: calc(100vw - (var(--site-gutter, 40px) * 2)) !important;
    font-size: clamp(4rem, 9.6vw, 10.9rem) !important;
    line-height: var(--mht-section-title-large-line-height) !important;
    letter-spacing: -.075em !important;
    white-space: nowrap !important;
    text-wrap: nowrap;
  }

  .mht-project-story.is-story-ready .mht-project-story__title.mht-section-title--hero em {
    white-space: nowrap;
  }
}

/* =============================================================================
   Phase 151O.8.4.4 — Process Heading Bottom Overflow Fix

   151O.8.4.3 correctly restored the large How I Think scale for process/story
   headings, but the project/enquiry process title line box stayed too tight for
   Migra italic gradient glyphs. This block opens vertical room for the shared
   project-story process-heading contract only. It does not shrink headings,
   change gradients, touch cards, CTA, buttons, JS, or project source.
   ========================================================================== */
:root {
  --mht-process-heading-line-height-safe: 1.10;
  --mht-process-heading-safe-block-start: .16em;
  --mht-process-heading-safe-block-end: .40em;
  --mht-process-heading-accent-safe-block-start: .08em;
  --mht-process-heading-accent-safe-block-end: .30em;
}

.mht-project-story__header,
.mht-project-story.is-story-ready .mht-project-story__header {
  overflow: visible !important;
  overflow-clip-margin: 3em;
  contain: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  padding-block-end: .18em;
}

.mht-project-story__title.mht-section-title--hero,
.mht-project-story__title.mht-section-title--hero *,
.mht-project-story__title.mht-section-title--hero em,
.mht-project-story__title.mht-section-title--hero .mht-section-title__accent {
  overflow: visible !important;
  overflow-clip-margin: 3em;
  contain: none !important;
  clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.mht-project-story__title.mht-section-title--hero {
  line-height: var(--mht-process-heading-line-height-safe) !important;
  padding-block: var(--mht-process-heading-safe-block-start) var(--mht-process-heading-safe-block-end) !important;
}

.mht-project-story__title.mht-section-title--hero em,
.mht-project-story__title.mht-section-title--hero .mht-section-title__accent {
  line-height: var(--mht-process-heading-line-height-safe) !important;
  padding-block: var(--mht-process-heading-accent-safe-block-start) var(--mht-process-heading-accent-safe-block-end) !important;
  vertical-align: baseline;
}

@media (min-width: 901px) {
  .mht-project-story.is-story-ready .mht-project-story__title.mht-section-title--hero {
    line-height: var(--mht-process-heading-line-height-safe) !important;
    padding-block: var(--mht-process-heading-safe-block-start) var(--mht-process-heading-safe-block-end) !important;
    overflow: visible !important;
    overflow-clip-margin: 3em;
  }

  .mht-project-story.is-story-ready .mht-project-story__title.mht-section-title--hero em,
  .mht-project-story.is-story-ready .mht-project-story__title.mht-section-title--hero .mht-section-title__accent {
    line-height: var(--mht-process-heading-line-height-safe) !important;
    padding-block: var(--mht-process-heading-accent-safe-block-start) var(--mht-process-heading-accent-safe-block-end) !important;
    overflow: visible !important;
    overflow-clip-margin: 3em;
  }
}

@media (max-width: 760px) {
  .mht-project-story__title.mht-section-title--hero {
    line-height: 1.12 !important;
    padding-block: .14em .36em !important;
  }

  .mht-project-story__title.mht-section-title--hero em,
  .mht-project-story__title.mht-section-title--hero .mht-section-title__accent {
    line-height: 1.12 !important;
    padding-block: .08em .28em !important;
  }
}