/* Blog Section 2 — two-column layout */
        .bs2-layout {
            display: flex;
            align-items: flex-start;
            gap: 0;
        }
        .bs2-left {
            width: 42%;
            flex-shrink: 0;
            padding-right: 80px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
        .bs2-right {
            flex: 1;
            border-left: 1px solid rgba(255,255,255,0.08);
        }
        /* article list */
        .bs2-grid {
            display: flex;
            flex-direction: column;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        .bs2-item {
            display: flex;
            align-items: center;
            gap: 24px;
            padding: 40px 32px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
            text-decoration: none !important;
            transition: background 0.2s ease;
        }
        .bs2-item:hover {
            background: rgba(255,255,255,0.02);
            text-decoration: none !important;
        }
        .bs2-meta {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex-shrink: 0;
            width: 130px;
        }
        .bs2-tag {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #FBEC5D;
            font-family: 'Manrope', sans-serif;
        }
        .bs2-date {
            font-size: 11px;
            color: rgba(255,255,255,0.3);
        }
        .bs2-title {
            flex: 1;
            font-size: clamp(15px, 1.1vw, 17px);
            font-weight: 400;
            color: rgba(255,255,255,0.75);
            line-height: 1.5;
            margin: 0;
            transition: color 0.2s ease;
        }
        .bs2-item:hover .bs2-title {
            color: #fff;
        }
        .bs2-arrow {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            color: rgba(255,255,255,0.35);
            transition: color 0.2s ease;
        }
        .bs2-item:hover .bs2-arrow {
            color: #fff;
        }
        @media (max-width: 767px) {
            .bs2-layout { flex-direction: column; }
            .bs2-left { width: 100%; padding-right: 0; margin-bottom: 40px; }
            .bs2-right { border-left: none; width: 100%; }
            .bs2-item { padding: 22px 0; }
            .bs2-view-all { margin-top: 32px; }
        }

        /* Capabilities nav arrows */
        a.cap-sw-prev, a.cap-sw-next,
        a.cap-sw-prev:hover, a.cap-sw-next:hover,
        a.cap-sw-prev:focus, a.cap-sw-next:focus {
            color: #fff !important;
            background: none !important;
            border: none !important;
            outline: none;
        }

        /* ── Typography system — index.html only ──────────────────────────── */

        /* Navbar — center menu items between logo and CTA */
        .header.style-1 .header-inner-wrap {
            position: relative;
        }
        .header.style-1 .main-menu {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }

        /* Section labels — uppercase, bold, no dot */
        .point { text-transform: uppercase !important; letter-spacing: 0.08em; font-size: 11px !important; font-weight: 700 !important; }
        .point .item { display: none !important; }

        /* DM Sans — base body font */
        body {
            font-family: 'DM Sans', sans-serif !important;
        }

        /* Manrope — headings */
        h1, h2, h3, h4, h5, h6,
        .h1, .h2, .h3, .h4, .h5, .h6 {
            font-family: 'Manrope', sans-serif !important;
        }

        /* Manrope — nav links, logo text, CTA buttons */
        .header-default .nav-link,
        .header-default .tf-btn,
        .tf-btn,
        .logo,
        .nav-link {
            font-family: 'Manrope', sans-serif !important;
        }

        /* Monospace (system) — counter/odometer numbers */
        .odometer,
        .counter-number,
        .wrap-counter .sub {
            font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace !important;
        }
        .wrap-counter .odometer,
        .wrap-counter .sub {
            font-weight: 300 !important;
        }
        .wrap-counter .odometer *,
        .wrap-counter .counter-number .odometer-digit,
        .wrap-counter .counter-number .odometer-value {
            font-weight: 300 !important;
        }

        /* Manrope — stat labels */
        .wrap-counter p {
            font-family: 'Manrope', sans-serif !important;
            font-size: 20px !important;
        }

        /* DM Sans — paragraphs and general UI text */
        p, li, span, label, input, textarea, select {
            font-family: 'DM Sans', sans-serif !important;
        }
        /* #FBEC5D — hero primary button */
        .tf-btn.btn-primary2 {
            background-color: #FBEC5D !important;
        }
        .tf-btn.btn-primary2 .bg-effect {
            background-color: #FBEC5D !important;
        }
        .tf-btn.btn-primary2 span,
        .tf-btn.btn-primary2:hover span {
            color: #121416 !important;
        }
        /* #FBEC5D — navbar Get In Touch button */
        .header .tf-btn.btn-dark {
            background-color: #FBEC5D !important;
        }
        .header .tf-btn.btn-dark span {
            color: #121416 !important;
            font-size: 14.5px !important;
        }
        .header .tf-btn.btn-dark .bg-effect {
            background-color: #FBEC5D !important;
        }

        /* Navbar & mobile menu logo — white SVG on black bg */
        .header .header-logo img,
        .offcanvas .logo img {
            filter: none !important;
        }

        /* Mobile menu close button — white */
        .close-menu,
        .close-menu i,
        .close-menu::before,
        .close-menu::after,
        .offcanvas .icon-times-solid,
        .offcanvas .icon-times-solid::before {
            color: #fff !important;
            background-color: transparent !important;
            filter: none !important;
        }

        /* Mobile menu contact info — white */
        .canvas-mb .text_mono-gray,
        .canvas-mb .text_mono-gray-5,
        .canvas-mb .text_mono-gray a,
        .canvas-mb .text_mono-gray span {
            color: #fff !important;
        }

        /* Nav links white — both headers */
        .header .main-menu .navigation li a,
        .header .main-menu .navigation li:hover a,
        .header .main-menu .navigation li.current-menu a,
        .header .main-menu .navigation li.current-menu-item a,
        #header-main .main-menu .navigation li a,
        #header-main .main-menu .navigation li:hover a {
            color: #fff !important;
        }

        /* Scrollbar — gray */
        body::-webkit-scrollbar-thumb {
            background: #9ca3af !important;
        }

        /* Global — all dark buttons: yellow hover, black text */
        .tf-btn.btn-dark .bg-effect {
            background-color: #FBEC5D !important;
        }
        .tf-btn.btn-dark:hover {
            background-color: #FBEC5D !important;
        }
        .tf-btn.btn-dark:hover span {
            color: #121416 !important;
        }

        /* Global — all border buttons: yellow hover, black text */
        .tf-btn.btn-border .bg-effect {
            background-color: #FBEC5D !important;
        }
        .tf-btn.btn-border:hover {
            background-color: #FBEC5D !important;
            border-color: #FBEC5D !important;
        }
        .tf-btn.btn-border span,
        .tf-btn.btn-border:hover span {
            color: #121416 !important;
        }

        /* Global — link-style buttons: white */
        .tf-btn-link,
        .tf-btn-link:hover {
            color: #fff !important;
        }

        /* How We Work — no border radius */
        .section-work .step-container .tf-box-icon.style-3 {

        }
        .section-work .step-container .tf-box-icon.style-3 .number {
            border-radius: 100% !important;
        }

        /* How We Work — neutralise the green :has sibling cascade entirely */
        .section-work .step-container .tf-box-icon:not(.active):has(~ .tf-box-icon:hover) {
            background-color: var(--White) !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):has(~ .tf-box-icon:hover) .number {
            background-color: var(--Mono-gray-2) !important;
            color: var(--Mono-dark-9) !important;
            border-color: var(--Mono-gray-2) !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):has(~ .tf-box-icon:hover) .number::after {
            width: 0 !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):has(~ .tf-box-icon:hover) .title {
            color: #fff !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):has(~ .tf-box-icon:hover) p {
            color: #fff !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):has(~ .tf-box-icon:hover) .icon svg path {
            fill: #121416 !important;
            stroke: #121416 !important;
        }

        /* How We Work — active card: no bg, yellow border */
        .section-work .step-container .tf-box-icon.active {
            background-color: #FBEC5D !important;
            border-color: #FBEC5D !important;

        }
        .section-work .step-container .tf-box-icon.active .number {
            background-color: #FBEC5D !important;
            color: #000 !important;
            border-color: #FBEC5D !important;
            border-radius: 100% !important;
        }
        .section-work .step-container .tf-box-icon.active .number::after {
            background-color: #FBEC5D !important;
        }
        .section-work .step-container .tf-box-icon.active .title {
            color: #000 !important;
        }
        .section-work .step-container .tf-box-icon.active p {
            color: #000 !important;
        }
        .section-work .step-container .tf-box-icon.active .icon svg path {
            fill: none !important;
            stroke: #000 !important;
        }

        /* How We Work — non-active cards: no bg, yellow border on hover */
        .section-work .step-container .tf-box-icon:not(.active):hover {
            background-color: #FBEC5D !important;
            border-color: #FBEC5D !important;

        }
        .section-work .step-container .tf-box-icon:not(.active):hover .number {
            background-color: #FBEC5D !important;
            color: #000 !important;
            border-color: #FBEC5D !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):hover .number::after {
            background-color: #FBEC5D !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):hover .title {
            color: #000 !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):hover p {
            color: #000 !important;
        }
        .section-work .step-container .tf-box-icon:not(.active):hover .icon svg path {
            fill: none !important;
            stroke: #000 !important;
        }

        /* How We Work — connector line: gray by default, yellow when card is hovered/active */
        .section-work .step-container .tf-box-icon.active:not(:last-child)::before,
        .section-work .step-container .tf-box-icon:not(.active):hover:not(:last-child)::before {
            background: #FBEC5D !important;
        }

        /* How We Work — spacing between title and body text */
        .section-work .step-container .tf-box-icon .title {
            margin-bottom: 20px !important;
        }

        /* How We Work — icon size */
        .section-work .step-container .tf-box-icon .icon svg {
            width: 26px !important;
            height: 26px !important;
        }

        /* Nav arrows on Focus Areas */
        .section-service .sw-button.style-default {
            border-radius: 12px !important;
            border: 1px solid rgba(128, 128, 128, 0.22) !important;
            padding: 0 !important;
            width: 34px !important;
            height: 34px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
        .section-service .sw-button.style-default i {
            font-size: 11px !important;
            line-height: 1 !important;
        }
        .section-service .sw-button.style-default:hover {
            border-color: #121416 !important;
        }
        .section-service .sw-button.style-default:hover i {
            color: #121416 !important;
        }

        /* Blog — pagination dots: black active bullet */
        .sw-pagination-layout .swiper-pagination-bullet-active {
            background-color: #121416 !important;
        }

        /* Blog — image container border-radius */
        .section-blog .blog-article-item.style-1 .article-thumb {
            border-radius: 12px !important;
            overflow: hidden !important;
        }

        /* Blog — date tag border-radius */
        .section-blog .blog-article-item .tag {
            border-radius: 12px !important;
        }

        /* Coming soon nav links — dimmed, not clickable */
        .nav-coming-soon {
            opacity: 0.35 !important;
            pointer-events: none !important;
            cursor: default !important;
        }

        /* Footer links — yellow on hover */
        .footer a:hover,
        .footer a:hover span,
        .footer .footer-menu_item:hover {
            color: #FBEC5D !important;
        }

        /* Footer contact form — input & textarea border-radius */
        .footer .form-help fieldset input,
        .footer .form-help textarea {
            border-radius: 12px !important;
        }

        /* Footer contact form — light yellow background */
        .footer .right .content {
            background-color: #FEFCE8 !important;
        }

        /* Footer — desktop: form left-rounded, image right-rounded */
        @media (min-width: 576px) {
            .footer .right .content {
                border-radius: 12px 0 0 12px !important;
            }
            .footer .right .image img {
                border-radius: 0 12px 12px 0 !important;
                display: block;
                height: 100%;
                object-fit: cover;
            }
        }

        /* Footer — mobile: form fully rounded */
        @media (max-width: 575px) {
            .footer .right .content {
                border-radius: 12px !important;
            }
        }

        /* Heading tags — match button border-radius */
        .heading-tag {
            border-radius: 12px !important;
        }

        /* All buttons — no border radius */
        .tf-btn {

        }

        /* Remove dots from dropdown items */
        .header .main-menu .navigation .has-child .submenu > li::before {
            display: none !important;
        }
        /* Shrink dropdown arrow */
        .header .main-menu .navigation .has-child > a::after {
            font-size: 4px !important;
        }

        /* Solutions dropdown border */
        .header .main-menu .navigation .submenu {
            border: 1px solid rgba(128, 128, 128, 0.22) !important;
        }

        /* Navbar menu font size + color + padding */
        .header .main-menu .navigation > li > a {
            font-size: 14.5px !important;
            color: #121416 !important;
            padding-left: 16px !important;
            padding-right: 16px !important;
        }
        .header .main-menu .navigation .submenu li a {
            font-size: 14px !important;
            color: #121416 !important;
        }

        /* Navbar bottom border */
        .header {
            border-bottom: 1px solid rgba(128, 128, 128, 0.22) !important;
        }

        /* Footer bottom — remove inner wrapper border */
        .footer .footer-bottom .wrapper {
            border-top: none !important;
        }

        /* Global — all buttons smaller */
        .tf-btn {
            height: 40px !important;
            font-size: 13px !important;
            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        /* CTA banner button — match aabout.html CTA size */
        .section-work.style-2 .tf-btn {
            height: 52px !important;
            font-size: inherit !important;
            padding-left: 28px !important;
            padding-right: 28px !important;
        }

        /* Our Services cards — white bg, border, dark text, yellow hover */
        .section-service .tf-box-icon.style-6 {
            background-color: #ffffff !important;
            border: 1px solid rgba(128, 128, 128, 0.22) !important;
            border-radius: 12px !important;
            cursor: pointer !important;
            position: relative !important;
        }
        /* Stretch heading link to cover entire card */
        .section-service .tf-box-icon.style-6 h3 a::after {
            content: '';
            position: absolute;
            inset: 0;
        }
        /* Icon container — bordered, smaller */
        .section-service .tf-box-icon.style-6 .icon {
            border: 1px solid rgba(128, 128, 128, 0.22) !important;
            border-radius: 12px !important;
            width: 46px !important;
            height: 46px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background-color: transparent !important;
        }
        .section-service .tf-box-icon.style-6 .icon img {
            width: 22px !important;
            height: 22px !important;
            filter: brightness(0) !important;
            transition: none !important;
            animation: none !important;
        }
        .section-service .tf-box-icon.style-6.effec-icon .icon,
        .section-service .tf-box-icon.style-6.effec-icon .icon img {
            animation: none !important;
            transition: none !important;
        }
        /* Text — dark by default */
        .section-service .tf-box-icon.style-6 h3,
        .section-service .tf-box-icon.style-6 h3 a,
        .section-service .tf-box-icon.style-6 p {
            color: #121416 !important;
        }
        /* Hover — white bg stays, border turns yellow, text stays black */
        .section-service .tf-box-icon.style-6:hover {
            background-color: #ffffff !important;
            border-color: #FBEC5D !important;
        }
        .section-service .tf-box-icon.style-6:hover .icon {
            border-color: #FBEC5D !important;
        }
        .section-service .tf-box-icon.style-6:hover h3,
        .section-service .tf-box-icon.style-6:hover h3 a,
        .section-service .tf-box-icon.style-6:hover p,
        .section-service .tf-box-icon.style-6:hover .tf-btn-link,
        .section-service .tf-box-icon.style-6:hover .tf-btn-link span {
            color: #121416 !important;
        }

        /* Mobile hamburger — shorter lines */
        .burger span {
            height: 1.5px !important;
        }

        /* Mobile menu close button — black, no border */
        .close-menu {
            border: none !important;
            background: none !important;
            box-shadow: none !important;
        }
        .close-menu i {
            color: #121416 !important;
        }

        /* Why TBT accordion — remove content indent */
        .section-approach .accordion-faqs-content {
            padding-left: 0 !important;
        }

        /* Case studies — arrow nav buttons: transparent bg, white text */
        .section-case-studie .sw-button.style-default.has-bg,
        .section-case-studies .sw-button.style-default.has-bg {
            background-color: transparent !important;
            border-color: transparent !important;

            color: #ffffff !important;
            width: 40px !important;
            height: 40px !important;
            box-shadow: none !important;
        }
        .section-case-studie .sw-button.style-default.has-bg i,
        .section-case-studies .sw-button.style-default.has-bg i {
            color: #ffffff !important;
            font-size: 18px !important;
        }
        .section-case-studie .sw-button.style-default.has-bg.swiper-button-disabled,
        .section-case-studies .sw-button.style-default.has-bg.swiper-button-disabled {
            background-color: transparent !important;
            border-color: transparent !important;
            color: #ffffff !important;
            opacity: 0.35 !important;
        }
        .section-case-studie .sw-button.style-default.has-bg.swiper-button-disabled i,
        .section-case-studies .sw-button.style-default.has-bg.swiper-button-disabled i {
            color: #ffffff !important;
        }
        .section-case-studie .sw-button.style-default.has-bg:hover,
        .section-case-studies .sw-button.style-default.has-bg:hover {
            background-color: transparent !important;
            border-color: transparent !important;
        }
        .section-case-studie .sw-button.style-default.has-bg:hover i,
        .section-case-studies .sw-button.style-default.has-bg:hover i {
            color: #ffffff !important;
        }

        /* All links white */
        a, a:visited, a:hover, a:active, a:focus {
            color: #fff !important;
        }


/* == index.html inline-style replacements ================================== */

/* Hero sub-heading extra top margin (index only) */
.hero-subheading { margin-top: 10px; }

/* Hero — Join OI waitlist button */
.btn-hero-waitlist,
.btn-hero-waitlist:focus {
    background-color: #FBEC5D !important;
    border-color: #FBEC5D !important;
    color: #000 !important;
}
.btn-hero-waitlist span { color: #000 !important; }
.btn-hero-waitlist .bg-effect { background-color: #000 !important; }
.btn-hero-waitlist:hover {
    background-color: #000 !important;
    border-color: #000 !important;
}
.btn-hero-waitlist:hover span { color: #FBEC5D !important; }

/* Tech section overlay — Learn More button */
.tech-overlay-box .tf-btn {
    color: #000 !important;
    background-color: #fff !important;
}
.tech-overlay-box .tf-btn:hover {
    color: #000 !important;
    background-color: #FBEC5D !important;
}
.tech-overlay-box .tf-btn .bg-effect {
    background-color: #FBEC5D !important;
}

/* Hero video wrapper */
.hero-video-wrap { margin-top: 40px; position: relative; }

/* Capabilities swiper nav gap */
.wrap-sw-button { gap: 40px; }

/* Capability swiper arrow buttons sizing */
.cap-sw-prev, .cap-sw-next {
    font-size: 16px;
    line-height: 1;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
}

/* Tech/video section vertical spacing */
.tech-section-wrap { margin-top: 160px; margin-bottom: 200px; }

/* Full-screen hero background video */
.hero-video { height: 860px; }

/* Hero primary CTA — float left, black text */
.btn-hero-primary { align-self: flex-start; color: #000 !important; }

/* Generic position-relative wrapper */
.pos-relative { position: relative; }

/* Careers section video */
.careers-video { width: 100%; height: 680px; object-fit: cover; display: block; }

/* Article thumb cards — relative positioning for overlays */
.article-thumb { position: relative; }