body, .page { background: #ffeefc; }

.fc-hello-a { position: absolute; left: 0; top: 0; width: 100.01%; height: 100%; }
.fc-hello-b { position: absolute; left: 15.15%; top: 11.38%; width: 71.3%; height: 56.53%; }

.fc-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

@media (min-width: 1200px) {

  .page { height: 303.5625rem; }

  .s-sec, .s-decor { position: absolute; left: 0; top: 0; width: 100%; height: 0; }
  .s-sec   { z-index: 1; }
  /* Секція з текстом і книжками — над секцією з фото. Просто z-index на самих книжках
     не спрацює: кожна .s-sec з z-index створює власний контекст накладання, тож
     дитина не може піднятись над сусідньою секцією. */
  .s-intro { z-index: 2; }
  .s-decor { z-index: 0; }
  .rot-box { display: flex; align-items: center; justify-content: center; }
  .rot-box > img, .rot-box > div { flex: none; }
  /* figures hold absolute frames; kill the default <figure> margin so the ones now inside
     fc-body-2 don't push the desktop text paragraphs apart */
  .fc-figure { margin: 0; }

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

  .fc-swoosh { width: 58.5rem; height: 38.1882rem; mask-image: url(../fc-swoosh-mask.svg); -webkit-mask-image: url(../fc-swoosh-mask.svg);
                 mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
                 mask-size: 58.5rem 38.1875rem; -webkit-mask-size: 58.5rem 38.1875rem;
                 mask-position: 0rem 0rem; -webkit-mask-position: 0rem 0rem; }
  .fc-swoosh > img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .fc-swoosh-1 { left: 48.372rem;  top: 204.7226rem; transform: scaleX(-1);
                  mask-position: -0.0012rem 0; -webkit-mask-position: -0.0012rem 0; }
  .fc-swoosh-2 { left: -8.928rem; top: 159.6435rem; }
  .fc-swoosh-3 { left: 72.564rem; top: 81.8101rem; transform: scaleX(-1);
                  mask-position: -0.0012rem 0; -webkit-mask-position: -0.0012rem 0; }
  .fc-swoosh-4 { left: -9.372rem; top: 12.9317rem; }

  .fc-h1     { left: 18.1875rem; top: 18.4688rem;  width: 83.625rem; }
  .fc-intro  { left: 18.1875rem; top: 23.9106rem; width: 62.25rem; }
  .fc-body-1 { left: 53.8125rem; top: 99.8125rem;   width: 48rem; }
  .fc-body-2 { left: 18.1875rem; top: 180.7038rem; width: 49.8625rem; }
  /* Підпис має лежати НАД світлою смугою (.fc-strip — білий прямокутник з opacity .7,
     що йде далі в розмітці). Без цього смуга малювалась поверх тексту й чорний ставав
     сірим (#B3B3B3) — клієнт, нота 3 до стор. 3. */
  .fc-cap    { right: 51.8338rem; top: 172.3913rem; z-index: 1; }

  .fc-ph-main { left: 0; top: 22.3472rem; width: 120rem; height: 80.0098rem;
                 mask-image: url(../fc-mask-main.svg); -webkit-mask-image: url(../fc-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 15.8135rem; -webkit-mask-position: 0rem 15.8135rem; }
  .fc-ph-1 { left: 0; top: 128.1875rem; width: 69.4163rem; height: 46.2662rem; }
  .fc-strip { left: 0; top: 171.2039rem; width: 69.4164rem; height: 3.25rem; background: #fff; opacity: .7; }
  .fc-ph-4 { left: 60.625rem; top: 126.6326rem; width: 74.5625rem; height: 49.6962rem;
              mask-image: url(../fc-mask-4.svg); -webkit-mask-image: url(../fc-mask-4.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: 10.6664rem 1.5549rem; -webkit-mask-position: 10.6664rem 1.5549rem; }
  /* photos now live inside fc-body-2 (so they can slot between paragraphs on mobile); on desktop
     they're absolute relative to fc-body-2, so coords are offset by fc-body-2's origin (18.1875, 180.7038) */
  .fc-ph-5 { left: 43.8875rem; top: 0rem; width: 67.1414rem; height: 44.75rem;
              mask-image: url(../fc-mask-5.svg); -webkit-mask-image: url(../fc-mask-5.svg);
                 mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
                 mask-size: 48.7086rem 44.75rem; -webkit-mask-size: 48.7086rem 44.75rem;
                 mask-position: 9.2164rem 0rem; -webkit-mask-position: 9.2164rem 0rem; }
  .fc-ph-3 { left: -18.1875rem; top: 51.0001rem; width: 59.0625rem; height: 39.3654rem; }
  .fc-ph-2 { left: 42.75rem;    top: 51.0001rem; width: 59.0625rem; height: 39.3654rem; }

  .fc-q-bg   { left: 18.1875rem;     top: 87.5625rem;    width: 33.75rem; height: 37.5rem; background: #002d8e; }
  .fc-q-text { left: 21.75rem;     top: 102.3175rem; width: 26.625rem; }
  .fc-q-attr { left: 21.75rem;     top: 117.13rem; width: 26.625rem; }

  .fc-books { left: 85.8125rem; top: 21.4419rem; width: 28.9375rem; height: 22.9375rem; }
  .fc-hello { left: 4.0625rem;   top: 132.5625rem;  width: 15.3986rem; height: 13.4171rem; }
  .fc-hello > div { position: relative; width: 13.6767rem; height: 11.2429rem;
                     overflow: hidden; transform: rotate(-9.85deg); }
  .fc-kid-a { left: 2.856rem;  top: 216.9865rem; width: 12.312rem; height: 14.6924rem; }
  .fc-kid-b { left: 5.7rem;    top: 216.9865rem; width: 9.468rem; height: 3.9767rem; }
  .fc-kid-c { left: 8.724rem; top: 218.2614rem; width: 3.228rem;  height: 3.2481rem; }
  .fc-emoji { left: 58.1205rem; top: -12.1962rem; width: 9.408rem; height: 9.3801rem; }
  .fc-arrow { left: 3.324rem;  top: 209.3974rem; width: 12.336rem; height: 8.7426rem; }
  .fc-arrow > img { width: 7.2099rem; height: 11.4504rem; transform: rotate(-82.06deg); }

  .footer-bg     { top: 277.3125rem; }
  .f-line-top    { top: 283.54rem; }
  .f-line-bottom { top: 298.535rem; }
  .f-logo        { left: 18.192rem; top: 286.654rem; }
  .f-fb, .f-ig, .f-tt, .f-web { top: 293.91rem; }
  .f-li          { top: 294.0324rem; }
  .f-divider     { top: 286.665rem; }
  .f-head-services, .f-head-stories { top: 286.665rem; }
  .f-c1-1, .f-c2-1, .f-c3-1 { top: 288.89rem; }
  .f-c1-2, .f-c3-2 { top: 290.8475rem; }
  .f-c2-2 { top: 290.8275rem; }
  .f-c1-3, .f-c3-3 { top: 292.785rem; }
  .f-c2-3 { top: 292.765rem; }
  .f-c1-4, .f-c3-4 { top: 294.7225rem; }
  .f-legal { top: 300.41rem; }
}

.fc-h1, .fc-cap, .fc-q-text, .fc-q-attr, .fc-intro, .fc-body-1, .fc-body-2 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
  overflow-wrap: break-word;
}
.fc-h1 { font-weight: 700; font-size: 3.4375rem; line-height: normal; color: #1a5edb; }
.fc-intro, .fc-body-1, .fc-body-2 {
  font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000;
  white-space: pre-wrap;
}
/* fc-body-2 is now real paragraphs + inline figures (so photos slot between them on mobile) */
.fc-body-2 { white-space: normal; }
/* Відступ між абзацами як на інших історіях (bg/care/lp): 1.9em, бо text-box-trim з'їдає
   напівінтерліньяж і 1em/16px виглядали майже як звичайний перенос рядка (клієнт). */
.fc-body-2 > p { margin: 0; }
.fc-body-2 > p ~ p { margin-top: 1.9em; }
.fc-cap { font-weight: 600; font-size: 1.125rem; line-height: normal; color: #000;
           text-align: right; white-space: nowrap; }
.fc-q-text { font-weight: 600; font-size: 2.25rem; line-height: normal; color: #fff; text-align: center; }
.fc-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; }

  /* mobile sequence (client): text, photo1(+caption), photo2, then body-2 with photos 3/4/5
     slotted between its paragraphs — all still inside the styled text container. */
  .page { display: flex; flex-direction: column; }
  .fc-bar    { order: 0; height: 72px; background: #1a5edb; }
  .s-intro   { order: 1; }
  .s-books   { order: 2; }
  .s-phmain  { order: 3; }
  .s-quote   { order: 4; }
  .s-body1   { order: 5; }
  .s-ph1     { order: 6; }
  .s-body2   { order: 7; }
  .s-photos  { display: none; }   /* photos now live inside the body-2 text (see below) */
  .s-footer  { order: 20; }
  .s-decor   { display: none; }
  /* body-2 paragraphs stay in their container; the 3 photos flow between them full-width */
  .fc-body-2 .fc-figure { margin: 20px 0; }

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

  .fc-kid-a, .fc-kid-b, .fc-kid-c, .fc-arrow, .fc-strip { display: none; }

  /* books sit BESIDE the title (top-right); the copy drops below them (client) */
  .s-intro { padding: 30px var(--pad) 0; position: relative; }
  .fc-h1 { font-size: var(--h1); line-height: 1.12; padding-right: 122px; min-height: 86px; }
  .fc-intro { margin-top: 22px; }
  .fc-intro, .fc-body-1, .fc-body-2 { font-size: var(--body); line-height: 1.5; }
  .s-body1, .s-body2 { padding: 26px var(--pad) 0; }
  /* .s-body2 — остання секція перед футером (фото переїхали всередину тексту, а .s-photos
     сховано). Без нижнього відступу останній рядок упирався просто в синє тло футера. */
  .s-body2 { padding-bottom: 40px; }

  /* the old standalone books section is now empty (books moved into s-intro) — hide it */
  .s-books { display: none; }
  .fc-books { position: absolute; right: var(--pad); top: 28px; width: 112px; height: auto; z-index: 2; }

  .fc-figure { margin: 26px var(--pad) 0; position: relative; }
  .fc-frame { position: relative; width: 100%; overflow: hidden; border-radius: 18px;
               mask-image: none; -webkit-mask-image: none; }
  .fc-ph-main { aspect-ratio: 1920 / 858; }
  .fc-ph-1 { aspect-ratio: 1110 / 740; }
  .fc-ph-4 { aspect-ratio: 1193 / 795; }
  .fc-ph-5 { aspect-ratio: 1074 / 716; }
  .fc-ph-3, .fc-ph-2 { aspect-ratio: 945 / 630; }
  .fc-cap { margin: 10px var(--pad) 0; font-size: var(--cap); text-align: left; white-space: normal; }

  /* Hello bubble sits ON the first photo (waving woman), top-left; smiley on fc-ph-5.
     Use .fc-figure prefix so these beat the mobile ".a { position: static }" rule. */
  .fc-figure .fc-hello { position: absolute; left: 3%; top: 4%; width: 104px; height: auto; margin: 0; z-index: 3; }
  .fc-figure .fc-hello > div { width: 104px; height: 85px; transform: rotate(-9.85deg); }
  .fc-figure .fc-emoji { display: block; position: absolute; left: 12%; top: 4%; width: 58px; height: auto; z-index: 3; }

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

@media (min-width: 768px) and (max-width: 1199.98px) {
  .fc-bar { height: 104px; }
  .fc-books { width: 168px; top: 34px; }
  .fc-h1 { padding-right: 188px; min-height: 128px; }
  .fc-figure { margin-top: 40px; }
  .fc-q-text { font-size: 30px; }
  .fc-q-attr { font-size: 21px; }
  .fc-quote { padding: 40px 36px 44px; }
  .fc-hello { width: 220px; }
  .fc-hello > div { width: 220px; height: 181px; }
}

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

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

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

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