/* Mobile: the page as an app, not a long document (assets/js/mobile.js does the behaviour). Sections that list things become swipeable, auto-advancing
   carousels; one grid; one ticker; a floating action bar instead of repeated buttons. */
@media (max-width: 1000px) {
  :root { --sec-y: 72px; }

  /* every section opens with a small numbered label, like a screen title in an app */
  [data-label]::before { content: attr(data-label); display: block; margin-bottom: 14px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c); }
  .sports[data-label]::before { color: var(--paper-muted); }

  /* ---- shared carousel: swipe with snap, the next card peeks in, a progress bar underneath ---- */
  .m-car { display: flex !important; flex-direction: row !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(var(--edge) * -1) !important; margin-right: calc(var(--edge) * -1) !important; padding: 0 var(--edge) !important; scroll-padding: 0 var(--edge); }
  .m-car::-webkit-scrollbar { display: none; }
  .m-car > * { flex: 0 0 84% !important; scroll-snap-align: start; }
  .m-bar { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; }
  .m-bar i { position: relative; flex: 1; height: 2px; background: var(--line-strong); overflow: hidden; border-radius: 2px; }
  .m-bar i b { position: absolute; inset: 0; background: var(--c); transform-origin: left; transform: scaleX(var(--prog, 0.2)); transition: transform 0.5s var(--out); }
  .m-bar em { font-style: normal; color: var(--ink); }

  /* ---- hero: one full screen, the words big, one button ---- */
  .hero { min-height: 100svh; padding-bottom: 28px; }
  .verbs li { font-size: 12.4vw; letter-spacing: -0.055em; }
  /* what we do: one tight screen, the figures as a 3 x 2 grid */
  /* phones: the verbs carry the message; the intro line, the core label and the core's list are cut */
  .does-intro, .does .core-k, .does .m-cut { display: none; }
  .does .core p { margin-top: 0; }
  .does .proof-note { font-size: 10px; line-height: 1.4; }
  .does-stack { margin-top: 0; }
  .verb-note { min-height: 4.4em; margin-top: 12px; font-size: 15px; }
  .core { margin-top: 20px; padding-top: 18px; }
  .core p { margin-top: 10px; font-size: 19px; }
  .proof { margin-top: 18px; }
  .proof dl { display: flex; gap: 0; }
  .proof dl div { display: block; flex: none; padding-right: 28px; }
  .proof dt { font-size: 17px; }
  .proof dd { font-size: 12px; line-height: 1.3; }

  /* ---- endless rows (figures, hubs): drift slowly, held by a finger ---- */
  .m-marq { overflow: hidden; margin: 0 calc(var(--edge) * -1); padding: 0 var(--edge); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .m-marq > * { width: max-content; animation: m-drift 26s linear infinite; }
  .m-marq-y { height: 5.6em; margin: 0; padding: 0; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); }
  .m-marq-y > * { width: auto; animation: m-rise 16s linear infinite; }
  .m-marq.held > *, .m-marq.still > * { animation-play-state: paused; }
  .hubs { margin-top: 0; }
  .m-marq-y { margin-top: 16px; font-size: 14px; line-height: 1.4; }

  /* ---- floating action bar: appears after the hero, hides at the contact form ---- */
  .m-cta { gap: 10px; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 8px 0 20px; border-radius: 29px; background: rgba(16, 16, 16, 0.82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--ink); font-size: 14px; transform: translateY(140%); transition: transform 0.6s var(--out); }
  .m-cta.on { transform: none; }
  .m-cta span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--soft); }
  .m-cta a { flex: none; white-space: nowrap; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 21px; background: var(--c); color: var(--on-light); font-weight: 500; }

  /* ---- how we work: six steps as a carousel; the sprinter photo runs behind it as you swipe ---- */
  .model { padding-top: 40px; }
  .prop { gap: 18px; }
  .prop h2 { font-size: 11vw; }
  .prop .lead, .prop .build { display: none; }
  .stair { position: relative; margin-top: 8px; padding: 150px 0 0; }
  .stair .run { display: block; inset: 0 calc(var(--edge) * -1); -webkit-mask: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 15%, #000 70%, transparent); }
  .stair .run img { top: -24%; height: 118%; left: 0; }
  .steps { align-items: stretch; }
  .step { position: relative; margin-left: 0 !important; height: 300px !important; background: rgba(18, 18, 18, 0.72) !important; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 22px 20px 20px; display: flex; flex-direction: column; }
  .step, .motion .step { opacity: 1 !important; transform: none !important; }
  .step h3 { font-size: 30px; margin-top: 8px; }
  .step p { font-size: 16px; margin-top: 12px; }
  .step ul { grid-template-columns: 1fr; margin-top: auto; gap: 7px; font-size: 14px; }

  /* ---- value chain as stories: one full-height photo at a time, segments on top, tap to move on ---- */
  .vc.m-stories { position: relative; display: block !important; height: 78svh; min-height: 560px; max-height: none; margin: 28px calc(var(--edge) * -1) 0; border-radius: 0; overflow: hidden; background: #000; }
  .m-stories .vc-step, .m-stories .vc-step:first-child, .m-stories .vc-step:last-child, .m-stories .vc-step.is-on { position: absolute; inset: 0; height: auto; min-height: 0; margin: 0 !important; padding: 64px 22px 26px !important; clip-path: none; border-radius: 0 !important; background: #000; opacity: 0; visibility: hidden; transition: opacity 0.6s var(--ease), visibility 0s 0.6s; }
  .m-stories .vc-step.is-story { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease); }
  .m-stories .vc-step figure { opacity: 1 !important; }
  .m-stories .vc-step figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 30%, transparent 40%, rgba(0, 0, 0, 0.92) 78%); }
  .m-stories .vc-step figure img { filter: saturate(1.15) contrast(1.05) brightness(0.85) !important; transform: scale(1.12); transition: transform 6s linear; }
  .m-stories .vc-step.is-story figure img { transform: scale(1) !important; }
  .m-stories .vc-top { position: relative; }
  .m-stories .vc-n { color: var(--c); }
  .m-stories h3, .m-stories .vc-step.is-on h3 { font-size: 40px; line-height: 1; color: #fff; max-width: 9ch; margin-top: 10px; }
  .m-stories .vc-cap { color: var(--c); font-size: 15px; margin-top: 10px; }
  .m-stories .vc-more, .m-stories .vc-step:not(.is-on) .vc-more { display: block; position: absolute; left: 22px !important; right: 22px; bottom: 26px; width: auto; opacity: 1; transform: none; }
  .m-stories .vc-more > p { font-size: 15px; color: rgba(255, 255, 255, 0.85); }
  .m-stories .vc-flow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .m-stories .vc-flow li { height: 30px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 15px; background: rgba(0, 0, 0, 0.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 13px; opacity: 1; transform: none; display: inline-flex; align-items: center; }
  .m-stories .vc-flow li::before { display: none; }
  .m-stories .vc-flow li:last-child { border-color: var(--c); color: var(--c); }
  .m-stories .vc-step::after { display: none; }
  .m-seg { position: absolute; z-index: 3; top: 16px; left: 14px; right: 14px; display: flex; gap: 4px; }
  .m-seg i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
  .m-seg i b { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
  .m-seg i.done b { transform: scaleX(1); }
  .m-seg i.now b { animation: m-seg 5s linear forwards; }
  .m-stories.held .m-seg i.now b { animation-play-state: paused; }
  .vc-span { display: none; }

  /* ---- nav: says which chapter you are in ---- */
  .m-chap { margin-left: auto; margin-right: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity 0.4s, transform 0.4s var(--out); }
  .m-chap.on { opacity: 1; transform: none; }
  .nav-menu { position: absolute; top: 7px; right: 8px; margin: 0; z-index: 2; }
  .nav { gap: 12px; }
  .m-chap { flex: 1 1 0; min-width: 0; margin-right: 50px; text-align: right; overflow: hidden; text-overflow: ellipsis; }

  /* ---- sports: the photo on top, the sports as a swipeable chip rail that auto-advances ---- */
  .sports h2 { font-size: 10.6vw; }
  .sports-l > p { display: none; }
  .sport-stage { order: 1; aspect-ratio: 4 / 5 !important; margin-top: 22px; border-radius: 12px; }
  .sport-stage strong { font-size: 34px; }
  .sport-list { order: 2; display: flex !important; gap: 8px; margin: 16px calc(var(--edge) * -1) 0; padding: 0 var(--edge); overflow-x: auto; scrollbar-width: none; border: 0; scroll-snap-type: x proximity; }
  .sport-list::-webkit-scrollbar { display: none; }
  .sport-list li, .sport-list li.is-on { flex: none; padding: 0 16px !important; height: 42px; border: 1px solid var(--paper-line); border-radius: 21px; font-size: 15px; white-space: nowrap; scroll-snap-align: start; }
  .sport-list li::after { display: none; }
  .sport-list li span { display: none; }
  .sport-more { order: 3; align-self: stretch; min-width: 0; margin: 18px calc(var(--edge) * -1) 0; }
  /* phones: only the running tape (no sport pills, no pill inside the tape); the promise sits under it */
  .sport-list { display: none !important; }
  .tape li { height: 46px; font-size: 13px; }
  .tape li.tape-say { display: none; }
  .tape-note { display: block; order: 4; margin-top: 14px; font-size: 16px; line-height: 1.4; color: var(--paper-ink); }
  .tape-note b { font-weight: 700; }
  .sport-list li.is-on { background: var(--paper-ink); border-color: var(--paper-ink); color: var(--c); }

  /* ---- work: case cards as a carousel ---- */
  .case { min-height: 0; height: 420px; border-radius: 12px; }
  .case-body { padding-top: 0; }
  .case dl { display: none; }

  /* ---- who: the four groups as a carousel, each card with its one line ---- */
  /* a full screen, so the next section never peeks in; the cards sit centred between the heading and the action bar */
  .who { min-height: 100svh; display: flex; flex-direction: column; padding-bottom: 84px !important; }
  .who > .m-marq { margin-top: auto !important; margin-bottom: auto; }
  .groups { margin-top: 24px; }
  .m-marq:has(> .groups) { margin-top: 24px; -webkit-mask-image: none; mask-image: none; }
  .m-marq > .groups { display: flex !important; gap: 12px; margin-top: 0; padding-right: 12px; animation-duration: 44s; }
  .m-marq > .groups > .group { flex: 0 0 min(80vw, 330px); }
  .group { aspect-ratio: auto !important; height: 380px; border-radius: 12px; }
  .group-body { left: 18px; right: 18px; bottom: 18px; }
  .group h3 { font-size: 26px; }
  .group p { display: none; }
  .group p.group-line { display: block; font-size: 15px; }

  /* ---- ticket: the short strip stays ---- */
  .what { padding: 48px 0; }
  #admit { padding-top: 0; }
  .m-cue { display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0 auto 18px; }
  .m-cue i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); animation: m-cue 2.4s linear infinite; }
  .m-cue i:nth-child(2) { animation-delay: 0.15s; } .m-cue i:nth-child(3) { animation-delay: 0.3s; } .m-cue i:nth-child(4) { animation-delay: 0.45s; }
  .m-cue i:nth-child(5) { animation-delay: 0.6s; } .m-cue i:nth-child(6) { animation-delay: 0.75s; } .m-cue i:nth-child(7) { animation-delay: 0.9s; } .m-cue i:nth-child(8) { animation-delay: 1.05s; }
  .m-cue b { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 1.5px solid var(--c); animation: m-cue-ring 2.4s ease-out infinite 1.2s; }

  /* ---- network: HQ, hubs by region; the sister companies side by side ---- */
  .network h2 { font-size: 10.6vw; }
  .net-l > p:not(.big) { display: none; }
  .hq { margin-top: 28px; }
  .hubs div { grid-template-columns: 8.5em minmax(0, 1fr); }
  .group-cos > p { display: none; }
  .group-cos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 28px; padding-top: 0; border: 0; }
  .co { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0; padding: 16px; min-height: 150px; }
  .co-n { font-size: 17px; }
  .co-d { font-size: 13px; }
  .co .arr { margin-top: auto; }

  /* ---- contact: tighter, the form first-class ---- */
  .contact { padding-top: 64px; padding-bottom: 96px; gap: 28px; }
  .contact h2 { font-size: 10.6vw; }
  .contact-note { display: none; }
}
@keyframes m-seg { to { transform: scaleX(1); } }
@keyframes m-cue { 0%, 100% { background: rgba(255, 255, 255, 0.16); transform: none; } 8% { background: var(--c); transform: scale(1.5); } 30% { background: rgba(255, 255, 255, 0.16); transform: none; } }
@keyframes m-cue-ring { 0% { transform: scale(0.6); opacity: 0.3; } 12% { transform: scale(1.15); opacity: 1; background: var(--c); } 40%, 100% { transform: none; opacity: 0.6; background: transparent; } }
@keyframes m-drift { to { transform: translateX(-50%); } }
@keyframes m-rise { to { transform: translateY(-50%); } }
@media (max-width: 380px) { .m-cta { font-size: 13px; padding-left: 16px; } .m-cta a { padding: 0 14px; } }
@media (max-width: 400px) { .m-chap { font-size: 10px; letter-spacing: 0.08em; margin-right: 46px; } }

/* reduce motion: the drifting rows stand still, so they show everything once, wrapped */
:root:not(.motion) .m-marq, :root:not(.motion) .m-marq-y { height: auto; -webkit-mask-image: none; mask-image: none; }
:root:not(.motion) .m-marq > * { width: auto; flex-wrap: wrap; row-gap: 12px; animation: none; }
:root:not(.motion) .m-marq [aria-hidden="true"] { display: none; }