/**
 * Therapeutic Areas page (/science/therapeutic-areas/)
 * Self-contained page: its own sticky nav stack + content, all scoped to .kb-ta.
 *
 * NAV (blue Science bar + section strip) is intentionally left as-is.
 * BODY is presented in the site's house style: Open Sans, brand navy (#11233c)
 * headings with an orange (#fb8636) accent rule, readable measures, and subtle
 * alternating section bands — no full-bleed dark bands / badges / pullquotes.
 */

.kb-ta {
	/* Nav palette (unchanged) */
	--kb-ta-navy: #1B3B6B;
	--kb-ta-navy-dark: #14243F;
	--kb-ta-amber: #F5A11D;
	--kb-ta-ink: #22293A;
	--kb-ta-slate: #3A4557;
	--kb-ta-line: #D8DEE6;

	/* Brand palette (site) — used by the body */
	--kb-navy: #11233c;
	--kb-navy-2: #1e3a5f;
	--kb-orange: #fb8636;
	--kb-body: #4c545e;
	--kb-lead: #333a42;
	--kb-panel: #f5f7fa;
	--kb-line2: #e3e8ef;

	/*
	 * --kb-ta-header  = live Divi header height (the sticky stack pins below it)
	 * --kb-ta-anchor  = header + stack + gap, used for scroll-margin-top
	 * Both are kept in sync in JS; the literals are a no-JS fallback only.
	 */
	--kb-ta-header: 66px;
	--kb-ta-anchor: 180px;

	background: #FFFFFF;
	
	color: var(--kb-body);
	font-size: 16px;
	line-height: 1.6;
}

.kb-ta *,
.kb-ta *::before,
.kb-ta *::after {
	box-sizing: border-box;
}

.kb-ta h1,
.kb-ta h2,
.kb-ta h3,
.kb-ta h4 {
	font-family: "Cabin", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	margin: 0;
	color: var(--kb-navy);
}

/* Zero-specificity reset so component margins still win */
.kb-ta :where(p, ul, li) {
	margin: 0;
}

.kb-ta a:focus-visible,
.kb-ta button:focus-visible {
	outline: 2px solid var(--kb-orange);
	outline-offset: 3px;
}

/* Accessible-but-hidden helper */
.kb-ta__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* =======================================================================
   NAV — sticky stack (Science bar + section strip). Left as-is.
======================================================================= */
.kb-ta__stack {
	position: -webkit-sticky;
	position: sticky;
	top: var(--kb-ta-header, 66px);
	z-index: 19;
}

/* Section-level nav (blue "Science" bar) */
.kb-ta__sciencenav {
	background: var(--kb-ta-navy);
}

.kb-ta__sciencenav ul {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 38px;
	min-height: 52px;
}

.kb-ta__sciencenav a {
	font-family: "Open Sans", sans-serif;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	padding: 15px 0;
	display: inline-block;
	text-decoration: none;
}

.kb-ta__sciencenav a:hover {
	color: #FFFFFF !important;
	opacity: 0.85;
}

.kb-ta__sciencenav a[aria-current="page"] {
	color: var(--kb-ta-amber) !important;
}

/* In-page section nav (sticky scroll-spy strip) */
.kb-ta__sectionnav {
	background: #FFFFFF;
	border-bottom: 1px solid var(--kb-ta-line);
	box-shadow: 0 6px 12px -10px rgba(20, 36, 63, 0.35);
}

.kb-ta__sectionnav ul {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
	list-style: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 34px;
}

.kb-ta__sectionnav a {
	display: inline-block;
	padding: 16px 2px 13px;
	border-bottom: 3px solid transparent;
	font-family: "Open Sans", sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--kb-ta-slate);
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.kb-ta__sectionnav a:hover {
	color: var(--kb-ta-navy) !important;
}

.kb-ta__sectionnav a.is-active {
	color: var(--kb-ta-navy) !important;
	border-bottom-color: var(--kb-ta-amber);
	font-weight: 700;
}

/* =======================================================================
   BODY — Ionis-style stacked cards on a full-bleed brand-navy field.
   Card titles are set in Poppins (complementary display face); body copy
   stays Open Sans. Brand navy #11233c field, white cards, orange accents.
======================================================================= */

