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

@media (min-width: 1200px) {

  .page { height: 218.721rem; }

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

  .hd-stage, .hd-prog, .hd-block, .hd-stats, .hd-stat, .hd-donut,
  .hd-card-shape, .hd-scene-wrap { display: contents; }

  .hd-hero     { left: 0; top: 0; width: 120rem; height: 50rem; overflow: hidden; isolation: isolate; }
  .hd-hero-img { left: 0; top: 0; width: 120rem; height: 50rem; object-fit: cover; }
  .hd-lens     { left: 64.3438rem; top: 8.8125rem; width: 30.2283rem; height: 34.5rem; object-fit: cover; }
  .hd-shade-l  { left: 0; top: 0; width: 63.875rem; height: 50rem; opacity: .85; mix-blend-mode: multiply;
                 background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 64.384%, #000 100%); }
  .hd-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%); }

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

  .hd-t1          { left: 18.1875rem; top: 53.125rem; width: 19.5rem; height: 8.75rem; }
  .hd-i1          { left: 39.5625rem; top: 53.125rem; width: 11.8125rem; height: 0.9375rem; }
  .hd-l1          { left: 39.5625rem; top: 55.125rem; width: 62.25rem; height: 0.0625rem; }
  .hd-b1          { left: 18.1875rem; top: 63.75rem; width: 19.5rem; }
  .hd-t2          { left: 18.1875rem; top: 79.7481rem; width: 19.5rem; height: 5.375rem; }
  .hd-i2          { left: 39.5625rem; top: 79.7481rem; width: 11.8125rem; height: 0.9375rem; }
  .hd-l2          { left: 39.5625rem; top: 81.6875rem; width: 62.25rem; height: 0.0625rem; }
  .hd-b2          { left: 18.3131rem; top: 86.9981rem; width: 19.3742rem; }
  .hd-t3          { left: 18.1875rem; top: 101.471rem; width: 19.5rem; height: 2rem; }
  .hd-i3          { left: 39.5625rem; top: 101.471rem; width: 11.8125rem; height: 0.9375rem; }
  .hd-l3          { left: 39.5625rem; top: 103.471rem; width: 62.25rem; height: 0.0625rem; }
  .hd-b3          { left: 18.3131rem; top: 105.346rem; width: 19.3742rem; }
  .hd-t4          { left: 18.1875rem; top: 125.314rem; width: 19.5rem; height: 2rem; }
  .hd-i4          { left: 39.5625rem; top: 125.314rem; width: 11.8125rem; height: 0.9375rem; }
  .hd-l4          { left: 39.5625rem; top: 127.314rem; width: 62.25rem; height: 0.0625rem; }
  .hd-b4          { left: 18.3131rem; top: 129.189rem; width: 19.3742rem; }

  .hd-ico-1a      { left: 43.4844rem; top: 58.2206rem; width: 4.53125rem; height: 3.65437rem; }
  .hd-ico-1b      { left: 56.6094rem; top: 58.91rem; width: 4.53125rem; height: 2.965rem; }
  .hd-ico-3a      { left: 43.9312rem; top: 105.158rem; width: 3.63769rem; height: 4.53125rem; }
  .hd-ico-3b      { left: 70.4094rem; top: 105.346rem; width: 7.68187rem; height: 4.53125rem; }
  .hd-ico-4       { left: 42.0775rem; top: 129.04rem; width: 5.09563rem; height: 4.56937rem; }

  .hd-ring-a      { left: 42rem; top: 83.6231rem; width: 7.5rem; height: 7.5rem; }
  .hd-tip-a       { left: 43.145rem; top: 83.6231rem; width: 2.605rem; height: 1.58187rem; }
  .hd-pc-a        { left: 43.7188rem; top: 86.5919rem; width: 4.125rem; height: 1.5625rem; }
  .hd-ring-b      { left: 56.295rem; top: 83.6231rem; width: 7.5rem; height: 7.5rem; }
  .hd-tip-b       { left: 57.44rem; top: 83.6231rem; width: 2.605rem; height: 1.58187rem; }
  .hd-pc-b        { left: 58.0138rem; top: 86.5919rem; width: 4.0625rem; height: 1.5625rem; }
  .hd-ring-c      { left: 56.25rem; top: 105.346rem; width: 7.5rem; height: 7.5rem; }
  .hd-tip-c       { left: 57.395rem; top: 105.346rem; width: 2.605rem; height: 1.58187rem; }
  .hd-pc-c        { left: 57.9688rem; top: 108.314rem; width: 4.125rem; height: 1.5625rem; }
  .hd-ring-d      { left: 54.875rem; top: 129.189rem; width: 7.5rem; height: 7.5rem; }
  .hd-tip-d       { left: 56.02rem; top: 129.189rem; width: 2.605rem; height: 1.58187rem; }
  .hd-pc-d        { left: 56.5938rem; top: 132.158rem; width: 4.0625rem; height: 1.5625rem; }
  .hd-ring-e      { left: 71.375rem; top: 129.189rem; width: 7.5rem; height: 7.5rem; }
  .hd-tip-e       { left: 72.52rem; top: 129.189rem; width: 2.605rem; height: 1.58187rem; }
  .hd-pc-e        { left: 73.0938rem; top: 132.158rem; width: 4rem; height: 1.5625rem; }
  .hd-ring-f      { left: 87.875rem; top: 129.189rem; width: 7.5rem; height: 7.5rem; }
  .hd-tip-f       { left: 89.02rem; top: 129.189rem; width: 2.605rem; height: 1.58187rem; }
  .hd-pc-f        { left: 89.5938rem; top: 132.158rem; width: 4.0625rem; height: 1.5625rem; }
  /* кільця за відсотком — у коробках колишніх картинок кілець */
  .pct-ring-a { left: 42rem;     top: 83.6231rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-b { left: 56.295rem; top: 83.6231rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-c { left: 56.25rem;  top: 105.346rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-d { left: 54.875rem; top: 129.189rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-e { left: 71.375rem; top: 129.189rem; width: 7.5rem; height: 7.5rem; }
  .pct-ring-f { left: 87.875rem; top: 129.189rem; width: 7.5rem; height: 7.5rem; }

  .hd-n1          { left: 43.25rem; top: 62.9375rem; width: 5rem; height: 1.5625rem; }
  .hd-n2          { left: 57.6875rem; top: 62.9375rem; width: 2.375rem; height: 1.5625rem; }
  .hd-n3          { left: 44.0938rem; top: 110.939rem; width: 3.3125rem; height: 1.5625rem; }
  .hd-n4          { left: 72.625rem; top: 110.939rem; width: 3.25rem; height: 1.5625rem; }
  .hd-n5          { left: 42.75rem; top: 134.783rem; width: 3.75rem; height: 1.5625rem; }
  .hd-c1          { left: 39.5625rem; top: 65.75rem; width: 12.375rem; }
  .hd-c2          { left: 53.8125rem; top: 65.75rem; width: 10.125rem; }
  .hd-c3          { left: 39.5969rem; top: 92.3731rem; width: 12.3403rem; }
  .hd-c4          { left: 53.8925rem; top: 92.3731rem; width: 12.3403rem; }
  .hd-c5          { left: 39.5625rem; top: 113.752rem; width: 12.375rem; }
  .hd-c6          { left: 68.0625rem; top: 113.752rem; width: 12.375rem; }
  .hd-c7          { left: 53.8125rem; top: 114.096rem; width: 12.375rem; }
  .hd-c8          { left: 39.5625rem; top: 137.596rem; width: 10.125rem; }
  .hd-c9          { left: 51.5625rem; top: 137.939rem; width: 14.125rem; }
  .hd-c10         { left: 68.0625rem; top: 137.939rem; width: 14.125rem; }
  .hd-c11         { left: 84.5625rem; top: 137.939rem; width: 14.125rem; }

  .hd-ribbon      { left: -9.8975rem; top: 145.658rem; width: 191.668rem; height: 24.5864rem; }
  .hd-rs          { left: 18.2994rem; top: 155.718rem; width: 19.3788rem; height: 4.54375rem; }
  .hd-rs > img { width: 19.2147rem; height: 3.4764rem; transform: rotate(3.2deg); }
  .hd-card        { left: 42.1156rem; top: 147.314rem; width: 35.7687rem; height: 22.5658rem; }
  .hd-card > div { width: 33.8125rem; height: 18.75rem; background: #fff;
                   border: 0.125rem solid #f178dd; border-radius: 1.875rem; transform: rotate(-6.7deg); }
  .hd-card-title  { left: 44.2062rem; top: 150.924rem; width: 17.9533rem; height: 5.59781rem; }
  .hd-card-title > p { width: 17.6583rem; transform: rotate(-6.7deg); }
  .hd-card-body   { left: 44.9081rem; top: 156.721rem; width: 19.7219rem; height: 7.94813rem; }
  .hd-card-body > p { width: 19.1821rem; transform: rotate(-6.7deg); }
  .hd-card-more   { left: 52.0069rem; top: 162.782rem; width: 19.6562rem; height: 3.16544rem; }
  .hd-card-more > p { width: 19.6885rem; transform: rotate(-6.7deg); text-align: right; }
  .hd-card-arrow  { left: 72.4844rem; top: 161.439rem; width: 2.92056rem; height: 2.97531rem; }
  .hd-card-arrow > img { width: 2.625rem; height: 2.6875rem; transform: rotate(-6.7deg); }
  .hd-card-deco   { left: 67.6819rem; top: 149.592rem; width: 6.91444rem; height: 6.75012rem; }
  .hd-card-deco > img, .hd-card-deco > .lot-in { width: 6.25rem; height: 6.0625rem; transform: rotate(-6.7deg); }

  .hd-sc-a        { left: 0rem; top: 154.293rem; width: 13.5069rem; height: 32.4369rem; }
  .hd-sc-ga       { transform: scaleX(-1); left: -0.17125rem; top: 176.143rem; width: 38.1406rem; height: 9.2275rem; }
  .hd-sc-c        { left: 2.68125rem; top: 173.227rem; width: 27.4419rem; height: 9.65rem; }
  .hd-sc-gb       { left: -0.17125rem; top: 184.004rem; width: 120rem; height: 11.8419rem; }
  .hd-sc-d        { left: 91.4006rem; top: 154.047rem; width: 28.5994rem; height: 30.8163rem; }
  .hd-sc-f        { left: 106.271rem; top: 173.232rem; width: 8.34812rem; height: 9.7425rem; }
  .hd-sc-g        { left: 38.3612rem; top: 176.478rem; width: 8.64375rem; height: 8.44688rem; }
  .hd-sc-e        { left: 73.3125rem; top: 156.394rem; width: 30.7406rem; height: 31.4306rem; }

  .nav-prev-arrow { left: 50.954rem; top: 186.6119rem; width: 3rem; height: 3rem; transform: rotate(180deg); }
  .nav-prev-label { left: 54.579rem; top: 187.6744rem; opacity: 1; }
  .nav-next       { left: 62.7611rem; top: 186.6119rem; }
  .nav-next-label { top: 1.0625rem; }
  .nav-next-arrow { left: 3.2849rem; top: 0; width: 3rem; height: 3rem; }

  .footer-bg      { top: 192.471rem; }
  .f-line-top     { top: 198.633125rem; }
  .f-line-bottom  { top: 213.628125rem; }
  .f-logo         { top: 201.814rem; }
  .f-divider      { top: 201.823rem; }
  .f-legal        { top: 215.568rem; }
  .f-fb, .f-ig, .f-tt, .f-web { top: 209.068rem; }
  .f-li           { top: 209.191rem; }
  .f-head-services, .f-head-stories { top: 201.823rem; }
  .f-c1-1, .f-c2-1, .f-c3-1 { top: 204.048rem; }
  .f-c1-2, .f-c3-2 { top: 206.006rem; }
  .f-c2-2         { top: 205.986rem; }
  .f-c1-3, .f-c3-3 { top: 207.943rem; }
  .f-c2-3         { top: 207.923rem; }
  .f-c1-4, .f-c3-4 { top: 209.881rem; }
}

.hd-h1, .hd-intro, .hd-t1, .hd-t2, .hd-t3, .hd-t4,
.hd-i1, .hd-i2, .hd-i3, .hd-i4, .hd-b1, .hd-b2, .hd-b3, .hd-b4,
.hd-n1, .hd-n2, .hd-n3, .hd-n4, .hd-n5,
.hd-pc-a, .hd-pc-b, .hd-pc-c, .hd-pc-d, .hd-pc-e, .hd-pc-f,
.hd-c1, .hd-c2, .hd-c3, .hd-c4, .hd-c5, .hd-c6, .hd-c7, .hd-c8, .hd-c9, .hd-c10, .hd-c11,
.hd-card-title > p, .hd-card-body > p, .hd-card-more > p {
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic; overflow-wrap: break-word;
}

.hd-h1    { font-weight: 700; font-size: 3.4375rem; line-height: normal; color: #fff; }
.hd-intro { font-weight: 500; font-size: 1.25rem; line-height: normal; color: #fff; }
.hd-t1, .hd-t2, .hd-t3, .hd-t4 { font-weight: 700; font-size: 2.8125rem; line-height: normal; color: #ff9b00; }
.hd-i1, .hd-i2, .hd-i3, .hd-i4 { font-weight: 700; font-size: 1.375rem; line-height: normal; color: #ff9b00;
                                 white-space: nowrap; }
.hd-b1, .hd-b2, .hd-b3, .hd-b4 { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #fff; }
.hd-n1, .hd-n2, .hd-n3, .hd-n4, .hd-n5,
.hd-pc-a, .hd-pc-b, .hd-pc-c, .hd-pc-d, .hd-pc-e, .hd-pc-f {
  font-weight: 700; font-size: 2.1875rem; line-height: normal; color: #ff9b00;
  text-align: center; white-space: nowrap;
}
.hd-c1, .hd-c2, .hd-c3, .hd-c4, .hd-c5, .hd-c6, .hd-c7, .hd-c8, .hd-c9, .hd-c10, .hd-c11 {
  font-weight: 500; font-size: 1rem; line-height: normal; color: #fff; text-align: center;
}

.hd-card-title > p { font-weight: 700; font-size: 1.875rem; line-height: normal; color: #1a5edb; }
.hd-card-body  > p { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000; }
.hd-card-more  > p { font-weight: 700; font-size: 1.25rem; line-height: normal; color: #1a5edb; }
.hd-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-story { order: 4; } .s-scene { order: 5; } .s-pager { order: 6; }
  .s-footer { order: 20; }
  .s-sec, .s-decor { position: relative; }

  .hd-hero { position: relative; width: 100%; height: auto; aspect-ratio: 430 / 320; overflow: hidden;
             --hf: 1.78605; --hx: -67.6989%; }
  .hd-hero-img { position: absolute; left: var(--hx); top: 0;
                 width: calc(100% * var(--hf)); height: 100%; object-fit: cover; }
  .hd-lens { position: absolute; left: calc(var(--hx) + 53.62% * var(--hf)); top: 17.63%;
             width: calc(25.19% * var(--hf)); height: 69%; object-fit: cover; }
  .hd-shade-l, .hd-shade-r { display: none; }

  /* Services & Impact banner on its own orange panel (client) */
  .s-intro { background: #ff9b00; padding: 30px var(--pad) 34px; }
  .s-intro .hw-1, .s-intro .hw-2 { filter: brightness(0); }
  .hd-h1, .hd-intro, .hd-t1, .hd-t2, .hd-t3, .hd-t4, .hd-i1, .hd-i2, .hd-i3, .hd-i4,
  .hd-b1, .hd-b2, .hd-b3, .hd-b4, .hd-n1, .hd-n2, .hd-n3, .hd-n4, .hd-n5,
  .hd-c1, .hd-c2, .hd-c3, .hd-c4, .hd-c5, .hd-c6, .hd-c7, .hd-c8, .hd-c9, .hd-c10, .hd-c11,
  .hd-l1, .hd-l2, .hd-l3, .hd-l4, .hd-card, .hd-card-title, .hd-card-body,
  .hd-card-more, .hd-card-arrow, .hd-card-deco, .hd-rs {
    position: relative; left: auto; top: auto; right: auto; width: auto; height: auto;
  }
  .hd-h1 { font-size: var(--h1); line-height: 1.12; margin-top: 12px; color: #002d8e; }
  .hd-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; }
  .hd-prog { display: contents; }
  /* clearer separation between the major sections so a new section reads as new */
  .hd-block { margin-top: 52px; }
  .hd-t1, .hd-t2, .hd-t3, .hd-t4 { font-size: 28px; }
  /* thin divider line between the service sections (client); colour = page accent.
     (The orange S&I panel already separates the intro from the first section.) */
  .hd-t2::before, .hd-t3::before, .hd-t4::before { content: ""; display: block; width: 100%;
    height: 2px; background: #ff9b00; border-radius: 2px; margin: 0 0 20px; }
  /* a bit more space between a section title and its body text */
  .hd-b1, .hd-b2, .hd-b3, .hd-b4 { margin-top: 18px; font-size: var(--body); line-height: 1.5; }
  .hd-i1, .hd-i2, .hd-i3, .hd-i4 { margin-top: 22px; font-size: 18px; }
  .hd-l1, .hd-l2, .hd-l3, .hd-l4 { width: 100%; height: 1px; margin-top: 10px; }
  .hd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; margin-top: 20px;
              align-items: start; }
  .hd-stat  { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .hd-donut { position: relative; width: 92px; height: 92px; flex: none; }
  .hd-donut > img, .hd-donut > .hd-pc { position: absolute; }
  .hd-donut > .hd-ring { left: 0; top: 0; width: 100%; height: 100%; }
  .hd-donut > .hd-tip  { left: 15.27%; top: 0; width: 34.73%; height: 21.09%; }
  .hd-donut > .hd-pc   { left: 0; top: 39.5%; width: 100%; text-align: center; font-size: var(--ring-num); }
  /* fixed icon height so both stat columns line up (numbers + captions inline across columns) */
  .hd-ico { width: auto; height: 52px; }
  .hd-num { margin-top: 12px; font-size: var(--num); }  /* єдиний кегль великих цифр на всіх сторінках */
  .hd-cap { margin-top: 8px; font-size: var(--cap); }

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

  .s-scene { margin-top: 26px; overflow: hidden; }
  .hd-stage { position: relative; width: 128%; margin-left: -14%; aspect-ratio: 1920 / 669; }
  .hd-stage > * { position: absolute; }
  .hd-sc-ga { transform: scaleX(-1); }

  .hd-sc-a  { left: 0.0000%; top: 0.5891%; width: 11.2557%; height: 77.6025%; }
  .hd-sc-ga { left: -0.1427%; top: 52.8634%; width: 31.7838%; height: 22.0760%; }
  .hd-sc-c  { left: 2.2344%; top: 45.8865%; width: 22.8682%; height: 23.0868%; }
  .hd-sc-gb { left: -0.1427%; top: 71.6693%; width: 100.0000%; height: 28.3307%; }
  .hd-sc-d  { left: 76.1672%; top: 0.0000%; width: 23.8328%; height: 73.7253%; }
  .hd-sc-f  { left: 88.5589%; top: 45.9000%; width: 6.9568%; height: 23.3081%; }
  .hd-sc-g  { left: 31.9677%; top: 53.6649%; width: 7.2031%; height: 20.2084%; }
  .hd-sc-e  { left: 61.0938%; top: 5.6162%; width: 25.6172%; height: 75.1951%; }

  .s-pager { padding: 24px var(--pad) 30px; display: flex; align-items: center;
             justify-content: center; gap: 12px; }
  .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) {

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

@media (max-width: 767.98px) {
  /* нижня сцена: композиція з макета iPhone-6 (430x440.5, від y=491.5) */
  .hd-stage { width: 100%; margin-left: 0; aspect-ratio: 430 / 440.5; }
  .hd-sc-a, .hd-sc-ga, .hd-sc-c { display: none; }
  .hd-sc-gb   { left: -184.279%; top: 71.6686%; width: 294.116%; height: 28.3314%; }
  .hd-sc-d    { left: 40.1628%; top: 0%; width: 70.6279%; height: 73.7344%; }
  .hd-sc-f    { left: 76.6047%; top: 45.9024%; width: 20.4651%; height: 23.3144%; }
  .hd-sc-g    { left: 3.2326%; top: 53.6663%; width: 21.186%; height: 20.2043%; }
  .hd-sc-e    { left: -4.186%; top: 5.6073%; width: 75.3488%; height: 75.21%; }
}

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