/* Recruitment (offline) services landing (/:lang/recruitment-services, JW-3808). Ported from
   frontend-design/offline-services/index.html. Linked right after style.css by
   layout/partials/page-css.phtml (template directory new-design/application/offline-services/).
   Parts, in the order the designer page loads them:
     0. fonts, icons and the element defaults the design was drawn against ("App adaptations, part 1");
     1. the rules the page uses from post-job-landing-stitch/v3.css (badge, CTA, hero mock-up, scroll
        rails, video cards, lightbox, testimonial cards) and only those;
     2. offline-services/offline.css as the designer wrote it (its @font-face, :root, html/body and
        footer rules are left out: fonts are declared here, header and footer come from the layout);
     3. "App adaptations, part 2": what Bootstrap and style.css change on this page that the designer
        page never had, and the states the mock-up does not have (sending, honeypot).
   Keep designer rules and adaptations apart, so the next designer export can be dropped in again. */

/* Gordita with the designer's metric overrides (centres the ink in its line box). Own family name, so
   the overrides do not reach pages that use the plain "gordita" faces. Same files as the homepage and
   the Recruiter Pro landing (glyph widths match the designer's .otf). The template preloads them. */
@font-face { font-family: 'gordita-ofs'; src: url('/new-design/fonts/Gordita-Regular-otf.woff2') format('woff2'), url('/new-design/fonts/Gordita-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 98.3%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'gordita-ofs'; src: url('/new-design/fonts/Gordita-Medium-otf.woff2') format('woff2'), url('/new-design/fonts/Gordita-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 98.3%; descent-override: 20%; line-gap-override: 0%; }
@font-face { font-family: 'gordita-ofs'; src: url('/new-design/fonts/Gordita-Bold-otf.woff2') format('woff2'), url('/new-design/fonts/Gordita-Bold.otf') format('opentype'); font-weight: 600 900; font-style: normal; font-display: swap; ascent-override: 98.3%; descent-override: 20%; line-gap-override: 0%; }

/* Remix Icon 3.5.0, self-hosted: only the 17 glyphs this page uses (lib/remixicon/, 2 KB instead of
   the 144 KB full font), preloaded by the page template. A new ri-* icon needs its glyph added to the
   subset (pyftsubset --unicodes=...) and a rule below. */
@font-face { font-family: 'remixicon-ofs'; src: url('/new-design/lib/remixicon/remixicon-3.5.0-offline-services.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
.ofs [class^="ri-"], .ofs [class*=" ri-"] { font-family: 'remixicon-ofs' !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.ofs .ri-add-line::before { content: "\ea13"; }
.ofs .ri-calculator-line::before { content: "\eb1f"; }
.ofs .ri-checkbox-circle-fill::before { content: "\eb80"; }
.ofs .ri-checkbox-circle-line::before { content: "\eb81"; }
.ofs .ri-database-2-line::before { content: "\ec16"; }
.ofs .ri-file-list-3-line::before { content: "\ecef"; }
.ofs .ri-hand-coin-line::before { content: "\edf1"; }
.ofs .ri-map-pin-line::before { content: "\ef14"; }
.ofs .ri-megaphone-line::before { content: "\f385"; }
.ofs .ri-search-line::before { content: "\f0d1"; }
.ofs .ri-shield-check-fill::before { content: "\f0ff"; }
.ofs .ri-shield-check-line::before { content: "\f100"; }
.ofs .ri-stack-line::before { content: "\f181"; }
.ofs .ri-user-follow-line::before { content: "\f261"; }
.ofs .ri-user-search-line::before { content: "\f26c"; }
.ofs .ri-user-star-line::before { content: "\f276"; }
.ofs .ri-wallet-3-line::before { content: "\f2ac"; }

/* ===== App adaptations, part 1: element defaults the design was drawn against =====
   The designer page has no framework: text inherits body { font-family: gordita; color: #0d0e0f } with
   the browser's normal line-height, and offline.css resets h1-h3, p, ul, ol and figure with zero
   specificity. Here Bootstrap's reboot loads AFTER this file and would win over bare element rules,
   while a plain ".ofs p" would win over the designer's single-class rules (.pj3-hero__title,
   .ofs-svc__p ...). The ":where(.ofs) :is(x, .ofs-reset)" form has exactly one class of specificity
   (.ofs-reset is a dummy that sets it) and comes BEFORE the designer rules: above Bootstrap's element
   rules, below every designer class rule. Keep this block above the designer rules. */
html { scroll-behavior: smooth; }
.ofs, .ofs-lightbox { --primary0: #265CFF; --blue-deep: #1640d6; }
.ofs { font-size: 16px; font-weight: 400; line-height: normal; text-align: start; box-sizing: content-box; }
/* style.css sets font-family on every element (* { font-family: 'Gordita' }), so the family has to be
   set on every element here as well; it cannot simply inherit from .ofs. */
.ofs, .ofs *, .ofs-lightbox, .ofs-lightbox * { font-family: 'gordita-ofs', 'gordita', system-ui, sans-serif; }
:where(.ofs) :is(h1, h2, h3, p, ul, ol, figure, .ofs-reset) { margin: 0; padding: 0; }
:where(.ofs) :is(h1, h2, h3, .ofs-reset) { line-height: inherit; }
:where(.ofs) :is(ul, ol, .ofs-reset) { list-style: none; }
/* Bootstrap: img/svg { vertical-align: middle }, label { margin-bottom: .5rem }, form controls inherit the
   font size and lose their corner radius. The design kept the browser defaults for all of these (a button
   is 13.33px with 1px 6px padding; style.css zeroes every element's padding). */
:where(.ofs) :is(img, svg, .ofs-reset) { vertical-align: baseline; }
:where(.ofs) :is(label, .ofs-reset) { margin-bottom: 0; }
:where(.ofs) :is(button, input, select, .ofs-reset), :where(.ofs-lightbox) :is(button, .ofs-reset) { font-size: 13.3333px; }
:where(.ofs) :is(button, .ofs-reset), :where(.ofs-lightbox) :is(button, .ofs-reset) { padding: 1px 6px; }
:where(.ofs) :is(button, input, select, .ofs-reset) { line-height: normal; }
:where(.ofs) :is(select, option, .ofs-reset) { overflow-wrap: break-word; }
:where(.ofs) :is(option, .ofs-reset) { padding: 0 2px 1px; }
:where(.ofs) :is(input[type=checkbox], .ofs-reset) { margin: 3px 3px 3px 4px; }
:where(.ofs) :is(legend, .ofs-reset) { width: auto; max-width: none; }

/* =====================================================================
   1. Shared rules from post-job-landing-stitch/v3.css (subset)
   ===================================================================== */
.pj3 *, .pj3 *::before, .pj3 *::after { box-sizing: border-box; }
.pj3 { --ink: #0d0e0f; --muted: #5b6270; --line: #e6ebf3; --soft: #f4f6fb; --green: #17a05e; --green-soft: #e7f7ee; --footer-blue: #3B5BFF; color: var(--ink); background: #fff; }
.pj3 a { text-decoration: none; }
.pj3 svg { display: block; }
.pj3 img { max-width: 100%; }
.pj3-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.pj3-blue { color: var(--primary0); }
.pj3-badge { display: inline-flex; align-items: center; gap: 8px; background: #e8f0fe; border: 1px solid #d0dffc; border-radius: 50px; padding: 6px 16px; margin-bottom: 18px; }
.pj3-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary0); }
.pj3-badge__text { font-size: 12.5px; font-weight: 500; color: var(--primary0); line-height: 18px; }
.pj3-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--primary0); color: #fff; font-size: 15px; font-weight: 500; padding: 15px 34px; border-radius: 12px; transition: box-shadow .2s ease, transform .2s ease; }
.pj3-cta svg { width: 18px; height: 18px; }
.pj3-cta:hover { color: #fff; box-shadow: 0 8px 16px rgba(25, 25, 29, .06), 0 4px 8px rgba(139, 168, 255, .54); transform: translateY(-1px); }
.pj3-hero { background: radial-gradient(900px 420px at 50% -80px, #e8effd 0%, rgba(232, 239, 253, 0) 70%), #fff; padding: 64px 0 72px; }
.pj3-hero__title { font-size: 64px; font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 14px; }
.pj3-hero__sub { font-size: 17px; line-height: 26px; color: var(--muted); margin: 0 0 56px; }
.pj3-hero__row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: center; text-align: left; }
.pj3-hero__left { display: flex; flex-direction: column; align-items: flex-start; }
.pj3-hero__right { min-width: 0; }
.pj3-hero__sub strong { color: var(--ink); font-weight: 500; }
.pj3-vis { position: relative; width: 100%; margin: 0; padding: 0 20px 0 0; text-align: left; }
.pj3-vis__main { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px -20px rgba(13, 38, 87, .22), 0 8px 20px -8px rgba(13, 38, 87, .10); overflow: hidden; }
.pj3-vis__bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fafbfe; }
.pj3-vis__dots { display: inline-flex; gap: 6px; }
.pj3-vis__dots i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; }
.pj3-vis__dots i:nth-child(2) { background: #febc2e; }
.pj3-vis__dots i:nth-child(3) { background: #28c840; }
.pj3-vis__bar-title { font-size: 11.5px; color: #98a2b3; }
.pj3-vis__grid { display: grid; grid-template-columns: minmax(0, 1fr) 262px; align-items: stretch; }
.pj3-vis__left { padding: 18px 16px 16px 18px; min-width: 0; display: flex; flex-direction: column; }
.pj3-vis__job { padding: 0 2px 14px; }
.pj3-vis__job-title { font-size: 16px; font-weight: 600; line-height: 1.2; }
.pj3-vis__job-meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.pj3-vis__list { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: 2px; }
.pj3-vis__row { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; border: 1px solid transparent; }
.pj3-vis__row.is-top { background: #f2f6ff; border-color: #d9e4ff; }
.pj3-vis__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; background: #e7ecf5; }
.pj3-vis__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj3-vis__who b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj3-vis__who small { font-size: 11px; line-height: 1.25; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: break-word; }
.pj3-vis__who small > span:last-child { white-space: nowrap; }
.pj3-vis__panel { background: var(--soft); border-left: 1px solid var(--line); padding: 16px; display: flex; flex-direction: column; }
.pj3-vis__h { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--primary0); margin-bottom: 7px; }
.pj3-vis__h svg { width: 13px; height: 13px; }
.pj3-vis__btn { margin-top: auto; display: inline-flex; justify-content: center; background: var(--primary0); color: #fff; font-size: 12px; font-weight: 600; text-align: center; border-radius: 9px; padding: 10px 16px; }
.pj3-cta--lg { padding: 16px 40px; font-size: 16px; box-shadow: 0 14px 30px -12px rgba(38, 92, 255, .55); }
.pj3-rail-wrap { position: relative; }
.pj3-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding: 4px; margin: -4px; }
.pj3-rail::-webkit-scrollbar { display: none; }
.pj3-rail > * { scroll-snap-align: start; }
.pj3-rail-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; }
.pj3-rail-nav.is-hidden { display: none; }
.pj3-rail-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; }
.pj3-rail-btn svg { width: 18px; height: 18px; }
.pj3-rail-btn:hover:not(:disabled) { border-color: var(--primary0); color: var(--primary0); }
.pj3-rail-btn:disabled { opacity: .4; cursor: default; }
.pj3-rail-dots { display: inline-flex; gap: 8px; }
.pj3-rail-dot { width: 8px; height: 8px; border-radius: 4px; border: none; background: #cfd6e4; padding: 0; cursor: pointer; transition: all .2s; }
.pj3-rail-dot.is-active { width: 22px; background: var(--primary0); }
.pj3-videos__track { max-width: 1000px; margin-left: auto; margin-right: auto; }
.pj3-video { appearance: none; border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 0; overflow: hidden; cursor: pointer; text-align: left; font-family: inherit; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.pj3-video:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(13, 38, 87, .25); }
.pj3-video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0f172a; }
.pj3-video__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj3-video__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(38, 92, 255, .92); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.pj3-video__play svg { width: 20px; height: 20px; }
.pj3-video__title { display: block; padding: 12px 14px 14px; font-size: 14px; font-weight: 600; line-height: 20px; }
.pj3-lightbox { position: fixed; inset: 0; z-index: 2000; background: rgba(8, 12, 24, .88); display: none; align-items: center; justify-content: center; padding: 24px; }
.pj3-lightbox.is-open { display: flex; }
.pj3-lightbox__frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; max-height: calc(100vh - 48px); background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.pj3-lightbox__frame iframe { width: 100%; height: 100%; display: block; }
.pj3-lightbox__close { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.pj3-lightbox__close:hover { background: rgba(255, 255, 255, .28); }
.pj3-rail-nav--dots-only { margin-top: 22px; }
.pj3-testimonials__track { grid-auto-columns: calc((100% - 60px) / 4); }
.pj3-tcard { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.pj3-tcard__top { display: flex; gap: 14px; align-items: center; min-width: 0; }
.pj3-tcard__top > div { min-width: 0; }
.pj3-tcard__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: 0 0 52px; }
.pj3-tcard__name { font-size: 15.5px; font-weight: 600; line-height: 1.25; }
.pj3-tcard__role { font-size: 12.5px; line-height: 17px; color: var(--muted); margin-top: 3px; overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 12 6 6; }
.pj3-tcard__quote { font-size: 14px; line-height: 22px; color: #2b3240; margin: 0; flex: 1; }
@media (max-width: 1220px) and (min-width: 992px) {
    .pj3-hero__row { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr); gap: 40px; }
}
@media (max-width: 1024px) {
    .pj3-hero__row { grid-template-columns: 1fr; gap: 40px; }
    .pj3-hero__left { align-items: center; text-align: center; order: 2; }
    .pj3-hero__right { order: 1; max-width: 760px; width: 100%; margin: 0 auto; }
    .pj3-vis { padding: 0 12px 0 0; }
}
@media (max-width: 991px) {
    .pj3-hero { padding: 44px 0 56px; }
    .pj3-hero__title { font-size: 44px; }
    .pj3-hero__sub { margin-bottom: 32px; }
    .pj3-vis { padding: 0; }
    .pj3-vis__grid { grid-template-columns: 1fr; }
    .pj3-vis__panel { border-left: none; border-top: 1px solid var(--line); }
    .pj3-rail { grid-auto-columns: 86%; }
    .pj3-testimonials__track { grid-auto-columns: 100%; }
}
@media (max-width: 991px) {
    .pj3-videos__track { grid-auto-columns: 176px; }
    .pj3-video { position: relative; border-radius: 16px; background: #0b1220; border-color: rgba(15, 23, 42, .18); }
    .pj3-video__thumb { aspect-ratio: 9 / 16; }
    .pj3-video__thumb img { object-position: center; }
    .pj3-video__play { top: 44%; width: 40px; height: 40px; }
    .pj3-video__play svg { width: 18px; height: 18px; }
    .pj3-video__title { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 12px 12px; color: #fff; font-size: 13px; line-height: 18px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .72) 100%); }
    .pj3-lightbox { padding: 20px; }
    .pj3-lightbox__frame { aspect-ratio: 9 / 16; width: min(100%, calc(76svh * 9 / 16)); max-height: none; height: auto; margin: 0 auto; border-radius: 18px; }
    .pj3-lightbox__close { top: 12px; right: 12px; z-index: 2; background: rgba(2, 6, 23, .55); }
    .pj3-lightbox.is-landscape .pj3-lightbox__frame { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border-radius: 12px; }
    .pj3-lightbox.is-landscape { flex-direction: column; justify-content: center; align-items: flex-end; gap: 10px; }
    .pj3-lightbox.is-landscape .pj3-lightbox__close { position: static; width: 38px; height: 38px; }
}
@media (max-width: 640px) {
    .pj3-container { padding: 0 18px; }
    .pj3-hero__title { font-size: 36px; }
    .pj3-hero__sub { font-size: 15px; }
    .pj3-vis__main { border-radius: 14px; }
    .pj3-vis__left { padding: 16px; }
    .pj3-vis__panel { padding: 16px; }
}
@media (max-width: 640px) {
    .pj3-container { padding: 0 20px; }
    .pj3-hero { padding: 44px 0 60px; }
    .pj3-badge { margin-bottom: 20px; }
    .pj3-hero__title { margin-bottom: 16px; }
    .pj3-hero__sub { margin-bottom: 40px; line-height: 25px; }
    .pj3-hero__row { gap: 44px; }
    .pj3-vis__left { padding: 20px 18px; }
    .pj3-vis__list { gap: 6px; }
    .pj3-vis__row { padding: 10px; }
    .pj3-vis__panel { padding: 20px 18px 22px; }
    .pj3-rail-nav { margin-top: 26px; }
    .pj3-tcard { padding: 24px 22px; gap: 16px; }
}

/* =====================================================================
   2. offline-services/offline.css (designer)
   ===================================================================== */
.ofs { flex: 1 0 auto; overflow-x: clip; overflow-wrap: break-word; }
.ofs .pj3-cta { white-space: normal; text-align: center; max-width: 100%; border: 0; cursor: pointer; }
.ofs [id] { scroll-margin-top: 90px; }
/* long translated words (German compounds) break instead of pushing the layout wider */
.ofs :is(h1, h2, h3, p, b, small, label, legend, summary, .ofs-ov__label, .ofs-ov__title, .ofs-serv__label, .ofs-ui__foot, .ofs-compare__facts span, .ofs-deal__price span) { overflow-wrap: anywhere; }

/* ---------- shared: sections, heads, links, icon tiles, pills ---------- */
.ofs-sec { padding: 80px 0; }
.ofs-sec--soft { background: var(--soft); }
.ofs .pj3-badge { margin-bottom: 16px; }
/* section head: left aligned with an action on the right (homepage v2 pattern) */
.ofs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.ofs-head > div { flex: 1 1 560px; min-width: 0; }
.ofs-h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); }
.ofs-sub { margin-top: 12px; max-width: 720px; font-size: 16px; line-height: 26px; color: var(--muted); }
.ofs-more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--primary0); white-space: nowrap; }
.ofs-more svg { width: 16px; height: 16px; transition: transform .2s; }
.ofs-more:hover { color: var(--blue-deep); }
.ofs-more:hover svg { transform: translateX(3px); }

.ofs-ico {
    width: 52px; height: 52px; flex: 0 0 52px; border-radius: 15px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1;
}
.ofs-ico--blue { background: #e3ebff; color: var(--primary0); }
.ofs-ico--green { background: var(--green-soft); color: #128a4d; }
.ofs-ico--purple { background: #f1e8ff; color: #7c3aed; }
.ofs-ico--orange { background: #fff1e3; color: #e2680f; }
.ofs-ico--white { background: rgba(255, 255, 255, .16); color: #fff; }
.ofs-ico--sm { width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px; font-size: 21px; }

.ofs-pill { font-size: 11px; font-weight: 600; line-height: 1.3; border-radius: 20px; padding: 4px 10px; white-space: nowrap; }
.ofs-pill--hired { background: var(--green); color: #fff; }
.ofs-pill--int { background: #e3ebff; color: var(--primary0); }
.ofs-pill--checked { background: var(--green-soft); color: #128a4d; }

/* =====================================================================
   HERO
   ===================================================================== */
.ofs-hero { padding: 56px 0 80px; background: radial-gradient(760px 480px at 82% 40%, #e6eeff 0%, rgba(230, 238, 255, 0) 70%), #fff; }
.ofs-hero__row { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; }
.ofs-hero .pj3-hero__title { font-size: clamp(38px, 3.7vw, 52px); line-height: 1.08; margin-bottom: 18px; }
.ofs-hero .pj3-hero__sub { margin: 0 0 32px; max-width: 540px; font-size: 17px; line-height: 27px; }
.ofs-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.ofs-ghost {
    display: inline-flex; align-items: center; padding: 15px 26px; border-radius: 12px;
    background: #fff; border: 1px solid #d9e2f2; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.25;
    transition: border-color .15s, color .15s;
}
.ofs-ghost:hover { border-color: var(--primary0); color: var(--primary0); }
.ofs-hero__facts { display: grid; grid-template-columns: repeat(4, auto); gap: 0; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); width: 100%; max-width: 560px; }
.ofs-hero__facts div { min-width: 0; padding-right: 12px; }
.ofs-hero__facts div + div { padding-left: 18px; border-left: 1px solid var(--line); }
.ofs-hero__facts b { display: block; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.ofs-hero__facts span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--muted); }
/* soft blue card behind the mockup */
.ofs-hero .pj3-hero__right { position: relative; padding: 28px 0 28px 28px; }
.ofs-hero .pj3-hero__right::before {
    content: ""; position: absolute; inset: 0 -24px 0 0; border-radius: 28px;
    background: linear-gradient(150deg, #dfe8ff 0%, #c9d8ff 100%);
}
.ofs-hero .pj3-vis { position: relative; padding: 0; }
.ofs-hero .pj3-vis__grid { grid-template-columns: minmax(0, 1fr) 212px; }
.ofs-hero .pj3-vis__panel { padding: 16px 14px; }
/* mockup: status pill in the third column, checks + pay box in the side panel */
.ofs-vis__row { grid-template-columns: 34px minmax(96px, 1fr) auto; }
.ofs-vis__row .pj3-vis__who :is(b, small) { overflow-wrap: break-word; }
.ofs-vis__row .pj3-vis__who b { white-space: normal; overflow: visible; text-overflow: clip; }
.ofs-vis__row .pj3-vis__who small { display: block; -webkit-line-clamp: unset; overflow: visible; }
.ofs-vis__row .ofs-pill { justify-self: end; max-width: 100%; font-size: 10.5px; padding: 4px 8px; white-space: normal; text-align: center; overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
/* small phones: the status pill sits under the name */
@media (max-width: 420px) {
    .ofs-vis__row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 6px; }
    .ofs-vis__row .ofs-pill { grid-column: 2; justify-self: start; }
}
.pj3-vis__h i { font-size: 14px; line-height: 1; }
.ofs-vis__checks { display: grid; gap: 8px; margin-bottom: 16px; }
.ofs-vis__checks li { display: flex; align-items: center; gap: 7px; font-size: 12px; line-height: 1.3; color: #2b3240; }
.ofs-vis__checks li::before {
    content: ""; flex: 0 0 15px; width: 15px; height: 15px; border-radius: 50%;
    background: var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317a05e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 9px no-repeat;
}
.ofs-vis__pay { display: grid; gap: 6px; margin-bottom: 14px; }
.ofs-vis__pay div { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.ofs-vis__pay small { display: block; min-width: 0; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.ofs-vis__pay b { display: block; font-size: 18px; font-weight: 600; line-height: 1.25; color: var(--primary0); white-space: nowrap; }
.ofs-vis__guar { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; font-size: 12px; font-weight: 600; line-height: 1.3; color: #128a4d; }
.ofs-vis__guar i { font-size: 15px; line-height: 1; }

/* =====================================================================
   OFFLINE SERVICES OVERVIEW: four cards, Cost per Hire in brand blue
   ===================================================================== */
.ofs-ov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ofs-ov__card {
    display: flex; flex-direction: column; min-width: 0; padding: 24px 24px 22px;
    background: #fff; border: 1px solid var(--line); border-radius: 20px; color: var(--ink);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ofs-ov__card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -24px rgba(13, 38, 87, .35); border-color: #d5e0f5; color: var(--ink); }
.ofs-ov__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.ofs-ov__num { font-size: 14px; font-weight: 600; line-height: 1; color: #b4c0d6; letter-spacing: .04em; }
.ofs-ov__label { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--primary0); }
.ofs-ov__title { margin: 6px 0 22px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.ofs-ov__price { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.ofs-ov__price b { display: block; margin-bottom: 2px; font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.ofs-ov__card.is-featured { background: linear-gradient(160deg, #2f66ff 0%, #1f4fe0 100%); border-color: transparent; color: #fff; box-shadow: 0 22px 40px -22px rgba(38, 92, 255, .7); }
.ofs-ov__card.is-featured:hover { color: #fff; }
.ofs-ov__card.is-featured .ofs-ov__num { color: rgba(255, 255, 255, .55); }
.ofs-ov__card.is-featured .ofs-ov__label { color: #bcd0ff; }
.ofs-ov__card.is-featured .ofs-ov__price { border-top-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .78); }
.ofs-ov__card.is-featured .ofs-ov__price b { color: #fff; }

/* =====================================================================
   ONE SECTION PER SERVICE: text + a small product-style illustration
   ===================================================================== */
.ofs-svc { padding: 72px 0; }
.ofs-svc.ofs-sec--soft { background: var(--soft); }
.ofs-svc__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.ofs-svc--flip .ofs-svc__text { order: 2; }
.ofs-svc--flip .ofs-svc__visual { order: 1; }
.ofs-svc__top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ofs-svc__num {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--primary0); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; line-height: 1;
    box-shadow: 0 10px 20px -10px rgba(38, 92, 255, .8);
}
.ofs-serv__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--primary0); }
.ofs-svc__title { font-size: clamp(26px, 2.5vw, 36px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 18px; }
.ofs-svc__p { max-width: 560px; font-size: 16px; line-height: 26px; color: var(--muted); }
.ofs-svc__p + .ofs-svc__p { margin-top: 12px; }

/* price + action, one compact box under the text */
.ofs-deal {
    display: flex; align-items: center; gap: 24px; max-width: 560px; margin-top: 28px; padding: 18px 22px;
    background: #fff; border: 1px solid var(--line); border-radius: 18px;
}
.ofs-sec--soft .ofs-deal { border-color: #e1e8f4; }
.ofs-deal__price { flex: 0 1 auto; min-width: 0; max-width: 55%; padding-right: 24px; border-right: 1px solid var(--line); }
.ofs-deal__price small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; color: var(--muted); }
.ofs-deal__price b { display: block; margin-top: 4px; font-size: 30px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.ofs-deal__price span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ofs-deal__side { min-width: 0; }
.ofs-deal__side p { font-size: 14.5px; line-height: 22px; color: var(--ink); margin-bottom: 6px; }
.ofs-deal .ofs-more { display: inline; white-space: normal; }
.ofs-deal .ofs-more svg { display: inline-block; vertical-align: -3px; margin-left: 6px; }
.ofs-more svg { flex: 0 0 16px; }
.ofs-deal.is-featured { background: linear-gradient(160deg, #2f66ff 0%, #1f4fe0 100%); border-color: transparent; box-shadow: 0 22px 40px -24px rgba(38, 92, 255, .7); }
.ofs-deal.is-featured, .ofs-deal.is-featured p, .ofs-deal.is-featured b, .ofs-deal.is-featured .ofs-more { color: #fff; }
.ofs-deal.is-featured .ofs-deal__price { border-right-color: rgba(255, 255, 255, .25); }
.ofs-deal.is-featured small, .ofs-deal.is-featured .ofs-deal__price span { color: rgba(255, 255, 255, .75); }

/* small UI cards (illustrations only, generic data) */
.ofs-svc__visual { min-width: 0; }
.ofs-ui {
    background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px;
    box-shadow: 0 30px 60px -30px rgba(13, 38, 87, .3), 0 8px 20px -10px rgba(13, 38, 87, .08);
}
.ofs-ui__avatar { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; object-fit: cover; background: #e7ecf5; }
.ofs-ui__head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ofs-ui__head > div { flex: 1; min-width: 0; }
.ofs-ui__head > div > b, .ofs-ui__title > div > b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.ofs-ui__head > div > span, .ofs-ui__title > div > span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.ofs-ui__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ofs-ui__title > div { min-width: 0; }
.ofs-ui__checks { display: grid; gap: 6px; padding: 16px 0; }
.ofs-ui__checks div { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: #f7f9fc; font-size: 14.5px; line-height: 1.3; }
.ofs-ui__checks i { font-size: 20px; line-height: 1; color: var(--green); }
.ofs-ui__checks span { flex: 1; min-width: 0; }
.ofs-ui__checks small { font-size: 12px; font-weight: 600; color: #128a4d; }
.ofs-ui__note { padding: 12px 14px; border-radius: 12px; border: 1px dashed #d5deec; font-size: 13.5px; line-height: 1.5; color: #2b3240; }
.ofs-ui__note b { font-weight: 600; }
.ofs-ui__foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 12px; border-radius: 12px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.ofs-ui__foot.is-green { background: var(--green-soft); color: #128a4d; }
.ofs-ui__foot i { font-size: 18px; line-height: 1; }

/* Cost per Hire: blue panel holding the search card */
.ofs-ui-blue { padding: 28px; border-radius: 28px; background: linear-gradient(150deg, #2f66ff 0%, #1d47d6 100%); box-shadow: 0 30px 60px -30px rgba(38, 92, 255, .75); }
.ofs-ui-blue .ofs-ui { border-color: transparent; box-shadow: 0 20px 40px -20px rgba(6, 20, 70, .5); }
.ofs-ui-blue__note { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: #fff; font-size: 15px; line-height: 1.4; }
.ofs-ui-blue__note i { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: rgba(255, 255, 255, .16); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }
.ofs-ui-blue__note b { font-weight: 600; }
.ofs-funnel { display: grid; gap: 16px; padding-top: 20px; }
.ofs-funnel div { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; align-items: center; gap: 12px; font-size: 13.5px; line-height: 1.3; }
.ofs-funnel span { color: var(--muted); }
.ofs-funnel i { display: block; height: 10px; border-radius: 6px; background: #e8eef9; position: relative; overflow: hidden; }
.ofs-funnel i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 6px; background: #b9cbff; }
.ofs-funnel b { font-size: 15px; font-weight: 600; text-align: right; white-space: nowrap; }
.ofs-funnel .is-hired span { color: var(--ink); font-weight: 600; }
.ofs-funnel .is-hired i::after { background: var(--primary0); }
.ofs-funnel .is-hired b { color: var(--primary0); }

/* database search */
.ofs-ui__search { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: #f7f9fc; }
.ofs-ui__search span { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 14px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.ofs-ui__search span i { flex: 0 0 auto; }
.ofs-ui__search span + span { border-left: 1px solid var(--line); }
.ofs-ui__search i { font-size: 16px; line-height: 1; color: var(--muted); }
.ofs-ui__search b { padding: 10px 16px; text-align: center; border-radius: 10px; background: var(--primary0); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ofs-ui__meta { margin: 16px 2px 8px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.ofs-ui__rows, .ofs-ui__jobs { display: grid; gap: 8px; }
.ofs-ui__rows > div, .ofs-ui__jobs > div { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.ofs-ui__rows .ofs-ui__avatar { width: 40px; height: 40px; flex-basis: 40px; }
.ofs-ui__rows p, .ofs-ui__jobs p { flex: 1; min-width: 0; }
.ofs-ui__rows b, .ofs-ui__jobs b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.ofs-ui__rows p span, .ofs-ui__jobs p span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ofs-ui__rows em, .ofs-ui__jobs em { flex: 0 0 auto; }
.ofs-ui__rows em { font-style: normal; padding: 7px 14px; border-radius: 10px; border: 1px solid #d5e0f5; font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--primary0); }

/* job posts list */
.ofs-ui__add { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 10px; background: var(--primary0); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.ofs-ui__add i { font-size: 15px; line-height: 1; }
.ofs-ui__jobs { padding-top: 16px; }
.ofs-ui__logo { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; line-height: 1; color: #fff; }
.ofs-ui__logo.is-blue { background: var(--primary0); }
.ofs-ui__logo.is-green { background: #17a05e; }
.ofs-ui__logo.is-purple { background: #7c3aed; }
.ofs-ui__logo.is-orange { background: #e2680f; }
.ofs-ui__jobs em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 20px; background: var(--green-soft); color: #128a4d; font-size: 12px; font-weight: 600; line-height: 1.3; }
.ofs-ui__jobs em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.ofs-how { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: center; }
.ofs-steps { position: relative; display: grid; gap: 6px; margin: 28px 0 32px; }
.ofs-steps::before { content: ""; position: absolute; top: 36px; bottom: 36px; left: 37px; border-left: 2px dashed #c9d6f5; }
.ofs-steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; row-gap: 0; align-items: start; padding: 14px 16px; border-radius: 16px; transition: background .2s; }
.ofs-steps li:hover { background: var(--soft); }
.ofs-steps__num {
    grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; background: var(--primary0); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600; line-height: 1; box-shadow: 0 0 0 6px #fff;
}
.ofs-steps h3 { margin-top: 2px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.ofs-steps p { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--muted); }
.ofs-videos .pj3-videos__track { max-width: none; }
/* placeholder still until the real videos exist */
.ofs-video__ph { background: radial-gradient(120% 90% at 20% 10%, #f4f7ff 0%, #dfe8ff 60%, #cddcff 100%); }
@media (min-width: 992px) {
    .ofs-videos .pj3-rail { grid-auto-flow: row; grid-template-columns: 1fr 1fr; overflow: visible; }
    .ofs-videos .pj3-video:first-child { grid-column: 1 / -1; }
    .ofs-videos .pj3-video:not(:first-child) .pj3-video__play { width: 36px; height: 36px; }
    .ofs-videos .pj3-video:not(:first-child) .pj3-video__title { font-size: 13px; padding: 10px 12px 12px; }
}

/* =====================================================================
   PRICES: blue comparison card + estimate card
   ===================================================================== */
.ofs-prices { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.ofs-compare {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding: 40px; border-radius: 28px; color: #fff;
    background: linear-gradient(150deg, #2f66ff 0%, #1d47d6 100%); box-shadow: 0 30px 60px -30px rgba(38, 92, 255, .75);
}
.ofs-compare::after { content: ""; position: absolute; right: -90px; bottom: -110px; width: 300px; height: 300px; border-radius: 50%; border: 48px solid rgba(255, 255, 255, .06); pointer-events: none; }
.ofs-compare__eyebrow { align-self: flex-start; padding: 6px 12px; border-radius: 20px; background: rgba(255, 255, 255, .14); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.ofs-compare__title { margin-top: 18px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.ofs-compare__title span { color: #9ff0ff; }
.ofs-compare__bars { display: grid; gap: 12px; margin-top: 26px; }
.ofs-compare__bars div { display: grid; grid-template-columns: 130px minmax(0, 1fr) 90px; align-items: center; gap: 12px; font-size: 13.5px; line-height: 1.3; }
.ofs-compare__bars span { color: rgba(255, 255, 255, .8); }
.ofs-compare__bars i { display: block; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .14); position: relative; overflow: hidden; }
.ofs-compare__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; border-radius: 6px; }
.ofs-compare__bars i.is-them::after { width: 100%; background: rgba(255, 255, 255, .38); }
.ofs-compare__bars i.is-us::after { width: var(--ofs-us, 40%); background: #9ff0ff; }
.ofs-compare__bars b { font-size: 14px; font-weight: 600; text-align: right; white-space: nowrap; }
.ofs-compare__facts { display: grid; gap: 16px; margin: 30px 0 32px; }
.ofs-compare__facts div { display: flex; align-items: center; gap: 12px; font-size: 14.5px; line-height: 22px; color: rgba(255, 255, 255, .85); }
.ofs-compare__facts b { color: #fff; font-weight: 600; }
.ofs-compare__facts i { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: #fff; }
.ofs-btn-white {
    position: relative; z-index: 1; align-self: flex-start; margin-top: auto;
    display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 12px;
    background: #fff; color: var(--primary0); font-size: 15px; font-weight: 600; line-height: 1.25; transition: transform .2s, box-shadow .2s;
}
.ofs-btn-white svg { width: 18px; height: 18px; }
.ofs-btn-white:hover { color: var(--blue-deep); transform: translateY(-1px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .4); }

.ofs-calc { display: flex; flex-direction: column; justify-content: center; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 30px 60px -36px rgba(13, 38, 87, .3); }
.ofs-calc__h { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.ofs-calc__h > div > b { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; }
.ofs-calc__h > div > span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.ofs-calc label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 1.3; color: var(--muted); }
.ofs-calc output { font-weight: 600; color: var(--ink); white-space: nowrap; }
/* sliders: blue filled part (--fill, set in script) on a soft track, white thumb with a blue ring; same look in Chrome, Safari and Firefox */
.ofs-calc label + input { margin: 12px 0 22px; }
.ofs-calc input[type=range] {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 6px; padding: 0; border: 0; border-radius: 3px; cursor: pointer;
    background: linear-gradient(to right, var(--primary0) 0, var(--primary0) var(--fill, 50%), #dfe6f3 var(--fill, 50%), #dfe6f3 100%);
}
.ofs-calc input[type=range]:focus { outline: none; }
.ofs-calc input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 2px solid var(--primary0); box-shadow: 0 2px 6px rgba(13, 38, 87, .22); transition: transform .15s;
}
.ofs-calc input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--primary0); box-shadow: 0 2px 6px rgba(13, 38, 87, .22); }
.ofs-calc input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: transparent; }
.ofs-calc input[type=range]:hover::-webkit-slider-thumb, .ofs-calc input[type=range]:focus-visible::-webkit-slider-thumb { transform: scale(1.12); }
.ofs-calc input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(38, 92, 255, .18); }
.ofs-calc input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(38, 92, 255, .18); }
.ofs-calc__res { display: grid; gap: 8px; margin-top: 4px; }
.ofs-calc__res div { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #f5f8ff; border-radius: 14px; padding: 14px 18px; min-width: 0; }
.ofs-calc__res small { display: block; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.ofs-calc__res b { display: block; white-space: nowrap; font-size: 24px; font-weight: 600; line-height: 1.25; color: var(--primary0); letter-spacing: -0.01em; }
.ofs-calc__note { margin-top: 12px; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-align: center; }

/* =====================================================================
   TESTIMONIALS: 3 cards per view on desktop
   ===================================================================== */
.ofs-quotes-sec { background: #fff; }
.ofs-quotes.pj3-testimonials__track { grid-auto-columns: calc((100% - 40px) / 3); }
.ofs-quotes .pj3-tcard { position: relative; padding: 28px; border-radius: 20px; background: var(--soft); border-color: transparent; }
.ofs-quotes .pj3-tcard::before {
    content: ""; position: absolute; top: 26px; right: 26px; width: 34px; height: 26px; opacity: .16;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 32'%3E%3Cpath fill='%23265CFF' d='M0 32V19.2C0 15.7 .6 12.5 1.8 9.6 3.1 6.6 5.1 3.7 7.8 1L13 5.4c-1.9 2.1-3.3 4.3-4.3 6.4-.9 2.1-1.5 4.3-1.8 6.6H14V32H0Zm22 0V19.2c0-3.5.6-6.7 1.8-9.6 1.3-3 3.3-5.9 6-8.6L35 5.4c-1.9 2.1-3.3 4.3-4.3 6.4-.9 2.1-1.5 4.3-1.8 6.6H36V32H22Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ofs-quotes .pj3-tcard__quote { font-size: 15px; line-height: 24px; color: #2b3240; }
.ofs-quotes .pj3-tcard__top { padding-right: 44px; }

/* =====================================================================
   FAQ
   ===================================================================== */
.ofs-faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.ofs-faq-grid .ofs-sub { margin-bottom: 20px; }
.ofs-faq { display: grid; gap: 12px; }
.ofs-faq details { background: #fff; border: 1px solid var(--line); border-radius: 16px; transition: border-color .2s, box-shadow .2s; }
.ofs-faq details[open] { border-color: #d5e0f5; box-shadow: 0 18px 36px -28px rgba(13, 38, 87, .35); }
.ofs-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 22px; cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 600; line-height: 1.4;
}
.ofs-faq summary::-webkit-details-marker { display: none; }
.ofs-faq summary::after {
    content: ""; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; background: #eef3ff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23265CFF' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat;
    transition: transform .2s;
}
.ofs-faq details[open] summary::after { transform: rotate(45deg); }
.ofs-faq details p { padding: 0 66px 20px 22px; font-size: 15px; line-height: 24px; color: var(--muted); }
.ofs-faq a { color: var(--primary0); font-weight: 500; }

/* =====================================================================
   CONTACT: blue panel with the form card
   ===================================================================== */
.ofs-cta {
    position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center;
    padding: 56px; border-radius: 32px; color: #fff;
    background: linear-gradient(150deg, #2f66ff 0%, #1d47d6 100%); box-shadow: 0 40px 80px -40px rgba(38, 92, 255, .7);
}
.ofs-cta::before { content: ""; position: absolute; left: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%; border: 60px solid rgba(255, 255, 255, .05); pointer-events: none; }
.ofs-cta > * { position: relative; }
.ofs-cta__eyebrow { display: inline-block; padding: 6px 12px; border-radius: 20px; background: rgba(255, 255, 255, .14); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; }
.ofs-cta__title { margin-top: 18px; font-size: clamp(28px, 2.8vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; }
.ofs-cta__title span { color: #9ff0ff; }
.ofs-cta__sub { margin-top: 14px; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .85); }
.ofs-cta__points { display: grid; gap: 14px; margin-top: 30px; }
.ofs-cta__points div { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; line-height: 1.35; }
.ofs-cta__points i { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; background: rgba(255, 255, 255, .14); display: inline-flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; }

.ofs-end__form { background: #fff; border-radius: 24px; padding: 32px; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(6, 20, 70, .55); }
.ofs-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 16px; }
.ofs-form label, .ofs-form legend { display: block; margin-bottom: 8px; padding: 0; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.ofs-form input[type=text], .ofs-form input[type=email], .ofs-form select {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 50px; margin: 0; padding: 0 16px;
    border: 1px solid #e1e7f0; border-radius: 12px; background-color: #f7f9fc;
    font-size: 15px; line-height: 1.3; color: var(--ink); transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.ofs-form input::placeholder { color: #9aa3b2; opacity: 1; }
.ofs-form select { padding-right: 44px; cursor: pointer; background: #f7f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6270' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center / 16px no-repeat; }
.ofs-form select:invalid { color: #9aa3b2; }
.ofs-form select option { color: var(--ink); }
.ofs-form input:hover, .ofs-form select:hover { border-color: #cdd6e4; }
.ofs-form input:focus, .ofs-form select:focus { outline: none; border-color: var(--primary0); background-color: #fff; box-shadow: 0 0 0 4px rgba(38, 92, 255, .12); }
.ofs-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.ofs-form__full { grid-column: 1 / -1; }
/* service choices: tappable chips with a round check */
.ofs-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ofs-chip { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.ofs-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ofs-chip span {
    display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 12px 14px;
    border: 1px solid #e1e7f0; border-radius: 12px; background: #f7f9fc;
    font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--ink); transition: border-color .15s, background-color .15s;
}
.ofs-chip span::before {
    content: ""; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
    border: 2px solid #c5cfdf; background: #fff center / 11px no-repeat; transition: all .15s;
}
.ofs-chip:hover span { border-color: #cdd6e4; }
.ofs-chip input:checked + span { border-color: var(--primary0); background: #f0f5ff; }
.ofs-chip input:checked + span::before {
    border-color: var(--primary0); background-color: var(--primary0);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
}
.ofs-chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(38, 92, 255, .12); border-color: var(--primary0); }
.ofs-form__btn { width: 100%; justify-content: center; margin-top: 6px; padding-top: 16px; padding-bottom: 16px; font-size: 16px; }
.ofs-form__msg { font-size: 14px; line-height: 1.5; }
.ofs-form__msg.is-error { color: #c62828; }
.ofs-form__msg.is-ok { color: #128a4d; font-weight: 600; }
.ofs-form__note { margin-top: -4px; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-align: center; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1100px) {
    .ofs-hero__row { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .ofs-hero .pj3-hero__left { order: 1; align-items: flex-start; text-align: left; }
    .ofs-hero .pj3-hero__right { order: 2; width: 100%; max-width: 680px; margin: 0; }
    .ofs-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ofs-svc__grid { gap: 48px; }
    .ofs-prices { grid-template-columns: minmax(0, 1fr); }
    .ofs-cta { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 44px; }
}
@media (max-width: 991px) {
    .ofs-sec { padding: 72px 0; }
    .ofs-svc { padding: 64px 0; }
    .ofs-svc__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ofs-svc--flip .ofs-svc__text { order: 1; }
    .ofs-svc--flip .ofs-svc__visual { order: 2; }
    .ofs-svc__visual { max-width: 560px; width: 100%; }
    .ofs-how { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ofs-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .ofs-hero .pj3-vis__grid { grid-template-columns: minmax(0, 1fr); }
    .ofs-hero .pj3-hero__right { padding: 18px 0 18px 18px; }
    .ofs-hero .pj3-hero__right::before { right: -12px; border-radius: 22px; }
    .ofs-quotes.pj3-testimonials__track { grid-auto-columns: 100%; }
    /* phones/tablets: v3 turns videos into dark 9:16 reels; keep the light placeholder readable */
    .ofs-videos .pj3-video { background: #dfe8ff; border-color: var(--line); }
    .ofs-videos .pj3-video__title { color: var(--ink); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .92) 60%); }
}
@media (max-width: 640px) {
    .ofs-sec { padding: 56px 0; }
    .ofs-svc { padding: 52px 0; }
    .ofs-head { margin-bottom: 28px; }
    .ofs-hero { padding: 36px 0 56px; }
    .ofs-hero .pj3-hero__sub { font-size: 15.5px; line-height: 25px; margin-bottom: 26px; }
    .ofs-hero__ctas { width: 100%; }
    .ofs-hero__ctas .pj3-cta, .ofs-ghost { width: 100%; justify-content: center; }
    .ofs-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; margin-top: 30px; padding-top: 22px; }
    .ofs-hero__facts div:nth-child(3) { padding-left: 0; border-left: 0; }
    .ofs-hero__facts b { font-size: 21px; }
    /* phones: the side panel repeats text already on the page */
    .ofs-hero .pj3-vis__panel { display: none; }
    /* overview: compact 2 x 2 on phones */
    .ofs-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ofs-ov__card { padding: 16px 14px; border-radius: 16px; }
    .ofs-ov__top { margin-bottom: 12px; }
    .ofs-ov__top .ofs-ico { width: 40px; height: 40px; flex-basis: 40px; border-radius: 12px; font-size: 19px; }
    .ofs-ov__label { font-size: 10px; letter-spacing: .06em; }
    .ofs-ov__title { margin: 4px 0 12px; font-size: 15px; }
    .ofs-ov__price { padding-top: 10px; font-size: 12px; }
    .ofs-ov__price b { font-size: 19px; }
    /* product mockups: one row fewer and no extra note on phones */
    .ofs-ui__note, .ofs-ui__rows > div:nth-child(3), .ofs-ui__jobs > div:nth-child(4) { display: none; }
    .ofs-ui__checks { padding: 12px 0 0; }
    .ofs-ui__foot { margin-top: 12px; }
    .ofs-svc__p { font-size: 15px; line-height: 24px; }
    .ofs-deal { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
    .ofs-deal__price { max-width: none; padding-right: 0; border-right: 0; }
    .ofs-ui { padding: 18px; border-radius: 18px; }
    .ofs-ui-blue { padding: 16px; border-radius: 22px; }
    .ofs-funnel div { grid-template-columns: 104px minmax(0, 1fr) 36px; gap: 10px; font-size: 12.5px; }
    .ofs-ui__search { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ofs-ui__search b { grid-column: 1 / -1; padding: 10px 12px; }
    .ofs-compare, .ofs-calc { padding: 26px 20px; border-radius: 22px; }
    .ofs-compare__bars div { grid-template-columns: minmax(0, 1fr) 82px; }
    .ofs-compare__bars i { grid-column: 1 / -1; grid-row: 2; }
    .ofs-btn-white { width: 100%; justify-content: center; }
    .ofs-calc__res b { font-size: 20px; }
    .ofs-quotes .pj3-tcard { padding: 22px; }
    .ofs-faq summary { padding: 18px; font-size: 15px; }
    .ofs-faq details p { padding: 0 18px 18px; }
    .ofs-cta { padding: 28px 20px 20px; border-radius: 24px; }
    .ofs-end__form { padding: 22px 18px; border-radius: 18px; }
    .ofs-form { grid-template-columns: minmax(0, 1fr); }
    .ofs-checks { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   3. App adaptations, part 2
   ===================================================================== */
/* Honeypot field of the contact form: out of the grid and off-screen, so the form keeps the designer's
   rows. Not display:none, which the simplest bots skip. */
.ofs-form .ofs-form__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
/* While the request is on its way the button cannot be pressed again. */
.ofs-form__btn:disabled { opacity: .7; cursor: default; transform: none; }