/* Braviosys-specific components styled to look OiTech-native.
   Uses OiTech CSS variables (orange #ffaa17 accent, Space Grotesk, dark #222429). */

/* ---- Service cards (services grid, homepage, patterns) ---- */
.bvs-service-card {
	margin-bottom: 30px;
	height: 100%;
}
.bvs-service-card .inner-box {
	position: relative;
	height: 100%;
	background: #ffffff;
	border: 1px solid #ebedf2;
	border-radius: 10px;
	padding: 40px;
	transition: all 0.4s ease;
	overflow: hidden;
}
.bvs-service-card .inner-box:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 0;
	background: var(--theme-color2, #ffaa17);
	transition: all 0.4s ease;
	z-index: 0;
}
.bvs-service-card:hover .inner-box {
	border-color: var(--theme-color2, #ffaa17);
	box-shadow: 0 30px 50px rgba(34, 36, 41, 0.1);
	transform: translateY(-5px);
}
.bvs-service-card.flagship .inner-box {
	border-color: var(--theme-color2, #ffaa17);
}
.bvs-service-card .inner-box > * {
	position: relative;
	z-index: 1;
}
.bvs-service-card .flagship-tag {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: rgba(255, 170, 23, 0.15);
	color: var(--theme-color2, #ffaa17);
	font-family: var(--title-font, "Space Grotesk", sans-serif);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	padding: 5px 12px;
	border-radius: 20px;
}
.bvs-service-card .icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 10px;
	background: var(--theme-color1, #222429);
	color: var(--theme-color2, #ffaa17);
	margin-bottom: 28px;
	transition: all 0.4s ease;
}
.bvs-service-card .icon-box i {
	font-size: 34px;
	line-height: 1;
}
/* No icon hover swap — keep the icon box static on hover */
.bvs-service-card:hover .icon-box {
	background: var(--theme-color1, #222429);
	color: var(--theme-color2, #ffaa17);
}
.bvs-service-card .title {
	font-size: 22px;
	line-height: 1.3;
	margin-bottom: 14px;
}
.bvs-service-card .title a {
	color: var(--theme-color1, #222429);
	transition: color 0.3s ease;
}
.bvs-service-card .text {
	color: var(--text-color, #808287);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 22px;
	transition: color 0.3s ease;
}
.bvs-service-card .read-more {
	font-family: var(--title-font, "Space Grotesk", sans-serif);
	font-weight: 600;
	font-size: 14px;
	color: var(--theme-color2, #ffaa17);
	transition: color 0.3s ease;
}
.bvs-service-card .read-more i {
	margin-left: 6px;
	transition: transform 0.3s ease;
}
.bvs-service-card .read-more:hover i {
	transform: translateX(4px);
}
.bvs-service-card:hover .title a,
.bvs-service-card:hover .text,
.bvs-service-card:hover .read-more {
	color: var(--theme-color1, #222429);
}

/* ---- count-text suffix (StatBlock) ---- */
.counter-block-two .count-suffix {
	color: var(--theme-color2, #ffaa17);
	font-weight: 600;
}

/* ---- Tag / chip list (verticals, stack, post tags) ---- */
.bvs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bvs-tags li {
	display: inline-block;
	background: var(--theme-color3, #f4f5f8);
	color: var(--theme-color1, #222429);
	font-family: var(--title-font, "Space Grotesk", sans-serif);
	font-size: 14px;
	font-weight: 500;
	padding: 5px 14px;
	border-radius: 4px;
}

/* ---- Generic eyebrow + section helpers reused on inner pages ---- */
.bvs-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	color: var(--text-color, #808287);
	font-size: 14px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.bvs-meta-row li i {
	color: var(--theme-color2, #ffaa17);
	margin-right: 6px;
}

/* ---- Fit / Not-fit lists (service details) ---- */
.bvs-fitlist {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bvs-fitlist li {
	position: relative;
	padding-left: 32px;
	margin-bottom: 14px;
	color: var(--text-color, #808287);
	line-height: 1.6;
}
.bvs-fitlist li i {
	position: absolute;
	left: 0;
	top: 3px;
	font-size: 18px;
}
.bvs-fitlist.fit li i { color: var(--theme-color2, #ffaa17); }
.bvs-fitlist.notfit li i { color: #eb3b5a; }

/* ---- Service details info sidebar ---- */
.bvs-facts {
	background: var(--theme-color1, #222429);
	border-radius: 10px;
	padding: 35px 30px;
	color: #ffffff;
}
.bvs-facts h4 {
	color: #ffffff;
	font-size: 20px;
	margin-bottom: 22px;
}
.bvs-facts ul { list-style: none; margin: 0; padding: 0; }
.bvs-facts li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 14px;
}
.bvs-facts li:last-child { border-bottom: none; }
.bvs-facts li .label { color: rgba(255, 255, 255, 0.6); }
.bvs-facts li .value {
	color: #ffffff;
	font-family: var(--title-font, "Space Grotesk", sans-serif);
	font-weight: 500;
	text-align: right;
}

/* ---- Deliverables / check list ---- */
.bvs-checklist { list-style: none; margin: 0; padding: 0; }
.bvs-checklist li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 16px;
	color: var(--text-color, #808287);
	line-height: 1.6;
}
.bvs-checklist li:before {
	content: "\f058";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 2px;
	color: var(--theme-color2, #ffaa17);
	font-size: 18px;
}

/* ---- Form status helpers (contact form script toggles these) ---- */
.hidden { display: none !important; }
[data-form-status] { margin-bottom: 16px; font-size: 14px; }
[data-form-status].text-brand-primary { color: var(--theme-color1, #222429); }
[data-form-status].text-red-600 { color: #eb3b5a; }

/* ---- Empty-state ---- */
.bvs-empty {
	text-align: center;
	padding: 60px 20px;
	color: var(--text-color, #808287);
	font-size: 18px;
}

/* ---- Banner overlay so white hero text stays legible on demo imagery ---- */
.banner-section .slide-item .bg-image:after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(34, 36, 41, 0.82) 0%, rgba(34, 36, 41, 0.55) 60%, rgba(34, 36, 41, 0.3) 100%);
}

/* ---- Project / case-study card outcome text clamp ---- */
.news-block .bvs-client {
	display: block;
	color: var(--theme-color2, #ffaa17);
	font-family: var(--title-font, "Space Grotesk", sans-serif);
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 6px;
}

/* ---- Brand logo lockup (mark + wordmark + "Make the AI worth it" tagline) ----
   The lockup is taller than a bare wordmark, so give the header logos a touch
   more height to keep the wordmark + tagline legible. */
@media (min-width: 992px) {
	.main-header .logo img {
		width: 184px;
		height: auto;
	}
}
.sticky-header .logo img,
.mobile-menu .nav-logo img {
	max-height: 48px;
}

/* Keep the brand logo visible top-left in the header on phones/tablets (the static
   top bar and the sticky-on-scroll bar both), with the hamburger staying on the right. */
@media (max-width: 991px) {
	.main-header .header-lower .logo-box,
	.main-header .header-lower .logo-box .logo,
	.main-header .header-lower .logo-box .logo a,
	.sticky-header .logo {
		display: block;
	}
	.main-header .header-lower .logo-box .logo img,
	.sticky-header .logo img {
		display: block;
		height: 38px;
		width: auto;
		max-height: 38px;
	}
	.main-header .header-lower .logo-box {
		margin-right: auto;
	}
}

/* ---- Minimal footer: tighter spacing, full-width slim bottom bar ---- */
.main-footer .widgets-section {
	padding: 54px 0 22px;
}
.main-footer .footer-column {
	margin-bottom: 22px;
}
.main-footer .widget-title {
	padding-bottom: 12px;
	margin-bottom: 18px;
}
.main-footer .about-widget .logo {
	margin-bottom: 16px;
}
.main-footer .about-widget .text {
	margin-bottom: 0;
}
/* Full-width slim copyright bar */
.footer-bottom {
	background-color: #2c2e33;
}
.footer-bottom .inner-container {
	background-color: transparent;
	padding: 14px 15px;
}
/* Footer logo: size it to sit on the same row as the column titles */
.main-footer .about-widget .logo {
	margin-bottom: 18px;
}
.main-footer .about-widget .logo img {
	width: 200px;
	height: auto;
}

/* ---- Compact page-title (inner page header) — was 100/110px padding + 250px min ---- */
.page-title {
	padding: 48px 0 44px;
	min-height: auto;
}
.page-title .title {
	font-size: 48px;
	margin-bottom: 10px;
}

/* ---- Space between page-title and the following content ----
   Listing sections use `pt-0` + an inline padding-top:80px, but Bootstrap's
   .pt-0 (!important) was overriding the inline value and collapsing the gap.
   Restore a consistent gap on the post-title section across inner pages
   (listing pages, About, Contact). */
.page-title + section.pt-0 {
	padding-top: 72px !important;
}
/* Contact's form section spaces itself via OiTech's `section > .container`
   rule (--container-pt, default 120px, used for BOTH top and bottom). Dial it
   down so the gap to the title above and the Calendly section below is tighter
   and consistent with the rest of the site. */
.contact-details {
	--container-pt: 64px;
}

/* ---- About intro: Patterns-style centered header + clean photo pair ---- */
.bvs-about-photo {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}
.bvs-about-photo img {
	width: 100%;
	height: 340px;
	object-fit: cover;
	display: block;
}
@media (max-width: 991px) {
	.bvs-about-photo { margin-bottom: 24px; }
	.bvs-about-photo img { height: 280px; }
}

/* ---- Equal-height case-study / news cards ----
   Columns stretch (Bootstrap flex row), so make the card fill its column and
   give every image a uniform height; the title area flexes so the "Read"
   footer always sits at the bottom — all cards end up the same size. */
.news-section .news-block {
	display: flex;
}
.news-section .news-block .inner-box {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.news-section .news-block .content-box {
	flex: 1 1 auto;
}
.news-section .news-block .image-box .image img {
	height: 220px;
	object-fit: cover;
}

/* ---- Equal vertical + horizontal gaps in the service/pattern card grid ----
   Horizontal gap is Bootstrap's gutter-x (1.5rem). The card's margin-bottom
   was defeated by height:100% (it overflowed the column), so drop it and use a
   matching gutter-y, giving identical spacing in both directions. */
.services-section .row {
	--bs-gutter-y: 1.5rem;
}
.services-section .bvs-service-card {
	margin-bottom: 0;
}

/* ---- Detail pages (case-study, insight, legal) use `section > .container`,
   which adds 120px top/bottom via --container-pt. Tighten it to match the
   rest of the site. */
.blog-details {
	--container-pt: 16px;
}

/* ---- Single brand typeface: use Space Grotesk for body text too ----
   The theme used DM Sans for body (--text-font) and Space Grotesk for titles.
   Point everything at Space Grotesk so the whole site uses one font.
   Also unify the body reading size to 18px (theme default was 16px) so body
   text matches across marketing pages and articles. */
:root {
	--text-font: "Space Grotesk", sans-serif;
	--body-font-size: 18px;
}

/* Card descriptions to the unified body size */
.bvs-service-card .text { font-size: 18px; }

/* ---- Blog/case-study detail: simple, consistent typographic scale ----
   Match the in-content section titles to the prose h2 (24px) instead of 30px,
   and give the intro lead the body size (set apart by weight, not a new size). */
.blog-details__title {
	font-size: 24px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--theme-color1, #222429);
	margin-top: 0;
	margin-bottom: 0.8em;
}
.blog-details__text-2 {
	font-size: 24px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--theme-color1, #222429);
	margin-bottom: 0.8em;
}

/* ---- Case-study metric captions: use the 14px small size (was 12px) ---- */
.counter-block-two .counter-title {
	font-size: 14px;
	line-height: 1.4;
	margin-top: 8px;
}

/* ---- Normalize remaining off-scale content text to the brand scale ----
   (vendor theme rules pinned these below the unified 18px body size) */
.accordion-box .block .acc-content .content .text { font-size: 18px; }   /* FAQ answers (home) */
.offer-section-two .content-column .info-box .text { font-size: 18px; }  /* "How we work" (about) */
.feature-block-two .title { font-size: 20px; }                           /* service-name links (home) */

/* ---- Case-study heading hierarchy ----
   Template section titles (The problem / Our approach / Outcome) are the main
   sections at 24px. Markdown sub-headings inside them (e.g. "What we built",
   "Caveats") rank below — 20px — so importance reads clearly. */
.bvs-case-study .bvs-prose h2 { font-size: 20px; }
.bvs-case-study .bvs-prose h3 { font-size: 18px; }

/* ---- Case-study metrics row: keep within the content column ----
   The Bootstrap .row negative gutter margins aren't absorbed here (no padded
   container around it), so the metrics bar overflowed ~12px left/right of the
   body text. Zero the row margins so it aligns with the content. */
.bvs-case-study .fun-fact-section-two .row {
	margin-left: 0;
	margin-right: 0;
}

/* ---- Case-study metrics band: contain the full-bleed background ----
   The theme's .fact-counter:before uses width:1000% (full-bleed, for a
   full-width homepage section). Inside the article column it bled across the
   whole viewport. Constrain the grey band + orange accent to the column. */
.bvs-case-study .fun-fact-section-two .fact-counter:before {
	left: 0;
	right: auto;
	width: 100%;
	border-radius: 10px;
}
.bvs-case-study .fun-fact-section-two:before {
	border-radius: 10px 10px 0 0;
}

/* ---- About: team section ---- */
.bvs-team {
	padding: 10px 0 90px;
}
/* No social links on these cards, so don't expand the info card on hover */
.bvs-team .team-block .inner-box:hover .info-box {
	padding-bottom: 28px;
}

/* About: consistent post-title gap for the reformatted intro section */
.page-title + section.about-section-six { padding-top: 72px !important; }

/* ---- Home "Recently shipped work" carousel: uniform card/image size ---- */
.project-block-two .image-box .image img {
	height: 240px;
	object-fit: cover;
	display: block;
}

/* ---- Home "Recently shipped work": tighter top padding so content fills ---- */
.project-section-two {
	padding-top: 56px;
	padding-bottom: 70px;
}

/* ---- Tech-stack logo bar: section padding + uniform logo size ---- */
.clients-section {
	padding: 56px 0;
}
.clients-section .clients-carousel {
	padding: 24px 0 0;
}
.clients-section .clients-carousel .slide-item img {
	height: 46px;
	width: auto;
	margin: 0 auto;
	object-fit: contain;
	opacity: 1;
}

/* ---- Map in full color (theme grayscales it by default) ---- */
.map-section .map {
	-webkit-filter: none;
	filter: none;
}

/* ---- Home "What we do": halve the default 120px section padding ---- */
.features-section-two:not(.pt-0) {
	padding: 60px 0;
}

/* ---- Stats band: remove amber block, make grey band full width ---- */
.fun-fact-section-two { overflow: hidden; }
.fun-fact-section-two:before { display: none; }            /* the amber square on the right */
.fun-fact-section-two .fact-counter:before {               /* center the full-bleed grey band */
	left: -450%;
	right: auto;
}

/* ===== Uniform section rhythm: 60px top & bottom (reference: "What we do") ===== */
.features-section-two,
.about-section-three,
.about-section-six,
.industries-section,
.project-section-two,
.services-section,
.news-section,
.clients-section,
.faq-section,
.team-section-two,
.contact-calendly {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}
/* Sections whose vertical padding comes from `section > .container` */
.contact-details,
.services-details,
.blog-details {
	--container-pt: 60px;
}
/* Full-width stats band */
.fun-fact-section-two .fact-counter {
	padding: 60px 0 !important;
}
/* First section after the page-title banner — same 60px gap */
.page-title + section.pt-0,
.page-title + section.about-section-six {
	padding-top: 60px !important;
}

/* ---- Whole service card clickable (stretched link over the title's anchor) ----
   The title h4 is position:relative (from `.inner-box > *`), which would bound
   the overlay to the title; make it static so the overlay's containing block is
   the inner-box and covers the whole card. */
.bvs-service-card .inner-box { cursor: pointer; }
.bvs-service-card .title { position: static; }
.bvs-service-card .title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}