/* Navigation layout metrics.
   JavaScript replaces these fallbacks with the rendered element heights. */
:root {
	--main-navbar-height: 80px;
	--interior-nav-height: 58px;
	--navigation-clearance: 16px;
}

@media (min-width: 768px) {
	:root {
		--main-navbar-height: 96px;
	}
}

/* Navbar */
@media (min-width: 992px) {
	.navbar {
		transition: background .5s ease-in-out, padding .5s ease-in-out;
	}
	.navbar-nav {
		align-items: center;
	}
	.navbar-nav .nav-link {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 16px;
	}
	.fanooceLogo {
		height: 42px;
	}
	.navbar-collapse {
		background-color: var(--color-white);
	}
	.navbar-nav .nav-link {
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

.navbar {
	font-size: 1em;
	font-weight: bold;
	background-color: var(--color-white);
	min-height: 80px;
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.navbar-nav .nav-link {
	color: var(--color-ink-navy) !important;
}

.navbar-nav .nav-link:not(.btn-nav-cta) {
	background-color: transparent !important;
	text-decoration-color: transparent;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.38em;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.navbar-nav .nav-link:not(.btn-nav-cta):hover,
.navbar-nav .nav-link:not(.btn-nav-cta):focus {
	color: var(--color-ink-navy) !important;
	background-color: transparent !important;
	text-decoration-color: var(--color-fanooce-orange);
}

.navbar-brand {
	padding: 10px 0;
	text-decoration: none;
}

.fanooceLogo {
	width: auto;
}

/* Fanooce boxed actions: one standard size, plus a compact navigation size. */
.fanooce-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 2px solid var(--color-fanooce-orange) !important;
	border-radius: 4px;
	padding: 0.7rem 1.1rem;
	background-color: transparent;
	color: var(--color-ink-navy) !important;
	font-weight: bold;
	text-decoration: none !important;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.fanooce-action:hover,
.fanooce-action:focus {
	border-color: var(--color-fanooce-orange) !important;
	background-color: var(--color-fanooce-orange) !important;
	color: var(--color-ink-navy) !important;
	text-decoration: none !important;
}

.fanooce-action:focus-visible {
	outline: 3px solid var(--color-ink-navy);
	outline-offset: 3px;
	box-shadow: 0 0 0 2px var(--color-white);
}

.fanooce-action:disabled,
.fanooce-action[aria-disabled="true"] {
	cursor: wait;
	opacity: 0.6;
}

.fanooce-action-compact {
	padding: 4px 14px !important;
	line-height: 1.4;
}

/* Sections */
.container-fluid {
	padding: 5vw 4vw;
}

.hero-section {
	background-color: var(--color-white);
	color: var(--color-ink-navy);
	margin-top: var(--main-navbar-height);
	padding-top: 7vw;
	padding-bottom: 7vw;
}

/* Section scroll offset — clears the fixed navbar */
#about, #overview, #services, #offerings, #why, #learning, #solutions, #faq, #contact, #principles, #how, #explore, #bare-project, #engagements, #delivery-snapshot, #operations-optimization {
	scroll-margin-top: calc(var(--main-navbar-height) + var(--navigation-clearance));
}

/* Navbar transparent on load */
.navbar-transparent {
	background-color: transparent !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

/* Navbar CTA button */
.btn-nav-cta {
	padding: 4px 14px !important;
	line-height: 1.4;
}

/* Hero CTA button */
.btn-hero-cta {
	margin-top: 20px;
}

/* Service cards */
.service-heading {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 16px;
}

.service-icon {
	font-size: 2em;
	color: var(--color-fanooce-orange);
	flex-shrink: 0;
	line-height: 1;
}

.service-col h3 {
	margin-bottom: 0;
}

/* Dark section */
.bg-dark-section {
	background-color: var(--color-ink-navy);
	color: var(--color-mist-gray);
}
.bg-dark-section h2,
.bg-dark-section h3 {
	color: var(--color-white);
}
.bg-dark-section strong {
	color: var(--color-white);
}
.bg-dark-section a {
	color: var(--color-fanooce-orange);
}
.bg-dark-section ul li {
	color: var(--color-mist-gray);
}

.bg-light-gray {
	background-color: var(--color-mist-gray);
}

.service-col {
	text-align: left;
	padding: 2vw;
}

/* Offerings */
.offerings-section {
	background-color: var(--color-white);
}

.offering-card {
	height: 100%;
	padding: 2rem;
	background-color: var(--color-mist-gray);
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 4px;
}

.offering-card-format {
	margin: 0 0 0.4rem;
	font-size: 0.72rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-slate-gray);
}

.offering-card h4 {
	margin-bottom: 1rem;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
}

.offering-card p {
	margin-bottom: 0;
}

.offering-card-featured {
	background-color: var(--color-bare-project-blue);
	border: 1px solid var(--color-bare-project-blue);
	padding: 2.25rem;
}

.offerings-group + .offerings-group {
	margin-top: 3.5rem;
	padding-top: 3rem;
	border-top: 1px solid rgba(128, 128, 128, 0.35);
}

.offerings-group-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 1.5rem;
}

.offerings-group-heading h3 {
	margin-bottom: 0;
}

.offerings-group-heading .offering-card-format {
	margin-bottom: 0.35rem;
	color: var(--color-fanooce-orange);
}

.bareproject-home-section {
	background-color: var(--color-bare-project-blue);
	color: var(--color-white);
}

.bareproject-home-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.85fr);
	align-items: center;
	gap: clamp(2rem, 8vw, 8rem);
}

