/* OptiBrok — site stylesheet. One file for the public site, split into sections Plan 2 can lift out one by one:
   "block: <key>" holds the rules of one OptiBrok block (keys from spec 8); "shared: <name>" holds what several blocks or
   every page use (base, keyframes, components, buttons, form fields, the page chrome: header, drawer, mobile bar, footer).
   Values come from the design handoff; responsive rules follow spec 4 and sit right after the section they change. */
@import url("../fonts/fonts.css");

/* shared: base — tokens, the element defaults of the design system that show in the design (body 15px/1.55,
   headings 800), the resets of the prototype itself and the page container */
:root {
  --ob-red: #F10E19;
  --ob-red-light: #FF5A62;
  --ob-red-hover: #C20A13;
  --ob-red-tint: #FDE7E8;
  --ob-ink: #141414;
  --ob-dark: #1b1d21;
  --ob-dark-2: #1f2023;
  --ob-dark-line: #2c2d31;
  --ob-muted: #5d6168;
  --ob-muted-2: #4a4e55;
  --ob-page: #dfe2e7;
  --ob-light: #f4f5f7;
  --ob-gray: #F3F4F6;
  --ob-gray-2: #ECEEF1;
  --ob-blue: #d3d9e1;
  --ob-border: #d5d8dd;
  --ob-border-2: #c9ced6;
  --ob-font: 'Archivo', system-ui, sans-serif;
  --ob-r-section: 28px;
  --ob-r-card: 24px;
  --ob-r-btn: 14px;
  --ob-shadow-pop: 0 24px 60px rgba(0, 0, 0, .22);
  --ob-shadow-card: 0 24px 50px rgba(20, 20, 20, .12);
  --ob-shadow-red: 0 12px 30px rgba(241, 14, 25, .45);
  --ob-ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--ob-page); font-family: var(--ob-font); font-size: 15px; line-height: 1.55; font-weight: 400; color: var(--ob-ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ob-font); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 8px; }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 12px; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ob-red); }
