/* ==========================================================================
   Z2 Biopharma – site overrides
   Developer: Varnan K Nair – https://varnanknair.me/
   Loaded after the theme's custom.css. Put all client-specific styling here
   so the purchased theme files can be updated without losing changes.
   ========================================================================== */

/* ==========================================================================
   Brand colours – Z2 logo: teal #057A81 and lime #97C841
   Overrides the theme's navy/blue/mint palette everywhere it uses the variables.
   ========================================================================== */
:root{
	--z2-teal			: #057A81;
	--z2-teal-dark		: #04636A;
	--z2-lime			: #97C841;
	--z2-lime-dark		: #5E8F22;	/* lime for text on light backgrounds (readable contrast) */
	--z2-ink			: #0B3A3F;	/* deep teal for headings and dark sections */

	--primary-color				: var(--z2-ink);
	--accent-color				: var(--z2-teal);
	--accent-secondary-color	: var(--z2-lime);
	--text-color				: #53676A;
	--divider-color				: #0B3A3F1A;

	/* Bootstrap link colours (default is blue + underline) */
	--bs-link-color				: #057A81;
	--bs-link-color-rgb			: 5, 122, 129;
	--bs-link-hover-color		: #04636A;
	--bs-link-hover-color-rgb	: 4, 99, 106;
	--bs-primary				: #057A81;
	--bs-primary-rgb			: 5, 122, 129;
}

a{
	color: var(--z2-teal);
	text-decoration: none;
	transition: color 0.3s ease-in-out;
}

a:hover{
	color: var(--z2-lime-dark);
}

.dark-section a:hover{
	color: var(--z2-lime);
}

::selection{
	background: var(--z2-lime);
	color: var(--z2-ink);
}

/* Links inside running text: teal with a light underline so they read as links */
.service-entry p a,
.z2-footnote a,
.z2-note a,
.team-single-content p a,
.z2-article p a{
	color: var(--z2-teal);
	text-decoration: underline;
	text-decoration-color: rgba(5, 122, 129, 0.35);
	text-underline-offset: 3px;
}

.service-entry p a:hover,
.z2-footnote a:hover,
.z2-note a:hover,
.team-single-content p a:hover,
.z2-article p a:hover{
	color: var(--z2-lime-dark);
	text-decoration-color: currentColor;
}

/* Buttons: teal at rest; on hover the gradient sweeps to a deep lime-green with a lime glow.
   (Pure lime is too light behind white text, so the hover end uses a darker green.) */
