/* Playfair Display: italic words in headings + counter numbers (home page).
   An @import must stay the very first line of this file. */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,500&display=swap");

/* ==========================================================================
   FIDO PHARMA — NEW DESIGN (header, footer & homepage)
   Paste this whole block at the END of css/style.css (keep everything above it).
   Every rule is scoped to .fp / .fp-* so your other pages keep their old styles.
   ========================================================================== */

/* Fonts are loaded from Google Fonts in header.php:
   Plus Jakarta Sans (headings) + Inter (body text) */

:root {
	--navy: #0c2340;
	--navy-2: #133a63;
	--navy-3: #1c4b7d;
	--green: #5AA014;
	/* original brand green */
	--green-dark: #83bc4a;
	/* accessible on white */
	--green-soft: #d3e3c4;
	--ink: #1b2330;
	--muted: #5a6475;
	--line: #e2e7ee;
	--soft: #f4f6f9;
	--white: #ffffff;

	--font-head: "Plus Jakarta Sans", "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: "Inter", "Segoe UI", Roboto, Arial, sans-serif;

	--radius: 6px;
	--shadow-sm: 0 2px 8px rgba(12, 35, 64, .06);
	--shadow: 0 12px 32px rgba(12, 35, 64, .10);
	--container: 1200px;
}

/* Every heading on the whole website (old pages too) uses the heading font */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.stat-value,
.pillar-num,
.certs-title,
.brand-text,
.about-badge strong {
	font-family: var(--font-head) !important;
	letter-spacing: -.01em;
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body.fp-home {
	margin: 0;
	background: var(--white);
}

.fp {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

/* old pages wrap everything in .page-wrapper { overflow:hidden }, which stops the sticky header */
body .page-wrapper {
	overflow: clip;
}

[hidden] {
	display: none !important;
}

:where(.fp) img {
	max-width: 100%;
	height: auto;
	display: block;
}

:where(.fp) a {
	color: var(--green-dark);
	text-decoration: none;
	transition: color .2s ease;
}

:where(.fp) a:hover {
	color: var(--navy);
	text-decoration: none;
}

:where(.fp) :is(h1, h2, h3, h4) {
	letter-spacing: normal;
	font-family: var(--font-head);
	color: var(--navy);
	line-height: 1.2;
	margin: 0 0 .5em;
	font-weight: 700;
}

:where(.fp) p {
	margin: 0 0 1em;
	color: var(--muted);
	font-size: inherit;
	line-height: inherit;
}

:where(.fp) ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 3px solid var(--green);
	outline-offset: 2px;
}

.fp-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 20px;
}

.section {
	padding: 96px 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 10px;
	left: 10px;
	width: auto !important;
	height: auto !important;
	clip: auto !important;
	z-index: 2000;
	background: var(--navy);
	color: #fff;
	padding: 10px 16px;
	border-radius: 6px;
}

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

/* ---------- Section headings ---------- */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--green-dark);
	margin-bottom: 14px;
}

.eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--green);
}

.section-head {
	max-width: 720px;
	margin: 0 0 56px;
}

.section-head--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.section-head--center .eyebrow::after {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--green);
}

.section-head h2 {
	font-size: clamp(28px, 3.4vw, 40px);
}

.section-head p {
	font-size: 17px;
}

/* ---------- Buttons ---------- */
.fp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 26px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.fp-btn svg {
	width: 16px;
	height: 16px;
}

.fp-btn:hover {
	transform: translateY(-1px);
}

.fp-btn-primary {
	background: var(--green);
	color: var(--white);
	border-color: var(--green);
}

.fp-btn-primary:hover {
	background: var(--green-dark);
	border-color: var(--green-dark);
	color: var(--white);
}

.fp-btn-navy {
	background: var(--green);
	color: var(--white);
	border-color: var(--green);
}

.fp-btn-navy:hover {
	background: var(--navy-2);
	border-color: var(--navy-2);
	color: var(--white);
}

.fp-btn-ghost {
	background: transparent;
	color: var(--white);
	border-color: rgba(255, 255, 255, .7);
}

.fp-btn-ghost:hover {
	background: var(--white);
	color: var(--navy);
	border-color: var(--white);
}

.fp-btn-outline {
	background: transparent;
	color: var(--navy);
	border-color: var(--navy);
}

.fp-btn-outline:hover {
	background: var(--navy);
	color: var(--white);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.link-arrow svg {
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}

.link-arrow:hover svg {
	transform: translateX(4px);
}

/* ==========================================================================
   Header / navigation
   ========================================================================== */
/* holder keeps the page from jumping when the header becomes fixed on scroll */
.header-holder {
	position: relative;
	z-index: 1000;
	min-height: 84px;
}

/* default header — same as before (solid navy) */
.site-header {
	position: relative;
	z-index: 1000;
	background: var(--navy);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* After scrolling: same solid navy header, just fixed to the top */
.site-header.is-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 6px 20px rgba(8, 26, 48, .25);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 84px;
	transition: min-height .3s ease;
}

/* logo swap: default logo normally, second logo after scrolling */
.brand .logo-scroll {
	display: none;
}

.site-header.is-sticky .brand .logo-default {
	display: none;
}

.site-header.is-sticky .brand .logo-scroll {
	display: block;
}

.brand {
	display: inline-flex;
	align-items: center;
	flex: none;
}

.brand img {
	max-height: 48px;
	width: auto;
	transition: max-height .3s ease;
}

.brand-text {
	font-family: var(--font-head);
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: .02em;
}

.brand-text em {
	font-style: normal;
	color: #b7cc6e;
	font-weight: 600;
}

.main-nav {
	margin-left: auto;
}

.main-nav>ul {
	display: flex;
	align-items: center;
	gap: 0;
}

.main-nav li {
	position: relative;
}

.main-nav a,
.main-nav .nav-parent {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
}

.main-nav>ul>li>a::after,
.main-nav>ul>li>.nav-parent::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 2px;
	height: 2px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}

.main-nav>ul>li:hover>a::after,
.main-nav>ul>li:hover>.nav-parent::after,
.main-nav>ul>li.is-current>a::after {
	transform: scaleX(1);
}

.main-nav a:hover,
.main-nav li:hover>.nav-parent {
	color: var(--white);
}

.main-nav>ul>li.is-current>a {
	color: #c7d98f;
}

.main-nav .chev {
	width: 12px;
	height: 12px;
	transition: transform .2s ease;
}

.submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: var(--white);
	border-top: 3px solid var(--green);
	box-shadow: var(--shadow);
	border-radius: 0 0 var(--radius) var(--radius);
	padding: 8px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}

.has-sub:hover>.submenu,
.has-sub:focus-within>.submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.has-sub:hover .chev {
	transform: rotate(180deg);
}

.submenu a {
	padding: 9px 20px;
	font-size: 13px;
	color: var(--ink);
}

.submenu a:hover {
	background: var(--soft);
	color: var(--green-dark);
}

.header-cta {
	flex: none;
}

.nav-toggle {
	display: none;
	margin-left: auto;
	width: 46px;
	height: 46px;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, .3);
	background: transparent;
	color: var(--white);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.nav-toggle svg {
	width: 24px;
	height: 24px;
}

.nav-toggle .icon-close {
	display: none;
}

.nav-open .nav-toggle .icon-open {
	display: none;
}

.nav-open .nav-toggle .icon-close {
	display: block;
}

.nav-mobile-only {
	display: none;
}

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero {
	position: relative;
	background: var(--navy);
	overflow: hidden;
}

.hero-slides {
	position: relative;
	min-height: clamp(570px, 78vh, 700px);
}

.hero-slide {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	/* dark gradient only behind the text (left); right side image stays clear */
	background:
		linear-gradient(90deg, rgba(12, 35, 64, .75) 0%, rgba(12, 35, 64, .5) 35%, rgba(12, 35, 64, 0) 58%),
		var(--bg) center / cover no-repeat,
		radial-gradient(circle at 80% 30%, #1c4b7d 0%, #0c2340 60%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 1s;
}

.hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.hero-content {
	position: relative;
	z-index: 2;
	padding-top: 40px;
	padding-bottom: 120px;
}

.hero-content .inner {
	max-width: 640px;
	border-left: 3px solid var(--green);
	padding-left: 32px;
}

.hero .eyebrow {
	color: #c7d98f;
}

.hero .eyebrow::before {
	background: #c7d98f;
}

.hero-title {
	font-size: clamp(38px, 5.4vw, 64px);
	color: var(--white);
	letter-spacing: .01em;
	margin-bottom: 18px;
}

.hero-text {
	font-size: clamp(16px, 1.6vw, 19px);
	color: rgba(255, 255, 255, .86);
	max-width: 560px;
	margin-bottom: 32px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hero-slide.is-active .inner>* {
	animation: heroIn .9s ease both;
}

.hero-slide.is-active .inner>*:nth-child(2) {
	animation-delay: .1s;
}

.hero-slide.is-active .inner>*:nth-child(3) {
	animation-delay: .2s;
}

.hero-slide.is-active .inner>*:nth-child(4) {
	animation-delay: .3s;
}

@keyframes heroIn {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.hero-controls {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 96px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 18px;
}

.hero-dots {
	display: none;
	gap: 10px;
}

.hero-dot {
	width: 34px;
	height: 4px;
	border: 0;
	padding: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: background .2s ease, width .2s ease;
}

.hero-dot.is-active {
	background: var(--green);
	width: 54px;
}

.hero-arrows {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.hero-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: transparent;
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.hero-arrow:hover {
	background: var(--green);
	border-color: var(--green);
}

.hero-arrow svg {
	width: 18px;
	height: 18px;
}

/* ---------- Stats bar (overlaps hero) ---------- */
.stats {
	position: relative;
	z-index: 5;
	margin-top: -64px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--white);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border-bottom: 3px solid var(--green);
}

.stat {
	padding: 30px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.stat+.stat {
	border-left: 1px solid var(--line);
}

.stat-icon {
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.stat-icon svg {
	width: 26px;
	height: 26px;
}

.stat-value {
	font-family: var(--font-head);
	font-size: 30px;
	font-weight: 700;
	color: var(--navy);
	line-height: 1;
}

.stat-value--sm {
	font-size: 18px;
	line-height: 1.25;
}

.stat-label {
	font-size: 13.5px;
	color: var(--muted);
	margin-top: 4px;
	line-height: 1.35;
}

/* ==========================================================================
   About intro
   ========================================================================== */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: 72px;
	align-items: center;
}

.about-media {
	position: relative;
	padding: 0 28px 28px 0;
}

.about-media::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 78%;
	height: 82%;
	border: 2px solid var(--green);
	border-radius: var(--radius);
	z-index: 0;
}

.about-img {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3.4;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--img) center / cover no-repeat, linear-gradient(135deg, var(--navy-3), var(--navy));
	box-shadow: var(--shadow);
}

.about-badge {
	position: absolute;
	z-index: 2;
	left: -20px;
	bottom: 56px;
	background: var(--navy);
	color: var(--white);
	padding: 20px 24px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	max-width: 230px;
}

.about-badge strong {
	display: block;
	font-family: var(--font-head);
	font-size: 20px;
	color: #c7d98f;
	margin-bottom: 4px;
}

.about-badge span {
	font-size: 13.5px;
	color: rgba(255, 255, 255, .85);
	line-height: 1.45;
	display: block;
}

.about-copy h2 {
	font-size: clamp(28px, 3.4vw, 40px);
}

.lead {
	font-size: 18px;
	color: var(--ink);
	font-weight: 500;
	line-height: 1.6;
}

.check-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
	margin: 26px 0 34px;
}

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 500;
	color: var(--ink);
	font-size: 15px;
}

.check-list svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--green-dark);
	margin-top: 2px;
}

.about-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ==========================================================================
   Vision / Mission / Values
   ========================================================================== */
.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.pillar {
	position: relative;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 40px 34px 36px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	overflow: hidden;
}

.pillar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.pillar:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: transparent;
}

.pillar:hover::before {
	transform: scaleX(1);
}

.pillar-num {
	position: absolute;
	top: 22px;
	right: 28px;
	font-family: var(--font-head);
	font-size: 44px;
	font-weight: 700;
	color: var(--soft);
	line-height: 1;
}

.pillar-icon {
	width: 60px;
	height: 60px;
	border-radius: var(--radius);
	background: var(--navy);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}

.pillar-icon svg {
	width: 28px;
	height: 28px;
}

.pillar h3 {
	font-size: 24px;
	margin-bottom: 12px;
}

.pillar p {
	margin: 0;
}

/* ==========================================================================
   Products
   ========================================================================== */
.products-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 32px;
	margin-bottom: 48px;
}

.products-head .section-head {
	margin: 0;
}

.products-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.product-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--line);
	transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow);
}

.product-media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, var(--navy-3), var(--navy));
}

.product-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--img) center / cover no-repeat;
	transition: transform .6s ease;
}

.product-card:hover .product-media::before {
	transform: scale(1.06);
}

.product-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(12, 35, 64, .55));
}

.product-tag {
	position: absolute;
	z-index: 1;
	left: 18px;
	bottom: 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--white);
	background: rgba(141, 164, 68, .95);
	padding: 5px 10px;
	border-radius: 3px;
}

.product-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 26px 26px 28px;
}

.product-body h3 {
	font-size: 22px;
	margin-bottom: 10px;
}

.product-body h3 a {
	color: var(--navy);
}

.product-body h3 a:hover {
	color: var(--green-dark);
}

.product-body p {
	font-size: 15px;
	flex: 1;
}

.product-card--intro {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
	padding: 40px 34px;
	justify-content: center;
}

.product-card--intro:hover {
	transform: none;
}

.product-card--intro h3 {
	color: var(--white);
	font-size: 26px;
}

.product-card--intro p {
	color: rgba(255, 255, 255, .8);
	font-size: 15.5px;
}

.product-card--intro .eyebrow {
	color: #c7d98f;
}

.product-card--intro .eyebrow::before {
	background: #c7d98f;
}

/* ==========================================================================
   Industries
   ========================================================================== */
.industries {
	position: relative;
	color: var(--white);
	background:
		linear-gradient(rgba(12, 35, 64, .93), rgba(12, 35, 64, .93)),
		url("../images/bacteria-bg.jpg") center / cover fixed,
		var(--navy);
}

.industries .section-head h2 {
	color: var(--white);
}

.industries .section-head p {
	color: rgba(255, 255, 255, .78);
}

.industries .eyebrow {
	color: #c7d98f;
}

.industries .eyebrow::before,
.industries .eyebrow::after {
	background: #c7d98f;
}

.industry-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--radius);
	overflow: hidden;
}

.industry {
	padding: 40px 30px;
	text-align: center;
	transition: background .25s ease;
}

.industry+.industry {
	border-left: 1px solid rgba(255, 255, 255, .14);
}

.industry:hover {
	background: rgba(255, 255, 255, .05);
}

.industry-icon {
	width: 72px;
	height: 72px;
	margin: 0 auto 20px;
	border-radius: 50%;
	border: 1px solid rgba(199, 217, 143, .5);
	color: #c7d98f;
	display: flex;
	align-items: center;
	justify-content: center;
}

.industry-icon svg {
	width: 32px;
	height: 32px;
}

.industry h3 {
	color: var(--white);
	font-size: 20px;
	margin-bottom: 8px;
}

.industry p {
	color: rgba(255, 255, 255, .72);
	font-size: 14.5px;
	margin: 0;
}

/* ==========================================================================
   Why choose us
   ========================================================================== */
.why-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 72px;
	align-items: start;
}

.why-intro h2 {
	font-size: clamp(28px, 3.4vw, 40px);
}

.why-intro .fp-btn {
	margin-top: 12px;
}

.why-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

.why-item {
	padding: 28px;
	border-radius: var(--radius);
	background: var(--soft);
	border-left: 3px solid var(--green);
}

.why-item h3 {
	font-family: var(--font-body);
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.why-item h3 svg {
	width: 22px;
	height: 22px;
	color: var(--green-dark);
	flex: none;
}

.why-item p {
	font-size: 15px;
	margin: 0;
}

/* ==========================================================================
   Certifications
   ========================================================================== */
.certs {
	padding: 56px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	background: var(--white);
}

.certs-inner {
	display: flex;
	align-items: center;
	gap: 40px;
}

.certs-title {
	flex: none;
	font-family: var(--font-head);
	font-size: 22px;
	color: var(--navy);
	line-height: 1.3;
	padding-right: 40px;
	border-right: 1px solid var(--line);
}

.certs-title small {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--muted);
	font-weight: 400;
	margin-top: 4px;
}

.cert-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-around;
	gap: 24px 36px;
	flex: 1;
}

.cert {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin: 0;
}

.cert img {
	height: 72px;
	width: auto;
	filter: grayscale(1);
	opacity: .8;
	transition: filter .25s ease, opacity .25s ease;
}

.cert:hover img {
	filter: none;
	opacity: 1;
}

