/* =====================================================================
   TOKENS
   Canonical source: epitheal-phase1/assets/css/style.css :root — if that
   changes, resync here by hand, there's no shared include between the
   two repos.
   ===================================================================== */
* ,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--blue: #0733c1;
	--pink: #ff3ea7; /* Care Point Pink, canonical -- unchanged */
	--pink-text-aa: #e0008e; /* AA variant: small text on Zinc White backgrounds only */
	--pink-cta-fill-aa: #e0008e; /* AA variant: Zinc White label on pink button fill only */
	--charcoal-willow: #334155;
	--zinc-white: #ffffff;
	--intelligence-green: #09d1cf;
	--seaweed-violet: #a23ae4;
	--salicylic-coral: #ff615c;
	--connemara-mist: #b1c3ff;
	--blush-pink: #ffacd9;
	--light-bg: #f4f6ff;
	--footer-bg: #334155;
	--mineral-mist: #c7f0ea;
	--ink-void: #05060a; /* dark orb-casing backdrop, distinct from --charcoal-willow (text/UI) */
	--font: "Montserrat", sans-serif;
}

/* =====================================================================
   BASE
   ===================================================================== */
html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

html, body {
	height: 100%;
}

body {
	font-family: var(--font);
	color: var(--charcoal-willow);
	background: var(--zinc-white);
	overflow-x: hidden;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

h1, h2, h3 {
	color: var(--blue);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.6em;
}

h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 600; }

p {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 1.2em;
}

a { color: var(--pink); }

main {
	display: block;
	padding-top: 84px; /* clears the fixed nav */
	flex: 1 0 auto;
}

/* =====================================================================
   NAV
   ===================================================================== */
nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 3rem;
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(8px);
}

.nav-logo {
	display: flex;
	align-items: center;
}

.nav-logo-img {
	height: 60px;
	width: auto;
	display: block;
}

nav ul {
	list-style: none;
	display: flex;
	gap: 2.5rem;
	margin-left: auto;
}

nav ul a {
	color: var(--charcoal-willow);
	text-decoration: none;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: color 0.2s;
}

nav ul a:hover {
	color: var(--blue);
}

.nav-contact {
	background: var(--pink);
	color: var(--zinc-white) !important;
	padding: 8px 18px;
	border-radius: 6px;
	font-weight: 600 !important;
	text-decoration: none;
	/* <li> inside nav ul, so it's also a nav ul flex child subject to that
	   rule's `gap: 2.5rem`. This was `margin-left: 2rem` back when it was
	   a sibling of <ul> with no gap involved; -0.5rem here + the inherited
	   2.5rem gap nets back to the original 2rem visual spacing from the
	   last nav link. */
	margin-left: -0.5rem;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	box-sizing: border-box;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	margin-left: 1rem;
}

.nav-toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--blue);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle.open .nav-toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav-toggle.open .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
.nav-toggle.open .nav-toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav-panel {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	background: var(--blue);
	display: flex;
	flex-direction: column;
	padding: 96px 1.5rem 2rem;
	transform: translateY(-100%);
	transition: transform 0.25s ease;
}

.mobile-nav-panel.open {
	transform: translateY(0);
}

.mobile-nav-panel a {
	color: var(--zinc-white);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 500;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-nav-cta {
	color: var(--pink) !important;
	font-weight: 700 !important;
}

@media (max-width: 768px) {
	nav { padding: 1rem 1.5rem; }
	nav ul { display: none; }
	.nav-contact { display: none; }
	.nav-toggle { display: flex; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
	min-height: 80vh;
	background: var(--zinc-white);
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
	padding: calc(80px + 5rem) 3rem 6rem 10vw;
}

.hero-bg-circle {
	position: absolute;
	right: -180px;
	top: 50%;
	transform: translateY(-50%);
	width: 700px;
	height: 700px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.01);
	border: 1px solid rgba(255, 255, 255, 0.03);
}

.hero-bg-circle-2 {
	position: absolute;
	right: -80px;
	top: 50%;
	transform: translateY(-50%);
	width: 500px;
	height: 500px;
	border-radius: 50%;
	background: rgba(255, 62, 167, 0.02); /* --pink at 0.02 opacity */
	border: 1px solid rgba(255, 62, 167, 0.04); /* --pink at 0.04 opacity */
}

.hero-visual {
	position: absolute;
	right: 0;
	bottom: 0;
	top: 80px;
	width: 50%;
	z-index: 1;
}

.hero-visual::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 65%;
	height: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 40%);
	z-index: 2;
}

.hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.hero-content {
	position: relative;
	max-width: 45vw;
	z-index: 2;
}

.hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #E6F1FB;
	border: 1px solid #B5D4F4;
	border-radius: 100px;
	padding: 6px 16px;
	margin-bottom: 0.75rem;
}

.hero-tag-dot {
	width: 6px;
	height: 6px;
	background: var(--pink);
	border-radius: 50%;
}

.hero-tag span {
	font-size: 0.72rem;
	font-weight: 600;
	color: #0733C1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hero h1 {
	font-size: clamp(2.6rem, 5vw, 4rem);
	font-weight: 700;
	color: var(--blue);
	line-height: 1.12;
	margin-bottom: 1.5rem;
	letter-spacing: -0.03em;
}

.hero h1 em {
	font-style: normal;
	color: var(--pink);
	font-weight: 600;
}

.hero-lead {
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--charcoal-willow);
	line-height: 1.7;
	max-width: 520px;
	margin-bottom: 2.5rem;
}

.hero-cta {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.hero-origin {
	position: absolute;
	bottom: 2rem;
	right: 3rem;
	font-size: 0.7rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.3);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	z-index: 2;
}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn-primary {
	background: var(--pink);
	color: var(--zinc-white);
	padding: 14px 28px;
	border-radius: 8px;
	font-family: var(--font);
	font-size: 0.88rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition:
		opacity 0.2s,
		transform 0.15s;
	display: inline-block;
}

.btn-primary:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

/* Dimmed, non-interactive state for a CTA with no destination yet
   (e.g. blocked on a pending platform/content decision). Pair with
   the `disabled` attribute, not an href="#" link. */
.btn-pending,
.btn-pending:hover {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	pointer-events: none;
}

.btn-secondary {
	background: transparent;
	color: var(--blue);
	padding: 14px 28px;
	border-radius: 8px;
	font-family: var(--font);
	font-size: 0.88rem;
	font-weight: 500;
	border: 1.5px solid var(--blue);
	cursor: pointer;
	text-decoration: none;
	transition:
		background 0.2s,
		color 0.2s;
	display: inline-block;
}

.btn-secondary:hover {
	background: var(--blue);
	border-color: var(--blue);
	color: var(--zinc-white);
}

.link {
	color: var(--pink);
	cursor: pointer;
	font-weight: 500;
	text-decoration: none;
}

.link--arrowed {
	display: inline-block;
	height: 3rem;
	line-height: 3rem;
}
.link--arrowed .arrow-icon {
	position: relative;
	top: -1px;
	transition: transform 0.3s ease;
	vertical-align: middle;
}
.link--arrowed .arrow-icon--circle {
	transition: stroke-dashoffset 0.3s ease;
	stroke-dasharray: 95;
	stroke-dashoffset: 95;
}
.link--arrowed:hover .arrow-icon {
	transform: translate3d(5px, 0, 0);
}
.link--arrowed:hover .arrow-icon--circle {
	stroke-dashoffset: 0;
}

/* =====================================================================
   SECTION SHARED
   ===================================================================== */
section {
	padding: 6rem 3rem;
}

.section-inner {
	max-width: 1100px;
	margin: 0 auto;
}

.section-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pink);
	margin-bottom: 1rem;
}

