/* V162 — unified typographic hierarchy and title positioning.
   This file changes hierarchy, spacing and alignment only. Existing page
   structure, imagery, content and interaction remain untouched. */

:root {
  --morphd-label-size: 10px;
  --morphd-label-leading: 1.45;
  --morphd-label-tracking: .14em;
  --morphd-title-page: clamp(45px, 5vw, 72px);
  --morphd-title-section: clamp(35px, 3.75vw, 54px);
  --morphd-title-subsection: clamp(31px, 3.06vw, 44px);
  --morphd-title-component: clamp(23px, 2.1vw, 30px);
  --morphd-leading-page: .98;
  --morphd-leading-section: 1.08;
  --morphd-leading-subsection: 1.08;
  --morphd-label-title-gap: 18px;
  --morphd-title-copy-gap: 24px;
}

/* One label system everywhere. */
.section-index,
.journey-index,
.project-story__label,
.eyebrow {
  margin: 0 0 var(--morphd-label-title-gap) !important;
  font-size: var(--morphd-label-size) !important;
  font-weight: 400 !important;
  line-height: var(--morphd-label-leading) !important;
  letter-spacing: var(--morphd-label-tracking) !important;
  text-transform: uppercase !important;
}

/* One page-title system across Studio, Services, Process, Projects,
   Contact, Privacy, project case studies and utility pages. */
main h1:not(.matrix-hero__sr-title) {
  margin: 0 !important;
  max-width: 14ch;
  font-size: var(--morphd-title-page) !important;
  font-weight: 400 !important;
  line-height: var(--morphd-leading-page) !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}

/* Primary section titles. */
.journey-intro h2,
.journey-section-head h2,
.simple-work__header h2,
.editorial-testimonials__top h2,
.journey-contact__copy h2,
.section-head h2,
.studio-profile__statement h2,
.founder-profile__copy h2,
.remote-model__copy h2,
.scope-boundaries__copy h2,
.start-checklist__copy h2,
.contact-editorial__copy h2,
.contact-form-section__intro h2,
.page-cta h2,
.space-archive__intro h2,
.project-intro__copy h2,
.design-docs__head h2,
.project-end__content h2,
.project-tour__header h2,
.tour-prototype-note h2 {
  margin: 0 !important;
  max-width: 20ch;
  font-size: var(--morphd-title-section) !important;
  font-weight: 400 !important;
  line-height: var(--morphd-leading-section) !important;
  letter-spacing: -.04em !important;
  text-wrap: balance;
}

/* Repeated content modules share one subsection scale. */
.service-detail__title h2,
.process-phase__copy h2,
.project-story__copy h2,
.space-viewer__meta h2 {
  margin: 0 !important;
  max-width: 24ch;
  font-size: var(--morphd-title-subsection) !important;
  font-weight: 400 !important;
  line-height: var(--morphd-leading-subsection) !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}

/* Component headings remain clearly subordinate. */
.principle-card h3,
.engagement-card h3,
.review-step h3,
.case-summary h3,
.process-phase__outputs h3,
.service-detail__body h3,
.chaos-tour__cover-copy h3 {
  font-size: var(--morphd-title-component) !important;
  font-weight: 400 !important;
  line-height: 1.14 !important;
  letter-spacing: -.025em !important;
}

/* Editorial/legal subheads remain a smaller document tier. */
.policy-page h2,
.privacy-page h2 {
  font-size: clamp(24px, 2vw, 28px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.02em !important;
}

/* Consistent title-to-copy rhythm in page openings. */
.page-hero__copy > p:not(.section-index),
.projects-list-hero__copy > p:not(.section-index),
.contact-page__intro > p:not(.section-index),
.tour-prototype-hero__copy > p:not(.section-index) {
  max-width: 42rem;
  margin-top: var(--morphd-title-copy-gap) !important;
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 1.6 !important;
}

/* Section headers use the same baseline and relationship between title and
   supporting copy, without changing their existing grid structures. */
.section-head,
.journey-section-head,
.simple-work__header,
.editorial-testimonials__top,
.space-archive__intro,
.project-tour__header {
  align-items: end !important;
}

.section-head > p,
.journey-section-head > p,
.simple-work__header > p,
.editorial-testimonials__top > p,
.space-archive__intro > p,
.project-tour__header > p {
  margin: 0 !important;
  max-width: 42rem;
  font-size: clamp(15px, 1.15vw, 17px) !important;
  line-height: 1.62 !important;
}

/* Maintain a consistent separation when title and body copy share one column. */
.founder-profile__copy h2 + p,
.remote-model__copy h2 + p,
.scope-boundaries__copy h2 + p,
.start-checklist__copy h2 + p,
.contact-editorial__copy h2 + p,
.project-intro__copy h2 + p,
.project-story__copy h2 + p,
.process-phase__copy h2 + p {
  margin-top: var(--morphd-title-copy-gap) !important;
}

/* Homepage headings now use the same section-title tier rather than six
   unrelated one-off sizes. Contact keeps its existing column and image-led
   composition; only its type scale is normalised. */
.home-v124 .journey-intro h2,
.home-v124 .journey-section-head h2,
.home-v124 .simple-work__header h2,
.home-v124 .editorial-testimonials__top h2,
.home-v124 .journey-contact__copy h2 {
  font-size: var(--morphd-title-section) !important;
  line-height: var(--morphd-leading-section) !important;
}

@media (max-width: 760px) {
  :root {
    --morphd-label-title-gap: 14px;
    --morphd-title-copy-gap: 20px;
  }

  main h1:not(.matrix-hero__sr-title),
  .journey-intro h2,
  .journey-section-head h2,
  .simple-work__header h2,
  .editorial-testimonials__top h2,
  .journey-contact__copy h2,
  .section-head h2,
  .studio-profile__statement h2,
  .founder-profile__copy h2,
  .remote-model__copy h2,
  .scope-boundaries__copy h2,
  .start-checklist__copy h2,
  .contact-editorial__copy h2,
  .contact-form-section__intro h2,
  .page-cta h2,
  .space-archive__intro h2,
  .project-intro__copy h2,
  .design-docs__head h2,
  .project-end__content h2,
  .service-detail__title h2,
  .process-phase__copy h2,
  .project-story__copy h2 {
    max-width: none;
  }
}

/* Resolve older page-specific mobile selectors with higher specificity. */
@media (max-width: 760px) {
  .contact-page.contact-page--single .contact-page__intro h1,
  .page-hero .page-hero__copy h1,
  .projects-list-hero .projects-list-hero__copy h1,
  .project-hero .project-hero__content h1 {
    font-size: var(--morphd-title-page) !important;
    line-height: var(--morphd-leading-page) !important;
  }

  .process-phase .process-phase__copy h2,
  .service-detail .service-detail__title h2,
  .project-story .project-story__copy h2 {
    font-size: var(--morphd-title-subsection) !important;
    line-height: var(--morphd-leading-subsection) !important;
  }
}

@media (max-width: 760px) {
  body.content-page .process-phase .process-phase__copy h2 {
    font-size: var(--morphd-title-subsection) !important;
    line-height: var(--morphd-leading-subsection) !important;
  }
}

@media (max-width: 760px) {
  .contact-page .contact-page__intro h1 {
    font-size: var(--morphd-title-page) !important;
    line-height: var(--morphd-leading-page) !important;
  }
}

@media (max-width: 760px) {
  body.content-page main .contact-page .contact-page__intro h1 {
    font-size: var(--morphd-title-page) !important;
    line-height: var(--morphd-leading-page) !important;
  }
}
