/* Изолированный блок Online Oil — Как это работает */
.oo-how { background:#fff; color:#071c21; font-family:Arial,Helvetica,sans-serif; }
.oo-how *, .oo-how *::before, .oo-how *::after { box-sizing:border-box; }
.oo-how__inner { position:relative; isolation:isolate; width:95vw; max-width:1500px; margin-inline:auto; aspect-ratio:3 / 2; }
.oo-how__visual { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.oo-how__image { display:block; width:100%; height:100%; max-width:none; object-fit:contain; }
.oo-how__copy { width:40%; padding-top:14%; position:relative; }
.oo-how__eyebrow { margin:0 0 32px; font-size:clamp(12px,1.1vw,16px); line-height:1.4; letter-spacing:.26em; font-weight:700; color:#009e90; }
.oo-how__title { margin:0; font-size:clamp(36px,4.25vw,66px); font-weight:900; line-height:1.08; letter-spacing:-.045em; color:#071419; }
.oo-how__title span { display:block; }
.oo-how__title .oo-how__accent { color:#00ae9c; }
.oo-how__description { margin:30px 0 0; font-size:clamp(16px,1.65vw,25px); line-height:1.5; color:#526177; }
.oo-how__description span { display:block; }
.oo-how__cta { display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:64px; margin-top:38px; padding:16px 38px; border:1px solid #ffdb4d; border-radius:14px; background:linear-gradient(115deg,#ffe342,#ffba00); box-shadow:0 10px 30px #ffcb2526; color:#091c20; text-decoration:none; font-size:20px; font-weight:700; line-height:1.25; transition:box-shadow .2s,transform .2s; }
.oo-how__cta svg { width:26px; height:26px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.oo-how__cta:hover { transform:translateY(-2px); box-shadow:0 12px 32px #ffcb2540; }
.oo-how__cta:focus-visible { outline:3px solid #007e73; outline-offset:5px; }
.oo-how__note { margin:14px 0 0; color:#526177; font-size:clamp(14px,1.3vw,20px); line-height:1.5; }
@media (min-width:901px) and (max-width:1150px) {
 .oo-how__eyebrow { margin-bottom:22px; }
 .oo-how__description { margin-top:20px; }
 .oo-how__cta { margin-top:24px; min-height:54px; padding:14px 24px; font-size:17px; }
}
@media (max-width:900px) {
 .oo-how__inner { aspect-ratio:auto; padding-top:48px; }
 .oo-how__copy { width:100%; padding:0 12px; max-width:650px; }
 .oo-how__eyebrow { margin-bottom:24px; }
 .oo-how__title { font-size:clamp(32px,6.6vw,58px); }
 .oo-how__description { font-size:clamp(17px,2.5vw,22px); margin-top:24px; }
 .oo-how__cta { margin-top:28px; }
 .oo-how__note { font-size:16px; }
 .oo-how__visual { position:relative; inset:auto; aspect-ratio:9 / 10; margin-top:16px; z-index:0; }
 .oo-how__image { position:absolute; top:0; right:0; width:166.6667%; height:100%; object-fit:fill; }
}
@media (max-width:400px) { .oo-how__cta { width:100%; padding-inline:16px; font-size:18px; } .oo-how__copy { padding-inline:8px; } }
@media (prefers-reduced-motion:reduce) { .oo-how__cta { transition:none; } .oo-how__cta:hover { transform:none; } }




/* Фон на всю ширину, текст — в общем контейнере */
@media (min-width: 901px) {
  .oo-how {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  .oo-how__inner {
    position: static;
    isolation: auto;
  }

  .oo-how__visual {
    position: absolute;
    inset: 0;
    z-index: -1;
  }

  .oo-how__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
}