.section-title {
	font-size: clamp(1.8rem, 3.5vw, 2.6rem);
	font-weight: 700;
	color: var(--blue);
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin-bottom: 1.2rem;
}

.section-title em {
	font-style: normal;
	color: var(--pink);
	font-weight: 600;
}

.heading-stop {
	color: var(--pink);
}

.section-lead {
	font-size: 1rem;
	color: var(--charcoal-willow);
	line-height: 1.75;
	max-width: 620px;
	opacity: 0.8;
	margin-bottom: 3rem;
}

/* =====================================================================
   CREDIBILITY STRIP
   ===================================================================== */
.credibility-strip {
	background: var(--zinc-white);
}

@media (min-width: 769px) {
	.credibility-strip {
		padding: 1rem 3rem;
	}
}

.credibility-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
}

.credibility-card {
	background: var(--zinc-white);
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
}

.credibility-icon {
	width: 48px;
	height: 48px;
}

.credibility-label {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--blue);
}

/* =====================================================================
   STORY
   ===================================================================== */
.story {
	background: var(--zinc-white);
	padding-bottom: 2rem;
}

.legal-page {
	background: var(--zinc-white);
	padding-bottom: 2rem;
}

.story-grid {
	display: grid;
	grid-template-columns: 55fr 45fr;
	gap: 4rem;
	align-items: start;
	margin-top: 2.5rem;
}

.story-text {
	max-width: 600px;
}

.story-text p {
	font-size: 1rem;
	line-height: 1.85;
	color: var(--charcoal-willow);
	margin-bottom: 1.4rem;
}

.story-text p:last-child {
	margin-bottom: 0;
}

.story-text p strong {
	color: var(--blue);
	font-weight: 600;
}

.legal-content h3 {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--blue);
	margin: 2.25rem 0 0.75rem;
}

.legal-content p,
.legal-content li {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--charcoal-willow);
	margin-bottom: 1rem;
}

.legal-content ul {
	padding-left: 1.25rem;
	margin-bottom: 1.5rem;
}

.photo-slot {
	border-radius: 10px;
	overflow: hidden;
	background: transparent;
}

.photo-slot img {
	width: 100%;
	height: auto;
	display: block;
}

/* Story right-column carousel */
.story-carousel {
	position: relative;
	height: 420px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.story-carousel-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.story-carousel-slide.active {
	opacity: 1;
}

.story-carousel-slide img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
}

.story-slide-pharmacist img {
	filter: sepia(0.35) contrast(1.02) brightness(0.97);
}

.story-slide-newspaper img {
	filter: sepia(0.3) contrast(1.05);
}

.story-slide-newspaper::after,
.story-slide-street::after {
	content: "";
	position: absolute;
	inset: 0;
	box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	z-index: 1;
}

.story-slide-street img {
	filter: sepia(0.4) contrast(1.05) brightness(0.95);
}

@media (min-width: 769px) {
	.story-grid {
		display: flow-root;
	}

	.story-text {
		max-width: none;
	}

	.story-carousel {
		float: right;
		margin-left: 3rem;
		margin-bottom: 1.5rem;
		width: 45%;
		max-width: 45%;
	}

	.story-text .btn-primary {
		clear: both;
	}
}

.photo-slot-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
}

.photo-slot-placeholder span {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--blue);
	opacity: 0.45;
}

/* =====================================================================
   PRODUCTS
   ===================================================================== */
.products {
	background: var(--light-bg);
}

.products-header {
	margin-bottom: 3rem;
}

/* =====================================================================
   FUTURE DEVELOPMENT
   ===================================================================== */
.future-development {
	background: var(--zinc-white);
}

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

