/* ==========================================================================
   Depthslide Homepage Styles
   Professional B2B design for precision cell counting chamber slides
   ========================================================================== */

/* --- CSS Variables --- */
:root {
	--ds-primary: #0a6e7d;
	--ds-primary-dark: #074f5a;
	--ds-primary-light: #e8f4f6;
	--ds-accent: #00a3a8;
	--ds-text: #1a2332;
	--ds-text-muted: #5a6b7a;
	--ds-bg: #ffffff;
	--ds-bg-alt: #f7f9fa;
	--ds-border: #e1e8ed;
	--ds-white: #ffffff;
	--ds-radius: 12px;
	--ds-radius-sm: 8px;
	--ds-shadow: 0 2px 12px rgba(10, 110, 125, 0.08);
	--ds-shadow-lg: 0 8px 32px rgba(10, 110, 125, 0.12);
	--ds-transition: all 0.3s ease;
	--ds-max-width: 1140px;
	--ds-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--ds-font-alt: 'IBM Plex Sans', sans-serif;
}

/* --- Astra Header Override (transparent on homepage) --- */
.depthslide-home .site-header {
	background: transparent !important;
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	box-shadow: none !important;
}

/* White nav text ONLY on desktop, where the header overlays the dark hero.
   On mobile the off-canvas menu has a light background, so white text would
   be invisible — keep those links dark (below). */
@media (min-width: 922px) {
	.depthslide-home .site-header .main-header-menu > li > a,
	.depthslide-home .site-header .site-branding a,
	.depthslide-home .site-header .ast-site-identity .site-title a {
		color: #ffffff !important;
	}

	.depthslide-home .site-header .main-header-menu > li > a:hover,
	.depthslide-home .site-header .site-branding a:hover {
		color: rgba(255, 255, 255, 0.75) !important;
	}
}

/* Mobile off-canvas / inline menu: dark, readable links on light background */
.depthslide-home .ast-mobile-header-content .main-header-menu > li > a,
.depthslide-home .ast-mobile-popup-content .main-header-menu > li > a,
.depthslide-home .ast-mobile-header-content .menu-link,
.depthslide-home .ast-mobile-popup-content .menu-link {
	color: var(--ds-text) !important;
}

.depthslide-home .ast-mobile-header-content .main-header-menu > li > a:hover,
.depthslide-home .ast-mobile-popup-content .main-header-menu > li > a:hover {
	color: var(--ds-primary) !important;
}

.depthslide-home .ast-primary-header-bar {
	background: transparent !important;
	border: none !important;
}

/* Header scrolled state (add .ds-header-scrolled via JS) */
.depthslide-home .site-header.ds-header-scrolled {
	background: rgba(13, 30, 38, 0.95) !important;
	position: fixed !important;
	backdrop-filter: blur(8px);
}

/* --- Depthslide Header Logo --- */
.ds-site-brand {
	display: inline-flex !important;
	align-items: center !important;
	text-decoration: none !important;
	line-height: 0 !important;
}
.ds-site-brand:focus-visible {
	outline: 2px solid #06B6D4;
	outline-offset: 4px;
	border-radius: 2px;
}
.ds-header-logo {
	display: block;
	height: 36px;
	width: auto;
	max-width: 220px;
	transition: opacity 0.2s ease;
}
.ds-site-brand:hover .ds-header-logo {
	opacity: 0.82;
}
/* Shrink the tagline a hair for crisper rendering at small sizes */
.ds-header-logo text {
	font-display: swap;
}

/* --- Astra Layout Override --- */
.depthslide-home .site-content {
	margin: 0 !important;
	padding: 0 !important;
	max-width: 100% !important;
}

.depthslide-home #primary {
	padding: 0 !important;
	margin: 0 !important;
}

.depthslide-home .ast-container {
	max-width: 100% !important;
	padding: 0 !important;
}

.depthslide-front-page {
	font-family: var(--ds-font);
	color: var(--ds-text);
	line-height: 1.7;
}

.depthslide-front-page p {
	margin-bottom: 1rem;
}

