/* Mobile reading keeps the active story as one native scroll surface.
   Every rule requires both the mobile breakpoint and the controller contract;
   desktop composition and the standalone research document are unaffected. */
@media (max-width: 760px), (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  html[data-mobile-reading="true"],
  html[data-mobile-reading="true"] body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }
  html[data-mobile-reading="true"] body {
    position: fixed;
    inset: 0;
    width: 100%;
  }
  html[data-mobile-reading="true"] .scroll-story {
    min-height: 100dvh !important;
    height: 100dvh !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] {
    box-sizing: border-box;
    inset: 90px 0 calc(124px + env(safe-area-inset-bottom)) !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 20px 24px 32px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    overflow-anchor: none;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgb(215 180 74 / .45) transparent;
    scroll-padding-block: 20px;
    text-align: left;
  }
  #stage[data-mobile-reading="true"] .copy[data-page][aria-hidden="false"],
  #stage[data-mobile-reading="true"] .copy[data-page]:not([aria-hidden]) {
    pointer-events: auto;
  }
  #stage[data-mobile-reading="true"] .copy[data-page][aria-hidden="true"] {
    pointer-events: none;
  }

  /* Release viewport anchors and compressed portrait/landscape grids. Content
     stays in semantic DOM order: heading, introduction, complete reading units. */
  #stage[data-mobile-reading="true"] .copy[data-page] :is(
    .copy-content, .chapter-layout, .future-layout, .future-copy,
    .hero, .chapter-hero, .future-hero, .scene-subtitle,
    .business-area-title, .identity-name, .chapter-manifesto,
    .reading-panel, .chapter-prose, [data-story-panels],
    .business-introduction, .business-portals, .narrative-graphic,
    .scene-infographic, .research-feature
  ) {
    position: static !important;
    inset: auto !important;
    grid-area: auto !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    overflow: visible !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] :is(
    .copy-content, .chapter-layout, .future-layout, .future-copy
  ) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] :is(.hero, .chapter-hero, .future-hero) {
    margin: 0 !important;
    text-align: left !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] :is(.hero h2, .chapter-hero h3, .future-hero h2) {
    font-size: clamp(29px, 8.3vw, 45px) !important;
    line-height: 1.28 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] :is(.chapter-kicker, .chapter-line) {
    margin-inline: 0 !important;
    text-align: left !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .scene-subtitle {
    margin: 0 !important;
    font-size: 17px !important;
    line-height: 1.6 !important;
    white-space: normal !important;
    text-align: left !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .business-area-heading {
    font-size: clamp(34px, 9.2vw, 48px) !important;
    line-height: 1.22 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .business-area-title {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.45 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] > :is(.reading-panel, .chapter-prose, [data-story-panels]) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    grid-template-rows: none !important;
    grid-auto-rows: max-content !important;
    align-content: start !important;
    gap: 22px !important;
    margin-top: 28px !important;
    padding: 0 !important;
    opacity: 1 !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] > .story-panel-navigation {
    display: none !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .story-unit {
    grid-area: auto !important;
    min-width: 0;
    max-height: none !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] :is(.story-unit--copy, .body-copy, .identity-name) {
    font-size: 15px !important;
    line-height: 1.85 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] :is(.narrative-graphic, .scene-infographic) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  /* Opening retains its oversized word treatment, with its supporting line
     following it instead of occupying a separate fixed sea coordinate. */
  #stage[data-mobile-reading="true"] #copy-one .hero h1 {
    font-size: clamp(76px, 23vw, 112px) !important;
    line-height: 1.12 !important;
  }
  html[lang="en"] #stage[data-mobile-reading="true"] #copy-one .hero h1 {
    font-size: clamp(56px, 17vw, 82px) !important;
  }
  #stage[data-mobile-reading="true"] #copy-one .scene-subtitle {
    margin-top: 22px !important;
    font-size: clamp(20px, 5.4vw, 27px) !important;
  }

  /* Identity, product and people content no longer shrinks to fit one screen. */
  #stage[data-mobile-reading="true"] #founder > [data-editorial-content] {
    display: flex !important;
    flex-direction: column !important;
    gap: 22px !important;
  }
  #stage[data-mobile-reading="true"] #founder .founder-portrait {
    order: 3;
    position: relative !important;
    inset: auto !important;
    grid-area: auto !important;
    float: none !important;
    width: min(240px, 100%) !important;
    height: 180px !important;
    flex: 0 0 180px !important;
    margin: 0 0 0 auto !important;
    align-self: flex-end !important;
  }
  #stage[data-mobile-reading="true"] #founder .founder-signature {
    order: 4;
    width: 100% !important;
    margin: 0 !important;
  }
  #stage[data-mobile-reading="true"] #identity .story-unit--brand {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 16px !important;
  }
  #stage[data-mobile-reading="true"] #identity .story-unit--brand p {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }
  #stage[data-mobile-reading="true"] #identity .identity-palette {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #stage[data-mobile-reading="true"] #business .business-portals {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 0 28px !important;
  }
  #stage[data-mobile-reading="true"] #business .business-branch {
    width: 100% !important;
    grid-template-rows: 116px auto !important;
  }
  #stage[data-mobile-reading="true"] #business .chapter-hero h3 {
    font-size: clamp(26px, 7.2vw, 38px) !important;
  }
  #stage[data-mobile-reading="true"] #products .product-track {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    gap: 10px !important;
    padding: 20px !important;
  }
  #stage[data-mobile-reading="true"] #products .product-track > * {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
  #stage[data-mobile-reading="true"] #products .product-track > h3 {
    font-size: 23px !important;
    line-height: 1.4 !important;
  }
  #stage[data-mobile-reading="true"] #products .product-track > p:not(.track-eyebrow),
  #stage[data-mobile-reading="true"] #research .research-feature > p {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .future-copy > * {
    grid-area: auto !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .future-eyebrow {
    margin: 0 !important;
    min-height: 0 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .future-body {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.85 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .future-title {
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1.5 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .future-graphic {
    width: min(340px, 100%) !important;
    margin: 8px auto 0 !important;
  }
  #stage[data-mobile-reading="true"] .copy[data-page] .future-progress {
    position: static !important;
    inset: auto !important;
    margin: 4px 0 0 !important;
    justify-content: flex-start;
    order: 10;
  }
  #stage[data-mobile-reading="true"] #people .people-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
  }
  #stage[data-mobile-reading="true"] #people .person-card {
    grid-template-columns: 64px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 16px !important;
  }
  #stage[data-mobile-reading="true"] #people .person-photo {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 64px !important;
    height: 78px !important;
    min-height: 0 !important;
  }
  #stage[data-mobile-reading="true"] #people .person-meta {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin: 0 !important;
  }
  #stage[data-mobile-reading="true"] #people .person-bio {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.8 !important;
  }
  #stage[data-mobile-reading="true"] #contact .contact-offices {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  #stage[data-mobile-reading="true"] #contact .contact-actions { margin: 0 !important; }
  #stage[data-mobile-reading="true"] .scene-navigation {
    position: absolute !important;
    inset: auto auto calc(60px + env(safe-area-inset-bottom)) 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 156px !important;
    height: 48px !important;
    box-sizing: border-box;
    padding: 1px !important;
    gap: 2px !important;
    z-index: 30;
  }
  #stage[data-mobile-reading="true"] .scene-navigation button {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex: 0 0 44px !important;
    padding: 11px !important;
  }
  #stage[data-mobile-reading="true"] .scene-navigation-count {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: center;
    gap: 5px;
    font: 10px/1.4 monospace;
  }
  #stage[data-mobile-reading="true"] .meta,
  #stage[data-mobile-reading="true"] .stage-bottom { display: none !important; }

}
@media (max-width: 760px) and (orientation: landscape), (max-width: 1024px) and (hover: none) and (pointer: coarse) and (orientation: landscape) {
  #stage[data-mobile-reading="true"] .copy[data-page] {
    inset-block-start: 72px !important;
    padding-top: 16px !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  html[data-mobile-reading="true"] .header { padding: 10px 24px; gap: 12px; }
  html[data-mobile-reading="true"] .header .desktop-navigation { display: none; }
  html[data-mobile-reading="true"] .header .mobile-navigation { display: block; }
  html[data-mobile-reading="true"] .header .brand-context { display: none; }
  #stage[data-mobile-reading="true"] .office-locations {
    left: 50% !important;
    right: auto !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    width: max-content !important;
    max-width: calc(100% - 48px) !important;
  }
}