/* Products card redesign — Recovery Strip / Care Point motif, replaces gradient circle */
.product-card {
	position: relative;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 24px 24px 24px 32px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.product-card__strip {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 6px;
	background: #0733c1; /* Recovery Blue */
	transition: width 0.2s ease;
}

.product-card__dot {
	position: absolute;
	left: -3px;
	top: 24px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff3ea7; /* Care Point Pink */
	transition: transform 0.2s ease;
}

.product-card:hover .product-card__strip {
	width: 10px;
}
.product-card:hover .product-card__dot {
	transform: translateY(4px) scale(1.15);
}

.product-card__icon {
	width: 24px;
	height: 24px;
	color: #ff3ea7; /* Care Point Pink */
}

.product-card__eyebrow {
	font-family: Montserrat, sans-serif;
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-top: 10px;
}

.product-card__heading {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #0733c1; /* Recovery Blue */
	margin: 6px 0 8px;
}

.product-card__body {
	font-family: Montserrat, sans-serif;
	font-size: 14px;
	color: #334155; /* Charcoal Willow */
	line-height: 1.6;
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.product-card__strip,
	.product-card__dot {
		transition: none;
	}
}

.product-card-num {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--pink);
	letter-spacing: 0.1em;
	margin-bottom: 0.75rem;
}

.product-card h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--blue);
	margin-bottom: 0.6rem;
}

.product-card p {
	font-size: 0.85rem;
	color: var(--charcoal-willow);
	opacity: 0.75;
	line-height: 1.7;
	margin-bottom: 1.25rem;
}

.product-badge {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 100px;
	margin-top: auto;
}

.badge-launching {
	background: rgba(255, 62, 167, 0.1); /* --pink at 0.1 opacity */
	color: var(--pink);
}

.badge-available {
	background: rgba(9, 209, 207, 0.12); /* --intelligence-green at 0.12 opacity */
	color: #057e7d; /* no variable — dark teal text, flagged for review */
}

.products-note {
	margin-top: 2.5rem;
	font-size: 0.85rem;
	color: var(--charcoal-willow);
	opacity: 0.55;
	font-style: italic;
}

/* =====================================================================
   APPLICATIONS
   ===================================================================== */
.applications {
	background: var(--zinc-white);
	padding-top: 6rem;
	padding-bottom: 3.5rem;
}

.applications-header {
	margin-bottom: 3rem;
}

.applications-intro-grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	row-gap: 1.5rem;
	column-gap: 2rem;
	margin-top: 1.5rem;
}

.applications-intro-grid .application-copy {
	background: #ffffff;
	border-left: 4px solid var(--blue);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	padding: 24px;
}

.applications-intro-grid .application-copy:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.applications-intro-grid .application-copy:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.applications-intro-grid .application-copy:nth-child(3) {
	grid-column: 1;
	grid-row: 2;
}

.applications-intro-grid .application-copy:nth-child(4) {
	grid-column: 2;
	grid-row: 2;
}

.applications-intro-logo {
	grid-row: 2;
	align-self: center;
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.applications-intro-logo img {
	max-width: 300px;
	width: 100%;
	height: auto;
}

.applications-intro-logo--left {
	grid-column: 1;
	justify-self: start;
	justify-content: flex-start;
}

.applications-intro-logo--right {
	grid-column: 3;
	justify-self: end;
	justify-content: flex-end;
}

.applications-ai-gov-strip {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 50px;
	padding-top: 2rem;
	margin-bottom: 3rem;
}

.applications-ai-gov-link {
	display: inline-flex;
	align-items: center;
	gap: 35px;
	background: #E6F1FB;
	border: 1px solid #B5D4F4;
	border-radius: 100px;
	padding: 10px 20px;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.applications-ai-gov-link:hover,
.applications-ai-gov-link:focus-visible {
	opacity: 0.75;
}

.applications-ai-gov-link:focus-visible {
	outline: 2px solid var(--blue);
	outline-offset: 4px;
}

.applications-ai-gov-link-logo {
	height: 28px;
	width: auto;
}

.applications-ai-gov-link span {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--blue);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.applications-list {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.application-block {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 2.5rem;
	align-items: center;
	background: var(--light-bg);
	border-radius: 12px;
	padding: 2rem 1.75rem;
	border: 1px solid rgba(7, 51, 193, 0.08); /* --blue at 0.08 opacity, matches .product-card border */
}

.application-block-reverse {
	grid-template-columns: 1fr 280px;
}

.application-block-reverse .application-media {
	order: 2;
}

.application-media-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--connemara-mist), var(--blush-pink));
}