.depthslide-front-page .ds-container {
	max-width: var(--ds-max-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* --- Section Base --- */
.ds-section {
	padding: 80px 0;
}

/* --- Section Titles --- */
.ds-section-title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	text-align: center;
	margin-bottom: clamp(32px, 4vw, 48px);
	color: var(--ds-text);
	letter-spacing: -0.02em;
}

.ds-subsection-title {
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	font-weight: 600;
	margin-bottom: 24px;
	color: var(--ds-primary);
}

.ds-mt-lg {
	margin-top: 48px;
}

/* --- Buttons --- */
.ds-btn {
	display: inline-block;
	padding: clamp(10px, 1.5vw, 12px) clamp(20px, 3vw, 28px);
	border-radius: var(--ds-radius-sm);
	font-size: clamp(0.85rem, 1.2vw, 0.95rem);
	font-weight: 600;
	text-decoration: none;
	transition: var(--ds-transition);
	cursor: pointer;
	border: 2px solid transparent;
	letter-spacing: 0.01em;
	/* Minimum touch target 44px */
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

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

.ds-btn-primary:hover {
	background: var(--ds-primary-dark);
	border-color: var(--ds-primary-dark);
	color: var(--ds-white);
	transform: translateY(-1px);
	box-shadow: var(--ds-shadow-lg);
}

.ds-btn-outline {
	background: transparent;
	color: var(--ds-primary);
	border-color: var(--ds-primary);
}

.ds-btn-outline:hover {
	background: var(--ds-primary);
	color: var(--ds-white);
}

.ds-btn-secondary {
	background: transparent;
	color: var(--ds-text-muted);
	border-color: var(--ds-border);
	margin-left: 8px;
}

.ds-btn-secondary:hover {
	background: var(--ds-bg-alt);
	color: var(--ds-text);
}

.ds-btn-lg {
	padding: 16px 36px;
	font-size: 1.05rem;
}

.ds-btn-text {
	background: none;
	border: none;
	color: var(--ds-primary);
	padding: 8px 0;
	font-weight: 600;
}

.ds-btn-text:hover {
	color: var(--ds-primary-dark);
	text-decoration: underline;
}

.ds-btn-block {
	width: 100%;
	text-align: center;
}

.ds-btn-view {
	background: var(--ds-primary-light);
	color: var(--ds-primary);
	border: 1px solid var(--ds-border);
	padding: 8px 20px;
	font-size: 0.875rem;
	border-radius: var(--ds-radius-sm);
	text-decoration: none;
	display: inline-block;
	margin-top: 8px;
}

.ds-btn-view:hover {
	background: var(--ds-primary);
	color: var(--ds-white);
}

/* ==========================================================================
   SECTION 2: HERO
   ========================================================================== */
.ds-hero {
	background: linear-gradient(135deg, #0a6e7d 0%, #074f5a 40%, #0d3b4a 100%);
	color: var(--ds-white);
	position: relative;
	overflow: hidden;
	min-height: 520px;
	display: flex;
	align-items: center;
	padding: 40px 0 80px;
}

.ds-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at 20% 50%, rgba(255,255,255,0.06) 0%, transparent 50%),
		radial-gradient(circle at 80% 30%, rgba(0,163,168,0.15) 0%, transparent 50%);
	pointer-events: none;
}

.ds-hero-content {
	position: relative;
	z-index: 1;
	max-width: 1100px;
}

.ds-hero-title {
	font-size: clamp(1.5rem, 4vw, 2.6rem);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.02em;
	margin-bottom: 24px;
	/* Override Astra's global heading color (--ast-global-color-2 = dark slate).
	   Hero needs the white inherited from .ds-hero, but the theme's h1 rule
	   with var(--ast-global-color-2) wins by specificity. */
	color: var(--ds-white);
}

.ds-hero-subtitle {
	font-size: clamp(0.95rem, 1.8vw, 1.2rem);
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 8px;
	opacity: 0.92;
}

.ds-hero-subtitle-2 {
	font-size: clamp(0.85rem, 1.5vw, 1.1rem);
	font-weight: 300;
	line-height: 1.6;
	margin-bottom: 36px;
	opacity: 0.82;
}

.ds-hero-cta {
	margin-bottom: 32px;
}

.ds-hero-cta .ds-btn {
	margin-right: 12px;
}

.ds-hero-cta .ds-btn-primary {
	background: var(--ds-white);
	color: var(--ds-primary);
	border-color: var(--ds-white);
}

.ds-hero-cta .ds-btn-primary:hover {
	background: var(--ds-primary-light);
	color: var(--ds-primary-dark);
}

.ds-hero-cta .ds-btn-outline {
	color: var(--ds-white);
	border-color: rgba(255,255,255,0.5);
}

.ds-hero-cta .ds-btn-outline:hover {
	background: rgba(255,255,255,0.12);
	border-color: var(--ds-white);
	color: var(--ds-white);
}

.ds-hero-microcopy {
	font-size: 0.85rem;
	opacity: 0.7;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.ds-micro-divider {
	opacity: 0.4;
}

.ds-hero-wave {
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 60px;
	background: var(--ds-white);
	clip-path: polygon(0 100%, 100% 100%, 100% 40%, 75% 70%, 50% 30%, 25% 70%, 0 40%);
}

/* --- Hero split layout (text left + image right) --- */
.ds-hero-split {
	position: relative;
	z-index: 1;
}

.ds-hero-content {
	flex: 1 1 100%;
	max-width: 900px;
	min-width: 0;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   SECTION 3: APPLICATION SEGMENTATION
   ========================================================================== */
.ds-applications {
	background: var(--ds-bg);
}

.ds-app-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 16px;
}

.ds-app-card {
	background: var(--ds-white);
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius);
	padding: 40px;
	transition: var(--ds-transition);
}

.ds-app-card:hover {
	border-color: var(--ds-accent);
	box-shadow: var(--ds-shadow-lg);
	transform: translateY(-4px);
}

.ds-app-card-icon {
	margin-bottom: 24px;
}

.ds-app-card h3 {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--ds-primary);
	margin-bottom: 8px;
}

