/**
 * Inflix Engineering — layout and components.
 *
 * Structure follows the industrial-B2B pattern set out in the build plan:
 * a two-tier header, a tabbed hero, label+headline card grids, a stats band,
 * a capability grid and a mega footer. Tokens come from style.css.
 */

/* ==========================================================================
   1. Layout primitives
   ========================================================================== */

.inflix-wrap {
	width: 100%;
	max-width: var(--inflix-container);
	margin-inline: auto;
	padding-inline: 24px;
}

.inflix-section { padding-block: clamp(48px, 6vw, 96px); }
.inflix-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.inflix-section--navy { background: var(--inflix-navy-deep); color: #fff; }
.inflix-section--light { background: var(--inflix-bg-light); }

.inflix-section--navy h1,
.inflix-section--navy h2,
.inflix-section--navy h3 { color: #fff; }

/* The parent theme wraps content in a max-width column; these let a section
   break out to full width when it needs a full-bleed background. */
.inflix-fullbleed {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.inflix-grid { display: grid; gap: 24px; }
.inflix-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inflix-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.inflix-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
	.inflix-grid--3, .inflix-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.inflix-grid--2, .inflix-grid--3, .inflix-grid--4 { grid-template-columns: 1fr; }
}

.inflix-section__head { max-width: 760px; margin-bottom: clamp(28px, 3vw, 48px); }
.inflix-section__head p { font-size: 1.0625rem; }

/* ==========================================================================
   2. Buttons
   ========================================================================== */

.inflix-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 28px;
	font-family: var(--inflix-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--inflix-radius);
	border: 2px solid transparent;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
	text-decoration: none;
	cursor: pointer;
}

.inflix-btn--primary { background: var(--inflix-red); color: #fff; }
.inflix-btn--primary:hover, .inflix-btn--primary:focus { background: var(--inflix-red-dark); color: #fff; }

.inflix-btn--navy { background: var(--inflix-navy); color: #fff; }
.inflix-btn--navy:hover, .inflix-btn--navy:focus { background: var(--inflix-navy-dark); color: #fff; }

.inflix-btn--ghost { border-color: currentColor; color: #fff; background: transparent; }
.inflix-btn--ghost:hover, .inflix-btn--ghost:focus { background: #fff; color: var(--inflix-navy); }

.inflix-btn--outline { border-color: var(--inflix-navy); color: var(--inflix-navy); }
.inflix-btn--outline:hover, .inflix-btn--outline:focus { background: var(--inflix-navy); color: #fff; }

.inflix-link-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--inflix-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--inflix-red);
	text-decoration: none;
}
.inflix-link-more:hover { gap: 14px; }
.inflix-link-more .inflix-icon { width: 16px; height: 16px; transition: transform .18s ease; }

/* ==========================================================================
   3. Header — utility bar over main navigation
   ========================================================================== */

.inflix-header { position: relative; z-index: 200; }

.inflix-utility {
	background: var(--inflix-navy-deep);
	color: #cfd3e4;
	font-size: 0.8125rem;
}
.inflix-utility .inflix-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 24px;
	min-height: 42px;
}
.inflix-utility a { color: #cfd3e4; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.inflix-utility a:hover { color: #fff; }
.inflix-utility__contact { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }

.inflix-badge {
	display: inline-block;
	padding: 3px 9px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 2px;
	font-family: var(--inflix-font-heading);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

.inflix-navbar { background: #fff; border-bottom: 1px solid var(--inflix-border); }
.inflix-navbar .inflix-wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 84px;
}

.inflix-logo { display: flex; align-items: center; flex-shrink: 0; }
.inflix-logo img { height: 52px; width: auto; display: block; }

.inflix-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.inflix-nav li { position: relative; }
.inflix-nav a {
	font-family: var(--inflix-font-heading);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--inflix-navy);
	text-decoration: none;
	padding: 30px 0;
	display: inline-block;
	border-bottom: 3px solid transparent;
}
.inflix-nav a:hover,
.inflix-nav .current-menu-item > a,
.inflix-nav .current_page_item > a { color: var(--inflix-red); border-bottom-color: var(--inflix-red); }

/* Dropdown */
.inflix-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	min-width: 264px;
	background: #fff;
	border: 1px solid var(--inflix-border);
	box-shadow: 0 18px 44px rgba(20,25,54,.14);
	padding: 10px 0;
	display: block;
	flex-direction: column;
	gap: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	z-index: 60;
}
.inflix-nav li:hover > .sub-menu,
.inflix-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.inflix-nav .sub-menu a {
	display: block;
	padding: 11px 22px;
	font-weight: 500;
	border-bottom: 0;
	font-size: 0.875rem;
}
.inflix-nav .sub-menu a:hover { background: var(--inflix-bg-light); color: var(--inflix-red); }

.inflix-header__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }

.inflix-burger {
	display: none;
	background: none;
	border: 0;
	padding: 10px;
	cursor: pointer;
	color: var(--inflix-navy);
}
.inflix-burger span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; }

@media (max-width: 1100px) {
	.inflix-burger { display: block; }
	.inflix-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-bottom: 1px solid var(--inflix-border);
		box-shadow: 0 20px 40px rgba(20,25,54,.12);
		display: none;
	}
	.inflix-nav.is-open { display: block; }
	.inflix-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px 24px 20px; }
	.inflix-nav a { padding: 13px 0; border-bottom: 1px solid var(--inflix-border); display: block; }
	.inflix-nav .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding: 0 0 0 16px; min-width: 0;
	}
	.inflix-header__actions .inflix-btn { display: none; }
}
@media (max-width: 780px) {
	.inflix-utility .inflix-wrap { justify-content: center; }
}