.application-orb {
	display: none;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
}

.application-orb.is-active {
	display: block;
}

.application-media-placeholder.is-hidden {
	display: none;
}

.application-media-placeholder img,
.application-media-placeholder video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

/* AI Governance strip orb -- scoped to .applications-ai-gov-strip so it
   doesn't touch the .application-media used by the three track-block
   sections above (bare .application-media/.application-media-placeholder/
   .application-orb rules already exist for those; redefining them
   unscoped here would silently override that sizing/background site-wide). */
.applications-ai-gov-strip .application-media {
	width: 100px;
	flex-shrink: 0;
}

.applications-ai-gov-strip .application-media-placeholder {
	background: var(--blue);
}

.application-num {
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--pink);
	letter-spacing: 0.1em;
	margin-bottom: 0.75rem;
}

.application-copy h3 {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--blue);
	margin-bottom: 0.75rem;
}

.application-copy p {
	font-size: 0.9rem;
	color: var(--charcoal-willow);
	opacity: 0.8;
	line-height: 1.7;
	margin-bottom: 1rem;
}

.application-examples {
	list-style: none;
	padding: 0;
	margin: 0;
}

.application-examples li {
	font-size: 0.82rem;
	color: var(--charcoal-willow);
	opacity: 0.7;
	padding-left: 1.1rem;
	position: relative;
	margin-bottom: 0.4rem;
}

.application-examples li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--pink);
}

/* =====================================================================
   TEAM
   ===================================================================== */
.team {
	background: var(--light-bg);
}

.team-rows {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.team-grid {
	display: grid;
	gap: 1.5rem;
}

.team-grid--top {
	grid-template-columns: repeat(3, 1fr);
}

.team-grid--bottom {
	grid-template-columns: repeat(4, 1fr);
}

.team-card {
	background: var(--light-bg);
	border-radius: 12px;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.team-avatar {
	width: 106px;
	height: 106px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--connemara-mist), var(--blush-pink));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--blue);
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid rgba(255, 62, 167, 0.35); /* --pink at 0.35 opacity */
	margin-bottom: 1rem;
}

.team-avatar--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	/* Applied via CSS rather than relying on the source photos being
	   pre-desaturated -- most of the current headshots happen to be
	   shot/edited close to monochrome already, but that's a property
	   of those specific files, not a rule, so a new photo in its
	   original colour (e.g. Jim Morel's) wouldn't match without this. */
	filter: grayscale(1);
}

.team-name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--blue);
	margin-bottom: 3px;
}

.team-role {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pink);
	letter-spacing: 0.02em;
}

/* Bottom row's 4 columns are narrower than the top row's 3, so the
   longest titles (e.g. Michael Leonard's "Procurement & Overseas
   Strategy") wrap to 2 lines at the same size that fits fine up top.
   A small step down keeps them to 1 line without reading as an
   obviously different size next to the top row. */
.team-grid--bottom .team-role {
	font-size: 0.7rem;
}

/* The in-card bio paragraph stays hidden -- its text is read into the
   floating popup below (#team-bio-popup) on hover instead of being
   shown in place. */
.team-bio {
	display: none;
}

/* Bio popup -- a single shared element (see index.html, right before
   the SCRIPTS block) reused for whichever card is hovered, positioned
   with position:fixed by the JS below. Fixed positioning is what
   satisfies "no clipping by ancestor overflow": it's placed relative
   to the viewport, not any scrolling/overflow-hidden container, and
   none of its ancestors set transform/filter/perspective (any of
   which would otherwise turn that ancestor into the containing block
   for fixed descendants and break this). It also can't cause layout
   shift, since a fixed element never participates in document flow
   to begin with -- .team-card/.team-grid geometry is untouched
   regardless of where the popup ends up. */