.ds-app-card-sub {
	font-size: 1rem;
	font-weight: 500;
	color: var(--ds-text);
	margin-bottom: 16px;
}

.ds-app-card-body {
	font-size: 0.95rem;
	color: var(--ds-text-muted);
	margin-bottom: 20px;
}

/* ==========================================================================
   SECTION 3.5: OEM / CONTRACT MANUFACTURING
   ========================================================================== */
.ds-oem {
	background: var(--ds-bg);
}

.ds-section-lead {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 40px;
	font-size: 1.05rem;
	color: var(--ds-text-muted);
	line-height: 1.7;
}

/* ==========================================================================
   SECTION 4: CORE VALUES
   ========================================================================== */
.ds-values {
	background: var(--ds-bg-alt);
}

.ds-values-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.ds-value-card {
	background: var(--ds-white);
	border-radius: var(--ds-radius);
	padding: 32px;
	border-top: 4px solid var(--ds-primary);
	transition: var(--ds-transition);
}

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

.ds-value-number {
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--ds-accent);
	letter-spacing: 0.1em;
	margin-bottom: 12px;
}

.ds-value-card h3 {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--ds-text);
	margin-bottom: 12px;
}

.ds-value-headline {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ds-primary);
	margin-bottom: 12px;
	line-height: 1.5;
}

.ds-value-body {
	font-size: 0.875rem;
	color: var(--ds-text-muted);
	line-height: 1.65;
}

/* ==========================================================================
   SECTION 5: COMPARISON TABLE
   ========================================================================== */
.ds-comparison {
	background: var(--ds-white);
}

.ds-table-wrapper {
	overflow-x: auto;
	border-radius: var(--ds-radius);
	box-shadow: var(--ds-shadow);
}

.ds-comparison-table,
.ds-spec-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.ds-comparison-table th,
.ds-comparison-table td,
.ds-spec-table th,
.ds-spec-table td {
	padding: 16px 20px;
	text-align: left;
	border-bottom: 1px solid var(--ds-border);
}

.ds-comparison-table th,
.ds-spec-table th {
	background: var(--ds-primary);
	color: var(--ds-white);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.ds-comparison-table tbody tr:hover,
.ds-spec-table tbody tr:hover {
	background: var(--ds-primary-light);
}

.ds-col-dimension {
	background: var(--ds-bg-alt);
	font-weight: 500;
	width: 18%;
}

.ds-col-depthslide {
	background: rgba(10, 110, 125, 0.04);
	border-left: 3px solid var(--ds-accent);
	font-weight: 500;
	color: var(--ds-primary-dark);
	width: 30%;
}

.ds-comparison-table tbody tr:last-child td,
.ds-spec-table tbody tr:last-child td {
	border-bottom: none;
}

.ds-spec-note {
	margin-top: 20px;
	font-size: 0.85rem;
	color: var(--ds-text-muted);
	font-style: italic;
	padding: 16px;
	background: var(--ds-bg-alt);
	border-radius: var(--ds-radius-sm);
	border-left: 3px solid var(--ds-border);
}

/* ==========================================================================
   SECTION 6: SPECIFICATIONS
   ========================================================================== */
.ds-specs {
	background: var(--ds-bg-alt);
}

/* ==========================================================================
   SECTION 7: TRUST ANCHORS
   ========================================================================== */
.ds-trust {
	background: linear-gradient(135deg, #0a6e7d 0%, #074f5a 100%);
	color: var(--ds-white);
}

.ds-trust .ds-section-title {
	color: var(--ds-white);
}

.ds-trust-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 40px;
}

.ds-trust-card {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--ds-radius);
	padding: 32px 20px;
	text-align: center;
	transition: var(--ds-transition);
}

.ds-trust-card:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-4px);
}