/* Shared centered measure (matches the site's ~1080px content width) */
.kb-ta__pagehead-inner,
.kb-ta__detail-inner,
.kb-ta__continue-inner {
	max-width: 1080px;
	margin: 0 auto;
	padding-left: 40px;
	padding-right: 40px;
}

/* Page head / intro (kept on white above the navy field) */
.kb-ta__pagehead {
	background: #FFFFFF;
}

.kb-ta__pagehead-inner {
	padding-top: 10px;
	padding-bottom: 44px;
}

.kb-ta__intro-text {
	margin-top: 26px;
	font-size: 20px;
	line-height: 1.7;
	color: var(--kb-lead);
	text-wrap: pretty;
}

/* -----------------------------------------------------------------------
   Card field — full-bleed navy backdrop for the six stacked area cards
----------------------------------------------------------------------- */
.kb-ta__detail {
	background:#11233c;
	padding: 64px 0 72px;
}

/* -----------------------------------------------------------------------
   Area card (white panel with the Ionis oversized bottom-right corner)
----------------------------------------------------------------------- */
.kb-ta__card {
	position: relative;
	background: #FFFFFF;
	border-radius: 10px 10px 64px 10px;
	padding: 30px 54px 30px;
	box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.55);
}

.kb-ta__card + .kb-ta__card {
	margin-top: 28px;
}

/* Small category kicker in Poppins, brand orange (mirrors Ionis's label) */
.kb-ta__card-eyebrow {
	font-family: "Open Sans", sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kb-orange);
}

.kb-ta__h2 {
	margin-top: 8px;
	font-family: "Open Sans", sans-serif;
	font-size:22px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--kb-navy);
}

.kb-ta__h3 {
	margin-top: 34px;
	font-family: "Open Sans", sans-serif;
	font-size: 24px;
	line-height: 1.3;
	font-weight: 600;
	color: var(--kb-navy-2);
}

.kb-ta__card p {
	margin-top: 18px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--kb-body);
	text-wrap: pretty;
}

.kb-ta__card p:first-of-type {
	margin-top: 22px;
}

.kb-ta__h3 + p {
	margin-top: 14px;
}

.kb-ta__card em {
	font-style: italic;
}

/* Body links (e.g. Jeune Aesthetics) — excludes Divi buttons so they keep their
   own button styling rather than rendering as an underlined text link. */
.kb-ta__card a:not(.et_pb_button) {
	color: var(--kb-orange);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kb-ta__card a:not(.et_pb_button):hover {
	color: var(--kb-navy) !important;
}

/* Button group (e.g. "Learn More About DEB") */
.kb-ta__card .btn-group {
	margin-top: 28px;
}

/* Section anchor offset for the sticky stack (JS keeps --kb-ta-anchor current) */
.kb-ta section[data-section] {
	scroll-margin-top: var(--kb-ta-anchor, 236px);
}

/* =======================================================================
   ACCORDION — toggle button, +/– icon, collapse / expand animation
======================================================================= */

/* Without the eyebrow above it the h2 sits at the card's top padding edge */
.kb-ta__card .kb-ta__h2 {
	margin-top: 0;
}

.kb-ta__card-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	text-align: left;
	font: inherit;
	color: inherit;
	gap: 16px;
	-webkit-appearance: none;
	transition: color 0.2s;
}

.kb-ta__card-toggle:hover {
	color: var(--kb-orange);
}

/* Circle +/– icon */
.kb-ta__toggle-icon {
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 2px solid var(--kb-orange);
	border-radius: 50%;
	position: relative;
	transition: background-color 0.25s, border-color 0.25s;
}

/* Horizontal bar of the + */
.kb-ta__toggle-icon::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 2px;
	background: var(--kb-orange);
	border-radius: 1px;
	transition: background-color 0.25s;
}

/* Vertical bar of the + (hidden when expanded) */
.kb-ta__toggle-icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2px;
	height: 14px;
	background: var(--kb-orange);
	border-radius: 1px;
	transition: opacity 0.25s, background-color 0.25s;
}

/* Expanded: filled orange circle, white – */
.kb-ta__card-toggle[aria-expanded="true"] .kb-ta__toggle-icon {
	background-color: var(--kb-orange);
}

.kb-ta__card-toggle[aria-expanded="true"] .kb-ta__toggle-icon::before,
.kb-ta__card-toggle[aria-expanded="true"] .kb-ta__toggle-icon::after {
	background: #ffffff;
}