.cert figcaption {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

/* ==========================================================================
   CTA band
   ========================================================================== */
/* full background image; dark overlay on the left keeps the text readable */
.cta-band {
	position: relative;
	color: var(--white);
	padding: 60px 0;
	
}

.cta-inner {
	position: relative;
	z-index: 1;
}

.cta-copy {
	max-width: 640px;
	border-left: 3px solid var(--green);
	padding-left: 32px;
}

.cta-copy .eyebrow {
	color: #c7d98f;
}

.cta-copy .eyebrow::before {
	background: #c7d98f;
}

.cta-inner h2 {
	color: var(--white);
	font-size: clamp(28px, 3.4vw, 42px);
	margin-bottom: 14px;
}

.cta-inner p {
	color: rgba(255, 255, 255, .85);
	margin: 0;
	max-width: 560px;
}

.cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}
/* CTA band: lighter overlay on the left */
.cta-band {
    background:
        linear-gradient(90deg, rgba(12, 35, 64, .78) 0%, rgba(12, 35, 64, .55) 40%, rgba(12, 35, 64, .15) 75%, rgba(12, 35, 64, 0) 100%),
        var(--img) center / cover no-repeat,
        var(--navy);
}

/* mobile: text readable rahe isliye thoda halka hi rakha hai */
@media (max-width: 768px) {
    .cta-band {
        background:
            linear-gradient(90deg, rgba(12, 35, 64, .8) 0%, rgba(12, 35, 64, .6) 100%),
            var(--img) center / cover no-repeat,
            var(--navy);
    }
}
/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: #081a30;
	color: rgba(255, 255, 255, .72);
	font-size: 14.5px;
}

.footer-main {
	padding: 72px 0 48px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
	gap: 48px;
}

.footer-brand .brand-text {
	color: var(--white);
}

.footer-brand img {
	max-height: 64px;
	width: auto;
}

.footer-brand p {
	color: rgba(255, 255, 255, .68);
	font-size: 14.5px;
	margin: 16px 0 22px;
}

.site-footer h3 {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--white);
	margin-bottom: 22px;
	padding-bottom: 12px;
	position: relative;
}

.site-footer h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background: var(--green);
}

.footer-links li {
	margin-bottom: 10px;
}

.footer-links a {
	color: rgba(255, 255, 255, .72);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.footer-links a::before {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--green);
	border-top: 1.5px solid var(--green);
	transform: rotate(45deg);
}

.footer-links a:hover {
	color: var(--white);
}

.footer-contact li {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	line-height: 1.5;
}

.footer-contact svg {
	flex: none;
	width: 18px;
	height: 18px;
	color: var(--green);
	margin-top: 2px;
}

.footer-contact a {
	color: rgba(255, 255, 255, .82);
}

.footer-contact a:hover {
	color: var(--white);
}

.footer-contact strong {
	color: var(--white);
	font-weight: 600;
	display: block;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.social {
	display: flex;
	gap: 10px;
}

.social a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, .8);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.social a:hover {
	background: var(--green);
	border-color: var(--green);
	color: var(--white);
}

.social svg {
	width: 16px;
	height: 16px;
}

.footer-bottom {
	background: transparent;
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding: 20px 0;
	font-size: 13px;
}

.footer-bottom .fp-container {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.footer-bottom a {
	color: rgba(255, 255, 255, .8);
}

.footer-bottom a:hover {
	color: var(--white);
}

/* ---------- Floating actions ---------- */
/* WhatsApp sits bottom-LEFT, so they don't clash with the
   Tawk.to live-chat bubble that always sits bottom-right */
.float-actions {
	position: fixed;
	left: 18px;
	bottom: 22px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.float-btn {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
	transition: transform .2s ease;
}

.float-btn:hover {
	transform: scale(1.08);
	color: var(--white);
}

.float-btn svg {
	width: 26px;
	height: 26px;
}

.float-btn--wa {
	background: #25d366;
}

.float-btn--call {
	background: var(--navy);
}

/* back-to-top sits just above the WhatsApp button (same column) */
.to-top {
	position: fixed;
	left: 23px;
	bottom: 90px;
	z-index: 900;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--white);
	color: var(--navy);
	border: 1px solid var(--line);
	box-shadow: var(--shadow-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
}

.to-top svg {
	width: 18px;
	height: 18px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

.no-js .reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {

	.main-nav a,
	.main-nav .nav-parent {
		padding: 10px 8px;
		font-size: 12.5px;
		letter-spacing: .03em;
	}

	.main-nav>ul>li>a::after,
	.main-nav>ul>li>.nav-parent::after {
		left: 8px;
		right: 8px;
	}

	.header-inner {
		gap: 16px;
	}

	.header-cta {
		padding: 12px 18px;
	}
}

@media (max-width: 1024px) {
	.section {
		padding: 80px 0;
	}

	.topbar-note {
		display: none;
	}

	/* mobile nav */
	.nav-toggle {
		display: inline-flex;
	}

	.header-cta {
		display: none;
	}

	.nav-mobile-only {
		display: block;
	}

	.header-inner {
		min-height: 72px;
	}

	.header-holder {
		min-height: 72px;
	}

	.brand img {
		max-height: 48px;
	}

	.main-nav {
		position: fixed;
		top: var(--header-offset, 114px);
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--navy);
		overflow-y: auto;
		padding: 12px 20px 40px;
		transform: translateX(100%);
		transition: transform .3s ease;
		margin: 0;
		border-top: 1px solid rgba(255, 255, 255, .1);
	}

	.nav-open .main-nav {
		transform: none;
	}

	.nav-open {
		overflow: hidden;
	}

	.main-nav>ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.main-nav>ul>li {
		border-bottom: 1px solid rgba(255, 255, 255, .1);
	}

	.main-nav>ul>li.nav-mobile-only {
		border-bottom: 0;
	}

	.main-nav a,
	.main-nav .nav-parent {
		padding: 15px 4px;
		font-size: 16px;
		width: 100%;
		justify-content: space-between;
	}

	.main-nav>ul>li>a::after,
	.main-nav>ul>li>.nav-parent::after {
		display: none;
	}

	.submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border-top: 0;
		border-left: 2px solid var(--green);
		border-radius: 0;
		margin: 0 0 12px 4px;
		padding: 0;
		display: none;
	}

	.has-sub.is-open>.submenu {
		display: block;
	}

	.has-sub.is-open .chev {
		transform: rotate(180deg);
	}

	.has-sub:hover .chev {
		transform: none;
	}

	.has-sub.is-open:hover .chev {
		transform: rotate(180deg);
	}

	.submenu {
		background: transparent;
	}

	.submenu a {
		padding: 10px 16px;
		font-size: 14px;
		color: rgba(255, 255, 255, .8);
	}

	.submenu a:hover {
		background: rgba(255, 255, 255, .05);
		color: var(--white);
	}

	.main-nav .nav-mobile-only .fp-btn {
		width: 100%;
		margin-top: 20px;
		padding: 14px 20px;
		background: var(--green);
		border-color: var(--green);
		color: var(--white);
		justify-content: center;
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stat:nth-child(3) {
		border-left: 0;
	}

	.stat:nth-child(n+3) {
		border-top: 1px solid var(--line);
	}

	.about-grid,
	.why-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.about-media {
		max-width: 620px;
	}

	.products-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.industry-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.industry:nth-child(3) {
		border-left: 0;
	}

	.industry:nth-child(n+3) {
		border-top: 1px solid rgba(255, 255, 255, .14);
	}

	.industries {
		background-attachment: scroll;
	}

	.certs-inner {
		flex-direction: column;
		text-align: center;
		gap: 28px;
	}

	.certs-title {
		border-right: 0;
		padding-right: 0;
	}

	.footer-main {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.section {
		padding: 64px 0;
	}

	.section-head {
		margin-bottom: 40px;
	}

	.topbar-contact .hide-sm {
		display: none;
	}

	.hero-slides {
		min-height: 560px;
	}

	.hero-content {
		padding-bottom: 150px;
	}

	.hero-content .inner {
		padding-left: 20px;
	}

	.hero-slide {
		background:
			linear-gradient(90deg, rgba(12, 35, 64, .9) 0%, rgba(12, 35, 64, .6) 100%),
			var(--bg) center / cover no-repeat,
			radial-gradient(circle at 80% 30%, #1c4b7d 0%, #0c2340 60%);
	}

	.hero-arrows {
		display: none;
	}

	.hero-controls {
		bottom: 90px;
	}

	.products-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.products-grid {
		grid-template-columns: 1fr;
	}

	.why-list {
		grid-template-columns: 1fr;
	}

	/* mobile: overlay across the whole image so text stays readable */
	.cta-band {
		padding: 80px 0;
	
	}

	.cta-copy {
		padding-left: 20px;
	}
}

@media (max-width: 560px) {
	.fp-container {
		padding: 0 16px;
	}

	.topbar-inner {
		justify-content: center;
	}

	.topbar-contact {
		justify-content: center;
		gap: 4px 16px;
	}

	.brand img {
		max-height: 42px;
	}

	.brand-text {
		font-size: 24px;
	}

	.hero-actions .fp-btn {
		flex: 1 1 100%;
	}

	.stats {
		margin-top: -56px;
	}

	.stats-grid {
		grid-template-columns: 1fr;
	}

	.stat {
		padding: 20px 22px;
	}

	.stat+.stat {
		border-left: 0;
		border-top: 1px solid var(--line);
	}

	.about-media {
		padding: 0 14px 14px 0;
	}

	.about-badge {
		left: 12px;
		bottom: 24px;
		padding: 14px 16px;
	}

	.check-list {
		grid-template-columns: 1fr;
	}

	.pillars {
		grid-template-columns: 1fr;
	}

	.industry-grid {
		grid-template-columns: 1fr;
	}

	.industry+.industry {
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .14);
	}

	.cert img {
		height: 56px;
	}

	.footer-main {
		grid-template-columns: 1fr;
		gap: 36px;
		padding-top: 56px;
	}

	.footer-bottom .fp-container {
		flex-direction: column;
		text-align: center;
	}

	/* room at the bottom so the floating buttons / chat bubble don't cover the copyright line */
	.footer-bottom {
		padding-bottom: 96px;
	}

	.float-actions {
		left: 14px;
		bottom: 16px;
		gap: 10px;
	}

	.float-btn {
		width: 48px;
		height: 48px;
	}

	.float-btn svg {
		width: 23px;
		height: 23px;
	}

	.to-top {
		left: 17px;
		bottom: 76px;
		width: 42px;
		height: 42px;
	}

	.cta-actions .fp-btn {
		flex: 1 1 100%;
	}
}

@media (min-width: 1025px) and (max-width: 1180px) {
	.pillars {
		gap: 20px;
	}
}

@media (max-width: 1024px) and (min-width: 561px) {
	.pillars {
		grid-template-columns: 1fr;
		max-width: 680px;
	}
}

/* ==========================================================================
   ABOUT US PAGE
   ========================================================================== */

/* ---------- 1. Page banner ---------- */
.page-hero {
	position: relative;
	padding: 110px 0;
	color: var(--white);
	background:
		var(--bg) center / cover no-repeat,
		var(--navy);
}

.page-hero h1 {
	color: var(--white);
	font-size: clamp(34px, 5vw, 56px);
	margin-bottom: 14px;
}

.page-hero p {
	color: rgba(255, 255, 255, .85);
	font-size: clamp(16px, 1.6vw, 18px);
	max-width: 620px;
	margin: 0;
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 18px !important;
	padding: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}

.breadcrumb li+li::before {
	content: "/";
	margin-right: 8px;
	color: rgba(255, 255, 255, .4);
}

.page-hero .breadcrumb a {
	color: #c7d98f;
}

.page-hero .breadcrumb a:hover {
	color: var(--white);
}

/* ---------- 2. Intro: round image + big statement ---------- */
.ab-intro-grid {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 80px;
	align-items: center;
}

.ab-circle {
	position: relative;
	/* leave room for the dotted rings so they don't touch the text */
	width: calc(100% - 100px);
	max-width: 420px;
	aspect-ratio: 1;
	margin: 50px;
}

/* two dotted rings around the photo */
.ab-circle::before,
.ab-circle::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

.ab-circle::before {
	inset: -24px;
	border: 7px dotted rgba(141, 164, 68, .55);
}

.ab-circle::after {
	inset: -48px;
	border: 6px dotted #d5dbe3;
}

.ab-circle-img {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
	background: white;
	box-shadow: var(--shadow);
}

.ab-circle-img::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--img) center / cover no-repeat;
	transform: scale(1.14);
}

.ab-intro-copy h2 {
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 600;
	line-height: 1.15;
	margin-bottom: 22px;
}

.ab-intro-copy .lead {
	font-size: 19px;
	font-weight: 400;
}

/* ---------- 3. Product cards on a soft green band ---------- */
.ab-products {
	background: var(--green-soft);
}

.ab-products-head {
	max-width: 860px;
	margin: 0 auto 48px;
	text-align: center;
}

.ab-products-head h2 {
	font-size: clamp(28px, 3.6vw, 46px);
	font-weight: 600;
	margin-bottom: 16px;
}

.ab-products-head p {
	color: var(--ink);
	margin-bottom: 6px;
}

.ab-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.ab-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	padding: 40px 32px;
	text-align: center;
	border-radius: 10px;
	overflow: hidden;
	isolation: isolate;
	background: var(--navy);
}

/* photo + brand overlay (photo zooms slightly on hover) */
.ab-card::before,
.ab-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
}

.ab-card::before {
	background: var(--img) center / cover no-repeat;
	transition: transform .6s ease;
}

.ab-card::after {
	background: linear-gradient(160deg, rgba(12, 35, 64, .82) 0%, rgba(19, 58, 99, .78) 60%, rgba(111, 134, 49, .7) 100%);
}

.ab-card:hover::before {
	transform: scale(1.06);
}

.ab-card h3 {
	color: var(--white);
	font-size: 28px;
	font-weight: 600;
	margin-bottom: 8px;
}

.ab-card p {
	color: rgba(255, 255, 255, .9);
	font-weight: 500;
	max-width: 340px;
	margin-bottom: 26px;
}

.ab-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 30px;
	border-radius: 40px;
	background: var(--white);
	color: var(--navy) !important;
	font-size: 17px;
	font-weight: 600;
	transition: background .2s ease, color .2s ease;
}

.ab-more svg {
	width: 16px;
	height: 16px;
	color: var(--green-dark);
	transition: color .2s ease;
}

.ab-more:hover {
	background: var(--green);
	color: var(--white) !important;
}

.ab-more:hover svg {
	color: var(--white);
}

/* ---------- 4. Mission / Vision / Values as steps ---------- */
.ab-purpose-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.ab-purpose-copy h2 {
	font-size: clamp(30px, 3.6vw, 48px);
	font-weight: 600;
	margin-bottom: 26px;
}

.ab-purpose-copy p {
	color: var(--ink);
	margin-bottom: 30px;
}

.ab-steps {
	position: relative;
	display: grid;
	gap: 44px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* dashed line joining the three circles */
.ab-steps::before {
	content: "";
	position: absolute;
	left: 59px;
	top: 60px;
	bottom: 60px;
	border-left: 2px dashed var(--line);
}

.ab-step {
	position: relative;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 36px;
	align-items: center;
}

.ab-step-icon {
	position: relative;
	z-index: 1;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	border: 2px solid var(--green);
	background: var(--white);
	color: var(--navy);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s ease, color .25s ease;
}

.ab-step:hover .ab-step-icon {
	background: var(--navy);
	color: var(--white);
}

.ab-step-icon svg {
	width: 46px;
	height: 46px;
}

.ab-step-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .1em;
	color: var(--green-dark);
	margin-bottom: 4px;
}

.ab-step h3 {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 8px;
}

.ab-step p {
	color: var(--ink);
	margin: 0;
}

/* ---------- About page: responsive ---------- */
@media (max-width: 1024px) {

	.ab-intro-grid,
	.ab-purpose-grid {
		grid-template-columns: 1fr;
		gap: 56px;
	}

	.ab-circle {
		max-width: 380px;
		margin: 50px auto;
	}

	.ab-intro-copy {
		text-align: center;
	}

	.ab-cards {
		grid-template-columns: 1fr;
		max-width: 620px;
		margin: 0 auto;
	}

	.ab-card {
		min-height: 280px;
	}
}

@media (max-width: 768px) {
	.page-hero {
		padding: 72px 0;
	}

	.ab-products-head {
		margin-bottom: 36px;
	}
}