.bareproject-home-section h2,
.bareproject-home-section p {
	color: var(--color-white);
}

.bareproject-home-section h2 {
	max-width: 17ch;
}

.bareproject-home-section .bareproject-eyebrow {
	color: var(--color-white);
}

.bareproject-home-section .offering-cta-product {
	margin-top: 1rem;
}

.offering-card-featured h4,
.offering-card-featured p {
	color: var(--color-white);
}

.offering-cta-product {
	display: inline-block;
	margin-top: 1.25rem;
	padding: 0.55rem 1rem;
	background-color: transparent;
	border: 2px solid var(--color-white);
	border-radius: 4px;
	color: var(--color-white);
	font-weight: bold;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.offering-cta-product:hover,
.offering-cta-product:focus {
	background-color: var(--color-white);
	border-color: var(--color-white);
	color: var(--color-bare-project-blue);
	text-decoration: none;
}
.offering-cta-product:focus-visible {
	outline: 3px solid var(--color-white);
	outline-offset: 3px;
}

/* Contact */
.contact-icon {
	font-size: 1.1em;
	margin-right: 6px;
}

/* Footer */
footer {
	margin-top: 40px;
}

footer .footer-icon {
	font-size: 2em;
	margin-bottom: 20px;
	color: inherit;
	display: block;
	transition: color 0.2s, transform 0.2s;
}

.footer-back-to-top {
	display: inline-block;
	color: var(--color-ink-navy);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-back-to-top:hover,
.footer-back-to-top:focus {
	color: var(--color-fanooce-orange);
	text-decoration: none;
}

.footer-back-to-top:hover .footer-icon,
.footer-back-to-top:focus .footer-icon {
	transform: translateY(-0.2rem);
}

.footer-back-to-top:focus-visible {
	outline: 3px solid var(--color-ink-navy);
	outline-offset: 3px;
}

.footer-copy {
	font-size: 0.8em;
}

/* Form helpers */
.visually-hidden-input {
	display: none;
}

.form-result {
	display: none;
	margin-top: 12px;
	font-size: 0.9em;
}

/* FAQ */
.faq-item {
	border-top: 1px solid rgba(128, 128, 128, 0.22);
	padding-top: 22px;
	margin-top: 22px;
}
.faq-item:first-child {
	border-top: none;
	padding-top: 0;
	margin-top: 0;
}
.faq-question {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	color: var(--color-ink-navy);
	margin-bottom: 6px;
}

/* Client logos */
.client-logos {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
}

.clientlogo {
	max-width: 120px;
	max-height: 50px;
	margin: 2vw;
	filter: grayscale(1);
}

/* Bare Project standalone guide */
.bareproject-page {
	--bare-blue: var(--color-bare-project-blue);
	--bare-navy: var(--color-ink-navy);
}

.bareproject-page #why,
.bareproject-page #principles,
.bareproject-page #how,
.bareproject-page #explore {
	scroll-margin-top: calc(var(--main-navbar-height) + var(--interior-nav-height) + var(--navigation-clearance));
}

.bareproject-page .hero-section {
	padding-top: clamp(3.5rem, 7vw, 7rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
}

.bareproject-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
}

.bareproject-eyebrow {
	margin: 0 0 1rem;
	color: var(--bare-blue);
	font-size: 0.8rem;
	font-weight: bold;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.bareproject-hero-copy h1 {
	max-width: 18ch;
	margin-bottom: 0;
}

.bareproject-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.bareproject-primary-cta,
.bareproject-secondary-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 2px solid var(--bare-blue);
	border-radius: 4px;
	padding: 0.7rem 1.1rem;
	font-weight: bold;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.bareproject-primary-cta span,
.bareproject-secondary-cta span,
.learning-primary-cta span,
.learning-secondary-cta span,
.text-cta span,
.offering-cta-product span,
.fanooce-action span {
	display: inline-block;
	transition: transform 0.2s;
}

.bareproject-primary-cta:hover span,
.bareproject-primary-cta:focus span,
.bareproject-secondary-cta:hover span,
.bareproject-secondary-cta:focus span,
.learning-primary-cta:hover span,
.learning-primary-cta:focus span,
.learning-secondary-cta:hover span,
.learning-secondary-cta:focus span,
.text-cta:hover span,
.text-cta:focus span,
.offering-cta-product:hover span,
.offering-cta-product:focus span,
.fanooce-action:hover span,
.fanooce-action:focus span {
	transform: translateX(0.2rem);
}

.bareproject-primary-cta {
	background-color: var(--bare-blue);
	color: var(--color-white);
}

.bareproject-primary-cta:hover,
.bareproject-primary-cta:focus {
	background-color: var(--color-ink-navy);
	border-color: var(--color-ink-navy);
	color: var(--color-white);
	text-decoration: none;
}

.bareproject-secondary-cta {
	background-color: var(--color-white);
	color: var(--bare-blue);
}

.bareproject-secondary-cta:hover,
.bareproject-secondary-cta:focus {
	background-color: var(--bare-blue);
	color: var(--color-white);
	text-decoration: none;
}

.bareproject-primary-cta:focus-visible,
.bareproject-secondary-cta:focus-visible,
.bareproject-subnav a:focus-visible {
	outline: 3px solid var(--bare-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--color-white);
}

.bareproject-hero-panel {
	background-color: var(--bare-blue);
	border-radius: 4px;
	padding: clamp(1.75rem, 4vw, 3rem);
	color: var(--color-white);
}

.bareproject-hero-panel p {
	color: var(--color-white);
}

.bareproject-hero-panel .bareproject-panel-label {
	margin-bottom: 1.25rem;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
}

.bareproject-hero-panel .text-cta {
	margin-top: 0.75rem;
	color: var(--color-white);
	border-bottom-color: var(--color-white);
}

.bareproject-hero-panel .bareproject-app-cta {
	margin-top: 1.25rem;
	border-color: var(--color-white);
	background-color: var(--color-white);
	color: var(--bare-navy);
}

.bareproject-hero-panel .bareproject-app-cta:hover,
.bareproject-hero-panel .bareproject-app-cta:focus {
	border-color: var(--color-mist-gray);
	background-color: var(--color-mist-gray);
	color: var(--bare-navy);
}

.bareproject-hero-detail {
	max-width: 850px;
	margin-top: clamp(3rem, 6vw, 5rem);
}

.bareproject-hero-detail p {
	max-width: 72ch;
	margin-bottom: 0;
}

.bareproject-subnav {
	position: sticky;
	top: var(--main-navbar-height);
	z-index: 900;
	border-top: 1px solid rgba(128, 128, 128, 0.22);
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
}

.bareproject-subnav .container {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

.bareproject-subnav a {
	flex: 0 0 auto;
	border-radius: 4px;
	padding: 0.55rem 0.75rem;
	color: var(--bare-navy);
	font-size: 0.85em;
	font-weight: bold;
	text-decoration-color: transparent;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
	white-space: nowrap;
}

.bareproject-subnav a:hover,
.bareproject-subnav a:focus {
	background-color: transparent;
	color: var(--bare-blue);
	text-decoration-color: var(--bare-blue);
}

.bareproject-section {
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.bareproject-section-heading {
	max-width: 760px;
	margin-bottom: 2.5rem;
}

.bareproject-section-heading h2 {
	margin-bottom: 1rem;
}

.bareproject-section-heading p:last-child {
	margin-bottom: 0;
}

.bareproject-problem-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
	max-width: 1000px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bareproject-problem-grid li {
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-left: 4px solid var(--bare-blue);
	border-radius: 4px;
	padding: 1rem 1.25rem;
	background-color: var(--color-white);
}

.bareproject-section-close {
	max-width: 72ch;
	margin-top: 2rem;
	margin-bottom: 0;
}

.bareproject-principle-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.bareproject-principle-card {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 4px;
	padding: clamp(1.5rem, 3vw, 2rem);
	background-color: var(--color-white);
}

.bareproject-principle-card h3 {
	margin-top: 1.25rem;
	margin-bottom: 0.75rem;
	font-size: 1.25em;
}

.bareproject-principle-card p {
	margin-bottom: 0;
}

.bareproject-number,
.bareproject-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: var(--bare-blue);
	color: var(--color-white);
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-weight: bold;
}

.bareproject-adoption-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin-top: 2rem;
}

.bareproject-adoption-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-top: 4px solid var(--bare-blue);
	border-radius: 4px;
	padding: 1.5rem;
	background-color: var(--color-white);
}

.bareproject-adoption-card .bareproject-step-number {
	margin-bottom: 1rem;
}

.bareproject-adoption-card h3 {
	margin-bottom: 0.85rem;
	font-size: 1.25em;
}

.bareproject-adoption-card p {
	margin-bottom: 0;
}

.bareproject-closing-cta {
	background-color: var(--bare-navy);
	color: var(--color-mist-gray);
}

.bareproject-closing-cta .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.bareproject-closing-cta h2 {
	max-width: 20ch;
	color: var(--color-white);
}

.bareproject-closing-cta .bareproject-eyebrow {
	color: var(--color-mist-gray);
}

.bareproject-closing-cta p:not(.bareproject-eyebrow) {
	max-width: 60ch;
	margin-bottom: 0;
}

.bareproject-closing-cta .bareproject-primary-cta {
	flex: 0 0 auto;
	border-color: var(--color-white);
	background-color: var(--color-white);
	color: var(--bare-navy);
}

.bareproject-closing-cta .bareproject-primary-cta:hover,
.bareproject-closing-cta .bareproject-primary-cta:focus {
	border-color: var(--color-mist-gray);
	background-color: var(--color-mist-gray);
	color: var(--bare-navy);
}

@media (max-width: 991px) {
	.bareproject-hero-grid {
		grid-template-columns: 1fr;
	}

	.bareproject-hero-copy h1 {
		max-width: 24ch;
	}

	.bareproject-closing-cta .container {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.bareproject-problem-grid,
	.bareproject-principle-cards,
	.bareproject-adoption-cards {
		grid-template-columns: 1fr;
	}

	.bareproject-hero-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.bareproject-primary-cta,
	.bareproject-secondary-cta {
		justify-content: center;
	}

	.offerings-group-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}

	.bareproject-home-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

}

/* Learning guide */
.learning-page {
	--learning-orange: var(--color-fanooce-orange);
	--learning-navy: var(--color-ink-navy);
}

.learning-page #courses,
.learning-page #explore {
	scroll-margin-top: calc(var(--main-navbar-height) + var(--interior-nav-height) + var(--navigation-clearance));
}

