body, .page { background: #fbf2e3; }

@media (min-width: 1200px) {

  .page { height: 181.625rem; }

  .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; }

  .hsf-stage, .hsf-prog, .hsf-block, .hsf-bars, .hsf-bar, .hsf-stats, .hsf-stat,
  .hsf-donut, .hsf-card-shape { display: contents; }

  .hsf-hero     { left: 0; top: 0; width: 120rem; height: 50rem; overflow: hidden; isolation: isolate; }
  .hsf-hero-img { left: 0; top: 0; width: 120rem; height: 50rem; object-fit: cover; }
  .hsf-mag      { left: 60rem; top: -1.535625rem; width: 84.4803rem; height: 84.4803rem;
                  display: flex; align-items: center; justify-content: center; }
  /* illustration lives INSIDE the magnifier now, positioned over the glass as a % of the mag —
     so it always stays in the lens on any width/browser, even if the mag itself shifts. */
  .hsf-mag > .hsf-lens-in { position: absolute; left: 8.8%; top: 8.96%;
                            width: 39.76%; height: 39.76%; object-fit: cover; z-index: 0; }
  .hsf-mag > .hsf-mag-img { flex: none; width: 34.2993rem; height: 85.1739rem;
                   transform: rotate(-45deg); object-fit: cover; position: relative; z-index: 1; }
  .hsf-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%); }
  .hsf-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%); }

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

  .hsf-t1        { left: 18.1875rem; top: 53.125rem; width: 19.5rem; height: 12.125rem; }
  .hsf-b1        { left: 18.1875rem; top: 67.125rem; width: 19.5rem; }
  .hsf-i1        { left: 39.5625rem; top: 53.125rem; width: 11.8125rem; height: 0.9375rem; }
  .hsf-l1        { left: 39.5625rem; top: 55.125rem; width: 62.25rem; height: 0.0625rem; }
  .hsf-t2        { left: 18.1875rem; top: 83.0944rem; width: 19.5rem; height: 8.75rem; }
  .hsf-b2        { left: 18.3131rem; top: 93.7194rem; width: 19.3742rem; }
  .hsf-i2        { left: 39.5625rem; top: 83.0944rem; width: 11.8125rem; height: 0.9375rem; }
  .hsf-l2        { left: 39.5625rem; top: 85.0944rem; width: 62.25rem; height: 0.0625rem; }

  .hsf-axis      { left: 39.5625rem; top: 57.1031rem; width: 0.0625rem; height: 22.2719rem; background: #d8b5f1; }
  .hsf-tr-a      { left: 39.7048rem; top: 58.0204rem; width: 19.2594rem; height: 1.29083rem; }
  .hsf-fl-a      { left: 39.5625rem; top: 58.0204rem; width: 17.5rem; height: 1.29083rem; }
  .hsf-pc-a      { left: 60.9375rem; top: 57.8846rem; width: 4rem; height: 1.5625rem; }
  .hsf-cp-a      { left: 65.6829rem; top: 57.7283rem; width: 35.9405rem; }
  .hsf-tr-b      { left: 39.7048rem; top: 62.5727rem; width: 19.2594rem; height: 1.29083rem; }
  .hsf-fl-b      { left: 39.5625rem; top: 62.5727rem; width: 15rem; height: 1.29083rem; }
  .hsf-pc-b      { left: 60.9375rem; top: 62.4369rem; width: 4.125rem; height: 1.5625rem; }
  .hsf-cp-b      { left: 65.6829rem; top: 62.2806rem; width: 36.1296rem; }
  .hsf-tr-c      { left: 39.7048rem; top: 67.125rem; width: 19.2594rem; height: 1.29083rem; }
  .hsf-fl-c      { left: 39.5625rem; top: 67.125rem; width: 13.75rem; height: 1.29083rem; }
  .hsf-pc-c      { left: 60.9375rem; top: 66.9892rem; width: 4.0625rem; height: 1.5625rem; }
  .hsf-cp-c      { left: 65.6829rem; top: 66.8329rem; width: 35.9405rem; }
  .hsf-tr-d      { left: 39.7048rem; top: 71.8335rem; width: 19.2594rem; height: 1.29083rem; }
  .hsf-fl-d      { left: 39.5625rem; top: 71.8335rem; width: 10rem; height: 1.29083rem; }
  .hsf-pc-d      { left: 60.9375rem; top: 71.6977rem; width: 4.1875rem; height: 1.5625rem; }
  .hsf-cp-d      { left: 65.6829rem; top: 71.5415rem; width: 35.9405rem; }
  .hsf-tr-e      { left: 39.7048rem; top: 76.5421rem; width: 19.2594rem; height: 1.29083rem; }
  .hsf-fl-e      { left: 39.5625rem; top: 76.5421rem; width: 9.375rem; height: 1.29083rem; }
  .hsf-pc-e      { left: 60.9375rem; top: 76.4062rem; width: 4.125rem; height: 1.5625rem; }
  .hsf-cp-e      { left: 65.6829rem; top: 76.25rem; width: 35.9405rem; }
  .hsf-tr-a, .hsf-tr-b, .hsf-tr-c, .hsf-tr-d, .hsf-tr-e { background: #ebceff;
                                                         border-radius: 0 0.645416rem 0.645416rem 0; }
  .hsf-fl-a, .hsf-fl-b, .hsf-fl-c, .hsf-fl-d, .hsf-fl-e { background: #7a00d0;
                                                          border-radius: 0 0.645416rem 0.645416rem 0; }

  .hsf-ring-a    { left: 42.875rem; top: 86.9694rem; width: 7.5rem; height: 7.5rem; }
  .hsf-tip-a     { left: 44.0199rem; top: 86.9694rem; width: 2.6051rem; height: 1.58167rem; }
  .hsf-dp-a      { left: 44.125rem; top: 89.9381rem; width: 5rem; height: 1.5625rem; }
  .hsf-ring-b    { left: 58.9642rem; top: 86.9694rem; width: 7.5rem; height: 7.5rem; }
  .hsf-tip-b     { left: 60.1091rem; top: 86.9694rem; width: 2.6051rem; height: 1.58167rem; }
  .hsf-dp-b      { left: 60.6829rem; top: 89.9381rem; width: 4.0625rem; height: 1.5625rem; }
  .hsf-ring-c    { left: 75.0533rem; top: 86.9694rem; width: 7.5rem; height: 7.5rem; }
  .hsf-tip-c     { left: 75.0813rem; top: 86.9694rem; width: 3.722rem; height: 3.38258rem; }
  .hsf-dp-c      { left: 76.7721rem; top: 89.9381rem; width: 4.0625rem; height: 1.5625rem; }
  .hsf-ring-d    { left: 92.02rem; top: 86.9694rem; width: 6.62256rem; height: 7.5rem; }
  .hsf-tip-d     { left: 91.1425rem; top: 86.9694rem; width: 3.75004rem; height: 6.16084rem; }
  .hsf-dp-d      { left: 92.8303rem; top: 89.9381rem; width: 4.0625rem; height: 1.5625rem; }
  /* кільця за відсотком: та сама коробка 7.5rem, що й у картинки кільця (для d — від лівого краю
     світлої частини, бо картинка d була обрізана по дузі) */
  .pct-ring-a { left: 42.875rem;  top: 86.9694rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-b { left: 58.9642rem; top: 86.9694rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-c { left: 75.0533rem; top: 86.9694rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-d { left: 91.1425rem; top: 86.9694rem; width: 7.5rem; height: 7.5rem; }
  .hsf-dc-a      { left: 39.5625rem; top: 95.7194rem; width: 14.125rem; }
  .hsf-dc-b      { left: 55.6517rem; top: 95.7194rem; width: 14.125rem; }
  .hsf-dc-c      { left: 71.7408rem; top: 95.7194rem; width: 14.125rem; }
  .hsf-dc-d      { left: 87.83rem; top: 95.7194rem; width: 14.125rem; }

  .hsf-ribbon    { left: -9.89734rem; top: 109.646rem; width: 191.668rem; height: 24.5865rem; }
  .hsf-rs        { left: 18.2995rem; top: 119.706rem; width: 19.3788rem; height: 4.54367rem; }
  .hsf-rs > img { width: 19.2147rem; height: 3.4764rem; transform: rotate(3.2deg); }
  .hsf-card      { left: 42.1156rem; top: 111.302rem; width: 35.7687rem; height: 22.5658rem; }
  .hsf-card > div { width: 33.8125rem; height: 18.75rem; background: #fff;
                    border: 0.125rem solid #f178dd; border-radius: 1.875rem; transform: rotate(-6.7deg); }
  .hsf-card-title{ left: 44.2061rem; top: 114.912rem; width: 17.9533rem; height: 5.59781rem; }
  .hsf-card-title > p { width: 17.6583rem; transform: rotate(-6.7deg); }
  .hsf-card-body { left: 44.9079rem; top: 120.709rem; width: 19.7219rem; height: 7.94813rem; }
  .hsf-card-body > p { width: 19.1821rem; transform: rotate(-6.7deg); }
  .hsf-card-more { left: 52.0069rem; top: 126.77rem; width: 19.6562rem; height: 3.16544rem; }
  .hsf-card-more > p { width: 19.6885rem; transform: rotate(-6.7deg); text-align: right; }
  .hsf-card-arrow{ left: 72.4846rem; top: 125.427rem; width: 2.92056rem; height: 2.97531rem; }
  .hsf-card-arrow > img { width: 2.625rem; height: 2.6875rem; transform: rotate(-6.7deg); }
  .hsf-card-deco { left: 67.6819rem; top: 113.58rem; width: 6.91444rem; height: 6.75012rem; }
  .hsf-card-deco > img, .hsf-card-deco > .lot-in { width: 6.25rem; height: 6.0625rem; transform: rotate(-6.7deg); }

  .hsf-sc-ground { left: 64.2006rem; top: 133.244rem; width: 55.7994rem; height: 20.9394rem; }
  .hsf-band      { left: 0rem; top: 146.421rem; width: 120rem; height: 9.24875rem; background: #ffdeab; }
  .hsf-sc-kids   { left: 35.4181rem; top: 136.719rem; width: 13.2044rem; height: 9.77562rem; }
  .hsf-sc-rock   { left: 0rem; top: 122.478rem; width: 26.2831rem; height: 29.0756rem; }
  .hsf-sc-fl1    { left: 27.7531rem; top: 144.641rem; width: 7.635rem; height: 6.29375rem; }
  .hsf-sc-fl2    { left: 72.8981rem; top: 136.653rem; width: 6.13625rem; height: 5.05813rem; }
  .hsf-sc-fl3    { left: 111.397rem; top: 143.634rem; width: 6.13625rem; height: 5.05813rem; }
  .hsf-sc-tree   { left: 93.1969rem; top: 126.568rem; width: 18.2825rem; height: 22.4019rem; }

  .nav-prev-arrow { left: 50.9537rem; top: 149.546rem; width: 3rem; height: 3rem; transform: rotate(180deg); }
  .nav-prev-label { left: 54.5787rem; top: 150.608rem; opacity: 1; }
  .nav-next       { left: 62.76rem; top: 149.546rem; }
  .nav-next-label { top: 1.0625rem; }
  .nav-next-arrow { left: 3.285rem; top: 0; width: 3rem; height: 3rem; }

  .footer-bg      { top: 155.394rem; }
  .f-line-top     { top: 161.5625rem; }
  .f-line-bottom  { top: 176.555rem; }
  .f-logo         { top: 164.737rem; }
  .f-divider      { top: 164.746rem; }
  .f-legal        { top: 178.491rem; }
  .f-fb, .f-ig, .f-tt, .f-web { top: 171.991rem; }
  .f-li           { top: 172.114rem; }
  .f-head-services, .f-head-stories { top: 164.746rem; }
  .f-c1-1, .f-c2-1, .f-c3-1 { top: 166.971rem; }
  .f-c1-2, .f-c3-2 { top: 168.929rem; }
  .f-c2-2         { top: 168.909rem; }
  .f-c1-3, .f-c3-3 { top: 170.866rem; }
  .f-c2-3         { top: 170.846rem; }
  .f-c1-4, .f-c3-4 { top: 172.804rem; }
}

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

.hsf-h1    { font-weight: 700; font-size: 3.4375rem; line-height: normal; color: #fff; }
.hsf-intro { font-weight: 500; font-size: 1.25rem; line-height: normal; color: #fff; }
.hsf-t1, .hsf-t2 { font-weight: 700; font-size: 2.8125rem; line-height: normal; color: #1a5edb; }
.hsf-b1, .hsf-b2 { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000; }
.hsf-i1, .hsf-i2 { font-weight: 700; font-size: 1.375rem; line-height: normal; color: #7a00d0;
                   white-space: nowrap; }
.hsf-pc-a, .hsf-pc-b, .hsf-pc-c, .hsf-pc-d, .hsf-pc-e,
.hsf-dp-a, .hsf-dp-b, .hsf-dp-c, .hsf-dp-d {
  font-weight: 700; font-size: 2.1875rem; line-height: normal; color: #7a00d0; white-space: nowrap;
}
.hsf-dp-a, .hsf-dp-b, .hsf-dp-c, .hsf-dp-d { text-align: center; }
.hsf-cp-a, .hsf-cp-b, .hsf-cp-c, .hsf-cp-d, .hsf-cp-e {
  font-weight: 500; font-size: 1rem; line-height: normal; color: #000;
}
.hsf-dc-a, .hsf-dc-b, .hsf-dc-c, .hsf-dc-d {
  font-weight: 500; font-size: 1rem; line-height: normal; color: #000; text-align: center;
}
.hsf-card-title > p { font-weight: 700; font-size: 1.875rem; line-height: normal; color: #1a5edb; }
.hsf-card-body  > p { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000; }
.hsf-card-more  > p { font-weight: 700; font-size: 1.25rem; line-height: normal; color: #1a5edb; }
.hsf-card-more { text-decoration: none; }
/* На решті сторінок це правило глобальне, а тут лежало лише в мобільному
   медіа-запиті — тому на десктопі Previous був підкреслений. */
.nav-prev-label, .nav-next-label { 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-story { order: 4; } .s-scene { order: 5; }
  .s-pager { order: 6; } .s-footer { order: 20; }
  .s-sec, .s-decor { position: relative; }

  .hsf-hero { position: relative; width: 100%; height: auto; aspect-ratio: 430 / 320; overflow: hidden;
              --hf: 1.78605; --hx: -76.3158%; }
  .hsf-hero-img { position: absolute; left: var(--hx); top: 0;
                  width: calc(100% * var(--hf)); height: 100%; object-fit: cover; }
  /* Клієнт: «ілюстрація в лупі не збігається з фото» (телефон). Тут лупа стоїть вертикально,
     а на десктопі нахилена на −45°, тож лінза всередині неї в іншому місці (центр 20.1%/20.3%
     коробки проти 28.68%/28.84%), а просто перенесені десктопні left/top ставили лінзу на
     116px фото лівіше. Позицію й розмір перераховано від лінзи: її центр має припадати на точку
     фото 70.19% / 45.66% (1348, 365 з 1920x800), а діаметр — 27.99% ширини фото, як на десктопі.
     left = 70.19% − 20.1%·71.68%, top = 45.66% − 20.3%·172.03%, розмір ×1.0182. */
  .hsf-mag { position: absolute; left: calc(var(--hx) + 55.78% * var(--hf)); top: 10.74%;
             width: calc(71.68% * var(--hf)); height: 172.03%; }
  .hsf-mag > .hsf-mag-img { width: 40.6%; height: 100.82%; position: relative; z-index: 1; }
  /* illustration inside the magnifier, over the glass (as a % of the mag, upright mag on mobile) */
  /* illustration circle sized/positioned to EXACTLY match the glass hole (measured from
     hsf-mag.webp: glass centre 20.1%/20.3% of the mag box, diameter 39.05%) */
  .hsf-mag > .hsf-lens-in { position: absolute; z-index: 0; object-fit: cover; border-radius: 50%;
                            left: 0.58%; top: 0.78%; width: 39.05%; height: 39.05%; }
  .hsf-shade-l, .hsf-shade-r { display: none; }

  .s-intro { background: #1a5edb; padding: 30px var(--pad) 34px; }
  .hsf-h1, .hsf-intro, .hsf-t1, .hsf-t2, .hsf-b1, .hsf-b2, .hsf-i1, .hsf-i2,
  .hsf-pc-a, .hsf-pc-b, .hsf-pc-c, .hsf-pc-d, .hsf-pc-e,
  .hsf-cp-a, .hsf-cp-b, .hsf-cp-c, .hsf-cp-d, .hsf-cp-e,
  .hsf-dp-a, .hsf-dp-b, .hsf-dp-c, .hsf-dp-d,
  .hsf-dc-a, .hsf-dc-b, .hsf-dc-c, .hsf-dc-d,
  .hsf-l1, .hsf-l2, .hsf-card, .hsf-card-title, .hsf-card-body, .hsf-card-more,
  .hsf-card-arrow, .hsf-card-deco, .hsf-rs {
    position: relative; left: auto; top: auto; right: auto; width: auto; height: auto;
  }

  .hsf-h1 { font-size: var(--h1); line-height: 1.12; color: #fff; margin-bottom: 6px; }
  .hsf-intro { margin-top: 14px; font-size: var(--body); line-height: 1.5; color: #fff; max-width: 46ch; }

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

  .hsf-bars { display: flex; flex-direction: column; gap: 28px; margin-top: 20px;
              position: relative; }
  /* vertical axis rail on the left (client: it's in the design); bars sit flush against it */
  .hsf-axis { display: block; position: absolute; left: 0; top: 2px; bottom: 2px;
              width: 2px; height: auto; background: #d8b5f1; border-radius: 2px; }
  /* client's updated look: full-width bar on top, then the big % number (left) + caption (right).
     % column is fixed-width so the caption doesn't jitter while the number counts up (0% -> 93%). */
  .hsf-bar { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 10px 14px; align-items: center; }
  .hsf-bar > .hsf-track { position: relative; grid-column: 1 / -1; order: 0;
                          width: 100%; height: 18px; background: #ebceff; border-radius: 0 9px 9px 0; }
  .hsf-bar > .hsf-fill  { position: absolute; left: 0; top: 0; z-index: 1; height: 18px; width: var(--w);
                          background: #7a00d0; border-radius: 0 9px 9px 0; }
  .hsf-bar > .hsf-pc { order: 1; font-size: var(--num); padding-left: 12px; }  /* було 40px — клієнт: однаковий кегль цифр на всіх сторінках */
  .hsf-bar > .hsf-cp { order: 2; font-size: var(--cap); }

  .hsf-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 14px; margin-top: 22px; }
  .hsf-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hsf-donut { position: relative; width: 96px; height: 96px; flex: none; }
  .hsf-donut > img, .hsf-donut > p { position: absolute; }
  /* ring SVGs stretch to an ellipse (preserveAspectRatio:none); redraw as a CSS conic ring so
     it's a perfect circle with a full light remainder, and it draws in via --draw on scroll. */
  .hsf-donut > .hsf-ring, .hsf-donut > .hsf-tip { display: none; }
  .hsf-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%));
    -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;
  }
  .hsf-stats .hsf-stat:nth-of-type(1) .hsf-donut { --pct: 100; }
  .hsf-stats .hsf-stat:nth-of-type(2) .hsf-donut { --pct: 97; }
  .hsf-stats .hsf-stat:nth-of-type(3) .hsf-donut { --pct: 88; }
  .hsf-stats .hsf-stat:nth-of-type(4) .hsf-donut { --pct: 98; }
  .hsf-donut > .hsf-dp { left: 0; top: 39.5%; width: 100%; text-align: center; font-size: var(--ring-num); z-index: 1; }
  .hsf-dc-a, .hsf-dc-b, .hsf-dc-c, .hsf-dc-d { margin-top: 10px; font-size: var(--cap); }

  /* arched "Related Stories:" ribbon (client / Figma) — matches other pages: symmetric upward-bowed
     purple band with white top/bottom borders, full-bleed, text centred and levelled on the arch */
  .s-rs { margin-top: 30px; display: flex; align-items: center; justify-content: center;
          min-height: 104px; padding: 0 var(--pad);
          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; }
  .s-story { padding: 0 var(--pad); background: none; }
  .hsf-ribbon { display: none; }
  .hsf-rs { display: block; width: 240px; height: auto; margin: 0; }
  .hsf-rs > img { width: 100%; height: auto; transform: rotate(4.7deg); }
  .hsf-card-shape { position: relative; padding: 26px 22px 28px; }
  .hsf-card { position: absolute; inset: 0; }
  .hsf-card > div { position: absolute; inset: 0; width: 100%; height: 100%;
                    background: #fff; border: 2px solid #f178dd; border-radius: 24px; transform: none; }
  .hsf-card-title > p, .hsf-card-body > p, .hsf-card-more > p { width: auto; transform: none; }
  /* Декоративна іконка абсолютна (top:16, ~70px заввишки, тобто до y≈86), а текст ішов
     одразу за заголовком і починався на y≈80 — іконка торкалась першого рядка (клієнт).
     min-height резервує під неї висоту, тож текст завжди починається нижче. */
  .hsf-card-title { padding-right: 86px; }
  .hsf-card-title > p { font-size: 22px; }
  .hsf-card-body { margin-top: 12px; }
  .hsf-card-body > p { font-size: 15px; line-height: 1.45; }
  .hsf-card-more { margin-top: 16px; padding-right: 42px; }
  .hsf-card-more > p { font-size: 16px; }
  .hsf-card-arrow { position: absolute; right: 22px; bottom: 24px; width: 30px; height: 31px; }
  .hsf-card-arrow > img { width: 100%; height: 100%; transform: none; }
  .hsf-card-deco { position: absolute; right: 18px; top: 16px; width: 68px; height: auto; }
  .hsf-card-deco > img, .hsf-card-deco > .lot-in { width: 100%; height: auto; transform: none; }

  .s-scene { margin-top: 26px; overflow: hidden; background: #ffdeab; }
  .hsf-stage { position: relative; width: 100%; margin-left: 0; aspect-ratio: 1920 / 507; }
  .hsf-stage > * { position: absolute; }

  .hsf-sc-ground { left: 53.5005%; top: 33.9522%; width: 46.4995%; height: 66.0340%; }
  .hsf-sc-kids   { left: 29.5151%; top: 44.9129%; width: 11.0036%; height: 30.8282%; }
  .hsf-sc-rock   { left: 0.0000%; top: 0.0000%; width: 21.9026%; height: 91.6923%; }
  .hsf-sc-fl1    { left: 23.1276%; top: 69.8951%; width: 6.3625%; height: 19.8478%; }
  .hsf-sc-fl2    { left: 60.7484%; top: 44.7040%; width: 5.1135%; height: 15.9512%; }
  .hsf-sc-fl3    { left: 92.8307%; top: 66.7179%; width: 5.1135%; height: 15.9512%; }
  .hsf-sc-tree   { left: 77.6641%; top: 12.9001%; width: 15.2354%; height: 70.6461%; }
  .hsf-band { display: none; }

  .s-pager { padding: 24px var(--pad) 30px; display: flex; align-items: center;
             justify-content: center; gap: 12px; background: #ffdeab; }
  .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; }
  .nav-prev-label, .nav-next-label { color: #000; opacity: 1; text-decoration: none; }
}

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

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

/* (тут було .hsf-mag { top: 14% } для телефона — зсув лупи вниз «щоб не торкалась шапки»;
   ілюстрація в лінзі їхала разом із лупою й роз'їжджалась із фото. Прибрано: позиція лупи тепер
   виводиться з того, де лінза має стояти на фото, див. правило .hsf-mag вище.) */

@media (max-width: 767.98px) {
  /* нижня сцена: композиція з макета iPhone-5 (430x415, від y=1170).
     Координати знято з еталонного рендера — у метаданих цього артборда вони биті. */
  .hsf-stage { width: 100%; margin-left: 0; aspect-ratio: 430 / 415;
               background: linear-gradient(#fbf2e3 0 70.5301%, #ffdeab 70.5301% 100%); }
  .hsf-sc-fl3, .hsf-sc-tree { display: none; }
  .hsf-sc-rock      { left: -18.0465%; top: 0%; width: 71.0698%; height: 81.4458%; z-index: 1; }
  .hsf-sc-ground    { left: 58.3721%; top: 30.6024%; width: 102.791%; height: 40%; z-index: 2; }
  .hsf-sc-fl2       { left: 72.4186%; top: 34.1205%; width: 15.4186%; height: 13.1807%; z-index: 4; }
  .hsf-sc-fl1       { left: 16.8605%; top: 73.4699%; width: 19.7209%; height: 16.8434%; z-index: 4; }
  .hsf-sc-kids      { left: 43.9767%; top: 49.3735%; width: 49.1395%; height: 37.6867%; z-index: 5; }
}

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