/* Mobile layout. Desktop styles remain in their existing stylesheets. */
.mobile-menu-toggle { display: none; }
.mobile-menu-extras { display: none; }

@media (max-width: 1399px) {
  .topbar, .detail-top.detail-top--site {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    padding: 0 !important;
  }
  .topbar .topbar-shell, .topbar.is-journey .topbar-shell, .detail-top__shell {
    display: grid !important;
    grid-template-columns: 36px 36px minmax(68px,1fr) auto 36px !important;
    grid-template-rows: 40px !important;
    align-items: center !important;
    gap: 5px !important;
    min-height: 0 !important;
    padding: 5px 7px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }
  .topbar .topbrand, .detail-top--site .detail-brand {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 36px !important;
    height: 36px !important;
    gap: 0 !important;
  }
  .topbar .topbrand-mark, .detail-brand__mark {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }
  .topbar .topbrand img, .detail-brand__mark img { width: 34px !important; height: 34px !important; }
  .topbar .topbrand-copy, .detail-top.detail-top--site .detail-brand__copy { display: none !important; }
  .topbar .topbar-shell > .msk-language-switch, .detail-top__shell > .msk-language-switch {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
  }
  .msk-language-trigger { width: 36px; height: 36px; padding: 0; gap: 0; }
  .msk-language-trigger .msk-language-flag:not(.is-current) { display: none; }
  .msk-language-trigger .msk-language-flag { width: 22px; height: 16px; }
  .msk-language-caret { margin-left: 3px; }
  .msk-language-menu { left: 0; }
  .topbar .topbar-cta, .detail-contact-cta {
    grid-column: 4 !important;
    grid-row: 1 !important;
    justify-self: stretch !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
  }
  .topbar .topbar-cta small, .detail-contact-cta small { display: none !important; }
  .topbar .topbar-cta span, .detail-contact-cta span { font-size: 10px !important; white-space: nowrap !important; }
  .mobile-menu-toggle {
    grid-column: 5 !important;
    grid-row: 1 !important;
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 1px solid rgba(237,207,158,.44);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    color: #f9eee0;
    cursor: pointer;
  }
  .mobile-menu-toggle span { display: block; width: 19px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s; }
  .mobile-nav-open .mobile-menu-toggle span:first-child { transform: translateY(7px) rotate(45deg); }
  .mobile-nav-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
  .mobile-nav-open .mobile-menu-toggle span:last-child { transform: translateY(-7px) rotate(-45deg); }
  .topbar .topbar-shell > .site-search-bar, .detail-top__shell > .site-search-bar {
    position: relative !important;
    grid-column: 3 !important;
    grid-row: 1 !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 36px !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    grid-template-columns: minmax(0,1fr) 32px !important;
  }
  .site-search-bar input { min-width: 0 !important; padding: 0 2px 0 8px !important; font-size: 16px !important; }
  .site-search-bar button { width: 32px !important; height: 36px !important; }
  .site-search-bar svg { width: 18px !important; height: 18px !important; }
  .topbar .topnav, .detail-world-nav {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 50 !important;
    display: none !important;
    width: 100% !important;
    max-height: calc(100svh - 72px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 10px !important;
    border: 1px solid rgba(237,207,158,.42);
    border-radius: 18px;
    background: rgba(15,21,21,.98);
    box-shadow: 0 23px 55px rgba(0,0,0,.55);
    backdrop-filter: blur(20px);
  }
  .topbar .mobile-nav-open .topnav, .mobile-nav-open .detail-world-nav { display: flex !important; }
  .topbar .topnav > a, .detail-world-nav > a {
    flex: 0 0 auto !important;
    display: flex !important;
    width: 100% !important;
    min-height: 46px !important;
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
  .topbar .topnav a > span, .detail-world-nav a > span { display: inline !important; }
  .mobile-menu-extras { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(237,207,158,.2); }
  .mobile-menu-extras:empty { display: none; }
  .topbar .topnav .mobile-menu-extras .nocs-badge,
  .topbar .topnav .mobile-menu-extras .opening-badge {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 48px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    opacity: 1 !important;
    transform: none !important;
    border-radius: 12px !important;
  }
  .topbar .topnav .mobile-menu-extras .nocs-badge .nocs-copy { display: flex !important; }
  .topbar .topnav .mobile-menu-extras .opening-badge strong { font-size: 8px !important; }
  .topbar .topnav .mobile-menu-extras .opening-badge small { font-size: 8px !important; }
  .nav-flyout { display: none !important; }
  .detail-section-nav { display: none !important; }
  .detail-shell { padding-top: 72px !important; padding-bottom: 0 !important; }
  html { scroll-padding-top: 72px !important; }
  .detail-shell :is(section,[id]) { scroll-margin-top: 72px !important; }
  .repair-record-grid { grid-template-columns: 1fr !important; }
  .repair-record-grid article { width: 100% !important; max-width: 100% !important; transform: none !important; }
}

/* SMARTPHONE — own, deliberately reduced presentation (0–767px). */
@media (max-width: 767px) {
  html:has(.brand-scene) { scroll-padding-top: 0 !important; }
  html, body { scroll-snap-type: none !important; scroll-behavior: auto !important; }
  [data-brand-scene], [data-world], [data-story-chapter], .service-compass, [data-reality-interlude], .msk-about, .lean-contact, .ending-scene,
  .detail-shell > section, .detail-body > section { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
  .brand-scene { height: 100svh !important; min-height: 0 !important; }
  .brand-scene, .world, .story-chapter, .service-compass, .reality-interlude, .msk-about, .lean-contact, .ending-scene { scroll-margin-top: 0 !important; }
  .brand-sticky { height: 100svh !important; }
  .world { height: auto !important; min-height: 0 !important; }
  .world-sticky {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 88px 20px 54px !important;
  }
  .world--repair .world-sticky { padding-top: 88px !important; }
  .world-copy, .coffee-copy { width: min(100%,560px) !important; min-width: 0 !important; max-width: 100% !important; margin-inline: auto !important; text-align: center !important; }
  .world-copy h1, .world-copy h2 {
    max-width: 100% !important;
    font-size: clamp(39px, 10vw, 66px) !important;
    line-height: .99 !important;
    overflow-wrap: anywhere;
  }
  .world-copy p { max-width: 100% !important; font-size: 16px !important; line-height: 1.55 !important; }
  .world-copy > small { display: block; text-align: center; }
  .world-summary, .world-summary__facts, .world-more { margin-inline: auto; }
  .world-summary__facts { grid-template-columns: 1fr; gap: 7px; text-align: left; }
  .world-summary__facts span { min-height: 0; padding: 9px 12px; gap: 4px; }
  .world-more { width: 100%; }
  .world--repair .repair-copy .repair-entry { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .world--repair .repair-copy .repair-entry { width: min(100%,560px); margin: 0 auto 22px; }
  .world--repair .repair-copy .repair-entry button { min-height: 74px; padding: 12px 11px; }
  .world--repair .repair-copy .repair-entry span { font-size: clamp(12px,3.5vw,16px); }
  .world--repair .repair-copy .repair-entry small { font-size: 9px; }
  .world-visual, .coffee-visual, .shop-window { max-width: 100% !important; min-height: 260px !important; height: min(50svh,420px) !important; }
  .repair-final strong, .shop-final strong { max-width: 100%; font-size: clamp(36px,10vw,56px) !important; overflow-wrap: anywhere; }
  .world-interact { position: relative !important; inset: auto !important; width: min(100%,560px) !important; max-width: 100% !important; margin: 22px auto 0 !important; }
  .world-interact__choices { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .world-interact__choices button { min-width: 0 !important; }
  .story-chapter {
    height: auto !important;
    min-height: 0 !important;
    padding: 88px 20px 52px !important;
    gap: 24px !important;
  }
  .story-chapter__heading, .story-chapter--repair .story-chapter__heading, .story-chapter--water .story-chapter__heading {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
  .story-chapter__heading small { margin-bottom: 14px !important; font-size: 9px !important; }
  .story-chapter__heading h2, .story-chapter--repair .story-chapter__heading h2, .story-chapter--water .story-chapter__heading h2 {
    font-size: clamp(43px, 11.5vw, 69px) !important;
    line-height: .99 !important;
    letter-spacing: -.045em !important;
    overflow-wrap: anywhere;
  }
  .story-chapter__heading p { margin-top: 18px !important; font-size: 16px !important; line-height: 1.55 !important; }
  .story-chapter__index { top: 72px !important; font-size: 64px !important; }
  .story-chapter--repair .repair-image-stage { max-width: calc(100% + 40px); margin-left: -20px; margin-right: -20px; }
  .repair-explore, .vde-sequence, .water-compare__fact { min-width: 0 !important; max-width: 100% !important; }
  .repair-explore__nav button, .vde-sequence__steps button { min-width: 0; }
  .story-chapter--water .water-compare__fact { width: 100% !important; }
  .story-chapter--water .water-compare__divider::after { content: none !important; }
  .service-compass, .msk-about, .lean-contact, .reality-interlude { height: auto !important; min-height: 0 !important; }
  .service-compass { padding-top: 88px !important; }
  .msk-about { padding-top: 88px !important; }
  .lean-contact-inner { min-height: 0 !important; padding-top: 0 !important; }
  .ending-scene { min-height: 0 !important; }
  .site-footer__grid, .ending-scene .site-footer__grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 25px 16px !important; }
  .site-footer__contact, .ending-scene .site-footer__contact { grid-column: 1 / -1 !important; }
  .site-footer__inner, .ending-scene .site-footer__inner { width: min(calc(100% - 40px),680px) !important; padding-top: 34px !important; }
  .site-footer h2 { margin-bottom: 10px; font-size: 11px; }
  .site-footer__nav a { font-size: 13px !important; line-height: 1.35; }
  .site-footer__bottom { display: flex !important; margin-top: 26px !important; gap: 6px 16px; font-size: 10px; }
  .scene-rail { display: none !important; }
  .nocs-badge, .opening-badge { bottom: calc(8px + env(safe-area-inset-bottom)) !important; }
  .opening-badge { max-width: 128px !important; padding: 8px 9px !important; }
  .nocs-badge { width: 38px !important; height: 38px !important; }
  .detail-shell :is(img,video,svg,canvas), main :is(img,video,svg,canvas) { max-width: 100%; }
  .detail-shell :is(input,textarea,select), .nocs-wizard :is(input,textarea,select), .repair-request :is(input,textarea,select) { max-width: 100%; }
  .nocs-wizard, .repair-request {
    position: fixed !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }
  .nocs-wizard__panel, .repair-request__panel { box-sizing: border-box; height: 100dvh !important; max-height: 100dvh !important; overflow-y: auto !important; overflow-x: hidden !important; }
  .nocs-wizard__panel { padding-top: 56px !important; }
  .nocs-wizard__progress { padding-right: 0 !important; }
  .opening-notice { max-height: 100dvh !important; }
  .legal-main h1 { font-size: clamp(33px,8.7vw,65px); overflow-wrap: anywhere; }
  .legal-header { padding: 12px 14px; }
  .legal-header__inner { display: grid; grid-template-columns: minmax(0,1fr) 44px auto; gap: 8px; align-items: center; }
  .legal-brand { min-width: 0; gap: 7px; }
  .legal-brand img { width: 38px; height: 38px; flex: 0 0 38px; }
  .legal-brand strong { font-size: 12px; white-space: nowrap; }
  .legal-brand small { display: none; }
  .legal-header__inner > .msk-language-switch { grid-column: 2; grid-row: 1; width: 44px; margin: 0; }
  .legal-header__inner > .msk-language-switch .msk-language-menu { left: auto; right: 0; }
  .legal-back { grid-column: 3; grid-row: 1; padding: 10px 8px; font-size: 8px; white-space: nowrap; }

  /* The footage remains a full-width scene background; copy sits above the shade. */
  .world--vde .world-sticky, .world--water .world-sticky { display: flex; flex-direction: column; isolation: isolate; }
  .world--vde .world-copy, .world--water .world-copy { order: 1; position: relative; z-index: 4; }
  .world--vde .world-photo-reveal, .world--water .world-photo-reveal {
    position: absolute; inset: 0 0 auto; order: 0; flex: none;
    width: 100%; height: min(105svh,980px); margin: 0;
    border: 0; border-radius: 0;
    opacity: 1; clip-path: none; overflow: hidden;
  }
  .world--vde .world-photo-reveal::after, .world--water .world-photo-reveal::after {
    background: linear-gradient(180deg,rgba(3,13,17,.67) 0%,rgba(3,13,17,.5) 46%,rgba(3,13,17,.38) 72%,#07141a 100%);
  }
  .world--vde .world-photo-reveal img, .world--water .world-photo-reveal img { animation: none; transform: none; }
  .world--vde .scene-video-pair video:first-child { object-position: 54% 48%; transform: none; }
  .world--vde .scene-video-pair video:last-child { object-position: 52% 48%; transform: none; }
  .world--water .world-photo-reveal .world-water-video { object-position: 38% 42%; transform: none; filter: brightness(.9) contrast(1.04); }
  .world--vde .world-visual, .world--water .world-visual {
    position: absolute !important; top: 43%; left: 0; right: 0; z-index: 1;
    width: 100% !important; height: min(38svh,320px) !important;
    min-height: 0 !important; pointer-events: none;
  }
  .world--water .world-interact { order: 2; }
  .world--water .water-facts-strip { order: 3; }
  .lean-contact { display: flex; flex-direction: column; align-items: stretch; isolation: isolate; padding: 88px 20px 54px; background: linear-gradient(180deg,rgba(10,9,8,.75),rgba(10,9,8,.65)),url('assets/editorial/contact-conversation-2026.png') 43% center/cover !important; }
  .lean-contact-inner { display: contents; }
  .lean-contact-copy { position: relative; z-index: 2; order: 1; inset: auto; width: min(100%,560px); margin-inline: auto; text-align: center; transform: none; }
  .lean-contact > .scene-video {
    position: absolute; z-index: 0; order: 0; inset: 0;
    width: 100%; height: 100%; margin: 0;
    border: 0; border-radius: 0; object-fit: cover; object-position: 43% 44%; transform: none;
    filter: brightness(.9) contrast(1.04) saturate(.86);
  }
  .lean-contact::before { z-index: 1; background: linear-gradient(180deg,rgba(7,8,7,.62),rgba(7,8,7,.48) 50%,rgba(7,8,7,.72)); }
  .lean-contact-action { position: relative; z-index: 2; order: 2; inset: auto; width: min(100%,560px); margin: 28px auto 0; }
  .story-chapter--repair > .scene-video { object-position: 58% 48%; transform: none; }
  .reality-interlude .scene-video-pair .scene-video { object-position: 52% 45%; transform: none; }

  /* Keep each demonstration in view while its own controls are operated. */
  .water-measure-section { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .water-measure-copy { display: contents; }
  .water-measure-scene {
    order: 1; position: sticky; top: 68px; z-index: 3;
    height: clamp(220px, 32svh, 280px); min-height: 0; margin: 20px 0 14px;
  }
  .water-measure-tabs { order: 2; margin: 0 0 12px; }
  .water-measure-tabs button { min-height: 48px; }
  .water-measure-result { order: 3; min-height: 0; }
  .water-measure-counter { left: 12px; bottom: 12px; padding: 9px 12px; }
  .water-measure-counter strong { font-size: 23px; }
  .water-scale-layout { display: flex; flex-direction: column; }
  .water-scale-scene {
    position: sticky; top: 68px; z-index: 3;
    height: clamp(220px, 32svh, 280px); aspect-ratio: auto;
  }
  .water-scale-scene img { object-fit: contain; }
  .water-scale-buttons button { min-height: 50px; }
  .water-hotspots { display: flex; flex-direction: column; align-items: stretch; }
  .water-hotspots__machine { position: sticky; top: 68px; z-index: 2; max-height: 190px; overflow: hidden; border-radius: 15px; background: #102e3a; }
  .water-hotspots__machine svg { height: 190px; }
  .water-hotspots__readout { display: flex; flex-direction: column; }
  .water-hotspots__readout div { order: -1; margin: 0 0 17px; }
  .water-hotspots__readout button { min-height: 44px; }
  .water-measure-result p, .water-scale-readout p, .water-hotspots__readout p,
  .detail-lab__readout p, .detail-body .section-content > p,
  .lean-contact p, .site-footer p { font-size: 16px; line-height: 1.55; }
  .detail-lab__stage { position: sticky; top: 68px; z-index: 3; height: clamp(250px, 35svh, 300px); min-height: 0; }
  .detail-shell--repair .detail-lab__stage { height: clamp(250px, 35svh, 300px); min-height: 0; }
  .detail-lab--vde .detail-lab__stage { height: clamp(250px, 35svh, 300px); min-height: 0; }
  .detail-lab__readout { bottom: 10px; }
  .detail-lab--vde .vde-lab-status, .detail-lab--vde .vde-lab-illustration { display: none; }
  .detail-lab__controls button { min-height: 48px; }
  .repair-process-stage { top: 68px; width: min(100%,250px); }
  .repair-process-stage__caption strong { font-size: 24px; }
  .repair-process-stage__caption p { font-size: 12px; }
  .repair-process-stage:hover .repair-process-stage__photo { transform: none; }
  :where(.ai-visual-anchor) { position: relative; }
  .ai-visual-badge { position: absolute; left: auto; top: auto; right: 8px; bottom: 8px; min-width: 23px; height: 17px; padding: 0 4px; font-size: 8px; opacity: .64; transform: none; transition: opacity .15s; box-shadow: none; }
  .ai-visual-badge.is-visible { opacity: .64; }
  .ai-visual-badge:is(:focus-visible,.is-open) { opacity: 1; }
  .ai-visual-badge__tip { right: 0; }
}

@media (max-width: 480px) {
  .world-sticky, .story-chapter { padding-left: 18px !important; padding-right: 18px !important; }
  .world--repair .repair-copy .repair-entry { grid-template-columns: 1fr; gap: 8px; }
  .world--repair .repair-copy .repair-entry button { min-height: 58px; padding: 8px 14px; }
  .world--repair .repair-copy .repair-entry span { font-size: 14px; }
  .world--repair .repair-copy .repair-entry small { font-size: 10px; }
  .story-chapter--repair .repair-image-stage { max-width: calc(100% + 36px); margin-left: -18px; margin-right: -18px; }
  .repair-explore__nav, .vde-sequence__steps { gap: 4px; }
  .repair-explore__nav button, .vde-sequence__steps button { font-size: 9px !important; }
  .opening-notice { width: calc(100vw - 24px) !important; }
}

@media (max-width: 390px) {
  .topbar .topbar-cta span, .detail-contact-cta span { font-size: 9px !important; }
  .story-chapter__heading h2, .story-chapter--repair .story-chapter__heading h2, .story-chapter--water .story-chapter__heading h2 { font-size: 43px !important; }
}

/* -------------------------------------------------------------------------
   SMARTPHONE CONTENT SYSTEM — one shared content axis for the whole journey.
   Sections keep their own visual identity, but copy, CTAs and controls no
   longer use unrelated left offsets or wrapper widths.
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --mobile-gutter: clamp(18px, 5.2vw, 24px);
    --mobile-content-max: 34rem;
  }

  .world-sticky,
  .story-chapter,
  .service-compass,
  .msk-about,
  .lean-contact,
  .reality-interlude,
  .ending-scene .finale,
  .site-footer { padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; }

  /* Shared inner wrapper: central geometry first, typography second. */
  .world-copy,
  .coffee-copy,
  .story-chapter__heading,
  .service-compass__head,
  .msk-about__intro,
  .msk-about__body,
  .reality-interlude__copy,
  .lean-contact-copy,
  .lean-contact-action,
  .finale__identity,
  .finale__invitation {
    width: min(100%, var(--mobile-content-max)) !important;
    max-width: var(--mobile-content-max) !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
  .world-copy > small,
  .story-chapter__heading small,
  .service-compass__head > small,
  .msk-about__intro small,
  .lean-contact-copy > small,
  .lean-contact-action > span,
  .finale small { text-align: center !important; justify-content: center !important; }
  .world-copy p,
  .story-chapter__heading p,
  .service-compass__head > p,
  .msk-about__intro .msk-about__lead,
  .lean-contact-copy p,
  .finale__identity p,
  .finale__invitation p { margin-inline: auto !important; text-align: center !important; }

  /* Every important action shares the heading's horizontal axis. */
  .world-more,
  .world-cta,
  .world-cta--strong,
  .msk-about__link,
  .site-footer__cta {
    width: min(100%, var(--mobile-content-max)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
  }
  .world-more { text-align: left !important; }
  .msk-about__link { justify-content: center !important; }
  .world-summary,
  .world-summary__facts,
  .world-interact,
  .repair-explore,
  .vde-sequence,
  .water-compare__fact,
  .rental-choice {
    width: min(100%, var(--mobile-content-max)) !important;
    max-width: var(--mobile-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .world-interact,
  .repair-explore,
  .vde-sequence,
  .water-compare__fact,
  .rental-choice { text-align: center !important; }
  .repair-explore,
  .vde-sequence,
  .water-compare__fact,
  .rental-choice { align-self: center !important; }
  .world-interact__top { justify-content: center !important; }
  .world-interact__answer { text-align: center !important; }
  .vde-sequence__steps,
  .repair-explore__nav { justify-content: center !important; }

  /* Repair process no longer sits loose across an empty full-width band. */
  .repair-steps {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    width: min(100%, var(--mobile-content-max)) !important;
    margin: 18px auto 0 !important;
    border-top: 1px solid rgba(255,255,255,.16) !important;
  }
  .repair-steps article { min-height: 66px; padding: 11px 10px !important; text-align: center; }
  .repair-steps span { font-size: 20px !important; }
  .repair-steps b { font-size: 9px !important; line-height: 1.25 !important; }

  /* Deliberately compact phone sections: no unused media or spacer bands. */
  .world-sticky { padding-top: 82px !important; padding-bottom: 42px !important; }
  .world--repair .world-visual { height: min(37svh, 290px) !important; min-height: 230px !important; margin-top: 18px !important; }
  .story-chapter { padding-top: 82px !important; padding-bottom: 42px !important; gap: 18px !important; }
  .story-chapter--repair .repair-image-stage { margin-top: 0 !important; }
  .service-compass { padding-top: 78px !important; padding-bottom: 60px !important; }
  .service-compass__head { margin-bottom: 34px !important; }
  .service-compass__head > h2 { margin-inline: auto !important; }
  .service-compass__grid { width: min(100%, var(--mobile-content-max)) !important; margin-inline: auto !important; }
  .service-compass__grid > a { text-align: center !important; }
  .service-compass__grid > a span { margin-left: auto !important; margin-right: auto !important; }
  .reality-interlude { min-height: 58svh !important; padding-top: 72px !important; padding-bottom: 52px !important; }
  .msk-about { padding-top: 78px !important; padding-bottom: 60px !important; }
  .msk-about-inner { width: min(100%, var(--mobile-content-max)) !important; margin-inline: auto !important; }
  .msk-about__body > p { max-width: 62ch !important; margin-left: auto !important; margin-right: auto !important; text-align: left !important; }
  .msk-about__principles { text-align: center !important; }
  .msk-about__principles article p { margin-left: auto !important; margin-right: auto !important; }
  .msk-about-inner .msk-about__signature { display: block; text-align: center !important; }
  .lean-contact { padding-top: 82px !important; padding-bottom: 58px !important; }
  .lean-contact-action { margin-top: 24px !important; }
  .lean-contact-methods { align-items: center !important; }
  .lean-contact-methods a { width: 100% !important; text-align: center !important; }
  .ending-scene .finale__inner { width: min(100%, var(--mobile-content-max)) !important; margin-inline: auto !important; text-align: center !important; }
  .ending-scene .finale .finale__identity,
  .ending-scene .finale .finale__invitation { align-items: center !important; }
  .ending-scene .finale .finale__identity > img { margin-left: auto !important; margin-right: auto !important; }

  /* Strong scenes remain full bleed; text gets a stable, quiet reading zone. */
  .world--vde .world-photo-reveal::after {
    background: linear-gradient(180deg,rgba(3,13,17,.85) 0%,rgba(3,13,17,.72) 48%,rgba(3,13,17,.56) 72%,#07141a 100%) !important;
  }
  .world--water .world-photo-reveal::after {
    background: linear-gradient(180deg,rgba(3,18,25,.9) 0%,rgba(3,18,25,.76) 50%,rgba(3,18,25,.55) 76%,#07141a 100%) !important;
  }
  .world--vde .world-copy,
  .world--water .world-copy { text-shadow: 0 3px 22px rgba(0,0,0,.92) !important; }
  .world--water .world-copy h2,
  .world--water .world-copy p { color: #f5fbfc !important; }
  .world--water .world-copy h2 em { color: #b8edf4 !important; }
  .world--water .world-photo-reveal .world-water-video { object-position: 42% 42% !important; filter: brightness(.72) contrast(1.1) !important; }
  .world--vde .scene-video-pair video:first-child { object-position: 58% 46% !important; filter: brightness(.76) contrast(1.08) !important; }
  .story-chapter--water .water-compare__fact { background: rgba(4,24,33,.93) !important; }

  /* Brand and footer retain their own look while obeying the same centre axis. */
  .brand-lockup,
  .brand-quicklinks,
  .brand-signature { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
  .brand-quicklinks { width: min(calc(100% - (var(--mobile-gutter) * 2)), var(--mobile-content-max)) !important; }
  .site-footer__inner { width: min(calc(100% - (var(--mobile-gutter) * 2)), var(--mobile-content-max)) !important; margin-inline: auto !important; }
  .site-footer__contact { text-align: center !important; }

  /* Badges stay available without competing with primary mobile content. */
  .ai-visual-badge { transform: scale(.72) !important; transform-origin: bottom right !important; opacity: .48 !important; }
  .ai-visual-badge.is-visible { opacity: .48 !important; }
}

/* Final phone alignment pass: physical centre, not merely centred text. */
@media (max-width: 767px) {
  /* Homepage worlds: use the viewport centre as the one actual placement axis. */
  .world-copy,
  .coffee-copy,
  .story-chapter__heading,
  .world-summary,
  .world-interact,
  .repair-explore,
  .vde-sequence,
  .water-compare__fact,
  .rental-choice {
    box-sizing: border-box !important;
    width: min(calc(100vw - (var(--mobile-gutter) * 2)), var(--mobile-content-max)) !important;
    max-width: var(--mobile-content-max) !important;
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: translateX(-50%) !important;
    align-self: center !important;
    justify-self: center !important;
    text-align: center !important;
  }
  .world-copy > *,
  .coffee-copy > *,
  .story-chapter__heading > * { margin-left: auto !important; margin-right: auto !important; }
  .world-copy p,
  .coffee-copy p,
  .story-chapter__heading p,
  .world-interact__answer p,
  .repair-explore__text,
  .vde-sequence__display p,
  .water-compare__fact p { text-align: center !important; }

  /* These blocks were still inheriting left/right placement from desktop cards. */
  .world-more,
  .world-cta,
  .world-cta--strong,
  .repair-steps,
  .world-summary__facts {
    box-sizing: border-box !important;
    width: min(calc(100vw - (var(--mobile-gutter) * 2)), var(--mobile-content-max)) !important;
    max-width: var(--mobile-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    justify-self: center !important;
  }
  .world-more { text-align: center !important; }
  .world-more > span,
  .world-more > small { text-align: center !important; }
  .world-more > b { justify-self: end; }
  .world-interact__top,
  .repair-explore__nav,
  .vde-sequence__steps { justify-content: center !important; }
  .repair-explore__nav button,
  .vde-sequence__steps button { text-align: center !important; }

  /* Detail pages get the exact same central content column. */
  .detail-shell .detail-copy,
  .detail-shell .section-content,
  .detail-shell .detail-photo-break__copy,
  .detail-shell .detail-lab__intro,
  .detail-shell .detail-lab__readout,
  .detail-shell .about-hero__copy,
  .detail-shell .about-origin__copy,
  .detail-shell .about-section__heading,
  .detail-shell .about-experience__body,
  .detail-shell .about-finale__copy,
  .detail-shell .about-certificates__intro {
    box-sizing: border-box !important;
    width: min(calc(100vw - (var(--mobile-gutter) * 2)), var(--mobile-content-max)) !important;
    max-width: var(--mobile-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .detail-shell .detail-copy > *,
  .detail-shell .section-content > *,
  .detail-shell .detail-photo-break__copy > *,
  .detail-shell .about-hero__copy > *,
  .detail-shell .about-origin__copy > *,
  .detail-shell .about-section__heading > *,
  .detail-shell .about-finale__copy > * { margin-left: auto !important; margin-right: auto !important; }
  .detail-shell .detail-lead,
  .detail-shell .section-content > p,
  .detail-shell .detail-photo-break__copy p,
  .detail-shell .detail-lab__readout p,
  .detail-shell .about-hero__lead,
  .detail-shell .about-experience__body p,
  .detail-shell .about-origin__copy p,
  .detail-shell .about-finale__copy p { text-align: center !important; }
  .detail-shell .hero-actions,
  .detail-shell .final-actions,
  .detail-shell .detail-lab__controls,
  .detail-shell .about-finale__actions,
  .detail-shell .related,
  .detail-shell .detail-footer,
  .detail-shell .detail-footer__legal { justify-content: center !important; text-align: center !important; }
  .detail-shell .primary-cta,
  .detail-shell .ghost-cta,
  .detail-shell .final-cta { margin-left: auto !important; margin-right: auto !important; }
  .detail-shell .fact-grid,
  .detail-shell .quick-answers,
  .detail-shell .about-proof-grid,
  .detail-shell .about-values__grid,
  .detail-shell .certificate-grid,
  .detail-shell .repair-record-grid,
  .detail-shell .tech-gallery,
  .detail-shell .descale-grid { width: min(calc(100vw - (var(--mobile-gutter) * 2)), var(--mobile-content-max)) !important; margin-left: auto !important; margin-right: auto !important; }
  .detail-shell .fact,
  .detail-shell .quick-answer,
  .detail-shell .about-value,
  .detail-shell .certificate-card,
  .detail-shell .repair-record-grid article,
  .detail-shell .tech-card,
  .detail-shell .descale-grid article { text-align: center !important; }
}

/* The previous positioning pass used a relative left/transform pair.  In
   nested mobile wrappers that compounded the inherited layout offset.  The
   phone layout centres with real wrapper dimensions only. */
@media (max-width: 767px) {
  .world-copy,
  .coffee-copy,
  .story-chapter__heading,
  .world-summary,
  .world-interact,
  .repair-explore,
  .vde-sequence,
  .water-compare__fact,
  .rental-choice {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(calc(100% - 0px), var(--mobile-content-max)) !important;
    max-width: var(--mobile-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .world-more,
  .world-cta,
  .world-cta--strong,
  .repair-steps,
  .world-summary__facts {
    width: 100% !important;
    max-width: var(--mobile-content-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Final mobile polish from the reviewed handset captures. */
@media (max-width: 767px) {
  /* The final frame's logo is left of centre on a narrow portrait crop. */
  .brand-reveal-poster,
  .brand-reveal-video { --msk-video-x: 47% !important; }

  /* Keep the two prominent entry paths distinct even with their glow. */
  .world--repair .repair-copy .repair-entry { gap: 24px !important; }

  /* Water remains a visible scene, while every piece of copy stays readable. */
  .world--water .world-photo-reveal::after {
    background: linear-gradient(180deg,rgba(3,18,25,.94) 0%,rgba(3,18,25,.86) 52%,rgba(3,18,25,.68) 76%,#07141a 100%) !important;
  }
  .world--water .world-copy,
  .world--water .world-copy > *,
  .world--water .world-summary,
  .world--water .world-summary__facts,
  .world--water .world-summary__facts span,
  .world--water .world-summary__facts em,
  .world--water .world-more {
    opacity: 1 !important;
    color: #f5fbfc !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.92) !important;
  }
  .world--water .world-copy h2 em { color: #b8edf4 !important; }
  .world--water .world-summary__facts span { border-top-color: rgba(184,237,244,.5) !important; }
  .world--water .world-more { background: rgba(4,18,25,.91) !important; border-color: rgba(184,237,244,.68) !important; }

  /* Give the finishing mark its own line; never overlap the location label. */
  .ending-scene .finale .finale__identity > small { display: block !important; margin: 0 0 18px !important; }
  .ending-scene .finale .finale__identity > img {
    width: min(58vw, 260px) !important;
    margin: 0 auto 16px !important;
  }

  /* Put the comparison handle in the clear area above the water headline. */
  .story-chapter--water .water-compare__divider span { top: 10% !important; }
}

/* Phone repair flow: the desktop finale has no mobile content and must not reserve a blank scene. */
@media (max-width: 767px) {
  .world--repair .repair-final { display: none !important; }
  .world--repair .world-sticky { padding-bottom: 24px !important; }
}
/* Keep the final brand claim calm, deliberate and centred on phones. */
@media (max-width: 767px) {
  .ending-scene .finale .finale__identity > p {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-inline: auto !important;
    text-align: center !important;
    line-height: 1.12 !important;
  }
  .ending-scene .finale .finale__identity > p > span { display: block; width: 100%; }
}