/* Matterport service page: image-led presentation focused on client outcomes. */
.matterport-intro { padding-bottom: clamp(3rem, 5vw, 5rem); }
.matterport-intro-cta { margin-top: var(--space-6); }
.matterport-hero { margin: 0 auto clamp(5rem, 9vw, 9rem); }
.matterport-hero picture,
.matterport-hero img { display: block; width: 100%; }
.matterport-hero img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 48%; }

.matterport-positioning { padding-block: clamp(5rem, 9vw, 9rem); color: var(--color-text-inverse); background: var(--color-charcoal); }
.matterport-positioning-grid,
.matterport-copy-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 1.4vw, 1.25rem); }
.matterport-positioning-grid > .site-eyebrow,
.matterport-copy-grid > .site-eyebrow { grid-column: 1 / span 3; margin: .45rem 0 0; }
.matterport-positioning-grid > .site-eyebrow { color: var(--color-text-inverse-muted); }
.matterport-positioning-grid > div { grid-column: 4 / span 7; }
.matterport-positioning h2,
.matterport-section-header h2,
.matterport-copy-main h2 { margin: 0; font-size: var(--type-section-title); line-height: 1.06; }
.matterport-positioning-grid > div > p { max-width: 43rem; margin: var(--space-5) 0 0; color: var(--color-text-inverse-muted); font-size: var(--type-lede); line-height: 1.55; }

.matterport-uses { padding-block: clamp(5rem, 10vw, 10rem); }
.matterport-section-header { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1rem, 1.4vw, 1.25rem); margin-bottom: clamp(3rem, 6vw, 6rem); }
.matterport-section-header > .site-eyebrow { grid-column: 1 / span 3; margin: .45rem 0 0; color: var(--color-text-muted); }
.matterport-section-header h2 { grid-column: 4 / span 7; max-width: 16ch; }
.matterport-use { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5) clamp(1rem, 1.4vw, 1.25rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: var(--border-width) solid var(--color-border); }
.matterport-use:last-child { border-bottom: var(--border-width) solid var(--color-border); }
.matterport-use-number { grid-column: 1 / span 2; margin: .35rem 0 0; color: var(--color-text-muted); font-size: var(--type-small); }
.matterport-use > div { grid-column: 4 / span 5; }
.matterport-use .site-eyebrow { margin: 0 0 var(--space-4); color: var(--color-text-muted); }
.matterport-use h3 { max-width: 17ch; margin: 0; font-size: var(--type-subsection-title); line-height: 1.1; }
.matterport-use > div > p:last-child { max-width: 36rem; margin: var(--space-4) 0 0; color: var(--color-text-muted); line-height: 1.7; }
.matterport-use ul,
.matterport-output-list { margin: 0; padding: 0; list-style: none; border-top: var(--border-width) solid var(--color-border); }
.matterport-use ul { grid-column: 10 / -1; }
.matterport-use li,
.matterport-output-list li { padding-block: var(--space-3); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--type-small); }

.matterport-deliverables { padding-block: clamp(5rem, 9vw, 9rem); background: var(--color-warm-white); }
.matterport-copy-grid > .site-eyebrow { color: var(--color-text-muted); }
.matterport-copy-main { grid-column: 4 / span 5; }
.matterport-copy-main > p { max-width: 39rem; margin: var(--space-5) 0 0; color: var(--color-text-muted); line-height: 1.7; }
.matterport-output-list { grid-column: 10 / -1; }

@media (max-width: 767.98px) {
  .matterport-intro { padding-bottom: var(--space-7); }
  .matterport-hero { width: 100%; margin-bottom: var(--space-8); }
  .matterport-hero img { aspect-ratio: var(--intrinsic-aspect-ratio); height: auto; }
  .matterport-positioning-grid,
  .matterport-copy-grid,
  .matterport-section-header { display: block; }
  .matterport-positioning-grid > .site-eyebrow,
  .matterport-copy-grid > .site-eyebrow,
  .matterport-section-header > .site-eyebrow { margin: 0 0 var(--space-4); }
  .matterport-section-header { margin-bottom: var(--space-7); }
  .matterport-use { display: block; }
  .matterport-use-number { margin: 0 0 var(--space-5); }
  .matterport-use ul { margin-top: var(--space-6); }
  .matterport-output-list { margin-top: var(--space-7); }
}

@media (prefers-reduced-motion: reduce) {
  .matterport-page .service-faq-marker::before,
  .matterport-page .service-faq-marker::after { transition: none; }
}