@media (max-width: 560px) {
	.ab-circle {
		max-width: 260px;
		margin: 40px auto;
	}

	.ab-circle::before {
		inset: -16px;
		border-width: 5px;
	}

	.ab-circle::after {
		inset: -32px;
		border-width: 4px;
	}

	.ab-intro-copy .lead {
		font-size: 17px;
	}
.lead {
	font-size: 16px;
}
	.ab-card {
		min-height: 260px;
		padding: 32px 22px;
	}

	.ab-card h3 {
		font-size: 24px;
	}

	.ab-steps {
		gap: 32px;
	}

	.ab-steps::before {
		left: 39px;
		top: 40px;
		bottom: 40px;
	}

	.ab-step {
		grid-template-columns: 80px 1fr;
		gap: 18px;
		align-items: start;
	}

	.ab-step-icon {
		width: 80px;
		height: 80px;
	}

	.ab-step-icon svg {
		width: 32px;
		height: 32px;
	}

	.ab-step h3 {
		font-size: 20px;
	}
}

/* ==========================================================================
   INFRASTRUCTURE PAGE
   (page banner + breadcrumb styles come from the ABOUT US PAGE block)
   ========================================================================== */

/* ---------- Intro + locations ---------- */
.inf-intro {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 72px;
	align-items: center;
}

.inf-intro-copy h2 {
	font-size: clamp(28px, 3.4vw, 42px);
}

.inf-sites {
	display: grid;
	gap: 18px;
}

.inf-site {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 26px 28px;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 3px solid var(--green);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}

.inf-site:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow);
}

.inf-site-icon {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.inf-site-icon svg {
	width: 26px;
	height: 26px;
}

.inf-site-label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--green-dark);
	margin-bottom: 2px;
}

.inf-site h3 {
	font-size: 21px;
	margin: 0;
}

/* ---------- Gallery ---------- */
.inf-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.inf-photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: linear-gradient(135deg, var(--navy-3), var(--navy));
	box-shadow: var(--shadow-sm);
}

.inf-photo img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .6s ease;
}

.inf-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(12, 35, 64, .45);
	opacity: 0;
	transition: opacity .3s ease;
}

.inf-zoom {
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: var(--green);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(.7);
	transition: opacity .3s ease, transform .3s ease;
}

.inf-zoom svg {
	width: 22px;
	height: 22px;
}

.inf-photo:hover img,
.inf-photo:focus-visible img {
	transform: scale(1.06);
}

.inf-photo:hover::after,
.inf-photo:focus-visible::after,
.inf-photo:hover .inf-zoom,
.inf-photo:focus-visible .inf-zoom {
	opacity: 1;
	transform: none;
}

/* ---------- Lightbox ---------- */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 60px 80px;
	background: rgba(8, 26, 48, .94);
}

.lightbox[hidden] {
	display: none !important;
}

.lb-figure {
	margin: 0;
	text-align: center;
}

.lb-img {
	max-width: 100%;
	max-height: calc(100vh - 140px);
	border-radius: var(--radius);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.lb-count {
	margin-top: 14px;
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: .08em;
	color: rgba(255, 255, 255, .75);
}

.lb-btn {
	position: absolute;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: rgba(255, 255, 255, .08);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease;
}

.lb-btn:hover {
	background: var(--green);
	border-color: var(--green);
}

.lb-btn svg {
	width: 22px;
	height: 22px;
}

.lb-close {
	top: 18px;
	right: 18px;
}

.lb-prev {
	left: 18px;
	top: 50%;
	margin-top: -24px;
}

.lb-next {
	right: 18px;
	top: 50%;
	margin-top: -24px;
}

/* ---------- Infrastructure page: responsive ---------- */
@media (max-width: 1024px) {
	.inf-intro {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.inf-sites {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.inf-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	/* first photo full width so the 9 photos fill the grid evenly */
	.inf-photo:first-child {
		grid-column: 1 / -1;
		aspect-ratio: 16 / 9;
	}

	.lightbox {
		padding: 70px 12px;
	}

	.lb-prev,
	.lb-next {
		top: auto;
		bottom: 16px;
		margin-top: 0;
	}

	.lb-prev {
		left: calc(50% - 60px);
	}

	.lb-next {
		right: calc(50% - 60px);
	}

	.lb-count {
		display: none;
	}
}

@media (max-width: 560px) {
	.inf-sites {
		grid-template-columns: 1fr;
	}

	.inf-site {
		padding: 20px;
	}
}

/* ==========================================================================
   CRO SERVICES PAGE
   (page banner + breadcrumb styles come from the ABOUT US PAGE block)
   ========================================================================== */

/* ---------- What is a CRO ---------- */
.cro-intro {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 64px;
	align-items: center;
}

.cro-intro-copy h2 {
	font-size: clamp(28px, 3.4vw, 42px);
}

.cro-why {
	background: var(--navy);
	color: var(--white);
	border-radius: 10px;
	padding: 40px 36px;
	border-bottom: 4px solid var(--green);
	box-shadow: var(--shadow);
}

.cro-why h3 {
	color: var(--white);
	font-size: 22px;
	margin-bottom: 24px;
}

.cro-why ul {
	display: grid;
	gap: 22px;
}

.cro-why li {
	display: flex;
	gap: 16px;
}

.cro-why-icon {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(141, 164, 68, .18);
	color: #c7d98f;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.cro-why-icon svg {
	width: 20px;
	height: 20px;
}

.cro-why strong {
	display: block;
	color: var(--white);
	font-size: 16px;
	margin-bottom: 2px;
}

.cro-why li span:not(.cro-why-icon) {
	display: block;
	color: rgba(255, 255, 255, .75);
	font-size: 14.5px;
	line-height: 1.55;
}

/* ---------- Services grid ---------- */
.cro-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.cro-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 30px 26px;
	min-height: 190px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.cro-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--green);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}

.cro-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: transparent;
}

.cro-card:hover::before {
	transform: scaleX(1);
}

.cro-icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var(--green-soft);
	color: var(--green-dark);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .25s ease, color .25s ease;
}

.cro-card:hover .cro-icon {
	background: var(--navy);
	color: var(--white);
}

.cro-icon svg {
	width: 26px;
	height: 26px;
}

.cro-card h3 {
	font-size: 18px;
	line-height: 1.35;
	margin: 0;
}

.cro-card--cta {
	justify-content: center;
	background: var(--navy);
	border-color: var(--navy);
}

.cro-card--cta h3 {
	color: var(--white);
	font-size: 21px;
}

.cro-card--cta .link-arrow {
	color: #c7d98f;
}

.cro-card--cta:hover .link-arrow {
	color: var(--white);
}

/* ---------- Who we support ---------- */
.cro-who {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}

.cro-who-copy h2 {
	font-size: clamp(28px, 3.4vw, 42px);
}

.cro-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.cro-tags li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 40px;
	background: var(--soft);
	border: 1px solid var(--line);
	font-size: 15px;
	font-weight: 600;
	color: var(--navy);
}

.cro-tags li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
}

/* ---------- CRO page: responsive ---------- */
@media (max-width: 1024px) {

	.cro-intro,
	.cro-who {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.cro-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.cro-why {
		padding: 30px 22px;
	}

	.cro-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.cro-card {
		flex-direction: row;
		align-items: center;
		min-height: 0;
		padding: 20px;
	}

	.cro-card--cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.cro-icon {
		flex: none;
		width: 48px;
		height: 48px;
	}

	.cro-tags li {
		padding: 10px 16px;
		font-size: 14px;
	}
}

/* ==========================================================================
   MEDIA PAGE
   (page banner + breadcrumb styles come from the ABOUT US PAGE block)
   ========================================================================== */

/* ---------- Press coverage cards ---------- */
.md-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	max-width: 1040px;
	margin: 0 auto;
}

.md-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}

.md-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.md-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 180px;
	padding: 30px 40px;
	background: var(--soft);
	border-bottom: 3px solid var(--green);
}

.md-logo img {
	max-width: 100%;
	max-height: 110px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.md-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 28px 30px 30px;
}

.md-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 14px;
}

.md-date {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

.md-date svg {
	width: 16px;
	height: 16px;
	color: var(--green-dark);
}

.md-source {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--green-dark);
	background: var(--green-soft);
	padding: 4px 10px;
	border-radius: 20px;
}

.md-body h3 {
	font-size: 21px;
	line-height: 1.35;
	margin-bottom: 22px;
	flex: 1;
}

/* ---------- More from media ---------- */
.md-links {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.md-link {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 34px 30px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.md-link:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: transparent;
}

.md-link-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	transition: background .25s ease;
}

.md-link:hover .md-link-icon {
	background: var(--green);
}

.md-link-icon svg {
	width: 26px;
	height: 26px;
}

.md-link h3 {
	font-size: 21px;
	margin-bottom: 8px;
}

.md-link p {
	font-size: 15px;
	margin-bottom: 20px;
	flex: 1;
}

/* ---------- Media page: responsive ---------- */
@media (max-width: 1024px) {
	.md-links {
		grid-template-columns: 1fr;
		max-width: 620px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.md-grid {
		grid-template-columns: 1fr;
		max-width: 620px;
	}
}

@media (max-width: 560px) {
	.md-logo {
		height: 140px;
		padding: 22px 26px;
	}

	.md-logo img {
		max-height: 84px;
	}

	.md-body {
		padding: 22px;
	}

	.md-body h3 {
		font-size: 19px;
	}

	.md-link {
		padding: 26px 22px;
	}
}

/* ==========================================================================
   EVENTS PAGE
   (page banner + breadcrumb styles come from the ABOUT US PAGE block)
   ========================================================================== */

/* ---------- Jump-to-year links ---------- */
.ev-years {
	position: sticky;
	top: 96px;
	z-index: 20;
	display: flex;
	justify-content: center;
	gap: 8px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto 64px;
	padding: 6px;
	background: rgba(255, 255, 255, .92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid var(--line);
	border-radius: 40px;
	box-shadow: var(--shadow-sm);
}

.ev-years a {
	min-width: 96px;
	padding: 10px 24px;
	border-radius: 30px;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-align: center;
	color: var(--navy);
	transition: background .2s ease, color .2s ease;
}

.ev-years a:hover {
	background: var(--soft);
	color: var(--navy);
}

.ev-years a.is-active {
	background: var(--navy);
	color: var(--white);
}

/* ---------- Timeline ---------- */
.ev-timeline {
	position: relative;
}

/* vertical line joining the years */
.ev-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 59px;
	border-left: 2px dashed #cdd5df;
}

.ev-year {
	position: relative;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 48px;
	scroll-margin-top: 170px;
}

.ev-year+.ev-year {
	margin-top: 72px;
}

.ev-year-mark {
	position: relative;
	z-index: 1;
}

/* big year circle that stays in view while you scroll that year */
.ev-year-mark span {
	position: sticky;
	top: 170px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	font-family: var(--font-head);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: .02em;
	box-shadow: 0 0 0 8px var(--white), 0 0 0 10px var(--green);
}

.ev-year-body {
	display: grid;
	gap: 32px;
	min-width: 0;
}

/* ---------- Event card ---------- */
.ev-event {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 28px;
	box-shadow: var(--shadow-sm);
}

.ev-head {
	margin-bottom: 22px;
	padding-left: 16px;
	border-left: 3px solid var(--green);
}

.ev-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--green-dark);
	margin-bottom: 4px;
}

.ev-kicker svg {
	width: 14px;
	height: 14px;
}

.ev-head h3 {
	font-size: clamp(22px, 2.4vw, 28px);
	margin: 0;
}

/* ---------- Photo mosaic: first photo large, the rest around it ---------- */
.ev-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 160px;
	gap: 12px;
}

.ev-photo {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--navy-3), var(--navy));
}

.ev-photo:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

/* 6 photos: 2nd photo wide, last two wide = tidy full rows */
.ev-gallery--6 .ev-photo:nth-child(2),
.ev-gallery--6 .ev-photo:nth-child(n+5) {
	grid-column: span 2;
}

/* 7 photos: last two wide */
.ev-gallery--7 .ev-photo:nth-child(n+6) {
	grid-column: span 2;
}

.ev-photo img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .6s ease;
}

/* dark tint + zoom icon on hover */
.ev-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(12, 35, 64, .45);
	opacity: 0;
	transition: opacity .3s ease;
}

.ev-photo::after {
	content: "+";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 48px;
	height: 48px;
	margin: -24px 0 0 -24px;
	border-radius: 50%;
	background: var(--green);
	color: var(--white);
	font-size: 28px;
	font-weight: 300;
	line-height: 46px;
	text-align: center;
	opacity: 0;
	transform: scale(.7);
	transition: opacity .3s ease, transform .3s ease;
}

.ev-photo:hover img,
.ev-photo:focus-visible img {
	transform: scale(1.06);
}

.ev-photo:hover::before,
.ev-photo:focus-visible::before,
.ev-photo:hover::after,
.ev-photo:focus-visible::after {
	opacity: 1;
	transform: none;
}

/* ---------- Video ---------- */
.ev-video {
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.ev-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #000;
}

/* ---------- Events page: responsive ---------- */
@media (max-width: 1024px) {
	.ev-years {
		top: 84px;
	}

	.ev-gallery {
		grid-auto-rows: 130px;
	}
}

@media (max-width: 768px) {

	/* timeline becomes a simple stack: year label above its events */
	.ev-timeline::before {
		display: none;
	}

	.ev-year {
		grid-template-columns: 1fr;
		gap: 20px;
		scroll-margin-top: 150px;
	}

	.ev-year+.ev-year {
		margin-top: 56px;
	}

	.ev-year-mark {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.ev-year-mark::after {
		content: "";
		flex: 1;
		height: 2px;
		background: var(--line);
	}

	.ev-year-mark span {
		position: static;
		width: auto;
		height: auto;
		padding: 8px 22px;
		border-radius: 30px;
		font-size: 22px;
		box-shadow: none;
	}

	.ev-years {
		margin-bottom: 40px;
	}

	.ev-years a {
		min-width: 0;
		padding: 9px 18px;
		font-size: 14px;
	}

	.ev-event {
		padding: 18px;
	}

	.ev-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 120px;
		gap: 8px;
	}

	/* on mobile: first photo full width, the rest two per row */
	.ev-gallery .ev-photo:nth-child(n) {
		grid-column: auto;
		grid-row: auto;
	}

	.ev-gallery .ev-photo:first-child {
		grid-column: 1 / -1;
		grid-row: span 2;
	}

	/* 6 photos leaves one alone at the end: make it full width */
	.ev-gallery--6 .ev-photo:last-child {
		grid-column: 1 / -1;
	}
}

/* ==========================================================================
   PUBLICATIONS PAGE
   (uses the timeline + year links from the EVENTS PAGE block,
    and the banner from the ABOUT US PAGE block)
   ========================================================================== */

/* one publication: magazine logo on the left, details on the right */
.pub-card {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	align-items: center;
	transition: transform .25s ease, box-shadow .25s ease;
}

.pub-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.pub-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 170px;
	padding: 24px;
	background: var(--soft);
	border-radius: 8px;
	border-bottom: 3px solid var(--green);
}

.pub-logo img {
	max-width: 100%;
	max-height: 110px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.pub-body h3 {
	font-size: clamp(20px, 2.2vw, 24px);
	line-height: 1.35;
	margin: 0 0 14px;
}

.pub-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 18px;
}

.pub-date {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}

.pub-date svg {
	width: 16px;
	height: 16px;
	color: var(--green-dark);
}

.pub-source {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--navy);
	background: var(--soft);
	border: 1px solid var(--line);
	padding: 4px 10px;
	border-radius: 20px;
}

@media (max-width: 768px) {
	.pub-card {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.pub-logo {
		height: 140px;
	}

	.pub-logo img {
		max-height: 90px;
	}

	/* five year links: a little tighter on phones */
	.ev-years a {
		padding: 9px 13px;
	}
}

/* ==========================================================================
   CONTACT PAGE
   (page banner + breadcrumb styles come from the ABOUT US PAGE block)
   ========================================================================== */

/* ---------- Form + head office ---------- */
.ct-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 36px;
	align-items: start;
}

.ct-form-card {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 40px;
	box-shadow: var(--shadow-sm);
}

.ct-form-card h2 {
	font-size: clamp(26px, 3vw, 36px);
}

.ct-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
	margin-top: 28px;
}

.ct-field--full {
	grid-column: 1 / -1;
}

.ct-field label {
	display: block;
	margin-bottom: 7px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--navy);
}

.ct-field input,
.ct-field textarea {
	display: block;
	width: 100%;
	padding: 13px 16px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 8px;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.ct-field textarea {
	min-height: 140px;
	resize: vertical;
}

.ct-field input:focus,
.ct-field textarea:focus {
	outline: none;
	background: var(--white);
	border-color: var(--green);
	box-shadow: 0 0 0 4px rgba(141, 164, 68, .18);
}

.ct-submit {
	padding: 15px 34px;
}

/* head office card (navy) */
.ct-hq {
	background: var(--navy);
	color: rgba(255, 255, 255, .85);
	border-radius: 12px;
	padding: 36px 32px;
	border-bottom: 4px solid var(--green);
	box-shadow: var(--shadow);
}

.ct-hq-head,
.ct-office-head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}