.ds-trust-number {
	font-size: 2.5rem;
	font-weight: 800;
	margin-bottom: 8px;
	color: var(--ds-white);
	letter-spacing: -0.03em;
}

.ds-trust-label {
	font-size: 0.875rem;
	opacity: 0.8;
}

.ds-trust-copy {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.7;
	opacity: 0.9;
}

/* ==========================================================================
   SECTION 8: CTA + FORM
   ========================================================================== */
.ds-cta {
	background: var(--ds-white);
}

.ds-cta-body {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 48px;
	font-size: 1.1rem;
	color: var(--ds-text-muted);
}

.ds-cta-body p {
	margin-bottom: 8px;
}

.ds-form-wrapper {
	max-width: 800px;
	margin: 0 auto;
	background: var(--ds-bg-alt);
	border-radius: var(--ds-radius);
	padding: 40px;
	border: 1px solid var(--ds-border);
}

.ds-form-row {
	margin-bottom: 20px;
}

.ds-form-row-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.ds-form-field {
	display: flex;
	flex-direction: column;
}

.ds-form-field label {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--ds-text);
}

.ds-required {
	color: #d64545;
}

.ds-form-field input,
.ds-form-field select,
.ds-form-field textarea {
	padding: 12px 16px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
	font-size: 0.95rem;
	font-family: var(--ds-font);
	transition: var(--ds-transition);
	background: var(--ds-white);
	width: 100%;
	box-sizing: border-box;
}

.ds-form-field input:focus,
.ds-form-field select:focus,
.ds-form-field textarea:focus {
	outline: none;
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px rgba(0, 163, 168, 0.12);
}

.ds-form-submit {
	margin-top: 28px;
}

.ds-form-disclaimer {
	font-size: 0.8rem;
	color: var(--ds-text-muted);
	text-align: center;
	margin-top: 12px;
}

/* ==========================================================================
   CF7 SAMPLE REQUEST FORM
   CF7 normalizes the form template into <p><label>field</label></p> blocks,
   so we lay it out with CSS grid (two columns on desktop, one on mobile).
   ========================================================================== */
.ds-form-wrapper .wpcf7-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 20px;
	align-items: start;
}

.ds-form-wrapper .wpcf7-form > p {
	margin: 0;
}

/* Full-width rows: textarea, submit, and the disclaimer note */
.ds-form-wrapper .wpcf7-form > p:has(textarea),
.ds-form-wrapper .wpcf7-form > p:has(.wpcf7-submit),
.ds-form-wrapper .wpcf7-form > p:last-of-type {
	grid-column: 1 / -1;
}

.ds-form-wrapper .wpcf7-form label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--ds-text);
	line-height: 1.4;
}

.ds-form-wrapper .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
}

.ds-form-wrapper .wpcf7-form-control {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 16px;
	border: 1px solid var(--ds-border);
	border-radius: var(--ds-radius-sm);
	font-size: 0.95rem;
	font-family: var(--ds-font);
	background: var(--ds-white);
	color: var(--ds-text);
	transition: var(--ds-transition);
}

.ds-form-wrapper .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--ds-accent);
	box-shadow: 0 0 0 3px rgba(0, 163, 168, 0.12);
}

.ds-form-wrapper textarea.wpcf7-form-control {
	resize: vertical;
}

.ds-form-wrapper .wpcf7-not-valid {
	border-color: #d64545 !important;
}

.ds-form-wrapper .wpcf7-submit {
	background: var(--ds-primary);
	color: #ffffff;
	border: none;
	padding: 14px 32px;
	border-radius: var(--ds-radius-sm);
	font-size: 1rem;
	font-weight: 600;
	font-family: var(--ds-font);
	cursor: pointer;
	transition: var(--ds-transition);
	width: auto;
	min-width: 240px;
}

.ds-form-wrapper .wpcf7-submit:hover {
	background: var(--ds-primary-dark);
}

.ds-form-wrapper .wpcf7-form > p:last-of-type {
	text-align: center;
	margin-top: 4px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ds-footer {
	background: #0d1e26;
	color: rgba(255, 255, 255, 0.7);
	padding: 60px 0 24px;
}

/* Footer container — sits outside <main class="depthslide-front-page">, so it does NOT
   inherit the .depthslide-front-page .ds-container padding rule. Apply the same
   fluid padding here to keep the footer content off the screen edges on small viewports. */
.ds-footer .ds-container {
	padding-left: clamp(16px, 4vw, 24px);
	padding-right: clamp(16px, 4vw, 24px);
}

.ds-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
	margin-bottom: 40px;
}

.ds-footer-col p {
	font-size: 0.875rem;
	margin-bottom: 6px;
	line-height: 1.6;
}