.btn-default{
	background: linear-gradient(to right, var(--z2-teal) 0%, var(--z2-teal) 50%, #4F7D1B 100%);
	background-size: 200% auto;
	background-position: left center;
}

.btn-default:hover,
.btn-default:focus-visible{
	color: var(--white-color);
	background-position: right center;
	box-shadow: 0 3px 10px rgba(151, 200, 65, 0.3), 0 0 0 1px rgba(151, 200, 65, 0.25);
}

.btn-default:hover::before,
.btn-default:focus-visible::before{
	background-color: var(--z2-lime);
}

/* Highlighted words in headings: teal → deep lime on light sections, teal → lime on dark ones */
.section-title h1 span,
.section-title h2 span{
	background: linear-gradient(to right, var(--z2-teal) 0%, var(--z2-lime-dark) 50%, var(--z2-teal) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.dark-section .section-title h1 span,
.dark-section .section-title h2 span,
.page-header-box h1 span{
	background: linear-gradient(to right, var(--z2-lime) 0%, #C6E58C 50%, var(--z2-lime) 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Form fields: teal focus ring instead of Bootstrap blue */
.form-control:focus,
.form-select:focus{
	border-color: var(--z2-teal);
	box-shadow: 0 0 0 0.2rem rgba(5, 122, 129, 0.2);
}

.accordion-button:focus{
	box-shadow: none;
}

/* Icons (Lucide outline SVGs) inside the gradient circles */
.icon-box > svg,
.z2-box-icon > svg{
	width: 28px;
	height: 28px;
	color: var(--white-color);
	flex-shrink: 0;
}

.z2-box-icon > svg{
	width: 30px;
	height: 30px;
}

@media only screen and (max-width: 767px){
	.icon-box > svg,
	.z2-box-icon > svg{
		width: 24px;
		height: 24px;
	}
}


/* Header logo – horizontal Z2 logo (white text, made for the dark header) */
.navbar-brand img{
	width: auto;
	height: 50px;
}

/* Current page in the main menu (beats Bootstrap's .navbar-nav .nav-link.active) */
.main-menu .navbar-nav .nav-link.active,
.slicknav_nav a.active{
	color: var(--accent-secondary-color);
}

/* Footer logo */
.footer-logo img,
.footer-logo-elite img,
.footer-logo-prime img{
	width: 100%;
	max-width: 232px;
	height: auto;
}

@media only screen and (max-width: 991px){
	.navbar-brand img{
		height: 40px;
	}
}

/* ==========================================================================
   Content components used by the Z2 pages (see src/partials/macros.html)
   ========================================================================== */

/* Sidebar contact box: keep the founder's face in the wide crop */
.sidebar-cta-image img{
	object-position: center 20%;
}

/* Sidebar: current page */
.page-category-list ul li a.active{
	color: var(--accent-color);
	font-weight: 600;
}

/* Footnotes under stat sections, and source lists */
.z2-footnote{
	margin: 30px 0 0;
	font-size: 13px;
	line-height: 1.6em;
	color: var(--text-color);
}

.dark-section .z2-footnote{
	color: rgba(255, 255, 255, 0.7);
}

.z2-sources{
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--divider-color);
}

.z2-sources h3{
	font-size: 16px;
	margin-bottom: 10px;
}

.z2-sources ol{
	margin: 0;
	padding-left: 28px;
}

.z2-sources li{
	font-size: 13px;
	line-height: 1.6em;
	margin-bottom: 4px;
}

sup{
	font-size: 0.65em;
}

/* Key figures */
.z2-stats{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 20px;
	margin: 30px 0;
}

.z2-stat{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 22px;
}

.z2-stat-value{
	font-family: var(--accent-font, inherit);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1em;
	color: var(--accent-color);
	margin-bottom: 8px;
}

.z2-stat-label{
	font-size: 15px;
	line-height: 1.5em;
	margin: 0;
}

/* "Where it breaks / where Z2 helps" box */
.z2-callout{
	background: var(--primary-color);
	border-radius: 14px;
	padding: 28px 30px;
	margin: 30px 0;
}

.z2-callout p{
	color: var(--white-color);
	margin-bottom: 14px;
}

.z2-callout p:last-child{
	margin-bottom: 0;
}

.z2-callout .z2-callout-label{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 4px;
}

.z2-callout .z2-callout-label-help{
	color: var(--accent-secondary-color);
}

/* Card grid for sub-topics */
.z2-card-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.z2-card-grid-2{
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.z2-card{
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
	border-radius: 14px;
	padding: 24px;
}

.z2-card h3{
	font-size: 19px;
	margin-bottom: 10px;
}

.z2-card p{
	margin: 0;
}

/* Tables (e.g. molecular formats) */
.z2-table-wrap{
	overflow-x: auto;
	margin: 30px 0;
}

.z2-table{
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
}

.z2-table th,
.z2-table td{
	text-align: left;
	vertical-align: top;
	padding: 14px 16px;
	border-bottom: 1px solid var(--divider-color);
}

.z2-table th{
	background: var(--primary-color);
	color: var(--white-color);
	font-weight: 600;
}

.z2-table td:first-child{
	font-weight: 600;
	color: var(--primary-color);
	width: 34%;
}

/* Founder career timeline */
.z2-timeline{
	border-left: 2px solid var(--divider-color);
	margin-left: 8px;
	padding-left: 28px;
}

.z2-timeline-item{
	position: relative;
	padding-bottom: 24px;
}

.z2-timeline-item::before{
	content: '';
	position: absolute;
	left: -36px;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent-secondary-color);
	border: 3px solid var(--secondary-color);
	box-shadow: 0 0 0 1px var(--accent-color);
}

.z2-timeline-item h3{
	font-size: 20px;
	margin-bottom: 4px;
}

.z2-timeline-item p{
	margin: 0;
}

.z2-note{
	margin-top: 40px;
	padding: 24px;
	border-radius: 14px;
	background: var(--secondary-color);
	border: 1px solid var(--divider-color);
}

.z2-profile-links{
	margin-top: 20px;
}

.z2-profile-links ul li a{
	border-color: var(--divider-color);
	color: var(--primary-color);
}

/* Article briefings (Insights) */
.z2-article{
	padding: 40px 0;
	border-bottom: 1px solid var(--divider-color);
	scroll-margin-top: 120px;
}

.z2-article:first-of-type{
	padding-top: 0;
}

.z2-article-meta{
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-color);
	margin-bottom: 8px;
}


/* Footer legal line */
.footer-copyright-text .z2-legal{
	margin-top: 8px;
	font-size: 13px;
	opacity: 0.75;
}

/* Hero: two buttons side by side */
.hero-content-body{
	flex-wrap: wrap;
	gap: 20px;
}

/* Header: seven menu items + CTA – keep top-level labels on one line */
.main-menu > .nav-menu-wrapper > ul > li > a,
.header-btn .btn-default{
	white-space: nowrap;
}

/* Dropdowns: grow to fit long labels (theme fixes them at 235px) */
.main-menu ul ul{
	width: max-content;
	min-width: 235px;
	max-width: 340px;
}

.main-menu ul ul li a{
	white-space: normal;
	line-height: 1.35em;
}

@media only screen and (min-width: 992px) and (max-width: 1399px){
	.navbar-brand img{
		height: 40px;
	}

	.main-menu > .nav-menu-wrapper > ul > li > a{
		font-size: 15px;
		padding: 12px 7px !important;
	}

	.header-btn .btn-default{
		padding-left: 18px;
	}
}

/* Below 1200px seven menu items don't fit: use the theme's mobile (hamburger) menu, as it does below 992px */
@media only screen and (min-width: 992px) and (max-width: 1199px){
	.navbar-expand-lg .navbar-collapse.main-menu{
		display: none !important;
	}

	.responsive-menu,
	.navbar-toggle{
		display: block;
	}

	.slicknav_nav li,
	.slicknav_nav ul{
		display: block;
	}

	.navbar{
		padding: 20px 0;
	}
}

/* Card rows: size to content (theme uses a fixed 485px min-height); rows stay equal via height:100% */
.solutions-item{
	min-height: 0;
}

/* Dark "features" section used without the overlapping CTA box (e.g. Training on the home page) */
.our-features.z2-features-plain{
	padding: 120px 0 90px;
	margin-bottom: 0;
}

/* Closing CTA section: less empty dark space above the box */
.our-features.z2-cta-section{
	padding-top: 0;
	margin-top: 60px;
}

.z2-cta-section .cta-box{
	margin-top: 80px;
}

/* FAQ sections on hub pages */
.z2-faq-section{
	padding: 100px 0 0;
}

@media only screen and (max-width: 991px){
	.our-features.z2-features-plain{
		padding: 60px 0 50px;
	}

	.z2-cta-section .cta-box{
		margin-top: 50px;
	}

	.z2-faq-section{
		padding: 50px 0 0;
	}
}

/* ==========================================================================
   Icons – Font Awesome glyphs inside the theme's gradient icon circles
   ========================================================================== */
.icon-box > i{
	color: var(--white-color);
	font-size: 26px;
	line-height: 1;
}

.service-item-header .icon-box > i{
	font-size: 26px;
}

@media only screen and (max-width: 767px){
	.icon-box > i,
	.service-item-header .icon-box > i{
		font-size: 22px;
	}
}

/* ==========================================================================
   Box cards – white card with shadow; icon, title, text and link line up
   across each row (CSS subgrid). Columns: .z2-cols-2 / -3 / -4 / -5
   ========================================================================== */
.z2-box-grid{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.z2-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.z2-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.z2-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }

.z2-box{
	display: grid;
	grid-row: span var(--rows, 4);
	grid-template-rows: subgrid;
	row-gap: 16px;
	align-content: start;
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 10px 30px rgba(11, 58, 63, 0.08);
	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.z2-box:hover{
	transform: translateY(-6px);
	box-shadow: 0 20px 45px rgba(11, 58, 63, 0.15);
}

.z2-cols-5 .z2-box{
	padding: 28px 22px;
}

.z2-box-icon{
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(270deg, var(--accent-color) 0%, var(--accent-secondary-color) 50%, var(--accent-color) 100%);
	background-size: 200% auto;
	transition: background-position 0.4s ease-in-out;
}

.z2-box:hover .z2-box-icon{
	background-position: right center;
}

.z2-box-icon i{
	color: var(--white-color);
	font-size: 26px;
}

.z2-box h3{
	font-size: 20px;
	line-height: 1.3em;
	margin: 0;
}

.z2-box h3 a{
	color: inherit;
}

.z2-box h3 a:hover{
	color: var(--accent-color);
}

.z2-box p{
	margin: 0;
}

.z2-box .z2-box-value{
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1em;
	color: var(--accent-color);
}

.z2-box .readmore-btn{
	align-self: end;
	justify-self: start;
}

/* Cards on dark sections keep their white background; add a little separation */
.dark-section .z2-box{
	border-color: transparent;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

@media only screen and (max-width: 1199px){
	.z2-cols-5{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.z2-cols-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 991px){
	.z2-box-grid,
	.z2-cols-5{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media only screen and (max-width: 575px){
	.z2-box-grid,
	.z2-cols-2,
	.z2-cols-4,
	.z2-cols-5{ grid-template-columns: minmax(0, 1fr); }

	.z2-box{
		padding: 26px 22px;
	}
}

/* ==========================================================================
   Layout fixes
   ========================================================================== */

/* Dark section directly under the page banner (or under another dark section) – keep them visually separate */
.page-header + .bg-section,
.bg-section + .bg-section{
	margin-top: 30px;
}

/* Two-column card grid: always 2 × n, never 3 + 1 */
.z2-card-grid-2{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Key-figure grids fill whole rows (class set by the stats macro from the item count) */
.z2-stats-3{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

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

@media only screen and (max-width: 767px){
	.z2-stats-3,
	.z2-card-grid-2{
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Insights cards: equal height, "Read More" aligned on one line */
.page-blog .post-item{
	display: flex;
	flex-direction: column;
}

.page-blog .post-item-body{
	flex: 1;
	display: flex;
	flex-direction: column;
}

.page-blog .post-item-content{
	flex: 1;
}

.page-blog .post-item-content p{
	margin: 10px 0 0;
}

/* "In this briefing" jump links (Technical Articles) */
.z2-toc{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 28px 30px;
	margin: 10px 0 40px;
	box-shadow: 0 10px 30px rgba(11, 58, 63, 0.06);
}

.z2-toc h2{
	font-size: 20px;
	margin-bottom: 18px;
}

.z2-toc ol{
	list-style: none;
	counter-reset: toc;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 24px;
	margin: 0;
	padding: 0;
}

.z2-toc li{
	counter-increment: toc;
}

.z2-toc a{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--bg-color);
	color: var(--primary-color);
	font-weight: 500;
	transition: all 0.3s ease-in-out;
}

.z2-toc a::before{
	content: counter(toc, decimal-leading-zero);
	font-size: 13px;
	font-weight: 700;
	color: var(--accent-color);
}

.z2-toc a:hover{
	background: var(--primary-color);
	color: var(--white-color);
}

.z2-toc a:hover::before{
	color: var(--accent-secondary-color);
}

@media only screen and (max-width: 575px){
	.z2-toc ol{
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Related links box at the end of an article */
.z2-related{
	margin-top: 40px;
	padding: 28px 30px;
	border-radius: 16px;
	background: var(--primary-color);
}

.z2-related h3{
	font-size: 18px;
	color: var(--white-color);
	margin-bottom: 16px;
}

.z2-related ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.z2-related a{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--white-color);
	font-weight: 500;
	transition: all 0.3s ease-in-out;
}

.z2-related a::after{
	content: '\2192';
}

.z2-related a:hover{
	background: var(--accent-secondary-color);
	color: var(--primary-color);
}

/* Links inside dark sections (theme link colour is too dark on navy) */
.dark-section .apprach-body-item a,
.dark-section .section-title p a,
.dark-section .z2-footnote a{
	color: var(--accent-secondary-color);
}

.dark-section .apprach-body-item a:hover,
.dark-section .section-title p a:hover{
	color: var(--white-color);
}

/* Related box sits inside .service-entry – undo the theme's tick-list styling */
.service-entry .z2-related ul{
	gap: 12px;
}

.service-entry .z2-related ul li{
	width: auto;
	padding-left: 0;
}

.service-entry .z2-related ul li::before{
	content: none;
}

/* Icon circles: teal gradient (white icon stays crisp) with a lime ring – both logo colours */
.icon-box.icon-box:has(> svg),
.z2-box-icon{
	background: linear-gradient(135deg, var(--z2-teal) 0%, var(--z2-teal-dark) 100%);
	box-shadow: 0 0 0 4px rgba(151, 200, 65, 0.35);
	transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.service-item:hover .icon-box.icon-box:has(> svg),
.solutions-item:hover .icon-box.icon-box:has(> svg),
.feature-item:hover .icon-box.icon-box:has(> svg),
.z2-box:hover .z2-box-icon{
	box-shadow: 0 0 0 6px rgba(151, 200, 65, 0.6);
}

/* On dark sections the teal circle blends in – use a lime outline and lime icon instead */
.dark-section .icon-box.icon-box:has(> svg){
	background: rgba(151, 200, 65, 0.12);
	box-shadow: inset 0 0 0 1.5px rgba(151, 200, 65, 0.7);
}

.dark-section .icon-box.icon-box:has(> svg) > svg{
	color: var(--z2-lime);
}

.dark-section .service-item:hover .icon-box.icon-box:has(> svg),
.dark-section .feature-item:hover .icon-box.icon-box:has(> svg){
	background: var(--z2-lime);
	box-shadow: inset 0 0 0 1.5px var(--z2-lime);
}

.dark-section .service-item:hover .icon-box.icon-box:has(> svg) > svg,
.dark-section .feature-item:hover .icon-box.icon-box:has(> svg) > svg{
	color: var(--z2-ink);
}

/* Full-width blocks: the theme caps dark sections at 1820px while the page banner keeps stretching,
   so on wide screens they didn't line up. Let every full-width block share the same 15px side gutters. */
@media only screen and (min-width: 992px){
	.bg-section{
		max-width: none;
		width: calc(100% - 30px);
		margin-left: 15px;
		margin-right: 15px;
	}
}

/* Footer link columns: Quick Links | Expertise (widest, two columns) | Who We Support */
@media only screen and (min-width: 1200px){
	.footer-links-box.z2-footer-links{
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr) max-content;
		gap: 30px 44px;
		margin-left: 20px;
	}

	.z2-footer-links .footer-links ul li{
		font-size: 15px;
	}

	.z2-footer-links .footer-links{
		max-width: none;
	}

	.z2-footer-links .footer-contact-info-list{
		grid-column: 1 / -1;
	}

	.z2-footer-expertise ul{
		columns: 2;
		column-gap: 28px;
	}

	.z2-footer-expertise ul li{
		break-inside: avoid;
	}
}

/* Tablet: Expertise gets a full row with two columns */
@media only screen and (min-width: 768px) and (max-width: 1199px){
	.footer-links-box.z2-footer-links .z2-footer-expertise{
		max-width: none;
		width: 100%;
		order: -1;
	}

	.z2-footer-expertise ul{
		columns: 2;
		column-gap: 30px;
	}

	.z2-footer-expertise ul li{
		break-inside: avoid;
	}
}

/* HTML sitemap page */
.z2-sitemap{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.z2-sitemap-group{
	background: var(--white-color);
	border: 1px solid var(--divider-color);
	border-radius: 16px;
	padding: 28px 30px;
	box-shadow: 0 10px 30px rgba(11, 58, 63, 0.06);
}

.z2-sitemap-group h2{
	font-size: 22px;
	margin: 0;
}

.z2-sitemap-group ul{
	list-style: none;
	margin: 16px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--divider-color);
}

.z2-sitemap-group li{
	margin-bottom: 8px;
}

.z2-sitemap-group li a{
	color: var(--text-color);
}

.z2-sitemap-group li a:hover{
	color: var(--z2-teal);
}

@media only screen and (max-width: 991px){
	.z2-sitemap{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 575px){
	.z2-sitemap{ grid-template-columns: minmax(0, 1fr); }
}

/* Founder badge on the home page image: fit "Anil Sebastian, PhD" and the job title on one line each
   (theme caps the box at 250px, which wrapped both lines) */
.what-we-do-author-box{
	max-width: calc(100% - 30px);
	width: max-content;
	flex-wrap: nowrap;
}

.what-we-author-image{
	flex-shrink: 0;
}

.what-we-author-content{
	width: auto;
	min-width: 0;
}

.what-we-author-content h3,
.what-we-author-content p{
	white-space: nowrap;
}

@media only screen and (max-width: 575px){
	.what-we-author-content h3,
	.what-we-author-content p{
		white-space: normal;
	}
}

/* ==========================================================================
   Contact page – founder card, action buttons and contact details panel
   ========================================================================== */
.z2-contact-person{
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 10px;
	padding: 20px;
	background: var(--white-color);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(11, 58, 63, 0.06);
}

.z2-contact-person figure{
	flex-shrink: 0;
	margin: 0;
}

.z2-contact-person img{
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 4px rgba(151, 200, 65, 0.35);
}

.z2-contact-person h3{
	font-size: 20px;
	margin: 0 0 4px;
}

.z2-contact-person p{
	margin: 0;
}

.z2-contact-actions{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 30px;
}

.z2-contact-details .section-title{
	margin-bottom: 20px;
}

.z2-contact-list{
	list-style: none;
	margin: 0;
	padding: 0;
}

.z2-contact-list li{
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid var(--divider-color);
}

.z2-contact-list li:last-child{
	border-bottom: none;
	padding-bottom: 0;
}

.z2-contact-icon{
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white-color);
	background: linear-gradient(135deg, var(--z2-teal) 0%, var(--z2-teal-dark) 100%);
	box-shadow: 0 0 0 4px rgba(151, 200, 65, 0.35);
}

.z2-contact-icon svg{
	width: 24px;
	height: 24px;
}

.z2-contact-icon i{
	font-size: 20px;
}

.z2-contact-list p{
	margin: 0 0 4px;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.z2-contact-list h3{
	font-size: 19px;
	line-height: 1.4em;
	margin: 0;
	overflow-wrap: anywhere;
}

.z2-contact-list h3 a{
	color: var(--primary-color);
}

.z2-contact-list h3 a:hover{
	color: var(--z2-teal);
}

.z2-contact-list .z2-contact-small{
	margin: 6px 0 0;
	font-size: 13px;
}

@media only screen and (max-width: 1199px){
	.z2-contact-details{
		margin-top: 40px;
	}
}

@media only screen and (max-width: 767px){
	.z2-contact-details{
		padding: 30px 22px;
	}

	.z2-contact-list h3{
		font-size: 17px;
	}
}

/* Contact page founder card: name and title on one line each */
.z2-contact-person > div{
	min-width: 0;
}

.z2-contact-person p{
	font-size: 15px;
}

@media only screen and (min-width: 576px){
	.z2-contact-person h3,
	.z2-contact-person p{
		white-space: nowrap;
	}
}

/* Contact page: line up the "Contact Us" label with the "Contact details" heading on desktop
   (card padding 50px + half the height difference between label and heading) */
@media only screen and (min-width: 1200px){
	.page-contact-us .contact-us-contant{
		padding-top: 64px;
	}
}