body, .page { background: #ffeefc; }

.bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bg-yes > img { position: absolute; }
.bg-yes-a { left: 2.48%;  top: 2.14%;  width: 97.51%; height: 97.8%; }
.bg-yes-b { left: 0;      top: 0;      width: 97.57%; height: 100%; }
.bg-yes-c { left: 21.23%; top: 20.66%; width: 55.99%; height: 45.57%; }
.bg-yes-m > img { position: absolute; }
.bg-fig-4m { display: none; }  /* mobile-only: action photo with the "Yes!" bubble on it */

@media (min-width: 1200px) {

  .page { height: 316.5625rem; }

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

  .s-intro { z-index: 2; }
  .rot-box { display: flex; align-items: center; justify-content: center; }
  .rot-box > img, .rot-box > div { flex: none; }

  .bg-bar { left: 0; top: 0; width: 120rem; height: 10.75rem; background: #1a5edb; }

  .annual-report { font-weight: 500; }

  .bg-leaf-1 { left: -12.876rem; top: 197.8199rem; width: 54.192rem; height: 58.4374rem; transform: scaleX(-1); }
  .bg-leaf-2 { left: 0;             top: 12.1243rem;  width: 54.1848rem; height: 58.4374rem; transform: scaleX(-1); }
  .bg-leaf-3 { left: 74.46rem;  top: 96.5833rem; width: 54.192rem; height: 58.4374rem; }
  .bg-leaf-1 > img, .bg-leaf-2 > img, .bg-leaf-3 > img { position: absolute; inset: 0; width: 100%; height: 100%; }

  .bg-h1     { left: 18.1875rem; top: 18.4688rem;  width: 83.625rem; }
  .bg-intro  { left: 18.1875rem; top: 24.0356rem; width: 62.25rem; }
  .bg-body-1 { left: 53.8125rem; top: 121.4419rem; width: 48rem; transform: translateY(-100%); }
  .bg-body-2 { left: 18.1875rem; top: 180.7039rem; width: 49.8625rem; }
  .bg-cap    { right: 1.25rem; top: 172.3914rem; }
  /* Біла смуга .bg-strip лежить у тій самій секції, що й фото з підписом (порядок: фото → смуга → підпис).
     Коли вона була в .s-photos, то або перекривала підпис, або (з z-index секції) ховалась під фото. */
  .s-ph1 { z-index: 2; }
  .bg-strip  { left: 50.5837rem; top: 171.2039rem; width: 69.4164rem; height: 3.25rem; background: #fff; opacity: .7; }

  .bg-ph-main { left: 0; top: 18.1899rem; width: 120rem; height: 80.0098rem;
                 mask-image: url(../bg-mask-main.svg); -webkit-mask-image: url(../bg-mask-main.svg);
               mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
               mask-size: 120rem 53.5894rem; -webkit-mask-size: 120rem 53.5894rem;
               mask-position: 0rem 16.3502rem; -webkit-mask-position: 0rem 16.3502rem; }
  .bg-ph-1 { right: 0; top: 128.1875rem; width: 69.4163rem; height: 46.2662rem; }
  .bg-ph-3 { right: 61.6649rem; top: 128.1875rem; width: 69.4163rem; height: 46.2662rem;
              mask-image: url(../bg-mask-3.svg); -webkit-mask-image: url(../bg-mask-3.svg);
               mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
               mask-size: 48.7086rem 46.2662rem; -webkit-mask-size: 48.7086rem 46.2662rem;
               mask-position: 11.0812rem 0rem; -webkit-mask-position: 11.0812rem 0rem; }
  .bg-ph-5 { left: 71.2914rem; top: 180.7039rem; width: 48.7086rem; height: 32.4645rem;
              mask-image: url(../bg-mask-5.svg); -webkit-mask-image: url(../bg-mask-5.svg);
               mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
               mask-size: 48.7086rem 27.9375rem; -webkit-mask-size: 48.7086rem 27.9375rem;
               mask-position: 0rem 0rem; -webkit-mask-position: 0rem 0rem; }
  .bg-ph-6 { left: 71.2908rem; top: 209.8383rem; width: 48.7092rem; height: 32.4649rem;
              mask-image: url(../bg-mask-5.svg); -webkit-mask-image: url(../bg-mask-5.svg);
               mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
               mask-size: 48.7086rem 27.9375rem; -webkit-mask-size: 48.7086rem 27.9375rem;
               mask-position: 0.0006rem 0.6781rem; -webkit-mask-position: 0.0006rem 0.6781rem; }
  .bg-ph-4 { left: 0; top: 244.7039rem; width: 59.0625rem; height: 39.3654rem;
              mask-image: url(../bg-mask-4.svg); -webkit-mask-image: url(../bg-mask-4.svg);
               mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
               mask-size: 59.0625rem 39.3654rem; -webkit-mask-size: 59.0625rem 39.3654rem;
               mask-position: 0rem 0rem; -webkit-mask-position: 0rem 0rem; }
  .bg-ph-d2 { left: 60.9375rem; top: 224.4575rem; width: 59.0625rem; height: 88.6081rem;
               mask-image: url(../bg-mask-d2.webp); -webkit-mask-image: url(../bg-mask-d2.webp);
               mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
               mask-size: 59.0625rem 39.3654rem; -webkit-mask-size: 59.0625rem 39.3654rem;
               mask-position: 0rem 20.2463rem; -webkit-mask-position: 0rem 20.2463rem; }

  .bg-q-bg   { left: 18.1875rem;     top: 83.9419rem; width: 33.75rem; height: 37.5rem; background: #002d8e; }
  .bg-q-text { left: 21.4375rem;     top: 91.5055rem; width: 27.25rem; }
  .bg-q-attr { left: 21.75rem;     top: 108.3805rem; width: 26.625rem; }

  .bg-balloons { left: 84.5rem; top: 14.4106rem; width: 28.5625rem; height: 26.625rem; }
  .bg-person { left: 1.625rem; top: 108.0508rem; width: 18.7014rem; height: 20.5328rem; }
  .bg-person > div { position: relative; width: 18.0113rem; height: 19.9106rem;
                      overflow: hidden; transform: rotate(-2.02deg); }
  .bg-person > div > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .bg-ball-1 { left: 26.4375rem;  top: 123.9583rem; width: 4.625rem; height: 4.625rem; }
  .bg-ball-2 { left: 100.25rem; top: 123.9583rem; width: 4.625rem; height: 4.625rem; }
  .bg-yes { left: 38.729rem; top: 240.3125rem; width: 15.0838rem; height: 11.9125rem; overflow: hidden; }

  .footer-bg     { top: 290.3125rem; }
  .f-line-top    { top: 296.54rem; }
  .f-line-bottom { top: 311.535rem; }
  .f-logo        { left: 18.192rem; top: 299.6581rem; }
  .f-fb, .f-ig, .f-tt, .f-web { top: 306.91rem; }
  .f-li          { top: 307.0324rem; }
  .f-divider     { top: 299.665rem; }
  .f-head-services, .f-head-stories { top: 299.665rem; }
  .f-c1-1, .f-c2-1, .f-c3-1 { top: 301.89rem; }
  .f-c1-2, .f-c3-2 { top: 303.8475rem; }
  .f-c2-2 { top: 303.8275rem; }
  .f-c1-3, .f-c3-3 { top: 305.785rem; }
  .f-c2-3 { top: 305.765rem; }
  .f-c1-4, .f-c3-4 { top: 307.7225rem; }
  .f-legal { top: 313.41rem; }

  .bg-fig-inline { display: none; }
  /* Відступ у em і саме такий великий: у цих блоків стоїть text-box-trim, який зрізає
     напівінтерліньяж зверху й знизу кожного абзацу, тож більша частина відступу
     з'їдалась. При 1.625rem/16px розрив був більший за міжрядковий інтервал лише
     на 10.5px (десктоп) і 2.4px (мобільний) — тобто на мобільному його не було видно. */
  .bg-body-2 > p ~ p { margin-top: 1.9em; }
}

.bg-h1, .bg-cap, .bg-q-text, .bg-q-attr, .bg-intro, .bg-body-1, .bg-body-2 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
  overflow-wrap: break-word;
}
.bg-h1 { font-weight: 700; font-size: 3.4375rem; line-height: normal; color: #1a5edb; }
.bg-intro, .bg-body-1, .bg-body-2 {
  font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000;
  white-space: pre-wrap;
}
/* body-2 split into <p> so photos can slot between paragraphs */
.bg-body-2 { white-space: normal; }
.bg-body-2 > p { margin: 0; }
.bg-cap { font-weight: 600; font-size: 1.125rem; line-height: normal; color: #000;
           text-align: right; white-space: nowrap; }
.bg-q-text { font-weight: 600; font-size: 2.25rem; line-height: normal; color: #fff; text-align: center; }
.bg-q-attr { font-weight: 500; font-style: italic; font-size: 1.5625rem; line-height: normal; color: #fff; text-align: center; }

@media (max-width: 1199.98px) {

  .s-sec, .s-decor { position: static; width: auto; height: auto; z-index: auto; }
  .rot-box { display: block; }

  .page { display: flex; flex-direction: column; }
  .bg-bar    { order: 0; height: 72px; background: #1a5edb; }
  .s-intro   { order: 1; }
  .s-phmain  { order: 2; }
  .s-quote   { order: 3; }
  .s-body1   { order: 4; }
  .s-ph1     { order: 5; }
  .s-body2   { order: 6; }
  .s-photos  { order: 7; }
  .s-footer  { order: 20; }
  .s-decor   { display: none; }

  .s-header::before { background: none; }
  .nav-logo, .nav-menu .nav-chev, .nav-burger span { filter: none; }
  .nav-menu .nav-item, .annual-report { text-shadow: none; }

  .bg-ball-1, .bg-ball-2, .bg-person, .bg-strip { display: none; }

  .s-intro { position: relative; padding: 30px var(--pad) 0; }
  .bg-h1 { font-size: var(--h1); line-height: 1.12; padding-right: 104px; margin-bottom: 10px; }
  .bg-intro { margin-top: 16px; }

  /* the three boccia balls stack top-right beside the title (client: "balls missing")
     Група притиснута до заголовка настільки, наскільки дозволяє геометрія кола: найтісніша
     точка — біла куля й рядок «Beyond the Game», 14px. Далі ліворуч — наїзд на текст. */
  .bg-pile { position: absolute; z-index: 2; width: 50px; height: auto; }
  .bg-pile-blue   { right: 46px; top: 30px; }
  .bg-pile-white  { right: 72px; top: 60px; }
  .bg-pile-purple { right: 36px; top: 72px; }
  .bg-intro, .bg-body-1, .bg-body-2 { font-size: var(--body); line-height: 1.5; }
  .s-body1, .s-body2 { padding: 26px var(--pad) 0; }

  .bg-balloons { position: absolute; right: var(--pad); top: 6px; width: 96px; height: auto; }

  .bg-figure { margin: 26px var(--pad) 0; }
  .bg-frame { position: relative; width: 100%; overflow: hidden; border-radius: 18px;
               mask-image: none; -webkit-mask-image: none; }
  .bg-ph-main { aspect-ratio: 1920 / 858; }
  .bg-ph-1, .bg-ph-3 { aspect-ratio: 1110 / 740; }
  .bg-ph-5, .bg-ph-6 { aspect-ratio: 779 / 447; }
  .bg-ph-4, .bg-ph-d2 { aspect-ratio: 945 / 630; }

  /* three bottom photos now slotted between body-2 paragraphs (client) */
  .s-photos .bg-figure:not(.bg-fig-4m) { display: none; }
  .bg-fig-inline { display: block; margin: 24px 0; }
  .bg-body-2 > p ~ p { margin-top: 1.9em; }
  .bg-ph-3m { aspect-ratio: 1110 / 740; }
  .bg-ph-5m, .bg-ph-6m { aspect-ratio: 779 / 447; }
  /* Підпис належить фото з чотирма лідерами (bg-photo-1), а не дії з кулями — тож у
     розмітці він тепер стоїть у секції s-ph1 одразу під тим фото (клієнт). На десктопі
     він як і був позиційований абсолютно й лежить на нижньому краї того самого фото. */
  .bg-cap { margin: 10px var(--pad) 0; font-size: var(--cap);
            text-align: left; white-space: normal; }

  /* the floating Yes! is replaced by one sitting on the action photo (client: like desktop) */
  .bg-yes { display: none; }
  .bg-fig-4m { display: block; position: relative; margin: 26px var(--pad) 0; }
  .bg-ph-4m { aspect-ratio: 945 / 630; }
  /* «Yes!» удвічі менший (116 -> 60px = 15.7% ширини фото) і зсунутий так, щоб хвостик
     указував на бабусю, яка кидає кулю (клієнт). Розмір і позиція у ВІДСОТКАХ фото, а не в
     пікселях: інакше на вужчому екрані бульбашка з'їжджала б на чиєсь обличчя. */
  .bg-yes-m { position: absolute; top: -4px; right: 20.4%; width: 15.7%; aspect-ratio: 150 / 118; z-index: 3; }

  .bg-quote { margin: 30px var(--pad) 0; background: #002d8e; padding: 26px 22px 30px; }
  .bg-q-text { font-size: 22px; }
  .bg-q-attr { font-size: 17px; margin-top: 18px; }
  .s-photos { padding-bottom: 40px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .bg-bar { height: 104px; }
  .bg-balloons { width: 170px; top: 12px; }
  .bg-h1 { padding-right: 190px; }
  .bg-figure { margin-top: 40px; }
  .bg-q-text { font-size: 30px; }
  .bg-q-attr { font-size: 21px; }
  .bg-quote { padding: 40px 36px 44px; }
  .bg-yes { width: 220px; height: 174px; }
}

/* Previous / Next (десктоп) — кнопки під контентом перед футером (макет клієнта).
   Під фото вже є проміжок до футера — кнопки по центру в ньому, футер на місці. */
@media (min-width: 1200px) {
  .nav-next, .nav-prev-arrow { top: 285.6909rem; }
  .nav-prev-label { top: 286.7534rem; }
}

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

/* Цитата: замість великої ажурної ілюстрації — прості лапки того самого накреслення, відкривальна
   й закривальна, трохи менші (клієнт, зі зразком). Малюнок один (assets/quote-mark.svg), закривальна —
   той самий, повернутий на 180°. Колір задаємо фоном крізь маску, тож лапки білі з прозорістю.
   Правила лише всередині медіазапитів: на десктопі блакитний блок це .bg-q-bg, на вужчих — .bg-quote. */
@media (min-width: 1200px) {
  .bg-q-bg { position: absolute; }
  .bg-q-bg::before, .bg-q-bg::after {
    content: ""; position: absolute; z-index: 0; width: 8rem; aspect-ratio: 200 / 150;
    background: #fff; opacity: .32; pointer-events: none;
    -webkit-mask: url(../quote-mark.svg) no-repeat center / contain;
            mask: url(../quote-mark.svg) no-repeat center / contain;
  }
  .bg-q-bg::before { left: 1.75rem;  top: 1.5rem; }
  .bg-q-bg::after  { right: 1.75rem; bottom: 1.5rem; transform: rotate(180deg); }
}
@media (max-width: 1199.98px) {
  .bg-quote { position: relative; }
  .bg-quote::before, .bg-quote::after {
    content: ""; position: absolute; z-index: 0; width: 68px; aspect-ratio: 200 / 150;
    background: #fff; opacity: .32; pointer-events: none;
    -webkit-mask: url(../quote-mark.svg) no-repeat center / contain;
            mask: url(../quote-mark.svg) no-repeat center / contain;
  }
  .bg-quote::before { left: 12px;  top: 10px; }
  .bg-quote::after  { right: 12px; bottom: 10px; transform: rotate(180deg); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .bg-quote::before, .bg-quote::after { width: 96px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 500px) {
  .bg-quote::before, .bg-quote::after { width: 68px; }
}