/* Mobile parity layer.
   Loaded after the page-specific styles so mobile keeps the same information
   and controls as desktop without disturbing the desktop composition. */

@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .v4-shell,
  .v4-shell > *,
  .dv4-section__head > *,
  .productv4-hero__inner > *,
  .pv4-architecture__workspace > * {
    min-width: 0;
  }

  .v4-section-title,
  .dv4-section__head h2,
  .dv4-section__head p,
  .av4-next h2,
  .av4-next p,
  .pv4-operation h2,
  .pv4-operation p {
    max-width: 100%;
  }

  a,
  button,
  summary,
  input,
  select,
  textarea {
    touch-action: manipulation;
  }

  button,
  [role="button"],
  .v4-button {
    min-height: 44px;
  }

  /* Home: the architecture route remains complete and readable. */
  .architecture-intro,
  .architecture-intro__inner {
    min-height: 0;
  }

  .architecture-intro {
    overflow: hidden;
    background: #11110f;
  }

  .architecture-intro::before {
    background: none;
  }

  .architecture-intro__landscape {
    height: 600px;
    object-position: 62% center;
  }

  .architecture-intro__inner {
    display: block;
    padding-block: 58px 64px;
  }

  .architecture-intro__copy {
    position: relative;
    inset: auto;
    width: auto;
    transform: none;
  }

  .architecture-intro__heading,
  .architecture-intro h2 {
    max-width: 100%;
  }

  .architecture-intro h2 {
    margin-top: 18px;
    font-size:clamp(2.35rem, 11.2vw, 3.25rem);
    line-height: .94;
    overflow-wrap: normal;
    word-break: normal;
  }

  .architecture-intro__explanation {
    width: auto;
    max-width: 38rem;
    margin-top: 28px;
  }

  .architecture-intro__route {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 42px 0 0;
  }

  .architecture-intro__route li,
  .architecture-intro__route li:nth-child(n) {
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
    min-height: 86px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 5px 9px;
    align-content: center;
    padding: 15px 16px;
    color: #f7f2e9;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius:2px;
    background: rgba(10, 10, 8, .7);
    box-shadow:none;
    text-shadow:none;
    transform: none;
    backdrop-filter:none;
  }

  .architecture-intro__route li::before {
    position: static;
    grid-row: 1 / 3;
    align-self: center;
    justify-self: center;
    width: 10px;
    height: 10px;
  }

  .architecture-intro__route b,
  .architecture-intro__route strong,
  .architecture-intro__route span {
    grid-column: 2;
    margin: 0;
  }

  .architecture-intro__route b {
    align-self: end;
    font-size:14px;
  }

  .architecture-intro__route strong {
    font-size:1.04rem;
    line-height: 1.08;
  }

  .architecture-intro__route span {
    font-size:.74rem;
    line-height: 1.3;
  }

  /* Home: all six chapters share one sticky film and remain scrollable. */
  .architecture-story {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .architecture-video-chapter {
    position: relative;
    isolation: isolate;
    overflow: clip;
  }

  .architecture-video-chapter > .architecture-scroll__film {
    position: sticky;
    inset: 0 auto auto;
    z-index: 0;
    width: 100%;
    height: 100svh;
    margin-bottom: -100svh;
    object-fit: cover;
    object-position: center;
  }

  .architecture-video-chapter__veil {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100svh;
    margin-bottom: -100svh;
    pointer-events: none;
    background: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy],
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] + .architecture-scroll__scene[data-video-copy],
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy]:last-child {
    position: relative;
    z-index: 2;
    min-height: 112svh;
    height: auto;
    display: flex;
    align-items: flex-end;
    overflow: visible;
    isolation: auto;
    background: transparent;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy]::after,
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__image {
    display: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 50svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 0;
    padding: 92px var(--v4-content-gutter, 20px) 48px;
    color: #f6f5f0;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy::before {
    display: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy > span,
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy h2,
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy p {
    max-width: 100%;
    opacity: 1;
    filter:none;
    transform: none;
  }

  .architecture-video-chapter .architecture-scroll__copy h2,
  .architecture-video-chapter .architecture-scroll__copy h2.architecture-scroll__title--two-lines {
    font-size:clamp(2.55rem, 12vw, 3.65rem);
    line-height: .96;
    overflow-wrap: normal;
    word-break: normal;
  }

  .architecture-video-chapter .architecture-scroll__copy p {
    margin-top: 18px;
    font-size:.98rem;
    line-height: 1.5;
  }

  /* Home: cards grow with their content instead of clipping it. */
  .v4-system-card,
  .v4-audit-card,
  .v4-route {
    height: auto;
    min-height: 0;
  }

  .v4-system-card {
    padding-bottom: 24px;
  }

  .v4-system-card h3,
  #transformation-title,
  .v4-final h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .v4-audit-card,
  .v4-route {
    padding-block: 30px;
  }

  .v4-route__action {
    position: static;
    display: inline-flex;
    margin-top: 28px;
  }

  /* Home cases: every selector is visible; the stage never exceeds its box. */
  .v4-cases--showcase {
    overflow: hidden;
  }

  .v4-case-showcase,
  .v4-case-showcase__stage,
  .v4-case-showcase__panel,
  .v4-case-showcase__content {
    min-width: 0;
    max-width: 100%;
  }

  .v4-case-showcase__stage {
    width: 100%;
    min-height: 0;
    height: clamp(580px, 154vw, 690px);
  }

  .v4-case-showcase__content {
    box-sizing: border-box;
    width: 100%;
    padding: 132px 20px 28px;
  }

  .v4-case-showcase__content h3,
  .v4-case-showcase__content p {
    width: auto;
    max-width: 100%;
  }

  .v4-case-showcase__content h3 {
    font-size:clamp(1.9rem, 9vw, 2.65rem);
    line-height: 1;
    overflow-wrap: anywhere;
  }

  .v4-case-showcase__metric {
    top: 18px;
    right: 18px;
    max-width: calc(100% - 36px);
  }

  .v4-case-showcase__rail {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    overflow: visible;
    padding: 0;
  }

  .v4-case-showcase__preview {
    width: 100%;
    min-height: 88px;
    grid-template-columns: 92px minmax(0, 1fr);
    scroll-snap-align: none;
  }

  .v4-case-showcase__preview img {
    width: 92px;
  }

  /* Home platform card. */
  .v4-platform__layout,
  .v4-platform__product,
  .v4-platform__product-display,
  .v4-platform__product-grid {
    min-width: 0;
    max-width: 100%;
  }

  .v4-platform__product {
    width: 100%;
    min-height: 0;
  }

  .v4-platform__product-display {
    gap: 14px;
  }

  .v4-platform__product-display strong {
    flex: 0 1 auto;
    font-size:clamp(5.3rem, 25vw, 7rem);
  }

  .v4-platform__product-display span {
    min-width: 0;
    font-size:clamp(.84rem, 4vw, 1.05rem);
  }

  .v4-platform__copy h2 {
    max-width: 100%;
    font-size:clamp(2.7rem, 12vw, 3.7rem);
    overflow-wrap: normal;
  }

  /* Services: all five formats and full card copy are visible. */
  .dv4-format-nav__grid {
    width: min(calc(100% - 30px), 1720px);
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .dv4-format-nav a {
    min-width: 0;
    min-height: 68px;
    border-left: 1px solid rgba(255, 255, 255, .11);
    border-right: 1px solid rgba(255, 255, 255, .11);
    border-bottom: 1px solid rgba(255, 255, 255, .11);
  }

  #formats-title b {
    white-space: normal;
  }

  .dv4-section__head h2,
  .dv4-transform__copy h2,
  .dv4-fractional__copy h2 {
    font-size:clamp(2.1rem, 9vw, 3.2rem);
  }

  #transformation-title {
    font-size:clamp(2rem, 8vw, 3rem);
  }

  .dv4-card {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  .dv4-card h3 {
    max-width: 100%;
  }

  /* About: remove negative-width portrait and keep long headings inside. */
  .av4-hero,
  .av4-next {
    max-width: 100%;
    overflow: hidden;
  }

  .av4-hero__portrait {
    margin-inline: 0;
    overflow: clip;
  }

  .av4-hero__portrait figcaption strong {
    font-size:.94rem;
    overflow-wrap: anywhere;
  }

  .av4-story__media,
  .av4-story__media figure,
  .av4-next__card {
    min-width: 0;
    max-width: 100%;
  }

  .av4-next__card {
    min-height: 0;
  }

  .av4-next .dv4-section__head h2 {
    font-size:clamp(2rem, 8.2vw, 2.9rem);
    overflow-wrap: normal;
  }

  /* Platform: diagram columns collapse without hidden side overflow. */
  .pv4-architecture,
  .pv4-spheres,
  .pv4-architecture__workspace,
  .pv4-system-map,
  .pv4-operation {
    max-width: 100%;
  }

  .pv4-system-map {
    width: 100%;
    overflow: visible;
  }

  .pv4-system-map__core {
    width: min(230px, 72vw);
  }

  .pv4-layer-detail {
    height: auto;
    min-height: 0;
  }

  .pv4-hero h1 {
    font-size:clamp(2rem, 8.5vw, 2.8rem);
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .pv4-operation .dv4-spotlight__grid h2,
  .pv4-page .dv4-faq__intro h2 {
    max-width: 100%;
    font-size:clamp(2.1rem, 8.7vw, 3.15rem);
    overflow-wrap: anywhere;
  }

  /* Product details: retain the desktop process diagram on small screens. */
  .productv4-hero {
    min-height: 0;
  }

  .productv4-hero__inner {
    min-height: 0;
    align-content: end;
    padding-block: 40px;
  }

  .productv4-hero__system {
    display: block;
    align-self: auto;
    margin-top: 10px;
    padding: 20px;
    border-radius:2px;
  }

  .productv4-hero__system ol {
    margin-block: 14px;
  }

  .productv4-hero__system li {
    min-width: 0;
    min-height: 48px;
  }

  .productv4-hero__system li span,
  .productv4-hero__system p {
    overflow-wrap: break-word;
  }

  .productv4-head,
  .productv4-head > * {
    min-width: 0;
    max-width: 100%;
  }

  .productv4-head h2 {
    max-width: 100%;
    font-size:clamp(1.95rem, 8.2vw, 3rem);
    overflow-wrap: normal;
  }

  .productv4-kpi-grid,
  .productv4-kpi-grid > article,
  .productv4-proof__grid > div,
  .productv4-related__grid,
  .productv4-related__grid > a {
    min-width: 0;
    max-width: 100%;
  }

  .productv4-kpi-grid > article {
    box-sizing: border-box;
    width: 100%;
  }

  .productv4-kpi-grid strong,
  .productv4-kpi-grid h3,
  .productv4-proof strong {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .productv4-kpi-grid strong {
    white-space: normal;
  }

  /* Case details: numbered chapter heads must let their copy column shrink. */
  .casev3-chapter__head,
  .casev3-chapter__head > *,
  .casev3-solution,
  .casev3-solution__intro,
  .casev3-results,
  .casev3-results > article {
    min-width: 0;
    max-width: 100%;
  }

  .casev3-results strong,
  .casev3-proof strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .architecture-intro h2 {
    font-size:clamp(2.55rem, 13vw, 3.2rem);
  }

  .architecture-video-chapter .architecture-scroll__copy h2,
  .architecture-video-chapter .architecture-scroll__copy h2.architecture-scroll__title--two-lines {
    font-size:clamp(2.25rem, 11vw, 3rem);
  }

  .v4-case-showcase__stage {
    height: 620px;
  }

  .v4-case-showcase__content {
    padding-inline: 18px;
  }

  .v4-case-showcase__content h3 {
    font-size:1.9rem;
  }

  .v4-platform__product-display strong {
    font-size:5.25rem;
  }

  main h1,
  main h2,
  main h3 {
    max-width: 100% !important;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .architecture-intro h2 {
    font-size:clamp(2.15rem, 10vw, 2.7rem);
  }

  .dv4-card h3,
  .productv4-head h2 {
    font-size:clamp(1.8rem, 8vw, 2.35rem);
  }

  .pv4-architecture__workspace {
    padding: 12px;
  }

  .pv4-system-map {
    padding-inline: 12px;
  }

  .pv4-system-map__core {
    width: min(185px, 62vw);
  }

  .pv4-deploy {
    padding-inline: 20px;
  }

  .casev3-chapter__head {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
  }

  .casev3-results strong {
    font-size:clamp(1.55rem, 8.5vw, 2.2rem);
  }

  .productv4-kpi-grid strong {
    font-size:clamp(1.75rem, 9vw, 2.25rem);
  }

  .casev3-proof {
    grid-template-columns: 1fr;
  }

  .casev3-proof > div {
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
    min-height: 72px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }

  .casev3-proof > div:last-child {
    border-bottom: 0;
  }
}

@media (min-width: 761px) and (max-width: 900px) {
  /* Tablet users see the complete case selector without an undiscoverable rail. */
  .architecture-intro__route,
  .dv4-format-nav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dv4-format-nav a:last-child {
    grid-column: 1 / -1;
  }

  .v4-case-showcase__rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    overflow: visible;
  }
}

/* The architecture film is one paused timeline on every viewport. A fixed
   layer avoids sticky positioning being cancelled by the page's overflow
   container; JavaScript exposes it only while the chapter owns the screen. */
@media (prefers-reduced-motion: no-preference) {
  .architecture-video-chapter {
    position: relative;
    isolation: isolate;
    overflow: visible;
    background: #080807;
  }

  .architecture-video-chapter > .architecture-scroll__film {
    position: fixed;
    inset: 0;
    z-index: 0;
    width: 100vw;
    height: 100svh;
    margin: 0;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .architecture-video-chapter.is-in-view > .architecture-scroll__film {
    opacity: 1;
    visibility: visible;
  }

  .architecture-video-chapter__veil {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: auto;
    height: auto;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, background 320ms ease;
  }

  .architecture-video-chapter.is-in-view .architecture-video-chapter__veil {
    opacity: 1;
    visibility: visible;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy],
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] + .architecture-scroll__scene[data-video-copy],
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy]:last-child {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 0;
    overflow: visible;
    isolation: isolate;
    background: transparent;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy]::after,
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__image {
    display: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy {
    position: fixed;
    top: 0;
    z-index: 2;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin: 0;
    color: #f6f5f0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    transition: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy].is-active .architecture-scroll__copy {
    opacity: 1;
    visibility: visible;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy::before {
    display: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy > span,
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy h2,
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy p {
    opacity: 0;
    filter:none;
    transform: none;
    transition: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy].is-active .architecture-scroll__copy > span,
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy].is-active .architecture-scroll__copy h2,
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy].is-active .architecture-scroll__copy p {
    max-width: 100%;
    opacity: 1;
    filter:none;
    transform: none;
  }
}

@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] {
    height: 190svh;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy]:last-child {
    height: 290svh;
  }

  .architecture-video-chapter__veil {
    background: none;
  }

  .architecture-video-chapter.is-copy-right .architecture-video-chapter__veil {
    background: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy {
    left: 0;
    justify-content: center;
    width: min(44vw, 675px);
    height: 100svh;
    padding: clamp(104px, 14vh, 154px) var(--v4-content-gutter, 3.4vw) clamp(64px, 9vh, 112px);
  }

  .architecture-video-chapter > .architecture-scroll__scene--copy-right[data-video-copy] .architecture-scroll__copy {
    right: 0;
    left: auto;
  }
}

@media (max-width: 820px) and (prefers-reduced-motion: no-preference) {
  .architecture-story {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy],
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] + .architecture-scroll__scene[data-video-copy],
  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy]:last-child {
    height: 118svh;
  }

  .architecture-video-chapter__veil,
  .architecture-video-chapter.is-copy-right .architecture-video-chapter__veil {
    background: none;
  }

  .architecture-video-chapter > .architecture-scroll__scene[data-video-copy] .architecture-scroll__copy,
  .architecture-video-chapter > .architecture-scroll__scene--copy-right[data-video-copy] .architecture-scroll__copy {
    inset: 0;
    justify-content: flex-end;
    width: 100%;
    height: 100svh;
    min-height: 0;
    padding: 92px var(--v4-content-gutter, 20px) max(48px, calc(32px + env(safe-area-inset-bottom)));
  }
}