.ds-footer-note {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.45);
	margin-top: -2px;
	margin-bottom: 0;
}

.ds-footer-col a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: var(--ds-transition);
}

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

.ds-footer-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ds-white);
	margin-bottom: 16px;
}

.ds-footer-name {
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--ds-white);
	opacity: 0.85;
	margin: 0 0 8px;
	line-height: 1.4;
}

.ds-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ds-footer-col ul li {
	margin-bottom: 8px;
}

.ds-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 20px;
	text-align: center;
	font-size: 0.8rem;
	opacity: 0.6;
}

.ds-footer-bottom p {
	margin-bottom: 4px;
}

/* Hide Astra's default footer (#colophon) on the homepage — we render a custom
   .ds-footer instead. Body has the .depthslide-home class only on the front page,
   so other pages (products, FAQ, contact, etc.) keep Astra's footer intact. */
.depthslide-home #colophon.site-footer {
	display: none !important;
}


/* ==========================================================================
   RESPONSIVE — Fluid + Multi-Breakpoint Strategy
   Covers 320px (small phones) through 1024px (tablets/small laptops)
   ========================================================================== */

/* --- Ensure viewport-aware box-sizing everywhere --- */
.depthslide-front-page *,
.depthslide-front-page *::before,
.depthslide-front-page *::after {
	box-sizing: border-box;
}

/* --- Container padding scales with viewport --- */
.depthslide-front-page .ds-container {
	padding-left: clamp(16px, 4vw, 24px);
	padding-right: clamp(16px, 4vw, 24px);
}

/* --- Section padding is fluid --- */
.ds-section {
	padding-top: clamp(40px, 8vw, 80px);
	padding-bottom: clamp(40px, 8vw, 80px);
}

/* ================================================================
   BREAKPOINT: max-width 1024px (small laptops / landscape tablets)
   ================================================================ */
@media (max-width: 1024px) {
	.ds-app-card {
		padding: 32px;
	}

	.ds-hero-content {
		max-width: 100%;
	}
}

/* ================================================================
   BREAKPOINT: max-width 960px (tablets portrait)
   ================================================================ */