.kb-ta__card-toggle[aria-expanded="true"] .kb-ta__toggle-icon::after {
	opacity: 0;
}

/* Collapsible body — grid-row trick for smooth height animation */
.kb-ta__card-body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.4s ease;
}

.kb-ta__card-body.is-open {
	grid-template-rows: 1fr;
}

.kb-ta__card-body-inner {
	overflow: hidden;
}

/* =======================================================================
   INLINE CALL-OUT — amber card pointing to Pipeline + Technology
======================================================================= */
.kb-ta__callout {
	background: var(--kb-ta-amber);
	border-radius: 10px 10px 64px 10px;
	padding: 36px 48px;
	margin-top: 28px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.kb-ta__callout-headline {
	font-family: "Open Sans", sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: var(--kb-navy);
	margin: 0;
	line-height: 1.25;
}

.kb-ta__callout-desc {
	margin-top: 6px;
	font-size: 15px;
	color: var(--kb-navy);
	opacity: 0.8;
}

.kb-ta__callout-links {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.kb-ta__callout-links a {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;
	font-weight: 700;
	color: var(--kb-navy);
	text-decoration: none;
	letter-spacing: 0.03em;
	border-bottom: 2px solid rgba(17, 35, 60, 0.4);
	padding-bottom: 2px;
	white-space: nowrap;
	transition: border-color 0.15s;
}

.kb-ta__callout-links a:hover {
	border-color: var(--kb-navy);
	color: var(--kb-navy) !important;
}

/* "Continue through the science" — navy CTA band, split from the card field
   above by a hairline so the two navy zones read as distinct. */
.kb-ta__continue {
	background: var(--kb-navy);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.kb-ta__continue-inner {
	padding-top: 40px;
	padding-bottom: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.kb-ta__continue p {
	font-size: 20px;
	font-weight: 600;
	color: #FFFFFF;
}

.kb-ta__continue-links {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}
.vy.btn-btn-btn:hover{
transform:translateY(-2px);
} 

.kb-ta__continue-links a {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	text-decoration: none;
}

.kb-ta__continue-links a:hover {
	color: var(--kb-orange) !important;
}

/* =======================================================================
   Responsive (Divi breakpoint at 980px)
======================================================================= */
@media screen and (max-width: 980px) {
	.kb-ta__callout {
		border-radius: 8px 8px 48px 8px;
		padding: 28px 26px;
		flex-direction: column;
		align-items: flex-start;
	}

	.kb-ta__callout-headline {
		font-size: 19px;
	}

	/* NAV — horizontal scroll (as-is) */
	.kb-ta__sciencenav ul {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 22px;
		padding: 0 20px;
	}

	.kb-ta__sciencenav a {
		white-space: nowrap;
	}

	.kb-ta__sectionnav ul {
		justify-content: flex-start;
		flex-wrap: nowrap;
		overflow-x: auto;
		gap: 20px;
		padding: 0 20px;
		-webkit-overflow-scrolling: touch;
	}

	.kb-ta__sectionnav a {
		white-space: nowrap;
	}

	/* BODY */
	.kb-ta__pagehead-inner,
	.kb-ta__detail-inner,
	.kb-ta__continue-inner {
		padding-left: 20px;
		padding-right: 20px;
	}

	.kb-ta__pagehead-inner {
		padding-top: 32px;
		padding-bottom: 26px;
	}

	.kb-ta__intro-text {
		margin-top: 18px;
		font-size: 17px;
		line-height: 1.65;
	}

	.kb-ta__detail {
		padding: 40px 0 44px;
	}

	.kb-ta__card {
		border-radius: 8px 8px 48px 8px;
		padding: 32px 26px 30px;
	}

	.kb-ta__card + .kb-ta__card {
		margin-top: 20px;
	}

	.kb-ta__h2 {
		font-size: 28px;
	}

	.kb-ta__h3 {
		margin-top: 28px;
		font-size: 22px;
	}

	.kb-ta__card p {
		font-size: 16px;
		line-height: 1.7;
	}

	.kb-ta__continue-inner {
		padding-top: 30px;
		padding-bottom: 30px;
		gap: 18px;
	}

	.kb-ta__continue p {
		font-size: 17px;
	}
}

@media screen and (max-width: 600px) {
	.kb-ta__card {
		padding: 28px 22px 26px;
	}
}