/* ==========================================================================
   4. Sticky contact rail
   ========================================================================== */

.inflix-rail {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 180;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.inflix-rail a {
	display: flex;
	align-items: center;
	gap: 9px;
	background: var(--inflix-navy);
	color: #fff;
	padding: 12px 14px;
	font-size: 0.75rem;
	font-family: var(--inflix-font-heading);
	font-weight: 600;
	text-decoration: none;
	max-width: 46px;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .25s ease, background-color .2s ease;
}
.inflix-rail a:hover, .inflix-rail a:focus { max-width: 230px; background: var(--inflix-red); }
.inflix-rail .inflix-icon { flex-shrink: 0; }

@media (max-width: 780px) { .inflix-rail { display: none; } }

/* ==========================================================================
   5. Hero with tab strip
   ========================================================================== */

.inflix-hero { position: relative; background: var(--inflix-navy-deep); color: #fff; overflow: hidden; }

.inflix-hero__slide {
	position: relative;
	min-height: clamp(520px, 68vh, 720px);
	display: none;
	align-items: center;
}
.inflix-hero__slide.is-active { display: flex; }

.inflix-hero__media { position: absolute; inset: 0; }
.inflix-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.inflix-hero__media::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Same left-edge fade as the interior heroes: dark only behind the copy,
	   clear across the rest of the photograph. */
	background: linear-gradient(90deg,
		rgba(20,25,54,.8) 0%,
		rgba(20,25,54,.52) 32%,
		rgba(20,25,54,0) 64%);
}
.inflix-hero__content { text-shadow: 0 1px 18px rgba(12,16,38,.6); }

.inflix-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: 72px; }
.inflix-hero__content { max-width: 640px; }
.inflix-hero__eyebrow {
	font-family: var(--inflix-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--inflix-red);
	padding: 6px 12px;
	display: inline-block;
	margin-bottom: 20px;
}
.inflix-hero h1, .inflix-hero__title {
	color: #fff;
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
	line-height: 1.06;
	margin: 0 0 18px;
}
.inflix-hero p { color: rgba(255,255,255,.86); font-size: 1.0625rem; max-width: 54ch; margin-bottom: 30px; }