.ct-hq-head img,
.ct-office-head img {
	width: 56px;
	height: 40px;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.ct-tag {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #c7d98f;
}

.ct-hq h3 {
	color: var(--white);
	font-size: 26px;
	margin: 0;
}

.ct-list {
	display: grid;
	gap: 18px;
}

.ct-list li {
	display: flex;
	gap: 14px;
	line-height: 1.55;
	font-size: 15px;
}

.ct-list strong {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: 2px;
}

.ct-ico {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--green-soft);
	color: var(--green-dark);
}

.ct-ico svg {
	width: 18px;
	height: 18px;
}

.ct-hq .ct-ico {
	background: rgba(141, 164, 68, .18);
	color: #c7d98f;
}

.ct-hq .ct-list strong {
	color: var(--white);
}

.ct-hq a {
	color: rgba(255, 255, 255, .9);
}

.ct-hq a:hover {
	color: #c7d98f;
}

.ct-sub {
	margin: 30px 0 16px !important;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: var(--white) !important;
	font-size: 17px;
}

.ct-sites {
	display: grid;
	gap: 14px;
}

.ct-sites li {
	display: flex;
	gap: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.ct-sites strong {
	display: block;
	color: var(--white);
	font-size: 14px;
}

.ct-site-ico {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .08);
	color: #c7d98f;
}

.ct-site-ico svg {
	width: 17px;
	height: 17px;
}

/* ---------- International offices ---------- */
.ct-offices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	max-width: 960px;
	margin: 0 auto;
}

.ct-office {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 32px;
	box-shadow: var(--shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}

.ct-office:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
}

.ct-office h3 {
	font-size: 22px;
	margin: 0;
}

.ct-office .ct-list strong {
	color: var(--navy);
}

.ct-office a {
	color: var(--ink);
}

.ct-office a:hover {
	color: var(--green-dark);
}

/* ---------- Our Global Reach (map) ---------- */
.gr {
	background: radial-gradient(circle at 70% 30%, #133a63 0%, var(--navy) 60%);
	overflow: hidden;
}

.gr .section-head h2 {
	color: var(--white);
}

.gr .section-head p {
	color: rgba(255, 255, 255, .78);
}

.gr .eyebrow {
	color: #c7d98f;
}

.gr .eyebrow::before,
.gr .eyebrow::after {
	background: #c7d98f;
}

.gr-map {
	position: relative;
	aspect-ratio: 1000 / 383;
	background: var(--map) center / 100% 100% no-repeat;
}

.gr-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* dashed routes that "draw" in */
.gr-arcs path {
	fill: none;
	stroke: rgba(199, 217, 143, .75);
	stroke-width: 1.1;
	stroke-dasharray: 4 4;
	animation: grDash 30s linear infinite;
}

@keyframes grDash {
	to {
		stroke-dashoffset: -400;
	}
}

.gr-pin circle {
	fill: var(--green);
	stroke: var(--white);
	stroke-width: 1.5;
	transition: r .2s ease;
}

.gr-pin--office circle {
	fill: var(--white);
	stroke: var(--green);
	stroke-width: 2.5;
}

.gr-pin text,
.gr-hub text {
	font-family: var(--font-body);
	font-size: 9px;
	font-weight: 600;
	fill: rgba(255, 255, 255, .9);
	paint-order: stroke;
	stroke: var(--navy);
	stroke-width: 3px;
	stroke-linejoin: round;
	pointer-events: none;
}

.gr-pin {
	cursor: default;
	outline: none;
}

.gr-pin:hover circle,
.gr-pin:focus circle {
	r: 6.5;
}

.gr-pin:hover text,
.gr-pin:focus text {
	fill: #c7d98f;
}

.gr-hub-dot {
	fill: #c7d98f;
	stroke: var(--white);
	stroke-width: 2.5;
}

.gr-hub-pulse {
	fill: #c7d98f;
	opacity: .5;
	transform-box: fill-box;
	transform-origin: center;
	animation: grPulse 2.4s ease-out infinite;
}

.gr-hub text {
	font-size: 11px;
	font-weight: 700;
	fill: #c7d98f;
}

@keyframes grPulse {
	from {
		transform: scale(1);
		opacity: .55;
	}

	to {
		transform: scale(3.2);
		opacity: 0;
	}
}

.gr-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px 28px;
	margin: 28px 0 48px !important;
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}

.gr-legend li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}

.gr-key {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--green);
	border: 2px solid var(--white);
}

.gr-key--office {
	background: var(--white);
	border-color: var(--green);
	border-width: 3px;
}

.gr-key--hub {
	width: 14px;
	height: 14px;
	background: #c7d98f;
	box-shadow: 0 0 0 4px rgba(199, 217, 143, .25);
}

/* countries listed by region (readable on every screen size) */
.gr-regions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.gr-region {
	padding: 24px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .1);
}

.gr-region h3 {
	color: var(--white);
	font-size: 17px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--green);
	display: inline-block;
}

.gr-region ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.gr-region li {
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, .88);
	padding: 5px 11px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .08);
}

/* ---------- Google map ---------- */
.ct-map iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	filter: grayscale(.25);
}

/* ---------- Contact page: responsive ---------- */
@media (max-width: 1024px) {
	.ct-grid {
		grid-template-columns: 1fr;
	}

	.gr-regions {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.ct-offices {
		grid-template-columns: 1fr;
	}

	/* map labels get too small on phones: the region list below shows the names */
	.gr-pin text {
		display: none;
	}

	.gr-hub text {
		font-size: 16px;
	}

	.ct-map iframe {
		height: 320px;
	}
}

@media (max-width: 560px) {
	.ct-form-card {
		padding: 26px 20px;
	}

	.ct-form {
		grid-template-columns: 1fr;
	}

	.ct-submit {
		width: 100%;
	}

	.ct-hq,
	.ct-office {
		padding: 26px 20px;
	}

	.gr-regions {
		grid-template-columns: 1fr;
	}

	.gr-legend {
		flex-direction: column;
		align-items: flex-start;
		width: fit-content;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {

	.gr-arcs path,
	.gr-hub-pulse {
		animation: none;
	}
}

/* crowded Europe / Middle East pins: name shows on hover (all names are listed by region below) */
.gr-pin--dense text {
	opacity: 0;
	transition: opacity .2s ease;
}

.gr-pin--dense:hover text,
.gr-pin--dense:focus text {
	opacity: 1;
}

/* ==========================================================================
   ENZYMES PAGE (product listing)
   (page banner + breadcrumb styles come from the ABOUT US PAGE block)
   ========================================================================== */

/* ---------- Intro ---------- */
.en-intro {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 64px;
	align-items: center;
}

.en-intro-copy h2 {
	font-size: clamp(28px, 3.4vw, 42px);
}

.en-intro-copy .check-list {
	margin-bottom: 0;
}

.en-intro-media {
	position: relative;
	padding: 0 0 40px 40px;
}

.en-intro-img {
	aspect-ratio: 4 / 4.2;
	border-radius: 12px;
	background: var(--img) center / cover no-repeat, linear-gradient(135deg, var(--navy-3), var(--navy));
	box-shadow: var(--shadow);
}

.en-fact {
	position: absolute;
	left: 0;
	bottom: 0;
	max-width: 270px;
	padding: 22px 24px;
	background: var(--navy);
	color: rgba(255, 255, 255, .85);
	border-radius: 10px;
	border-bottom: 4px solid var(--green);
	box-shadow: var(--shadow);
}

.en-fact strong {
	display: block;
	font-family: var(--font-head);
	font-size: 30px;
	color: #c7d98f;
	line-height: 1.1;
	margin-bottom: 6px;
}

.en-fact span {
	font-size: 14px;
	line-height: 1.5;
}

/* ---------- Portfolio grid + search ---------- */
.en-port-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 20px 32px;
	margin-bottom: 40px;
}

.en-port-head h2 {
	font-size: clamp(28px, 3.4vw, 40px);
	margin: 0;
	
}

.en-search {
	position: relative;
	display: block;
	width: 100%;
	max-width: 360px;
}

.en-search svg {
	position: absolute;
	left: 18px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	color: var(--muted);
	pointer-events: none;
}

.en-search input {
	width: 100%;
	padding: 14px 18px 14px 48px;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--ink);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 40px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.en-search input:focus {
	outline: none;
	border-color: var(--green);
	box-shadow: 0 0 0 4px rgba(141, 164, 68, .18);
}

.en-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.en-card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 24px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.en-card[hidden] {
	display: none !important;
}

.en-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow);
	border-color: transparent;
}

/* periodic-table style tile: a short symbol for each enzyme */
.en-tile {
	position: relative;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--green-soft);
	border: 1px solid rgba(141, 164, 68, .35);
	color: var(--navy);
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.en-tile small {
	position: absolute;
	top: 5px;
	left: 7px;
	font-family: var(--font-body);
	font-size: 10px;
	font-weight: 600;
	color: var(--green-dark);
	transition: color .25s ease;
}

.en-card:nth-child(even) .en-tile {
	background: #e8eef5;
	border-color: rgba(28, 75, 125, .2);
}

.en-card:hover .en-tile {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.en-card:hover .en-tile small {
	color: #c7d98f;
}

.en-card-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.en-card h3 {
	font-size: 18px;
	line-height: 1.3;
	margin-bottom: 6px;
}

.en-card p {
	font-size: 14px;
	line-height: 1.55;
	margin-bottom: 12px;
}

.en-card .link-arrow {
	font-size: 12.5px;
}

.en-empty {
	text-align: center;
	margin-top: 24px;
}

/* ---------- Specifications table (same layout as the product sheet) ---------- */
.en-table-wrap {
	max-width: 1100px;
	margin: 0 auto;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

.en-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.en-table thead th {
	background: var(--navy);
	color: var(--white);
	text-align: left;
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	padding: 16px 20px;
	border-right: 1px solid rgba(255, 255, 255, .12);
}

.en-table thead th:last-child {
	border-right: 0;
}

.en-table .en-col-img {
	text-align: center;
	width: 130px;
}

.en-table tbody th,
.en-table tbody td {
	padding: 12px 20px;
	text-align: left;
	vertical-align: middle;
	border-top: 1px solid var(--line);
	border-right: 1px solid var(--line);
	color: var(--ink);
	line-height: 1.5;
}

.en-table tbody td:last-child {
	border-right: 0;
}

.en-table tbody tr {
	transition: background .2s ease;
}

.en-table tbody tr:hover {
	background: #f7faf0;
}

.en-table tbody th {
	font-family: var(--font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--navy);
}

.en-spec-no {
	color: var(--green-dark);
}

.en-assay {
	font-weight: 600;
	color: var(--navy) !important;
}

.en-spec-img {
	text-align: center !important;
}

/* small rectangular photo, like the product sheet */
.en-thumb {
	display: inline-block;
	width: 84px;
	height: 58px;
	border-radius: 6px;
	overflow: hidden;
	vertical-align: middle;
	border: 1px solid var(--line);
	background: var(--soft);
}

.en-thumb img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	font-size: 0;
	/* hides alt text while a photo is missing */
	color: transparent;
}

.en-note {
	margin-top: 16px;
	font-size: 14px;
	text-align: center;
}

/* ---------- Applications ---------- */
.en-apps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.en-app {
	padding: 30px 26px;
	background: var(--white);
	border-radius: 10px;
	border: 1px solid var(--line);
	border-bottom: 3px solid var(--green);
	text-align: center;
}

.en-app-ico {
	width: 64px;
	height: 64px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--navy);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}

.en-app-ico svg {
	width: 30px;
	height: 30px;
}

.en-app h3 {
	font-size: 19px;
	margin-bottom: 8px;
}

.en-app p {
	font-size: 14.5px;
	margin: 0;
}

/* ---------- Enzymes page: responsive ---------- */
@media (max-width: 1024px) {
	.en-intro {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.en-intro-media {
		max-width: 560px;
	}

	.en-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.en-apps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {

	/* table becomes one card per product */
	.en-table-wrap {
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.en-table thead {
		display: none;
	}

	.en-table,
	.en-table tbody,
	.en-table tr {
		display: block;
	}

	.en-table tbody tr {
		display: grid;
		grid-template-columns: 1fr 84px;
		gap: 4px 14px;
		margin-bottom: 12px;
		padding: 16px;
		background: var(--white) !important;
		border: 1px solid var(--line);
		border-left: 3px solid var(--green);
		border-radius: 10px;
	}

	.en-table tbody th,
	.en-table tbody td {
		display: block;
		padding: 0;
		border: 0;
	}

	.en-table tbody th {
		grid-column: 1;
		grid-row: 1;
	}

	.en-table tbody .en-spec-img {
		grid-column: 2;
		grid-row: 1 / span 3;
		align-self: center;
	}

	.en-table tbody td[data-label]:not(.en-spec-img)::before {
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .1em;
		text-transform: uppercase;
		color: var(--green-dark);
	}

	.en-table tbody td:not(.en-spec-img) {
		grid-column: 1;
		font-size: 14px;
		margin-top: 6px;
	}
}

@media (max-width: 560px) {
	.en-intro-media {
		padding: 0 0 70px 0;
	}

	.en-fact {
		left: 16px;
		right: 16px;
		max-width: none;
	}

	.en-apps {
		grid-template-columns: 1fr;
	}

	.en-search {
		max-width: none;
	}

}

/* phones: smaller cards */
@media (max-width: 560px) {
	.en-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.en-card {
		padding: 16px;
		gap: 14px;
		align-items: center;
	}

	.en-card p {
		display: none;
	}

	.en-card h3 {
		font-size: 16px;
		margin-bottom: 4px;
	}

	.en-tile {
		width: 52px;
		height: 52px;
		font-size: 18px;
	}

	.en-table tbody tr {
		grid-template-columns: 1fr 70px;
	}

	.en-thumb {
		width: 70px;
		height: 52px;
	}
}

/* ==========================================================================
   PROBIOTICS PAGE
   (banner from ABOUT US block; intro reuses .en-intro / .en-fact from ENZYMES block)
   ========================================================================== */

/* ---------- What makes a probiotic (5 steps on navy) ---------- */
.pb-criteria {
	background: radial-gradient(circle at 80% 20%, var(--navy-2) 0%, var(--navy) 60%);
}

.pb-criteria .section-head h2 {
	color: var(--white);
}

.pb-criteria .section-head p {
	color: rgba(255, 255, 255, .78);
}

.pb-criteria .eyebrow {
	color: #c7d98f;
}

.pb-criteria .eyebrow::before,
.pb-criteria .eyebrow::after {
	background: #c7d98f;
}

.pb-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* line that joins the numbers */
.pb-steps::before {
	content: "";
	position: absolute;
	top: 27px;
	left: 10%;
	right: 10%;
	border-top: 2px dashed rgba(199, 217, 143, .45);
}

.pb-step {
	position: relative;
	text-align: center;
	padding: 0 6px;
}

.pb-step-no {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--green);
	color: var(--white);
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 800;
	box-shadow: 0 0 0 6px var(--navy), 0 0 0 7px rgba(199, 217, 143, .45);
}

.pb-step h3 {
	color: var(--white);
	font-size: 18px;
	margin-bottom: 8px;
}

.pb-step p {
	color: rgba(255, 255, 255, .75);
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
}

/* ---------- Essential properties ---------- */
.pb-props {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 64px;
	align-items: start;
}

.pb-props-side {
	position: sticky;
	top: 110px;
}

.pb-props-side h2 {
	font-size: clamp(28px, 3.2vw, 40px);
}

.pb-props-img {
	margin-top: 28px;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	background: var(--img) center / cover no-repeat, linear-gradient(135deg, var(--navy-3), var(--navy));
	box-shadow: var(--shadow);
}

.pb-props-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 16px;
}

.pb-props-list li {
	display: flex;
	gap: 20px;
	padding: 24px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 10px;
	transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.pb-props-list li:hover {
	border-color: var(--green);
	box-shadow: var(--shadow-sm);
	transform: translateX(4px);
}

.pb-prop-no {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--green-soft);
	color: var(--green-dark);
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 800;
}

.pb-props-list h3 {
	font-size: 18px;
	margin-bottom: 4px;
}

.pb-props-list p {
	font-size: 15px;
	margin: 0;
}

/* ---------- Health attributes (chips) ---------- */
.pb-benefits {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.sec-bg-green {
	background: #f1f5e6;
}
.pb-benefits li {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 40px;
	font-family: var(--font-head);
	font-size: 15px;
	font-weight: 600;
	color: var(--navy);
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.pb-benefits li::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 4px var(--green-soft);
}

.pb-benefits li:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.pb-benefits li:hover::before {
	box-shadow: 0 0 0 4px rgba(141, 164, 68, .35);
}

/* ---------- Strain cards ---------- */
.pb-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.pb-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}

.pb-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow);
}

.pb-card-img {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(135deg, var(--green-soft), #e8eef5);
}

.pb-card-img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	transition: transform .5s ease;
}

.pb-card:hover .pb-card-img img {
	transform: scale(1.06);
}

