/* Upright Roboto only, like the original: italics are browser-slanted and 600 renders as 700 */
@font-face{font-family:"Roboto";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/roboto-latin.woff2) format("woff2")}

/* Breakpoints (same as the original site):
   >=1200 desktop   | 960-1199 small desktop | 640-959 tablet (stacked) | <640 phone */
:root{--orange:#ef5d2b;--gray:#f6f6f6;--line:#eee;--wrap:1160px;--gap:40px;--edge:20px}
@media (max-width:1199px){:root{--wrap:940px;--gap:20px}}
@media (max-width:959px){:root{--wrap:600px;--edge:calc(50vw - 300px)}}
@media (max-width:639px){:root{--edge:20px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:"Roboto",Arial,sans-serif;color:#000;background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

.wrap{width:var(--wrap);margin:0 auto}
@media (max-width:639px){.wrap{width:auto;margin:0 20px}}

.grid2{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gap)}
@media (max-width:959px){.grid2{grid-template-columns:1fr}}

.h2{font-size:46px;line-height:1.2;font-weight:700}
@media (max-width:899px){.h2{font-size:38px;line-height:1.23}}
@media (max-width:639px){.h2{font-size:30px}}
.center{text-align:center}

.btn{display:inline-flex;align-items:center;justify-content:center;height:60px;padding:0 60px;border-radius:30px;background:var(--orange);color:#fff;font-size:16px;line-height:1.4;font-weight:700;text-align:center}
@media (max-width:1199px){.btn{padding:0 45px}}
@media (max-width:639px){.btn{padding:0 30px}}

/* ---------- header (desktop: fixed, slides in after 500px) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:990;height:60px;background:#fff;opacity:0;transform:translateY(-60px);transition:opacity .3s ease,transform .3s ease;pointer-events:none}
.nav.is-visible{opacity:1;transform:none;pointer-events:auto}
.nav__inner{height:60px;display:flex;align-items:center}
.nav__logo{font-size:20px;line-height:1.2;font-weight:400}
.nav__menu{display:flex;align-items:center;margin-left:auto;gap:30px}
.nav__menu a{font-size:16px;line-height:1.2}
.nav .nav__btn{margin-left:50px;height:40px;padding:0 30px;font-size:14px;font-weight:700}
.mbar{display:none}
@media (max-width:959px){
  .nav{display:none}
  .mbar{display:block;position:relative;z-index:990;background:#fff}
  .mbar__top{height:64px;padding:0 20px;display:flex;align-items:center;justify-content:space-between}
  .mbar__logo{font-size:20px;font-weight:400}
  .burger{width:28px;height:20px;position:relative}
  .burger span{position:absolute;left:0;width:100%;height:3px;background:#0d0d0d;transition:transform .2s ease,opacity .2s ease,top .2s ease}
  .burger span:nth-child(1){top:0}.burger span:nth-child(2),.burger span:nth-child(3){top:8px}.burger span:nth-child(4){top:16px}
  .mbar.is-open .burger span:nth-child(1),.mbar.is-open .burger span:nth-child(4){top:8px;width:0;left:50%}
  .mbar.is-open .burger span:nth-child(2){transform:rotate(45deg)}
  .mbar.is-open .burger span:nth-child(3){transform:rotate(-45deg)}
  .mbar__panel{display:none;background:#ececec;padding:30px 20px 40px;text-align:center}
  .mbar.is-open .mbar__panel{display:block}
  .mbar__panel a.mlink{display:block;font-size:16px;line-height:19px}
  .mbar__panel a.mlink+a.mlink{margin-top:20px}
  .mbar__panel .btn{margin:60px 0 30px;height:40px;padding:0 30px;font-size:14px;font-weight:700}
}
@media (max-width:480px){.mbar__logo{font-size:16px}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--gray);height:900px}
.hero__inner{height:100%;display:flex;align-items:center}
.hero__text{width:460px;color:#333}
.hero__title{font-size:52px;line-height:1;font-weight:700;padding-bottom:25px}
.hero__descr{font-size:18px;line-height:1.5;font-weight:300}
.hero__cta{margin-top:54px}
.hero__cta .btn{font-weight:700}
.hero__img{position:absolute;top:0;right:0;width:40%;height:100%;background:url(../img/olga-hero.webp) 50% 0/cover no-repeat}
@media (max-width:1199px){.hero__text{width:380px}}
@media (max-width:959px){
  .hero{height:auto;padding-top:70px}
  .hero__inner{display:block}
  .hero__text{width:auto}
  .hero__cta{margin-top:45px}
  .hero__img{position:static;width:100%;height:270px;margin-top:70px}
}
@media (max-width:899px){.hero__title{font-size:48px;line-height:1.23}}
@media (max-width:639px){.hero__title{font-size:30px}}

/* ---------- what I help with ---------- */
.help{padding:150px 0}
.help__title{font-size:46px;line-height:1.2;font-weight:700;margin-bottom:90px}
.help__list{row-gap:55px}
.help__item{display:flex;align-items:center}
.help__icon{flex:none;width:30px;height:30px;margin-right:20px}
.help__icon svg{display:block;width:30px;height:30px}
.help__text{font-size:18px;line-height:1.5}
.help__text strong{font-weight:700}
@media (max-width:959px){.help__title{margin-bottom:45px}.help__list{row-gap:40px}}
@media (max-width:899px){.help__title{font-size:38px;line-height:1.23}}
@media (max-width:639px){.help{padding:90px 0}.help__title{font-size:30px}}

/* ---------- services ---------- */
.services{background:var(--gray);padding:150px 0}
.services__title{font-weight:700;margin-bottom:40px}
.services__descr{max-width:560px;margin:0 auto 105px;font-size:18px;line-height:1.4;font-weight:300}
.cards{row-gap:40px}
.card{display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 15px 45px -10px rgba(39,45,66,.15);padding:40px 30px}
.card__title{font-size:32px;line-height:1.1;font-weight:700;text-align:center}
.card__up{margin:13px auto 0;max-width:270px;font-size:18px;line-height:1.55;color:var(--orange);text-align:center}
.card__price{margin-top:27px;font-size:24px;line-height:1.23;font-weight:700;text-align:center}
.card__descr{margin-top:25px;font-size:18px;line-height:1.4;font-weight:300}
.card__descr strong{font-weight:700}
.card__descr li{padding:10px}
.card__foot{margin-top:auto;padding-top:30px;text-align:center}
@media (max-width:959px){
  .services__title{margin-bottom:20px}
  .services__descr{margin-bottom:30px}
  .cards{row-gap:35px}
}
@media (max-width:899px){.card__title{font-size:20px;line-height:1.35}}
@media (max-width:639px){.services{padding:90px 0}.card__title{font-size:18px}}

/* ---------- about ---------- */
.about{padding:105px 0}
.about__inner{align-items:start}
.about__text{max-width:460px;align-self:center}
.about__up{margin-top:16px;max-width:400px;font-size:18px;line-height:1.4;font-weight:300;color:#727272}
.about__descr{margin-top:28px;font-size:18px;line-height:1.5}
.about__img{aspect-ratio:7/8;border-radius:12px;background:url(../img/olga-about.webp) 50% 50%/cover no-repeat}
@media (max-width:1199px){.about__text{max-width:380px}}
@media (max-width:959px){.about__text{max-width:none}.about__img{aspect-ratio:350/431;margin-top:30px}}

/* ---------- reviews ---------- */
.reviews{padding:135px 0;overflow:hidden}
.reviews__head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:90px}
.reviews__title{font-size:42px;line-height:1.23;font-weight:700;margin-top:-1px}
.reviews__ctrl{display:flex;gap:5px;margin-top:10px}
.arrow{width:40px;height:40px;border-radius:50%;background:var(--gray)}
.arrow svg{display:block;width:40px;height:40px}
.arrow--next svg{transform:scaleX(-1)}
.track{display:flex;gap:var(--gap);transition:transform .5s ease}
.review{flex:0 0 calc((var(--wrap) - var(--gap))/2);background:var(--gray);padding:40px}
.review__name{font-size:26px;line-height:1.31;font-weight:700}
.review__role{margin-top:10px;font-size:16px;line-height:1.3;color:#808080}
.review__text{margin-top:35px;font-size:20px;line-height:1.4;font-weight:300}
@media (max-width:1199px){
  .reviews__title{font-size:38px}
  .review__name{font-size:24px}
  .review__role{font-size:14px}
  .review__text{font-size:18px}
}
@media (max-width:959px){
  .reviews__head{margin-bottom:20px}
  .reviews__ctrl{display:none}
  .track{transform:none!important;transition:none;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1 * var(--edge));padding:0 var(--edge);scroll-padding:0 var(--edge)}
  .track::-webkit-scrollbar{display:none}
  .review{flex:0 0 calc(var(--wrap) * .95);scroll-snap-align:start}
}
@media (max-width:639px){
  .reviews{padding:90px 0}
  .reviews__title{font-size:30px}
  .review{flex-basis:calc(90vw - 18px);padding:30px 20px}
  .review__name{font-size:18px;line-height:1.22}
  .review__role{margin-top:4px}
  .review__text{margin-top:30px;font-size:16px}
}

/* swipe hint next to the review title on touch layouts */
.reviews__head{position:relative}
.swipe-hint{display:none;mix-blend-mode:multiply;position:absolute;right:0;top:5px}
.swipe-hint svg{display:block;overflow:hidden}
.swipe-hint__hand{animation:swipe-hand 2s infinite}
.swipe-hint__card{animation:swipe-card 2s infinite}
@keyframes swipe-hand{0%{transform:translateX(80px) scale(1);opacity:0}10%{transform:translateX(80px) scale(1);opacity:1}20%,60%{transform:translateX(175px) scale(.6);opacity:1}80%{transform:translateX(5px) scale(.6);opacity:1}to{transform:translateX(5px) scale(.6);opacity:0}}
@keyframes swipe-card{0%,60%{transform:translateX(0)}80%,to{transform:translateX(-240px)}}
@media (max-width:959px){.swipe-hint{display:block}}

/* ---------- how I work ---------- */
.how{padding:150px 0}
.how__inner{align-items:start}
.how__head{position:sticky;top:150px}
.how__title{line-height:1.23}
.how__descr{margin-top:20px;font-size:18px;line-height:1.5;font-weight:300}
.steps{display:flex;flex-direction:column;gap:40px}
.step{background:var(--gray);border-radius:12px;padding:40px 30px}
.step__icon{width:60px;height:60px;border-radius:50%;background:var(--orange);padding:10px}
.step__icon svg{display:block;width:40px;height:40px;fill:#fff}
.step__title{margin-top:24px;font-size:24px;line-height:1.35;font-weight:500}
.step__text{margin-top:14px;font-size:18px;line-height:1.5}
@media (max-width:959px){.how__head{position:static;margin-bottom:80px}}
@media (max-width:639px){.how{padding:90px 0}.how__head{margin-bottom:64px}.how__descr{line-height:1.4}.step{padding:30px}}

/* ---------- FAQ ---------- */
.faq{padding:90px 0}
.faq__inner{align-items:start}
.faq__item{border-top:1px solid var(--line)}
.faq__list{border-bottom:1px solid var(--line)}
.faq__q{position:relative;display:block;width:100%;text-align:left;padding:27px 50px 27px 0;font-size:24px;line-height:1.35;font-weight:700}
.faq__icon{position:absolute;right:0;top:50%;width:40px;height:40px;margin-top:-20px;fill:transparent;stroke:var(--orange);transition:fill .2s,stroke .2s,transform .3s}
.faq__icon circle{stroke-width:0}
.faq__icon path{stroke-width:2px;fill:none}
@media (hover:hover){.faq__q:hover .faq__icon{fill:var(--orange);stroke:#fff}}
.faq__q:focus-visible .faq__icon{fill:var(--orange);stroke:#fff}
.faq__item.is-open .faq__icon{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a-in{padding:0 0 40px;font-size:18px;line-height:1.55;font-weight:400}
.faq__a-in strong{font-weight:700}
.faq__a-in ul{list-style:disc;padding-left:20px;margin-bottom:10px}
@media (max-width:959px){.faq__title{margin-bottom:45px}}
@media (max-width:639px){.faq__title{margin-bottom:47px}.faq__q{padding:15px 50px 14px 0}.faq__a-in{padding-bottom:25px;line-height:1.45}}

/* ---------- CTA ---------- */
.cta{background:var(--orange);color:#fff;padding:60px 0;text-align:center}
.cta__icon{display:block;width:55px;height:55px;margin:0 auto;fill:#fff}
.cta__text{max-width:760px;margin:41px auto 0;font-size:22px;line-height:1.23}
.cta__text strong{font-size:26px;font-weight:700}
.cta__btns{margin-top:45px;margin-bottom:10px;display:flex;justify-content:center;gap:10px}
.cta__btn{display:inline-block;background:#fff;color:#000;border:1px solid transparent;border-radius:30px;padding:12px 29px 11px;font-size:18px;line-height:1.55}
@media (max-width:1199px){.cta__text{max-width:620px}.cta__text strong{font-size:24px}.cta__btn{font-size:16px}}
@media (max-width:959px){.cta__text{max-width:600px}}
@media (max-width:639px){
  .cta__text{max-width:none;margin-top:41px}
  .cta__text strong{font-size:22px}
  .cta__btns{margin-top:40px;flex-direction:column;align-items:center}
  .cta__btn{padding:8px 25px 10px;font-size:14px;line-height:1.45}
  .cta__btn:first-child{margin-right:10px}
}

/* ---------- footer ---------- */
.foot{padding:67px 20px;text-align:center;font-size:12px;line-height:1.6;font-weight:300;color:#6b6b6b}

/* ---------- policy pages ---------- */
.policy{padding:68px 0 66px}
.policy__body{width:760px;margin:0 auto;font-size:20px;line-height:1.55;font-weight:300}
.policy__body strong{font-weight:700}
.policy__body ul{list-style:disc;padding-left:20px;margin-bottom:10px}
@media (max-width:1199px){.policy__body{width:620px;font-size:18px}}
@media (max-width:959px){.policy__body{width:600px}}
@media (max-width:639px){.policy__body{width:auto;margin:0 20px;font-size:16px;line-height:1.45}}