/* PHONE · About page (2026-10-02). Reference: cuberto.com/about mobile (measured @390: H1 y125 46.8/500, portrait media card
   under the title, label + lead, dark "Benefits" chapter = icon + title + text entries). The desktop copy is restyled in place;
   phone-only additions are the media cards, the stats row, the icons, the projects link and the closing line. */
@media (max-width:940px){
  /* tophead: label, title, portrait card, lead */
  main .ab-hero{padding-top:32vw!important;padding-bottom:0!important;text-align:left!important}
  main .ab-hero > .wrap > .phs-label{font-size:4.2667vw!important;line-height:1.2!important;margin:0 0 3.2vw!important;opacity:1}
  main .ab-hero h1{font-size:clamp(28px, 11.1vw, 52px)!important;line-height:1!important;font-weight:600!important;letter-spacing:-.02em!important;text-align:left!important;margin:0!important;max-width:none!important;text-wrap:wrap}
  .sv-media.-tall{aspect-ratio:359/413!important;margin:12.8vw 0 0!important}
  main .ab-hero .sec-lead{margin:13.8667vw 0 0!important}
  /* small studio, direct paths */
  .ab-hero .sv-media:not(.-tall){margin:26.6667vw 0 0!important}
  .ab-hero .open-premium{display:block!important;margin:6.4vw 0 0!important;padding:0 0 26.6667vw!important;border:0!important;background:none!important;max-width:none!important;text-align:left!important}
  .ab-hero .op-statement{font-size:8.5333vw!important;line-height:1.1!important;letter-spacing:-.02em!important;font-weight:500!important;margin:0!important;color:#000!important;max-width:none!important}
  .ab-hero .op-body{font-size:4.2667vw!important;line-height:1.45!important;margin:6.4vw 0 0!important;color:var(--muted)!important;max-width:none!important}
  .ab-hero .open-premium.pm:not(.pm-open) > p.op-statement{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important}
  .ab-hero .open-premium.pm:not(.pm-open) > p.op-body{display:-webkit-box!important;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  /* cooperation: dark chapter, icon + title + text */
  main #ausmacht{background:#000!important;color:#fff!important;padding:22.1867vw 4vw!important}
  main #ausmacht::before{display:none!important}
  #ausmacht h2{color:#fff!important}
  #ausmacht .bento{display:block!important;margin:13.8667vw 0 0!important}
  #ausmacht .cell{display:block!important;padding:8.5333vw 0!important;margin:0!important;border:0!important;border-top:1px solid rgba(255,255,255,.2)!important;background:none!important;border-radius:0!important;box-shadow:none!important;min-height:0!important;text-align:left!important}
  #ausmacht .cell:last-child{padding-bottom:0!important}
  .ab-ic{display:block;width:14.9333vw;height:14.9333vw;margin:0 0 7.4667vw;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
  #ausmacht .bn{font-size:6.4vw!important;line-height:1.15!important;letter-spacing:-.02em!important;font-weight:400!important;margin:0!important;color:#fff!important}
  #ausmacht .bl{font-size:4.2667vw!important;line-height:1.45!important;margin:4.2667vw 0 0!important;color:rgba(255,255,255,.7)!important;max-width:none!important}
  /* icon motion: one small idea each, only while its entry is revealed */
  .rv-in .ab-ic .i-b{animation:ab-pop 3.2s cubic-bezier(.37,0,.63,1) infinite}
  .rv-in .ab-ic .i-d{animation:ab-orbit 6s linear infinite;transform-origin:28px 28px}
  .rv-in .ab-ic .i-g{stroke:#ED0019;stroke-dasharray:60;animation:ab-draw 3.6s cubic-bezier(.4,0,0,1) infinite}
  .rv-in .ab-ic .i-h{animation:ab-turn 6s linear infinite;transform-origin:28px 28px}
  .ab-ic .i-d{fill:#ED0019;stroke:none}
  @keyframes ab-pop{0%,55%,100%{opacity:1;transform:none}70%{opacity:0;transform:translateY(3px)}85%{opacity:1;transform:none}}
  @keyframes ab-orbit{to{transform:rotate(360deg)}}
  @keyframes ab-draw{0%{stroke-dashoffset:60}45%,100%{stroke-dashoffset:0}}
  @keyframes ab-turn{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){.ab-ic *{animation:none!important}}
  /* origin story */
  main #geschichte{padding-top:26.6667vw!important;padding-bottom:26.6667vw!important}
  /* media first, then the heading (same order and gap as the studio block above) */
  #geschichte .sv-media{margin:0 0 6.4vw!important}
  .ab-stats{display:grid!important;grid-template-columns:1fr 1fr;gap:4vw;margin:10.6667vw 0 0}
  .ab-stats p{font-size:3.7333vw!important;line-height:1.3!important;margin:2.6667vw 0 0!important;color:var(--muted)!important}
  .ab-stats p.ab-n{font-size:11.2vw!important;line-height:1!important;font-weight:500!important;letter-spacing:-.04em!important;white-space:nowrap;margin:0!important;color:#000!important}
  #geschichte .story{list-style:none!important;margin:10.6667vw 0 0!important;padding:0!important;display:block!important}
  #geschichte .story::before,#geschichte .story-beat::before{display:none!important}
  #geschichte .story-beat{display:block!important;padding:8vw 0!important;margin:0!important;border:0!important;border-top:1px solid rgba(0,0,0,.14)!important}
  #geschichte .story-beat:last-child{padding-bottom:0!important}
  #geschichte .sb-mark{display:none!important}
  #geschichte .sb-body h3{font-size:6.4vw!important;line-height:1.15!important;letter-spacing:-.02em!important;font-weight:400!important;margin:0!important}
  #geschichte .sb-body p{font-size:4.2667vw!important;line-height:1.45!important;margin:4.2667vw 0 0!important;color:var(--muted)!important;max-width:none!important}
  #geschichte .sb-body p .big{font:inherit!important;color:#000!important;font-weight:500!important}
  /* values + team: dark chapter */
  main #werte{background:#000!important;color:#fff!important;padding:22.1867vw 4vw!important}
  main #werte::before{display:none!important}
  #werte .vt{display:block!important}
  #werte h2{color:#fff!important}
  #werte .vt-values p{font-size:4.992vw!important;line-height:1.5!important;margin:6.4vw 0 0!important;color:rgba(255,255,255,.7)!important;max-width:none!important}
  #werte .pm-btn{color:#fff}
  #werte .vt-team{margin:16vw 0 0!important;padding:8vw 0 0!important;border:0!important;border-top:1px solid rgba(255,255,255,.2)!important;background:none!important}
  #werte .vt-lab{display:block;font-size:3.7333vw!important;line-height:1.2!important;letter-spacing:0!important;text-transform:none!important;color:rgba(255,255,255,.6)!important;margin:0!important}
  #werte .vt-team p{font-size:4.2667vw!important;line-height:1.45!important;margin:4.2667vw 0 0!important;color:rgba(255,255,255,.7)!important}
  #werte .vt-names{font-size:8.5333vw!important;line-height:1.15!important;letter-spacing:-.02em!important;font-weight:500!important;margin:8vw 0 0!important;color:#fff!important}
  /* clients: a plain list that links out (the motion showcases live on the Examples page) */
  main #kunden{background:#fff!important;padding-top:26.6667vw!important;padding-bottom:26.6667vw!important}
  #kunden .proof-grid{display:block!important;margin:10.6667vw 0 0!important}
  #kunden .pcard2{display:block!important;padding:6.4vw 0!important;margin:0!important;border:0!important;border-top:1px solid rgba(0,0,0,.14)!important;background:none!important;border-radius:0!important;box-shadow:none!important;color:#000!important;text-decoration:none!important}
  #kunden .pcard2 .pt{display:block!important}
  #kunden .pcard2 .pt b{display:block;font-size:6.4vw!important;line-height:1.15!important;letter-spacing:-.02em!important;font-weight:400!important}
  #kunden .pcard2 .pn{display:block;font-size:3.7333vw!important;line-height:1.3!important;margin:1.6vw 0 0!important;color:var(--muted)!important;letter-spacing:0!important;text-transform:none!important}
  #kunden .pcard2 > p{font-size:4.2667vw!important;line-height:1.45!important;margin:3.2vw 0 0!important;color:var(--muted)!important;max-width:none!important}
  #kunden .pcard2 .pgo{display:inline-flex!important;align-items:center;gap:1.6vw;font-size:3.7333vw!important;margin:3.2vw 0 0!important;color:#000!important;text-decoration:underline;text-underline-offset:.25em}
  #kunden .pcard2 .pgo svg{width:3.7333vw;height:3.7333vw}
  #kunden .phs-pill-d{display:flex!important;margin:10.6667vw 0 0!important}
  /* closing section: own artwork (two overlapping circles meeting on the pill), tools/phone/card-art/outro_about.py */
  .phs-outro.-about .phs-oart-b{background-image:url("../outro-about-art.webp?v=3"),var(--oart-edge);
    background-image:image-set(url("../outro-about-art-2x.webp?v=3") 2x,url("../outro-about-art.webp?v=3") 3x),var(--oart-edge)}
  .phs-outro.-about .phs-oart-g{background-image:url("../outro-about-glow.webp?v=3")}
}