.inflix-hero__tabs {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: rgba(20,25,54,.86);
	border-top: 1px solid rgba(255,255,255,.14);
}
.inflix-hero__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-right: 1px solid rgba(255,255,255,.14);
	color: rgba(255,255,255,.74);
	font-family: var(--inflix-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: left;
	padding: 22px 24px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.inflix-hero__tab:last-child { border-right: 0; }
.inflix-hero__tab:hover { color: #fff; background: rgba(255,255,255,.06); }
.inflix-hero__tab.is-active { background: var(--inflix-red); color: #fff; }

@media (max-width: 900px) {
	.inflix-hero__tabs { grid-template-columns: repeat(2, 1fr); }
	.inflix-hero__tab { border-bottom: 1px solid rgba(255,255,255,.14); }
	.inflix-hero__media::after { background: linear-gradient(180deg, rgba(20,25,54,.86), rgba(20,25,54,.94)); }
}
@media (max-width: 520px) {
	.inflix-hero__tabs { grid-template-columns: 1fr; }
}

/* ==========================================================================
   6. Cards
   ========================================================================== */

.inflix-card {
	background: #fff;
	border: 1px solid var(--inflix-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}
.inflix-card:hover { box-shadow: 0 22px 48px rgba(20,25,54,.13); transform: translateY(-3px); }
.inflix-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--inflix-bg-light); }
.inflix-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.inflix-card:hover .inflix-card__media img { transform: scale(1.04); }
.inflix-card__body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.inflix-card__label {
	font-family: var(--inflix-font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--inflix-red);
}
.inflix-card__title { font-size: 1.25rem; margin: 0; }
.inflix-card__title a { text-decoration: none; color: var(--inflix-navy); }
.inflix-card__title a:hover { color: var(--inflix-red); }
.inflix-card__body p { margin: 0; font-size: 0.9375rem; }
.inflix-card__body .inflix-link-more { margin-top: auto; padding-top: 12px; }

/* Service card with a numbered index, no image. */
.inflix-service {
	position: relative;
	background: #fff;
	border: 1px solid var(--inflix-border);
	padding: 34px 30px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.inflix-service:hover { border-color: var(--inflix-red); box-shadow: 0 20px 44px rgba(20,25,54,.12); transform: translateY(-3px); }
.inflix-service__num {
	font-family: var(--inflix-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--inflix-red);
}
.inflix-service h3 { font-size: 1.1875rem; margin: 0; }
.inflix-service h3 a { text-decoration: none; color: var(--inflix-navy); }
.inflix-service h3 a:hover { color: var(--inflix-red); }
.inflix-service p { margin: 0; font-size: 0.9375rem; }
.inflix-service ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.inflix-service li { position: relative; padding-left: 22px; font-size: 0.875rem; }
.inflix-service li::before {
	content: '';
	position: absolute;
	left: 0; top: 8px;
	width: 8px; height: 8px;
	background: var(--inflix-red);
}

/* ==========================================================================
   7. Stats band
   ========================================================================== */

.inflix-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.16); }
.inflix-stat { background: var(--inflix-navy-deep); padding: 34px 26px; text-align: center; }
.inflix-stat__num {
	font-family: var(--inflix-font-heading);
	font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
	font-weight: 800;
	color: #fff;
	line-height: 1;
	display: block;
}
.inflix-stat__num span { color: var(--inflix-red); }
.inflix-stat__label {
	display: block;
	margin-top: 10px;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,.72);
	font-family: var(--inflix-font-heading);
	font-weight: 600;
}
@media (max-width: 900px) { .inflix-stats { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   8. Split feature (image + text)
   ========================================================================== */

.inflix-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.inflix-split--reverse .inflix-split__media { order: 2; }
.inflix-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.inflix-split__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.inflix-split__media::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 96px; height: 8px;
	background: var(--inflix-red);
}
@media (max-width: 900px) {
	.inflix-split { grid-template-columns: 1fr; }
	.inflix-split--reverse .inflix-split__media { order: 0; }
}

/* ==========================================================================
   9. Capability / value grid
   ========================================================================== */

.inflix-value { display: flex; gap: 16px; align-items: flex-start; }
.inflix-value__icon {
	flex-shrink: 0;
	width: 46px; height: 46px;
	display: grid; place-items: center;
	background: rgba(224,32,37,.1);
	color: var(--inflix-red);
	border-radius: 2px;
}
.inflix-section--navy .inflix-value__icon { background: rgba(255,255,255,.1); color: #fff; }
.inflix-value h3 { font-size: 1.0625rem; margin: 0 0 6px; }
.inflix-value p { margin: 0; font-size: 0.9375rem; }
.inflix-section--navy .inflix-value p { color: rgba(255,255,255,.76); }

/* ==========================================================================
   10. Credential / certificate grid
   ========================================================================== */

.inflix-cert {
	background: #fff;
	border: 1px solid var(--inflix-border);
	padding: 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.inflix-cert__thumb { background: var(--inflix-bg-light); aspect-ratio: 3 / 4; overflow: hidden; }
.inflix-cert__thumb img { width: 100%; height: 100%; object-fit: contain; }
.inflix-cert h2,
.inflix-cert h3 {
	font-size: 1rem;
	line-height: 1.3;
	margin: 0;
	letter-spacing: 0;
}
.inflix-cert__num {
	font-family: var(--inflix-font-heading);
	font-size: 0.8125rem;
	color: var(--inflix-red);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.inflix-credstrip { display: flex; flex-wrap: wrap; gap: 12px; }
.inflix-credstrip__item {
	border: 1px solid var(--inflix-border);
	background: #fff;
	padding: 12px 18px;
	font-size: 0.8125rem;
}
.inflix-credstrip__item strong { display: block; font-family: var(--inflix-font-heading); color: var(--inflix-navy); }

/* ==========================================================================
   11. Project fact sheet
   ========================================================================== */

.inflix-facts { border-top: 1px solid var(--inflix-border); }
.inflix-facts__row { display: grid; grid-template-columns: 190px 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--inflix-border); }
.inflix-facts__key {
	font-family: var(--inflix-font-heading);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--inflix-text-light);
}
.inflix-facts__val { color: var(--inflix-navy); font-weight: 500; }
@media (max-width: 640px) { .inflix-facts__row { grid-template-columns: 1fr; gap: 4px; } }

.inflix-status {
	display: inline-block;
	padding: 4px 11px;
	font-family: var(--inflix-font-heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	border-radius: 2px;
}
.inflix-status--completed { background: #E6F4EA; color: #1B7A3D; }
.inflix-status--ongoing { background: #FDECEC; color: var(--inflix-red-dark); }

/* ==========================================================================
   12. Page hero (interior pages)
   ========================================================================== */

.inflix-pagehero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(300px, 30vw, 420px);
	background: var(--inflix-navy-deep);
	color: #fff;
	padding-block: clamp(56px, 7vw, 104px);
	overflow: hidden;
}
.inflix-pagehero__media { position: absolute; inset: 0; }
.inflix-pagehero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
/* Was a flat opacity: .28 on the photo, which dimmed it almost to black.
   A directional scrim keeps the text legible and the picture visible. */
.inflix-pagehero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg,
		rgba(20,25,54,.74) 0%,
		rgba(20,25,54,.42) 26%,
		rgba(20,25,54,0) 56%);
}
.inflix-pagehero .inflix-wrap { position: relative; z-index: 2; flex: 1 1 100%; }
.inflix-pagehero h1,
.inflix-pagehero p,
.inflix-pagehero .inflix-breadcrumb {
	text-shadow: 0 1px 18px rgba(12,16,38,.6);
}
.inflix-pagehero h1 { color: #fff; margin: 0 0 12px; }
.inflix-pagehero p { color: rgba(255,255,255,.82); max-width: 62ch; margin: 0; }
.inflix-breadcrumb { font-size: 0.8125rem; color: rgba(255,255,255,.68); margin-bottom: 14px; }
.inflix-breadcrumb a { color: rgba(255,255,255,.88); text-decoration: none; }
.inflix-breadcrumb a:hover { color: #fff; text-decoration: underline; }

/* ==========================================================================
   13. Filter bar
   ========================================================================== */

.inflix-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.inflix-filters a {
	padding: 9px 18px;
	border: 1px solid var(--inflix-border);
	font-family: var(--inflix-font-heading);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--inflix-navy);
	text-decoration: none;
	background: #fff;
}
.inflix-filters a:hover { border-color: var(--inflix-red); color: var(--inflix-red); }
.inflix-filters a.is-active { background: var(--inflix-navy); border-color: var(--inflix-navy); color: #fff; }

/* ==========================================================================
   14. CTA band
   ========================================================================== */

.inflix-cta {
	background: var(--inflix-red);
	color: #fff;
	padding-block: clamp(40px, 5vw, 72px);
}
.inflix-cta .inflix-wrap { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.inflix-cta h2 { color: #fff; margin: 0 0 6px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.inflix-cta p { color: rgba(255,255,255,.9); margin: 0; }
.inflix-cta .inflix-btn { background: #fff; color: var(--inflix-red); }
.inflix-cta .inflix-btn:hover { background: var(--inflix-navy-deep); color: #fff; }

/* ==========================================================================
   15. Footer
   ========================================================================== */

.inflix-footer { background: var(--inflix-navy-deep); color: rgba(255,255,255,.72); }
.inflix-footer__main { padding-block: clamp(48px, 5vw, 76px); }
.inflix-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
@media (max-width: 1024px) { .inflix-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .inflix-footer__cols { grid-template-columns: 1fr; } }

.inflix-footer h3 {
	color: #fff;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 20px;
}
.inflix-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.inflix-footer a { color: rgba(255,255,255,.72); text-decoration: none; font-size: 0.9375rem; }
.inflix-footer a:hover { color: #fff; }
.inflix-footer__logo img { height: 56px; width: auto; margin-bottom: 20px; }
.inflix-footer__about p { font-size: 0.9375rem; margin: 0 0 20px; max-width: 42ch; }

.inflix-footer__contact li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.9375rem; }
.inflix-footer__contact .inflix-icon { flex-shrink: 0; margin-top: 3px; color: var(--inflix-red); }

.inflix-footer__regs {
	border-top: 1px solid rgba(255,255,255,.12);
	padding-block: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}
.inflix-footer__regs div { font-size: 0.75rem; letter-spacing: .03em; }
.inflix-footer__regs strong { color: #fff; font-family: var(--inflix-font-heading); font-weight: 600; }

.inflix-footer__bar {
	border-top: 1px solid rgba(255,255,255,.12);
	padding-block: 20px;
	font-size: 0.8125rem;
}
.inflix-footer__bar .inflix-wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   16. Forms (Contact Form 7)
   ========================================================================== */

.inflix-form { background: #fff; border: 1px solid var(--inflix-border); padding: clamp(24px, 3vw, 40px); }
.inflix-form .wpcf7-form-control-wrap { display: block; }
.inflix-form label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--inflix-navy); margin-bottom: 6px; font-family: var(--inflix-font-heading); }
.inflix-form input[type=text],
.inflix-form input[type=email],
.inflix-form input[type=tel],
.inflix-form select,
.inflix-form textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--inflix-border);
	border-radius: var(--inflix-radius);
	font-family: var(--inflix-font-body);
	font-size: 0.9375rem;
	background: #fff;
	color: var(--inflix-ink);
}
.inflix-form input:focus, .inflix-form select:focus, .inflix-form textarea:focus { border-color: var(--inflix-navy); }
.inflix-form .inflix-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.inflix-form p { margin: 0 0 18px; }
@media (max-width: 640px) { .inflix-form .inflix-form__row { grid-template-columns: 1fr; } }
.inflix-form input[type=submit] {
	background: var(--inflix-red);
	color: #fff;
	border: 0;
	padding: 15px 30px;
	font-family: var(--inflix-font-heading);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	border-radius: var(--inflix-radius);
	cursor: pointer;
}
.inflix-form input[type=submit]:hover { background: var(--inflix-red-dark); }

/* ==========================================================================
   17. Prose (long-form page content)
   ========================================================================== */

.inflix-prose { max-width: 78ch; }
.inflix-prose h2 { margin-top: 2.2em; }
.inflix-prose h3 { margin-top: 1.6em; }
.inflix-prose > *:first-child { margin-top: 0; }
.inflix-prose ul { padding-left: 0; list-style: none; }
.inflix-prose ul li { position: relative; padding-left: 24px; margin-bottom: 9px; }
.inflix-prose ul li::before {
	content: '';
	position: absolute;
	left: 0; top: 9px;
	width: 8px; height: 8px;
	background: var(--inflix-red);
}

/* Utility */
.inflix-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   18. Full-width override
   The parent caps .col-full at 1440px with gutters; Inflix templates manage
   their own width via .inflix-wrap so bands can run edge to edge.
   ========================================================================== */

body.inflix-fullwidth .col-full {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}
body.inflix-fullwidth #content.site-content { padding: 0; }
body.inflix-fullwidth #primary { margin: 0; }

/* ==========================================================================
   19. Parent theme overrides
   Extice styles a few things globally that fight the Inflix design:
     - #content carries 85px vertical margins, which opened a gap under the
       header and above the footer on the full-bleed templates.
     - Headings are text-transform: capitalize, which forced Title Case on
       sentence-case copy ("Roads And Drainage That Keep Tanzania Moving").
     - Buttons get a 35px pill radius, which the hero tabs inherited.
   ========================================================================== */

body.inflix-fullwidth #content.site-content,
body.inflix-fullwidth #content {
	margin-top: 0;
	margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.inflix-hero__title,
.inflix-card__title,
.inflix-hero__tab,
.inflix-service h3 {
	text-transform: none;
}

.inflix-hero__title { font-weight: 800; }

.inflix-hero__tab,
.inflix-hero__tab.is-active {
	border-radius: 0;
}

/* Keep the theme's pill radius away from Inflix controls. */
.inflix-btn,
.inflix-form input[type="submit"] {
	border-radius: var(--inflix-radius);
}

/* The eyebrow label is intentionally uppercase. */
.inflix-eyebrow,
.inflix-hero__eyebrow,
.inflix-card__label,
.inflix-btn,
.inflix-link-more,
.inflix-badge,
.inflix-status,
.inflix-facts__key,
.inflix-stat__label,
.inflix-footer h3 {
	text-transform: uppercase;
}

/* ==========================================================================
   20. Leadership monogram tiles
   The company profile carries no headshots, so leaders are introduced with a
   typographic monogram rather than a grey silhouette placeholder.
   ========================================================================== */

.inflix-person {
	background: #fff;
	border: 1px solid var(--inflix-border);
	padding: 30px 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.inflix-person__mono {
	width: 62px; height: 62px;
	display: grid; place-items: center;
	background: var(--inflix-navy);
	color: #fff;
	font-family: var(--inflix-font-heading);
	font-weight: 800;
	font-size: 1.25rem;
	letter-spacing: .04em;
	margin-bottom: 10px;
}
.inflix-person h2 { font-size: 1.125rem; margin: 0; }
.inflix-person__role {
	font-family: var(--inflix-font-heading);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--inflix-red);
}
.inflix-person p { margin: 6px 0 0; font-size: .9375rem; }

/* Map embed */
.inflix-map { border: 1px solid var(--inflix-border); line-height: 0; }
.inflix-map iframe { display: block; width: 100%; }

/* ==========================================================================
   21. Mobile header refinements
   At 375px the utility bar wrapped onto three lines and pushed the logo and
   hero ~290px down the page. On small screens it keeps the tap-to-call number
   only; the address and email are already in the footer and on Contact.
   ========================================================================== */

@media (max-width: 780px) {
	.inflix-utility { font-size: 0.75rem; }
	.inflix-utility .inflix-wrap { min-height: 38px; padding-inline: 16px; }
	.inflix-utility__contact { gap: 18px; justify-content: center; }
	.inflix-utility__place { display: none; }
}

@media (max-width: 560px) {
	/* Keep the phone number only — it is the highest-intent action on mobile. */
	.inflix-utility__contact a[href^="mailto"] { display: none; }
	.inflix-navbar .inflix-wrap { min-height: 68px; padding-inline: 16px; }
	.inflix-logo img { height: 42px; }
	.inflix-wrap { padding-inline: 16px; }
	.inflix-hero__slide { min-height: 0; }
	.inflix-hero__inner { padding-block: 52px; }
	.inflix-hero p { font-size: 1rem; }
}

@media (max-width: 560px) {
	/* Let more of the site photography show through on small screens. */
	.inflix-hero__media::after {
		background: linear-gradient(180deg, rgba(20,25,54,.72) 0%, rgba(20,25,54,.88) 100%);
	}
	/* Compact the tab strip so it does not dominate the first screen. */
	.inflix-hero__tab { padding: 15px 18px; text-align: center; font-size: 0.75rem; }
}

/* ==========================================================================
   22. Stat reveal
   Stats start slightly lowered and transparent, then rise as the band scrolls
   into view. The .is-shown class is added by inflix.js; without JavaScript the
   :not(.is-shown) rule never applies a hidden state, so figures stay visible.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.js .inflix-stat {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .5s ease, transform .5s ease;
	}
	.js .inflix-stat.is-shown {
		opacity: 1;
		transform: none;
	}
}

.inflix-stat__num { display: inline-block; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   23. Angled section edges (shared)
   Moved here from inflix-pages.css so the home page — which does not load the
   interior stylesheet — can use the same transitions. A shallow chevron cut on
   the bottom of one band, a matching peak on the top of the next, pulled up by
   a negative margin so the two interlock.
   ========================================================================== */

.inflix-clip-bottom {
	-webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 64% 100%, 0 calc(100% - 50px));
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 64% 100%, 0 calc(100% - 50px));
	padding-bottom: 90px;
}

.inflix-clip-top {
	-webkit-clip-path: polygon(44% 0, 100% 60px, 100% 100%, 0 100%, 0 65px);
	clip-path: polygon(44% 0, 100% 60px, 100% 100%, 0 100%, 0 65px);
	margin-top: -68px;
	padding-top: 140px;
	position: relative;
	z-index: 2;
}

/*
 * When the jump strip sits directly above, the -68px overlap would tuck the
 * peak behind the strip's opaque white background and the angle would be lost.
 * Sit flush instead so the rising edge stays visible.
 */
.inflix-jump + .inflix-clip-top {
	margin-top: 0;
	padding-top: 118px;
}

/* The stats band is a tight section; it needs less top padding than a full one. */
.inflix-section--tight.inflix-clip-top { padding-top: 108px; }

@media (max-width: 780px) {
	/* The diagonal reads as a rendering glitch at phone widths, so flatten it. */
	.inflix-clip-bottom {
		-webkit-clip-path: none;
		clip-path: none;
		padding-bottom: 0;
	}
	.inflix-clip-top,
	.inflix-section--tight.inflix-clip-top {
		-webkit-clip-path: none;
		clip-path: none;
		margin-top: 0;
		padding-top: clamp(40px, 8vw, 64px);
	}
}

/* ==========================================================================
   24. Scroll reveal
   Restrained: a short fade and a small rise, staggered across children. The
   hidden state only applies when JavaScript is present (.js) and the visitor
   has not asked for reduced motion, so content is never hidden from anyone
   who cannot trigger the reveal.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.js [data-reveal] {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .5s cubic-bezier(.22,.61,.36,1),
		            transform .5s cubic-bezier(.22,.61,.36,1);
		will-change: opacity, transform;
	}
	.js [data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
	/* Children stagger via an index set by the script. */
	.js [data-reveal-group] > * {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity .5s cubic-bezier(.22,.61,.36,1),
		            transform .5s cubic-bezier(.22,.61,.36,1);
	}
	.js [data-reveal-group].is-revealed > * {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   25. Home service cards
   Photography, an oversized index numeral straddling the image edge, and a
   lift on hover. Replaces the flat bordered boxes that made this the weakest
   block on the page.
   ========================================================================== */

.inflix-hservice {
	position: relative;
	background: #fff;
	border: 1px solid var(--inflix-border);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.inflix-hservice:hover {
	border-color: var(--inflix-red);
	box-shadow: 0 26px 54px rgba(20,25,54,.15);
	transform: translateY(-4px);
}

.inflix-hservice__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--inflix-bg-light);
}
.inflix-hservice__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.inflix-hservice:hover .inflix-hservice__media img { transform: scale(1.06); }
.inflix-hservice__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20,25,54,0) 45%, rgba(20,25,54,.55) 100%);
}

/*
 * Oversized ghost index, sitting inside the image.
 *
 * It previously used bottom: -20px to straddle the image edge, but the media
 * box needs overflow: hidden for the zoom, which clipped the numeral in half.
 * It now sits fully within the frame and reads as a faint watermark that
 * strengthens on hover.
 */
.inflix-hservice__num {
	position: absolute;
	left: 20px;
	bottom: 12px;
	z-index: 2;
	font-family: var(--inflix-font-heading);
	font-size: 3.75rem;
	font-weight: 800;
	line-height: .9;
	color: #fff;
	opacity: .5;
	letter-spacing: -0.03em;
	text-shadow: 0 2px 20px rgba(20,25,54,.55);
	transition: opacity .25s ease, transform .25s ease;
}
.inflix-hservice:hover .inflix-hservice__num {
	opacity: .85;
	transform: translateY(-2px);
}

.inflix-hservice__body {
	padding: 34px 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}
.inflix-hservice h3 { font-size: 1.1875rem; margin: 0; }
.inflix-hservice h3 a { text-decoration: none; color: var(--inflix-navy); }
.inflix-hservice h3 a::after { content: ""; position: absolute; inset: 0; }
.inflix-hservice:hover h3 a { color: var(--inflix-red); }
.inflix-hservice p { margin: 0; font-size: .9375rem; }
.inflix-hservice .inflix-link-more { margin-top: auto; padding-top: 12px; }

/* Ghost numeral behind a section heading, for typographic scale. */
.inflix-section__head { position: relative; }

/* ==========================================================================
   26. Editorial figure (D)
   The image sits offset over a red block, with a caption card overlapping its
   lower corner. Offsets collapse on narrow screens so nothing is clipped.
   ========================================================================== */

.inflix-figure { position: relative; padding: 0 0 34px 34px; }

/*
 * Red block behind, offset down and left so it reads along two edges. An
 * earlier version showed only a 26px strip, which looked like a stray rule
 * rather than a deliberate frame.
 */
.inflix-figure::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 58%;
	height: 72%;
	background: var(--inflix-red);
	z-index: 0;
}

