/* Mobile: the page as an app, not a long document (assets/js/mobile.js does the behaviour). Each section fits one
   phone screen with its headline and one line; lists become swipe rows that move on their own; one floating action bar
   instead of repeated buttons. Every rule is phones and tablets only: desktop never sees this file's rules. */
@media (max-width: 1000px) {
  :root { --sec-y: 72px; --m-top: 92px; --m-bottom: 92px; }
  html { scroll-padding-top: 0; } /* each screen pads its own top for the nav */

  /* 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-family: var(--font); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; line-height: 1.2; text-transform: uppercase; color: var(--smoke-t); align-self: stretch; text-align: left; }
  .statement .kicker, .cred > .kicker { display: none; }

  /* ---- nav: the brand, the chapter you are in, the menu ---- */
  .nav-cta { display: none !important; }
  .nav { gap: 12px; padding-right: 60px; }
  .nav-menu { display: block; position: absolute; top: 50%; right: 7px; margin: -22px 0 0; }
  .m-chap { flex: 1 1 0; min-width: 0; margin-left: auto; overflow: hidden; text-align: right; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--smoke-t); opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
  .m-chap.on { opacity: 1; transform: none; }

  /* ---- shared carousel: swipe with snap, the next card peeks in, a progress bar underneath ---- */
  .m-car { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !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); -webkit-overflow-scrolling: touch; }
  .m-car::-webkit-scrollbar { display: none; }
  .m-car > * { flex: 0 0 84% !important; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .m-bar { display: flex; align-items: center; gap: 14px; margin-top: 16px; 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; overflow: hidden; border-radius: 2px; background: var(--line-strong); }
  .m-bar i b { position: absolute; inset: 0; background: var(--smoke); transform-origin: left; transform: scaleX(var(--prog, 0.2)); transition: transform 0.5s var(--ease); }
  .m-bar em { font-style: normal; color: var(--ink); }

  /* ---- chip rails: one line of pills that scrolls sideways; the lit one is filled ---- */
  .m-rail { display: flex !important; flex-direction: row !important; gap: 8px; margin: 18px calc(var(--edge) * -1) 0 !important; padding: 0 var(--edge); overflow-x: auto; scrollbar-width: none; border: 0 !important; }
  .m-rail::-webkit-scrollbar { display: none; }
  .m-rail button { flex: none; display: inline-flex; align-items: center; height: 42px; padding: 0 16px !important; border: 1px solid var(--line-strong) !important; border-radius: 21px; font-size: 15px !important; white-space: nowrap; color: var(--soft); }
  .m-rail button::before, .m-rail button i { display: none !important; }
  .m-rail button[aria-selected="true"] { background: var(--smoke); border-color: var(--smoke-t) !important; color: var(--on-light); }

  /* ---- one screen per section: content centred between the nav and the action bar ---- */
  .statement, .band, .why-a, .why-sec, .scale, .net, .cred { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--m-top); padding-bottom: var(--m-bottom); }
  /* a swipe row is wider than the screen; without this its column grows to fit it and slides off to the left */
  :is(.statement, .band, .why-a, .why-sec, .scale, .net, .cred) > * { align-self: stretch; min-width: 0; }

  /* ---- hero: the words and one button ---- */
  .hero .actions .btn.ghost { display: none; }

  /* ---- the full circle: the statement and the closing line; the paragraph is cut ---- */
  .statement { gap: 26px; }
  .statement .scrub { font-size: clamp(26px, 7.2vw, 40px); }
  .circle-body { display: none; }
  .circle-end { margin-top: 22px; padding-top: 18px; font-size: clamp(18px, 4.9vw, 24px); }
  .statement > .sys { align-self: center; width: min(58vw, 260px); }

  /* ---- sectors band: the heading and its last line, then the eight photos as a swipe row ---- */
  .band { padding-left: 0; padding-right: 0; }
  .band[data-label]::before, .life[data-label]::before { padding: 0 var(--edge); }
  .band-head { flex-direction: column; align-items: start; gap: 12px; }
  .band-head h2 { font-size: clamp(30px, 9.4vw, 52px); }
  .band-copy p:not(.band-end) { display: none; }
  .band-head .band-copy .band-end { margin-top: 0; font-size: 17px; }
  .band-track.m-car { width: auto; margin: 26px 0 0 !important; padding: 0 var(--edge) !important; transform: none !important; }
  .band-track > .band-f { flex-basis: 84% !important; }
  .band-f .band-img, .band-f.t .band-img, .band-f.w .band-img { width: 100%; height: min(40svh, 380px); aspect-ratio: auto; }
  .band-img img { transform: none !important; }
  .band-f figcaption { flex-direction: column; gap: 4px; font-size: 14px; }
  .band-track + .m-bar { margin: 16px var(--edge) 0; }
  .band-note { position: static; margin: 12px var(--edge) 0; }

  /* ---- the seven stages: heading, the venue drawing, then one swipe card per stage that rebuilds the drawing ---- */
  .life { padding-top: var(--m-top); }
  .life-stage { display: flex; flex-direction: column; justify-content: center; gap: 0; min-height: calc(100svh - var(--m-top) - 42px); padding-top: 0; padding-bottom: 56px; }
  .life-copy { display: contents; }
  .life h2 { order: 0; font-size: clamp(30px, 9.4vw, 52px); }
  .life-visual { order: 1; margin-top: 6px; }
  .scene { max-height: 27svh; margin: 0 auto; }
  .life-stage > *, .life-copy > * { min-width: 0; }
  .life-steps { order: 2; align-self: stretch; width: auto; max-width: none; min-height: 0; margin-top: 10px; }
  .life-steps.m-car > .step { flex-basis: calc((100vw - var(--edge) * 2) * 0.86) !important; }
  .life-steps + .m-bar { order: 3; }
  .life-steps.m-car > .step { position: relative; inset: auto; display: flex; flex-direction: column; max-width: none; height: auto; min-height: 0; padding: 16px 18px 16px; border: 1px solid var(--line); border-radius: 16px; background: rgba(36, 33, 29, 0.78); opacity: 1; visibility: visible; transform: none; transition: border-color 0.4s var(--ease); }
  .life-steps.m-car > .step.m-now { border-color: rgba(124, 139, 148, 0.45); }
  .life-steps .step-t { margin-top: 6px; padding-left: 16px; }
  .life-steps .step-t::after { transform: none; }
  .life-steps .step h3 { font-size: 30px; }
  .life-steps .step p { margin-top: 8px; font-size: 14.5px; line-height: 1.45; }
  .life-steps .step ul { margin-top: auto; padding-top: 12px; gap: 6px; }
  .life-steps .step li { padding: 4px 10px; font-size: 12px; }

  /* ---- why us: the heading, then the four cards as a swipe row ---- */
  .why-lead { display: none; }
  .why-top h2 { font-size: clamp(24px, 7.2vw, 52px); } /* BERGENCEEVENTS is one long word */
  .why-grid.m-car { margin-top: 26px !important; }
  .why-grid.m-car > .pt { height: auto; min-height: 196px; padding: 24px 22px 22px; }

  /* ---- pick a sector: the drawing on top, the line, the sectors as a chip rail that follows the cycle ---- */
  .why-sec { gap: 20px; }
  .sec-visual { order: -1; }
  .sec-visual figcaption { line-height: 1.5; min-height: calc(3 * 1.5em + 20px); } /* same for pick a sector: one box size for every sector */
  .sec-svg { max-height: 36svh; margin: 0 auto; }
  .sec-copy h3 { font-size: 34px; }
  .sec-sub { font-size: 15px; }

  /* ---- scale: built like pick a sector. The crowd on top with the lit size's examples as its caption, the heading
     and its line, then the five sizes as a pill rail that follows the cycle ---- */
  .scale { gap: 0; }
  .scale-copy { display: contents; }
  .scale-visual { order: 0; display: flex; flex-direction: column; aspect-ratio: auto; margin: 0; }
  .scale-visual .m-scene { position: relative; aspect-ratio: 1.45; }
  .scale-visual .m-cap { position: relative; margin: 0; padding: 0 24px 20px; font-size: 15px; line-height: 1.5; color: var(--muted); min-height: calc(3 * 1.5em + 20px); } /* room for the longest caption, so the box keeps one size as the sizes change */
  .scale h2 { order: 1; margin-top: 26px; font-size: 34px; }
  .scale h2, .scale-sub { align-self: stretch; }
  .scale-sub { order: 2; margin: 12px 0 0; max-width: none; text-align: left; font-size: 15px; }
  .scale-stops.m-rail { order: 3; align-self: stretch; width: auto; min-width: 0; margin-top: 18px !important; }
  .scale-stops.m-rail button { display: inline-flex; width: auto; min-height: 0; }
  .scale-stops.m-rail b { font-size: 15px; font-weight: 400; letter-spacing: 0; }
  .scale-stops.m-rail span, .scale-stops.m-rail .bar { display: none; }
  .m-rail button[aria-checked="true"] { background: var(--smoke); border-color: var(--smoke-t) !important; color: var(--on-light); }

  /* ---- partners: heading, the challenges as a chip rail, the count, the map, the specialists ---- */
  .net-sub { display: none; }
  .net h2 { font-size: clamp(30px, 9.4vw, 52px); }
  .net-count { margin-top: 16px; }
  .net-map svg { max-height: 30svh; margin: 0 auto; }
  .net-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .net-list li { padding: 6px 11px; font-size: 13px; }


  /* ---- how we work: the intro line sits under the heading ---- */
  .life-intro { order: 0; margin-top: 10px; font-size: 14.5px; line-height: 1.45; }

  /* ---- why us: the proof strip under the cards, three figures then two ---- */
  .why-lead { display: block; margin-top: 12px; font-size: 16px; }
  .proof { margin-top: 22px; padding-top: 18px; }
  .proof-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 12px; }
  .proof-row li { grid-column: span 2; min-width: 0; }
  .proof-row li:nth-child(n+4) { grid-column: span 3; }
  .proof b { font-size: clamp(26px, 7.6vw, 34px); }
  .proof span { margin-top: 6px; font-size: 12.5px; line-height: 1.35; }
  .proof-cap { margin-top: 14px; font-size: 12px; }

  /* ---- image bands: the doorway centred, its line underneath ---- */
  .door { display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 100svh; justify-content: center; padding: var(--m-top) var(--edge) var(--m-bottom); }
  .door-slot { width: min(64vw, 320px); height: min(62svh, 560px); }
  .door figcaption { align-self: center; width: min(64vw, 320px); }
  .door-line { font-size: 17px; }
  .door-note { margin-top: 8px; }

  /* ---- scale on warm white: the framed crowd keeps a quiet tint ---- */
  .scale-read b { font-size: 26px; }
  .scale .m-rail button[aria-checked="true"] { color: #F3EFE8; background: #636F76; border-color: #636F76 !important; }

  /* ---- credentials: the heading, then the three lists stacked ---- */
  .cred h2 { margin-top: 0; font-size: clamp(28px, 8.4vw, 44px); }
  .cred-cols { gap: 16px; margin-top: 22px; }
  .cred-cols > div { padding-top: 12px; }
  .cred ul { margin-top: 10px; gap: 4px; font-size: 15px; }
  .cred-cap { margin-top: 16px; font-size: 12px; }

  /* ---- footer: the signature a little smaller ---- */
  .foot-sig { margin-top: 22px; }

  /* ---- floating action bar: appears after the hero, hides at the brief ---- */
  .m-cta { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 58px; padding: 0 8px 0 20px; border: 1px solid rgba(243, 239, 232, 0.12); border-radius: 29px; background: rgba(18, 17, 15, 0.82); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); color: var(--ink); font-size: 14px; transform: translateY(160%); transition: transform 0.6s var(--ease); }
  .m-cta.on { transform: none; }
  .m-cta span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--soft); }
  .m-cta a { flex: none; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 21px; background: var(--smoke); color: var(--on-light); font-weight: 500; white-space: nowrap; }
}
@media (max-width: 380px) {
  .m-cta { padding-left: 16px; font-size: 13px; }
  .m-cta a { padding: 0 14px; }
  .m-chap { font-size: 10px; letter-spacing: 0.08em; }
}

/* /textured (brown paper): the lifecycle swipe cards in the paper's own brown */
@media (max-width: 1000px) {
  html.paper .life-steps.m-car > .step { background: rgba(69, 61, 52, 0.78); }
}

/* the photo band on phones: a narrower doorway, the line a little smaller */
@media (max-width: 1000px) {
  .mo-stick { --s0: 22vw; height: 100svh; }
  .mo-frame { clip-path: inset(calc(16svh * (1 - var(--e))) calc(var(--s0) * (1 - var(--e))) calc(16svh * (1 - var(--e))) calc(var(--s0) * (1 - var(--e))) round calc(300px * (1 - var(--e))) calc(300px * (1 - var(--e))) 0 0); }
  .mo-lines { font-size: 21px; bottom: 16svh; }
  .mo-ticks { bottom: calc(16svh - 28px); }
}