body, .page { background: #ffeefc; }

@media (min-width: 1200px) {

  .page { height: 320rem; }

  .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 { flex: none; }

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

  .care-leaf-1 { left: -19.98rem; top: -13.7704rem; width: 70.728rem; height: 75.1171rem; }
  .care-leaf-2 { left: -19.98rem; top: 183.1918rem; width: 70.728rem; height: 75.1171rem; }
  .care-leaf-1 > img,
  .care-leaf-2 > img { width: 41.3294rem; height: 62.8881rem; transform: rotate(36.72deg); }
  .care-leaf-3 { left: 69.42rem; top: 73.7793rem; width: 57.336rem; height: 71.9843rem; }
  .care-leaf-3 > img { width: 41.3294rem; height: 62.8881rem; transform: rotate(-16.32deg); }

  .care-heart-big   { left: 83.2763rem; top: 17.57rem; width: 26.9473rem; height: 25.0474rem; }
  .care-heart-big > img   { width: 23.25rem; height: 20.8125rem; transform: rotate(-11.55deg); }
  .care-heart-small { left: 107.0606rem; top: 27.5025rem; width: 9.3169rem; height: 8.8584rem; }
  .care-heart-small > img { width: 7.4534rem; height: 6.672rem; transform: rotate(20.48deg); }

  .care-h1    { left: 18.1875rem; top: 18.4688rem; width: 83.625rem; }
  .care-intro { left: 18.1875rem; top: 24.0356rem; width: 62.25rem; }

  .care-ph-main { left: 0; top: 17.4482rem; width: 120rem; height: 80.0098rem;
                   mask-image: url(../care-mask-main.svg); -webkit-mask-image: url(../care-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: 0 17.092rem; -webkit-mask-position: 0 17.092rem; }
  .care-strip   { left: 0; top: 83.5044rem; width: 120rem; height: 4.625rem; background: #fff; opacity: .7; }
  .care-cap     { right: 1.25rem; top: 85.0068rem; width: 51.6876rem; }

  .care-ph-9  { left: -13.9553rem; top: 128.1875rem; width: 69.4163rem; height: 46.2662rem;
                 mask-image: url(../care-mask-d.svg); -webkit-mask-image: url(../care-mask-d.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: 13.9553rem 0; -webkit-mask-position: 13.9553rem 0; }
  .care-ph-1  { right: 0; top: 128.1875rem; width: 69.4163rem; height: 46.2662rem; }
  .care-ph-5  { left: 57.9322rem; top: 168.5059rem; width: 67.5319rem; height: 45.0103rem;
                 mask-image: url(../care-mask-a.svg); -webkit-mask-image: url(../care-mask-a.svg);
                 mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
                 mask-size: 48.7086rem 32.8125rem; -webkit-mask-size: 48.7086rem 32.8125rem;
                 mask-position: 13.3591rem 12.1978rem; -webkit-mask-position: 13.3591rem 12.1978rem; }
  .care-ph-7  { left: 61.3355rem; top: 210.9841rem; width: 63.2991rem; height: 42.1891rem;
                 mask-image: url(../care-mask-a.svg); -webkit-mask-image: url(../care-mask-a.svg);
                 mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
                 mask-size: 48.7086rem 32.8125rem; -webkit-mask-size: 48.7086rem 32.8125rem;
                 mask-position: 9.9558rem 4.4071rem; -webkit-mask-position: 9.9558rem 4.4071rem; }
  .care-ph-4  { right: -5.1094rem; top: 207.579rem; width: 143.2352rem; height: 95.4668rem;
                 mask-image: url(../care-mask-c.svg); -webkit-mask-image: url(../care-mask-c.svg);
                 mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
                 mask-size: 120rem 39.3654rem; -webkit-mask-size: 120rem 39.3654rem;
                 mask-position: 18.1259rem 46.875rem; -webkit-mask-position: 18.1259rem 46.875rem; }

  .care-q-bg   { left: 18.1875rem; top: 83.9419rem; width: 33.75rem; height: 37.5rem; background: #002d8e; }
  .care-q-text { left: 21.75rem; top: 92.1969rem; width: 26.625rem; }
  .care-q-attr { left: 21.75rem; top: 107.0094rem; width: 26.625rem; }

  .care-body-1 { left: 53.8125rem; top: 121.4419rem; width: 48rem; transform: translateY(-100%); }

  .care-body-2 { left: 18.1875rem; top: 180.7039rem; width: 49.8625rem; }

  .care-obj-1 { left: 88.75rem; top: 178.73rem; width: 8.8125rem; height: 7.5625rem; transform: scaleX(-1); }
  .care-obj-2 { left: 104.6875rem; top: 179.4226rem; width: 8.8125rem; height: 7.5625rem; transform: scaleX(-1); }
  .care-obj-3 { left: 88.75rem; top: 191.1414rem; width: 8.8125rem; height: 7.5625rem; transform: scaleX(-1); }
  .care-obj-4 { left: 18.4988rem; top: 119.8169rem; width: 15.9375rem; height: 21.125rem; }
  .care-note-1 { left: 57.643rem; top: 250.4637rem; width: 7.3653rem; height: 6.9862rem; }
  .care-note-1 > img { width: 5.9339rem; height: 5.3118rem; transform: rotate(19.47deg); }
  .care-note-2 { left: 55.0914rem; top: 257.1268rem; width: 4.6578rem; height: 4.3362rem; }
  .care-note-2 > img { width: 3.9958rem; height: 3.5769rem; transform: rotate(-12.12deg); }

  /* Клієнт (стор. 6): прибрати рожевий зазор між нижнім фото і футером.
     Смуга фото закінчується на 293.8194rem, тож увесь футер піднято на 6.3125rem
     (розмір зазору + 1px, щоб на стику не лишалось тонкої рожевої лінії), а висота
     .page зменшена на стільки ж. */
  .footer-bg     { top: 293.75rem; }
  .f-line-top    { top: 299.9775rem; }
  .f-line-bottom { top: 314.9725rem; }
  .f-logo        { left: 18.192rem; top: 303.093rem; }
  .f-fb, .f-ig, .f-tt, .f-li, .f-web { top: 310.3475rem; }
  .f-li          { top: 310.4699rem; }
  .f-divider     { top: 303.1025rem; }
  .f-head-services, .f-head-stories { top: 303.1025rem; }
  .f-c1-1, .f-c2-1, .f-c3-1 { top: 305.3275rem; }
  .f-c1-2, .f-c3-2 { top: 307.285rem; }
  .f-c2-2 { top: 307.265rem; }
  .f-c1-3, .f-c3-3 { top: 309.2225rem; }
  .f-c2-3 { top: 309.2025rem; }
  .f-c1-4, .f-c3-4 { top: 311.16rem; }
  .f-legal { top: 316.8475rem; }

  .care-fig-inline { display: none; }
}

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

.care-h1, .care-cap, .care-q-text, .care-q-attr,
.care-intro, .care-body-1, .care-body-2 {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  text-box: trim-both cap alphabetic;
  overflow-wrap: break-word;
}
.care-h1 { font-weight: 700; font-size: 3.4375rem; line-height: normal; color: #1a5edb; }
.care-intro, .care-body-1, .care-body-2 {
  font-weight: 500; font-size: 1.25rem; line-height: 1.625rem; color: #000;
  white-space: pre-wrap;
}
.care-body-2 { white-space: normal; }
.care-body-2 > p { margin: 0; }
/* Розрив між абзацами.
   1) p ~ p, а не p + p: між абзацами в розмітці стоять <figure>, і на десктопі вони
      display:none — сусідній селектор через них не спрацьовував.
   2) Значення в em і саме таке велике: у блока стоїть text-box-trim, який зрізає
      напівінтерліньяж зверху й знизу кожного абзацу, тож більша частина відступу
      просто з'їдалась. Раніше на мобільному розрив виходив на 2.4px більший за
      звичайний міжрядковий інтервал — тобто його не було видно. */
.care-body-2 > p ~ p { margin-top: 1.9em; }
.care-fig-inline { position: relative; }

@keyframes carePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
/* пульс із горизонтальним дзеркалом: у макеті хвостик хмарки дивиться ВНИЗ-ПРАВОРУЧ,
   а наші SVG нативно дзеркальні, тож тримаємо scaleX(-1) у кожному кадрі */
@keyframes carePulseMirrorX {
  0%, 100% { transform: scaleX(-1) scaleY(1); }
  50%      { transform: scaleX(-1.14) scaleY(1.14); }
}
.care-cap { font-weight: 600; font-size: 1.125rem; line-height: normal; color: #000; text-align: right; }
.care-q-text { font-weight: 600; font-size: 2.25rem; line-height: normal; color: #fff; text-align: center; }
.care-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; }
  .care-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-ph9       { order: 6; }
  .s-body2     { order: 7; }
  .s-ph5       { order: 8; }
  .s-ph7       { order: 9; }
  .s-ph4       { order: 10; }
  .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; }

  .care-leaf-1, .care-leaf-2, .care-leaf-3,
  .care-obj-1, .care-obj-2, .care-obj-3, .care-strip { display: none; }

  .care-intro-sec { position: relative; padding: 30px var(--pad) 0; }
  .care-h1 { font-size: var(--h1); line-height: 1.12; padding-right: 104px; }
  .care-intro { margin-top: 16px; }
  .care-intro, .care-body-1, .care-body-2 { font-size: var(--body); line-height: 1.5; }

  .care-heart-big { position: absolute; right: var(--pad); top: 8px; width: 96px; }
  .care-heart-big > img { width: 100%; height: auto; transform: rotate(-11.55deg); }
  .care-heart-small { display: none; }

  .care-figure { margin: 26px var(--pad) 0; }
  .care-figure .care-frame {
    position: relative; width: 100%; overflow: hidden; border-radius: 18px;
    mask-image: none; -webkit-mask-image: none;
  }
  .care-ph-main { aspect-ratio: 1920 / 858; }
  .care-ph-9, .care-ph-1 { aspect-ratio: 1110 / 740; }
  .care-ph-5, .care-ph-7 { aspect-ratio: 1012 / 675; }
  .care-ph-4 { aspect-ratio: 1920 / 630; }
  /* люди сидять на ~70% висоти кадру — зсуваємо вузьку смугу вниз, щоб вони були по центру (клієнт) */
  /* Кадр ОДИН В ОДИН з макета (Figma, сторінка Caring, вузол 225:496): у макеті видима частина фото —
     це ділянка 12.7–96.4% ширини і 49.1–90.4% висоти вихідного знімка. Наш object-fit: cover вписує
     фото по ширині, тож щоб отримати ту саму ділянку, потрібне масштабування 1.193 з точкою 78.1% / 50%
     і вертикальна позиція 88.87%. Тоді голови стоять на ~20% висоти кадру, як у макеті, і над ними
     лишається місце для сердечок. */
  .care-ph-4 > .care-photo { object-position: 50% 88.87%;
                             transform: scale(1.193); transform-origin: 78.1% 50%; }
  /* без бічного відступу: підпис лежить усередині .care-figure, у якої вже є
     margin: 26px var(--pad) 0 — інакше він відступав від фото на подвійний --pad */
  .care-cap { margin: 10px 0 0; font-size: var(--cap); text-align: left; }

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

  .care-copy { padding: 26px var(--pad) 0; }
  .s-care-tail { padding-bottom: 40px; }

  /* interleaved photos live inside the copy — hide the standalone sections */
  .s-ph5, .s-ph7 { display: none; }
  /* 16px тут майже нічого не давало: text-box-trim з'їдав більшу частину, і розрив
     виходив лише на 2.4px більший за міжрядковий інтервал. */
  .care-body-2 > p ~ p { margin-top: 1.9em; }
  .care-fig-inline { margin: 22px 0; }

  /* Хмарки на фото групового обговорення.
     Орієнтація звірена з макетом (вузли OBJECTS 225:467/474/486): хвостик дивиться
     ВНИЗ-ПРАВОРУЧ. Наші SVG нативно дзеркальні до цього, тому scaleX(-1) — і дзеркало
     повторюється в кожному кадрі пульсації, інакше анімація його скидає.
     Розмір зменшено з 15% до 9%, щоб хмарки не перекривали обличчя (клієнт). */
  .care-fig-5 .care-obj-m { display: block; position: absolute; width: 9%; z-index: 3;
    transform: scaleX(-1);
    animation: carePulseMirrorX 1.7s ease-in-out infinite; }
  /* Розкладка один-в-один з десктопної (клієнт: «ось як має бути»): відсотки зняті з
     .care-obj-1/2/3 відносно фото .care-ph-5 на 1440px. Пропорції фото на мобільному ті самі
     (1.5), тож композиція повторюється, тільки самі хмарки менші. */
  .care-fig-5 .care-obj-1m { left: 49.73%; top: 22.21%; animation-duration: 1.7s; }
  .care-fig-5 .care-obj-2m { left: 73.89%; top: 25.58%; animation-duration: 2.0s; }
  .care-fig-5 .care-obj-3m { left: 49.73%; top: 56.73%; animation-duration: 1.5s; }

  /* music notes on the graffiti-wall photo (care-ph-9) — JS handles reveal + pulse */
  .s-ph9 { position: relative; }
  .care-obj-4 { position: absolute; left: 18%; top: 16px; width: 22%; height: auto; z-index: 3; }

  /* hearts on the outdoor photo (care-ph-4) — JS handles reveal + pulse */
  /* Сердечка над жінками й трохи за верхнім краєм фото — як у макеті на десктопі (клієнт).
     Щоб вони не заходили на текст, у цього фото більший відступ зверху (--mt нижче), тож над рамкою
     є вільна рожева смуга. Координати перераховано з десктопних через мобільне кадрування:
     object-position 50% 79% у рамці 1920/630 і scale(1.45) навколо 55.5% / 51%.
     --F — ширина рамки, --Hf — її висота, --mt — відступ рамки зверху. */
  .s-ph4 { position: relative; container-type: inline-size;
           --mt: 26px; --F: calc(100cqw - 2 * var(--pad)); --Hf: calc(var(--F) / 3.0476); }
  .s-ph4 .care-figure { margin-top: var(--mt); }
  .care-note-1, .care-note-2 { position: absolute; z-index: 3;
    display: flex; align-items: center; justify-content: center; }
  /* розкладка як у макеті: велике вище й правіше, мале нижче й лівіше — по діагоналі, а не одне
     під одним (клієнт: «зараз дуже близько одне до одного») */
  /* Позиції й розміри сердечок зняті з макета (вузли 225:499 і 225:504 відносно фото 225:496):
     велике — 49.5% ширини фото, верх на -10.2% його висоти (виступає над кадром), ширина 6.15%;
     мале — 45.9% / +8.9%, ширина 3.9%. */
  .care-note-1 { left: calc(var(--pad) + var(--F) * 0.495); top: calc(var(--mt) - var(--Hf) * 0.102);
                 width: calc(var(--F) * 0.0615); aspect-ratio: 118 / 112; }
  .care-note-2 { left: calc(var(--pad) + var(--F) * 0.459); top: calc(var(--mt) + var(--Hf) * 0.089);
                 width: calc(var(--F) * 0.039); aspect-ratio: 75 / 69; }
  .care-note-1 > img { flex: none; width: 80.6%; height: auto; transform: rotate(19.47deg); }
  .care-note-2 > img { flex: none; width: 85.8%; height: auto; transform: rotate(-12.12deg); }

  /* gap between the last photo and the footer */
  .s-ph4 { margin-bottom: 40px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .care-bar { height: 104px; }
  .care-figure { margin-top: 40px; }
  .s-ph4 { --mt: 40px; }   /* на планшеті рамка вища, тож і місця над нею для сердечок треба більше */
  .care-heart-big { width: 150px; top: 14px; }
  .care-h1 { padding-right: 170px; }
  .care-q-text { font-size: 30px; }
  .care-q-attr { font-size: 21px; }
  .care-quote { padding: 40px 36px 44px; }
}

/* Previous / Next (десктоп) — кнопки під контентом перед футером (макет клієнта).
   Фото тут стоїть впритул до футера, тож футер опущено на 6.25rem — такий самий проміжок, як на інших історіях. */
@media (min-width: 1200px) {
  .page { height: 326.25rem; }
  .s-footer { top: 6.25rem; }
  .nav-next, .nav-prev-arrow { top: 295.375rem; }
  .nav-prev-label { top: 296.4375rem; }
}

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

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