.pb-tag {
	position: absolute;
	left: 14px;
	top: 14px;
	padding: 5px 12px;
	border-radius: 20px;
	background: rgba(12, 35, 64, .85);
	color: var(--white);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pb-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 24px 24px;
}

.pb-card h3 {
	font-size: 19px;
	margin-bottom: 8px;
}

.pb-card p {
	font-size: 14.5px;
	line-height: 1.6;
	margin-bottom: 16px;
	flex: 1;
}

.pb-card .link-arrow {
	font-size: 12.5px;
}

/* ---------- Probiotics page: responsive ---------- */
@media (max-width: 1024px) {
	.pb-steps {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 40px;
	}

	.pb-steps::before {
		display: none;
	}

	.pb-props {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.pb-props-side {
		position: static;
	}

	.pb-props-img {
		max-width: 560px;
	}

	.pb-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {

	/* steps become a vertical timeline */
	.pb-steps {
		grid-template-columns: 1fr;
		row-gap: 0;
	}

	.pb-step {
		display: grid;
		grid-template-columns: 48px 1fr;
		column-gap: 18px;
		text-align: left;
		padding: 0 0 28px;
	}

	.pb-step::before {
		content: "";
		position: absolute;
		left: 23px;
		top: 48px;
		bottom: 0;
		border-left: 2px dashed rgba(199, 217, 143, .45);
	}

	.pb-step:last-child::before {
		display: none;
	}

	.pb-step-no {
		grid-row: 1 / span 2;
		width: 48px;
		height: 48px;
		margin: 0;
		font-size: 16px;
	}

	.pb-step h3 {
		margin-top: 10px;
	}
}

@media (max-width: 560px) {
	.pb-props-list li {
		padding: 18px;
		gap: 14px;
	}

	.pb-prop-no {
		width: 38px;
		height: 38px;
		font-size: 16px;
	}

	.pb-benefits {
		gap: 8px;
	}

	.pb-benefits li {
		padding: 9px 14px;
		font-size: 13.5px;
	}

	.pb-grid {
		grid-template-columns: 1fr;
	}
}

/* phones: compact strain cards (image left, text right) */
@media (max-width: 560px) {
	.pb-grid {
		gap: 12px;
	}

	.pb-card {
		flex-direction: row;
	}

	.pb-card-img {
		flex: none;
		width: 112px;
		aspect-ratio: auto;
	}

	.pb-tag {
		display: none;
	}

	.pb-card-body {
		padding: 14px 16px;
	}

	.pb-card h3 {
		font-size: 16px;
		margin-bottom: 4px;
	}

	.pb-card p {
		font-size: 13.5px;
		margin-bottom: 8px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* spec table without the Image column (Probiotics page) */
.en-table--noimg tbody td:last-child {
	border-right: 0;
}

@media (max-width: 768px) {
	.en-table--noimg tbody tr {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   PROBIOTIC BLENDS PAGE
   (banner from ABOUT US block; search box + heading row from ENZYMES block)
   ========================================================================== */

/* ---------- Intro + prebiotic/probiotic "equation" ---------- */
.bl-intro {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: 64px;
	align-items: center;
}

.bl-intro-copy h2 {
	font-size: clamp(28px, 3.4vw, 42px);
}

.bl-equation {
	display: grid;
	gap: 0;
	justify-items: center;
}

.bl-eq-item {
	width: 100%;
	padding: 22px 26px;
	background: var(--white);
	border: 1px solid var(--line);
	border-left: 3px solid var(--green);
	border-radius: 10px;
	box-shadow: var(--shadow-sm);
}

.bl-eq-item--result {
	background: var(--navy);
	border-color: var(--navy);
	border-left-color: var(--green);
	box-shadow: var(--shadow);
}

.bl-eq-tag {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--green-dark);
	margin-bottom: 2px;
}

.bl-eq-item strong {
	display: block;
	font-family: var(--font-head);
	font-size: 20px;
	color: var(--navy);
	margin-bottom: 4px;
}

.bl-eq-item p {
	font-size: 14.5px;
	margin: 0;
}

.bl-eq-item--result .bl-eq-tag {
	color: #c7d98f;
}

.bl-eq-item--result strong {
	color: var(--white);
}

.bl-eq-item--result p {
	color: rgba(255, 255, 255, .78);
}

.bl-eq-op {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: -8px 0;
	position: relative;
	z-index: 1;
	border-radius: 50%;
	background: var(--green);
	color: var(--white);
	font-family: var(--font-head);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 5px var(--white);
}

.bl-prebiotics {
	margin-top: 56px;
	padding: 28px 32px;
	background: var(--soft);
	border-radius: 12px;
	display: flex;
	align-items: center;
	gap: 16px 28px;
}

.bl-prebiotics h3 {
	flex: none;
	font-size: 17px;
	margin: 0;
}

.bl-prebiotics ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bl-prebiotics li {
	padding: 7px 14px;
	border-radius: 30px;
	background: var(--white);
	border: 1px solid var(--line);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--navy);
}

/* ---------- Blend picker: list on the left, composition on the right ---------- */
.bl-explorer {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 28px;
	align-items: start;
}

.bl-tabs {
	position: sticky;
	top: 110px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	margin: 0;
	padding: 4px;
	list-style: none;
}

.bl-tabs li[hidden] {
	display: none;
}

.bl-tab {
	display: block;
	width: 100%;
	padding: 10px 12px;
	text-align: left;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--font-body);
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.bl-tab strong {
	display: block;
	font-family: var(--font-head);
	font-size: 15px;
	color: var(--navy);
}

.bl-tab span {
	display: block;
	font-size: 11.5px;
	color: var(--muted);
	white-space: nowrap;
}

.bl-tab:hover {
	border-color: var(--green);
}

.bl-tab.is-active {
	background: var(--navy);
	border-color: var(--navy);
}

.bl-tab.is-active strong {
	color: var(--white);
}

.bl-tab.is-active span {
	color: #c7d98f;
}

.bl-empty {
	grid-column: 1 / -1;
	text-align: center;
	margin: 0;
}

.bl-panels[hidden] {
	display: none;
}

.bl-panel {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	scroll-margin-top: 100px;
}

.bl-panel-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px 28px;
	padding: 26px 28px;
	border-bottom: 3px solid var(--green);
}

.bl-kicker {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--green-dark);
}

.bl-panel-head h3 {
	font-size: clamp(26px, 3vw, 34px);
	margin: 2px 0 2px;
}

.bl-panel-head p {
	margin: 0;
	font-size: 15px;
}

.bl-stats {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl-stats li {
	min-width: 96px;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--green-soft);
	text-align: center;
}

.bl-stats span {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--green-dark);
}

.bl-stats strong {
	display: block;
	font-family: var(--font-head);
	font-size: 15px;
	color: var(--navy);
	white-space: nowrap;
}

/* composition table */
.bl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.bl-table thead th {
	padding: 12px 28px;
	background: var(--navy);
	color: var(--white);
	font-family: var(--font-head);
	font-size: 14px;
	font-weight: 700;
	text-align: left;
}

.bl-table thead th:last-child,
.bl-table td:last-child {
	width: 34%;
}

.bl-table td {
	padding: 11px 28px;
	border-top: 1px solid var(--line);
	color: var(--ink);
	vertical-align: middle;
}

.bl-table tbody tr:hover td {
	background: #f7faf0;
}

.bl-table em {
	color: var(--navy);
	font-weight: 500;
}

.bl-table small {
	color: var(--muted);
	font-size: 13px;
}

.bl-table td + td {
	border-left: 1px solid var(--line);
	font-weight: 600;
	color: var(--navy);
}

/* one quantity shared by several strains */
.bl-table .bl-total {
	background: var(--green-soft) !important;
	text-align: center;
	font-family: var(--font-head);
	font-size: 18px;
	font-weight: 700;
}

.bl-total span {
	display: block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--green-dark);
}

/* prebiotics / minerals rows */
.bl-table .bl-extra td {
	background: var(--soft);
	font-weight: 600;
}

/* ---------- Blends page: responsive ---------- */
@media (max-width: 1024px) {
	.bl-intro {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.bl-equation {
		max-width: 560px;
	}

	.bl-prebiotics {
		flex-direction: column;
		align-items: flex-start;
	}

	/* blend list becomes a scrollable row of chips above the table */
	.bl-explorer {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.bl-tabs {
		position: static;
		display: flex;
		grid-template-columns: none;
		max-height: none;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 4px 2px 10px;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}

	.bl-tabs li {
		flex: none;
		scroll-snap-align: start;
	}

	.bl-tab {
		width: auto;
		min-width: 112px;
	}
}

@media (max-width: 560px) {
	.bl-prebiotics {
		margin-top: 40px;
		padding: 22px 18px;
	}

	.bl-eq-item {
		padding: 18px 20px;
	}

	.bl-panel-head {
		padding: 20px 18px;
	}

	.bl-stats {
		width: 100%;
	}

	.bl-stats li {
		flex: 1;
		min-width: 0;
		padding: 8px 6px;
	}

	.bl-stats strong {
		font-size: 13px;
		white-space: normal;
	}

	.bl-table {
		font-size: 14px;
	}

	.bl-table thead th,
	.bl-table td {
		padding: 10px 14px;
	}

	.bl-table thead th:last-child,
	.bl-table td:last-child {
		width: 40%;
	}

	.bl-table .bl-total {
		font-size: 15px;
	}
}

/* ==========================================================================
   NUTRACEUTICALS PAGE
   (reuses the intro "equation", product picker and panel styles from the
    PROBIOTIC BLENDS block, and the spec table from the ENZYMES block)
   ========================================================================== */

.nt-benefits-title {
	font-size: 18px;
	margin: 26px 0 0;
}

/* single-column product list (names are longer than blend codes) */
.nt-explorer {
	grid-template-columns: 300px 1fr;
}

.nt-tabs {
	grid-template-columns: 1fr;
	position: static;
	max-height: none;
}

.nt-tabs .bl-tab strong {
	font-size: 15px;
	line-height: 1.3;
}

.nt-tabs .bl-tab em {
	font-style: italic;
}

.nt-tabs .bl-tab span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* panel header: name + quick facts on the left, product photo on the right */
.nt-head {
	display: grid;
	grid-template-columns: 1fr 180px;
	gap: 24px;
	align-items: center;
	padding: 28px;
	border-bottom: 3px solid var(--green);
}

.nt-head h3 {
	font-size: clamp(24px, 2.8vw, 32px);
	margin: 2px 0 16px;
}

.nt-head .bl-stats {
	flex-wrap: wrap;
}

.nt-head .bl-stats strong {
	white-space: normal;
}

.nt-img {
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--soft);
	border: 1px solid var(--line);
}

.nt-img img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	font-size: 0;
	color: transparent;
}

.nt-body {
	padding: 28px;
}

.nt-text p {
	font-size: 15.5px;
	color: var(--ink);
}

.nt-sub {
	font-size: 17px;
	margin: 26px 0 12px;
}

/* two-column spec table inside the panel */
.nt-spec {
	width: 100%;
	max-width: 640px;
	border-collapse: collapse;
	font-size: 15px;
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
}

.nt-spec th,
.nt-spec td {
	padding: 11px 16px;
	text-align: left;
	border-top: 1px solid var(--line);
	vertical-align: top;
}

.nt-spec tr:first-child th,
.nt-spec tr:first-child td {
	border-top: 0;
}

.nt-spec th {
	width: 42%;
	background: var(--green-soft);
	font-family: var(--font-head);
	font-weight: 700;
	color: var(--navy);
}

.nt-spec td {
	font-weight: 600;
	color: var(--navy);
}

/* extra info (identification, grade, packaging...) as small boxes */
.nt-boxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin-top: 28px;
}

.nt-box {
	padding: 20px 22px;
	background: var(--soft);
	border-radius: 10px;
	border-top: 3px solid var(--green);
}

.nt-box h4 {
	font-size: 15px;
	letter-spacing: .02em;
	margin-bottom: 12px;
}

.nt-box ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nt-box li {
	display: flex;
	gap: 8px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ink);
}

.nt-box li svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--green-dark);
}

.nt-seo {
	margin: 40px 0 0;
	font-size: 13px;
	line-height: 1.7;
	text-align: center;
}

/* product names in the spec table */
.en-table tbody th em {
	font-style: italic;
}

/* ---------- Nutraceuticals page: responsive ---------- */
@media (max-width: 1024px) {
	.nt-explorer {
		grid-template-columns: 1fr;
	}

	.nt-tabs .bl-tab {
		min-width: 180px;
		max-width: 240px;
	}
}

@media (max-width: 768px) {
	.nt-boxes {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.nt-head {
		grid-template-columns: 1fr 96px;
		gap: 14px;
		padding: 20px 18px;
		align-items: start;
	}

	.nt-head .bl-stats {
		grid-column: 1 / -1;
	}

	.nt-head-copy {
		display: contents;
	}

	.nt-head-copy > .bl-kicker,
	.nt-head-copy > h3 {
		grid-column: 1;
	}

	.nt-img {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	.nt-head h3 {
		margin-bottom: 0;
	}

	.nt-body {
		padding: 20px 18px;
	}

	.nt-text p {
		font-size: 15px;
	}

	.nt-spec {
		font-size: 14px;
	}

	.nt-spec th,
	.nt-spec td {
		padding: 10px 12px;
	}
}

/* ==========================================================================
   API PAGE
   (intro, search, card grid and symbol tiles come from the ENZYMES block)
   ========================================================================== */

/* category filter chips */
.api-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -12px 0 28px;
}

.api-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border-radius: 30px;
	border: 1px solid var(--line);
	background: var(--white);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.api-chip span {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 20px;
	background: var(--green-soft);
	color: var(--green-dark);
	font-size: 12px;
	text-align: center;
}

.api-chip:hover {
	border-color: var(--green);
}

.api-chip.is-active {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.api-chip.is-active span {
	background: rgba(255, 255, 255, .15);
	color: #c7d98f;
}

/* small category label above the product name */
.api-cat {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--green-dark);
	margin-bottom: 4px;
}

.api-card h3 em {
	font-style: italic;
}

/* 4-letter symbols (SAMe, UDCA, LCLT) need a smaller font */
.en-tile--sm {
	font-size: 16px;
}

/* phones: chips scroll sideways instead of wrapping into many rows */
@media (max-width: 560px) {
	.api-filters {
		flex-wrap: nowrap;
		overflow-x: auto;
		margin: -8px -16px 20px;
		padding: 0 16px 6px;
		-webkit-overflow-scrolling: touch;
	}

	.api-chip {
		flex: none;
		font-size: 13px;
		padding: 8px 14px;
	}

	.en-tile--sm {
		font-size: 13px;
	}
}

/* tiles show only the symbol (no small number) */
.en-tile small {
	display: none;
}

/* ==========================================================================
   HOME PAGE: product cards, counters, bento grid, certifications,
   process, manufacturing sites, industries and CTA
   (header, footer, hero, about, industries and CTA use the rules above)
   ========================================================================== */
.fp-home {
    --serif: "Playfair Display", Georgia, "Times New Roman", serif;
    --navy-deep: #081a30;
    --cream: #f5f3ee;
    --bg-soft: #f4f6f1;
}

/* italic serif word inside headings, like "backed by science" */
.fp-home .hm-accent {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0;
}

.hm-head {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}

.hm-head h2 {
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 18px;
}

.hm-head p {
    font-size: 17px;
    margin: 0 auto;
    max-width: 620px;
}

/* --------------------------------------------------------------------------
   1. COUNTERS (rings)
   -------------------------------------------------------------------------- */
.hm-count {
    position: relative;
    overflow: hidden;
    background: var(--white);
}

/* dotted world map behind the rings */
.hm-count::before {
    content: "";
    position: absolute;
    inset: 40px 0 0;
    background: radial-gradient(circle, var(--navy) 1.6px, transparent 2px) 0 0 / 11px 11px;
    -webkit-mask: url("../images/world-map.svg") center / min(1100px, 100%) auto no-repeat;
    mask: url("../images/world-map.svg") center / min(1100px, 100%) auto no-repeat;
    opacity: .14;
    pointer-events: none;
}

.hm-count .fp-container {
    position: relative;
}

.hm-rings {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-ring {
    position: relative;
    flex: 0 0 200px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hm-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hm-ring-track {
    fill: rgba(255, 255, 255, .85);
    stroke: #e7ecdc;
    stroke-width: 9;
}

.hm-ring-bar {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: var(--off);
    transition: stroke-dashoffset 1.9s cubic-bezier(.2, .7, .2, 1);
}

/* JS hides the bars first, then draws them when the section scrolls into view */
.hm-count--anim .hm-ring-bar {
    stroke-dashoffset: 100;
}

.hm-count--anim.is-in .hm-ring-bar {
    stroke-dashoffset: var(--off);
}

.hm-ring:nth-child(2) .hm-ring-bar { transition-delay: .12s; }
.hm-ring:nth-child(3) .hm-ring-bar { transition-delay: .24s; }
.hm-ring:nth-child(4) .hm-ring-bar { transition-delay: .36s; }
.hm-ring:nth-child(5) .hm-ring-bar { transition-delay: .48s; }

.hm-ring-num {
    position: relative;
    font-family: var(--serif);
    font-size: 50px;
    font-weight: 800;
    line-height: 1;
    color: var(--green);
    font-variant-numeric: lining-nums tabular-nums;
}

.hm-ring-label {
    position: relative;
    margin-top: 8px;
    max-width: 130px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.35;
    color: var(--navy);
}

/* --------------------------------------------------------------------------
   2. PRODUCT RANGE (expanding cards)
   -------------------------------------------------------------------------- */
.hm-range {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 85% 0%, rgba(141, 164, 68, .16) 0%, transparent 45%),
        radial-gradient(ellipse at 0% 100%, rgba(28, 75, 125, .55) 0%, transparent 55%),
        var(--navy-deep);
}

/* soft curved lines in the background */
.hm-range::before {
    content: "";
    position: absolute;
    width: 1400px;
    height: 1400px;
    right: -700px;
    top: -900px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 140px rgba(255, 255, 255, 0), 0 0 0 141px rgba(255, 255, 255, .04);
    pointer-events: none;
}

.hm-range .fp-container {
    position: relative;
}

.hm-range .eyebrow,
.hm-bento-sec .eyebrow {
    justify-content: center;
}

.hm-head .eyebrow {
    justify-content: center;
}

.hm-head .eyebrow::after {
    content: "";
    width: 28px;
    height: 2px;
    background: var(--green);
}

.hm-xcards {
    display: flex;
    gap: 12px;
    height: 480px;
}

.hm-xcard {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 14px;
    overflow: hidden;
    isolation: isolate;
    background: var(--navy-2);
    transition: flex-grow .6s cubic-bezier(.2, .7, .2, 1);
}

.hm-xcard.is-active {
    flex-grow: 3.4;
}

/* photo + dark fade at the bottom so text is readable */
.hm-xcard::before,
.hm-xcard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hm-xcard::before {
    background: var(--img) center / cover no-repeat;
    transition: transform .8s ease;
}

.hm-xcard::after {
    background: linear-gradient(180deg, rgba(8, 26, 48, .1) 25%, rgba(8, 26, 48, .55) 60%, rgba(8, 26, 48, .92) 100%);
}

.hm-xcard.is-active::before {
    transform: scale(1.04);
}

/* invisible button over the whole card: click / tap / keyboard opens it */
.hm-xcard-btn {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 14px;
}

.hm-xcard.is-active .hm-xcard-btn {
    cursor: default;
}

.hm-xcard-btn:focus-visible {
    outline: 3px solid #c7d98f;
    outline-offset: -3px;
}

.hm-xdot {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.hm-xdot::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--dot);
}

.hm-xcard-body {
    position: absolute;
    left: 16px;
    right: 14px;
    bottom: 22px;
    pointer-events: none;
}

.hm-xcard.is-active .hm-xcard-body {
    left: 24px;
    right: 24px;
}

.hm-xcard h3 {
    color: var(--white);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 4px;
}

.hm-xmeta {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
}

.hm-xmore {
    width: 360px;
    max-width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, max-height .5s ease, visibility .3s;
}

.hm-xcard.is-active .hm-xmore {
    max-height: 260px;
    opacity: 1;
    visibility: visible;
    transition-delay: .25s;
}

.hm-xcard.is-active h3 {
    font-size: 26px;
}

/* closed cards (desktop): title runs upwards so long names never get cut */
.hm-xcard:not(.is-active) h3 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    font-size: 20px;
    margin: 0;
}