.inflix-figure__media {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	box-shadow: 0 26px 60px rgba(20,25,54,.22);
}
.inflix-figure__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.inflix-figure:hover .inflix-figure__media img { transform: scale(1.04); }

/* Caption card overlapping the lower-right corner. */
.inflix-figure__card {
	position: absolute;
	right: 0;
	bottom: 34px; /* sits on the image edge, clear of the red block below */
	z-index: 2;
	background: #fff;
	border: 1px solid var(--inflix-border);
	border-left: 4px solid var(--inflix-red);
	padding: 20px 24px;
	max-width: 60%;
	box-shadow: 0 18px 44px rgba(20,25,54,.16);
}
.inflix-figure__card strong {
	display: block;
	font-family: var(--inflix-font-heading);
	font-size: .9375rem;
	color: var(--inflix-navy);
	margin-bottom: 4px;
}
.inflix-figure__card span { font-size: .8125rem; color: var(--inflix-text); line-height: 1.5; display: block; }

@media (max-width: 900px) {
	.inflix-figure { padding: 0; }
	.inflix-figure::before { display: none; }
	.inflix-figure__card {
		position: static;
		max-width: none;
		margin-top: -1px;
		box-shadow: none;
	}
}

/* ==========================================================================
   27. Credentials trust band (E)
   The registrations are the strongest tender asset on the page, so they get
   real badges rather than small grey chips.
   ========================================================================== */