.team-bio-popup {
	position: fixed;
	width: 260px;
	max-width: calc(100vw - 2rem);
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(7, 51, 193, 0.15); /* --blue at 0.15 opacity */
	padding: 1.25rem;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	z-index: 200;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.team-bio-popup.is-visible {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.team-bio-popup-name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--blue); /* Recovery Blue */
	margin-bottom: 3px;
}

.team-bio-popup-role {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--pink); /* Care Point Pink */
	letter-spacing: 0.02em;
	margin-bottom: 0.75rem;
}

.team-bio-popup-text {
	font-size: 0.8rem;
	color: var(--charcoal-willow);
	line-height: 1.6;
}

/* =====================================================================
   TESTIMONIAL INTRO
   ===================================================================== */
.testimonial-intro {
	background: var(--zinc-white);
	padding: 2rem 3rem;
	scroll-margin-top: 64px;
}

/* =====================================================================
   TESTIMONIAL CAROUSEL
   ===================================================================== */
.testimonial-carousel {
	padding: 3rem 3rem;
	position: relative;
}

.testimonial-carousel-track {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	min-height: 190px;
}

.testimonial-carousel-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease-in-out;
	text-align: center;
}

.testimonial-carousel-slide.active {
	opacity: 1;
}

.testimonial-carousel-quote {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 600;
	font-style: italic;
	color: var(--blue);
	line-height: 1.45;
	letter-spacing: -0.01em;
	margin-bottom: 1.5rem;
}

.testimonial-carousel-quote::before {
	content: "\201C";
	color: var(--pink);
}

.testimonial-carousel-quote::after {
	content: "\201D";
	color: var(--pink);
}

.testimonial-carousel-attr {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--charcoal-willow);
	opacity: 0.8;
}

.testimonial-carousel-attr span {
	color: var(--pink);
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact {
	background: var(--blue);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.contact .section-title {
	color: var(--zinc-white);
}

.contact .section-lead {
	color: rgba(255, 255, 255, 0.75); /* matches .hero-lead's treatment on the same --blue background */
	margin-left: auto;
	margin-right: auto;
}

.contact .section-tag {
	color: var(--pink);
}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer {
	background: var(--footer-bg);
	padding: 2.5rem 3rem 1.5rem;
}

.footer-body {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
	gap: 2.5rem;
	align-items: start;
	margin-bottom: 2rem;
}

.footer-col--brand img {
	display: block;
	margin-bottom: 0.6rem;
}

.footer-tagline {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.45); /* --zinc-white at 0.45 opacity */
	font-style: italic;
}

.footer-col--addresses {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.footer-phone {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--zinc-white);
	line-height: 1.5;
}

.footer-nav {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.footer-nav a {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.75); /* --zinc-white at 0.75 opacity */
	text-decoration: none;
	transition: color 0.2s;
}

.footer-nav a:hover {
	color: var(--pink);
}

.footer-address-label {
	display: block;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pink);
	margin-bottom: 0.5rem;
}

.footer-detail {
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.8); /* --zinc-white at 0.8 opacity */
	line-height: 1.9;
}

.footer-bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	padding-top: 1.25rem;
}

.footer-bottom .footer-copyright {
	grid-column: 1;
	justify-self: start;
}

.footer-bottom .footer-legal {
	grid-column: 2;
	justify-self: center;
}

.footer-copyright {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.3); /* --zinc-white at 0.3 opacity */
}

.footer-legal {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.72rem;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.75); /* --zinc-white at 0.75 opacity, matches .footer-nav a */
	text-decoration: none;
	transition: color 0.2s;
}

.footer-legal a:hover {
	color: var(--pink);
}

