body, .page { background: #ffeefc; }

@media (min-width: 1200px) {

  .page { height: 283.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; }

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

  /* z-index 1: біла дуга .lp-decor-a починається вище низу смуги і без цього лягала на навігацію (клієнт) */
  .lp-bar { left: 0; top: 0; width: 120rem; height: 10.75rem; background: #1a5edb; z-index: 1; }

  .lp-decor-a    { left: 5.5075rem; top: 8.75188rem; width: 39.7137rem; height: 78.4356rem; }
  .lp-decor-b    { left: 73.3125rem; top: 85.47rem; width: 39.7137rem; height: 78.4356rem; }
  .lp-decor-c    { left: 6.5725rem; top: 188.086rem; width: 39.7137rem; height: 78.4356rem; }
  .lp-decor-a > img, .lp-decor-c > img { transform: scaleX(-1); }

  .lp-h1     { left: 18.1875rem; top: 18.4688rem; width: 83.625rem; }
  .lp-body-1 { left: 18.1875rem; top: 24.0356rem; width: 62.25rem; }
  .lp-body-2 { left: 53.8125rem; top: 94.5625rem; width: 48rem; }
  .lp-body-3 { left: 18.1875rem; top: 180.704rem; width: 49.875rem; }
  .lp-body-4 { left: 51.9375rem; top: 217.079rem; width: 49.875rem; }

  .lp-ph-hero    { left: 0rem; top: 37.7856rem; width: 120rem; height: 53.5894rem; }
  .lp-ph-hero > img { left: 0rem; top: -22.2263rem; width: 120rem; height: 80.0097rem; }
  .lp-ph-1       { left: 0rem; top: 128.188rem; width: 69.4163rem; height: 46.2662rem; }
  .lp-ph-1 > img { left: 0; top: 0; width: 100%; height: 100%; }
  .lp-ph-2       { left: 71.2913rem; top: 128.188rem; width: 48.7086rem; height: 46.2662rem; }
  .lp-ph-2 > img { left: -14.705rem; top: 0; width: 69.4163rem; height: 46.2662rem; }
  .lp-ph-3       { left: 71.2913rem; top: 180.704rem; width: 48.7086rem; height: 30.125rem; }
  .lp-ph-3 > img { left: -12.2287rem; top: -0.375rem; width: 60.9375rem; height: 40.6151rem; }
  .lp-ph-4       { left: 0rem; top: 217.079rem; width: 48.7086rem; height: 33.375rem; }
  .lp-ph-4 > img { left: -4.76625rem; top: -2.26625rem; width: 53.4749rem; height: 35.6412rem; }
  .lp-strip { left: 71.2913rem; top: 171.204rem; width: 48.7086rem; height: 3.25rem; background: #fff; opacity: .7; }
  .lp-cap   { left: 81.625rem; top: 172.391rem; width: 37.125rem; }

  .lp-q-bg       { left: 18.1875rem; top: 87.1875rem; width: 33.75rem; height: 37.5rem; background: #002d8e; }
  .lp-q-text { left: 21.4375rem; top: 95.782rem; width: 27.25rem; }
  .lp-q-attr { left: 21.75rem; top: 110.595rem; width: 26.625rem; }

  .lp-puzzle-top { left: 82.3125rem; top: 17.13rem; width: 27.25rem; height: 26.4375rem; }
  .lp-fig-pink   { left: 8.78375rem; top: 112.642rem; width: 12.9661rem; height: 12.2317rem; }
  .lp-fig-pink > img { width: 10.7526rem; height: 11.6119rem; transform: rotate(-82.19deg); }
  .lp-fig-tooth  { left: 65.7494rem; top: 146.309rem; width: 15.645rem; height: 15.8361rem; }
  .lp-fig-tooth > .lp-tooth-inner { position: relative; flex: none; width: 12.1875rem; height: 12.5rem; transform: rotate(19.38deg); }
  .lp-fig-orange { left: 68.0625rem; top: 202.314rem; width: 15.0942rem; height: 14.0929rem; }
  .lp-fig-orange > img { width: 9.8125rem; height: 12rem; transform: rotate(-116.12deg); }
  .lp-fig-book   { left: 21.3681rem; top: 212.127rem; width: 14.0783rem; height: 11.1472rem; }
  .lp-fig-book > img { width: 12.7544rem; height: 9.19894rem; transform: rotate(-9.34deg); }

  .footer-bg      { top: 256.8125rem; }
  .f-line-top     { top: 262.976875rem; }
  .f-line-bottom  { top: 277.96875rem; }
  .f-logo         { top: 266.155438rem; }
  .f-fb, .f-ig, .f-tt, .f-web { top: 273.409975rem; }
  .f-li           { top: 273.532437rem; }
  .f-divider      { top: 266.164975rem; }
  .f-head-services, .f-head-stories { top: 266.164975rem; }
  .f-c1-1, .f-c2-1, .f-c3-1 { top: 268.389975rem; }
  .f-c1-2, .f-c3-2 { top: 270.347475rem; }
  .f-c2-2         { top: 270.327475rem; }
  .f-c1-3, .f-c3-3 { top: 272.284975rem; }
  .f-c2-3         { top: 272.264975rem; }
  .f-c1-4, .f-c3-4 { top: 274.222475rem; }
  .f-legal        { top: 279.91rem; }

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

.lp-h1, .lp-body-1, .lp-body-2, .lp-body-3, .lp-body-4,
.lp-q-text, .lp-q-attr, .lp-cap {
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic; overflow-wrap: break-word;
}

.lp-h1 { font-weight: 700; font-size: 3.4375rem; line-height: normal; color: #1a5edb; }
.lp-copy { font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000;
           white-space: pre-wrap; }
/* body-1 & body-2 are split into <p> so photos can sit between paragraphs */
.lp-body-1, .lp-body-2 { white-space: normal; }
.lp-body-1 > p, .lp-body-2 > p { margin: 0; }
.lp-fig-inline { position: relative; }
.lp-q-text { font-weight: 600; font-size: 2.25rem; line-height: normal; color: #fff; text-align: center; }
.lp-q-attr { font-weight: 500; font-style: italic; font-size: 1.5625rem; line-height: normal;
             color: #fff; text-align: center; }
.lp-cap { font-weight: 600; font-size: 1.125rem; line-height: normal; color: #000; text-align: right; }

.lp-tooth-inner > img { position: absolute; display: block; }
.lp-tooth-1 { left: 0;       top: 0;       width: 100%;   height: 100%; }
.lp-tooth-2 { left: 25.54%;  top: 30.59%;  width: 48.25%; height: 6.76%; }
.lp-tooth-3 { left: 38.61%;  top: 45.95%;  width: 22.08%; height: 9.16%; }
.lp-tooth-4 { left: 18.85%;  top: 41.13%;  width: 61.62%; height: 7.05%; }

.lp-frame { overflow: hidden; }
.lp-frame > img { position: absolute; display: block; object-fit: cover; pointer-events: none; }

@media (max-width: 1199.98px) {

  .page { display: flex; flex-direction: column; }
  .lp-decor-a, .lp-decor-b, .lp-decor-c, .lp-strip { display: none; }

  .lp-bar { position: relative; order: 0; width: 100%; height: 72px; background: #1a5edb; }
  .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; }

  .s-sec, .s-decor { position: relative; }
  .s-intro  { order: 1; } .s-hero  { order: 2; } .s-quote { order: 3; }
  .s-body2  { order: 4; } .s-ph1   { order: 5; } .s-ph2   { order: 6; }
  .s-body3  { order: 7; } .s-ph3   { order: 8; } .s-body4 { order: 9; }
  .s-ph4    { order: 10; } .s-footer { order: 20; }

  .lp-h1, .lp-body-1, .lp-body-2, .lp-body-3, .lp-body-4,
  .lp-q-text, .lp-q-attr, .lp-cap,
  .lp-frame, .lp-q-bg, .lp-quote-a, .lp-quote-b,
  .lp-puzzle-top, .lp-fig-pink, .lp-fig-tooth, .lp-fig-orange, .lp-fig-book {
    position: relative; left: auto; top: auto; right: auto;
    width: auto; height: auto;
  }

  .s-intro { padding: 30px var(--pad) 22px; }
  /* Пазл зменшено 108 -> 92px, а відступ заголовка лишився 104px. Раніше пазл був
     ШИРШИЙ за відступ — звідси дотик до тексту. Тепер 104 > 92, тож рядок
     "Lightening the" влазить цілком, а до пазла лишається ~15px. */
  /* min-height резервує під пазл ще й ВИСОТУ: інакше при короткому заголовку
     (1-2 рядки на широкому екрані) абзац піднімався б під пазл. */
  /* Відступ рахуємо від ВИДИМОГО краю пазла, а не від його коробки: анімація вилазить
     за коробку на 5.4% (--lx у styles.css), тож резервуємо --pz * 1.055, і ще +20px —
     це і є гарантована щілина. Тепер рядок заголовка фізично не може підійти ближче
     ніж на 20px, хоч як він переноситься: раніше відступ (--pz + 12) був МЕНШИЙ за
     видимий розмір пазла, і на ширинах, де заголовок перескакував у 2 рядки,
     щілина падала до 10px. */
  .lp-h1 { font-size: var(--h1); line-height: 1.12; padding-right: calc(var(--pz) * 1.055 + 28px);
           min-height: calc(var(--pz) * 0.99 + 38px); margin-bottom: 6px; }
  /* min-height резервує ВИСОТУ пазла так само, як padding-right резервує ширину.
     Пазл висить з top:62px, його висота = --pz * 423/436, плюс лотті вилазить вниз
     ще на 2% (--ly/--lh) -> низ = 4px + --pz*0.99. Абзац починається на
     30(padding) + висота_заголовка + 6 + 16. Звідси формула дає гарантовані ~28px
     (при зсуві пазла вниз на 22px резерв висоти зріс рівно на стільки ж)
     між низом пазла й першим рядком абзацу — раніше (--pz - 50px) при короткому
     заголовку в 2 рядки не спрацьовувало, і рядок «...Mdm Aminah is» заходив під
     нижній кут пазла. */
  .lp-body-1 { margin-top: 16px; }
  .lp-copy { font-size: var(--body); line-height: 1.5; }

  /* photos interleaved inside the copy — hide the standalone sections, space the paragraphs */
  .s-hero, .s-ph1 { display: none; }
  .lp-body-1 > p ~ p, .lp-body-2 > p ~ p { margin-top: 1.9em; }
  .lp-fig-inline { margin: 20px 0; }
  .lp-ph-hero-m { aspect-ratio: 1920 / 858; }
  .lp-ph-1-m { aspect-ratio: 1110 / 740; }

  /* standalone photo sections inset like the interleaved photos (client: consistent margin) */
  .s-hero, .s-ph1, .s-ph2, .s-ph3 { padding: 0 var(--pad); }
  .s-ph4 { padding: 0 var(--pad) 24px; }
  .lp-cap { margin: 10px 0 0; }

  /* заокруглені кути, як на фото інших історій на мобільному (клієнт) */
  .lp-frame { width: 100%; overflow: hidden; border-radius: 18px; }
  .lp-frame > img { position: relative; width: 100%; height: 100%; }
  .lp-ph-hero { aspect-ratio: 1920 / 858; }
  .lp-ph-1, .lp-ph-2 { aspect-ratio: 1110 / 740; }
  .lp-ph-3 { aspect-ratio: 779 / 482; }
  .lp-ph-4 { aspect-ratio: 779 / 534; }
  /* без бічного відступу: секції з фото вже мають padding: 0 var(--pad),
     інакше підпис відступав від фото на подвійний --pad */
  .lp-cap { margin: 10px 0 0; font-size: var(--cap); text-align: left; }

  .s-quote { margin: 28px var(--pad) 0; background: #002d8e; padding: 30px 24px 34px; }
  .lp-q-bg { display: none; }
  .lp-q-text { font-size: 22px; }
  .lp-q-attr { font-size: 17px; margin-top: 18px; }

  .s-body2, .s-body3, .s-body4 { padding: 22px var(--pad); }

  .s-intro, .s-quote, .s-ph2, .s-body4, .s-ph4 { position: relative; }
  /* Пазл притиснутий до правого краю, а заголовок вирівняний вліво — тож на ширшому
     екрані між ними росте порожнеча (на 430-560 доходило до 70-76px). Тому ширина
     пазла росте разом з екраном: його лівий край іде назустріч тексту. Відступ
     заголовка рахується з тієї ж змінної, тож дотику бути не може. */
  /* Клієнт: «пазл торкається тексту, зроби трохи меншим».
     Причина була не в розмірі як такому: лотті-анімація вилазить за свою коробку на
     5.426% вліво (див. --lx у styles.css), тобто при 152px це ще 8px, яких у розрахунку
     не було. Тому міряти треба не коробку, а видимий край: він = коробка + 5.426%.
     Звідси множник 0.948 (=1/1.0543) у середньому члені: скільки б не було місця,
     ширину беремо таку, щоб ВИДИМИЙ край стояв за ~20px від заголовка.
     Стеля 144px замість 152 — щоб на 440px множник не впирався в неї передчасно;
     вище 144 не піднімати, інакше пазл звисає під заголовок і накриває перший абзац. */
  /* Підлога 92 -> 84: на вузьких екранах (320-380) множник ще не діє, розмір тримає
     саме підлога, і видима щілина там була 10-13px. З 84px стає 18-21px. */
  /* Клієнт: «ще меншим». Пазл зменшено приблизно на 15%: стеля 144 -> 132,
     підлога 84 -> 78. Нижче підлогу не опускати — на 375px тоді не влазить
     рядок «Lightening the» (йому треба 220px, а колонка стає вужчою). */
  :root { --pz: clamp(68px, calc((100vw - 288px) * 0.70), 104px); }
  /* Клієнт: верхня точка пазла має бути РІВНО на рівні верху заголовка — однаковий
     відступ від шапки. Заміряно: верх заголовка (text-box-trim, тобто по вершині літер)
     стоїть на 62px від краю секції, а лотті починає малювати на 2px вище за свою
     коробку (--ly), тож хост ставимо на 62px і верхні краї збігаються.
     Було 47px (пропорція з десктопного макета), до того 4px. */
  .lp-puzzle-top { position: absolute; right: var(--pad); top: 62px; width: var(--pz); z-index: 2; }

  /* Підйом пазла окремим маржином (за рішенням клієнта). Число різне, бо потрібний
     зсув залежить від того, скільки рядків займає заголовок. Межі заміряні:
     <=459px — 3-4 рядки, 460-689px — 2 рядки, >=690px — 1 рядок.
     Крутити тут, в одному місці: --pz-up. Десктоп (>=1200px) не зачеплений. */
  :root { --pz-up: 35px; }
  .lp-puzzle-top > .lot-in { margin-top: calc(var(--pz-up) * -1); }
  .lp-fig-pink   { position: absolute; left: -14px; bottom: -26px; width: 96px; z-index: 2; }
  .lp-fig-tooth  { position: absolute; right: 10px; bottom: 42px; width: 104px; z-index: 2; }
  .lp-fig-orange { position: absolute; right: 10px; top: -98px; width: 104px; z-index: 2; }
  .lp-fig-book   { position: absolute; left: 14px; bottom: -22px; width: 112px; z-index: 2; }
  .lp-puzzle-top > img, .lp-puzzle-top > .lot-in,
  .lp-fig-pink > img, .lp-fig-orange > img, .lp-fig-book > img,
  .lp-fig-tooth > .lp-tooth-inner {
    width: 100%; height: auto; transform: none;
  }
  .lp-fig-tooth > .lp-tooth-inner { position: relative; aspect-ratio: 195 / 200; }
}

@media (min-width: 460px) and (max-width: 767.98px) {
  /* заголовок уже в 2 рядки (від 690px — в 1), тому підйом менший — інакше пазл
     вилазить надто високо. Значення підбирається на око в браузері клієнта. */
  :root { --pz-up: 18px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  /* Планшет має власне правило для пазла (нижче). Було top: -8px — пазл стояв на 68px
     ВИЩЕ за заголовок, тобто заїжджав під синю шапку. Тепер top збігається з верхом
     заголовка (60px від краю секції), а підйом — та сама ручка, що й на телефоні. */
  :root { --pz-up: 35px; }
  .lp-bar { height: 104px; }
  .s-quote { max-width: 620px; margin-left: auto; margin-right: auto; padding: 40px 34px 44px; }
  .lp-q-text { font-size: 30px; }
  .lp-q-attr { font-size: 21px; }
  .lp-puzzle-top { width: 134px; top: 60px; }
  .lp-h1 { padding-right: 160px; }
  .lp-fig-pink, .lp-fig-tooth, .lp-fig-orange, .lp-fig-book { width: 150px; }

  .lp-fig-pink   { left: -112px; bottom: 12px; }
  .lp-fig-orange { top: -168px; }
  .lp-fig-tooth  { bottom: 56px; }
  .lp-fig-book   { bottom: -34px; }
}

/* Previous / Next (десктоп) — кнопки під контентом перед футером (макет клієнта).
   Тут нижче за фото закінчується текст .lp-body-4 (~253.5rem на 1280), тож футер опущено на 3rem:
   кнопки стоять по центру між текстом і футером, з тими ж ~1.75rem, що й на інших історіях. */
@media (min-width: 1200px) {
  .page { height: 286.0625rem; }
  .s-footer { top: 3rem; }
  .nav-next, .nav-prev-arrow { top: 255.175rem; }
  .nav-prev-label { top: 256.2375rem; }
}

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

/* Планшетна розкладка (зокрема телефон у ландшафті): текст під заголовком обтікає пазл (main.js),
   тож резервувати під ілюстрацію висоту біля заголовка не треба — інакше при заголовку в один рядок
   під ним лишався великий проміжок (клієнт, ландшафт; на 1024px було до 107px). */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .lp-h1 { min-height: 0; }
}

/* Цитата: замість великої ажурної ілюстрації — прості лапки того самого накреслення, відкривальна
   й закривальна, трохи менші (клієнт, зі зразком). Малюнок один (assets/quote-mark.svg), закривальна —
   той самий, повернутий на 180°. Колір задаємо фоном крізь маску, тож лапки білі з прозорістю.
   Правила лише всередині медіазапитів: на десктопі блакитний блок це .lp-q-bg, на вужчих — .s-quote. */
@media (min-width: 1200px) {
  .lp-q-bg { position: absolute; }
  .lp-q-bg::before, .lp-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;
  }
  .lp-q-bg::before { left: 1.75rem;  top: 1.5rem; }
  .lp-q-bg::after  { right: 1.75rem; bottom: 1.5rem; transform: rotate(180deg); }
}
@media (max-width: 1199.98px) {
  .s-quote { position: relative; }
  .s-quote::before, .s-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;
  }
  .s-quote::before { left: 12px;  top: 10px; }
  .s-quote::after  { right: 12px; bottom: 10px; transform: rotate(180deg); }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .s-quote::before, .s-quote::after { width: 96px; }
}
@media (min-width: 768px) and (max-width: 1199.98px) and (max-height: 500px) {
  .s-quote::before, .s-quote::after { width: 68px; }
}