.hm-xcard:not(.is-active) .hm-xmeta {
    display: none;
}

.hm-xmore p {
    margin: 12px 0 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .88);
}

.hm-xmore p em {
    color: var(--white);
}

.hm-xlink {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    padding: 11px 22px;
    font-size: 13px;
}

.hm-range-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 28px;
    margin-top: 40px;
    text-align: center;
}

.hm-range .hm-head h2 {
    color: var(--white);
}

.hm-range .hm-head p {
    color: rgba(255, 255, 255, .78);
}

.hm-range .eyebrow {
    color: #c7d98f;
}

.hm-range .eyebrow::before,
.hm-range .hm-head .eyebrow::after {
    background: #c7d98f;
}

.hm-range-foot p {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-size: 15px;
}

.hm-range-foot a:not(.fp-btn) {
    color: #c7d98f;
    font-weight: 600;
}

.hm-range-foot a:not(.fp-btn):hover {
    color: var(--white);
}

/* --------------------------------------------------------------------------
   3. BENTO GRID (why Fido Pharma)
   -------------------------------------------------------------------------- */
.hm-bento-sec {
    background: var(--cream);
}

.hm-bento-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px 64px;
    align-items: end;
    margin-bottom: 44px;
}

.hm-bento-head h2 {
    font-size: clamp(30px, 3.8vw, 46px);
    font-weight: 600;
    line-height: 1.15;
    margin: 0;
}

.hm-bento-head p {
    margin: 0;
    font-size: 16px;
    color: var(--ink);
}

.hm-bento-sec .eyebrow {
    justify-content: flex-start;
}

.hm-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 74px);
    gap: 16px;
}

.hm-tile {
    position: relative;
    display: block;
    overflow: hidden;
    isolation: isolate;
    border-radius: 12px;
    padding: 24px;
    color: var(--white);
    transition: transform .3s ease, box-shadow .3s ease;
}

.hm-tile h3 {
    position: relative;
    z-index: 2;
    max-width: 280px;
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.hm-tile-go {
    position: absolute;
    z-index: 2;
    right: 18px;
    bottom: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    color: var(--white);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background .25s ease, transform .25s ease;
}

.hm-tile-go svg {
    width: 16px;
    height: 16px;
}

.hm-tile--a { grid-column: 1; grid-row: 1 / span 3; }
.hm-tile--b { grid-column: 2; grid-row: 1 / span 4; }
.hm-tile--c { grid-column: 3; grid-row: 1 / span 3; }
.hm-tile--d { grid-column: 1; grid-row: 4 / span 3; }
.hm-tile--e { grid-column: 2; grid-row: 5 / span 2; }
.hm-tile--f { grid-column: 3; grid-row: 4 / span 3; }

/* photo tiles */
.hm-tile--photo {
    background: var(--navy);
}

.hm-tile--photo::before,
.hm-tile--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hm-tile--photo::before {
    background: var(--img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .7s ease;
}


/* bento tiles: no hover effect, text keeps its own colour */
.hm-tile,
.hm-tile:hover,
.hm-tile:focus {
    color: var(--white);
    transform: none;
    box-shadow: none;
}

.hm-tile--e,
.hm-tile--e:hover,
.hm-tile--e:focus {
    color: var(--navy);
}

/* green arrow button stays as it is (no change on hover) */
.hm-tile-go {
    background: var(--green);
}

/* animated tiles: the moving part sits in .hm-vis */
.hm-vis {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* --- b. open capsule, strain pills drop out --- */
.hm-tile--b {
    --cap-top: 45%;         /* where the capsule sits */
    --t0: 47%;              /* pills start here ... */
    --t1: 80%;              /* ... and are gone by here */
    background:
        radial-gradient(circle at 50% 42%, rgba(199, 217, 143, .45) 0%, transparent 55%),
        linear-gradient(160deg, #56702a 0%, #6f8631 45%, #8da444 100%);
}

.hm-tile--b h3 {
    max-width: none;
    text-align: center;
    margin: 0 auto;
}

/* the two halves form a "V"; the open ends point down to the middle */
.hm-tile--b .hm-ocap {
    position: absolute;
    left: 50%;
    top: var(--cap-top);
    width: 0;
    height: 0;
    animation: hmOcapRock 5s ease-in-out infinite;
}

.hm-tile--b .hm-ocap-half {
    position: absolute;
    top: -24px;
    width: 104px;
    height: 48px;
    overflow: hidden;
}

/* left half: clear "glass" with a few granules inside */
.hm-tile--b .hm-ocap-half--l {
    right: 10px;
    border-radius: 24px 5px 5px 24px;
    transform-origin: right center;
    transform: rotate(26deg);
    background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .22) 55%, rgba(255, 255, 255, .35) 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75), 0 14px 26px rgba(30, 45, 10, .22);
}

.hm-tile--b .hm-ocap-half--l i {
    position: absolute;
    bottom: 7px;
    width: 11px;
    height: 6px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .9);
}

.hm-tile--b .hm-ocap-half--l i:nth-child(1) { left: 22px; transform: rotate(-20deg); }
.hm-tile--b .hm-ocap-half--l i:nth-child(2) { left: 40px; bottom: 11px; background: #c7d98f; }
.hm-tile--b .hm-ocap-half--l i:nth-child(3) { left: 56px; transform: rotate(25deg); }

/* right half: solid white */
.hm-tile--b .hm-ocap-half--r {
    left: 10px;
    border-radius: 5px 24px 24px 5px;
    transform-origin: left center;
    transform: rotate(-26deg);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(30, 45, 10, .14) 100%),
        linear-gradient(90deg, #eef1e6 0%, #ffffff 55%, #f2f4ec 100%);
    box-shadow: 0 14px 26px rgba(30, 45, 10, .25);
}

/* shine along each half */
.hm-tile--b .hm-ocap-half::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 7px;
    height: 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, .7);
}

/* the hollow open end of each half */
.hm-tile--b .hm-ocap-half::after {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 14px;
    border-radius: 50%;
}

.hm-tile--b .hm-ocap-half--l::after {
    right: -5px;
    background: radial-gradient(ellipse at 40% 50%, rgba(86, 112, 42, .55) 0%, rgba(255, 255, 255, .4) 100%);
}

.hm-tile--b .hm-ocap-half--r::after {
    left: -5px;
    background: radial-gradient(ellipse at 60% 50%, #c9d0bd 0%, #e6eadc 60%, #ffffff 100%);
}

@keyframes hmOcapRock {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(3deg) translateY(-6px); }
}

/* pills fall from the gap between the halves and fade away before the bottom line */
.hm-tile--b .hm-drops {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hm-tile--b .hm-drop,
.hm-tile--b .hm-grain {
    position: absolute;
    left: 50%;
    top: var(--t0);
    opacity: 0;
    animation: hmDrop 7.5s cubic-bezier(.45, 0, .85, .6) infinite;
    animation-delay: calc(var(--i) * -1.5s);
}

.hm-tile--b .hm-drop {
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 8px 18px rgba(30, 45, 10, .2);
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.hm-tile--b .hm-drop::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c, var(--green));
}

/* tiny powder grains that fall with the pills */
.hm-tile--b .hm-grain {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
    --r: 0deg;
}

/* each pill: pops out of the capsule, falls, fades out (then waits for its next turn) */
@keyframes hmDrop {
    0%   { top: var(--t0); opacity: 0; transform: translateX(-50%) scale(.4) rotate(0deg); }
    6%   { opacity: 1; transform: translateX(calc(-50% + var(--x) * .2)) scale(1) rotate(0deg); }
    36%  { opacity: 1; }
    48%  { top: var(--t1); opacity: 0; transform: translateX(calc(-50% + var(--x))) scale(.95) rotate(var(--r)); }
    100% { top: var(--t1); opacity: 0; transform: translateX(calc(-50% + var(--x))) scale(.95) rotate(var(--r)); }
}

/* small tiles (mobile): capsule a bit lower and smaller so it clears the heading */
@media (max-width: 768px) {
    .hm-tile--b {
        --cap-top: 54%;
        --t0: 56%;
        --t1: 82%;
    }

    .hm-tile--b .hm-ocap-half {
        width: 86px;
        height: 40px;
        top: -20px;
    }
}