.footer-legal a:not(:last-child)::after {
	content: "|";
	margin: 0 0.6em;
	color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
	.footer-body { grid-template-columns: 1fr; gap: 2rem; }

	.footer-bottom {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.footer-bottom .footer-copyright,
	.footer-bottom .footer-legal {
		grid-column: 1;
		justify-self: center;
	}
}

/* =====================================================================
   BLOG
   Signature device: the small pink dot in post meta borrows the Care
   Point mark from the brand system (the pink circle = human care /
   the moment intervention begins) as a quiet separator between author
   and date, rather than a plain bullet or pipe. Restrained, single use.
   ===================================================================== */
.blog-header {
	max-width: 760px;
	margin: 0 auto;
	padding: 4rem 1.5rem 2rem;
	text-align: center;
}

.blog-header .section-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pink);
	margin-bottom: 1rem;
}

.blog-header p {
	color: var(--charcoal-willow);
	font-size: 1.05rem;
}

.post-list {
	max-width: 1100px;
	margin: 0 auto;
	padding: 1rem 1.5rem 5rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
}

.post-card {
	background: var(--zinc-white);
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(7, 51, 193, 0.08);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	display: flex;
	flex-direction: column;
}

.post-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(7, 51, 193, 0.1);
}

.post-card-image {
	background: var(--light-bg);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.post-card-image img {
	width: 100%;
	height: auto;
	display: block;
}

.post-card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.post-card-body h2 {
	font-size: 1.25rem;
	margin-bottom: 0.5rem;
}

.post-card-body h2 a {
	color: var(--blue);
	text-decoration: none;
}

.post-card-body h2 a:hover {
	color: var(--pink);
}

.post-card-excerpt {
	color: var(--charcoal-willow);
	font-size: 0.92rem;
	flex: 1;
	margin-bottom: 1rem;
}

.post-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	color: rgba(51, 65, 85, 0.65);
	letter-spacing: 0.02em;
}

.post-meta-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--pink);
	flex-shrink: 0;
}

/* Single post */
.post-single {
	max-width: 720px;
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
}

.post-back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--pink);
	text-decoration: none;
	margin-bottom: 2rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.post-single h1 {
	margin-bottom: 0.75rem;
}

.post-single .post-meta {
	margin-bottom: 2rem;
	font-size: 0.85rem;
}

.post-feature-image {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 2.5rem;
}

.post-feature-image img {
	width: 100%;
	height: auto;
	display: block;
}

.post-intro {
	font-size: 1.15rem;
	color: var(--charcoal-willow);
	line-height: 1.6;
	margin-bottom: 2rem;
	font-weight: 500;
}

.post-body {
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--charcoal-willow);
}

.post-body h2 {
	margin-top: 2em;
}

.post-body h3 {
	margin-top: 1.6em;
}

.post-body a {
	color: var(--pink);
	text-decoration: underline;
}

.post-body blockquote {
	margin: 2em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 3px solid var(--pink);
	color: var(--blue);
	font-style: italic;
	font-size: 1.1rem;
}

.post-body img {
	max-width: 100%;
	border-radius: 10px;
	margin: 1.5em 0;
}

.post-empty {
	text-align: center;
	padding: 4rem 1.5rem;
	color: var(--charcoal-willow);
}

@media (max-width: 768px) {
	.post-list { grid-template-columns: 1fr; padding: 1rem 1.25rem 3rem; }
	.blog-header { padding: 3rem 1.25rem 1.5rem; }
	.post-single { padding: 2rem 1.25rem 3rem; }
}

/* =====================================================================
   ANIMATIONS
   ===================================================================== */
.fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}

.fade-up.visible {
	opacity: 1;
	transform: translateY(0);
}

.fade-left {
	opacity: 0;
	transform: translateX(-100vw);
	transition:
		opacity 0.75s ease,
		transform 0.75s ease;
}

.fade-left.visible {
	opacity: 0.7;
	transform: translateX(0);
}

