/* <picture> навколо заголовка Discover не має власної коробки ні в якій розкладці */
.ms-title-disc-pic { display: contents; }
body, .page { background: #1a5edb; }

@media (min-width: 1200px) {

  .page { height: 390.253rem; }

  .s-sec, .s-decor { position: absolute; left: 0; top: 0; width: 100%; height: 0; }
  .s-decor { z-index: 0; }
  .s-sec   { z-index: 1; }
  .rot-box { display: flex; align-items: center; justify-content: center; }
  .rot-box > img { flex: none; }
  .ms-stage { display: contents; }
  .ms-story-stack, .ms-stories-inner { display: contents; }
  /* the tools wrapper is a mobile-only layout device; on desktop it generates no box so bino /
     camera / magnifier keep their own absolute positions on the canvas */
  .ms-tools { display: contents; }
  /* stories head (ribbon + title) is a mobile-only grouping; contents on desktop = no box */
  .ms-stories-head { display: contents; }

  .ms-bg-top       { left: 0rem; top: 0rem; width: 120rem; height: 107.244rem; }
  .ms-cloud-a      { left: 59.544rem; top: 43.8706rem; width: 24.8449rem; height: 58.7103rem; }
  .ms-cloud-b      { left: 23.484rem; top: 37.5806rem; width: 43.1042rem; height: 62.62rem; }
  .ms-cloud-b2     { left: 76.8958rem; top: 37.5806rem; width: 43.1042rem; height: 62.62rem; }
  .ms-cloud-c      { left: 0rem; top: 28.7194rem; width: 49.7323rem; height: 67.8306rem; }
  .ms-cloud-a, .ms-cloud-b, .ms-cloud-b2, .ms-cloud-c { mix-blend-mode: multiply; }
  .ms-hill2        { left: 50.5848rem; top: 78.0638rem; width: 69.4375rem; height: 50.3125rem; }
  .ms-hill         { left: 0rem; top: 80.9437rem; width: 58.5688rem; height: 50.2875rem; }

  .ms-hero        { left: 0; top: 0; width: 120rem; height: 50rem; overflow: hidden; isolation: isolate; }
  .ms-hero-img    { right: 0; top: -10.1512rem; width: 130rem; height: 65.0913rem; object-fit: cover; }
  .ms-portal       { left: 71rem; top: 4.875rem; width: 31.625rem; height: 31.625rem; }
  .ms-monocle     { left: 31.4144rem; top: -5.535rem; width: 77.7335rem; height: 107.8rem;
                    display: flex; align-items: center; justify-content: center; }
  .ms-monocle > img { flex: none; width: 54.5906rem; height: 97.013rem; transform: rotate(14.92deg); }
  .ms-shade-l     { left: 0; top: 0; width: 69rem; height: 50rem; opacity: .7; mix-blend-mode: multiply;
                    background: linear-gradient(to left, rgba(0,0,0,0) 0%, #000 55.254%); }
  .ms-shade-r     { right: 0; top: 0; width: 15.6523rem; height: 50rem; opacity: .5; mix-blend-mode: multiply;
                    background: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 100%); }

  .ms-title-hero   { left: 3.125rem; top: 25.7812rem; width: 36.375rem; height: 7.625rem; }
  .ms-subtitle     { left: 3.125rem; top: 31.6rem; width: 36.3125rem; }

  .ms-about-card   { left: 28.9571rem; top: 39.6472rem; width: 62.0857rem; height: 39.9875rem; }
  .ms-cloud-left   { left: 0rem; top: 54.5812rem; width: 26.9438rem; height: 23.6875rem; }
  .ms-cloud-right  { left: 91.8688rem; top: 39.4625rem; width: 28.1313rem; height: 21.8313rem; }
  /* Сцена з грибами й дітьми — одна lottie-анімація замість 7 окремих SVG.
     Полотно 1089x564 лягає 1:1 (1 px макета = 1/16rem), прив'язка по великому грибу. */
  .ms-about-scene  { left: 34.5rem; top: 61.5688rem; width: 68.0625rem; height: 35.25rem;
                     pointer-events: none; }
  .ms-about-title  { left: 49.7625rem; top: 48.1313rem; width: 20.475rem; height: 3.8125rem; }
  .ms-about-body   { left: 40.65rem; top: 54.4438rem; width: 38.6938rem; }
  .ms-btn          { left: 51.9375rem; top: 71.8187rem; width: 16.125rem; height: 2.5rem; background: #ff9b00; border-radius: 0.3125rem; }
  .ms-btn-label    { left: 53.4375rem; top: 72.6625rem; width: 13.1875rem; }
  .ms-line1        { left: 18.1875rem; top: 96.7875rem; width: 83.625rem; height: 0.125rem; background: #ff9b00; }

  .ms-leaf-l1      { left: 0rem; top: 111.039rem; width: 38.8125rem; height: 21.8125rem; }
  .ms-leaf-r1      { left: 93.6631rem; top: 107.098rem; width: 26.375rem; height: 13.4375rem; }
  .ms-leaf-l2      { left: 0rem; top: 135.017rem; width: 28.8125rem; height: 21.8125rem; }
  .ms-leaf-r2      { left: 104.479rem; top: 127.372rem; width: 15.5625rem; height: 19.0625rem; }
  .ms-title-around { left: 44.8356rem; top: 105.622rem; width: 30.375rem; height: 3.8125rem; }
  .ms-waveline     { left: 44.8356rem; top: 111.888rem; width: 30.375rem; height: 0.6875rem; }
  .ms-body2        { left: 40.3312rem; top: 115.6rem; width: 39.3375rem; }
  .ms-eyewear      { left: 14.3419rem; top: 101.796rem; width: 19.3125rem; height: 13.5rem; }
  .ms-telescope    { left: 81.9319rem; top: 102.141rem; width: 21.1875rem; height: 17.125rem; }
  .ms-bino         { left: 14.2525rem; top: 126.204rem; width: 18.9375rem; height: 12.375rem; }
  .ms-camera       { left: 85.9587rem; top: 123.751rem; width: 16.4375rem; height: 15.5rem; }
  .ms-lense        { left: 72.7775rem; top: 142.544rem; width: 13.8125rem; height: 13.8125rem; }
  .ms-mushroom-sm  { left: 57.0775rem; top: 144.499rem; width: 5.875rem; height: 6.6875rem; }
  .ms-sprout       { left: 85.2175rem; top: 139.361rem; width: 11.125rem; height: 11.8125rem; }
  .ms-magnifier    { left: 30.5rem; top: 138.125rem; width: 21.0625rem; height: 22.5625rem; }
  .ms-vine         { left: 18.3581rem; top: 146.564rem; width: 83.5rem; height: 4.625rem; }

  .ms-ribbon-imp   { left: 0rem; top: 164.352rem; width: 120rem; height: 32.9375rem; }
  .ms-title-imp    { left: 39.1125rem; top: 166.382rem; width: 43.0625rem; height: 6.75rem; }
  /* Уся композиція Impact — одна анімація: сполучні лінії, п'ять плашок і квітка.
     Прив'язка 1:1 по плашках (198x140 у файлі = 198x140 у макеті); збіг перевірений
     ще й по лініях (977x471) — розбіжність до 2px. Статичні частини ховаємо нижче. */
  /* Хост стоїть у розмітці рівно там, де була .ms-fan — одразу за пагорбом ms-band-1.
     Власного z-index не задаємо: порядок малювання тут вирішує саме позиція в розмітці,
     інакше квітка або ховається за пагорбом, або накриває гриби. */
  .ms-impact-scene { left: 21.85625rem; top: 174.85875rem;
                     width: 76.375rem; height: 56.8125rem; pointer-events: none; }
  .ms-stat-lines, .ms-stat, .ms-fan, .ms-fanbase { display: none; }
  .ms-stat-lines   { left: 29.3888rem; top: 177.607rem; width: 61.0625rem; height: 29.4375rem; }
  .ms-card-1       { left: 25.3125rem; top: 192.39rem; width: 12.375rem; height: 8.75rem; }
  .ms-card-2       { left: 39.675rem; top: 187.39rem; width: 12.375rem; height: 8.75rem; }
  .ms-card-3       { left: 54.0375rem; top: 184.89rem; width: 12.375rem; height: 8.75rem; }
  .ms-card-4       { left: 67.925rem; top: 187.39rem; width: 12.375rem; height: 8.75rem; }
  .ms-card-5       { left: 82.3125rem; top: 192.39rem; width: 12.375rem; height: 8.75rem; }
  .ms-num-1        { left: 27.6875rem; top: 194.675rem; width: 7.625rem; height: 1.75rem; }
  .ms-num-2        { left: 44.1125rem; top: 189.675rem; width: 3.5rem; height: 1.75rem; }
  .ms-num-3        { left: 57.6313rem; top: 187.175rem; width: 5.1875rem; height: 1.75rem; }
  .ms-num-4        { left: 70.9875rem; top: 189.675rem; width: 6.25rem; height: 1.75rem; }
  .ms-num-5        { left: 85.3125rem; top: 194.675rem; width: 6.375rem; height: 1.75rem; }
  .ms-lab-1        { left: 27.125rem; top: 197.425rem; width: 8.75rem; }
  .ms-lab-2        { left: 42.5125rem; top: 192.425rem; width: 6.6875rem; }
  .ms-lab-3        { left: 55.85rem; top: 189.925rem; width: 8.75rem; }
  .ms-lab-4        { left: 69.1312rem; top: 192.425rem; width: 9.9625rem; }
  .ms-lab-5        { left: 85.5625rem; top: 197.425rem; width: 5.875rem; }

  .ms-rays         { left: 0rem; top: 123.326rem; width: 120rem; height: 101.625rem; }
  .ms-rect8        { left: 0rem; top: 228.025rem; width: 120rem; height: 39.2062rem; background: #9a3ddb; }
  .ms-band-2       { left: 13.125rem; top: 215.25rem; width: 93.75rem; height: 13rem; }
  .ms-band-1       { left: 0rem; top: 218rem; width: 120rem; height: 10.25rem; }
  .ms-band-3       { left: 37.25rem; top: 218rem; width: 82.75rem; height: 10.25rem; }
  .ms-fan          { left: 34.6775rem; top: 198.093rem; width: 50.6875rem; height: 53.75rem; }
  .ms-fanbase      { left: 52.2963rem; top: 201.099rem; width: 15.4375rem; height: 8rem; }
  .ms-tree-l       { left: 3.93063rem; top: 203.993rem; width: 17.875rem; height: 22.0625rem; }
  .ms-tree-r       { left: 104.981rem; top: 200.269rem; width: 15.0625rem; height: 22rem; }
  .ms-flowers-l    { left: 0rem; top: 216.864rem; width: 23.6875rem; height: 12.9375rem; }
  .ms-flowers-r    { left: 94.1388rem; top: 216.074rem; width: 25.875rem; height: 15.1875rem; }
  .ms-mr-tall      { left: 37.625rem; top: 210.923rem; width: 7.1875rem; height: 12.1875rem; }
  .ms-mr-mid       { left: 94.51rem; top: 213.416rem; width: 5.1875rem; height: 8.875rem; }
  .ms-mr-mid2      { left: 4.39125rem; top: 213.07rem; width: 5.1875rem; height: 8.875rem; }
  .ms-mr-sm        { left: 90.47rem; top: 217.727rem; width: 6.125rem; height: 7.3125rem; }
  .ms-mr-sm2       { left: 34.6412rem; top: 218.296rem; width: 6.125rem; height: 7.3125rem; }
  .ms-mr-sm3       { left: 12.5712rem; top: 214.684rem; width: 6.125rem; height: 7.3125rem; }
  .ms-fl-a         { left: 40.7863rem; top: 220.882rem; width: 5.6875rem; height: 5.375rem; }
  .ms-fl-b         { left: 96.2931rem; top: 221.766rem; width: 5.25rem; height: 4.5625rem; }
  .ms-fl-c         { left: 99.2506rem; top: 216.975rem; width: 4.4375rem; height: 4.4375rem; }
  .ms-fl-d         { left: 43.815rem; top: 217.854rem; width: 4.25rem; height: 4rem; }
  .ms-fl-e         { left: 1.10187rem; top: 215.808rem; width: 4.25rem; height: 4rem; }

  .ms-row-1        { left: 46.7812rem; top: 233.094rem; width: 73.2188rem; height: 4rem; background: #1a5edb; }
  .ms-row-2        { left: 46.7812rem; top: 237.094rem; width: 73.2188rem; height: 4rem; background: #efb152; }
  .ms-row-3        { left: 46.7812rem; top: 241.031rem; width: 73.2188rem; height: 4rem; background: #a84de8; }
  .ms-row-4        { left: 46.7812rem; top: 245.031rem; width: 73.2188rem; height: 4rem; background: #f178dd; }
  .ms-row-5        { left: 46.7812rem; top: 249.031rem; width: 73.2188rem; height: 4rem; background: #345eb9; }
  .ms-row-6        { left: 46.7812rem; top: 253.031rem; width: 73.2188rem; height: 4rem; background: #a84de8; }
  .ms-row-7        { left: 46.7812rem; top: 257.031rem; width: 73.2188rem; height: 4rem; background: #447feb; }
  .ms-panel        { left: 0rem; top: 233.094rem; width: 46.7812rem; height: 27.9375rem; background: #002d8e; }
  .ms-title-disc   { left: 3.12rem; top: 242.072rem; width: 40.0625rem; height: 10rem; }
  .ms-photo-card   { left: 91.875rem; top: 230.625rem; width: 24.0125rem; height: 24.0125rem; }
  .ms-svc-1        { left: 48.6562rem; top: 234.438rem; width: 36.75rem; height: 1.3125rem; }
  .ms-svc-2        { left: 48.6562rem; top: 238.438rem; width: 28.25rem; height: 1.3125rem; }
  .ms-svc-3        { left: 48.6562rem; top: 242.35rem; width: 22.5rem; height: 1.3125rem; }
  .ms-svc-4        { left: 48.6562rem; top: 246.375rem; width: 37.8125rem; height: 1.3125rem; }
  .ms-svc-5        { left: 48.6562rem; top: 250.375rem; width: 41.0625rem; height: 1.3125rem; }
  .ms-svc-6        { left: 48.6562rem; top: 254.375rem; width: 40.875rem; height: 1.3125rem; }
  .ms-svc-7        { left: 48.6562rem; top: 258.375rem; width: 40.875rem; height: 1.3125rem; }

  .ms-stories-bg   { left: 0rem; top: 261.031rem; width: 120rem; height: 44.5rem; background: #facdf2; }
  .ms-stories-pat  { left: 0rem; top: 261.029rem; width: 120rem; height: 44.5rem; }
  .ms-stories-rib  { left: 0rem; top: 276.786rem; width: 120rem; height: 21.8125rem; }
  .ms-title-stories{ left: 28.8125rem; top: 286.104rem; width: 15.875rem; height: 5.9375rem; }
  .ms-scard        { left: 48.6331rem; top: 271.015rem; width: 34.9704rem; height: 20.9292rem; }
  .ms-scard > div { width: 33.8125rem; height: 18.75rem; background: #fff;
                   border: 0.125rem solid #f178dd; border-radius: 1.875rem; transform: rotate(-3.76deg); }
  .ms-sballs       { left: 74.3844rem; top: 272.926rem; width: 6.95044rem; height: 6.54263rem; }
  .ms-sballs > img { width: 6.5625rem; height: 6.125rem; transform: rotate(-3.76deg); }
  .ms-stitle       { left: 50.6269rem; top: 273.37rem; width: 24.7444rem; height: 5.16731rem; }
  .ms-stitle > p { width: 24.5635rem; transform: rotate(-3.76deg); }
  .ms-sbody        { left: 51.0225rem; top: 279.836rem; width: 17.9644rem; height: 6.89462rem; }
  .ms-sbody > p { width: 17.625rem; transform: rotate(-3.76deg); }
  .ms-smore        { left: 57.8031rem; top: 286.243rem; width: 19.7035rem; height: 2.16562rem; }
  .ms-smore > p { width: 19.6885rem; transform: rotate(-3.76deg); text-align: right; }
  .ms-sarrow       { left: 78.425rem; top: 285.082rem; width: 2.79575rem; height: 2.854rem; }
  .ms-sarrow > img { width: 2.625rem; height: 2.6875rem; transform: rotate(-3.76deg); }
  .ms-scard-fc  { left: 49.1375rem; top: 273.848rem; width: 34.6812rem; height: 20.3687rem; }
  .ms-scard-fc > div { width: 33.8125rem; height: 18.75rem; background: #fff; border: 0.125rem solid #f178dd; border-radius: 1.875rem; transform: rotate(-2.78deg); }
  .ms-stitle-fc  { left: 51.1125rem; top: 276.495rem; width: 19.3313rem; height: 4.4875rem; }
  .ms-stitle-fc > p { width: 19.1811rem; transform: rotate(-2.78deg); }
  .ms-sbody-fc  { left: 51.4062rem; top: 282.553rem; width: 19.65rem; height: 6.68125rem; }
  .ms-sbody-fc > p { width: 19.3941rem; transform: rotate(-2.78deg); }
  .ms-smore-fc  { left: 58.075rem; top: 289.226rem; width: 19.7063rem; height: 1.83125rem; }
  .ms-smore-fc > p { width: 19.6869rem; text-align: right; transform: rotate(-2.78deg); }
  .ms-sarrow-fc  { left: 78.7313rem; top: 288.129rem; width: 2.75rem; height: 2.8125rem; }
  .ms-sarrow-fc > img { width: 2.625rem; height: 2.6875rem; transform: rotate(-2.78deg); }
  .ms-sicon-fc  { left: 74.7062rem; top: 275.881rem; width: 6.55rem; height: 5.3625rem; }
  .ms-sicon-fc > img, .ms-sicon-fc > .lot-in { width: 6.3125rem; height: 5.0625rem; transform: rotate(-2.78deg); }
  .ms-scard-care  { left: 49.3687rem; top: 272.352rem; width: 34.1187rem; height: 19.3062rem; }
  .ms-scard-care > div { width: 33.8125rem; height: 18.75rem; background: #fff; border: 0.125rem solid #f178dd; border-radius: 1.875rem; transform: rotate(-0.95deg); }
  .ms-stitle-care  { left: 51.2125rem; top: 274.589rem; width: 17.7125rem; height: 3.85625rem; }
  .ms-stitle-care > p { width: 17.6558rem; transform: rotate(-0.95deg); }
  /* ширше за макет: клієнт дописав текст картки (+«respite and rediscover their strengths») —
     у 17.6rem він ставав у 5 рядків і впирався в «Read more»; праворуч до сердечка місця досить */
  .ms-sbody-care  { left: 51.1125rem; top: 280.651rem; width: 22.4rem; height: 4.41875rem; }
  .ms-sbody-care > p { width: 22.3rem; transform: rotate(-0.95deg); }
  .ms-smore-care  { left: 57.3188rem; top: 288.324rem; width: 19.7rem; height: 1.2rem; }
  .ms-smore-care > p { width: 19.6882rem; text-align: right; transform: rotate(-0.95deg); }
  .ms-sarrow-care  { left: 78.0625rem; top: 288.025rem; width: 2.66875rem; height: 2.73125rem; }
  .ms-sarrow-care > img { width: 2.625rem; height: 2.6875rem; transform: rotate(-0.95deg); }
  .ms-sicon-care  { left: 75.2188rem; top: 275.141rem; width: 5.9rem; height: 5.28125rem; }
  .ms-sicon-care > img { width: 5.81259rem; height: 5.18775rem; transform: rotate(-0.95deg); }
  .ms-scard-lp  { left: 49.2812rem; top: 271.97rem; width: 33.9438rem; height: 18.9875rem; }
  .ms-scard-lp > div { width: 33.8125rem; height: 18.75rem; background: #fff; border: 0.125rem solid #f178dd; border-radius: 1.875rem; transform: rotate(-0.4deg); }
  .ms-stitle-lp  { left: 51.1437rem; top: 274.839rem; width: 17.6812rem; height: 3.6875rem; }
  .ms-stitle-lp > p { width: 17.6568rem; transform: rotate(-0.4deg); }
  .ms-sbody-lp  { left: 51.1rem; top: 280.843rem; width: 18.8938rem; height: 5.88125rem; }
  .ms-sbody-lp > p { width: 18.8541rem; transform: rotate(-0.4deg); }
  .ms-smore-lp  { left: 57.3875rem; top: 287.788rem; width: 19.6938rem; height: 1.0125rem; }
  .ms-smore-lp > p { width: 19.6881rem; text-align: right; transform: rotate(-0.4deg); }
  .ms-sarrow-lp  { left: 78.1188rem; top: 287.132rem; width: 2.64375rem; height: 2.70625rem; }
  .ms-sarrow-lp > img { width: 2.625rem; height: 2.6875rem; transform: rotate(-0.4deg); }
  .ms-sicon-lp  { left: 74.7687rem; top: 275.181rem; width: 6.29375rem; height: 6.10625rem; }
  .ms-sicon-lp > img, .ms-sicon-lp > .lot-in { width: 6.25rem; height: 6.0625rem; transform: rotate(-0.4deg); }

  /* смуга на всю ширину: зсув -0.875rem з Figma лишав непокриту полоску 14px скраю */
  .ms-rect29       { left: 0; top: 296.688rem; width: 100%; height: 66.925rem; background: #002d8e; }
  .ms-wave-1       { left: 0rem; top: 335.038rem; width: 120rem; height: 16.5625rem; }
  .ms-wave-2       { left: 0rem; top: 346.729rem; width: 120rem; height: 16.5625rem; }
  /* Полотно 800x500 лягає 1:1, прив'язка по обкладинці звіту.
     Мобільна версія розкладає обкладинку й людину окремо, тож там лишаються статичні картинки. */
  .ms-report-scene { left: 55.1199rem; top: 307.0858rem; width: 50rem; height: 31.25rem;
                     pointer-events: none; }
  .ms-report-scene-m { display: none; }
  .ms-head-read    { left: 19.915rem; top: 317.369rem; width: 29.25rem; height: 3.75rem; }
  .ms-head-report  { left: 18.1875rem; top: 322.331rem; width: 32.6875rem; height: 4.875rem; }
  .ms-btn3         { left: 26.4625rem; top: 329.363rem; width: 16.125rem; height: 2.5rem; background: #ff9b00; border-radius: 0.3125rem; }
  .ms-btn3-label   { left: 27.9625rem; top: 330.144rem; width: 13.1875rem; }
  .ms-bk-a         { left: 8.03063rem; top: 315.183rem; width: 9.1875rem; height: 9.1875rem; }
  .ms-bk-b         { left: 46.7231rem; top: 329.031rem; width: 7.375rem; height: 7.3125rem; }
  .ms-bk-c         { left: 50.9625rem; top: 311.993rem; width: 3.95625rem; height: 3.95625rem; }
  .ms-bk-d         { left: 107.494rem; top: 326.181rem; width: 3.95625rem; height: 3.95625rem; }
  .ms-bk-e         { left: 108.75rem; top: 315.95rem; width: 3.95625rem; height: 3.95625rem; }
  .ms-bk-f         { left: 17.2175rem; top: 332.1rem; width: 3.95625rem; height: 3.95625rem; }
  .ms-bk-g         { left: 31.3344rem; top: 309.363rem; width: 6.125rem; height: 6.1875rem; }
  .ms-bk-h         { left: 98.5625rem; top: 310.881rem; width: 8.3125rem; height: 8.25rem; }
  .ms-rect30       { left: 0rem; top: 355.531rem; width: 120rem; height: 34.7225rem; background: #1a5edb; pointer-events: none; }  /* декоративне тло; лежало поверх лівого краю кнопки Donate */
  .ms-cta-1        { left: 30.2669rem; top: 342.13rem; width: 9rem; height: 13.3125rem; }
  .ms-cta-2        { left: 57.0737rem; top: 342.13rem; width: 6rem; height: 13.3125rem; }
  .ms-cta-3        { left: 80.0625rem; top: 342.13rem; width: 11.125rem; height: 13.3125rem; }
  .ms-cta-t1       { left: 25rem; top: 357.3rem; width: 20.125rem; }
  .ms-cta-t2       { left: 52.625rem; top: 357.3rem; width: 14.9375rem; }
  .ms-cta-t3       { left: 74.6312rem; top: 357.3rem; width: 20.6125rem; }
  .ms-cb-1         { left: 30.0688rem; top: 361.363rem; width: 9.375rem; height: 2.5rem; background: #ff9b00; border-radius: 0.3125rem; }
  .ms-cb-2         { left: 55.4062rem; top: 361.363rem; width: 9.375rem; height: 2.5rem; background: #ff9b00; border-radius: 0.3125rem; }
  .ms-cb-3         { left: 80.25rem; top: 361.363rem; width: 9.375rem; height: 2.5rem; background: #ff9b00; border-radius: 0.3125rem; }
  .ms-cl-1         { left: 32.725rem; top: 362.144rem; width: 4.0625rem; }
  .ms-cl-2         { left: 57.375rem; top: 362.144rem; width: 5.375rem; }
  .ms-cl-3         { left: 81.6562rem; top: 362.144rem; width: 6.5625rem; }

  .footer-bg      { display: none; }
  .f-line-top     { top: 370.231rem; }
  .f-line-bottom  { top: 385.226rem; }
  .f-logo         { top: 373.347rem; }
  .f-divider      { top: 373.356rem; }
  .f-legal        { top: 387.101rem; }
  .f-fb, .f-ig, .f-tt, .f-web { top: 380.601rem; }
  .f-li           { top: 380.724rem; }
  .f-head-services, .f-head-stories { top: 373.356rem; }
  .f-c1-1, .f-c2-1, .f-c3-1 { top: 375.581rem; }
  .f-c1-2, .f-c3-2 { top: 377.539rem; }
  .f-c2-2         { top: 377.519rem; }
  .f-c1-3, .f-c3-3 { top: 379.476rem; }
  .f-c2-3         { top: 379.456rem; }
  .f-c1-4, .f-c3-4 { top: 381.414rem; }
}

.ms-bk > img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.ms-bk > .g { mix-blend-mode: color-dodge; }

.ms-svc-1, .ms-svc-2, .ms-svc-3, .ms-svc-4, .ms-svc-5, .ms-svc-6, .ms-svc-7,
.ms-btn3-label, .ms-cta-t1, .ms-cta-t2, .ms-cta-t3, .ms-cl-1, .ms-cl-2, .ms-cl-3,
.ms-stitle > p, .ms-sbody > p, .ms-smore > p,
.ms-subtitle, .ms-about-body, .ms-btn-label, .ms-body2,
.ms-num-1, .ms-num-2, .ms-num-3, .ms-num-4, .ms-num-5,
.ms-lab-1, .ms-lab-2, .ms-lab-3, .ms-lab-4, .ms-lab-5 {
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic; overflow-wrap: break-word;
}
.ms-subtitle   { font-weight: 500; font-size: 1.875rem; line-height: normal; color: #fff; }
.ms-about-body { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000;
                 text-align: center; white-space: pre-wrap; }
/* Абзац замість порожнього рядка в тексті: на мобільному white-space стає normal і той
   рядок просто зникав, тож розрив губився. Відступ = рівно один рядок, тож на десктопі
   висота блока не змінилась. */
.ms-about-body > p + p { margin-top: 1.9em; }
.ms-btn-label  { font-weight: 700; font-size: 1.25rem; line-height: normal; color: #000; text-align: center;
                 white-space: nowrap; }
.ms-btn        { text-decoration: none; display: block; }
.ms-body2      { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #fff;
                 text-align: center; }
/* real paragraphs now (was a single blob with pre-wrap newlines, which collapsed on mobile) */
.ms-body2 > p  { margin: 0 0 1.35em; }
.ms-body2 > p:last-child { margin-bottom: 0; }

.ms-num-1, .ms-num-2, .ms-num-3, .ms-num-4, .ms-num-5 { font-weight: 700; font-size: 2.5rem; line-height: normal; color: #1a5edb;
  text-align: center; white-space: nowrap; }
.ms-lab-1, .ms-lab-2, .ms-lab-3, .ms-lab-4, .ms-lab-5 { font-weight: 500; font-size: 1.25rem; line-height: normal; color: #000;
  text-align: center; white-space: pre-wrap; }

.ms-svc-1, .ms-svc-2, .ms-svc-3, .ms-svc-4, .ms-svc-5, .ms-svc-6, .ms-svc-7 { font-weight: 700; font-size: 1.875rem; line-height: normal; color: #fff;
  white-space: nowrap; text-decoration: none; }

.ms-stitle-fc > p, .ms-stitle-care > p, .ms-stitle-lp > p { font-weight: 700; font-size: 1.875rem; line-height: normal; color: #1a5edb; }
.ms-sbody-fc > p, .ms-sbody-care > p, .ms-sbody-lp > p { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000; }
.ms-smore-fc > p, .ms-smore-care > p, .ms-smore-lp > p { font-weight: 700; font-size: 1.25rem; line-height: normal; color: #1a5edb; }
.ms-smore-fc, .ms-smore-care, .ms-smore-lp { text-decoration: none; }
.ms-stitle > p { font-weight: 700; font-size: 1.875rem; line-height: normal; color: #1a5edb; }
.ms-sbody > p  { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000; }
.ms-smore > p  { font-weight: 700; font-size: 1.25rem; line-height: normal; color: #1a5edb; }
.ms-smore      { text-decoration: none; }

.ms-btn3-label, .ms-cl-1, .ms-cl-2, .ms-cl-3 { font-weight: 700; font-size: 1.25rem; line-height: normal;
  color: #000; text-align: center; white-space: nowrap; }
.ms-cta-t1, .ms-cta-t2, .ms-cta-t3 { font-weight: 500; font-size: 1.25rem; line-height: 1.5rem;
  color: #fff; text-align: center; }
.ms-btn3, .ms-cb-1, .ms-cb-2, .ms-cb-3 { text-decoration: none; display: block; }
/* Підпис кнопки лежить ПОВЕРХ посилання окремим елементом, а не всередині нього — тому
   наведення саме на текст не потрапляло в лінк (курсор не мінявся, кліку не було; спрацьовувало
   лише повз текст). Робимо підпис прозорим для курсора: наведення проходить крізь нього
   на <a> під ним. Доступність не страждає — у посилань є aria-label. */
.ms-btn-label, .ms-btn3-label, .ms-cl-1, .ms-cl-2, .ms-cl-3 { pointer-events: none; }
@media (max-width: 1199.98px) {

  .page { display: flex; flex-direction: column; background: #1a5edb; }
  .s-sec, .s-decor { position: relative; width: auto; height: auto; z-index: auto; }
  .s-bg, .s-rays { display: none; }
  .s-hero { order: 0; } .s-about { order: 1; } .s-around { order: 2; }
  .s-impact { order: 3; } .s-band { order: 4; } .s-discover { order: 5; }
  .s-stories { order: 6; } .s-report { order: 7; } .s-cta { order: 8; }
  .s-footer { order: 20; }
  .ms-stage { display: block; }

  .ms-btnwrap { position: relative; width: 16.125rem; max-width: 100%; height: 2.5rem; }
  .ms-btnwrap > a { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .ms-btnwrap > p { position: absolute; left: 0; top: 50%; width: 100%;
                    transform: translateY(-50%); text-align: center; font-size: 1.0625rem; }

  .s-hero { display: flex; flex-direction: column; padding-bottom: 4px; }
  .ms-hero { position: relative; order: 0; width: 100%; height: auto;
             aspect-ratio: 430 / 320; overflow: hidden; isolation: isolate;
             --hf: 1.78605; --hx: -78.6047%; }
  .ms-hero-img { position: absolute; left: calc(var(--hx) - 8.3333% * var(--hf)); top: -20.3%;
                 width: calc(108.33% * var(--hf)); height: 130.19%; object-fit: cover; }
  .ms-portal   { position: absolute; left: calc(var(--hx) + 59.17% * var(--hf)); top: 9.75%;
                 width: calc(26.35% * var(--hf)); height: 63.25%; }
  .ms-monocle  { position: absolute; left: calc(var(--hx) + 26.18% * var(--hf)); top: -11.07%;
                 width: calc(64.78% * var(--hf)); height: 215.6%;
                 display: flex; align-items: center; justify-content: center; }
  .ms-monocle > img { flex: none; width: 70.23%; height: 90.0%; transform: rotate(14.92deg); }
  .ms-shade-l, .ms-shade-r { display: none; }
  .ms-title-hero { order: 1; width: min(22.75rem, 74%); height: auto; margin: 1.5rem var(--pad) 0; }
  .ms-subtitle   { order: 2; margin: 0.75rem var(--pad) 1.5rem; font-size: var(--body); }

  .s-about { margin: 0 var(--pad); padding: 1.875rem 1.375rem 2.125rem;
             background: #f9ead7; border-radius: 1.875rem;   /* як десктопна картка About */
             display: flex; flex-direction: column; align-items: center; }
  .ms-about-card, .ms-cloud-left, .ms-cloud-right,
  .ms-about-scene, .ms-line1 { display: none; }
  .ms-about-title { width: min(16.25rem, 62%); height: auto; }
  .ms-about-body  { margin-top: 1.125rem; font-size: var(--body); line-height: 1.5;
                    white-space: normal; text-align: center; }
  .ms-about-body > p + p { margin-top: 1.9em; }
  .ms-btnwrap.ms-bw-w1 { margin-top: 1.5rem; }
  .s-about > .ms-about-title { order: 0; }
  .s-about > .ms-about-body  { order: 1; }
  .s-about > .ms-btnwrap     { order: 2; }
  .ms-btnwrap > a { background: #ff9b00; border-radius: 0.3125rem; }


  .s-around { position: relative; padding: 2.75rem var(--pad) 1.25rem;
              display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
              column-gap: 0.5rem; justify-items: center; align-items: center; }
  .ms-leaf-l1, .ms-leaf-r1, .ms-leaf-l2, .ms-leaf-r2, .ms-vine,
  .ms-mushroom-sm, .ms-sprout { display: none; }
  .ms-title-around { grid-column: 1 / -1; width: min(15rem, 60%); height: auto; }
  .ms-waveline     { grid-column: 1 / -1; width: min(15rem, 60%); height: auto; margin-top: -0.5rem; }
  /* slimmer text column (client: "make the width slimmer, section can be taller") */
  .ms-body2        { grid-column: 1 / -1; margin: 2.5rem auto 0; max-width: 19rem;
                     font-size: var(--body); line-height: 1.5; text-align: center; }
  .ms-eyewear   { position: absolute; left: -0.75rem; top: 1.75rem; width: 5.25rem; height: auto; }
  .ms-telescope { position: absolute; right: -0.5rem; top: 1.25rem; width: 4.75rem; height: auto; }
  /* tool row below the paragraph = the divider between "All Around Us" and "Impact" (client
     request). Binoculars / camera / magnifying glass, centred; the loose lens is desktop-only. */
  .ms-lense { display: none; }
  .ms-tools { grid-column: 1 / -1; display: flex; justify-content: center; align-items: flex-end;
              gap: 1.5rem; width: 100%; margin-top: 2.5rem; }
  .ms-tools > img { width: 30%; max-width: 6rem; height: 4.25rem; object-fit: contain; }

  .s-impact { padding: 2.5rem var(--pad) 2.5rem;
              display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.125rem 0.875rem; }
  .ms-ribbon-imp, .ms-stat-lines { display: none; }
  .ms-title-imp { grid-column: 1 / -1; justify-self: center;
                  width: min(26.25rem, 94%); height: auto; margin-bottom: 0.5rem; }
  .ms-stat { position: relative; aspect-ratio: 198 / 140;
             display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .ms-stat:last-child { grid-column: 1 / -1; justify-self: center;
                        width: calc(50% - 0.4375rem); }
  .ms-card-1, .ms-card-2, .ms-card-3, .ms-card-4, .ms-card-5 {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .ms-num-1, .ms-num-2, .ms-num-3, .ms-num-4, .ms-num-5 {
    position: relative; font-size: var(--num); }
  .ms-lab-1, .ms-lab-2, .ms-lab-3, .ms-lab-4, .ms-lab-5 {
    position: relative; margin-top: 0.5rem; font-size: var(--cap); line-height: 1.3; }

  .s-band { position: relative; width: 100%; aspect-ratio: 1920 / 560; overflow: hidden; }
  .s-band > .a { position: absolute; }
  .ms-band-2       { left: 10.9375%; top: 49.0179%; width: 78.1250%; height: 37.1429%; }
  .ms-band-3       { left: 31.0417%; top: 56.8750%; width: 68.9583%; height: 29.2857%; }
  .ms-flowers-r    { left: 78.4490%; top: 51.3721%; width: 21.5625%; height: 43.3929%; }
  .ms-rect8        { left: 0.0000%; top: 85.5179%; width: 100.0000%; height: 112.0177%; }
  .ms-tree-r       { left: 87.4842%; top: 6.2150%; width: 12.5521%; height: 62.8571%; }
  .ms-tree-l       { left: 3.2755%; top: 16.8550%; width: 14.8958%; height: 63.0357%; }
  .ms-band-1       { left: 0.0000%; top: 56.8750%; width: 100.0000%; height: 29.2857%; }
  .ms-fan          { left: 28.8979%; top: -0.0021%; width: 42.2396%; height: 153.5714%; }
  .ms-fanbase      { left: 43.5803%; top: 8.5864%; width: 12.8646%; height: 22.8571%; }
  .ms-mr-tall      { left: 31.3542%; top: 36.6550%; width: 5.9896%; height: 34.8214%; }
  .ms-mr-mid       { left: 78.7583%; top: 43.7779%; width: 4.3229%; height: 25.3571%; }
  .ms-mr-mid2      { left: 3.6594%; top: 42.7893%; width: 4.3229%; height: 25.3571%; }
  .ms-mr-sm        { left: 75.3917%; top: 56.0950%; width: 5.1042%; height: 20.8929%; }
  .ms-mr-sm2       { left: 28.8677%; top: 57.7207%; width: 5.1042%; height: 20.8929%; }
  .ms-mr-sm3       { left: 10.4760%; top: 47.4007%; width: 5.1042%; height: 20.8929%; }
  .ms-fl-a         { left: 33.9886%; top: 65.1093%; width: 4.7396%; height: 15.3571%; }
  .ms-fl-b         { left: 80.2442%; top: 67.6350%; width: 4.3750%; height: 13.0357%; }
  .ms-fl-c         { left: 82.7088%; top: 53.9464%; width: 3.6979%; height: 12.6786%; }
  .ms-fl-d         { left: 36.5125%; top: 56.4579%; width: 3.5417%; height: 11.4286%; }
  .ms-fl-e         { left: 0.9182%; top: 50.6121%; width: 3.5417%; height: 11.4286%; }

  .s-discover { background: #002d8e; display: flex; flex-direction: column; }
  .ms-panel { display: none; }
  /* Клієнт: у стовпчиковій розкладці заголовок має бути вирівняний уліво, як рядки під ним.
     Це SVG-крива, де «Discover Our» відцентровано над «Impact in FY2025», тож на ≤1279
     <picture> підставляє копію з першим рядком, зсунутим до лівого краю. */
  .ms-title-disc { order: -1; width: min(25rem, 84%); height: auto; margin: 2.25rem var(--pad) 1.5rem; }
  .ms-photo-card { display: none; }
  .ms-svcrow { position: relative; display: flex; align-items: center;
               min-height: 3.5rem; padding: 0.75rem var(--pad); }
  .ms-row-1, .ms-row-2, .ms-row-3, .ms-row-4, .ms-row-5, .ms-row-6, .ms-row-7 {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .ms-row-1 { background: #1a5edb; } .ms-row-2 { background: #efb152; }
  .ms-row-3 { background: #a84de8; } .ms-row-4 { background: #f178dd; }
  .ms-row-5 { background: #345eb9; } .ms-row-6 { background: #a84de8; }
  .ms-row-7 { background: #447feb; }
  .ms-svc-1, .ms-svc-2, .ms-svc-3, .ms-svc-4, .ms-svc-5, .ms-svc-6, .ms-svc-7 {
    position: relative; font-size: 1.0625rem; white-space: normal; }

  .s-stories { position: relative; display: block; background: #facdf2; padding: 0; }
  /* Секція — рівно по вмісту. На час виїзду карток pin ScrollTrigger фіксує всю сторінку (anim.js),
     тож висота блока не змінюється. */
  .ms-stories-inner { overflow: hidden;
                      display: flex; flex-direction: column; align-items: center;
                      padding: 2.75rem var(--pad) 3.25rem; }
  /* Стрічка як на сторінках послуг: суцільна смуга на всю ширину секції, підпис по центру.
     Замість широкої хвилі, яку обрізало краями екрана, — та сама арка, що й у "Related Stories:". */
  .ms-stories-head { position: relative; display: flex; align-items: center; justify-content: center;
                     width: calc(100% + var(--pad) * 2); margin: 0 calc(var(--pad) * -1);
                     /* саме height, а не min-height: інакше відсотковий зсув підпису
                        нижче не має від чого рахуватись і просто не спрацьовує */
                     height: 120px;
                     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q200 8 400 20 L400 70 Q200 58 0 70 Z' fill='%237a00d0'/%3E%3Cpath d='M0 20 Q200 8 400 20' fill='none' stroke='%23ffffff' stroke-width='3.5'/%3E%3Cpath d='M0 70 Q200 58 400 70' fill='none' stroke='%23ffffff' stroke-width='3.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
  .ms-stories-bg, .ms-stories-pat, .ms-scard,
  .ms-scard-fc, .ms-scard-care, .ms-scard-lp { display: none; }
  /* Арка вигнута вгору: у середині екрана смуга проходить вище, ніж центр блока
     (14..64 з 90 одиниць макета, тобто центр смуги на 43.33%, а не на 50%).
     Тому підпис піднімаємо на різницю — 6.67% висоти блока. */
  .ms-title-stories { width: min(8.4375rem, 36%); height: auto; position: relative;
                      top: -6.67%; z-index: 2; margin-top: 0;
                      /* У самій картинці напис нахилений на 12.6° — знайдено перебором:
                         повертаємо на кут X і міряємо, що лишилось від нахилу базової лінії;
                         нуль припадає між 12° і 13°. Компенсуємо, щоб на прямій ділянці
                         стрічки текст стояв рівно. */
                      transform: rotate(12.6deg); }
  /* decorative ribbon behind the "Stories" title (shown on mobile too; wipes in via JS) */
  /* ribbon taller than the title text so "Stories" sits within the band (height-based; the wide
     band bleeds past the section edges and is clipped by s-stories overflow:hidden) */
  /* ribbon is absolute within .ms-stories-head, sitting 1.5rem above the title top (same look as
     before, but now it moves with the title when the group is centred) */
  .ms-stories-rib { display: none; }

  /* ---- Stories card STACK: overlay all four cards; JS flies them up into the pile on scroll ---- */
  /* Маска по нижньому краю стека: картка в польоті вилітала за низ і накривала кнопку —
     виглядало так, ніби блок розтягується. Тепер підйом і опускання ховаються за цією межею,
     а картка ніби виїжджає з-під неї. З боків і згори виріз від'ємний, щоб нахил карток
     (rotate ±3°) не обрізався. */
  .ms-story-stack { position: relative; display: block; width: 100%; max-width: 35rem;
                    margin: 3.5rem auto 0; min-height: 22rem;
                    /* праворуч маска відкрита до краю екрана: картки виїжджають збоку (на планшеті стопка
                       вужча за екран, і з -3rem картка з'являлась би нізвідки посеред екрана) */
                    clip-path: inset(-3rem -100vw 0 -3rem); }
  .ms-story-fc, .ms-story-care, .ms-story-lp { display: block; }
  .ms-story { position: absolute; left: 0; right: 0; top: 0; width: 100%; margin: 0;
              background: #fff; border: 0.125rem solid #f178dd; border-radius: 1.875rem;
              padding: 1.625rem 1.5rem 1.875rem;
              will-change: transform, opacity; }

  /* top-right graphic: boccia balls (building) or the story icon (others) */
  .ms-sballs, .ms-sicon-fc, .ms-sicon-care, .ms-sicon-lp {
    position: absolute; right: 1.125rem; top: 1rem; width: 4rem; height: auto; }
  .ms-sballs > img, .ms-sicon-fc > img, .ms-sicon-care > img, .ms-sicon-lp > img,
  .ms-sicon-fc > .lot-in, .ms-sicon-lp > .lot-in {
    width: 100%; height: auto; transform: none; }

  /* title — reserve the top-right zone so the balls/icon never block the body text */
  .ms-stitle, .ms-stitle-fc, .ms-stitle-care, .ms-stitle-lp {
    width: auto; height: auto; padding-right: 5rem; min-height: 3.75rem; }
  .ms-stitle > p, .ms-stitle-fc > p, .ms-stitle-care > p, .ms-stitle-lp > p {
    width: auto; font-size: 1.375rem; transform: none; }

  /* body */
  .ms-sbody, .ms-sbody-fc, .ms-sbody-care, .ms-sbody-lp {
    width: auto; height: auto; margin-top: 0.75rem; padding-right: 0.25rem; }
  .ms-sbody > p, .ms-sbody-fc > p, .ms-sbody-care > p, .ms-sbody-lp > p {
    width: auto; font-size: 0.9375rem; line-height: 1.45; transform: none; }

  /* read more */
  .ms-smore, .ms-smore-fc, .ms-smore-care, .ms-smore-lp {
    display: block; width: auto; height: auto; margin-top: 1.125rem; padding-right: 2.75rem; }
  .ms-smore > p, .ms-smore-fc > p, .ms-smore-care > p, .ms-smore-lp > p {
    width: auto; font-size: 1rem; text-align: left; transform: none; }

  /* arrow */
  .ms-sarrow, .ms-sarrow-fc, .ms-sarrow-care, .ms-sarrow-lp {
    position: absolute; right: 1.5rem; bottom: 1.625rem; width: 1.875rem; height: auto; }
  .ms-sarrow > img, .ms-sarrow-fc > img, .ms-sarrow-care > img, .ms-sarrow-lp > img {
    width: 100%; height: auto; transform: none; }


  .s-report { position: relative; overflow: hidden; background: #002d8e;
              padding: 2.75rem var(--pad) 3rem;
              display: flex; flex-direction: column; align-items: center; }
  .ms-rect29, .ms-wave-1, .ms-wave-2 { display: none; }
  .ms-head-read   { order: 0; width: min(20rem, 78%); height: auto; }
  .ms-head-report { order: 1; width: min(22.5rem, 88%); height: auto; margin-top: 0.625rem; }
  .ms-btnwrap.ms-bw-w3 { order: 2; margin-top: 1.5rem; }
  /* Кадр обрізаємо не по полотну, а по реальних межах руху (2.84..741.21 x -34.78..500):
     так обкладинка виходить настільки великою, наскільки дозволяє екран, і при цьому
     жоден крайній кадр змаху не зрізається. Ширші за колонку — секція має overflow: hidden,
     а align-items: center центрує сцену сама, без від'ємних відступів. */
  /* На мобільному — окремий файл: художник переклав ту саму сцену на вертикальний лад
     (обкладинка згори, людина під нею), як і в затвердженому статичному макеті. */
  .ms-report-scene { display: none; }
  .ms-impact-scene { display: none; }
  .ms-report-scene-m { order: 3; position: relative; margin-top: 1.25rem;
                       width: calc(100% + var(--pad) * 2); max-width: 37.625rem;
                       aspect-ratio: 704.581 / 640.678;
                       --lw: 113.543%; --lh: 93.651%; --lx: -9.087%; --ly: 7.078%; }
  .ms-bk { position: absolute; width: 5.5rem; height: 5.5rem; }
  .ms-bk-a { left: 2%;  top: 5%; }
  .ms-bk-h { right: 3%; top: 3%;  left: auto; width: 4.75rem; height: 4.75rem; }
  .ms-bk-e { right: 8%; top: 34%; left: auto; width: 3rem; height: 3rem; }
  .ms-bk-f { left: 6%;  top: 46%; width: 3rem; height: 3rem; }
  .ms-bk-b, .ms-bk-c, .ms-bk-d, .ms-bk-g { display: none; }

  .s-cta { padding: 2.75rem var(--pad) 3.25rem; display: grid; gap: 2.25rem; }
  .ms-rect30 { display: none; }
  .ms-cta-item { display: flex; flex-direction: column; align-items: center; }
  .ms-cta-1, .ms-cta-2, .ms-cta-3 { width: auto; height: 9.375rem; }
  .ms-cta-t1, .ms-cta-t2, .ms-cta-t3 { margin-top: 1rem; font-size: var(--body); line-height: 1.45; }
  .ms-cta-item > .ms-btnwrap { margin-top: 1.25rem; width: 9.375rem; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {

  .ms-hero { aspect-ratio: 1920 / 800; --hf: 1; --hx: 0%; }

  .ms-title-hero { width: min(32rem, 56%); }
  .s-about { padding: 2.5rem 3rem 2.75rem; }
  .ms-about-title { width: min(20rem, 46%); }
  .s-around { padding: 3rem var(--pad) 0; column-gap: 2.25rem; }
  .ms-title-around, .ms-waveline { width: min(22rem, 46%); }
  .s-around { column-gap: 1.25rem; padding: 3.5rem var(--pad) 1.75rem; }
  .ms-eyewear   { left: 1.5rem; top: 2.25rem; width: 8.5rem; }
  .ms-telescope { right: 1.5rem; top: 1.5rem; width: 8rem; }
  .ms-body2 { margin-top: 3.5rem; max-width: 26rem; }
  .ms-tools { margin-top: 3rem; gap: 2.5rem; }
  .ms-tools > img { height: 6rem; max-width: 8rem; }

  .s-impact { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem 1.25rem; }
  .ms-stat { grid-column: span 2; }
  .ms-stat:nth-of-type(4) { grid-column: 2 / span 2; }
  .ms-stat:nth-of-type(5), .ms-stat:last-child {
    grid-column: 4 / span 2; width: auto; justify-self: auto; }

  .ms-photo-card { display: block; position: relative; z-index: 2;
                   align-self: flex-end; width: 13rem; height: auto;
                   margin: 0 var(--pad) 1.25rem auto; }
  .ms-svc-1, .ms-svc-2, .ms-svc-3, .ms-svc-4, .ms-svc-5, .ms-svc-6, .ms-svc-7 {
    font-size: 1.25rem; }
  .ms-svcrow { min-height: 4rem; }

  .ms-report-scene-m { max-width: 46.3rem; }
  .ms-stories-head { height: 140px; }
  .ms-title-stories { width: 9.5rem; }
  /* Клієнт: «вирівняйте кнопки». Текст над кнопками різної довжини (2–3 рядки), тож кнопки стояли
     на різній висоті. Колонки тягнемо на однакову висоту, а кнопку притискаємо донизу колонки. */
  .s-cta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; align-items: stretch; }
  .s-cta .ms-cta-item > .ms-btnwrap { margin-top: auto; }
  .s-cta .ms-cta-item > p { margin-bottom: 1.25rem; }
  .ms-cta-1, .ms-cta-2, .ms-cta-3 { height: 11rem; }
}

/* ---- Phone-only fine-tuning (client mobile review). Scoped to phones so tablets keep their
       own spacing. ---- */
@media (max-width: 767.98px) {
  /* more breathing room above the hero title, tighter gap below it to the subtitle (client) */
  .ms-title-hero { margin-top: 1.85rem; }
  .ms-subtitle   { margin: -0.5rem var(--pad) 1rem; font-size: calc(var(--body) + 3px); line-height: 1.25; }
  /* the "All Around Us" curly line was pulled up onto the title (negative margin) — drop it below */
  .ms-waveline   { margin-top: 0.35rem; }

  /* nudge the magnifier + its illustration DOWN so they don't touch the header text at the top
     (client mobile note). Both shift by the same amount to stay aligned in the lens. */
  .ms-monocle { top: -4%; }
  .ms-portal  { top: 16.75%; }

  /* s-around: decorative leaves along the SIDES of the text (client: branches beside the text,
     appearing on scroll like desktop). The tool row (bino/camera/magnifier) shows BELOW the text
     as the divider into the next section (client request). Leaves sit behind everything. */
  .s-around { overflow: hidden; }
  .ms-leaf-l1, .ms-leaf-r1, .ms-leaf-l2, .ms-leaf-r2 { display: block; position: absolute; height: auto; z-index: 0; }
  .ms-leaf-l1 { left: -2.25rem;  top: 20%; width: 7.5rem; }
  .ms-leaf-r1 { right: -1.75rem; top: 34%; width: 5.75rem; }
  .ms-leaf-l2 { left: -1.75rem;  top: 53%; width: 6.25rem; }
  .ms-leaf-r2 { right: -1.75rem; top: 69%; width: 5rem; }
  .s-around .ms-title-around, .s-around .ms-waveline, .s-around .ms-body2,
  .s-around .ms-tools { position: relative; z-index: 1; }
  /* phone divider row a touch smaller than tablet */
  .ms-tools { margin-top: 2.25rem; gap: 1.25rem; }
  .ms-tools > img { height: 4rem; }
}

.ms-m { display: none; }

@media (max-width: 767.98px) {

  /* сцена */
  .s-impact { position: relative; display: block; width: 100%; height: auto;
              aspect-ratio: 430 / 647.031; overflow: hidden; padding: 0;
              background: #1a5edb; }
  .s-impact > * { position: absolute; }
  .ms-ribbon-imp, .ms-title-imp, .ms-stat-lines { display: none; }
  .s-band { display: none; }

  /* тло: промені, пагорби, дерево, стрічка, петлі */
  .ms-m-rays             { left: -118.986%; top: -30.9104%; width: 337.974%; height: 120.551%; z-index: 0; }
  .ms-m-hills            { left: 0%; top: 76.1942%; width: 100%; height: 23.8058%; z-index: 0; }
  .ms-m-tree             { left: 24.5116%; top: 47.6639%; width: 55.5119%; height: 74.2816%; z-index: 0; }
  .ms-m-ribbon           { left: -90.9814%; top: 0.5564%; width: 291.733%; height: 47.1183%; z-index: 0; }
  .ms-m-loops            { left: 12.5302%; top: 16.3671%; width: 75.9114%; height: 53.4432%; z-index: 0; }

  /* картки */
  .ms-stat { z-index: 1; aspect-ratio: auto; display: block; padding: 0;
             background: url(../msm-card.svg) center / 100% 100% no-repeat; }
  .ms-card-1, .ms-card-2, .ms-card-3, .ms-card-4, .ms-card-5 { display: none; }
  .ms-stat-361           { left: 5.7488%; top: 30.66%; width: 27.1777%; height: 12.6941%; }
  .ms-stat-1152          { left: 37.3116%; top: 27.0126%; width: 27.1777%; height: 12.6941%; }
  .ms-stat-8467          { left: 67.8163%; top: 30.66%; width: 27.1777%; height: 12.6941%; }
  .ms-stat-30629         { left: 5.7698%; top: 49.2264%; width: 27.1777%; height: 12.6941%; }
  .ms-stat-5552          { left: 67.8163%; top: 49.2264%; width: 27.1777%; height: 12.6941%; }

  .ms-stat > p { position: absolute; left: 0; width: 100%; text-align: center; }
  .ms-num-1, .ms-num-2, .ms-num-3, .ms-num-4, .ms-num-5 { top: 26.286%; margin: 0;
    font-weight: 700; font-size: 1.5625rem; line-height: normal; color: #1a5edb; }
  .ms-lab-1, .ms-lab-2, .ms-lab-3, .ms-lab-4, .ms-lab-5 { top: 57.9047%; margin: 0;
    font-weight: 500; font-size: 0.75rem; line-height: normal; color: #000; }

  /* передній план */
  .ms-m-bloom            { left: 33.4884%; top: 50.6622%; width: 33.8977%; height: 11.6618%; z-index: 2; }
  .ms-m-berry            { left: 8.386%; top: 67.7927%; width: 13.4884%; height: 14.9916%; z-index: 2; }
  .ms-m-leaf-y           { left: 3.0233%; top: 76.8959%; width: 11.2474%; height: 8.9544%; z-index: 2; }
  .ms-m-leaf-a           { left: 14.3698%; top: 80.0425%; width: 10.4884%; height: 6.6148%; z-index: 2; }
  .ms-m-leaf-b           { left: 19.9605%; top: 76.3333%; width: 7.814%; height: 4.9148%; z-index: 2; }
  .ms-m-leaf-y, .ms-m-leaf-a, .ms-m-leaf-b { display: flex; align-items: center; justify-content: center; }
  .ms-m-leaf-y > img { flex: none; width: 64.63%; height: 85.63%; transform: rotate(-23.36deg); }
  .ms-m-leaf-a > img { flex: none; width: 79.20%; height: 71.91%; transform: rotate(23.78deg); }
  .ms-m-leaf-b > img { flex: none; width: 79.14%; height: 72.05%; transform: rotate(-23.67deg); }

  .ms-m { display: block; }
}

/* Низькі екрани (SE, старі Android): підтискаємо відступи сцени Stories, щоб стрічка, стек
   і кнопка гарантовано вміщались у висоту екрана й липкий блок не обрізався. */
@media (max-width: 767.98px) and (max-height: 720px) {
  .ms-stories-inner { padding: 1.5rem var(--pad) 2rem; }
  .ms-story-stack { margin-top: 2rem; }
}

/* All Around Us на планшетній розкладці (зокрема телефон у ландшафті). Клієнт обвів порожні зони
   обабіч тексту: листя по боках, яке є на телефоні в портреті й на десктопі, тут було сховане.
   Показуємо його так само (з тією ж появою збоку з anim.js), лише більшим — бічні зони тут
   ширші: від ~176px на 768 до ~430px на 1279. Колонка тексту 416px по центру, листя її не заходить. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .s-around { overflow: hidden; }
  .ms-leaf-l1, .ms-leaf-r1, .ms-leaf-l2, .ms-leaf-r2 { display: block; position: absolute; height: auto; z-index: 0; }
  .ms-leaf-l1 { left: -1.5rem;  top: 20%; width: 11.5rem; }
  .ms-leaf-r1 { right: -1rem;   top: 34%; width: 9rem; }
  .ms-leaf-l2 { left: -1rem;    top: 53%; width: 9.75rem; }
  .ms-leaf-r2 { right: -1rem;   top: 69%; width: 7.75rem; }
  .s-around .ms-title-around, .s-around .ms-waveline, .s-around .ms-body2,
  .s-around .ms-tools { position: relative; z-index: 1; }
}

/* Discover на телефоні в ландшафті: фото-прев'ю міняється лише при наведенні мишкою, а тут стояло
   притиснутим праворуч у порожньому блоці (клієнт). Ховаємо, як і в портреті. */
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 500px) {
  .ms-photo-card { display: none; }
}

/* Impact at a Glance на телефоні в ландшафті. Ця ширина потрапляє в планшетну розкладку, де замість
   ілюстрації стоїть сітка великих карток 3+2 — клієнт просив «як на мобільному: дерево й маленькі
   блоки». Тут та сама мобільна сцена (правила скопійовано з блоку ≤767 вище), лише обмежена за
   шириною й по центру: на всю ширину ландшафту вертикальна сцена була б заввишки ~1400px.
   Анімації підключені в anim.js (mobileScenes). */
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 500px) {
  /* сцена */
  .s-impact { position: relative; display: block; width: 100%; max-width: 480px; margin: 0 auto;
              height: auto; aspect-ratio: 430 / 647.031; padding: 0;
              grid-template-columns: none; background: #1a5edb;
              /* промені й стрічка сцени ширші за неї — даємо їм вийти на всю ширину екрана, щоб по боках
                 не було різких країв; зверху й знизу секцію ріжемо, щоб не наповзала на сусідні блоки */
              overflow: visible; clip-path: inset(0 -100vw); }
  .s-impact > * { position: absolute; }
  .ms-ribbon-imp, .ms-title-imp, .ms-stat-lines { display: none; }
  .s-band { display: none; }

  /* тло: промені, пагорби, дерево, стрічка, петлі */
  .ms-m-rays             { left: -118.986%; top: -30.9104%; width: 337.974%; height: 120.551%; z-index: 0; }
  .ms-m-hills            { left: 0%; top: 76.1942%; width: 100%; height: 23.8058%; z-index: 0; }
  .ms-m-tree             { left: 24.5116%; top: 47.6639%; width: 55.5119%; height: 74.2816%; z-index: 0; }
  .ms-m-ribbon           { left: -90.9814%; top: 0.5564%; width: 291.733%; height: 47.1183%; z-index: 0; }
  .ms-m-loops            { left: 12.5302%; top: 16.3671%; width: 75.9114%; height: 53.4432%; z-index: 0; }

  /* картки */
  .ms-stat { z-index: 1; aspect-ratio: auto; display: block; padding: 0;
             background: url(../msm-card.svg) center / 100% 100% no-repeat; }
  .ms-card-1, .ms-card-2, .ms-card-3, .ms-card-4, .ms-card-5 { display: none; }
  .ms-stat-361           { left: 5.7488%; top: 30.66%; width: 27.1777%; height: 12.6941%; }
  .ms-stat-1152          { left: 37.3116%; top: 27.0126%; width: 27.1777%; height: 12.6941%; }
  .ms-stat-8467          { left: 67.8163%; top: 30.66%; width: 27.1777%; height: 12.6941%; }
  .ms-stat-30629         { left: 5.7698%; top: 49.2264%; width: 27.1777%; height: 12.6941%; }
  .ms-stat-5552          { left: 67.8163%; top: 49.2264%; width: 27.1777%; height: 12.6941%; }
  /* планшетне правило .ms-stat:nth-of-type(5) (ширина auto) сильніше за клас — повторюємо ширину з вищою специфічністю */
  .s-impact .ms-stat.ms-stat-5552 { width: 27.1777%; }
  /* пагорби внизу теж на всю ширину екрана — інакше по боках сцени лишались різкі краї */
  .s-impact > .ms-m-hills { left: calc(50% - 50vw); width: 100vw; }

  .ms-stat > p { position: absolute; left: 0; width: 100%; text-align: center; }
  .ms-num-1, .ms-num-2, .ms-num-3, .ms-num-4, .ms-num-5 { top: 26.286%; margin: 0;
    font-weight: 700; font-size: 1.5625rem; line-height: normal; color: #1a5edb; }
  .ms-lab-1, .ms-lab-2, .ms-lab-3, .ms-lab-4, .ms-lab-5 { top: 57.9047%; margin: 0;
    font-weight: 500; font-size: 0.75rem; line-height: normal; color: #000; }

  /* передній план */
  .ms-m-bloom            { left: 33.4884%; top: 50.6622%; width: 33.8977%; height: 11.6618%; z-index: 2; }
  .ms-m-berry            { left: 8.386%; top: 67.7927%; width: 13.4884%; height: 14.9916%; z-index: 2; }
  .ms-m-leaf-y           { left: 3.0233%; top: 76.8959%; width: 11.2474%; height: 8.9544%; z-index: 2; }
  .ms-m-leaf-a           { left: 14.3698%; top: 80.0425%; width: 10.4884%; height: 6.6148%; z-index: 2; }
  .ms-m-leaf-b           { left: 19.9605%; top: 76.3333%; width: 7.814%; height: 4.9148%; z-index: 2; }
  .ms-m-leaf-y, .ms-m-leaf-a, .ms-m-leaf-b { display: flex; align-items: center; justify-content: center; }
  .ms-m-leaf-y > img { flex: none; width: 64.63%; height: 85.63%; transform: rotate(-23.36deg); }
  .ms-m-leaf-a > img { flex: none; width: 79.20%; height: 71.91%; transform: rotate(23.78deg); }
  .ms-m-leaf-b > img { flex: none; width: 79.14%; height: 72.05%; transform: rotate(-23.67deg); }

  .ms-m { display: block; }
}