@font-face {
  font-family:Bebas;
  src:url('../fonts/bebas-neue-cyrillic.woff2') format('woff2'),url('../fonts/bebas-neue-cyrillic.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Bebas;
  src:url('../fonts/bebas-neue-cyrillic-bold.woff2') format('woff2'),url('../fonts/bebas-neue-cyrillic-bold.ttf') format('truetype');
  font-weight:700;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('../fonts/manrope-400.woff2') format('woff2'),url('../fonts/manrope-400.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Manrope;
  src:url('../fonts/manrope-700.woff2') format('woff2'),url('../fonts/manrope-700.ttf') format('truetype');
  font-weight:700;
  font-display:swap
}
:root {
  --paper:#fbf7f5;
  --sand:#f6f3ed;
  --ink:#111;
  --accent:#e85a4c;
  --accent-text:#c83f34;
  --muted:#7c7975;
  --content:1180px;
  --gutter:clamp(1.25rem,5vw,5rem);
  --section:clamp(3.5rem,7vw,7.5rem);
  --shadow:0 4px 4px rgb(0 0 0/.18)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
  font-size:clamp(.9375rem,.35vw + .85rem,1.125rem);
  line-height:1.4;
  overflow-x:hidden
}
img {
  display:block;
  max-width:100%
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
.container {
  width:min(calc(100% - 2*var(--gutter)),var(--content));
  margin-inline:auto
}
.section {
  position:relative;
  padding-block:var(--section);
  overflow:hidden;
  box-shadow:var(--shadow)
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2 {
  font-family:Bebas,'Arial Narrow',sans-serif;
  font-weight:700;
  line-height:.94;
  text-transform:uppercase;
  text-wrap:balance
}
h2 {
  font-size:clamp(3rem,5.2vw,4rem);
  margin-bottom:clamp(2rem,5vw,4.5rem)
}
h3 {
  line-height:1.2
}
.button {
  display:inline-flex;
  min-width:min(100%,16.75rem);
  min-height:clamp(3.4rem,5vw,4.45rem);
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  padding:1rem 2rem;
  cursor:pointer;
  transition:background .2s,transform .2s
}
.button:hover,.button:focus-visible {
  background:var(--accent-text);
  transform:translateY(-2px)
}
.skip-link {
  position:fixed;
  z-index:100;
  top:.5rem;
  left:.5rem;
  translate:0 -150%;
  background:#fff;
  padding:.75rem
}
.skip-link:focus {
  translate:0
}
:where(a,button,[tabindex]):focus-visible {
  outline:3px solid var(--accent-text);
  outline-offset:3px
}
.visually-hidden {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important
}
.back-to-top {
  position:fixed;
  z-index:30;
  right:calc(1rem + env(safe-area-inset-right));
  bottom:calc(1rem + env(safe-area-inset-bottom));
  display:grid;
  width:3rem;
  height:3rem;
  place-items:center;
  border:1px solid rgb(255 255 255/.18);
  border-radius:50%;
  background:var(--ink);
  color:#fff;
  box-shadow:0 .45rem 1.4rem rgb(17 17 17/.22);
  opacity:0;
  visibility:hidden;
  transform:translateY(.75rem);
  pointer-events:none;
  transition:opacity .2s,transform .2s,visibility .2s,background .2s
}
.back-to-top--visible {
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto
}
.back-to-top:hover,.back-to-top:focus-visible {
  background:var(--accent-text);
  transform:translateY(-2px)
}
.back-to-top svg {
  width:1.35rem;
  height:1.35rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
@media(min-width:46.01rem) {
  .back-to-top {
    right:calc(1.5rem + env(safe-area-inset-right));
    bottom:calc(1.5rem + env(safe-area-inset-bottom));
    width:3.35rem;
    height:3.35rem
  }
}
.header {
  position:relative;
  z-index:20;
  background:var(--paper);
  box-shadow:var(--shadow)
}
.header__inner {
  min-height:clamp(5.2rem,8.8vw,7.95rem);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(1.5rem,4vw,5rem)
}
.logo {
  display:block;
  width:clamp(5.4rem,9vw,8.125rem);
  flex:none
}
.logo img {
  width:100%;
  height:auto
}
.nav__list {
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  gap:clamp(1rem,3vw,4.6rem);
  margin:0;
  padding:0;
  list-style:none;
  font-weight:700
}
.nav a {
  white-space:nowrap
}
.header__button {
  min-width:clamp(12rem,18.6vw,16.75rem)
}
.menu-toggle {
  display:none
}
.hero {
  position:relative;
  isolation:isolate;
  min-height:clamp(42rem,60.55vw,54.5rem);
  background:var(--sand);
  box-shadow:var(--shadow);
  overflow:hidden
}
.hero__background {
  position:absolute;
  z-index:-2;
  inset:0;
  background:url('../images/hero-bg.png') center/cover;
  opacity:.1
}
.hero__umbrella {
  position:absolute;
  z-index:-1;
  right:max(calc((100vw - var(--content))/2 - 10rem),-7rem);
  bottom:-1%;
  width:clamp(38rem,74vw,75rem);
  aspect-ratio:1203/802;
  background:url('../images/hero-exact.png') center/cover no-repeat
}
.hero__content {
  min-height:inherit;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-block:clamp(2.5rem,5vw,5rem)
}
.hero__title {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  margin:0 0 clamp(1rem,2vw,1.5rem);
  max-width:min(47rem,60vw)
}
.hero__brand {
  font-size:clamp(11rem,24.3vw,21.875rem);
  line-height:.72;
  letter-spacing:-.02em
}
.hero__tagline,.hero__title em {
  font-size:clamp(3.35rem,6.25vw,5.625rem);
  line-height:.94;
  font-style:normal
}
.hero__title em {
  color:var(--accent)
}
.hero__text {
  max-width:27.6rem;
  margin:0 0 1rem;
  line-height:1.3
}
.hero .button {
  position:relative;
  z-index:2
}
.process {
  background:var(--paper)
}
.process h2 {
  margin-left:clamp(0rem,3vw,2.6rem)
}
.process__list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));
  gap:clamp(1.5rem,3vw,3rem);
  margin:0;
  padding:0;
  list-style:none
}
.process-card {
  min-width:0
}
.process-card__image {
  position:relative;
  display:block;
  width:100%;
  max-width:13.5rem;
  aspect-ratio:1.2;
  overflow:hidden;
  margin-inline:auto
}
.process-card h3 {
  font-size:1.1rem;
  margin:.9rem 0 .45rem
}
.process-card p {
  font-size:.88rem;
  line-height:1.35;
  margin:0
}
.benefits {
  background:var(--sand)
}
.benefits__layout {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,28rem),1fr));
  gap:clamp(3rem,7vw,7rem);
  align-items:start
}
.benefits__intro {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.benefits__intro h2 {
  max-width:27rem;
  margin-bottom:1.4rem
}
.benefits__image {
  order:3;
  width:100%;
  max-width:35.5rem;
  aspect-ratio:568/459;
  margin-top:2rem;
  background:url('../images/benefits-umbrella.png') center/contain no-repeat
}
.benefits__list {
  display:grid;
  gap:clamp(2rem,3.7vw,3.5rem);
  margin:0;
  padding:0;
  list-style:none
}
.benefits__list li {
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.25rem,3vw,3rem);
  align-items:start
}
.benefits__number {
  font:400 clamp(3.2rem,5vw,4.4rem)/.9 Bebas
}
.benefits__list li>div {
  position:relative;
  padding-top:2.9rem
}
.benefits__list li>div:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:2.65rem;
  height:2.65rem;
  background:center/contain no-repeat
}
.benefits__list li:nth-child(1)>div:before {
  background-image:url('../images/arrow1.svg')
}
.benefits__list li:nth-child(2)>div:before {
  background-image:url('../images/arrow2.svg')
}
.benefits__list li:nth-child(3)>div:before {
  background-image:url('../images/arrow3.svg')
}
.benefits__list li:nth-child(4)>div:before {
  background-image:url('../images/arrow4.svg')
}
.benefits__list h3 {
  font-size:clamp(1.15rem,2vw,1.55rem);
  margin:0 0 .65rem
}
.benefits__list p {
  font-size:.9rem;
  line-height:1.4;
  margin:0
}
.services {
  background:var(--paper)
}
.services:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:url('../images/hero-bg.png') center/cover;
  opacity:.12
}
.services>.container {
  position:relative;
  z-index:1
}
.services h2 {
  text-align:right
}
.services__list {
  display:grid;
  gap:clamp(4rem,8vw,8rem)
}
.service {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(2rem,6vw,6rem);
  align-items:center
}
.service:nth-child(even) .service__image {
  order:2
}
.service__image {
  position:relative;
  width:min(100%,19rem);
  aspect-ratio:1;
  margin-inline:auto;
  overflow:hidden
}
.service__image:before {
  content:'';
  position:absolute;
  background:url('../images/services-sprite.png') center/100% 100% no-repeat
}
.service--social .service__image:before {
  left:-10.31%;
  top:-49.06%;
  width:340.63%;
  height:214.68%
}
.service--design .service__image:before {
  left:-109.18%;
  top:-61.24%;
  width:313.47%;
  height:234.86%
}
.service--business .service__image:before {
  left:-231.37%;
  top:-48.73%;
  width:334.64%;
  height:216.95%
}
.service h3 {
  font-size:1.25rem;
  margin:.75rem 0
}
.service__caption {
  font-size:.9rem
}
.service__description {
  grid-column:2;
  font-size:clamp(1rem,.6vw + .8rem,1.25rem);
  line-height:1.42
}
.service:nth-child(even) .service__description {
  grid-column:1;
  grid-row:1
}
.service:nth-child(even) h3,.service:nth-child(even) .service__caption {
  text-align:right
}
.prices {
  background:var(--sand)
}
.prices__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:clamp(1rem,2.3vw,2rem);
  align-items:start
}
.price-card {
  background:var(--paper);
  border-radius:1.25rem;
  padding:1.2rem;
  box-shadow:0 4px 2px rgb(0 0 0/.2)
}
.price-card h3 {
  text-align:center;
  font-size:1.05rem;
  padding-bottom:1rem;
  border-bottom:1px solid;
  margin:0
}
.price-card dl {
  margin:0
}
.price-card dl div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:1rem 0;
  border-bottom:1px solid
}
.price-card dt {
  min-width:0
}
.price-card dd,.price-card__value {
  margin:0;
  color:var(--accent-text);
  font-weight:700;
  white-space:nowrap
}
.price-card--strategy .price-card__value {
  text-align:center;
  font-size:clamp(2rem,3vw,2.5rem);
  margin:2rem 0
}
.price-card--strategy>p:last-child {
  text-align:center;
  font-size:.9rem
}
.price-card--extra {
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:1rem;
  padding-left:4.25rem
}
.price-card--extra:before {
  content:'+';
  position:absolute;
  left:1.1rem;
  top:50%;
  display:grid;
  width:1.45rem;
  height:1.45rem;
  place-items:center;
  border:1.5px solid var(--ink);
  border-radius:50%;
  font:400 1.2rem/1 Manrope;
  transform:translateY(-50%)
}
.price-card--extra h3 {
  text-align:left;
  border:0;
  padding:0
}
.prices:after {
  content:'';
  position:absolute;
  right:max(var(--gutter),calc((100vw - var(--content))/2));
  bottom:0;
  width:clamp(10rem,17vw,15rem);
  aspect-ratio:3/2;
  background:url('../images/prices-decor.png') center/100% 100% no-repeat;
  pointer-events:none
}
.plans {
  background:var(--paper)
}
.plans:before {
  content:'';
  position:absolute;
  inset:0 0 0 45%;
  background:url('../images/hero-bg.png') center/cover;
  opacity:.07
}
.plans__layout {
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));
  gap:clamp(2rem,5vw,4rem);
  align-items:start
}
.plans__intro p {
  max-width:23rem
}
.plans__intro:after {
  content:'';
  display:block;
  width:min(100%,26.5rem);
  aspect-ratio:424/242;
  margin-top:1.5rem;
  background:url('../images/plans-decor-crop.png') center/contain no-repeat
}
.plans__table-wrap {
  width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain
}
.plans__table {
  width:100%;
  min-width:42rem;
  border-collapse:collapse;
  table-layout:fixed;
  text-align:center;
  font-size:clamp(.82rem,.4vw + .72rem,1rem)
}
.plans__table th,.plans__table td {
  border-right:1px solid #888;
  border-bottom:1px solid #888;
  padding:clamp(.7rem,1.5vw,1.15rem)
}
.plans__table tr>*:last-child {
  border-right:0
}
.extras {
  background:var(--sand)
}
.extras__list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(3rem,6vw,6rem);
  margin:0 0 clamp(3rem,7vw,6rem);
  padding:0;
  list-style:none;
  text-align:center;
  font-weight:700
}
.extra span {
  position:relative;
  display:block;
  width:min(100%,13.5rem);
  aspect-ratio:1.1;
  margin:0 auto 1rem;
  overflow:hidden
}
.extras__details {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));
  gap:clamp(2rem,5vw,4rem);
  align-items:center
}
.extras__details>div:first-child {
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.extras__art {
  width:100%;
  aspect-ratio:461/184;
  background:url('../images/extras-decor-crop.png') center/contain no-repeat
}
.extras__details article {
  border:1px solid #999;
  border-radius:1rem;
  padding:1.25rem
}
.extras__details article h3 {
  margin-bottom:.5rem
}
.extras__details article p {
  margin:0
}
.contact {
  background:var(--paper)
}
.contact__layout {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,25rem),1fr));
  gap:clamp(3rem,8vw,7rem);
  align-items:center
}
.contact__intro h2 {
  margin-bottom:1rem
}
.contact__intro h2 em {
  display:block;
  color:var(--accent);
  font-style:normal
}
.contact__image {
  width:100%;
  max-width:34rem;
  aspect-ratio:546/398;
  margin-top:2rem;
  background:url('../images/contact-umbrella-crop.png') center/contain no-repeat
}
.contact-card {
  min-width:0;
  align-self:center;
  padding:clamp(1.35rem,3vw,2.25rem);
  border:1px solid rgb(17 17 17/.14);
  border-radius:1.75rem;
  background:rgb(255 255 255/.48);
  box-shadow:0 1.25rem 3.5rem rgb(95 64 45/.09)
}
.contact-card__eyebrow {
  margin:0 0 .45rem;
  color:var(--accent-text);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.contact-card h3 {
  margin:0 0 1.35rem;
  font-size:clamp(1.35rem,2.5vw,1.75rem)
}
.contact-channels {
  display:grid;
  gap:.85rem;
  margin:0;
  padding:0;
  list-style:none
}
.contact-channel {
  display:grid;
  grid-template-columns:3.25rem minmax(0,1fr) auto;
  gap:1rem;
  min-height:5rem;
  align-items:center;
  padding:.8rem 1rem;
  border:1px solid rgb(17 17 17/.12);
  border-radius:1.15rem;
  background:#fff;
  box-shadow:0 .35rem 1.2rem rgb(95 64 45/.07);
  transition:border-color .2s,box-shadow .2s,transform .2s
}
.contact-channel:hover,.contact-channel:focus-visible {
  border-color:var(--accent-text);
  box-shadow:0 .7rem 1.6rem rgb(95 64 45/.12);
  transform:translateY(-2px)
}
.contact-channel__icon {
  display:grid;
  width:3.25rem;
  height:3.25rem;
  place-items:center;
  border-radius:1rem;
  color:#fff;
  font-size:1.05rem;
  font-weight:700
}
.contact-channel--vk .contact-channel__icon {
  background:#087ff5
}
.contact-channel--email .contact-channel__icon {
  background:var(--accent-text);
  font-size:1.55rem
}
.contact-channel__text {
  display:grid;
  min-width:0;
  gap:.12rem
}
.contact-channel__text strong {
  font-size:1rem
}
.contact-channel__text span {
  color:#666;
  font-size:.78rem;
  overflow-wrap:anywhere
}
.contact-channel__arrow {
  font-size:1.35rem
}
.contact-card__schedule {
  display:grid;
  gap:.15rem;
  margin:1.2rem 0 0;
  padding-top:1rem;
  border-top:1px solid rgb(17 17 17/.12);
  font-size:.8rem
}
.contact-card__schedule span {
  color:#666
}
.footer {
  background:var(--sand);
  padding-block:clamp(2.5rem,5vw,4rem)
}
.footer__grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));
  column-gap:clamp(2rem,4vw,4.5rem);
  row-gap:1.75rem;
  align-items:start
}
.footer__brand {
  display:flex;
  align-items:center;
  gap:1rem
}
.footer__brand .logo {
  width:8.125rem
}
.footer__slogan {
  display:flex;
  flex-direction:column;
  margin:0;
  font:400 1.55rem/1 Bebas;
  text-transform:uppercase;
  white-space:nowrap
}
.footer__slogan em {
  color:var(--accent);
  font-style:normal
}
.footer__about>p {
  max-width:17rem;
  margin:.8rem 0 0;
  font-size:.9rem
}
.footer h2 {
  font:700 1.2rem/1.2 Manrope;
  text-transform:none;
  margin:0 0 1.2rem
}
.footer ul {
  list-style:none;
  margin:0;
  padding:0
}
.footer__nav li {
  margin:.65rem 0
}
.footer__social ul {
  display:flex;
  gap:.8rem
}
.footer__social {
  display:block;
  min-width:0;
  visibility:visible
}
.social-icon {
  display:block;
  width:3rem;
  height:3rem;
  background:center/contain no-repeat
}
.social-icon--vk {
  background-image:url('../images/vk.svg')
}
.footer__contacts a {
  white-space:nowrap;
  font-size:.9rem
}
.footer__contacts p {
  max-width:18rem;
  margin:.75rem 0 0;
  font-size:.8rem;
  color:#666
}
.footer__copyright {
  grid-column:1/-1;
  width:100%;
  margin:0;
  padding-top:1.1rem;
  border-top:1px solid rgb(16 16 16/.15);
  font-size:.8rem;
  color:#666
}
@media(min-width:46.01rem) {
  .hero__content {
    padding-left:0
  }
  .hero__title {
    max-width:35rem
  }
  .hero__umbrella {
    left:48%;
    right:auto;
    width:min(62.7vw,75rem)
  }
  .process {
    padding-block:5.25rem
  }
  .process__list {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2rem
  }
  .process-card__image {
    max-width:10.5rem
  }
  .process-card h3 {
    font-size:1rem
  }
  .services__list {
    gap:5rem
  }
  .service {
    grid-template-columns:23rem minmax(0,1fr);
    gap:5rem
  }
  .service__card {
    min-width:0
  }
  .service:nth-child(even) {
    grid-template-columns:minmax(0,1fr) 23rem
  }
  .service:nth-child(even) .service__card {
    order:2
  }
  .service:nth-child(even) .service__image {
    order:0
  }
  .service__description {
    align-self:center
  }
  .prices {
    padding-block:4.5rem
  }
  .prices>.container {
    max-width:68.75rem
  }
  .prices__grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1.5rem
  }
  .price-card {
    padding:1rem
  }
  .price-card--extra {
    grid-column:1;
    max-width:100%
  }
  .plans {
    padding-block:4.25rem
  }
  .plans__layout {
    grid-template-columns:21rem minmax(0,1fr);
    gap:3.25rem
  }
  .plans__intro:after {
    width:23rem;
    max-width:100%;
    margin:1rem auto 0;
    background-size:cover;
    background-position:58% 58%
  }
  .extras__list {
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:5rem;
    row-gap:4rem
  }
  .extras__details {
    grid-template-columns:1fr 1.2fr 1fr
  }
  .contact {
    padding-block:4rem
  }
  .contact__layout {
    grid-template-columns:minmax(0,1fr) minmax(26rem,.95fr);
    gap:5rem
  }
  .contact__intro h2 {
    max-width:39rem
  }
  .contact__intro h2 em {
    display:inline
  }
  .contact__image {
    max-width:26rem
  }
  .contact-card {
    gap:1.25rem
  }
  .footer__grid {
    grid-template-columns:minmax(0,2.1fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.6fr)
  }
}
@media(min-width:46.01rem) and (max-width:62rem) {
  :root {
    --gutter:2rem;
    --section:5rem
  }
  .header__inner {
    gap:1.5rem
  }
  .nav__list {
    gap:1.25rem
  }
  .header__button {
    min-width:11rem
  }
  .hero__umbrella {
    left:43%;
    width:78vw
  }
  .process__list {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .benefits__layout {
    grid-template-columns:1fr 1fr;
    gap:3rem
  }
  .service,.service:nth-child(even) {
    grid-template-columns:18rem minmax(0,1fr);
    gap:3rem
  }
  .prices__grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .price-card--strategy {
    grid-column:auto
  }
  .plans__layout {
    grid-template-columns:1fr
  }
  .plans__intro:after {
    max-width:20rem
  }
  .extras__list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .extras__details {
    grid-template-columns:1fr 1fr
  }
  .extras__details article {
    grid-column:1/-1
  }
  .contact__layout {
    grid-template-columns:1fr;
    gap:4rem
  }
  .contact__image {
    max-width:30rem
  }
  .footer__grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:46rem) {
  .header__inner {
    grid-template-columns:auto auto;
    justify-content:space-between
  }
  .header__button {
    display:none
  }
  .menu-toggle {
    display:flex;
    width:2.8rem;
    height:2.8rem;
    padding:.55rem;
    border:0;
    background:transparent;
    flex-direction:column;
    justify-content:center;
    gap:.38rem
  }
  .menu-toggle span:not(.visually-hidden) {
    display:block;
    width:100%;
    height:2px;
    background:var(--ink)
  }
  .nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:var(--paper);
    box-shadow:var(--shadow);
    padding:1.5rem
  }
  .nav[data-open] {
    display:block
  }
  .nav__list {
    flex-direction:column;
    align-items:flex-start
  }
  .hero {
    min-height:46rem
  }
  .hero__content {
    padding-left:0
  }
  .hero__umbrella {
    left:18%;
    right:auto;
    bottom:-1rem;
    width:46rem;
    opacity:.72
  }
  .hero__title {
    max-width:100%
  }
  .hero__brand {
    font-size:clamp(9rem,48vw,13rem)
  }
  .hero__tagline,.hero__title em {
    font-size:clamp(2.8rem,13vw,4rem)
  }
  .hero__text {
    max-width:min(75%,25rem)
  }
  .service {
    grid-template-columns:1fr
  }
  .service:nth-child(even) .service__card {
    order:0
  }
  .service__description,.service:nth-child(even) .service__description {
    grid-column:1;
    grid-row:auto
  }
  .service:nth-child(even) h3,.service:nth-child(even) .service__caption {
    text-align:left
  }
  .plans__layout,.contact__layout {
    grid-template-columns:1fr
  }
  .prices:after {
    opacity:.35
  }
  .footer__grid {
    grid-template-columns:1fr
  }
  .footer__brand {
    align-items:flex-start
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}
.benefits__list li>div:before {
  transform:rotate(90deg)
}
.process-card__image {
  height:7rem;
  aspect-ratio:auto
}
.extras__list {
  margin-bottom:0
}
.extras__details {
  margin-block:clamp(3rem,6vw,5rem)
}
.extras__list--bottom {
  margin-bottom:0
}
@media(min-width:46.01rem) {
  .plans__intro:after {
    width:32rem;
    max-width:none;
    margin-left:-5rem
  }
  .extras__list--top,.extras__list--bottom {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
.price-column {
  display:grid;
  align-content:start;
  gap:1.5rem
}
.price-column .price-card--extra {
  grid-column:auto
}
.process-card__image {
  height:8rem;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat
}
.process-card--meet .process-card__image {
  background-image:url('../images/process-meet.png?v=2')
}
.process-card--analyse .process-card__image {
  background-image:url('../images/process-analyse.png?v=2')
}
.process-card--strategy .process-card__image {
  background-image:url('../images/process-strategy.png?v=2')
}
.process-card--publish .process-card__image {
  background-image:url('../images/process-publish-crop.png?v=2')
}
.process-card--improve .process-card__image {
  background-image:url('../images/process-improve.png?v=2')
}
.extra span {
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat
}
.extra--presentations span {
  background-image:url('../images/extra-presentations-crop.png?v=2')
}
.extra--infographics span {
  background-image:url('../images/extra-infographics-crop.png?v=2')
}
.extra--print span {
  background-image:url('../images/extra-print-crop.png?v=2')
}
.extra--guides span {
  background-image:url('../images/extra-guides-crop.png?v=2')
}
.extra--bloggers span {
  background-image:url('../images/extra-bloggers-crop.png?v=2')
}
.extra--target span {
  background-image:url('../images/extra-target-crop.png?v=2')
}
.prices:after {
  background-size:contain;
  background-position:right bottom
}
.process-card--meet .process-card__image,.process-card--analyse .process-card__image,.process-card--strategy .process-card__image,.process-card--publish .process-card__image,.process-card--improve .process-card__image {
  background-position:center!important;
  background-size:contain!important
}
.extra--presentations span,.extra--infographics span,.extra--print span,.extra--guides span,.extra--bloggers span,.extra--target span {
  background-position:center!important;
  background-size:contain!important
}
/* Final collision-safe layout: artwork always owns its own grid area. */ .contact__layout {
  align-items:start
}
.contact__intro {
  min-width:0
}
.contact__intro>p {
  max-width:34rem;
  margin-bottom:0;
  line-height:1.35
}
.contact__image {
  width:min(100%,30rem);
  margin-top:1.5rem;
  aspect-ratio:1091/814;
  background-size:contain
}
.contact-card {
  min-width:0;
  margin-top:clamp(1rem,5vw,5rem)
}
.extras__details {
  grid-template-columns:minmax(15rem,1fr) minmax(20rem,1.25fr) minmax(17rem,1fr);
  gap:clamp(2rem,4vw,4rem);
  align-items:center
}
.extras__details>* {
  min-width:0
}
.extras__art {
  width:100%;
  max-width:30rem;
  justify-self:center;
  aspect-ratio:1469/566;
  background-size:contain
}
.prices {
  padding-bottom:clamp(12rem,17vw,15rem)
}
.prices:after {
  right:max(var(--gutter),calc((100vw - var(--content))/2));
  bottom:0;
  width:clamp(10rem,14vw,13rem);
  aspect-ratio:693/662;
  background-size:contain
}
.price-card--strategy {
  position:relative;
  z-index:1
}
.plans__layout {
  grid-template-columns:minmax(20rem,22rem) minmax(0,1fr);
  gap:clamp(3rem,4vw,4rem)
}
.plans__intro,.plans__table-wrap {
  min-width:0
}
.plans__intro:after {
  width:min(100%,22rem)!important;
  max-width:22rem!important;
  margin:2rem auto 0!important;
  aspect-ratio:899/506;
  background-size:contain!important
}
.plans__table {
  vertical-align:middle
}
.plans__table th,.plans__table td {
  text-align:center;
  vertical-align:middle
}
@media(max-width:62rem) {
  .plans__layout {
    grid-template-columns:1fr
  }
  .extras__details {
    grid-template-columns:1fr 1fr
  }
  .extras__details article {
    grid-column:1/-1
  }
  .contact-card {
    margin-top:0
  }
  .prices {
    padding-bottom:8rem
  }
  .prices:after {
    width:9rem;
    opacity:.45
  }
}
@media(max-width:46rem) {
  .contact__image {
    width:min(100%,25rem);
    margin-inline:auto
  }
  .extras__details {
    grid-template-columns:1fr;
    text-align:left
  }
  .extras__details article {
    grid-column:auto
  }
  .extras__art {
    max-width:24rem
  }
  .plans__intro:after {
    max-width:18rem!important
  }
  .plans__table-wrap {
    margin-inline:0
  }
  .prices {
    padding-bottom:6rem
  }
  .prices:after {
    width:7rem
  }
}
/* Single desktop composition, measured from the exported 1440 px Figma frame. */ .extra span,.extras__art,.contact__image,.plans__intro:after,.prices:after {
  image-rendering:auto
}
@media(min-width:80rem) {
  :root {
    --content:1260px;
    --gutter:clamp(2rem,4vw,5rem);
    --section:0
  }
  body {
    font-size:16px
  }
  h2 {
    font-size:4rem;
    font-weight:700
  }
  .header__inner {
    min-height:130px
  }
  .hero {
    min-height:870px
  }
  .hero__content {
    justify-content:flex-start;
    padding-top:115px
  }
  .hero__title {
    max-width:540px;
    margin-bottom:20px
  }
  .hero__brand {
    font-size:350px
  }
  .hero__tagline,.hero__title em {
    font-size:90px
  }
  .hero__umbrella {
    left:47.5%;
    right:auto;
    bottom:0;
    width:min(83.54vw,1203px);
    aspect-ratio:1203/802;
    background-size:contain;
    background-position:left bottom
  }
  .process {
    height:500px;
    padding:68px 0 54px
  }
  .process>.container {
    width:1260px;
    max-width:calc(100% - 160px)
  }
  .process h2 {
    margin:0 0 64px 0
  }
  .process__list {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:36px
  }
  .process-card {
    display:grid;
    width:190px;
    max-width:190px;
    grid-template-rows:116px auto 1fr;
    align-content:start;
    justify-self:center
  }
  /* The exported cut-outs have transparent padding on the right.  The
     optical centre is 14 px left of the bitmap centre. */ .process-card__image {
    width:178px;
    height:116px;
    max-width:178px;
    margin:0 auto;
    transform:translateX(-14px)
  }
  .process-card h3 {
    margin:14px 0 7px;
    font-size:16px
  }
  .benefits {
    height:800px;
    padding:62px 0 48px
  }
  .benefits__layout {
    grid-template-columns:44% 56%;
    gap:0;
    height:100%
  }
  .benefits__intro h2 {
    font-size:64px;
    max-width:470px;
    margin-bottom:30px
  }
  .benefits__image {
    width:500px;
    max-width:100%;
    margin-top:auto
  }
  .benefits__list {
    gap:28px;
    padding-left:62px
  }
  .benefits__list li {
    grid-template-columns:72px 1fr;
    gap:28px
  }
  .benefits__number {
    font-size:72px;
    font-weight:700
  }
  .benefits__list li>div {
    padding-top:44px
  }
  .services {
    height:1190px;
    padding:54px 0 42px
  }
  .services h2 {
    font-size:64px;
    margin-bottom:28px
  }
  .services>.container {
    width:1120px;
    max-width:calc(100% - 160px)
  }
  .services__list {
    grid-template-rows:repeat(3,335px);
    gap:0;
    align-content:start
  }
  .service,.service:nth-child(even) {
    height:335px;
    min-height:335px;
    grid-template-columns:320px minmax(0,1fr);
    grid-template-areas:'card description';
    gap:12px
  }
  .service:nth-child(even) {
    grid-template-columns:minmax(0,1fr) 320px;
    grid-template-areas:'description card'
  }
  .service__card {
    grid-area:card;
    min-width:0
  }
  .service__description {
    grid-area:description
  }
  .service:nth-child(even) .service__image {
    order:0
  }
  /* 270 px is the actual Figma artwork box.  Keeping the caption inside the
     335 px row prevents the last card from being clipped by the section. */ .service__image {
    width:270px;
    height:270px;
    aspect-ratio:auto;
    overflow:hidden
  }
  .service h3 {
    font-size:16px;
    margin:8px 0 5px
  }
  .service__caption {
    font-size:13px;
    margin:0
  }
  .service__description {
    max-width:720px;
    font-size:16px;
    line-height:1.38;
    margin:0;
    align-self:center
  }
  .prices {
    height:690px;
    padding:62px 0 0
  }
  .prices>.container {
    max-width:1100px
  }
  .prices h2 {
    font-size:64px;
    margin-bottom:52px
  }
  .prices__grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
  }
  .price-column {
    gap:14px
  }
  .price-card--extra {
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    padding:1rem 1rem 1rem 3.35rem;
    align-items:center
  }
  .price-card--extra h3 {
    text-align:center;
    line-height:1.2;
    margin:0
  }
  .price-card--extra .price-card__value {
    justify-self:end
  }
  .price-card--extra:before {
    content:none
  }
  .price-card__plus {
    position:absolute;
    left:1rem;
    top:50%;
    translate:0 -50%;
    display:grid;
    width:24px;
    height:24px;
    place-items:center;
    border:1.5px solid var(--ink);
    border-radius:50%;
    font:400 19px/1 Manrope,sans-serif
  }
  .prices:after {
    right:max(var(--gutter),calc((100vw - 1260px)/2));
    bottom:32px;
    width:240px
  }
  .plans {
    height:520px;
    padding:48px 0 0
  }
  .plans__layout {
    grid-template-columns:390px minmax(0,1fr);
    gap:54px
  }
  .plans__intro h2 {
    font-size:58px;
    max-width:390px;
    margin-bottom:26px
  }
  .plans__intro:after {
    width:310px!important;
    max-width:310px!important;
    margin:22px auto 0!important
  }
  .plans__table-wrap {
    padding-top:54px;
    overflow:visible
  }
  .plans__table {
    min-width:0;
    font-size:14px
  }
  .plans__table th,.plans__table td {
    height:72px;
    padding:10px 8px;
    text-align:center;
    vertical-align:middle
  }
  .plans__table tbody tr:first-child>* {
    height:96px
  }
  .extras {
    height:1080px;
    padding:54px 0 46px
  }
  .extras h2 {
    font-size:64px;
    margin-bottom:58px
  }
  .extras__list {
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:88px;
    row-gap:0
  }
  .extra span {
    width:190px;
    max-width:190px;
    height:170px;
    aspect-ratio:auto
  }
  .extras__details {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:88px;
    margin:64px 0 58px
  }
  .extras__details>div:first-child {
    align-items:center;
    text-align:center
  }
  .extras__art {
    width:100%;
    max-width:390px
  }
  .contact {
    height:760px;
    padding:58px 0 38px
  }
  .contact__layout {
    grid-template-columns:1fr 1fr;
    gap:86px;
    align-items:start
  }
  .contact__intro h2 {
    font-size:64px;
    max-width:520px;
    margin-bottom:18px
  }
  .contact__intro h2 em {
    display:inline
  }
  .contact__intro>p {
    margin-bottom:18px
  }
  .contact__image {
    width:480px;
    max-width:100%;
    margin-top:0
  }
  .contact-card {
    margin-top:62px
  }
  .footer {
    min-height:0;
    padding:42px 0 32px
  }
}
/* Stable price add-on layout at every viewport. */ .price-card--extra:before {
  content:none
}
.price-card--extra {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:1rem 1rem 1rem 3.35rem
}
.price-card--extra h3 {
  min-width:0;
  text-align:center;
  line-height:1.2;
  margin:0
}
.price-card--extra .price-card__value {
  justify-self:end
}
.price-card__plus {
  position:absolute;
  left:1rem;
  top:50%;
  translate:0 -50%;
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border:1.5px solid var(--ink);
  border-radius:50%;
  font:400 19px/1 Manrope,sans-serif
}
@media(max-width:46rem) {
  .price-card--extra {
    grid-template-columns:1fr;
    padding:1.2rem 1.2rem 1.2rem 3.6rem;
    gap:8px
  }
  .price-card--extra .price-card__value {
    grid-column:1;
    justify-self:center;
    white-space:normal
  }
}
/* Final Figma-export alignment pass. Keep this block last in the cascade. */ @media(min-width:80rem) {
  .hero {
    height:870px;
    min-height:870px;
    overflow:hidden
  }
  .hero__content {
    padding-top:115px;
    padding-left:54px;
    align-items:flex-start
  }
  .hero__title,.hero__text,.hero__content>.button {
    margin-left:0
  }
  .hero__title {
    width:540px;
    max-width:540px
  }
  /* Compensate the built-in left side bearing of the display font. */ .hero__brand {
    transform:translateX(-.04em)
  }
  .hero__umbrella {
    left:auto;
    right:-1rem;
    bottom:0;
    width:min(66vw,1200px);
    aspect-ratio:3/2;
    background-size:contain;
    background-position:right bottom
  }
  .process__list {
    grid-template-columns:repeat(5,190px);
    gap:0;
    justify-content:space-between
  }
  .process-card {
    width:190px;
    max-width:190px;
    overflow:visible;
    text-align:left
  }
  .process-card__image {
    width:178px;
    height:116px;
    max-width:178px;
    margin-inline:auto;
    justify-self:center;
    transform:none!important;
    background-position:center!important;
    background-size:contain!important
  }
  .process-card h3,.process-card p {
    width:190px;
    max-width:190px;
    margin-left:0;
    margin-right:0;
    transform:translateX(38px)
  }
  .prices>.container {
    width:1260px;
    max-width:calc(100% - 160px)
  }
  .prices h2 {
    margin:0 0 52px 0
  }
  .prices__grid {
    max-width:1100px;
    margin-inline:auto
  }
  .prices:after {
    right:90px;
    bottom:0;
    width:240px;
    aspect-ratio:693/662;
    background-size:contain;
    background-position:right bottom
  }
  .prices .price-card--extra {
    position:relative;
    display:grid;
    grid-template-columns:26px minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:16px
  }
  .prices .price-card--extra .price-card__plus {
    position:static;
    inset:auto;
    translate:none;
    width:24px;
    height:24px;
    justify-self:center;
    align-self:center
  }
  .prices .price-card--extra h3 {
    text-align:center;
    line-height:1.15
  }
  .plans__table-wrap {
    padding-top:78px
  }
  .plans__intro h2 {
    width:390px;
    max-width:390px
  }
  /* Exact desktop composition measured against the 1440 x 6810 source frame. */ :root {
    --content:1180px;
    --gutter:clamp(2rem,4vw,5rem);
    --section:0
  }
  .header__inner {
    width:1260px;
    min-height:127px
  }
  .hero {
    height:872px;
    min-height:872px
  }
  .hero__content {
    width:1260px;
    padding:70px 0 0 68px
  }
  .hero__title {
    width:540px;
    max-width:540px
  }
  .hero__taglines {
    margin-top:12px
  }
  .hero__title {
    margin-bottom:28px
  }
  .hero__text {
    margin-bottom:28px
  }
  .hero__umbrella {
    left:auto;
    right:-56px;
    bottom:0;
    width:1120px;
    aspect-ratio:1203/802;
    background-size:contain;
    background-position:right bottom
  }
  .process {
    height:499px;
    padding:68px 0 54px
  }
  .process>.container {
    width:1180px;
    max-width:1180px
  }
  .process h2 {
    margin:0 0 47px 50px
  }
  .process__list {
    grid-template-columns:repeat(5,190px);
    gap:0;
    justify-content:space-between
  }
  .process-card {
    grid-template-rows:145px auto 1fr
  }
  .process-card__image {
    width:205px;
    height:145px;
    max-width:205px
  }
  .process-card h3 {
    margin-top:36px
  }
  .process-card h3,.process-card p {
    transform:translateX(18px)
  }
  .benefits {
    height:804px;
    padding:86px 0 48px
  }
  .benefits__layout {
    width:1094px;
    grid-template-columns:530px 564px;
    gap:0
  }
  .benefits__intro h2 {
    max-width:510px;
    margin:0 0 30px 7px
  }
  .benefits__image {
    width:700px;
    max-width:700px;
    margin-top:auto;
    margin-left:-125px;
    transform:translateY(-25px)
  }
  .benefits__list {
    gap:48px;
    padding-left:62px
  }
  .benefits__list li>div:before {
    transform:rotate(90deg)
  }
  .services {
    height:1196px;
    padding:70px 0 42px
  }
  .services>.container {
    width:1080px;
    max-width:1080px
  }
  .services h2 {
    margin-bottom:0
  }
  .services__list {
    grid-template-rows:repeat(3,350px);
    gap:0;
    transform:translateY(-30px)
  }
  .service,.service:nth-child(even) {
    height:350px;
    min-height:350px;
    grid-template-columns:300px minmax(0,1fr);
    grid-template-areas:'card description';
    gap:10px
  }
  .service:nth-child(even) {
    grid-template-columns:minmax(0,1fr) 300px;
    grid-template-areas:'description card'
  }
  .service__description {
    transform:none
  }
  .prices {
    height:692px;
    padding:62px 0 0
  }
  .prices>.container {
    width:1260px;
    max-width:1260px
  }
  .prices h2 {
    margin:0 0 52px 90px
  }
  .prices__grid {
    width:1260px;
    max-width:none;
    margin:0;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
  }
  .prices:after {
    right:80px;
    bottom:0;
    width:560px;
    aspect-ratio:3/2;
    background-image:url('../images/prices-decor.png');
    background-size:contain;
    background-position:right bottom
  }
  .plans {
    height:522px;
    padding:48px 0 0
  }
  .plans__layout {
    width:1080px;
    grid-template-columns:450px minmax(0,1fr);
    gap:29px
  }
  .plans__table-wrap {
    padding-top:54px
  }
  .plans__intro h2 {
    width:450px;
    max-width:450px
  }
  .plans__intro:after {
    width:410px!important;
    max-width:410px!important;
    margin-left:-15px!important
  }
  .extras {
    height:1080px;
    padding:54px 0 46px
  }
  .extras>.container {
    width:1080px;
    max-width:1080px
  }
  .extras__list {
    grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:88px
  }
  .extras__details {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:88px
  }
  .extras__art {
    width:445px;
    max-width:445px;
    translate:none
  }
  .extras__details article {
    translate:70px 0
  }
  .contact {
    height:757px;
    padding:89px 0 38px
  }
  .contact__layout {
    width:1120px;
    grid-template-columns:601px 428px;
    gap:91px
  }
  .contact__intro {
    padding-left:17px
  }
  .contact__intro h2 {
    width:650px;
    max-width:650px;
    margin:0 0 18px 3px
  }
  .contact__intro>p {
    width:580px;
    max-width:580px;
    white-space:normal
  }
  .contact__intro h2,.contact__intro>p {
    transform:translateY(-28px)
  }
  .contact__image {
    width:620px;
    max-width:620px;
    margin:-32px 0 0 -25px;
    transform:none
  }
  .contact-card {
    margin-top:72px
  }
  .footer {
    height:auto;
    min-height:0;
    padding:42px 0 32px
  }
  .footer>.container {
    width:1180px;
    max-width:calc(100% - 2*var(--gutter))
  }
}
/* Keep the complete price artwork: the old cropped bitmap lost its baseline. */ .prices:after {
  background-image:url('../images/prices-decor.png');
  aspect-ratio:3/2
}
@media(max-width:46rem) {
  .prices:after {
    width:15.5rem
  }
}
@media(min-width:46.01rem) and (max-width:62rem) {
  .prices:after {
    width:20rem
  }
}
@media(min-width:62.01rem) and (max-width:79.99rem) {
  .process h2,.prices h2 {
    margin-left:0
  }
  .prices>.container {
    max-width:none
  }
  .process-card h3,.process-card p {
    width:min(100%,10.5rem);
    margin-left:auto;
    margin-right:auto
  }
  .prices:after {
    right:2rem;
    width:29rem
  }
}
/* Modern sources keep the original PNG geometry as a browser fallback. */ .logo picture {
  display:block
}
.hero__background {
  background-image:url('../images/hero-bg.png');
  background-image:image-set(url('../images/hero-bg.webp') type('image/webp'),url('../images/hero-bg.png') type('image/png'))
}
.hero__umbrella {
  background-image:url('../images/hero-exact.png');
  background-image:image-set(url('../images/hero-exact.webp') type('image/webp'),url('../images/hero-exact.png') type('image/png'))
}
.process-card--meet .process-card__image {
  background-image:url('../images/process-meet.png');
  background-image:image-set(url('../images/process-meet.webp') type('image/webp'),url('../images/process-meet.png') type('image/png'))
}
.process-card--analyse .process-card__image {
  background-image:url('../images/process-analyse.png');
  background-image:image-set(url('../images/process-analyse.webp') type('image/webp'),url('../images/process-analyse.png') type('image/png'))
}
.process-card--strategy .process-card__image {
  background-image:url('../images/process-strategy.png');
  background-image:image-set(url('../images/process-strategy.webp') type('image/webp'),url('../images/process-strategy.png') type('image/png'))
}
.process-card--publish .process-card__image {
  background-image:url('../images/process-publish-crop.png');
  background-image:image-set(url('../images/process-publish-crop.webp') type('image/webp'),url('../images/process-publish-crop.png') type('image/png'))
}
.process-card--improve .process-card__image {
  background-image:url('../images/process-improve.png');
  background-image:image-set(url('../images/process-improve.webp') type('image/webp'),url('../images/process-improve.png') type('image/png'))
}
/* Below-fold artwork is requested shortly before its section becomes visible. */ [data-lazy-art] .benefits__image, [data-lazy-art].services:before, [data-lazy-art] .service__image:before, [data-lazy-art].prices:after, [data-lazy-art].plans:before, [data-lazy-art] .plans__intro:after, [data-lazy-art] .extra span, [data-lazy-art] .extras__art, [data-lazy-art] .contact__image {
  background-image:none
}
.benefits[data-art-loaded] .benefits__image {
  background-image:url('../images/benefits-umbrella.png');
  background-image:image-set(url('../images/benefits-umbrella.webp') type('image/webp'),url('../images/benefits-umbrella.png') type('image/png'))
}
.services[data-art-loaded]:before,.plans[data-art-loaded]:before {
  background-image:url('../images/hero-bg.png');
  background-image:image-set(url('../images/hero-bg.webp') type('image/webp'),url('../images/hero-bg.png') type('image/png'))
}
.services[data-art-loaded] .service__image:before {
  background-image:url('../images/services-sprite.png');
  background-image:image-set(url('../images/services-sprite.webp') type('image/webp'),url('../images/services-sprite.png') type('image/png'))
}
.prices[data-art-loaded]:after {
  background-image:url('../images/prices-decor.png');
  background-image:image-set(url('../images/prices-decor.webp') type('image/webp'),url('../images/prices-decor.png') type('image/png'))
}
.plans[data-art-loaded] .plans__intro:after {
  background-image:url('../images/plans-decor-crop.png');
  background-image:image-set(url('../images/plans-decor-crop.webp') type('image/webp'),url('../images/plans-decor-crop.png') type('image/png'))
}
.extras[data-art-loaded] .extra--presentations span {
  background-image:url('../images/extra-presentations-crop.png');
  background-image:image-set(url('../images/extra-presentations-crop.webp') type('image/webp'),url('../images/extra-presentations-crop.png') type('image/png'))
}
.extras[data-art-loaded] .extra--infographics span {
  background-image:url('../images/extra-infographics-crop.png');
  background-image:image-set(url('../images/extra-infographics-crop.webp') type('image/webp'),url('../images/extra-infographics-crop.png') type('image/png'))
}
.extras[data-art-loaded] .extra--print span {
  background-image:url('../images/extra-print-crop.png');
  background-image:image-set(url('../images/extra-print-crop.webp') type('image/webp'),url('../images/extra-print-crop.png') type('image/png'))
}
.extras[data-art-loaded] .extra--guides span {
  background-image:url('../images/extra-guides-crop.png');
  background-image:image-set(url('../images/extra-guides-crop.webp') type('image/webp'),url('../images/extra-guides-crop.png') type('image/png'))
}
.extras[data-art-loaded] .extra--bloggers span {
  background-image:url('../images/extra-bloggers-crop.png');
  background-image:image-set(url('../images/extra-bloggers-crop.webp') type('image/webp'),url('../images/extra-bloggers-crop.png') type('image/png'))
}
.extras[data-art-loaded] .extra--target span {
  background-image:url('../images/extra-target-crop.png');
  background-image:image-set(url('../images/extra-target-crop.webp') type('image/webp'),url('../images/extra-target-crop.png') type('image/png'))
}
.extras[data-art-loaded] .extras__art {
  background-image:url('../images/extras-decor-crop.png');
  background-image:image-set(url('../images/extras-decor-crop.webp') type('image/webp'),url('../images/extras-decor-crop.png') type('image/png'))
}
.contact[data-art-loaded] .contact__image {
  background-image:url('../images/contact-umbrella-crop.png');
  background-image:image-set(url('../images/contact-umbrella-crop.webp') type('image/webp'),url('../images/contact-umbrella-crop.png') type('image/png'))
}