.hm-stack-note {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 3;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

@media (prefers-reduced-motion: reduce) {

    .hm-tile--b .hm-ocap,
    .hm-tile--b .hm-drop,
    .hm-tile--b .hm-grain {
        animation: none;
    }

    .hm-tile--b .hm-drop:nth-child(1) { opacity: 1; top: 58%; transform: translateX(-50%); }
    .hm-tile--b .hm-drop:nth-child(2) { opacity: 1; top: 70%; transform: translateX(-50%); }
}

/* --- c. rotating globe --- */
.hm-tile--c {
    background: linear-gradient(180deg, #1d8fa3 0%, #46aebd 50%, #c8e7e8 100%);
}

.hm-globe {
    position: absolute;
    left: 50%;
    bottom: -64px;
    width: 210px;
    height: 210px;
    margin-left: -105px;
}

.hm-globe svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hm-globe ellipse,
.hm-globe circle {
    fill: none;
    stroke: rgba(12, 35, 64, .45);
    stroke-width: 1;
}

.hm-globe .hm-globe-out {
    stroke: rgba(12, 35, 64, .6);
    stroke-width: 1.4;
    fill: rgba(255, 255, 255, .08);
}

.hm-globe .hm-mer {
    stroke-dasharray: 3 3;
    transform-box: fill-box;
    transform-origin: center;
    animation: hmSpin 6s linear infinite;
}

.hm-globe .hm-mer:nth-of-type(2) { animation-delay: -1.5s; }
.hm-globe .hm-mer:nth-of-type(3) { animation-delay: -3s; }
.hm-globe .hm-mer:nth-of-type(4) { animation-delay: -4.5s; }

/* a meridian turning round the globe = an ellipse that narrows and widens */
@keyframes hmSpin {
    0%   { transform: scaleX(1); }
    50%  { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

.hm-flag {
    position: absolute;
    z-index: 2;
    padding: 5px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--navy);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 6px 14px rgba(12, 35, 64, .12);
    opacity: 0;
    animation: hmFlag 9s ease-in-out infinite;
}

.hm-flag::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--green);
    vertical-align: 1px;
}

.hm-flag--1 { left: 12%; bottom: 96px; }
.hm-flag--2 { right: 10%; bottom: 112px; animation-delay: -3s; }
.hm-flag--3 { left: 30%; bottom: 30px;  animation-delay: -6s; }
.hm-flag--4 { right: 16%; bottom: 46px; animation-delay: -1.5s; }
.hm-flag--5 { left: 20%; bottom: 140px; animation-delay: -4.5s; }

@keyframes hmFlag {
    0%, 100% { opacity: 0; transform: translateY(6px); }
    10%, 40% { opacity: 1; transform: none; }
    50%      { opacity: 0; transform: translateY(-6px); }
}

/* --- d. certifications: seals verified one after another --- */
.hm-tile--d {
    background:
        radial-gradient(circle at 85% 15%, rgba(141, 164, 68, .22) 0%, transparent 45%),
        linear-gradient(150deg, #0c2340 0%, #133a63 100%);
}

/* big faint shield behind the content */
.hm-tile--d .hm-shield {
    position: absolute;
    right: -24px;
    top: 34px;
    width: 170px;
    height: 170px;
    color: #c7d98f;
    opacity: .08;
}

.hm-tile--d .hm-seals {
    position: absolute;
    left: 24px;
    bottom: 26px;
    display: flex;
    gap: 7px;
}

.hm-tile--d .hm-seal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(199, 217, 143, .35);
    color: #c7d98f;
    line-height: 1.05;
    animation: hmSeal 7.5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.hm-tile--d .hm-seal:nth-child(2) { --d: 1.5s; }
.hm-tile--d .hm-seal:nth-child(3) { --d: 3s; }
.hm-tile--d .hm-seal:nth-child(4) { --d: 4.5s; }
.hm-tile--d .hm-seal:nth-child(5) { --d: 6s; }

/* dashed ring that slowly turns, like a stamp */
.hm-tile--d .hm-seal::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    border: 1px dashed rgba(199, 217, 143, .45);
    animation: hmSealSpin 14s linear infinite;
}

/* small green tick that pops up when the seal is "verified" */
.hm-tile--d .hm-seal::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #0c2340;
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 10px no-repeat;
    transform: scale(0);
    animation: hmSealTick 7.5s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

.hm-tile--d .hm-seal b {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
}

.hm-tile--d .hm-seal small {
    font-size: 8.5px;
    font-weight: 600;
    opacity: .85;
}

@keyframes hmSeal {
    0%, 100% { background: rgba(255, 255, 255, .06); color: #c7d98f; transform: none; box-shadow: none; }
    4%, 16%  { background: var(--green); color: #fff; transform: translateY(-6px) scale(1.08); box-shadow: 0 0 0 6px rgba(141, 164, 68, .18), 0 10px 22px rgba(0, 0, 0, .3); }
    22%      { background: rgba(255, 255, 255, .06); color: #c7d98f; transform: none; box-shadow: none; }
}

@keyframes hmSealTick {
    0%, 2%, 22%, 100% { transform: scale(0); }
    6%, 16%           { transform: scale(1); }
}

@keyframes hmSealSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 560px) {
    .hm-tile--d .hm-seals {
        left: 20px;
        bottom: 22px;
        gap: 6px;
    }

    .hm-tile--d .hm-seal {
        width: 46px;
        height: 46px;
    }

    .hm-tile--d .hm-seal b {
        font-size: 9.5px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hm-tile--d .hm-seal,
    .hm-tile--d .hm-seal::before,
    .hm-tile--d .hm-seal::after {
        animation: none;
    }
}

/* --- e. certificate of analysis --- */
.hm-tile--e {
    background: linear-gradient(140deg, #d7ebef 0%, #a9d3dc 55%, #e6efd2 100%);
    color: var(--navy);
}

.hm-tile--e .hm-tile-go {
    display: none;
}

.hm-tile--e h3 {
    max-width: 52%;
    font-size: 17px;
}

.hm-coa {
    position: absolute;
    right: 16px;
    bottom: -18px;
    width: 156px;
    padding: 14px 14px 18px;
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 14px 30px rgba(12, 35, 64, .18);
    transform: rotate(-4deg);
}

.hm-coa-title {
    display: block;
    margin-bottom: 10px;
    padding-right: 58px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
}

.hm-coa-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.hm-coa-row span {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #edf0f4;
    overflow: hidden;
}

.hm-coa-row span::after {
    content: "";
    display: block;
    height: 100%;
    width: var(--w);
    border-radius: 3px;
    background: var(--navy-3);
    transform-origin: left;
    animation: hmBar 6s ease infinite;
    animation-delay: var(--t);
}

.hm-coa-row i {
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat;
    animation: hmTick 6s ease infinite;
    animation-delay: var(--t);
}

.hm-coa-row:nth-of-type(1) { --t: .3s; --w: 82%; }
.hm-coa-row:nth-of-type(2) { --t: .9s; --w: 64%; }
.hm-coa-row:nth-of-type(3) { --t: 1.5s; --w: 74%; }
.hm-coa-row:nth-of-type(4) { --t: 2.1s; --w: 56%; }

@keyframes hmBar {
    0%       { transform: scaleX(0); }
    8%, 82%  { transform: scaleX(1); }
    92%, 100% { transform: scaleX(0); }
}

@keyframes hmTick {
    0%, 6%    { transform: scale(0); }
    11%       { transform: scale(1.25); }
    15%, 82%  { transform: scale(1); }
    92%, 100% { transform: scale(0); }
}

.hm-coa-stamp {
    position: absolute;
    right: 10px;
    top: 8px;
    padding: 2px 7px;
    border: 2px solid var(--green-dark);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--green-dark);
    transform: rotate(8deg) scale(0);
    animation: hmStamp 6s ease infinite;
}

@keyframes hmStamp {
    0%, 45%   { transform: rotate(8deg) scale(0); opacity: 0; }
    50%       { transform: rotate(8deg) scale(1.3); opacity: 1; }
    54%, 82%  { transform: rotate(8deg) scale(1); opacity: 1; }
    92%, 100% { transform: rotate(8deg) scale(0); opacity: 0; }
}

/* --------------------------------------------------------------------------
   4. Vision / Mission / Values (no numbers on the cards)
   -------------------------------------------------------------------------- */
.fp-home .pillar-num {
    display: none;
}

/* --------------------------------------------------------------------------
   5. QUALITY & CERTIFICATIONS
   -------------------------------------------------------------------------- */
.hm-certs {
    background: var(--white);
    border-top: 1px solid var(--line);
}

.hm-certs-inner {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    align-items: center;
}

.hm-certs-copy h2 {
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 600;
    line-height: 1.18;
}

.hm-cert-list {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

/* 5 cards: three on the first row, two wider ones below */
.hm-cert-list li {
    grid-column: span 2;
}

.hm-cert-list li:nth-child(n+4) {
    grid-column: span 3;
}

.hm-cert-list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 22px 20px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.hm-cert-list li:hover {
    border-color: rgba(141, 164, 68, .6);
    box-shadow: var(--shadow-sm);
}

.hm-cert-ico {
    width: 44px;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green-soft);
    color: var(--green-dark);
}

.hm-cert-ico svg {
    width: 22px;
    height: 22px;
}

.hm-cert-list strong {
    font-family: var(--font-head);
    font-size: 18px;
    color: var(--navy);
}

.hm-cert-list span:not(.hm-cert-ico) {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   6. HOW WE WORK (process): cards + glowing animated icons
   -------------------------------------------------------------------------- */
.hm-process {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 20%, rgba(141, 164, 68, .10) 0%, transparent 40%),
        radial-gradient(circle at 88% 85%, rgba(28, 75, 125, .08) 0%, transparent 45%),
        var(--bg-soft);
}

.hm-process .hm-steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 40px 0 0;
    list-style: none;
}

@keyframes hmFlow {
    from { background-position: -30% 0; }
    to   { background-position: 130% 0; }
}

/* each step is a card; the icon sits on its top edge */
.hm-process .hm-step {
    position: relative;
    text-align: center;
    padding: 58px 24px 30px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(12, 35, 64, .05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.hm-process .hm-step:hover {
    transform: translateY(-6px);
    border-color: rgba(141, 164, 68, .55);
    box-shadow: 0 18px 40px rgba(12, 35, 64, .12);
}

.hm-process .hm-step-ico {
    position: absolute;
    z-index: 2;
    top: -40px;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 0 0 -40px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--navy-3) 0%, var(--navy) 100%);
    color: #c7d98f;
    box-shadow: 0 0 0 7px var(--white), 0 12px 26px rgba(12, 35, 64, .28);
    transition: background .3s ease, color .3s ease, transform .3s ease;
}

/* rotating green arc around the icon */
.hm-process .hm-step-ico::before {
    content: "";
    position: absolute;
    inset: -11px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg 220deg, rgba(141, 164, 68, .2) 260deg, var(--green) 345deg, #c7d98f 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: hmSpinRing 3.2s linear infinite;
}

/* soft glow pulse */
.hm-process .hm-step-ico::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(141, 164, 68, .55);
    animation: hmGlow 2.8s ease-out infinite;
}

.hm-process .hm-step:nth-child(2) .hm-step-ico::before { animation-delay: -.8s; }
.hm-process .hm-step:nth-child(3) .hm-step-ico::before { animation-delay: -1.6s; }
.hm-process .hm-step:nth-child(4) .hm-step-ico::before { animation-delay: -2.4s; }
.hm-process .hm-step:nth-child(2) .hm-step-ico::after { animation-delay: .7s; }
.hm-process .hm-step:nth-child(3) .hm-step-ico::after { animation-delay: 1.4s; }
.hm-process .hm-step:nth-child(4) .hm-step-ico::after { animation-delay: 2.1s; }

@keyframes hmSpinRing {
    to { transform: rotate(360deg); }
}

@keyframes hmGlow {
    0%   { box-shadow: 0 0 0 0 rgba(141, 164, 68, .55); }
    70%  { box-shadow: 0 0 0 22px rgba(141, 164, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(141, 164, 68, 0); }
}

.hm-process .hm-step-ico svg {
    position: relative;
    width: 32px;
    height: 32px;
    transition: transform .3s ease;
}

.hm-process .hm-step:hover .hm-step-ico {
    background: linear-gradient(145deg, #a3bb55 0%, var(--green-dark) 100%);
    color: var(--white);
    border-color: transparent;
}

.hm-process .hm-step:hover .hm-step-ico svg {
    transform: scale(1.1) rotate(-6deg);
}

.hm-process .hm-step h3 {
    font-size: 18px;
    margin: 0 0 10px;
}

.hm-process .hm-step p {
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0;
}

/* tablets: two per row */
@media (max-width: 1024px) {
    .hm-process .hm-steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 64px;
    }
}

/* phones: icon on the left inside the card */
@media (max-width: 560px) {
    .hm-process .hm-steps {
        grid-template-columns: 1fr;
        row-gap: 14px;
        padding-top: 0;
    }

    .hm-process .hm-step {
        display: grid;
        grid-template-columns: 60px 1fr;
        column-gap: 16px;
        align-items: start;
        text-align: left;
        padding: 20px 18px 20px 22px;
    }

    .hm-process .hm-step:hover {
        transform: none;
    }

    .hm-process .hm-step-ico {
        position: relative;
        top: auto;
        left: auto;
        grid-row: 1 / span 2;
        width: 56px;
        height: 56px;
        margin: 6px 0 0 4px;
        box-shadow: 0 8px 18px rgba(12, 35, 64, .22);
    }

    .hm-process .hm-step-ico::before {
        inset: -7px;
    }

    .hm-process .hm-step-ico svg {
        width: 24px;
        height: 24px;
    }

    .hm-process .hm-step h3 {
        margin: 4px 0 6px;
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hm-process .hm-step-ico::before,
    .hm-process .hm-step-ico::after {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   8. INDUSTRIES: heading on the left, coloured tiles on the right
   -------------------------------------------------------------------------- */
.hm-ind2 {
    background: var(--white);
}

.hm-ind2 .hm-ind2-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    align-items: center;
}

.hm-ind2 .hm-ind2-intro h2 {
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    margin-bottom: 18px;
}

.hm-ind2 .hm-ind2-intro p {
    font-size: 16.5px;
    margin-bottom: 28px;
}

.hm-ind2 .hm-ind2-tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

/* every tile has its own soft tint */
.hm-ind2 .hm-ind2-tile {
    --tint: #eef3e1;
    --deep: var(--green-dark);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 28px 26px 26px;
    border-radius: 18px;
    background: var(--tint);
    transition: transform .3s ease, box-shadow .3s ease;
}

.hm-ind2 .hm-ind2-tile--pharma { --tint: #e8eff8; --deep: #1c4b7d; }
.hm-ind2 .hm-ind2-tile--chem   { --tint: #e4f2f1; --deep: #1d7f8c; }
.hm-ind2 .hm-ind2-tile--food   { --tint: #eef3e1; --deep: #6f8631; }
.hm-ind2 .hm-ind2-tile--cosm   { --tint: #f6eee6; --deep: #a0602e; }

/* second column sits a little lower: gives the grid a staggered look */
.hm-ind2 .hm-ind2-tile:nth-child(even) {
    transform: translateY(28px);
}

.hm-ind2 .hm-ind2-tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(12, 35, 64, .12);
}

.hm-ind2 .hm-ind2-tile:nth-child(even):hover {
    transform: translateY(22px);
}

.hm-ind2 .hm-ind2-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: var(--white);
    color: var(--deep);
    box-shadow: 0 8px 18px rgba(12, 35, 64, .08);
    transition: background .3s ease, color .3s ease;
}

.hm-ind2 .hm-ind2-tile:hover .hm-ind2-ico {
    background: var(--deep);
    color: var(--white);
}

.hm-ind2 .hm-ind2-ico svg {
    width: 26px;
    height: 26px;
}

.hm-ind2 .hm-ind2-tile h3 {
    font-size: 20px;
    margin: 0 0 8px;
}

.hm-ind2 .hm-ind2-tile p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 16px;
}

.hm-ind2 .hm-ind2-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-ind2 .hm-ind2-tags li {
    padding: 4px 11px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(12, 35, 64, .08);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--deep);
}

/* large faded icon in the corner */
.hm-ind2 .hm-ind2-mark {
    position: absolute;
    z-index: -1;
    right: -18px;
    bottom: -18px;
    width: 130px;
    height: 130px;
    color: var(--deep);
    opacity: .09;
    transition: transform .6s ease, opacity .3s ease;
}

.hm-ind2 .hm-ind2-tile:hover .hm-ind2-mark {
    transform: rotate(-12deg) scale(1.08);
    opacity: .14;
}

@media (max-width: 1024px) {
    .hm-ind2 .hm-ind2-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hm-ind2 .hm-ind2-intro {
        max-width: 640px;
    }
}

@media (max-width: 560px) {
    .hm-ind2 .hm-ind2-tiles {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hm-ind2 .hm-ind2-tile,
    .hm-ind2 .hm-ind2-tile:nth-child(even),
    .hm-ind2 .hm-ind2-tile:hover,
    .hm-ind2 .hm-ind2-tile:nth-child(even):hover {
        transform: none;
    }

    .hm-ind2 .hm-ind2-tile {
        padding: 22px 20px;
    }

    .hm-ind2 .hm-ind2-intro .fp-btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   9. CTA (simple)
   -------------------------------------------------------------------------- */
.hm-cta {
    padding: 72px 0 88px;
    background: var(--white);
}

.hm-cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    padding: 44px 48px;
    border-radius: 14px;
    background: var(--green-soft);
    border: 1px solid rgba(141, 164, 68, .3);
}

.hm-cta-copy h2 {
    font-size: clamp(24px, 2.8vw, 32px);
    font-weight: 600;
    margin-bottom: 8px;
}

.hm-cta-copy p {
    margin: 0;
    max-width: 560px;
    color: var(--ink);
}

.hm-cta-actions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .hm-ring {
        flex-basis: 180px;
    }

    .hm-ring-num {
        font-size: 44px;
    }
}

@media (max-width: 1024px) {
    .hm-bento-head {
        grid-template-columns: 1fr;
    }

    .hm-certs-inner,
    .hm-sites-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hm-sites-media {
        max-width: 620px;
        aspect-ratio: 16 / 10;
    }

    .hm-steps {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 40px;
    }

    .hm-steps::before {
        display: none;
    }

    .hm-ind-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .hm-bento {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        grid-auto-rows: 290px;
    }

    .hm-tile--a,
    .hm-tile--b,
    .hm-tile--c,
    .hm-tile--d,
    .hm-tile--e,
    .hm-tile--f {
        grid-column: auto;
        grid-row: auto;
    }

    .hm-xcards {
        height: 440px;
    }

    .hm-xcard.is-active {
        flex-grow: 4;
    }

    .hm-xmore {
        width: 320px;
    }
}

/* tablets & phones: product cards stack, the open one grows taller */
@media (max-width: 768px) {
    .hm-head {
        margin-bottom: 40px;
    }

    .hm-rings {
        gap: 18px 14px;
    }

    .hm-ring {
        flex-basis: calc(50% - 14px);
        max-width: 190px;
    }

    .hm-ring-num {
        font-size: 40px;
    }

    .hm-ring-label {
        font-size: 11px;
        max-width: 110px;
        letter-spacing: .05em;
    }

    .hm-xcards {
        flex-direction: column;
        height: auto;
        gap: 10px;
    }

    .hm-xcard {
        flex: none;
        height: 84px;
        transition: height .5s cubic-bezier(.2, .7, .2, 1);
    }

    .hm-xcard.is-active {
        height: 400px;
    }

    .hm-xcard::after {
        background: linear-gradient(90deg, rgba(8, 26, 48, .88) 0%, rgba(8, 26, 48, .55) 100%);
    }

    .hm-xcard.is-active::after {
        background: linear-gradient(180deg, rgba(8, 26, 48, .1) 20%, rgba(8, 26, 48, .6) 55%, rgba(8, 26, 48, .94) 100%);
    }

    .hm-xdot {
        top: 31px;
    }

    .hm-xcard.is-active .hm-xdot {
        top: 18px;
    }

    .hm-xcard-body {
        left: 56px;
        right: 18px;
        bottom: 18px;
    }

    .hm-xcard.is-active .hm-xcard-body {
        left: 20px;
    }

    .hm-xcard h3,
    .hm-xcard:not(.is-active) h3 {
        writing-mode: horizontal-tb;
        transform: none;
        white-space: normal;
        font-size: 18px;
        margin: 0 0 4px;
    }

    .hm-xcard:not(.is-active) .hm-xmeta {
        display: block;
    }

    .hm-xcard.is-active h3 {
        font-size: 23px;
    }

    .hm-xmore {
        width: auto;
    }

    .hm-range-foot {
        flex-direction: column;
    }

    .hm-cert-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .hm-cert-list li,
    .hm-cert-list li:nth-child(n+4) {
        grid-column: auto;
    }

    .hm-cert-list li:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .hm-ring {
        flex-basis: calc(50% - 8px);
    }

    .hm-ring-num {
        font-size: 34px;
    }

    .hm-ring-track,
    .hm-ring-bar {
        stroke-width: 7;
    }

    .hm-count::before {
        inset: 150px -40% 0;
        -webkit-mask-size: 170% auto;
        mask-size: 170% auto;
    }

    .hm-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: 270px;
        gap: 12px;
    }

    .hm-tile {
        padding: 20px;
    }

    .hm-tile h3 {
        font-size: 18px;
    }

    .hm-tile--e h3 {
        max-width: 50%;
        font-size: 16px;
    }

    .hm-range-foot .fp-btn {
        width: 100%;
    }

    .hm-cert-list li {
        padding: 18px 16px;
    }

    .hm-cert-list strong {
        font-size: 16px;
    }

    /* steps: icon on the left, text on the right */
    .hm-steps {
        grid-template-columns: 1fr;
        row-gap: 22px;
    }

    .hm-step {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 16px;
        text-align: left;
        padding: 0;
    }

    .hm-step-ico {
        grid-row: 1 / span 2;
        width: 56px;
        height: 56px;
        margin: 0;
        box-shadow: none;
    }

    .hm-step h3 {
        margin: 4px 0 4px;
    }

    .hm-ind-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hm-ind-card {
        display: grid;
        grid-template-columns: 56px 1fr;
        column-gap: 16px;
        text-align: left;
        padding: 20px;
    }

    .hm-ind-ico {
        grid-row: 1 / span 2;
        width: 56px;
        height: 56px;
        margin: 0;
    }

    .hm-ind-ico svg {
        width: 24px;
        height: 24px;
    }

    .hm-ind-card h3 {
        margin: 4px 0 4px;
        font-size: 17px;
    }

    .hm-cta {
        padding: 48px 0 64px;
    }

    .hm-cta-box {
        padding: 30px 22px;
    }

    .hm-cta-actions,
    .hm-cta-actions .fp-btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hm-flag,
    .hm-coa-row span::after,
    .hm-coa-row i,
    .hm-coa-stamp {
        animation: none !important;
        opacity: 1;
        transform: none;
    }
}

/* hero arrows: middle of the right edge, so the chat bubble (bottom-right) never covers them */
.hero-controls {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    justify-content: flex-end;
    pointer-events: none;
}

.hero-arrows {
    flex-direction: column;
    gap: 10px;
    pointer-events: auto;
}

.hero-arrow {
    width: 48px;
    height: 48px;
    background: rgba(12, 35, 64, .35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

/* tablets: arrows sit under the buttons on the left */
@media (max-width: 1024px) {
    .hero-controls {
        top: auto;
        bottom: 90px;
        transform: none;
        justify-content: flex-start;
    }

    .hero-arrows {
        flex-direction: row;
        margin-left: 0;
    }
}

/* ===== brand capsule: fills the screen; the page holds while the capsule opens ===== */
.hm-capsule {
    --p: 0;                 /* 0 = closed, 1 = open (set by JS) */
    --w: 240px;             /* width of one half */
    --h: 140px;             /* capsule height */
    --d: 320px;             /* how far each half travels */
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    height: 72vh;
    height: 72svh;
    min-height: 400px;
    padding: 30px 0 80px;   /* bottom room for the scroll cue */
    box-sizing: border-box;
    background:
        radial-gradient(ellipse 50% 45% at 50% 50%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 75%),
        linear-gradient(180deg, #eef4fb 0%, #e3eef9 100%);
}

.hm-capsule-pin {
    width: 100%;
}

.hm-capsule-stage {
    position: relative;
    width: 100%;
    height: var(--h);
    max-width: 1200px;
    margin: 0 auto;
}

/* "scroll" cue at the bottom of the screen, fades out as the capsule opens */
.hm-capsule-hint {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    padding-bottom: 30px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #6b7a8c;
    opacity: calc(1 - var(--p) * 2);
}

.hm-capsule-hint::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 2px;
    height: 22px;
    margin-left: -1px;
    border-radius: 2px;
    background: linear-gradient(180deg, #6b7a8c, transparent);
    animation: hmHint 1.6s ease-in-out infinite;
}

@keyframes hmHint {
    0%   { transform: translateY(-6px); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateY(6px); opacity: 0; }
}

.hm-capsule-half {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--w);
    height: var(--h);
    z-index: 2;
    will-change: transform;
}

/* left half: navy cap */
.hm-capsule-half--l {
    margin-left: calc(var(--w) * -1 + 4px);
    border-radius: calc(var(--h) / 2) 10px 10px calc(var(--h) / 2);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .25) 100%),
        linear-gradient(90deg, #0c2340 0%, #1c4b7d 45%, #2d6bb0 100%);
    box-shadow: 0 18px 30px rgba(12, 35, 64, .25);
    transform: translateX(calc(var(--p) * var(--d) * -1)) rotate(calc(var(--p) * -4deg));
    z-index: 3;
}

/* right half: white body */
.hm-capsule-half--r {
    margin-left: -4px;
    border-radius: 10px calc(var(--h) / 2) calc(var(--h) / 2) 10px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 35%, rgba(0, 0, 0, 0) 70%, rgba(12, 35, 64, .14) 100%),
        linear-gradient(90deg, #e6ebf1 0%, #ffffff 50%, #eef2f6 100%);
    box-shadow: 0 18px 30px rgba(12, 35, 64, .16), inset 0 0 0 1px rgba(12, 35, 64, .06);
    transform: translateX(calc(var(--p) * var(--d))) rotate(calc(var(--p) * 4deg));
}

/* glossy shine along the top of each half */
.hm-capsule-half::before {
    content: "";
    position: absolute;
    top: 12%;
    left: 14%;
    right: 14%;
    height: 16%;
    border-radius: 20px;
    background: rgba(255, 255, 255, .55);
    filter: blur(1px);
}

/* the open (hollow) end of each half, shows up as it opens */
.hm-capsule-half::after {
    content: "";
    position: absolute;
    top: 4%;
    bottom: 4%;
    width: 26px;
    border-radius: 50%;
    opacity: var(--p);
}

.hm-capsule-half--l::after {
    right: -8px;
    background: radial-gradient(ellipse at 40% 50%, #071629 0%, #12355e 60%, #2d6bb0 100%);
}

.hm-capsule-half--r::after {
    left: -8px;
    background: radial-gradient(ellipse at 60% 50%, #c9d2dc 0%, #e4e9ef 60%, #ffffff 100%);
}

/* brand name sits inside, revealed as the halves part */
.hm-capsule-text {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* logo fades in, sharpens and grows gently as the halves part */
    opacity: var(--p);
    filter: blur(calc((1 - var(--p)) * 10px));
    transform: scale(calc(.82 + var(--p) * .18));
}

/* soft glow behind the logo */
.hm-capsule-text::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 420px;
    height: 220px;
    margin: -110px 0 0 -210px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(141, 164, 68, .18) 0%, rgba(141, 164, 68, 0) 70%);
    z-index: -1;
}

/* colour logo in the middle */
.hm-capsule-logo {
    margin: 0;
    line-height: 0;
}

.hm-capsule-logo img {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
}

/* the line under the logo comes in a little after the logo */
.hm-capsule-text p {
    opacity: calc(var(--p) * 2 - 1);
    transform: translateY(calc((1 - var(--p)) * 12px));
    margin: 16px 0 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #4a5a6e;
}

@media (max-width: 1024px) {
    .hm-capsule {
        --w: 170px;
        --h: 100px;
        --d: 240px;
    }

    .hm-capsule-logo img {
        width: 230px;
    }
}

@media (max-width: 768px) {
    .hm-capsule {
        --w: 120px;
        --h: 72px;
        --d: 150px;
        height: 60vh;
        height: 60svh;
        min-height: 340px;
        padding: 20px 0 70px;
    }

    .hm-capsule-hint {
        bottom: 20px;
    }

    .hm-capsule-logo img {
        width: 170px;
    }

    .hm-capsule-text p {
        font-size: 11px;
        letter-spacing: .04em;
    }
}

@media (max-width: 480px) {
    .hm-capsule {
        --w: 96px;
        --h: 60px;
        --d: 128px;
    }

    .hm-capsule-logo img {
        width: 150px;
    }

    .hm-capsule-text p {
        max-width: 180px;
        font-size: 10px;
        line-height: 1.5;
    }
}

/* reduced motion: capsule simply shown open */
@media (prefers-reduced-motion: reduce) {
    .hm-capsule-hint { display: none; }
}

/* ==========================================================================
   ENZYMES PAGE: video fix + section background colours
   ========================================================================== */

/* columns can shrink, so the video never pushes the text aside */
.en-intro > * {
	min-width: 0;
}

/* video box: same size and shape as the old image */
.en-intro-video {
	position: relative;
	aspect-ratio: 4 / 4.2;
	border-radius: 12px;
	overflow: hidden;
	background: var(--navy);
	box-shadow: var(--shadow);
}

.en-intro-video video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* light green band (portfolio) */
.en-bg-green {
	background: #f1f5e6;
}

/* navy band (applications) */
.en-bg-navy {
	background:
		radial-gradient(circle at 100% 0%, rgba(141, 164, 68, .18) 0%, transparent 45%),
		var(--navy);
}

.en-bg-navy .section-head h2 {
	color: var(--white);
}

.en-bg-navy .eyebrow {
	color: #c7d98f;
}

.en-bg-navy .eyebrow::before,
.en-bg-navy .eyebrow::after {
	background: #c7d98f;
}

.en-bg-navy .en-app {
	border-color: transparent;
}

@media (max-width: 1024px) {
	.en-intro-video {
		aspect-ratio: 16 / 11;
	}
}

/* ==========================================================================
   INFRASTRUCTURE PAGE: section background colours
   ========================================================================== */

/* navy band (quality standards) */
.sec-bg-navy {
	background:
		radial-gradient(circle at 100% 0%, rgba(141, 164, 68, .18) 0%, transparent 45%),
		var(--navy);
}

.sec-bg-navy .section-head h2 {
	color: var(--white);
}

.sec-bg-navy .section-head p {
	color: rgba(255, 255, 255, .78);
}

.sec-bg-navy .eyebrow {
	color: #c7d98f;
}

.sec-bg-navy .eyebrow::before,
.sec-bg-navy .eyebrow::after {
	background: #c7d98f;
}

.sec-bg-navy .pillar {
	border-color: transparent;
}
/* =========================================================
   HOME PAGE – MOBILE FIXES (hero buttons, about, bento a & d)
   ========================================================= */
@media (max-width: 560px) {

	/* hero: smaller text + compact buttons side by side */
	.hero-slides { min-height: 400px; }
	.hero-content { padding-top: 30px; padding-bottom: 30px; }
	.hero-content .inner { padding-left: 18px; }
	.hero-title { font-size: 50px; margin-bottom: 12px; }
	.hero-text { font-size: 15px; margin-bottom: 22px; }

	.hero-actions { flex-wrap: nowrap; gap: 10px; }
	.hero-actions .fp-btn-ghost{
		display:none;
	}

	/* about: no outline frame, badge sits neatly under the photo */
	.about-media { padding: 0; }
	.about-media::before { display: none; }
	.about-img { aspect-ratio: 4 / 3; }
	.about-badge {
		position: relative;
		left: auto;
		bottom: auto;
		max-width: none;
		margin: -36px 16px 0;
		padding: 14px 18px;
		border-left: 3px solid var(--green);
	}
	.about-badge strong { font-size: 18px; }

	/* bento: every tile gets its own height */
	.hm-bento { grid-auto-rows: auto; }
	.hm-tile--b,
	.hm-tile--c,
	.hm-tile--e,
	.hm-tile--f { min-height: 270px; }

	/* tile a: show the full capsule image (no crop) */
	.hm-tile--a {
		aspect-ratio: 1600 / 1080;
		padding: 0;
	}

	/* tile d: less empty space */
	.hm-tile--d { min-height: 190px; }
	.hm-tile--d .hm-shield { width: 120px; height: 120px; top: 20px; right: -16px; }
	.hm-tile--d .hm-seals { bottom: 22px; }
}

/* very small phones: buttons stack but stay compact */
@media (max-width: 360px) {
	.hero-actions { flex-wrap: wrap; }
}
/* ===== HOME: brand capsule – less empty space on mobile ===== */
@media (max-width: 768px) {
    .hm-capsule {
        height: auto;
        min-height: 0;
        padding: 70px 0 80px;
    }

    .hm-capsule-hint {
        bottom: 12px;
    }
}

/* capsule: no blur animation (blur is heavy and makes scrolling stutter) */
.hm-capsule-text {
    filter: none;
}

/* =========================================================
   ABOUT PAGE (and every page banner) – MOBILE FIXES
   ========================================================= */

/* page banner: dark layer behind the text so it is always readable */
.page-hero {
	isolation: isolate;
}

.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(12, 35, 64, .7) 0%, rgba(12, 35, 64, .35) 55%, rgba(12, 35, 64, 0) 100%);
}

@media (max-width: 768px) {
	.page-hero {
		padding: 56px 0;
		background-position: 70% center;
	}

	/* image is busy behind the text on phones, so the layer covers it fully */
	.page-hero::before {
		background: linear-gradient(180deg, rgba(12, 35, 64, .82) 0%, rgba(12, 35, 64, .7) 100%);
	}

	.page-hero h1 {
		font-size: 40px;
		margin-bottom: 10px;
	}

	.page-hero p {
		font-size: 15px;
		line-height: 1.6;
	}

	.page-hero .breadcrumb {
		font-size: 12px;
		margin-bottom: 12px !important;
	}
}

@media (max-width: 560px) {

	/* intro: smaller round image, less gap */
	.ab-intro-grid {
		gap: 36px;
	}

	.ab-circle {
		max-width: 220px;
		margin: 24px auto 8px;
	}

	.ab-intro-copy h2 {
		font-size: 26px;
	}

	.ab-intro-copy .lead {
		font-size: 16px;
	}

	/* product cards: a little shorter */
	.ab-products-head {
		margin-bottom: 28px;
	}

	.ab-products-head h2 {
		font-size: 26px;
	}

	.ab-card {
		min-height: 220px;
		padding: 28px 20px;
	}

	.ab-card h3 {
		font-size: 22px;
	}

	/* mission / vision / values: smaller icons */
	.ab-purpose-grid {
		gap: 40px;
	}

	.ab-purpose-copy h2 {
		font-size: 26px;
	}

	.ab-steps {
		gap: 26px;
	}

	.ab-steps::before {
		left: 31px;
		top: 32px;
		bottom: 32px;
	}

	.ab-step {
		grid-template-columns: 64px 1fr;
		gap: 16px;
	}

	.ab-step-icon {
		width: 64px;
		height: 64px;
	}

	.ab-step-icon svg {
		width: 26px;
		height: 26px;
	}

	.ab-step h3 {
		font-size: 19px;
	}

	/* CTA: compact buttons instead of two huge full-width pills */
	.cta-band {
		padding: 48px 0;
	}

	.cta-copy {
		padding-left: 18px;
	}

	.cta-inner h2 {
		font-size: 26px;
	}

	.cta-actions {
		gap: 10px;
		margin-top: 22px;
	}

	.cta-actions .fp-btn {
		flex: 0 1 auto;
		padding: 11px 18px;
		font-size: 12.5px;
	}
}
/* ==========================================================================
   TRANSPARENT GLASS HEADER  ->  white on scroll
   ========================================================================== */
:root { --hdr-h: 96px; }                 /* header ki total height (pill + gap) */
@media (max-width: 1024px) { :root { --hdr-h: 82px; } }

/* header hero ke UPAR float kare: holder ki jagah negative margin se wapas kheench li */
.header-holder {
	min-height: var(--hdr-h);
	margin-bottom: calc(var(--hdr-h) * -1);
}

.site-header {
	padding-top: 12px;
	background: transparent;
	border-bottom: 0;
	transition: background .3s ease, box-shadow .3s ease;
}

/* pill: glass effect (pseudo-element pe, taaki mobile menu ka position:fixed na tute) */
.site-header .header-inner {
	position: relative;
	isolation: isolate;
	width: calc(100% - 24px);
	padding: 0 24px;
}

.site-header .header-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 30px;                          /* radius yaha se kam/zyada karo */
	background: rgba(28, 34, 40, 0.38);
	border: 1px solid rgba(255, 255, 255, .25);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: opacity .3s ease;
}

/* scroll ke baad: full-width white bar, pill gayab */
.site-header.is-sticky {
	background: #fff;
	padding-top: 0;
	box-shadow: 0 6px 20px rgba(12, 35, 64, .12);
}

.site-header.is-sticky .header-inner::before {
	opacity: 0;
}

.site-header.is-sticky .header-inner {
	min-height: 76px;
}

/* desktop: white bar pe menu text dark */
@media (min-width: 1025px) {
	.site-header.is-sticky .main-nav > ul > li > a,
	.site-header.is-sticky .main-nav > ul > li > .nav-parent {
		color: var(--navy);
	}

	.site-header.is-sticky .main-nav > ul > li > a:hover,
	.site-header.is-sticky .main-nav > ul > li:hover > .nav-parent,
	.site-header.is-sticky .main-nav > ul > li.is-current > a {
		color: var(--green);
	}
}

/* mobile: hamburger button white bar pe dark */
.site-header.is-sticky .nav-toggle {
	color: var(--navy);
	border-color: rgba(12, 35, 64, .3);
}

@media (max-width: 560px) {
	.site-header .header-inner { padding: 0 14px; }
}

/* hero / page banner ab header ke neeche se shuru hota hai: text ko neeche dhakelo */
.hero-content { padding-top: calc(var(--hdr-h) + 30px); }
.page-hero    { padding-top: calc(var(--hdr-h) + 60px); }

@media (max-width: 768px) {
	.page-hero { padding-top: calc(var(--hdr-h) + 36px); }
}

@media (max-width: 560px) {
	.hero-slides { min-height: calc(400px + var(--hdr-h)); }
}