.inflix-creds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .inflix-creds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .inflix-creds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .inflix-creds { grid-template-columns: 1fr; } }

.inflix-cred {
	position: relative;
	background: #fff;
	border: 1px solid var(--inflix-border);
	border-top: 3px solid var(--inflix-navy);
	padding: 24px 22px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.inflix-cred:hover {
	border-top-color: var(--inflix-red);
	box-shadow: 0 20px 44px rgba(20,25,54,.12);
	transform: translateY(-3px);
}
.inflix-cred--key { border-top-color: var(--inflix-red); background: linear-gradient(180deg, #fff 0%, #fff7f7 100%); }

.inflix-cred__icon {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	background: rgba(39,47,105,.07);
	color: var(--inflix-navy);
}
.inflix-cred--key .inflix-cred__icon { background: rgba(224,32,37,.1); color: var(--inflix-red); }

.inflix-cred__authority {
	font-family: var(--inflix-font-heading);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--inflix-text-light);
}
.inflix-cred__name {
	font-family: var(--inflix-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--inflix-navy);
	line-height: 1.25;
	margin: 0;
}
.inflix-cred__num {
	margin-top: auto;
	padding-top: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8125rem;
	color: var(--inflix-red);
	letter-spacing: .01em;
	word-break: break-all;
}

/* ==========================================================================
   28. Typographic scale (F)
   Larger section headings with a numbered rule, so the page reads as
   art-directed rather than uniformly sized.
   ========================================================================== */

.inflix-section__head--lg h2 {
	font-size: clamp(2rem, 1.35rem + 2.7vw, 3.25rem);
	line-height: 1.06;
	letter-spacing: -0.022em;
	max-width: 18ch;
}
.inflix-section__head--lg p { font-size: 1.0625rem; max-width: 58ch; }

/* Numbered rule above a heading: 01 ——— WHAT WE DO */
.inflix-index {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 16px;
}
.inflix-index__num {
	font-family: var(--inflix-font-heading);
	font-size: .8125rem;
	font-weight: 800;
	color: var(--inflix-red);
	letter-spacing: .04em;
}
.inflix-index__rule {
	height: 1px;
	width: 54px;
	background: var(--inflix-border);
	flex-shrink: 0;
}
.inflix-section--navy .inflix-index__rule { background: rgba(255,255,255,.28); }
.inflix-index__label {
	font-family: var(--inflix-font-heading);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--inflix-text-light);
}
.inflix-section--navy .inflix-index__label { color: rgba(255,255,255,.66); }