.learning-page .hero-section {
	padding-top: clamp(3.5rem, 7vw, 7rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
}

.learning-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
	gap: clamp(2rem, 5vw, 6rem);
	align-items: center;
}

.learning-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 1rem;
	color: var(--learning-navy);
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.learning-eyebrow::before {
	width: 2rem;
	height: 3px;
	background-color: var(--learning-orange);
	content: "";
}

.learning-hero-copy h1 {
	margin-bottom: 1.25rem;
}

.learning-hero-copy > p:not(.learning-eyebrow) {
	margin-bottom: 0;
}

.learning-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.learning-primary-cta,
.learning-secondary-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 2px solid var(--learning-navy);
	border-radius: 4px;
	padding: 0.7rem 1.1rem;
	font-weight: bold;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.learning-primary-cta {
	border-color: var(--learning-orange);
	background-color: var(--learning-orange);
	color: var(--learning-navy);
}

.learning-primary-cta:hover,
.learning-primary-cta:focus {
	border-color: var(--learning-navy);
	background-color: var(--learning-navy);
	color: var(--color-white);
	text-decoration: none;
}

.learning-secondary-cta {
	border-color: var(--learning-orange);
	background-color: var(--color-white);
	color: var(--learning-navy);
}

.learning-secondary-cta:hover,
.learning-secondary-cta:focus {
	border-color: var(--learning-orange);
	background-color: var(--learning-orange);
	color: var(--learning-navy);
	text-decoration: none;
}

