body, .page { background: #002d8e; }
.vol-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vol-intro-band { display: contents; }  /* desktop: transparent wrapper; mobile: orange panel */

@media (min-width: 1200px) {

  .page { height: 135.875rem; }
  .s-sec, .s-decor { position: absolute; left: 0; top: 0; width: 100%; height: 0; }
  .s-sec   { z-index: 1; }
  .s-decor { z-index: 0; }

  .vol-hero { left: 0; top: 0; width: 120rem; height: 50rem; overflow: hidden; isolation: isolate; }
  .vol-hero-img { left: 0; top: 0; width: 120rem; height: 50rem; object-fit: cover; }
  .vol-carpark { left: 59.3419rem; top: 18.4062rem; width: 43.0579rem; height: 22.6562rem; object-fit: cover; }
  .vol-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%); }
  .vol-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%); }

  .handwriting { left: 18.1875rem; top: 19.3204rem; width: 12.375rem; height: 1.3046rem; }
  .vol-h1 { left: 18.1875rem; top: 22.5rem; width: 31.6875rem; }
  .vol-p  { left: 18.1875rem; top: 35.0625rem; width: 21.625rem; }

  .vol-h2     { left: 18.1875rem; top: 53.125rem; width: 19.5rem; }
  .vol-body   { left: 18.1875rem; top: 60.375rem; width: 19.5rem; }
  .vol-impact { left: 39.5625rem; top: 53.125rem; }
  .vol-line   { left: 39.5625rem; top: 55.1875rem; width: 62.25rem; height: 0.0625rem; }

  .vol-i-person { left: 79.2037rem; top: 57.3438rem; width: 2.0202rem; height: 4.5312rem; }
  .vol-i-people { left: 93.873rem; top: 57.3438rem; width: 5.754rem; height: 4.5312rem; }

  .vol-c23  { left: 39.5625rem;   top: 66.0938rem; width: 18.625rem; }
  .vol-n1   { left: 60.9375rem;   top: 62.9375rem; width: 10.125rem; }
  .vol-c1   { left: 60.9375rem;   top: 65.75rem; width: 10.125rem; }
  .vol-n2   { left: 73.8125rem;  top: 62.9375rem; width: 13.75rem; }
  .vol-c2   { left: 73.8125rem;  top: 65.75rem; width: 13.75rem; }
  .vol-n3   { left: 91.6875rem;  top: 62.9375rem; width: 10.125rem; }
  .vol-c3   { left: 91.6875rem;  top: 65.75rem; width: 10.125rem; }

  .vol-water     { left: 56.25rem; top: 91.0363rem; width: 63.75rem; height: 8.6824rem; }
  .vol-shore     { left: 84.084rem; top: 91.2808rem; width: 35.508rem; height: 7.1063rem; }
  .vol-hill      { left: 0rem; top: 93.9711rem; width: 120rem; height: 12.2967rem; }
  .vol-mushroom  { left: 95.82rem; top: 76.253rem; width: 20.784rem; height: 25.694rem; }
  .vol-ground    { left: 0rem; top: 96.8517rem; width: 116rem; height: 13.6283rem; }
  .vol-shine     { left: -12.084rem; top: 96.8516rem; width: 99.612rem; height: 18.0979rem;
                   mix-blend-mode: screen;
                   mask-image: url(../vol-shine-mask.svg); -webkit-mask-image: url(../vol-shine-mask.svg);
                   mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
                   mask-size: 116.0649rem 13.6307rem; -webkit-mask-size: 116.0649rem 13.6307rem;
                   mask-position: 11.9733rem 0; -webkit-mask-position: 11.9733rem 0; }
  .vol-shine > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .vol-ripple    { left: 0rem; top: 100.1127rem; width: 120rem; height: 6.4812rem; }
  .vol-boat      { left: 31.812rem; top: 84.6909rem; width: 17.208rem; height: 15.1908rem; }
  .vol-glow-1    { left: 42.768rem; top: 80.0983rem; width: 8.136rem; height: 8.1253rem; }
  .vol-glow-2    { left: 103.488rem; top: 66.6603rem; width: 10.596rem; height: 10.5847rem; }
  .vol-plant-a   { left: 76.464rem; top: 87.6394rem; width: 4.368rem; height: 7.5003rem; }
  .vol-plant-b   { left: 112.812rem; top: 87.0008rem; width: 3.636rem; height: 5.7068rem; }
  .vol-plant-b2  { left: 81rem; top: 90.0715rem; width: 3.636rem; height: 5.6932rem; }
  .vol-plant-c   { left: 74.52rem; top: 91.6749rem; width: 2.316rem; height: 3.6415rem; transform: scaleX(-1); }
  .vol-plant-d   { left: 91.872rem; top: 89.5688rem; width: 2.46rem; height: 3.2067rem; }
  .vol-plant-d2  { left: 85.236rem; top: 90.8053rem; width: 2.472rem; height: 3.2202rem; }
  .vol-plant-d3  { left: 71.448rem; top: 92.2999rem; width: 2.472rem; height: 3.2066rem; }
  .vol-plant-d4  { left: 109.884rem; top: 88.6177rem; width: 2.472rem; height: 3.2066rem; }
  .vol-lamp      { left: 57.156rem; top: 78.9298rem; width: 12.612rem; height: 18.0714rem; }
  .vol-glow-3    { left: 82.404rem; top: 80.5739rem; width: 4.068rem; height: 4.1442rem; }
  .vol-glow-4    { left: 66.048rem; top: 72.4214rem; width: 5.4rem; height: 5.5029rem; }
  .vol-glow-4b   { left: 70.692rem; top: 80.2885rem; width: 5.388rem; height: 5.5029rem; transform: scaleX(-1); }
  .vol-glow-4c   { left: 51.372rem; top: 73.1823rem; width: 5.4rem; height: 5.5029rem; transform: scaleX(-1); }
  .vol-glow-5    { left: 80.58rem; top: 71.1985rem; width: 7.548rem; height: 7.6905rem; transform: scaleX(-1); }
  .vol-ring      { left: 45.12rem; top: 57.3393rem; width: 7.5rem; height: 7.5003rem; }
  .vol-ring-tip  { left: 46.272rem; top: 57.3393rem; width: 2.604rem; height: 1.5897rem; }
  .vol-n23       { left: 46.848rem; top: 60.3149rem; width: 4.056rem; height: 1.5626rem; }
  .pct-ring-23   { left: 45.12rem; top: 57.3393rem; width: 7.5rem; height: 7.5rem; }  /* у коробці колишньої картинки */
  .vol-i-clock   { left: 63.732rem; top: 57.5295rem; width: 4.536rem; height: 4.5382rem; }
  .f-logo        { left: 18.192rem; top: 118.9721rem; width: 13.464rem; height: 4.4975rem; }

  .vol-band { left: 0; top: 106.377rem; width: 120.0001rem; height: 7.75rem; background: #9b40dc; }
  .nav-next { left: 62.7611rem; top: 103.9025rem; }
  .nav-next-label { top: 1.0625rem; }
  .nav-next-arrow { left: 3.2849rem; top: 0; width: 3rem; height: 3rem; }
  .nav-prev-label { left: 54.579rem; top: 104.965rem; opacity: 1; color: #fff; text-decoration: none; }
  .nav-prev-arrow { left: 50.954rem; top: 103.9025rem; width: 3rem; height: 3rem; transform: rotate(180deg); }

  .footer-bg     { top: 109.625rem; }
  .f-line-top    { top: 115.8525rem; }
  .f-line-bottom { top: 130.8475rem; }
  .f-fb, .f-ig, .f-tt, .f-web { top: 126.2225rem; }
  .f-li          { top: 126.3449rem; }
  .f-divider     { top: 118.9775rem; }
  .f-head-services, .f-head-stories { top: 118.9775rem; }
  .f-c1-1, .f-c2-1, .f-c3-1 { top: 121.2025rem; }
  .f-c1-2, .f-c3-2 { top: 123.16rem; }
  .f-c2-2 { top: 123.14rem; }
  .f-c1-3, .f-c3-3 { top: 125.0975rem; }
  .f-c2-3 { top: 125.0775rem; }
  .f-c1-4, .f-c3-4 { top: 127.035rem; }
  .f-legal { top: 132.7225rem; }
}

.vol-h1, .vol-p, .vol-h2, .vol-body, .vol-impact,
.vol-n23, .vol-c23, .vol-n1, .vol-c1, .vol-n2, .vol-c2, .vol-n3, .vol-c3 {
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic; overflow-wrap: break-word;
}
.vol-h1 { font-weight: 700; font-size: 3.4375rem; line-height: normal; color: #fff; }
.vol-p  { font-weight: 500; font-size: 1.25rem; line-height: normal; color: #fff; }
.vol-h2 { font-weight: 700; font-size: 2.8125rem; line-height: normal; color: #ff9b00; }
.vol-body { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #fff; }
.vol-impact { font-weight: 700; font-size: 1.375rem; line-height: normal; color: #ff9b00; white-space: nowrap; }
.vol-n23, .vol-n1, .vol-n2, .vol-n3 {
  font-weight: 700; font-size: 2.1875rem; line-height: normal; color: #ff9b00;
  text-align: center; white-space: nowrap;
}
.vol-c23, .vol-c1, .vol-c2, .vol-c3 {
  font-weight: 500; font-size: 1rem; line-height: normal; color: #fff; text-align: center;
}
.nav-prev-label, .nav-next-label { color: #fff; opacity: 1; text-decoration: none; }

@media (max-width: 1199.98px) {
  .s-sec, .s-decor { position: static; width: auto; height: auto; z-index: auto; }
  .page { display: flex; flex-direction: column; }
  .s-hero   { order: 0; }
  .s-intro  { order: 1; }
  .s-stats  { order: 2; }
  .s-scene  { order: 3; }
  .s-pager  { order: 4; }
  .s-footer { order: 20; }

  .vol-hero { position: relative; width: 100%; height: auto; aspect-ratio: 430 / 320; overflow: hidden;
              --hf: 1.78605; --hx: -70.1664%; }
  .vol-hero-img { position: absolute; left: var(--hx); top: 0;
                  width: calc(100% * var(--hf)); height: 100%; object-fit: cover; }
  .vol-carpark { position: absolute; left: calc(var(--hx) + 49.45% * var(--hf)); top: 36.81%;
                 width: calc(35.88% * var(--hf)); height: 45.31%; object-fit: cover; }
  .vol-shade-l, .vol-shade-r { display: none; }

  /* Services & Impact banner sits on its own orange panel (client) */
  .s-intro { padding: 0; }
  .vol-intro-band { display: block; background: #ff9b00; padding: 30px var(--pad) 34px; }
  .vol-intro-band .hw-1, .vol-intro-band .hw-2 { filter: brightness(0); }
  .handwriting { position: relative; width: 168px; height: auto; aspect-ratio: 198 / 20.873; margin-bottom: 16px; }
  .hw-1 { position: absolute; left: 0;      top: 0; width: 41.639%; height: 78.13%; }
  .hw-2 { position: absolute; left: 46.27%; top: 0; width: 53.73%;  height: 100%; }
  .vol-h1 { font-size: var(--h1); line-height: 1.12; color: #002d8e; }
  .vol-p  { margin-top: 16px; font-size: var(--body); line-height: 1.5; max-width: 46ch; color: #002d8e; }
  .vol-h2 { margin: 34px var(--pad) 0; font-size: var(--h2); line-height: 1.12; }
  .vol-body { margin: 14px var(--pad) 0; font-size: var(--body); line-height: 1.5; max-width: 62ch; }

  .s-stats { padding: 30px var(--pad) 0; }
  .vol-impact { font-size: 18px; }
  .vol-line { width: 100%; height: 1px; margin-top: 11px; }
  .vol-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px 18px; margin-top: 26px; }
  .vol-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .vol-ico { position: relative; width: var(--ico); height: var(--ico); margin-bottom: 12px; flex: none; }
  .vol-ico > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: auto; height: 82%; }
  .vol-ico > .vol-ring     { left: 0; top: 0; width: 100%; height: 100%; transform: none; }
  .vol-ico > .vol-ring-tip { left: 15.27%; top: 0; width: 34.73%; height: 21.09%; transform: none; }
  .vol-n23 { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
  /* кегль цифри в кільці — від розміру кільця, як на десктопі (0.29 діаметра); був кегль великих цифр */
  .vol-n23 { font-size: var(--ring-num); }  /* спільний кегль цифр у кільцях (styles.css) */
  .vol-ico > .pct-ring { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
  /* Клієнт: «ці цифри більші?» — так: на мобільному тут лишався десктопний кегль 2.1875rem (35px),
     а на інших сторінках 26–30px. Тепер усі великі цифри Impact in Numbers — var(--num). */
  .vol-n1, .vol-n2, .vol-n3 { margin-bottom: 8px; font-size: var(--num); }
  .vol-c23, .vol-c1, .vol-c2, .vol-c3 { font-size: var(--cap); line-height: 1.35; }
  .vol-stat-23 { grid-column: auto; }  /* 2 per row (client) — 23% no longer spans full width */

  .s-scene { position: relative; margin-top: 26px; }
  .vol-stage { position: relative; width: 150%; margin-left: -25%; aspect-ratio: 1920 / 620; }
  .vol-stage > * { position: absolute; }
  .vol-water     { left: 46.875%; top: 51.2226%; width: 53.125%; height: 22.4062%; }
  .vol-shore     { left: 70.07%; top: 51.8537%; width: 29.59%; height: 18.3387%; }
  .vol-hill      { left: 0%; top: 58.7965%; width: 100%; height: 31.7334%; }
  .vol-mushroom  { left: 79.85%; top: 13.0724%; width: 17.32%; height: 66.307%; }
  .vol-ground    { left: 0%; top: 66.2302%; width: 96.6667%; height: 35.1697%; }
  .vol-shine     { left: -10.0700%; top: 66.2300%; width: 83.0100%; height: 46.7042%; mix-blend-mode: screen; mask-image: url(../vol-shine-mask.svg); -webkit-mask-image: url(../vol-shine-mask.svg); mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 116.5% 75.3%; -webkit-mask-size: 116.5% 75.3%; mask-position: 12.02% 0; -webkit-mask-position: 12.02% 0; }
  .vol-ripple    { left: 0%; top: 74.6457%; width: 100%; height: 16.7258%; }
  .vol-boat      { left: 26.51%; top: 34.8475%; width: 14.34%; height: 39.2021%; }
  .vol-glow-1    { left: 35.64%; top: 22.9956%; width: 6.78%; height: 20.9686%; }
  .vol-glow-2    { left: 86.24%; top: -11.6832%; width: 8.83%; height: 27.3153%; }
  .vol-plant-a   { left: 63.72%; top: 42.4565%; width: 3.64%; height: 19.3556%; }
  .vol-plant-b   { left: 94.01%; top: 40.8084%; width: 3.03%; height: 14.7271%; }
  .vol-plant-b2  { left: 67.5%; top: 48.733%; width: 3.03%; height: 14.692%; }
  .vol-plant-c   { left: 62.1%; top: 52.8706%; width: 1.93%; height: 9.3973%; }
  .vol-plant-d   { left: 76.56%; top: 47.4356%; width: 2.05%; height: 8.2752%; }
  .vol-plant-d2  { left: 71.03%; top: 50.6265%; width: 2.06%; height: 8.3103%; }
  .vol-plant-d3  { left: 59.54%; top: 54.4836%; width: 2.06%; height: 8.2752%; }
  .vol-plant-d4  { left: 91.57%; top: 44.9811%; width: 2.06%; height: 8.2752%; }
  .vol-lamp      { left: 47.63%; top: 19.9801%; width: 10.51%; height: 46.6358%; }
  .vol-glow-3    { left: 68.67%; top: 24.2229%; width: 3.39%; height: 10.6947%; }
  .vol-glow-4    { left: 55.04%; top: 3.1842%; width: 4.5%; height: 14.2011%; }
  .vol-glow-4b   { left: 58.91%; top: 23.4865%; width: 4.49%; height: 14.2011%; }
  .vol-glow-4c   { left: 42.81%; top: 5.1478%; width: 4.5%; height: 14.2011%; }
  .vol-glow-5    { left: 67.15%; top: 0.0284%; width: 6.29%; height: 19.8465%; }

  .s-pager { background: #9b40dc; padding: 26px var(--pad); display: flex; align-items: center; justify-content: center; gap: 12px; }
  .vol-band { display: none; }
  .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; }

  .s-header::before { background: linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%); }
}

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

  .vol-hero { aspect-ratio: 1920 / 800; --hf: 1; --hx: 0%; }
  .vol-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .vol-stat-23 { grid-column: auto; }
  .vol-stage { width: 120%; margin-left: -10%; }
}

@media (max-width: 767.98px) {
  /* нижня сцена: композиція з макета iPhone-8 (430x444.2, від y=487.8) */
  .vol-stage { width: 100%; margin-left: 0; aspect-ratio: 430 / 444.2; }
  .vol-glow-2, .vol-ripple, .vol-plant-b2, .vol-plant-d4 { display: none; }
  .vol-glow-5      { left: 48.6977%; top: 0%; width: 16.7674%; height: 16.5466%; z-index: 1; }
  .vol-glow-4c     { left: 20.907%; top: 6.6412%; width: 11.9767%; height: 11.8415%; z-index: 1; }
  .vol-glow-4b     { left: 36.4186%; top: 22.67%; width: 11.9767%; height: 11.8415%; z-index: 1; }
  .vol-glow-4      { left: 26.814%; top: 29.7614%; width: 11.9767%; height: 11.8415%; z-index: 1; }
  .vol-glow-3      { left: 50.814%; top: 38.2035%; width: 9.0233%; height: 8.9149%; z-index: 1; }
  .vol-glow-1      { left: 27.9535%; top: 41.3102%; width: 16.6512%; height: 16.1189%; z-index: 1; }
  .vol-mushroom    { left: 53.5581%; top: 12.742%; width: 62.1628%; height: 74.3584%; z-index: 2; }
  .vol-lamp        { left: -14.8605%; top: 35.7271%; width: 31.814%; height: 44.0792%; z-index: 2; }
  .vol-water       { left: -14.6977%; top: 55.0878%; width: 193.256%; height: 25.484%; z-index: 3; }
  .vol-shore       { left: 11.4651%; top: 63.9352%; width: 107.628%; height: 20.869%; z-index: 4; }
  .vol-hill        { left: -109.395%; top: 68.7753%; width: 287.954%; height: 28.5232%; z-index: 5; }
  .vol-shine       { left: -138.093%; top: 75.4615%; width: 238.814%; height: 42.0081%; z-index: 6; }
  .vol-ground      { left: -92.3721%; top: 77.5326%; width: 287.698%; height: 22.4674%; z-index: 7; }
  .vol-boat        { left: 5.5116%; top: 50.4052%; width: 35.2326%; height: 30.0991%; z-index: 8; }
  .vol-plant-a     { left: 51%; top: 48.7618%; width: 9.4884%; height: 15.7587%; z-index: 9; }
  .vol-plant-b     { left: 60.8605%; top: 53.8721%; width: 7.8837%; height: 11.9766%; z-index: 9; }
  .vol-plant-c     { left: 51.8372%; top: 57.249%; width: 5.0465%; height: 7.6542%; z-index: 9; }
  .vol-plant-d     { left: 90.9535%; top: 54.3899%; width: 5.3488%; height: 6.7312%; z-index: 9; }
  .vol-plant-d2    { left: 70.0465%; top: 55.4255%; width: 5.3488%; height: 6.7312%; z-index: 9; }
  .vol-plant-d3    { left: 40.1395%; top: 58.5547%; width: 5.3488%; height: 6.7312%; z-index: 9; }
}

/* Клієнт: «кільце не відповідає цифрі» (десктоп і телефон). vol-ring був універсальним кільцем на ~97%
   (та сама світла частина, що в hd-ring-tip). Тепер дугу малює CSS за відсотком (.pct-ring). */
.vol-ico { --ring-on: #FF9B00; --ring-off: #3F64B3; }
.vol-ring, .vol-ring-tip { display: none !important; }