body, .page { background: #002d8e; }

@media (min-width: 1200px) {

  .page { height: 162.0625rem; }

  .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; }
  .pm-stage, .pm-stage-back, .pm-prog, .pm-block, .pm-bars, .pm-bar, .pm-stats,
  .pm-stat, .pm-donut, .pm-card-shape { display: contents; }

  .pm-hero     { left: 0; top: 0; width: 120rem; height: 50rem; overflow: hidden; isolation: isolate; }
  .pm-hero-img { left: 0; top: 0; width: 120rem; height: 50rem; object-fit: cover; }
  .pm-lift     { left: 69.55rem; top: 6.251875rem; width: 19.161rem; height: 40.4355rem; object-fit: cover; }
  .pm-shade-l  { left: 0; top: 0; width: 70.125rem; height: 50rem; opacity: .85; mix-blend-mode: multiply;
                 background: linear-gradient(to left, rgba(0,0,0,0) 0%, #000 100%); }
  .pm-shade-r  { right: 0; top: 0; width: 18.1875rem; height: 50rem; opacity: .5; mix-blend-mode: multiply;
                 background: linear-gradient(to right, rgba(0,0,0,0) 0%, #000 100%); }

  .pm-h1         { left: 18.1875rem; top: 22.5rem; width: 41.3438rem; }
  .pm-intro      { left: 18.1875rem; top: 35.0625rem; width: 21.625rem; }

  .pm-t1         { left: 18.1875rem; top: 53.125rem; width: 19.5rem; height: 5.375rem; }
  .pm-b1         { left: 18.1875rem; top: 60.375rem; width: 19.5rem; }
  .pm-i1         { left: 39.5625rem; top: 53.125rem; width: 11.875rem; height: 0.9375rem; }
  .pm-l1         { left: 39.5625rem; top: 55.125rem; width: 62.25rem; height: 0.0625rem; }
  .pm-t2         { left: 18.1875rem; top: 75.3956rem; width: 19.5rem; height: 5.375rem; }
  .pm-b2         { left: 18.3131rem; top: 82.6456rem; width: 19.3744rem; }
  .pm-i2         { left: 39.5625rem; top: 75.3956rem; width: 11.875rem; height: 0.9375rem; }
  .pm-l2         { left: 39.5625rem; top: 77.3956rem; width: 62.25rem; height: 0.0625rem; }

  .pm-axis       { left: 39.5625rem; top: 57.1031rem; width: 0.0625rem; height: 13.8969rem;
                   background: #ffe8c7; transform: rotate(0.126deg); transform-origin: top left; }
  .pm-tr-a       { left: 39.5625rem; top: 58.0204rem; width: 19.5rem; height: 1.29083rem; }
  .pm-fl-a       { left: 39.5625rem; top: 58.0204rem; width: 14.6325rem; height: 1.29083rem; }
  .pm-pc-a       { left: 60.9375rem; top: 57.8846rem; width: 4.125rem; height: 1.5625rem; }
  .pm-cp-a       { left: 65.6875rem; top: 57.7283rem; width: 35.8663rem; }
  .pm-tr-b       { left: 39.5625rem; top: 63.4062rem; width: 19.5rem; height: 1.29083rem; }
  .pm-fl-b       { left: 39.5625rem; top: 63.4062rem; width: 16.2188rem; height: 1.29083rem; }
  .pm-pc-b       { left: 60.9375rem; top: 63.2708rem; width: 4.125rem; height: 1.5625rem; }
  .pm-cp-b       { left: 65.6875rem; top: 63.1146rem; width: 36.125rem; }
  .pm-tr-c       { left: 39.5625rem; top: 68.7917rem; width: 19.5rem; height: 1.29083rem; }
  .pm-fl-c       { left: 39.5625rem; top: 68.7917rem; width: 16.2188rem; height: 1.29083rem; }
  .pm-pc-c       { left: 60.9375rem; top: 68.6562rem; width: 4.125rem; height: 1.5625rem; }
  .pm-cp-c       { left: 65.6875rem; top: 68.5rem; width: 36.125rem; }
  .pm-tr-a, .pm-tr-b, .pm-tr-c { background: #3f64b3; border-radius: 0 0.645416rem 0.645416rem 0; }
  .pm-fl-a, .pm-fl-b, .pm-fl-c { background: #ff9b00; border-radius: 0 0.645416rem 0.645416rem 0; }

  .pm-ico-book   { left: 43.6037rem; top: 79.4269rem; width: 4.29276rem; height: 4.53125rem; }
  .pm-ico-check  { left: 56.9062rem; top: 80.3956rem; width: 3.75rem; height: 3.75rem; }
  .pm-n1         { left: 42.5938rem; top: 85.2081rem; width: 6.3125rem; height: 1.5625rem; }
  .pm-n2         { left: 56.3125rem; top: 85.2081rem; width: 4.9375rem; height: 1.5625rem; }
  .pm-c1         { left: 39.5625rem; top: 88.0206rem; width: 12.375rem; }
  .pm-c2         { left: 53.7188rem; top: 88.0206rem; width: 10.125rem; }

  .pm-ring-a     { left: 66.9375rem; top: 79.2706rem; width: 7.5rem; height: 7.5rem; }
  .pm-tip-a      { left: 68.0825rem; top: 79.2706rem; width: 2.6051rem; height: 1.58167rem; }
  .pm-dp-a       { left: 68.6562rem; top: 82.2394rem; width: 4.125rem; height: 1.5625rem; }
  .pm-ring-b     { left: 79.9688rem; top: 79.2706rem; width: 7.5rem; height: 7.5rem; }
  .pm-tip-b      { left: 79.9969rem; top: 79.2706rem; width: 3.722rem; height: 3.38258rem; }
  .pm-dp-b       { left: 81.6875rem; top: 82.2394rem; width: 4.0625rem; height: 1.5625rem; }
  .pm-ring-c     { left: 93.8775rem; top: 79.2706rem; width: 6.62256rem; height: 7.5rem; }
  .pm-tip-c      { left: 93rem; top: 79.2706rem; width: 3.75004rem; height: 6.16084rem; }
  .pm-dp-c       { left: 94.6875rem; top: 82.2394rem; width: 4.1875rem; height: 1.5625rem; }
  /* кільця за відсотком — у коробках колишніх картинок (для c — від лівого краю світлої частини,
     бо картинка c була обрізана по дузі) */
  .pct-ring-a { left: 66.9375rem; top: 79.2706rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-b { left: 79.9688rem; top: 79.2706rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-c { left: 93rem;      top: 79.2706rem; width: 7.5rem; height: 7.5rem; }
  .pm-dc-a       { left: 65.625rem; top: 88.0206rem; width: 10.125rem; }
  .pm-dc-b       { left: 77.7812rem; top: 88.0206rem; width: 11.875rem; }
  .pm-dc-c       { left: 91.6875rem; top: 88.0206rem; width: 10.125rem; }

  .pm-ribbon     { left: -9.89734rem; top: 99.1631rem; width: 191.668rem; height: 24.5865rem; }
  .pm-rs         { left: 18.2999rem; top: 109.223rem; width: 19.3788rem; height: 4.54367rem; }
  .pm-rs > img { width: 19.2147rem; height: 3.4764rem; transform: rotate(3.2deg); }
  .pm-card       { left: 42.0862rem; top: 100.358rem; width: 34.934rem; height: 20.8575rem; }
  .pm-card > div { width: 33.8125rem; height: 18.75rem; background: #fff;
                   border: 0.125rem solid #f178dd; border-radius: 1.875rem; transform: rotate(-3.64deg); }
  .pm-card-title { left: 44.0812rem; top: 103.202rem; width: 17.8487rem; height: 4.67569rem; }
  .pm-card-title > p { width: 17.6583rem; transform: rotate(-3.64deg); }
  /* ширше за макет — текст картки дописано (клієнт), у 19.2rem він ставав у 5 рядків */
  .pm-card-body  { left: 44.4656rem; top: 109.156rem; width: 22.6rem; height: 5.33375rem; }
  .pm-card-body > p { width: 22.4rem; transform: rotate(-3.64deg); }
  .pm-card-more  { left: 51.2719rem; top: 116.305rem; width: 19.7044rem; height: 2.12244rem; }
  .pm-card-more > p { width: 19.6885rem; transform: rotate(-3.64deg); text-align: right; }
  .pm-card-arrow { left: 71.8981rem; top: 115.153rem; width: 2.79025rem; height: 2.84863rem; }
  .pm-card-arrow > img { width: 2.625rem; height: 2.6875rem; transform: rotate(-3.64deg); }
  .pm-card-deco  { left: 68.04rem; top: 102.388rem; width: 6.13187rem; height: 5.55rem; }
  .pm-card-deco > img { width: 5.81259rem; height: 5.18775rem; transform: rotate(-3.64deg); }

  .pm-crystals   { left: 0.53125rem; top: 119.241rem; width: 8.31188rem; height: 7.75rem; }
  .pm-slope-b    { left: 0rem; top: 125.438rem; width: 52.6181rem; height: 6.50063rem; }
  .pm-slope-a    { left: 0.125rem; top: 125rem; width: 119.875rem; height: 7.375rem; }
  .pm-band       { left: 0rem; top: 130.414rem; width: 120rem; height: 5.39813rem; background: #ca99ec; }
  .pm-people     { left: 19.0081rem; top: 119.241rem; width: 22.9369rem; height: 12.9894rem; }
  .pm-fl-1       { left: 9.84375rem; top: 122.168rem; width: 2.13321rem; height: 4.43332rem; }
  .pm-fl-2       { left: 12.9062rem; top: 122.296rem; width: 2.13321rem; height: 4.43332rem; }
  .pm-fl-3       { left: 16.6769rem; top: 122.531rem; width: 2.13321rem; height: 4.43332rem; }
  .pm-tree       { left: 81.2994rem; top: 102.632rem; width: 32.0012rem; height: 30.8987rem; }
  .pm-bed-1      { left: 100.093rem; top: 129.324rem; width: 21.1077rem; height: 6.10128rem; }

  .nav-prev-label { opacity: 1; }
  .f-line-top    { top: 141.976875rem; }
  .f-line-bottom { top: 156.96875rem; }
}

.pm-h1, .pm-intro, .pm-t1, .pm-t2, .pm-b1, .pm-b2, .pm-i1, .pm-i2,
.pm-pc-a, .pm-pc-b, .pm-pc-c, .pm-cp-a, .pm-cp-b, .pm-cp-c,
.pm-n1, .pm-n2, .pm-c1, .pm-c2,
.pm-dp-a, .pm-dp-b, .pm-dp-c, .pm-dc-a, .pm-dc-b, .pm-dc-c,
.pm-card-title > p, .pm-card-body > p, .pm-card-more > p {
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic; overflow-wrap: break-word;
}

.pm-h1    { font-weight: 700; font-size: 3.4375rem; line-height: normal; color: #fff; }
.pm-intro { font-weight: 500; font-size: 1.25rem; line-height: normal; color: #fff; }
.pm-t1, .pm-t2 { font-weight: 700; font-size: 2.8125rem; line-height: normal; color: #ff9b00; }
.pm-b1, .pm-b2 { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #fff; }
.pm-i1, .pm-i2 { font-weight: 700; font-size: 1.375rem; line-height: normal; color: #ff9b00;
                 white-space: nowrap; }
.pm-pc-a, .pm-pc-b, .pm-pc-c, .pm-n1, .pm-n2,
.pm-dp-a, .pm-dp-b, .pm-dp-c {
  font-weight: 700; font-size: 2.1875rem; line-height: normal; color: #ff9b00; white-space: nowrap;
}
.pm-n1, .pm-n2, .pm-dp-a, .pm-dp-b, .pm-dp-c { text-align: center; }
.pm-cp-a, .pm-cp-b, .pm-cp-c {
  font-weight: 500; font-size: 1rem; line-height: normal; color: #fff;
}
.pm-c1, .pm-c2, .pm-dc-a, .pm-dc-b, .pm-dc-c {
  font-weight: 500; font-size: 1rem; line-height: normal; color: #fff; text-align: center;
}
.pm-card-title > p { font-weight: 700; font-size: 1.875rem; line-height: normal; color: #1a5edb; }
.pm-card-body  > p { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000; }
.pm-card-more  > p { font-weight: 700; font-size: 1.25rem; line-height: normal; color: #1a5edb; }
.pm-card-more { text-decoration: none; }
.nav-prev-label, .nav-next-label { color: #fff; opacity: 1; text-decoration: none; }

@media (max-width: 1199.98px) {

  .page { display: flex; flex-direction: column; }

  .s-hero { order: 0; } .s-intro { order: 1; } .s-svc { order: 2; }
  .s-rs { order: 3; } .s-card { order: 4; } .s-scene { order: 5; }
  .s-pager { order: 6; } .s-footer { order: 20; }
  .s-sec, .s-decor { position: relative; }
  .s-story, .pm-ribbon { display: none; }

  .pm-hero { position: relative; width: 100%; height: auto; aspect-ratio: 430 / 320; overflow: hidden;
             --hf: 1.78605; --hx: -65.3488%; }
  .pm-hero-img { position: absolute; left: var(--hx); top: 0;
                 width: calc(100% * var(--hf)); height: 100%; object-fit: cover; }
  .pm-lift { position: absolute; left: calc(var(--hx) + 57.96% * var(--hf)); top: 12.5%;
             width: calc(15.97% * var(--hf)); height: 80.87%; object-fit: cover; }
  .pm-shade-l, .pm-shade-r { display: none; }

  /* intro is part of the banner — give it a distinct orange band (client), with dark text for
     contrast and the "Services and Impact" label darkened so it stays visible on orange */
  .s-intro { padding: 26px var(--pad) 26px; background: #ff9b00; }
  .s-intro .hw-1, .s-intro .hw-2 { filter: brightness(0); }
  .pm-h1, .pm-intro, .pm-t1, .pm-t2, .pm-b1, .pm-b2, .pm-i1, .pm-i2,
  .pm-pc-a, .pm-pc-b, .pm-pc-c, .pm-cp-a, .pm-cp-b, .pm-cp-c,
  .pm-n1, .pm-n2, .pm-c1, .pm-c2, .pm-ico-book, .pm-ico-check,
  .pm-dp-a, .pm-dp-b, .pm-dp-c, .pm-dc-a, .pm-dc-b, .pm-dc-c,
  .pm-l1, .pm-l2, .pm-card, .pm-card-title, .pm-card-body, .pm-card-more,
  .pm-card-arrow, .pm-card-deco, .pm-rs {
    position: relative; left: auto; top: auto; right: auto; width: auto; height: auto;
  }
  .pm-h1 { font-size: var(--h1); line-height: 1.12; margin-bottom: 8px; color: #002d8e; }
  .pm-intro { margin-top: 14px; font-size: var(--body); line-height: 1.5; color: #002d8e; }

  .s-svc { display: flex; flex-direction: column; padding: 8px var(--pad) 0; }
  .pm-block { margin-top: 34px; }
  /* short divider line above the 2nd service section (client); colour follows the page accent */
  .pm-t2::before { content: ""; display: block; width: 100%; height: 2px;
    background: #ff9b00; border-radius: 2px; margin: 0 0 20px; }
  .pm-t1, .pm-t2 { font-size: 28px; }
  .pm-b1, .pm-b2 { margin-top: 12px; font-size: var(--body); line-height: 1.5; }
  .pm-i1, .pm-i2 { margin-top: 22px; font-size: 18px; }
  .pm-l1, .pm-l2 { width: 100%; height: 1px; margin-top: 10px; }

  .pm-bars { display: flex; flex-direction: column; gap: 26px; margin-top: 20px; }
  .pm-axis { display: none; }
  .pm-bar { position: relative; display: grid; gap: 9px; }
  .pm-bar > .pm-track { position: relative; order: 2; width: 100%; height: 16px;
                        background: #3f64b3; border-radius: 0 8px 8px 0; }
  .pm-bar > .pm-fill  { position: absolute; left: 0; bottom: 0; z-index: 1; height: 16px; width: var(--w);
                        background: #ff9b00; border-radius: 0 8px 8px 0; }
  .pm-bar > .pm-pc { order: 0; font-size: var(--num); text-align: left; }  /* було 26px — однаковий кегль цифр на всіх сторінках */
  /* bigger caption text next to the progress bars (client) */
  .pm-bar > .pm-cp { order: 1; font-size: var(--body); line-height: 1.4; }

  .pm-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 18px; margin-top: 28px; }
  .pm-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .pm-ico-book, .pm-ico-check { width: 58px; height: auto; }
  .pm-n1, .pm-n2 { margin-top: 10px; font-size: var(--num); }  /* єдиний кегль великих цифр на всіх сторінках */
  .pm-c1, .pm-c2, .pm-dc-a, .pm-dc-b, .pm-dc-c { margin-top: 10px; font-size: var(--cap); }
  .pm-donut { position: relative; width: 96px; height: 96px; flex: none; }
  .pm-donut > img, .pm-donut > p { position: absolute; }
  /* The ring SVGs use preserveAspectRatio:none (stretch to an ellipse) and the light "remainder"
     is a separate hard-to-place arc. On mobile we redraw the ring with a pure CSS conic-gradient:
     a perfect circle, orange up to the %, light for the rest, at any size. */
  .pm-donut > .pm-ring, .pm-donut > .pm-tip { display: none; }
  .pm-donut::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(#ff9b00 calc(var(--pct, 90) * 1%), #3f64b3 calc(var(--pct, 90) * 1%));
    /* two masks: the radial one makes the donut ring; the conic one reveals it clockwise up to
       --draw (animated 0->360 on scroll) so the whole ring — orange AND light — draws in. */
    -webkit-mask:
      radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 calc(100% - 10px)),
      conic-gradient(#000 var(--draw, 360deg), #0000 0deg);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 calc(100% - 10px)),
      conic-gradient(#000 var(--draw, 360deg), #0000 0deg);
    mask-composite: intersect;
  }
  .pm-stats .pm-stat:nth-of-type(3) .pm-donut { --pct: 92; }
  .pm-stats .pm-stat:nth-of-type(4) .pm-donut { --pct: 89; }
  .pm-stats .pm-stat:nth-of-type(5) .pm-donut { --pct: 70; }
  .pm-donut > .pm-dp { left: 0; top: 39.5%; width: 100%; text-align: center; font-size: var(--ring-num); z-index: 1; }

  /* gently-arched "Related Stories:" ribbon (like the other pages) instead of a flat rectangle */
  .s-rs { margin: 30px calc(var(--pad) * -1) 0; padding: 0; min-height: 104px;
    display: flex; align-items: center; justify-content: center;
    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; }
  .pm-rs { position: relative; z-index: 1; display: block; width: 240px; height: auto; }
  .pm-rs > img { width: 100%; height: auto; transform: rotate(5deg); }

  .s-card { padding: 0 var(--pad); margin-top: 22px; }
  .pm-card-shape { position: relative; padding: 26px 22px 28px; }
  .pm-card { position: absolute; inset: 0; }
  .pm-card > div { position: absolute; inset: 0; width: 100%; height: 100%;
                   background: #fff; border: 2px solid #f178dd; border-radius: 24px; transform: none; }
  .pm-card-title > p, .pm-card-body > p, .pm-card-more > p { width: auto; transform: none; }
  .pm-card-title { padding-right: 80px; }
  .pm-card-title > p { font-size: 22px; }
  .pm-card-body { margin-top: 12px; }
  .pm-card-body > p { font-size: 15px; line-height: 1.45; }
  .pm-card-more { margin-top: 16px; padding-right: 42px; }
  .pm-card-more > p { font-size: 16px; }
  .pm-card-arrow { position: absolute; right: 22px; bottom: 24px; width: 30px; height: 31px; }
  .pm-card-arrow > img { width: 100%; height: 100%; transform: none; }
  .pm-card-deco { position: absolute; right: 18px; top: 16px; width: 62px; height: auto; }
  .pm-card-deco > img { width: 100%; height: auto; transform: none; }

  .s-scene { margin-top: 26px; overflow: hidden; }
  .pm-stage { position: relative; width: 128%; margin-left: -14%; aspect-ratio: 1920 / 586.39; }
  .pm-stage > * { position: absolute; }
  .pm-crystals { left: 0.4427%; top: 54.7844%; width: 6.9266%; height: 21.1463%; }
  .pm-slope-b  { left: 0.0000%; top: 71.6912%; width: 43.8484%; height: 17.7373%; }
  .pm-slope-a  { left: 0.1042%; top: 70.4975%; width: 99.8958%; height: 20.1231%; }
  .pm-band     { left: 0.0000%; top: 85.2709%; width: 100.0000%; height: 14.7291%; }
  .pm-people   { left: 15.8401%; top: 54.7844%; width: 19.1141%; height: 35.4423%; }
  .pm-fl-1     { left: 8.2031%; top: 62.7688%; width: 1.7777%; height: 12.0966%; }
  .pm-fl-2     { left: 10.7552%; top: 63.1201%; width: 1.7777%; height: 12.0966%; }
  .pm-fl-3     { left: 13.8974%; top: 63.7596%; width: 1.7777%; height: 12.0966%; }
  .pm-tree     { left: 67.7495%; top: 9.4647%; width: 26.6677%; height: 84.3091%; }
  .pm-bed-1    { left: 83.4109%; top: 82.2968%; width: 17.5897%; height: 16.6477%; }

  .s-pager { padding: 22px var(--pad) 26px; display: flex; align-items: center;
             justify-content: center; gap: 12px; background: #ca99ec; }
  .nav-prev-arrow { order: 0; width: 38px; height: 38px; transform: rotate(180deg); }
  .nav-prev-label { order: 1; margin-right: 12px; font-size: 16px; }
  .nav-next { order: 2; display: flex; align-items: center; gap: 12px; }
  .nav-next-label { position: static; width: auto; font-size: 16px; }
  .nav-next-arrow { width: 38px; height: 38px; }
}

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

  .pm-hero { aspect-ratio: 1920 / 800; --hf: 1; --hx: 0%; }
  .pm-stats { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .pm-t1, .pm-t2 { font-size: 36px; }
  .pm-card-shape { max-width: 560px; margin: 0 auto; padding: 30px 28px 32px; }
  .pm-card-title > p { font-size: 26px; }
  .pm-card-body > p { font-size: 17px; }
  .pm-stage { width: 110%; margin-left: -5%; }
  .pm-rs { width: 300px; }
}

@media (max-width: 767.98px) {
  /* банер: своє фото 430x320 (макет «02 1»), ліфт зсунутий на 20px нижче */
  .pm-hero-img { left: 0; width: 100%; }
  .pm-lift     { left: 38.1674%; top: 18.75%; width: 28.5188%; height: 80.8709%; }

  /* нижня сцена: композиція з макета iPhone-4 (430x428.3, від y=503.7) */
  .pm-stage { width: 100%; margin-left: 0; aspect-ratio: 430 / 428.3; }
  .pm-crystals { left: -6.907%;  top: 33.669%; width: 26.279%;  height: 24.585%; z-index: 1; }
  .pm-slope-b  { left: -9.744%;  top: 53.746%; width: 195.791%; height: 24.282%; z-index: 2; }
  .pm-fl-1     { left: 22.535%;  top: 42.96%;  width: 6.744%;   height: 14.079%; z-index: 3; }
  .pm-fl-2     { left: 32.209%;  top: 43.357%; width: 6.744%;   height: 14.079%; z-index: 3; }
  .pm-fl-3     { left: 42.116%;  top: 44.104%; width: 6.744%;   height: 14.079%; z-index: 3; }
  .pm-slope-a  { left: -86.977%; top: 59.864%; width: 446.047%; height: 27.551%; z-index: 4; }
  .pm-band     { left: 0;        top: 80.079%; width: 100%;     height: 19.921%; z-index: 5; }
  .pm-people   { left: 16.209%;  top: 49.849%; width: 76.279%;  height: 43.427%; z-index: 6; }
  .pm-tree     { left: 61.395%;  top: 0;       width: 65.326%;  height: 63.32%;  z-index: 7; }
  .pm-bed-1    { display: none; }
}

/* Клієнт (так само, як на Healthy/Holistic/Ageing): кільця на десктопі були картинками, що не
   відповідали цифрам — 92% був універсальним hd-ring.svg, 89% і 70% — копіями кілець 88% і 98%
   з Healthy. Тепер дугу малює CSS за відсотком (.pct-ring у styles.css) на всіх ширинах. */
.pm-donut { --ring-on: #FF9B00; --ring-off: #3F64B3; }
.pm-donut > .pm-ring, .pm-donut > .pm-tip { display: none !important; }
@media (max-width: 1199.98px) {
  .pm-donut > .pct-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  .pm-donut::before { content: none; }   /* попереднє мобільне кільце — тепер його замінює .pct-ring */
}

/* Телефон у ландшафті (клієнт: «шрифти завеликі, хоча верстка складається нормально»).
   Ширина 844-932px потрапляє в планшетну розкладку, а з нею й планшетні розміри тексту —
   на екрані заввишки ~400px це завелико. Верстку лишаємо планшетною, текст — як на телефоні. */
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 500px) {
  .pm-t1, .pm-t2 { font-size: 28px; } .pm-card-title > p { font-size: 22px; }
}