.learning-primary-cta:focus-visible,
.learning-secondary-cta:focus-visible,
.learning-subnav a:focus-visible {
	outline: 3px solid var(--learning-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--color-white);
}

.learning-hero-panel {
	border-radius: 4px;
	padding: clamp(1.75rem, 4vw, 3rem);
	background-color: var(--learning-navy);
	color: var(--color-white);
}

.learning-panel-label {
	margin-bottom: 0.5rem;
	color: var(--color-white);
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: 1.5em;
	font-weight: bold;
}

.learning-hero-panel > a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	padding: 1rem 0 0.75rem;
	color: var(--color-white);
	text-decoration-color: transparent;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color 0.2s, text-decoration-color 0.2s;
}

.learning-hero-panel > a:last-child {
	padding-bottom: 0;
}

.learning-hero-panel > a:hover,
.learning-hero-panel > a:focus {
	color: var(--color-white);
	text-decoration-color: var(--learning-orange);
}

.learning-hero-panel > a span {
	color: var(--color-mist-gray);
	font-size: 0.9em;
	transition: transform 0.2s;
}

.learning-hero-panel > a:hover span,
.learning-hero-panel > a:focus span {
	transform: translateX(0.2rem);
}

.learning-subnav {
	position: sticky;
	top: var(--main-navbar-height);
	z-index: 900;
	border-top: 1px solid rgba(128, 128, 128, 0.22);
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
}