@media (max-width: 960px) {
	.ds-values-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.ds-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px;
	}

	.ds-app-cards {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* Stack form rows earlier */
	.ds-form-row-2 {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	/* CF7 form: single column on tablet / mobile */
	.ds-form-wrapper .wpcf7-form {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ds-form-wrapper {
		max-width: 100%;
	}

	/* Hero: collapse to single column, image below text */
	.ds-hero-split {
		flex-direction: column;
		align-items: center;
		gap: 36px;
		text-align: center;
	}

	.ds-hero-content {
		text-align: center;
		flex: 0 0 auto;
		width: 100%;
		max-width: 720px;
	}

	.ds-hero-cta {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.ds-hero-microcopy {
		justify-content: center;
	}
}

/* ================================================================
   BREAKPOINT: max-width 768px (large phones / small tablets)
   ================================================================ */
@media (max-width: 768px) {
	.ds-hero {
		min-height: 380px;
		padding: 50px 0 60px;
	}

	.ds-hero-cta {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.ds-hero-cta .ds-btn {
		margin-right: 0;
		width: 100%;
		text-align: center;
	}

	.ds-hero-microcopy {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		font-size: 0.8rem;
	}

	.ds-micro-divider {
		display: none;
	}

	/* --- Tables → Card layout on mobile --- */
	
	/* Table wrapper: remove horizontal scroll, show as cards */
	.ds-table-wrapper {
		overflow-x: visible;
		box-shadow: none;
		border-radius: 0;
	}

	/* Hide standard table rendering */
	.ds-comparison-table thead,
	.ds-spec-table thead {
		display: none;
	}

	.ds-comparison-table,
	.ds-spec-table,
	.ds-comparison-table tbody,
	.ds-spec-table tbody {
		display: block;
		width: 100%;
	}

	/* Each row becomes a vertical card */
	.ds-comparison-table tbody tr,
	.ds-spec-table tbody tr {
		display: flex !important;
		flex-direction: column !important;
		margin-bottom: 16px !important;
		border: 1px solid var(--ds-border) !important;
		border-radius: var(--ds-radius-sm) !important;
		background: var(--ds-white) !important;
		box-shadow: var(--ds-shadow) !important;
		overflow: hidden !important;
	}

	/* First column becomes the card title */
	.ds-comparison-table tbody tr td:first-child,
	.ds-spec-table tbody tr td:first-child {
		display: block !important;
		width: 100% !important;
		text-align: center !important;
		font-weight: 700 !important;
		font-size: 1rem !important;
		padding: 14px 16px !important;
		background: var(--ds-bg-alt) !important;
		border-bottom: 2px solid var(--ds-border) !important;
		color: var(--ds-text) !important;
	}

	/* No pseudo-label for the title row */
	.ds-comparison-table tbody tr td:first-child::before,
	.ds-spec-table tbody tr td:first-child::before {
		display: none !important;
	}

	/* Other columns become labeled data rows */
	.ds-comparison-table tbody tr td:not(:first-child),
	.ds-spec-table tbody tr td:not(:first-child) {
		display: flex !important;
		align-items: flex-start !important;
		gap: 8px !important;
		padding: 10px 12px !important;
		border-bottom: 1px solid var(--ds-border) !important;
		font-size: 0.875rem !important;
		line-height: 1.5 !important;
	}

	/* Pseudo-label from data-label attribute */
	.ds-comparison-table tbody tr td:not(:first-child)::before,
	.ds-spec-table tbody tr td:not(:first-child)::before {
		content: attr(data-label) !important;
		flex: 0 0 90px !important;
		font-weight: 700 !important;
		font-size: 0.75rem !important;
		color: var(--ds-primary) !important;
		text-transform: uppercase !important;
		letter-spacing: 0.03em !important;
		padding-top: 1px !important;
		word-wrap: break-word !important;
		line-height: 1.3 !important;
	}

	/* Remove bottom border from last data row */
	.ds-comparison-table tbody tr td:not(:first-child):last-child,
	.ds-spec-table tbody tr td:not(:first-child):last-child {
		border-bottom: none !important;
	}

	/* Depthslide column accent — mobile: no left border, keep subtle bg */
	.ds-comparison-table .ds-col-depthslide,
	.ds-spec-table .ds-col-depthslide {
		background: rgba(10, 110, 125, 0.04) !important;
		border-left: none !important;
		width: 100% !important;
	}
	
	.ds-comparison-table tr:hover,
	.ds-spec-table tr:hover {
		background: var(--ds-white);
		box-shadow: var(--ds-shadow-lg);
	}

	/* --- Trust section on mobile --- */
	.ds-trust-cards {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	
	.ds-trust-card {
		padding: 20px 12px;
	}
	
	.ds-trust-number {
		font-size: 1.8rem;
	}
	
	.ds-trust-copy {
		font-size: 0.9rem;
	}

	/* --- Values grid --- */
	.ds-values-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.ds-value-card {
		padding: 24px;
	}
	
	.ds-value-card h3 {
		font-size: 1.15rem;
	}

	/* --- Application cards --- */
	.ds-app-card {
		padding: 24px;
	}
	
	.ds-app-card h3 {
		font-size: 1.25rem;
	}

	/* --- Form --- */
	.ds-form-wrapper {
		padding: 24px 18px;
		border-radius: var(--ds-radius-sm);
	}
	
	.ds-form-field input,
	.ds-form-field select,
	.ds-form-field textarea {
		padding: 12px 14px;
		font-size: 1rem; /* Prevent iOS zoom on focus */
	}

	/* --- Footer --- */
	.ds-footer {
		padding: 40px 0 20px;
	}
	
	.ds-footer-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ================================================================
   BREAKPOINT: max-width 576px (small phones landscape / big phones)
   ================================================================ */
@media (max-width: 576px) {
	.ds-hero {
		min-height: 340px;
		padding: 70px 0 50px;
	}

	.ds-trust-cards {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.ds-trust-card {
		padding: 16px 10px;
		border-radius: var(--ds-radius-sm);
	}

	.ds-trust-number {
		font-size: 1.6rem;
	}

	.ds-trust-label {
		font-size: 0.78rem;
	}

	/* Table card labels narrower */
	.ds-comparison-table td::before,
	.ds-spec-table td::before {
		flex: 0 0 85px;
		font-size: 0.72rem;
	}

	.ds-comparison-table td,
	.ds-spec-table td {
		font-size: 0.82rem;
		padding: 8px 10px;
	}

	/* CTA body text */
	.ds-cta-body {
		font-size: 0.95rem;
	}

	/* Hero wave reduced */
	.ds-hero-wave {
		height: 40px;
	}
}

/* ================================================================
   BREAKPOINT: max-width 480px (small phones — iPhone SE / older)
   ================================================================ */
@media (max-width: 480px) {
	.ds-hero {
		min-height: 300px;
		padding: 90px 0 40px;
	}
	
	.ds-trust-cards {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	
	.ds-trust-card {
		padding: 18px 16px;
		display: flex;
		align-items: center;
		gap: 16px;
		text-align: left;
	}
	
	.ds-trust-number {
		font-size: 1.5rem;
		margin-bottom: 0;
		flex-shrink: 0;
	}

	/* Table card labels even narrower */
	.ds-comparison-table td::before,
	.ds-spec-table td::before {
		flex: 0 0 70px;
		font-size: 0.7rem;
	}
	
	.ds-comparison-table td,
	.ds-spec-table td {
		font-size: 0.8rem;
	}

	.ds-form-wrapper {
		padding: 18px 12px;
	}
	
	/* Footer bottom text */
	.ds-footer-bottom {
		font-size: 0.72rem;
	}
	
	.ds-hero-wave {
		height: 30px;
	}
}

/* ================================================================
   BREAKPOINT: max-width 360px (very small / older phones)
   Minimum touch target enforcement
   ================================================================ */
@media (max-width: 360px) {
	.ds-btn {
		min-height: 48px;
	}
	
	.ds-form-field input,
	.ds-form-field select {
		min-height: 48px;
	}

	.ds-comparison-table td::before,
	.ds-spec-table td::before {
		flex: 0 0 60px;
		font-size: 0.65rem;
	}
	
	.ds-comparison-table td,
	.ds-spec-table td {
		font-size: 0.75rem;
		padding: 7px 8px;
	}
	
	.ds-hero-mini-stats {
		flex-direction: column;
	}
}

/* ==========================================================================
   SCROLL ANIMATION
   ========================================================================== */
.ds-section {
	opacity: 1;
}

.ds-fade-in {
	animation: dsFadeIn 0.6s ease forwards;
}

@keyframes dsFadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   8-CHAMBER VECTOR DECORATIONS
   Extracted from Photoshop .ai path data, converted to inline SVG.
   Three placement styles: Hero watermark, Section dividers, Footer mark.
   ========================================================================== */

/* --- Hero Animated Watermark (Style 1 + 6) ---
   Now sits BEHIND the main SVG visual as a faint background layer.
   The main visual carries the load; watermark is purely decorative texture.
   Vertically and horizontally centered as decorative texture. */
.ds-hero-watermark {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: clamp(320px, 45vw, 640px);
	height: auto;
	pointer-events: none;
	z-index: 0;
	opacity: 0.55; /* multiplied with the 0.06 final keyframe = ~0.033 final */
}

.ds-wm-path {
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	opacity: 0;
	animation: ds-wm-anim 3.2s ease-in-out forwards;
}

.ds-wm-path:nth-child(1),
.ds-wm-path:nth-child(2) {
	animation-delay: 0.2s;
}

.ds-wm-path:nth-child(3),
.ds-wm-path:nth-child(4) {
	animation-delay: 0.5s;
}

.ds-wm-path:nth-child(5),
.ds-wm-path:nth-child(6) {
	animation-delay: 0.8s;
}

.ds-wm-path:nth-child(7),
.ds-wm-path:nth-child(8) {
	animation-delay: 1.1s;
}

@keyframes ds-wm-anim {
	0% {
		stroke-dashoffset: 400;
		opacity: 0;
	}
	8% {
		opacity: 0.4;
	}
	55% {
		stroke-dashoffset: 0;
		opacity: 0.4;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 0.06;
	}
}

/* --- Section Divider (Style 2) --- */
.ds-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	padding: 32px 24px;
}

.ds-divider-line {
	flex: 1;
	max-width: 200px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--ds-border) 30%, var(--ds-border) 70%, transparent);
}

.ds-divider-icon {
	width: 56px;
	height: auto;
	flex-shrink: 0;
	fill: none;
	stroke: var(--ds-primary);
	stroke-width: 0.4;
	opacity: 0.35;
}

/* --- Footer Decoration (Style 5) --- */
.ds-footer-bottom-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

.ds-footer-mark {
	width: 34px;
	height: auto;
	flex-shrink: 0;
	fill: none;
	stroke: rgba(255, 255, 255, 0.2);
	stroke-width: 0.4;
}

/* --- Responsive: scale down watermark on small screens ---
   On mobile, the hero content stacks vertically and the geometric center
   of the section ends up below the title, so the watermark (which is the
   abstract product outline) gets pushed past the H1 and into the CTA
   area — looks blurred and disconnected. Re-anchor the watermark to sit
   directly behind the H1 on phones, with a touch more size to keep the
   8-chamber silhouette legible. Desktop layout is unchanged. */
@media (max-width: 768px) {
	.ds-hero {
		min-height: 0;
		/* Header is position:absolute overlay (~55-60px tall on mobile).
		   padding-top must clear it or the H1 slides under the nav bar. */
		padding: 80px 0 70px;
	}

	.ds-hero-watermark {
		width: 260px;
		top: 8%;
		left: 50%;
		transform: translate(-50%, 0);
		opacity: 0.55;
	}

	/* On mobile the watermark sits behind the H1 — moderate opacity so the
	   silhouette is visible as texture but doesn't overpower the headline. */
	.ds-hero-watermark .ds-wm-path {
		stroke: rgba(255, 255, 255, 0.55);
		stroke-width: 0.45;
		animation: ds-wm-anim-mobile 3.2s ease-in-out forwards;
	}

	.ds-divider {
		padding: 24px 16px;
	}

	.ds-divider-line {
		max-width: 80px;
	}

	.ds-divider-icon {
		width: 40px;
	}

	.ds-footer-mark {
		width: 28px;
	}
}

/* Extra-tight phones (iPhone SE 375px): nudge watermark up a hair and
   trim hero padding so the symbol lines up with the H1 baseline. */
@media (max-width: 400px) {
	.ds-hero {
		padding: 72px 0 56px;
	}

	.ds-hero-watermark {
		width: 230px;
		top: 8%;
		opacity: 0.5;
	}

	.ds-hero-watermark .ds-wm-path {
		stroke: rgba(255, 255, 255, 0.5);
		stroke-width: 0.4;
		animation: ds-wm-anim-iphone-se 3.2s ease-in-out forwards;
	}
}

/* iPhone SE / small phones: settle to a low final opacity so the
   8-chamber silhouette is present but doesn't make the hero look cluttered. */
@keyframes ds-wm-anim-iphone-se {
	0% {
		stroke-dashoffset: 400;
		opacity: 0;
	}
	8% {
		opacity: 0.55;
	}
	55% {
		stroke-dashoffset: 0;
		opacity: 0.55;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 0.22;
	}
}

/* Mid-size phones / small tablets (401–768px): settle slightly lower than
   iPhone SE because the watermark sits in a more open area (no nav-bar
   overlap on these widths), so it doesn't need to fight as hard for
   attention. */
@keyframes ds-wm-anim-mobile {
	0% {
		stroke-dashoffset: 400;
		opacity: 0;
	}
	8% {
		opacity: 0.55;
	}
	55% {
		stroke-dashoffset: 0;
		opacity: 0.55;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 0.22;
	}
}

/* --- Reduced motion: skip animation, show settled state --- */
@media (prefers-reduced-motion: reduce) {
	.ds-wm-path {
		animation: none;
		stroke-dashoffset: 0;
		opacity: 0.06;
	}
}

/* ==========================================================================
   FIX: Astra Layout Conflict
   Astra sets .site-content .ast-container { display: flex; } at desktop widths
   (min-width:922px) without specifying flex-direction, defaulting to "row".
   This causes <main> and <footer> to render side-by-side on full-width pages.
   Force column layout on the homepage.
   ========================================================================== */
.depthslide-home .site-content .ast-container {
	flex-direction: column !important;
}

/* ==========================================================================
   FIX: Sticky Header on Inner Pages
   Astra's "header-main-stick" customizer option is a Pro-only behavior — the
   free theme never adds `position: sticky` to the header on its own, and the
   `ast-primary-sticky-header-active` body class that drives the JS scroll
   effect only appears with the Pro addon installed. Every inner page
   (About / FAQ / Animal Reproduction / Lab Research / Contact / Privacy Policy)
   inherits this rule. The homepage stays on its transparent-overlay header
   over the dark hero (see :first header section above).
   ========================================================================== */
body:not(.depthslide-home) .site-header {
	position: sticky;
	top: 0;
	z-index: 99;
	background: #ffffff !important;
	border-bottom: 1px solid var(--ds-border);
}

/* When WordPress admin bar is visible, push the sticky header below it
   (32px on desktop, 46px on mobile) so the bar isn't covered. */
body.logged-in:not(.depthslide-home) .site-header {
	top: 32px;
}
@media (max-width: 782px) {
	body.logged-in:not(.depthslide-home) .site-header {
		top: 46px;
	}
}


/* ================================================================
   Product Photography — Actual Photo Gallery (Section 6)
   ================================================================ */
.ds-product-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 32px 0 12px;
}

.ds-product-card {
	margin: 0;
	background: #0a1628;
	border-radius: var(--ds-radius);
	overflow: hidden;
	box-shadow: var(--ds-shadow);
	transition: var(--ds-transition);
}

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

.ds-product-img {
	display: block;
	width: 100%;
	height: auto;
}

.ds-product-caption {
	display: block;
	padding: 10px 14px;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #cbd5e1;
	text-align: center;
}

.ds-product-gallery-note {
	text-align: center;
	color: var(--ds-text-muted);
	font-size: 0.9rem;
	margin: 0 0 40px;
}

@media (max-width: 768px) {
	.ds-product-gallery {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}