select, input, textarea, button { font-family: inherit; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--ob-red); outline-offset: 3px; }
.ob-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.ob-page { max-width: 1680px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; }
.ob-main { display: flex; flex-direction: column; gap: 16px; }
.ob-section { border-radius: var(--ob-r-section); padding: clamp(24px, 3.2vw, 48px); }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--ob-min, 300px)), 1fr)); }
@media (max-width: 599.98px) {
  :root { --ob-r-section: 22px; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .ob-page { padding: 10px; gap: 10px; }
  .ob-main { gap: 10px; }
  .ob-section { padding: 24px 18px; }
}

/* shared: keyframes — the design keyframes, same names and values (README "Interactions"); reduced motion stops them */
@keyframes obMarq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes obMarqR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes obProg { from { width: 0; } to { width: 100%; } }
@keyframes obPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes obDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes obPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); } 70% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes obRevealSafety { to { opacity: 1; transform: none; } }
@keyframes obZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes obFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes obSlideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes obBarIn { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* shared: components — kicker, section heading, section backgrounds */
.ob-kicker { align-self: flex-start; padding: 7px 12px; background: #fff; border-radius: 10px; font: 500 14px var(--ob-font); }
.ob-kicker--gray { background: var(--ob-gray); }
.ob-h2 { margin: 0; font: 700 clamp(30px, 3vw, 46px)/1.08 var(--ob-font); letter-spacing: -0.03em; }
.ob-section--white { background: #fff; }
.ob-section--light { background: var(--ob-light); }
.ob-section--blue { background: var(--ob-blue); }
.ob-section--dark { background: var(--ob-ink); color: #fff; }
.ob-section--red { background: var(--ob-red); color: #fff; }
@media (max-width: 1179.98px) {
  h1, h2, h3, .ob-h2, .ob-h3, [class*="__title"] { text-wrap: balance; }
}

/* shared: buttons */
.ob-btn { display: inline-flex; align-items: center; gap: 24px; padding: 15px 18px; border-radius: var(--ob-r-btn); border: 0; cursor: pointer; font: 600 15px var(--ob-font); transition: transform .3s, box-shadow .3s, background .25s, color .25s; }
.ob-btn--red { background: var(--ob-red); color: #fff; }
.ob-btn--red:hover { color: #fff; background: var(--ob-red-hover); }
.ob-btn--dark { background: var(--ob-ink); color: #fff; }
.ob-btn--dark:hover { color: #fff; background: var(--ob-red); }
.ob-btn__arrow { width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, .2); display: grid; place-items: center; }
.ob-btn--white { background: #fff; color: var(--ob-ink); }
.ob-btn--white:hover { background: var(--ob-ink); color: #fff; }

/* shared: reveal — README "Interactions" (data-ob-reveal, ob.js initReveal) */
/* Only when JS runs. ob.js sets --ob-d = (index % 4) x .06s and adds is-in; the reveal transition applies until is-done,
   after which each component keeps only its own (hover) transitions. :where(.ob-js) adds no specificity, so the hidden
   state stays at (0,2,0): [data-ob-reveal] plus :not(.is-in). */
:where(.ob-js) [data-ob-reveal]:not(.is-in) { opacity: 0; transform: translateY(24px); animation: obRevealSafety 0s 6s forwards; } /* shows everything if ob.js never runs */
@media (prefers-reduced-motion: reduce) { :where(.ob-js) [data-ob-reveal]:not(.is-in) { opacity: 1; transform: none; } }
.ob-js [data-ob-reveal]:not(.is-done) { transition: opacity .7s ease var(--ob-d, 0s), transform .8s var(--ob-ease) var(--ob-d, 0s); }

/* shared: header — rendered by the first block of the page (hero_slider or page_banner), absolute over it (design: top/left/right 16px) */
.ob-header { position: absolute; top: 16px; left: 16px; right: 16px; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; animation: obDown .8s var(--ob-ease) both; }
.ob-header__logo { background: #fff; border-radius: 16px; height: 56px; padding: 0 20px; display: flex; align-items: center; flex: none; }
.ob-header__logo img { height: 24px; display: block; }
.ob-header__actions { display: flex; gap: 8px; align-items: center; }
.ob-nav { display: flex; gap: 2px; padding: 6px; height: 56px; box-sizing: border-box; align-items: center; background: rgba(20, 20, 20, .38); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; }
.ob-nav__item { position: relative; }
.ob-nav__link { height: 44px; padding: 0 15px; border-radius: 11px; display: flex; align-items: center; gap: 6px; font: 500 14px var(--ob-font); white-space: nowrap; background: transparent; color: #fff; transition: background .25s, color .25s; }
.ob-nav__link:hover { color: #fff; }
.ob-nav__link.is-active, .ob-nav__link.is-active:hover { background: #fff; color: var(--ob-ink); }
.ob-nav__chev { font-size: 10px; opacity: .7; transition: transform .25s; transform: none; }
.is-open > .ob-nav__link .ob-nav__chev, .is-open > .ob-lang__toggle .ob-nav__chev { transform: rotate(180deg); }
.ob-nav__panel { position: absolute; top: 100%; left: 0; padding-top: 10px; z-index: 30; }
.ob-menu { width: 360px; background: #fff; border-radius: 18px; padding: 8px; box-shadow: var(--ob-shadow-pop); display: flex; flex-direction: column; gap: 2px; animation: obPop .25s var(--ob-ease) both; }
.ob-menu__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: #fff; transition: background .2s; color: var(--ob-ink); }
.ob-menu__item:hover { background: var(--ob-gray); color: var(--ob-ink); }
.ob-menu__thumb { width: 44px; height: 44px; border-radius: 11px; overflow: hidden; background: #eee; }
.ob-menu__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-menu__text { display: flex; flex-direction: column; gap: 2px; }
.ob-menu__title { display: flex; gap: 8px; align-items: center; font: 600 15px var(--ob-font); }
.ob-menu__new { padding: 2px 6px; border-radius: 6px; background: var(--ob-red); color: #fff; font: 700 10px var(--ob-font); letter-spacing: .05em; }
.ob-menu__sub { font: 400 13px var(--ob-font); color: #6b7078; }
.ob-lang { position: relative; }
.ob-lang__toggle { cursor: pointer; height: 56px; padding: 0 14px; border-radius: 16px; display: flex; align-items: center; gap: 10px; background: rgba(20, 20, 20, .38); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font: 600 14px var(--ob-font); }
.ob-lang__toggle img { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; display: block; }
.ob-lang__list { position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 200px; background: #fff; border-radius: 16px; padding: 6px; box-shadow: var(--ob-shadow-pop); display: flex; flex-direction: column; gap: 2px; animation: obPop .25s var(--ob-ease) both; }
.ob-lang__item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; background: #fff; font: 500 15px var(--ob-font); color: var(--ob-ink); }
.ob-lang__item:hover, .ob-lang__item.is-current { background: var(--ob-gray); color: var(--ob-ink); }
.ob-lang__item img { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; display: block; }
.ob-lang__name { flex: 1; }
.ob-lang__code { font: 600 12px var(--ob-font); color: #9aa0a8; }
.ob-lang__item.is-current .ob-lang__code { color: var(--ob-red); }
.ob-header__phone { height: 56px; gap: 10px; padding: 0 18px; border-radius: 16px; white-space: nowrap; background: var(--ob-red); }
.ob-header__phone:hover { background: var(--ob-red); transform: translateY(-2px); box-shadow: var(--ob-shadow-red); }
.ob-header__pulse { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: obPulse 2s infinite; }
.ob-header__phone-icon { display: none; }
.ob-burger { display: none; }
/* 1180-1359 (site build has 7 links): tighter nav so the header fits; never applies at 1440 */
@media (min-width: 1180px) and (max-width: 1359.98px) {
  .ob-header { gap: 8px; }
  .ob-nav { gap: 0; padding: 6px 4px; }
  .ob-nav__link { padding: 0 9px; }
  .ob-header__phone { padding: 0 14px; gap: 8px; }
}
/* < 1180 (spec 4, the prototype's narrow variant): logo, flag-only language toggle, phone, hamburger; the menu moves
   into the drawer. Below 640 the phone loses its text (as in the prototype) and shows a handset icon. */
@media (max-width: 1179.98px) {
  .ob-nav { display: none; }
  .ob-lang__toggle { width: 56px; padding: 0; justify-content: center; }
  .ob-lang__toggle > span { display: none; }
  .ob-burger { flex: none; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--ob-ink); cursor: pointer; }
  .ob-burger__lines, .ob-burger__lines::before, .ob-burger__lines::after { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; }
  .ob-burger__lines { position: relative; }
  .ob-burger__lines::before, .ob-burger__lines::after { content: ""; position: absolute; left: 0; }
  .ob-burger__lines::before { top: -6px; }
  .ob-burger__lines::after { top: 6px; }
}
@media (max-width: 639.98px) {
  .ob-header__phone { position: relative; width: 56px; padding: 0; justify-content: center; }
  .ob-header__phone-text { display: none; }
  .ob-header__phone-icon { display: block; width: 22px; height: 22px; }
  .ob-header__pulse { position: absolute; top: 9px; right: 9px; }
}
@media (max-width: 599.98px) {
  .ob-header { top: 10px; left: 10px; right: 10px; gap: 6px; }
  .ob-header__logo { height: 48px; padding: 0 clamp(10px, 3vw, 14px); border-radius: 14px; }
  .ob-header__logo img { height: 20px; }
  .ob-header__actions { gap: 6px; }
  .ob-lang__toggle, .ob-header__phone, .ob-burger { width: 48px; height: 48px; border-radius: 14px; }
}

/* shared: drawer — the menu below 1180 px, a modal at body level (ob.js initDrawer) */
.ob-drawer { position: fixed; inset: 0; z-index: 100; display: flex; justify-content: flex-end; background: rgba(12, 12, 14, .55); animation: obFade .25s ease both; }
.ob-drawer__panel { width: min(420px, 100%); height: 100%; overflow-y: auto; overscroll-behavior: contain; background: #fff; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; box-shadow: var(--ob-shadow-pop); animation: obSlideIn .35s var(--ob-ease) both; }
.ob-drawer__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ob-drawer__logo { height: 56px; padding: 0 4px; display: flex; align-items: center; }
.ob-drawer__logo img { height: 24px; }
.ob-drawer__close { width: 56px; height: 56px; border: 0; border-radius: 16px; background: var(--ob-gray); color: var(--ob-ink); cursor: pointer; font: 600 20px var(--ob-font); }
.ob-drawer__close:hover { background: var(--ob-gray-2); }
.ob-drawer__nav { display: flex; flex-direction: column; gap: 2px; }
.ob-drawer__link { width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; cursor: pointer; font: 600 17px var(--ob-font); color: var(--ob-ink); }
.ob-drawer__link:hover { background: var(--ob-gray); color: var(--ob-ink); }
.ob-drawer__link.is-active { background: var(--ob-gray); box-shadow: inset 3px 0 0 var(--ob-red); }
.ob-drawer__chev { font-size: 11px; opacity: .6; transition: transform .25s; }
.ob-drawer__toggle[aria-expanded="true"] .ob-drawer__chev { transform: rotate(180deg); }
.ob-drawer__sub { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 10px 16px; }
.ob-drawer__sublink { min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--ob-gray); display: flex; align-items: center; gap: 8px; font: 500 15px var(--ob-font); color: var(--ob-ink); }
.ob-drawer__sublink:hover { background: var(--ob-gray-2); color: var(--ob-ink); }
.ob-drawer__langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: 18px; border-top: 1px solid var(--ob-gray-2); }
.ob-drawer__lang { height: 48px; border: 1.5px solid var(--ob-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--ob-font); color: var(--ob-ink); }
.ob-drawer__lang:hover { border-color: var(--ob-ink); color: var(--ob-ink); }
.ob-drawer__lang.is-current { border-color: var(--ob-red); background: var(--ob-red-tint); }
.ob-drawer__lang img { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; }
.ob-drawer__contacts { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.ob-drawer__phone { height: 56px; justify-content: center; gap: 10px; border-radius: 16px; font-size: 16px; }
.ob-drawer__post { min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--ob-ink); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 14px var(--ob-font); }
.ob-drawer__post:hover { color: #fff; background: #2a2d33; }
.ob-drawer__post strong { font-weight: 600; margin-right: 6px; }
@media (min-width: 1180px) { .ob-drawer { display: none; } }

/* shared: mobile_bar — call / quote, below 600 px after the first screen (ob.js initSticky) */
.ob-mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 -8px 30px rgba(20, 20, 20, .14); animation: obBarIn .3s var(--ob-ease) both; }
.ob-mobile-bar__btn { height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px var(--ob-font); }
.ob-mobile-bar__icon { width: 20px; height: 20px; flex: none; }
.ob-mobile-bar__btn--call { background: var(--ob-ink); color: #fff; }
.ob-mobile-bar__btn--quote { background: var(--ob-red); color: #fff; }
.ob-mobile-bar__btn:hover { color: #fff; }
@media (min-width: 600px) { .ob-mobile-bar { display: none; } }

/* block: page_banner — sub-page header; variants without image, without contact cards and with buttons (404, Terms) */
.ob-banner { position: relative; border-radius: var(--ob-r-section); min-height: 420px; background: var(--ob-dark); display: flex; align-items: flex-end; }
.ob-banner__bg { position: absolute; inset: 0; overflow: hidden; border-radius: var(--ob-r-section); }
.ob-banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; animation: obZoom 12s ease-out both; }
.ob-banner__overlay { position: absolute; inset: 0; background: linear-gradient(rgba(10, 12, 16, .72), rgba(10, 12, 16, .86)); }
.ob-banner__inner { position: relative; width: 100%; padding: 130px clamp(20px, 3.5vw, 56px) 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; align-items: end; }
.ob-banner__text { display: flex; flex-direction: column; gap: 14px; }
.ob-breadcrumb { display: flex; gap: 8px; color: rgba(255, 255, 255, .7); font: 500 14px var(--ob-font); }
.ob-breadcrumb a { color: rgba(255, 255, 255, .7); }
.ob-breadcrumb__current { color: #fff; }
.ob-banner__title { margin: 0; color: #fff; font: 700 clamp(36px, 4.4vw, 64px)/1.02 var(--ob-font); letter-spacing: -0.035em; text-wrap: balance; }
.ob-banner__lead { margin: 0; color: rgba(255, 255, 255, .85); font: 400 18px/1.5 var(--ob-font); max-width: 640px; }
.ob-banner__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; justify-self: end; width: 100%; max-width: 560px; }
.ob-banner__card { padding: 16px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; display: flex; flex-direction: column; gap: 4px; }
a.ob-banner__card:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.ob-banner__card--red { background: var(--ob-red); border: 0; }
.ob-banner__card strong { font: 600 14px var(--ob-font); }
.ob-banner__label { font: 500 12px var(--ob-font); opacity: .7; }
.ob-banner__card--red .ob-banner__label { opacity: .85; }
.ob-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 1179.98px) {
  .ob-banner__cards { justify-self: start; }
}
@media (max-width: 833.98px) {
  .ob-breadcrumb { align-items: center; }
  .ob-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
}
@media (max-width: 599.98px) {
  .ob-banner { min-height: 0; }
  .ob-banner__inner { padding: 100px 18px 18px; gap: 22px; }
  .ob-banner__title { font-size: clamp(32px, 9vw, 44px); }
  .ob-banner__lead { font-size: 16px; }
  .ob-banner__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 8px; max-width: none; }
  .ob-banner__card { padding: 12px 14px; border-radius: 14px; }
  .ob-banner__card:nth-child(2) { grid-column: 1 / -1; }
  .ob-banner__actions { gap: 8px; }
  .ob-banner__actions > * { flex: 1 1 100%; min-height: 52px; justify-content: center; }
}

/* block: cta_band */
.ob-cta { background: var(--ob-red); color: #fff; border-radius: var(--ob-r-section); padding: clamp(28px, 3.2vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: end; gap: 24px 48px; }
.ob-cta__text { display: flex; flex-direction: column; gap: 12px; }
.ob-cta__kicker { font: 500 15px var(--ob-font); }
.ob-cta__title { margin: 0; font: 700 clamp(32px, 4vw, 60px)/1 var(--ob-font); letter-spacing: -0.035em; }
.ob-cta__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.ob-cta__btn { display: flex; gap: 24px; padding: 16px 22px; border-radius: 14px; font: 600 16px var(--ob-font); }
.ob-cta__btn--dark { background: var(--ob-ink); color: #fff; transition: transform .3s; }
.ob-cta__btn--dark:hover { color: #fff; transform: translateY(-2px); }
.ob-cta__btn--light { background: #fff; color: var(--ob-ink); }
.ob-cta__btn--light:hover { color: var(--ob-ink); }
@media (max-width: 1179.98px) {
  .ob-cta__actions { justify-content: flex-start; }
}
@media (max-width: 599.98px) {
  .ob-cta { padding: 28px 18px 18px; }
  .ob-cta__title { font-size: clamp(28px, 8.4vw, 40px); line-height: 1.05; text-wrap: balance; }
  .ob-cta__actions { flex-direction: column; gap: 8px; }
  .ob-cta__btn { min-height: 56px; align-items: center; justify-content: center; gap: 12px; }
}

/* shared: footer */
.ob-footer { background: var(--ob-ink); color: #fff; border-radius: var(--ob-r-section); padding: clamp(28px, 3.2vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 32px; }
.ob-footer__brand { display: flex; flex-direction: column; gap: 16px; grid-column: span 2; min-width: 0; }
.ob-footer__logo { width: 64px; height: 64px; border-radius: 14px; display: block; }
.ob-footer__about { margin: 0; font: 400 15px/1.6 var(--ob-font); color: rgba(255, 255, 255, .7); max-width: 420px; }
.ob-footer__social { display: flex; gap: 8px; }
.ob-footer__social a { padding: 9px 14px; border-radius: 10px; background: #232427; font: 500 14px var(--ob-font); }
.ob-footer__col { display: flex; flex-direction: column; gap: 11px; font: 400 15px var(--ob-font); color: rgba(255, 255, 255, .72); }
.ob-footer__col strong { color: #fff; font: 600 15px var(--ob-font); }
.ob-footer__address { font-style: normal; line-height: 1.5; }
.ob-footer__bottom { grid-column: 1 / -1; border-top: 1px solid var(--ob-dark-line); padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 400 13px var(--ob-font); color: rgba(255, 255, 255, .55); }
@media (max-width: 1179.98px) {
  .ob-footer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ob-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 833.98px) {
  .ob-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .ob-footer__brand, .ob-footer__address { grid-column: 1 / -1; }
  .ob-footer__col { gap: 0; }
  .ob-footer__col strong { margin-bottom: 6px; }
  .ob-footer__col a { min-height: 44px; display: flex; align-items: center; }
  .ob-footer__address span { padding: 6px 0; }
  .ob-footer__social a { min-height: 44px; display: flex; align-items: center; padding: 0 16px; }
}
@media (max-width: 599.98px) {
  .ob-footer { grid-template-columns: minmax(0, 1fr); padding: 28px 18px 22px; gap: 24px; }
  .ob-footer__bottom { flex-direction: column; gap: 4px; }
}

/* block: hero_slider — header sits inside, slides stack; slide 1 is the frozen state */
.ob-hero { position: relative; border-radius: var(--ob-r-section); overflow: hidden; min-height: max(660px, min(880px, 92vh)); background: var(--ob-ink); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 150px clamp(20px, 3.5vw, 56px) 20px; box-sizing: border-box; }
.ob-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s; }
.ob-hero__slide.is-active { opacity: 1; }
.ob-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 8s ease-out; }
.ob-hero__slide.is-active .ob-hero__img { transform: scale(1.08); }
.ob-js .ob-hero__slide.is-active .ob-hero__img { animation: obZoom 8s ease-out both; }
.ob-hero__shade { position: absolute; inset: 0; }
.ob-hero__shade--side { background: linear-gradient(90deg, rgba(12, 12, 14, .85) 0%, rgba(12, 12, 14, .5) 55%, rgba(12, 12, 14, .2) 100%); }
.ob-hero__shade--top { background: linear-gradient(rgba(12, 12, 14, .5) 0%, rgba(12, 12, 14, 0) 25%, rgba(12, 12, 14, 0) 55%, rgba(12, 12, 14, .88) 100%); }
.ob-hero__mark { position: absolute; right: -60px; top: 120px; width: min(560px, 45vw); opacity: .07; filter: brightness(0) invert(1); pointer-events: none; }
.ob-hero__main { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.ob-hero__copies { display: grid; }
.ob-hero__copy { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 24px; max-width: 900px; opacity: 0; transform: translateY(30px); pointer-events: none; transition: opacity .8s, transform .9s var(--ob-ease); }
.ob-hero__copy.is-active { opacity: 1; transform: none; pointer-events: auto; }
.ob-hero__tag { align-self: flex-start; display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 12px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 500 14px var(--ob-font); }
.ob-hero__badge { padding: 4px 8px; border-radius: 7px; background: var(--ob-red); font: 700 11px var(--ob-font); letter-spacing: .06em; }
.ob-hero__title { margin: 0; color: #fff; font: 700 clamp(40px, 5.4vw, 86px)/1 var(--ob-font); letter-spacing: -0.04em; text-wrap: balance; }
.ob-hero__text { margin: 0; max-width: 600px; color: rgba(255, 255, 255, .85); font: 400 clamp(16px, 1.3vw, 19px)/1.55 var(--ob-font); }
.ob-hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ob-hero__cta { display: flex; gap: 18px; align-items: center; height: 60px; padding: 0 10px 0 24px; border-radius: 16px; background: var(--ob-red); color: #fff; font: 600 17px var(--ob-font); transition: transform .3s, box-shadow .3s; }
.ob-hero__cta:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(241, 14, 25, .5); }
.ob-hero__ghost { display: flex; align-items: center; height: 60px; padding: 0 24px; border-radius: 16px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 600 17px var(--ob-font); transition: background .3s; }
.ob-hero__ghost:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.ob-hero__posts { width: 320px; display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 22px; background: rgba(20, 20, 20, .45); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255, 255, 255, .16); color: #fff; }
.ob-hero__posts-title { font: 600 13px var(--ob-font); opacity: .7; letter-spacing: .04em; }
.ob-hero__post { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); color: #fff; }
.ob-hero__post:hover { color: #fff; background: rgba(255, 255, 255, .16); }
.ob-hero__post-text { display: flex; flex-direction: column; gap: 2px; }
.ob-hero__post-text strong { font: 600 15px var(--ob-font); }
.ob-hero__post-text span { font: 400 13px var(--ob-font); opacity: .75; }
.ob-hero__post-badge { padding: 4px 8px; border-radius: 7px; background: var(--ob-red); font: 700 11px var(--ob-font); }
.ob-hero__post-badge--soft { background: rgba(255, 255, 255, .18); }
.ob-hero__bar { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.ob-hero__tab { cursor: pointer; text-align: left; border: 1px solid rgba(255, 255, 255, .18); border-radius: 18px; padding: 14px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; background: rgba(20, 20, 20, .4); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: #fff; position: relative; overflow: hidden; transition: background .4s, color .4s; }
.ob-hero__tab[aria-pressed="true"] { border-color: #fff; background: #fff; color: var(--ob-ink); }
.ob-hero__thumb { width: 64px; height: 48px; border-radius: 10px; overflow: hidden; }
.ob-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-hero__tab-text { display: flex; flex-direction: column; gap: 3px; }
.ob-hero__tab-num { font: 600 12px var(--ob-font); opacity: .6; }
.ob-hero__tab-label { font: 700 16px/1.2 var(--ob-font); }
.ob-hero__track { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(127, 127, 127, .2); }
.ob-hero__progress { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--ob-red); animation: obProg 6.5s linear both; }
.ob-hero.is-paused .ob-hero__progress { animation-play-state: paused; } /* autoplay on hold (ob.js initSlider) */
.ob-hero__since { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-radius: 18px; background: var(--ob-red); color: #fff; }
.ob-hero__since strong { font: 700 36px/1 var(--ob-font); }
.ob-hero__since span { font: 500 14px/1.3 var(--ob-font); }
/* < 1180: the tabs stay on one row and scroll sideways (snap); < 834 the copy and the posts stack;
   < 600 the tabs go (the slider keeps swipe), the CTAs take the full width and the posts scroll on one row. */
@media (max-width: 1179.98px) {
  .ob-hero { min-height: 620px; padding-top: 130px; }
  .ob-hero__bar { --ob-hero-pad: clamp(20px, 3.5vw, 56px); display: flex; gap: 10px; margin: 0 calc(-1 * var(--ob-hero-pad)); padding: 0 var(--ob-hero-pad); scroll-padding: 0 var(--ob-hero-pad); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ob-hero__bar::-webkit-scrollbar { display: none; }
  .ob-hero__tab, .ob-hero__since { flex: 0 0 auto; scroll-snap-align: start; }
  .ob-hero__tab { flex: 1 0 200px; }
  .ob-hero__since span { max-width: 110px; }
}
@media (max-width: 833.98px) {
  .ob-hero__main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ob-hero__posts { width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; }
  .ob-hero__posts-title { grid-column: 1 / -1; }
  .ob-hero__post { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 599.98px) {
  .ob-hero { min-height: 0; padding: 120px 18px 16px; gap: 24px; }
  .ob-hero__mark { top: 90px; right: -90px; width: 300px; }
  .ob-hero__copy { gap: 18px; }
  .ob-hero__title { font-size: clamp(34px, 9.5vw, 48px); line-height: 1.02; }
  .ob-hero__text { font-size: 16px; }
  .ob-hero__actions { flex-direction: column; gap: 8px; }
  .ob-hero__cta, .ob-hero__ghost { width: 100%; height: 56px; }
  .ob-hero__cta { justify-content: space-between; padding: 0 8px 0 20px; }
  .ob-hero__ghost { justify-content: center; }
  .ob-hero__posts { margin: 0 -18px; padding: 0 18px; grid-template-columns: none; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: 196px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; background: none; border: 0; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ob-hero__posts::-webkit-scrollbar { display: none; }
  .ob-hero__posts-title { grid-column: 1 / span 3; grid-row: 1; }
  .ob-hero__post { grid-row: 2; }
  .ob-hero__post { scroll-snap-align: start; flex-direction: row; align-items: center; background: rgba(20, 20, 20, .5); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .ob-hero__bar { display: none; }
}

/* block: stats_row */
.ob-stats { background: #fff; border-radius: var(--ob-r-section); display: flex; flex-wrap: wrap; overflow: hidden; }
.ob-stats__item { flex: 1 1 200px; padding: 28px clamp(20px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 8px; border-right: 1px solid var(--ob-gray-2); border-bottom: 1px solid var(--ob-gray-2); margin: 0 -1px -1px 0; }
.ob-stats__value { font: 700 clamp(30px, 2.8vw, 42px)/1 var(--ob-font); letter-spacing: -0.03em; color: var(--ob-ink); }
.ob-stats__value--red { color: var(--ob-red); }
.ob-stats__label { font: 500 15px/1.4 var(--ob-font); color: var(--ob-muted-2); }
@media (max-width: 1179.98px) {
  .ob-stats__item { flex-basis: 30%; }
}
@media (max-width: 833.98px) {
  .ob-stats__item { flex-basis: 40%; }
  .ob-stats__item:first-child { flex-basis: 100%; }
}
@media (max-width: 599.98px) {
  .ob-stats { flex-direction: column; flex-wrap: nowrap; }
  .ob-stats__item { flex: none; flex-direction: row; align-items: center; gap: 16px; padding: 16px 20px; margin: 0; border-right: 0; }
  .ob-stats__item:last-child { border-bottom: 0; }
  .ob-stats__value { flex: 0 0 112px; font-size: 28px; }
  .ob-stats__label { font-size: 14px; }
}

/* block: about_intro */
.ob-about { display: flex; flex-wrap: wrap; gap: 20px; }
.ob-about__text { flex: 1.3 1 380px; display: flex; flex-direction: column; gap: 20px; padding-right: 12px; }
.ob-about__lead { margin: 0; font: 400 17px/1.6 var(--ob-font); color: var(--ob-muted-2); }
.ob-about__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ob-about__list li { display: flex; gap: 12px; align-items: flex-start; font: 500 16px/1.45 var(--ob-font); }
.ob-about__check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: var(--ob-red); color: #fff; display: grid; place-items: center; font: 700 12px var(--ob-font); }
.ob-about__more { align-self: flex-start; }
.ob-about__media { flex: 1.5 1 480px; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.ob-about__photo { border-radius: var(--ob-r-card); overflow: hidden; background: var(--ob-border-2); aspect-ratio: 16 / 9; }
.ob-about__img { width: 100%; height: 100%; object-fit: cover; object-position: 51% 50%; display: block; }
.ob-about__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ob-about__fact { background: #fff; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.ob-about__fact strong { font: 700 26px var(--ob-font); }
.ob-about__fact span { font: 400 13px var(--ob-font); color: var(--ob-muted); }
.ob-about__fact--dark { background: var(--ob-ink); color: #fff; }
.ob-about__fact--dark span { color: rgba(255, 255, 255, .72); }
@media (max-width: 1179.98px) {
  .ob-about__fact strong { font-size: 20px; white-space: nowrap; }
}
@media (max-width: 599.98px) {
  .ob-about__text { padding-right: 0; }
  .ob-about__lead { font-size: 16px; }
  .ob-about__facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ob-about__fact { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
  .ob-about__fact strong { font-size: 22px; white-space: nowrap; }
  .ob-about__fact span { text-align: right; }
}

/* block: service_cards */
.ob-services { display: flex; flex-direction: column; gap: 28px; }
.ob-services__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px 48px; align-items: end; }
.ob-services__title { display: flex; flex-direction: column; gap: 16px; }
.ob-services__lead { margin: 0; font: 400 17px/1.6 var(--ob-font); color: #3f444b; }
.ob-services__cards { display: flex; flex-wrap: wrap; gap: 16px; }
.ob-svc { flex: 1 1 340px; background: #fff; border-radius: var(--ob-r-card); padding: 12px; display: flex; flex-direction: column; gap: 18px; transition: transform .35s, box-shadow .35s; }
.ob-svc:hover { transform: translateY(-4px); box-shadow: var(--ob-shadow-card); }
.ob-svc__media { position: relative; height: 210px; border-radius: 16px; overflow: hidden; background: var(--ob-border-2); }
.ob-svc__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-svc__num { position: absolute; top: 12px; left: 12px; padding: 6px 10px; border-radius: 9px; background: #fff; font: 700 13px var(--ob-font); }
.ob-svc__new { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 9px; background: var(--ob-red); color: #fff; font: 700 12px var(--ob-font); letter-spacing: .05em; }
.ob-svc__body { padding: 0 12px; display: flex; flex-direction: column; gap: 10px; }
.ob-svc__title { margin: 0; font: 700 26px/1.12 var(--ob-font); letter-spacing: -0.02em; }
.ob-svc__desc { margin: 0; font: 400 15px/1.55 var(--ob-font); color: var(--ob-muted); }
.ob-svc__list { margin: 0 12px; padding: 14px 0 0; list-style: none; display: flex; flex-direction: column; gap: 9px; border-top: 1px solid var(--ob-gray-2); }
.ob-svc__list li { display: flex; gap: 10px; font: 400 15px/1.45 var(--ob-font); color: #2a2d33; }
.ob-svc__dot { color: var(--ob-red); flex: 0 0 auto; }
.ob-svc__btn { margin: auto 0 0; display: flex; justify-content: space-between; align-items: center; padding: 15px 16px; border-radius: var(--ob-r-btn); background: var(--ob-light); font: 600 15px var(--ob-font); color: var(--ob-ink); transition: background .25s, color .25s; }
.ob-svc__btn:hover { background: var(--ob-ink); color: #fff; }
@media (max-width: 1179.98px) and (min-width: 600px) {
  .ob-svc:last-child:nth-child(odd) { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 12px; }
  .ob-svc:last-child:nth-child(odd) .ob-svc__media { grid-row: 1 / span 3; height: auto; min-height: 260px; }
  .ob-svc:last-child:nth-child(odd) .ob-svc__body { padding-top: 12px; }
  .ob-svc:last-child:nth-child(odd) .ob-svc__list { margin-bottom: 18px; }
  .ob-svc:last-child:nth-child(odd) .ob-svc__btn { grid-column: 1 / -1; margin-top: 12px; }
}

/* block: calc_band (site addition) — the Calculator card on Home, after service_cards */
.ob-calcband { background: var(--ob-dark); color: #fff; border-radius: var(--ob-r-section); padding: clamp(24px, 3.2vw, 48px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.ob-calcband__text { display: flex; flex-direction: column; gap: 12px; flex: 1 1 360px; }
.ob-calcband__kicker { align-self: flex-start; padding: 7px 12px; background: rgba(255, 255, 255, .1); border-radius: 10px; font: 500 14px var(--ob-font); }
.ob-calcband__title { margin: 0; font: 700 clamp(26px, 2.6vw, 38px)/1.1 var(--ob-font); letter-spacing: -0.03em; }
.ob-calcband__lead { margin: 0; font: 400 16px/1.5 var(--ob-font); color: rgba(255, 255, 255, .75); }
.ob-calcband__btn { flex: none; }
@media (max-width: 599.98px) {
  .ob-calcband { padding: 24px 18px; }
}

/* block: customs_regimes */
.ob-regimes { display: flex; flex-wrap: wrap; gap: 32px 48px; }
.ob-regimes__intro { flex: 1 1 360px; display: flex; flex-direction: column; gap: 16px; align-self: flex-start; position: sticky; top: 16px; }
.ob-regimes__lead { margin: 0; font: 400 17px/1.6 var(--ob-font); color: var(--ob-muted-2); }
.ob-regimes__btn { align-self: flex-start; }
.ob-regimes__grid { flex: 2 1 600px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.ob-regime { border: 1px solid var(--ob-gray-2); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 8px; transition: border-color .3s, background .3s; }
.ob-regime:hover { border-color: var(--ob-red); background: #fff7f7; }
.ob-regime__num { font: 700 12px var(--ob-font); color: var(--ob-red); letter-spacing: .06em; }
.ob-regime__title { margin: 0; font: 700 19px/1.2 var(--ob-font); }
.ob-regime__text { margin: 0; font: 400 14px/1.5 var(--ob-font); color: var(--ob-muted); }
@media (max-width: 1179.98px) {
  .ob-regimes__intro { position: static; } /* stacked above the grid it would cover the cards while scrolling */
  .ob-regimes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .ob-regimes { gap: 24px; }
  .ob-regimes__grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ob-regime { padding: 16px 18px; gap: 6px; }
  .ob-regime__title { font-size: 18px; }
}


/* block: transport_modes */
.ob-transport { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px; }
.ob-transport__intro { display: flex; flex-direction: column; gap: 20px; }
.ob-transport__kicker { align-self: flex-start; padding: 7px 12px; background: var(--ob-red); border-radius: 10px; font: 600 14px var(--ob-font); }
.ob-transport__lead { margin: 0; font: 400 17px/1.6 var(--ob-font); color: rgba(255, 255, 255, .78); }
.ob-transport__media { flex: 1 1 0%; min-height: 260px; border-radius: 20px; overflow: hidden; position: relative; }
.ob-transport__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; }
.ob-transport__side { display: flex; flex-direction: column; gap: 14px; }
.ob-transport__modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
.ob-mode { background: var(--ob-dark-2); border: 1px solid var(--ob-dark-line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 10px; transition: border-color .3s, transform .3s; }
.ob-mode:hover { border-color: var(--ob-red); transform: translateY(-4px); }
.ob-mode__tag { font: 600 12px var(--ob-font); color: var(--ob-red-light); letter-spacing: .06em; }
.ob-mode__title { margin: 0; font: 700 20px/1.2 var(--ob-font); }
.ob-mode__text { margin: 0; font: 400 14px/1.55 var(--ob-font); color: rgba(255, 255, 255, .7); }
@media (max-width: 1179.98px) {
  .ob-transport__modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .ob-transport__modes { grid-template-columns: minmax(0, 1fr); }
}
.ob-steps { background: var(--ob-dark-2); border: 1px solid var(--ob-dark-line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 599.98px) { .ob-mode, .ob-steps { padding: 18px; } }
.ob-steps__title { font: 700 18px var(--ob-font); }
.ob-steps__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.ob-step { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 2px solid #3a3b3f; }
.ob-step--first { border-top-color: var(--ob-red); }
.ob-step__num { font: 700 13px var(--ob-font); color: var(--ob-red-light); }
.ob-step__title { font: 600 15px/1.3 var(--ob-font); }
.ob-step__text { font: 400 13px/1.5 var(--ob-font); color: rgba(255, 255, 255, .65); }

/* block: benefits */
.ob-benefits { display: flex; flex-direction: column; gap: 28px; }
.ob-benefits__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 20px 48px; align-items: end; }
.ob-benefits__title { display: flex; flex-direction: column; gap: 16px; }
.ob-benefits__lead { margin: 0; font: 400 17px/1.6 var(--ob-font); color: #3f444b; }
.ob-benefits__grid { display: flex; flex-wrap: wrap; gap: 14px; }
.ob-benefit { flex: 1 1 250px; position: relative; border-radius: 22px; overflow: hidden; min-height: 380px; background: #2a2d33; }
.ob-benefit__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform 1.2s var(--ob-ease); }
.ob-benefit__img:hover { transform: scale(1.06); }
.ob-benefit__shade { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .88)); pointer-events: none; }
.ob-benefit__tag { position: absolute; top: 16px; left: 16px; padding: 6px 10px; border-radius: 9px; background: rgba(255, 255, 255, .2); color: #fff; font: 700 12px var(--ob-font); letter-spacing: .04em; pointer-events: none; }
.ob-benefit__tag--red { background: var(--ob-red); }
.ob-benefit__body { position: absolute; left: 22px; right: 22px; bottom: 22px; color: #fff; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.ob-benefit__title { margin: 0; font: 700 23px/1.15 var(--ob-font); letter-spacing: -0.02em; }
.ob-benefit__text { margin: 0; font: 400 14px/1.55 var(--ob-font); color: rgba(255, 255, 255, .88); }
@media (max-width: 1179.98px) {
  .ob-benefits__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ob-benefit { grid-column: span 2; }
  .ob-benefit:nth-child(-n+2) { grid-column: span 3; }
}
@media (max-width: 833.98px) {
  .ob-benefits__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .ob-benefits__grid::-webkit-scrollbar { display: none; }
  .ob-benefit { flex: 0 0 46%; scroll-snap-align: start; }
}
@media (max-width: 599.98px) {
  .ob-benefits { gap: 22px; }
  .ob-benefits__grid { flex-wrap: nowrap; gap: 10px; margin: 0 -18px; padding: 0 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; }
  .ob-benefits__grid::-webkit-scrollbar { display: none; }
  .ob-benefit { flex: 0 0 82%; min-height: 360px; scroll-snap-align: start; }
}

/* block: text_faq */
.ob-broker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px 48px; }
.ob-broker__text { display: flex; flex-direction: column; gap: 18px; }
.ob-broker__p { margin: 0; font: 400 17px/1.6 var(--ob-font); color: var(--ob-muted-2); }
.ob-broker__p strong { color: var(--ob-ink); font-weight: 800; }
.ob-broker__boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.ob-broker__box { background: var(--ob-light); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.ob-broker__box--dark { background: var(--ob-ink); color: #fff; }
.ob-broker__box-title { margin: 0; font: 700 18px var(--ob-font); }
.ob-broker__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ob-broker__list li { display: flex; gap: 10px; font: 400 15px/1.45 var(--ob-font); }
.ob-broker__dot { color: var(--ob-red); }
.ob-broker__box--dark .ob-broker__list li { color: rgba(255, 255, 255, .88); }
.ob-broker__box--dark .ob-broker__dot { color: var(--ob-red-light); }
.ob-faq { display: flex; flex-direction: column; gap: 10px; }
.ob-faq__title { margin: 0 0 6px; font: 700 28px/1.15 var(--ob-font); letter-spacing: -0.02em; }
.ob-faq__item { background: var(--ob-light); border-radius: 18px; padding: 0 20px; }
.ob-faq__q { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font: 600 17px/1.35 var(--ob-font); }
.ob-plus { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--ob-border); display: grid; place-items: center; font: 500 20px var(--ob-font); transition: transform .25s, background .25s; }
details[open] .ob-plus { transform: rotate(45deg); background: var(--ob-red); color: #fff; border-color: var(--ob-red); }
.ob-faq__a { margin: 0; padding: 0 0 20px; font: 400 15px/1.6 var(--ob-font); color: var(--ob-muted-2); }

/* block: partners_marquee */
.ob-partners { padding: clamp(24px, 3.2vw, 40px) 0; overflow: hidden; display: flex; flex-direction: column; gap: 24px; }
.ob-partners__head { padding: 0 clamp(24px, 3.2vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px 48px; align-items: end; }
.ob-partners__title { display: flex; flex-direction: column; gap: 14px; }
.ob-partners__h2 { margin: 0; font: 700 clamp(28px, 2.6vw, 40px)/1.08 var(--ob-font); letter-spacing: -0.03em; }
.ob-partners__lead { margin: 0; font: 400 16px/1.55 var(--ob-font); color: var(--ob-muted); }
.ob-partners__rows { display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ob-marquee__track { display: flex; gap: 12px; width: max-content; }
.ob-marquee--a .ob-marquee__track { animation: obMarq 40s linear infinite; }
.ob-marquee--b .ob-marquee__track { animation: obMarqR 46s linear infinite; }
.ob-partner { width: 190px; height: 96px; flex: 0 0 auto; border-radius: 16px; background: #fff; border: 1px solid var(--ob-gray-2); display: grid; place-items: center; overflow: hidden; transition: border-color .3s; }
.ob-partner:hover { border-color: var(--ob-red); }
.ob-partner__logo { max-width: 140px; max-height: 60px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.ob-partner__logo:hover { filter: none; opacity: 1; }
@media (max-width: 833.98px) {
  .ob-partner { width: 137px; height: 69px; border-radius: 12px; }
  .ob-partner__logo { max-width: 101px; max-height: 43px; }
  .ob-marquee__track { gap: 9px; }
  .ob-partners__rows { gap: 9px; }
}
@media (max-width: 599.98px) {
  .ob-partners { padding: 24px 0; gap: 20px; }
  .ob-partners__head { padding: 0 18px; }
}

/* block: offices */
.ob-offices { display: flex; flex-direction: column; gap: 28px; }
.ob-offices__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px 48px; align-items: end; }
.ob-offices__title { display: flex; flex-direction: column; gap: 16px; }
.ob-offices__lead { margin: 0; font: 400 17px/1.55 var(--ob-font); color: var(--ob-muted-2); }
.ob-offices__body { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.ob-offices__list { display: flex; flex-direction: column; gap: 8px; }
.ob-office { cursor: pointer; text-align: left; border: 0; padding: 18px 20px; border-radius: 18px; background: #fff; color: var(--ob-ink); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.ob-office[aria-pressed="true"] { background: var(--ob-ink); color: #fff; }
.ob-office__name { font: 700 17px/1.25 var(--ob-font); }
.ob-office__badge { padding: 5px 9px; border-radius: 8px; background: var(--ob-red); color: #fff; font: 700 12px var(--ob-font); }
.ob-office__meta { grid-column: 1 / -1; font: 400 14px var(--ob-font); opacity: .75; }
.ob-offices__detail { background: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; min-height: 460px; }
.ob-map { flex: 1 1 0%; min-height: 300px; position: relative; background: #e4e7eb; display: grid; place-items: center; }
.ob-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.3); }
.ob-map__load { cursor: pointer; border: 0; border-radius: var(--ob-r-btn); padding: 12px 18px; background: var(--ob-ink); color: #fff; font: 600 15px var(--ob-font); }
.ob-map__load:hover { background: var(--ob-red); }
.ob-offices__info { padding: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.ob-offices__cell { display: flex; flex-direction: column; gap: 4px; }
.ob-offices__label { font: 500 13px var(--ob-font); color: var(--ob-muted); }
.ob-offices__value { font: 600 16px var(--ob-font); }
.ob-offices__value--mail { color: var(--ob-red-hover); }
@media (max-width: 1179.98px) {
  .ob-offices__body { grid-template-columns: minmax(0, 1fr); }
  .ob-offices__detail { min-height: 0; }
  .ob-map { flex: none; height: 260px; min-height: 260px; }
}
@media (max-width: 833.98px) {
  .ob-map__load { min-height: 48px; }
  a.ob-offices__value { display: flex; align-items: center; min-height: 44px; margin: -13px 0; }
}
@media (max-width: 599.98px) {
  .ob-offices { gap: 22px; }
  .ob-office { padding: 16px 18px; }
  .ob-offices__info { padding: 18px; }
}

/* block: content_values — About page text + facts, and the four values */
.ob-aboutc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 32px 48px; }
.ob-aboutc__text { display: flex; flex-direction: column; gap: 18px; font: 400 17px/1.65 var(--ob-font); color: #3f444b; }
.ob-aboutc__text p { margin: 0; }
.ob-aboutc__title { margin: 0; font: 700 clamp(28px, 2.8vw, 42px)/1.1 var(--ob-font); letter-spacing: -0.03em; color: var(--ob-ink); }
.ob-aboutc__side { display: flex; flex-direction: column; gap: 14px; }
.ob-aboutc__photo { flex: 1 1 0%; min-height: 340px; border-radius: 24px; overflow: hidden; position: relative; }
.ob-aboutc__photo .ob-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-aboutc__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ob-aboutc__fact { background: #fff; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.ob-aboutc__fact strong { font: 700 32px var(--ob-font); }
.ob-aboutc__fact span { font: 400 14px var(--ob-font); color: var(--ob-muted); }
.ob-aboutc__fact--dark { background: var(--ob-ink); color: #fff; }
.ob-aboutc__fact--dark span { color: rgba(255, 255, 255, .72); }
.ob-aboutc__fact--red { background: var(--ob-red); color: #fff; }
.ob-aboutc__fact--red span { color: inherit; }
.ob-values { display: flex; flex-wrap: wrap; gap: 14px; }
.ob-value { flex: 1 1 260px; background: var(--ob-light); color: var(--ob-ink); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 28px; min-height: 220px; }
.ob-value--dark { background: var(--ob-ink); color: #fff; }
.ob-value--red { background: var(--ob-red); color: #fff; }
.ob-value__tag { font: 700 13px var(--ob-font); color: var(--ob-red); letter-spacing: .06em; }
.ob-value--dark .ob-value__tag { color: var(--ob-red-light); }
.ob-value--red .ob-value__tag { color: #fff; }
.ob-value__body { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ob-value__title { margin: 0; font: 700 21px/1.2 var(--ob-font); }
.ob-value__text { margin: 0; font: 400 15px/1.55 var(--ob-font); opacity: .8; }
@media (max-width: 599.98px) {
  .ob-aboutc__text { font-size: 16px; }
  .ob-aboutc__photo { min-height: 240px; }
  .ob-aboutc__facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ob-aboutc__fact { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
  .ob-aboutc__fact strong { font-size: 24px; white-space: nowrap; }
  .ob-aboutc__fact span { text-align: right; }
  .ob-value { min-height: 0; gap: 20px; padding: 22px; }
}

/* block: license_docs */
.ob-license { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 32px 48px; align-items: start; }
.ob-license__text { display: flex; flex-direction: column; gap: 18px; }
.ob-license__title { margin: 0; font: 700 clamp(28px, 2.8vw, 42px)/1.1 var(--ob-font); letter-spacing: -0.03em; }
.ob-license__lead { margin: 0; font: 400 17px/1.65 var(--ob-font); color: #3f444b; }
.ob-license__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ob-license__list li { display: flex; gap: 12px; align-items: flex-start; font: 500 16px/1.45 var(--ob-font); }
.ob-license__check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: var(--ob-red); color: #fff; display: grid; place-items: center; font: 700 12px var(--ob-font); }
.ob-license__help { align-self: flex-start; display: flex; }
.ob-license__docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ob-license__fig { margin: 0; background: #fff; border-radius: 22px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ob-license__doc { display: block; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; }
.ob-license__doc .ob-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ob-license__fig figcaption { margin-top: 4px; font: 600 14px var(--ob-font); padding: 0 6px 6px; color: color-mix(in srgb, #201e1d 55%, transparent); }

/* shared: form_fields — field, honeypot and error slot (consultation wizard, quote form) */
.ob-h2--md { font-size: clamp(28px, 2.8vw, 42px); line-height: 1.1; }
.ob-h3 { margin: 0; font: 700 24px/1.25 var(--ob-font); letter-spacing: -0.02em; }
.ob-field { display: flex; flex-direction: column; gap: 6px; font: 600 14px var(--ob-font); }
.ob-field__label { font: 600 14px var(--ob-font); }
.ob-field input, .ob-field select, .ob-field textarea { padding: 14px; border: 1px solid var(--ob-border); border-radius: 12px; font: 400 15px var(--ob-font); }
.ob-field select { background: #fff; }
.ob-field textarea { resize: vertical; }
.ob-field__error { margin: 0; font: 500 13px var(--ob-font); color: var(--ob-red-hover); }
.ob-field.is-invalid input, .ob-field.is-invalid select, .ob-field.is-invalid textarea, .ob-field.is-invalid .ob-drop { border-color: var(--ob-red); }
.ob-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 599.98px) {
  .ob-field .ob-input, .ob-field .ob-select, .ob-field .ob-textarea { font-size: 16px; min-height: 48px; }
}

/* block: consultation_wizard */
.ob-wizard { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 32px 48px; align-items: start; }
.ob-wizard__side { display: flex; flex-direction: column; gap: 18px; }
.ob-wizard__progress { height: 6px; background: var(--ob-page); border-radius: 6px; overflow: hidden; }
.ob-wizard__bar { height: 100%; background: var(--ob-red); border-radius: 6px; transition: width .4s; }
.ob-wizard__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
/* live-site audit: the consultation price and the bank account, beside the steps */
.ob-wizard__note { margin: 0; background: #fff; border-radius: 16px; padding: 16px 18px; font: 400 14px/1.6 var(--ob-font); color: var(--ob-muted-2); overflow-wrap: anywhere; }
.ob-wizard__note strong { font-weight: 700; color: var(--ob-ink); }
.ob-wizard__step-btn { width: 100%; border: 0; cursor: pointer; text-align: left; display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: transparent; font: 500 14px var(--ob-font); color: var(--ob-ink); }
.ob-wizard__step-btn.is-current { background: #fff; }
.ob-wizard__num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--ob-font); background: var(--ob-page); color: var(--ob-muted); }
.ob-wizard__step > legend:focus { outline: none; }
.ob-wizard__step--contact > legend { letter-spacing: -0.015em; }
.ob-wizard__step-btn.is-current .ob-wizard__num, .ob-wizard__step-btn.is-done .ob-wizard__num { background: var(--ob-red); color: #fff; }
.ob-wizard__panel { background: #fff; border-radius: 24px; padding: clamp(20px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 22px; }
.ob-wizard__step { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.ob-wizard__step > legend { padding: 0; margin: 0; float: left; width: 100%; }
.ob-wizard__step > legend + * { clear: both; }
.ob-wizard__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.ob-wizard__contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.ob-option { position: relative; cursor: pointer; text-align: left; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-radius: 14px; border: 1.5px solid var(--ob-border); background: #fff; font: 500 16px var(--ob-font); color: var(--ob-ink); }
.ob-option__dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ob-border); background: #fff; }
.ob-option:has(input:checked) { border-color: var(--ob-red); background: var(--ob-red-tint); }
.ob-option:has(input:checked) .ob-option__dot { border-color: var(--ob-red); background: var(--ob-red); }
.ob-option:has(input:focus-visible) { outline: 2px solid var(--ob-red); outline-offset: 3px; }
.ob-drop { display: flex; flex-direction: column; gap: 4px; padding: 24px; border: 1.5px dashed #c3c7cd; border-radius: 14px; background: #f8f9fa; cursor: pointer; position: relative; }
.ob-drop strong { font: 600 15px var(--ob-font); }
.ob-drop__name:empty { display: none; }
.ob-drop span { font: 400 13px var(--ob-font); color: var(--ob-muted); }
.ob-drop:has(input:focus-visible) { outline: 2px solid var(--ob-red); outline-offset: 3px; }
.ob-wizard__sent { background: var(--ob-red-tint); border-radius: 14px; padding: 18px; font: 500 15px var(--ob-font); color: #8E0810; }
.ob-wizard__nav { display: flex; justify-content: space-between; gap: 12px; }
.ob-wizard__prev { cursor: pointer; padding: 14px 20px; border-radius: 12px; border: 1px solid var(--ob-border); background: #fff; font: 600 15px var(--ob-font); }
.ob-wizard__next { align-items: stretch; padding: 14px 20px; border-radius: 12px; }
.ob-wizard__next .ob-btn__arrow, .ob-form__submit .ob-btn__arrow { width: auto; height: auto; border-radius: 0; background: none; display: inline; }
/* < 600: the step list goes, the kicker ("Pasul N din 6") and the progress bar stay; options in one column;
   Înapoi / Continuă share the row 50 / 50. */
@media (max-width: 1179.98px) {
  .ob-wizard { grid-template-columns: minmax(0, 1fr); }
  .ob-wizard__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (max-width: 833.98px) {
  .ob-wizard__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-wizard__step-btn { min-height: 44px; }
}
@media (max-width: 599.98px) {
  .ob-wizard { gap: 20px; }
  .ob-wizard__steps { display: none; }
  .ob-wizard__panel { padding: 20px 16px; border-radius: 20px; }
  .ob-wizard__options { grid-template-columns: minmax(0, 1fr); }
  .ob-option { min-height: 56px; padding: 14px 16px; }
  .ob-wizard__nav > * { flex: 1 1 0; min-height: 52px; justify-content: center; align-items: center; }
  .ob-wizard__next { gap: 10px; }
}

/* block: quote_form */
.ob-quote { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 32px 48px; }
.ob-quote__info { display: flex; flex-direction: column; gap: 16px; }
.ob-quote__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ob-quote__list li { display: flex; gap: 12px; align-items: flex-start; font: 500 16px/1.45 var(--ob-font); }
.ob-quote__check { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; background: var(--ob-red); color: #fff; display: grid; place-items: center; font: 700 12px var(--ob-font); }
.ob-quote__contacts { font-style: normal; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 8px; }
.ob-quote__card { background: #fff; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.ob-quote__card span { font: 500 13px var(--ob-font); color: var(--ob-muted); }
.ob-quote__card strong { font: 600 16px var(--ob-font); }
.ob-form { background: #fff; border-radius: 24px; padding: clamp(20px, 2.4vw, 32px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; }
.ob-field--wide { grid-column: 1 / -1; }
.ob-form__submit { grid-column: 1 / -1; display: flex; align-items: stretch; justify-content: space-between; padding: 16px 18px; border-radius: 12px; text-align: left; font-size: 16px; gap: 24px; }
@media (max-width: 1179.98px) {
  .ob-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .ob-form { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; border-radius: 20px; }
  .ob-form__submit { min-height: 56px; align-items: center; }
  .ob-quote__contacts { grid-template-columns: minmax(0, 1fr); }
}

/* block: car_calculator — pages without a design, composed from the design's components */
.ob-calc-wrap { --ob-min: 420px; gap: 16px; align-items: start; }
.ob-calc { background: #fff; border-radius: var(--ob-r-card); padding: clamp(20px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 20px; }
.ob-calc__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.ob-calc__group > legend { padding: 0; margin-bottom: 6px; }
.ob-calc__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.ob-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-pill { position: relative; cursor: pointer; padding: 11px 16px; border-radius: 12px; border: 1.5px solid var(--ob-border); background: #fff; font: 500 15px var(--ob-font); color: var(--ob-ink); }
.ob-pill:has(input:checked) { border-color: var(--ob-red); background: var(--ob-red-tint); }
.ob-pill:has(input:focus-visible) { outline: 2px solid var(--ob-red); outline-offset: 3px; }
.ob-check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font: 500 15px/1.45 var(--ob-font); }
.ob-check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; padding: 0; accent-color: var(--ob-red); }
.ob-calc__submit { width: 100%; justify-content: space-between; padding: 16px 18px; font-size: 16px; }
.ob-calc__result { background: var(--ob-ink); color: #fff; border-radius: var(--ob-r-card); padding: clamp(20px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 16px; }
.ob-calc__result > div { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ob-calc__result .ob-kicker { color: var(--ob-ink); }
.ob-calc__heading { margin: 0; letter-spacing: normal; }
.ob-calc__jump { display: none; }
.ob-calc__table { width: 100%; border-collapse: collapse; font: 400 15px/1.45 var(--ob-font); }
.ob-calc__table th, .ob-calc__table td { padding: 12px 0; border-bottom: 1px solid var(--ob-dark-line); text-align: left; vertical-align: top; }
.ob-calc__table th { font-weight: 400; color: rgba(255, 255, 255, .78); padding-right: 16px; }
.ob-calc__table td { text-align: right; white-space: nowrap; font-weight: 600; }
.ob-calc__total th, .ob-calc__total td { border-bottom: 0; padding-top: 18px; font-size: 18px; color: #fff; }
.ob-calc__eur { display: block; font: 400 13px var(--ob-font); color: rgba(255, 255, 255, .7); }
.ob-calc__meta { margin: 0; font: 500 13px/1.5 var(--ob-font); color: rgba(255, 255, 255, .6); }
.ob-calc__note { margin: 0; font: 400 15px/1.5 var(--ob-font); color: rgba(255, 255, 255, .85); }
.ob-calc__hint { margin: 0; font: 400 16px/1.55 var(--ob-font); color: rgba(255, 255, 255, .85); }
@media (max-width: 833.98px) {
  .ob-calc__jump { display: flex; justify-content: center; gap: 10px; min-height: 48px; background: var(--ob-gray); color: var(--ob-ink); }
  .ob-calc__jump:hover { background: var(--ob-gray-2); color: var(--ob-ink); }
  .ob-pill { min-height: 48px; display: flex; align-items: center; }
  .ob-check { min-height: 44px; align-items: center; }
}
@media (max-width: 599.98px) {
  .ob-calc { padding: 20px 16px; }
  .ob-calc__result { padding: 22px 18px; scroll-margin-top: 10px; }
  .ob-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ob-pill { justify-content: center; text-align: center; padding: 8px 10px; line-height: 1.25; }
  .ob-pill:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ob-calc__submit { min-height: 56px; }
  .ob-calc__table { font-size: 14px; }
  .ob-calc__send { width: 100%; justify-content: space-between; }
}
.ob-calc__sendbox { display: flex; flex-direction: column; gap: 12px; width: 100%; } .ob-calc__sendbox .ob-field__label { color: #fff; }

/* block: document_section */
.ob-doc { max-width: 760px; margin: 0 auto; font: 400 17px/1.7 var(--ob-font); color: var(--ob-muted-2); }
.ob-doc h2 { margin: 32px 0 12px; font: 700 28px/1.15 var(--ob-font); letter-spacing: -0.02em; color: var(--ob-ink); }
.ob-doc h2:first-child { margin-top: 0; }
.ob-doc p { margin: 0 0 16px; }
/* OptiBrok Plan 4 Task 5: what the rich text toolbar writes (H3, lists, quote, link, bold) and the accent of inline
   titles. The replica's terms use only h2 and p, so the identity gate does not move; the client's documents (privacy,
   cookies) get the design's type for the rest. */
.ob-doc h3 { margin: 24px 0 10px; font: 700 20px/1.25 var(--ob-font); letter-spacing: -0.01em; color: var(--ob-ink); }
.ob-doc ul, .ob-doc ol { margin: 0 0 16px; padding-left: 22px; }
.ob-doc ul { list-style: disc; }
.ob-doc ol { list-style: decimal; }
.ob-doc li { margin: 0 0 6px; }
.ob-doc blockquote { margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 3px solid var(--ob-red); color: var(--ob-ink); }
.ob-doc a { color: var(--ob-red); text-decoration: underline; text-underline-offset: 2px; }
.ob-doc strong { font-weight: 700; color: var(--ob-ink); }
.ob-accent { color: var(--ob-red); }

/* ==== client-length texts (Review Focus 1, OptiBrok Plan 2 Task 8) ====
   The one addition to the approved stylesheet: a text the office types longer than the design's (a long word, a long
   e-mail address) breaks inside its box instead of widening the page. "anywhere" breaks only a word wider than its line
   and lets a flex or grid item shrink below such a word (no min-width: 0 needed); the design's own texts lay out as
   before (02-identity). One-line labels (buttons, tabs, kickers, badges, figures, header links) get admin maximums
   measured at 320 px (tools/measure-labels.js) instead. */
:where(h1, h2, h3, h4, p, li, summary, dd, dt, td, th, label, a, strong, span, small, em, b, address, figcaption) { overflow-wrap: anywhere; }