.learning-subnav .container {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

.learning-subnav a {
	flex: 0 0 auto;
	border-radius: 4px;
	padding: 0.55rem 0.75rem;
	color: var(--learning-navy);
	font-size: 0.85em;
	font-weight: bold;
	text-decoration-color: transparent;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
	white-space: nowrap;
}

.learning-subnav a:hover,
.learning-subnav a:focus {
	background-color: transparent;
	color: var(--learning-navy);
	text-decoration-color: var(--learning-orange);
}

.learning-section {
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.learning-section-heading {
	max-width: 760px;
	margin-bottom: 2.5rem;
}

.learning-section-heading h2 {
	margin-bottom: 1rem;
}

.learning-section-heading p:last-child {
	margin-bottom: 0;
}

.learning-course-list {
	display: grid;
	gap: 2rem;
}

.learning-course-card {
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 4px;
	padding: clamp(1.25rem, 3vw, 2.5rem);
	background-color: var(--color-white);
	scroll-margin-top: calc(var(--main-navbar-height) + var(--interior-nav-height) + var(--navigation-clearance));
}

.learning-course-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.learning-course-header h3 {
	max-width: 34ch;
	margin-bottom: 0;
}

.learning-course-tagline {
	margin: 0.35rem 0 0;
	color: var(--color-slate-gray);
	font-size: 0.9em;
}

.learning-course-type {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin-bottom: 0.75rem;
	color: var(--learning-navy);
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.learning-course-type::before {
	width: 1.25rem;
	height: 3px;
	background-color: var(--learning-orange);
	content: "";
}

.learning-course-meta {
	margin: -0.35rem 0 0.75rem;
	color: var(--color-slate-gray);
	font-size: 0.85em;
}

.text-cta {
	--text-cta-accent: var(--color-fanooce-orange);
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 0.5rem;
	border-bottom: 2px solid var(--color-ink-navy);
	padding: 0.25rem 0;
	color: var(--color-ink-navy);
	font-weight: bold;
	text-decoration: none;
	transition: border-color 0.2s, color 0.2s;
	white-space: nowrap;
}

.text-cta:hover,
.text-cta:focus {
	border-bottom-color: var(--text-cta-accent);
	color: var(--color-ink-navy);
	text-decoration: none;
}

.text-cta:focus-visible {
	outline: 3px solid var(--color-ink-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--color-white);
}

.offering-card .text-cta {
	margin-top: 1.25rem;
}

.bareproject-page .text-cta {
	--text-cta-accent: var(--bare-blue);
}

.bareproject-hero-panel .text-cta {
	--text-cta-accent: var(--color-mist-gray);
}

.bareproject-hero-panel .text-cta:hover,
.bareproject-hero-panel .text-cta:focus {
	border-bottom-color: var(--text-cta-accent);
	color: var(--color-white);
	text-decoration: none;
}

.learning-course-content {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	padding-top: 2rem;
}

.learning-course-overview p:last-child {
	margin-bottom: 0;
}

.learning-course-card h4 {
	margin-bottom: 0.75rem;
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.learning-course-details {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
	align-content: start;
}

.learning-detail-group {
	border-top: 3px solid var(--learning-orange);
	padding-top: 0.85rem;
}

.learning-detail-group ul {
	margin: 0;
	padding-left: 1.15rem;
}

.learning-detail-group li + li {
	margin-top: 0.45rem;
}

.learning-closing {
	background-color: var(--learning-navy);
	color: var(--color-mist-gray);
}

.learning-closing-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.learning-closing h2 {
	max-width: 22ch;
	color: var(--color-white);
}

.learning-closing p:not(.learning-eyebrow) {
	max-width: 60ch;
	margin-bottom: 0;
}

.learning-closing .learning-eyebrow {
	color: var(--color-white);
}

.learning-closing .learning-primary-cta {
	flex: 0 0 auto;
	border-color: var(--color-white);
	background-color: var(--color-white);
	color: var(--learning-navy);
}

.learning-closing .learning-primary-cta:hover,
.learning-closing .learning-primary-cta:focus {
	border-color: var(--color-mist-gray);
	background-color: var(--color-mist-gray);
	color: var(--learning-navy);
}

@media (max-width: 991px) {
	.learning-hero-grid {
		grid-template-columns: 1fr;
	}

	.learning-hero-copy h1 {
		max-width: 24ch;
	}

	.learning-course-content {
		grid-template-columns: 1fr;
	}

	.learning-closing-inner {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.learning-hero-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.learning-course-header {
		flex-direction: column;
		gap: 1.25rem;
	}

	.text-cta {
		white-space: normal;
	}

	.learning-course-details {
		grid-template-columns: 1fr;
	}

}

/* Consultative engagements */
.engagement-page {
	--engagement-orange: var(--color-fanooce-orange);
	--engagement-navy: var(--color-ink-navy);
}

.engagement-page #engagements,
.engagement-page #delivery-snapshot,
.engagement-page #operations-optimization,
.engagement-page #explore {
	scroll-margin-top: calc(var(--main-navbar-height) + var(--interior-nav-height) + var(--navigation-clearance));
}

.engagement-hero {
	padding-top: clamp(3.5rem, 7vw, 7rem);
	padding-bottom: clamp(3rem, 6vw, 6rem);
}

.engagement-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0 0 1rem;
	color: var(--engagement-navy);
	font-size: 0.8em;
	font-weight: bold;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

.engagement-eyebrow::before {
	width: 2rem;
	height: 3px;
	background-color: var(--engagement-orange);
	content: "";
}

.engagement-hero-copy h1 {
	margin-bottom: 1.25rem;
}

.engagement-hero-copy > p:not(.engagement-eyebrow) {
	margin-bottom: 0;
}

.engagement-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

.engagement-primary-cta,
.engagement-secondary-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 2px solid var(--engagement-orange);
	border-radius: 4px;
	padding: 0.7rem 1.1rem;
	font-weight: bold;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.engagement-primary-cta {
	background-color: var(--engagement-orange);
	color: var(--engagement-navy);
}

.engagement-primary-cta:hover,
.engagement-primary-cta:focus {
	border-color: var(--engagement-navy);
	background-color: var(--engagement-navy);
	color: var(--color-white);
	text-decoration: none;
}

.engagement-secondary-cta {
	background-color: var(--color-white);
	color: var(--engagement-navy);
}

.engagement-secondary-cta:hover,
.engagement-secondary-cta:focus {
	background-color: var(--engagement-orange);
	color: var(--engagement-navy);
	text-decoration: none;
}

.engagement-primary-cta:focus-visible,
.engagement-secondary-cta:focus-visible,
.engagement-subnav a:focus-visible {
	outline: 3px solid var(--engagement-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--color-white);
}

.engagement-subnav {
	position: sticky;
	top: var(--main-navbar-height);
	z-index: 900;
	border-top: 1px solid rgba(128, 128, 128, 0.22);
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
	background-color: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(8px);
}

.engagement-subnav .container {
	display: flex;
	gap: 0.25rem;
	overflow-x: auto;
	padding-top: 0.45rem;
	padding-bottom: 0.45rem;
}

.engagement-subnav a {
	flex: 0 0 auto;
	padding: 0.55rem 0.75rem;
	border-radius: 4px;
	color: var(--engagement-navy);
	font-size: 0.85em;
	font-weight: bold;
	text-decoration-color: transparent;
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.35em;
	white-space: nowrap;
}

.engagement-subnav a:hover,
.engagement-subnav a:focus {
	color: var(--engagement-navy);
	text-decoration-color: var(--engagement-orange);
}

.engagement-section {
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: clamp(4rem, 8vw, 7rem);
}

.engagement-section-heading {
	max-width: 760px;
	margin-bottom: 2.5rem;
}

.engagement-section-heading h2 {
	margin-bottom: 1rem;
}

.engagement-section-heading p:last-child {
	margin-bottom: 0;
}

.engagement-list {
	display: grid;
	gap: 2rem;
}

.engagement-card {
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border: 1px solid rgba(128, 128, 128, 0.35);
	border-radius: 4px;
	background-color: var(--color-white);
}

.engagement-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(128, 128, 128, 0.22);
}

.engagement-card-header h3 {
	max-width: 34ch;
	margin-bottom: 0;
}

.engagement-card-type {
	margin-bottom: 0.75rem;
	color: var(--engagement-navy);
	font-size: 0.75em;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.engagement-card-type::before {
	display: inline-block;
	width: 1.25rem;
	height: 3px;
	margin-right: 0.55rem;
	background-color: var(--engagement-orange);
	content: "";
	vertical-align: middle;
}

.engagement-tagline {
	margin: 0.35rem 0 0;
	color: var(--color-slate-gray);
	font-size: 0.9em;
}

.engagement-card-content {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
	gap: clamp(2rem, 5vw, 4rem);
	padding-top: 2rem;
}

.engagement-overview p:last-child {
	margin-bottom: 0;
}

.engagement-card h4 {
	margin-bottom: 0.75rem;
	font-family: 'Outfit', system-ui, sans-serif;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.engagement-detail-group {
	border-top: 3px solid var(--engagement-orange);
	padding-top: 0.85rem;
}

.engagement-detail-group + .engagement-detail-group {
	margin-top: 1.75rem;
}

.engagement-detail-group ul {
	margin: 0;
	padding-left: 1.15rem;
}

.engagement-detail-group li + li {
	margin-top: 0.65rem;
}

.engagement-detail-group ul ul {
	margin-top: 0.45rem;
}

.engagement-detail-group ul ul li + li {
	margin-top: 0.25rem;
}

.engagement-closing {
	background-color: var(--engagement-navy);
	color: var(--color-mist-gray);
}

.engagement-closing-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

.engagement-closing h2 {
	max-width: 24ch;
	color: var(--color-white);
}

.engagement-closing .engagement-eyebrow {
	color: var(--color-white);
}

.engagement-closing p:not(.engagement-eyebrow) {
	max-width: 60ch;
	margin-bottom: 0;
}

.engagement-closing .engagement-primary-cta {
	flex: 0 0 auto;
	border-color: var(--color-white);
	background-color: var(--color-white);
	color: var(--engagement-navy);
}

@media (max-width: 991px) {
	.engagement-card-content {
		grid-template-columns: 1fr;
	}

	.engagement-closing-inner {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 767px) {
	.engagement-hero-actions,
	.engagement-card-header {
		flex-direction: column;
		align-items: stretch;
	}

	.engagement-primary-cta,
	.engagement-secondary-cta {
		width: 100%;
	}
}