.fade-right {
	opacity: 0;
	transform: translateX(100vw);
	transition:
		opacity 0.75s ease,
		transform 0.75s ease;
}

.fade-right.visible {
	opacity: 1;
	transform: translateX(0);
}

/* =====================================================================
   EMAIL MODAL
   ===================================================================== */
.email-modal {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.email-modal.open {
	opacity: 1;
	pointer-events: all;
}

.email-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.email-modal-panel {
	position: relative;
	z-index: 1;
	background: var(--zinc-white);
	border-radius: 14px;
	padding: 1.5rem;
	width: 280px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

.email-modal-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--pink);
	margin-bottom: 0.75rem;
}

.email-modal-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	border: none;
	background: transparent;
	font-family: var(--font);
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--charcoal-willow);
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s;
}

.email-modal-option:hover {
	background: var(--light-bg);
	color: var(--blue);
}

.email-modal-option svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--blue);
}

.email-modal-copy {
	border-top: 1px solid rgba(7, 51, 193, 0.08); /* --blue at 0.08 opacity */
	margin-top: 0.5rem;
	padding-top: 1rem;
}

/* =====================================================================
   NOT FOUND PAGE
   ===================================================================== */
.not-found-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 24px;
}

.not-found-page img.logo {
	width: 180px;
	margin-bottom: 40px;
}

.not-found-page h1 {
	font-weight: 700;
	font-size: 28px;
	color: var(--blue);
	margin-bottom: 12px;
}

.not-found-page p {
	font-size: 16px;
	color: var(--charcoal-willow);
	margin-bottom: 32px;
	max-width: 420px;
}

.not-found-page a.home-link {
	display: inline-block;
	font-weight: 600;
	font-size: 15px;
	color: var(--zinc-white);
	background: var(--blue);
	padding: 12px 28px;
	border-radius: 4px;
	text-decoration: none;
}

.not-found-page a.home-link:hover {
	background: var(--pink);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 768px) {
	nav {
		padding: 1rem 1.5rem;
	}

	nav ul {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	section {
		padding: 3rem 1.5rem;
	}

	.hero {
		padding: 7rem 1.5rem 4rem;
		min-height: auto;
	}

	.hero-visual {
		display: none;
	}

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

	.hero-origin {
		display: none;
	}

	.photo-collage {
		grid-template-columns: 1fr;
		height: auto;
	}

	.photo-collage-main,
	.photo-collage-stack .photo-slot {
		height: 200px;
	}

	.photo-collage-stack {
		height: auto;
	}

	.credibility-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.credibility-card {
		padding: 1rem 0.75rem;
	}

	.credibility-icon {
		width: 36px;
		height: 36px;
	}

	.credibility-label {
		font-size: 0.8rem;
	}

	.story-grid {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.story-carousel {
		height: 300px;
	}

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

	.application-block,
	.application-block-reverse {
		grid-template-columns: 1fr;
	}
	.application-block-reverse .application-media {
		order: 0;
	}
	.application-media-placeholder {
		max-width: 200px;
		margin: 0 auto;
	}

	.applications-intro-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.applications-intro-grid .application-copy:nth-child(1),
	.applications-intro-grid .application-copy:nth-child(2),
	.applications-intro-grid .application-copy:nth-child(3),
	.applications-intro-grid .application-copy:nth-child(4) {
		grid-column: 1;
		grid-row: auto;
	}

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

	/* Mobile fallback: no hover on touch, so the bio renders inline
	   and statically instead of relying on the popup (which is fully
	   disabled at this breakpoint via matchMedia in the JS, not just
	   hidden here). Styled like the site's other small body copy
	   (e.g. .application-copy p) rather than the popup's white-card
	   look, since it's just inline text now, not a floating panel. */
	.team-bio {
		display: block;
		font-size: 0.9rem;
		color: var(--charcoal-willow);
		opacity: 0.8;
		line-height: 1.7;
		margin-top: 0.75rem;
	}
}