@charset "UTF-8";

/* ==========================================================================
   Adaptive portfolio: styles for content the Worker adds
   (tailored greeting on /for/ links, view tabs, Leadership view).
   Uses the design tokens from portfolio1.css.
   ========================================================================== */

/* Tailored link (home page at /for/<code>)
   ========================================================================== */
.tailored-eyebrow {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-gray-dark);
}
.tailored-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary);
}
/* View tabs (project pages)
   ========================================================================== */
nav.view-tabs {
	/* Sticks right under the site's sticky nav; the nav (z-index 3) and its dropdowns stay on top */
	position: sticky;
	top: var(--nav-h);
	z-index: 2;
	height: auto;
	background-color: var(--color-off-white);
	/* Carry the background to the window's edges, not just the container's */
	box-shadow: 0 0 0 100vmax var(--color-off-white);
	clip-path: inset(0 -100vmax);
	font-weight: 400;
	padding-left: 0;
	padding-right: 0;
}
.view-tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px solid var(--color-gray-lighter);
}
.view-tabs li { margin-left: 0; }
/* With no label before them, the first tab lines up with the page text */
.view-tabs li:first-child a { padding-left: 0; }
.view-tabs ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.view-tabs a {
	display: block;
	padding: 12px 14px;
	color: var(--color-gray-dark);
	text-decoration: none;
	border-bottom: 3px solid transparent;
}
.view-tabs a { transition: color var(--transition-base); }
.view-tabs a:hover, .view-tabs a:focus-visible { color: var(--color-off-black); }
/* Sliding underline: once the script places it, it replaces the selected tab's own border */
.tabs-indicator {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 0;
	background: var(--primary);
	pointer-events: none;
}
.tabs-indicator.is-ready { transition: transform 0.3s ease, width 0.3s ease, opacity var(--transition-base); }
.view-tabs.has-indicator a[aria-current="page"] { border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) {
	.tabs-indicator.is-ready { transition: opacity var(--transition-base); }
}
/* Keyboard focus ring drawn inside the tab, since the sticky bar clips anything outside it */
.view-tabs a:focus-visible {
	outline: 2px solid var(--black);
	outline-offset: -2px;
	box-shadow: none;
}
.view-tabs a[aria-current="page"] {
	color: var(--color-off-black);
	font-weight: 600;
	border-bottom-color: var(--primary);
}
.view-note {
	margin: 1rem 0 1.5rem;
	padding: 12px 16px;
	border-left: 4px solid var(--primary);
	background: var(--color-white);
}
/* "Full case study" on the left, Next on the right; they stack on narrow screens */
.next-btn.has-full-link { justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* Leadership view
   ========================================================================== */
.leadership-headline {
	font-family: var(--font-body);
	font-size: var(--fs-h3);
	line-height: 1.4;
	margin-top: 0;
}
.leadership h2 { margin-top: 2rem; }
.leadership li { margin-bottom: 0.5rem; }
.leadership ol li { font-weight: 400; }
.principle {
	display: inline-block;
	margin-right: 4px;
	padding: 1px 8px;
	border-radius: 4px;
	background: #fff4d6;
	color: #5c4300;
	font-size: 0.8125rem;
	font-weight: 600;
	vertical-align: 1px;
}
.leadership-stats {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
}
.leadership-stats li {
	margin: 0;
	padding: 13px 15px; /* 1px less than before, so the thicker outline keeps the card the same size */
	border: 2px solid var(--color-blue);
	border-radius: var(--radius-md);
	background: var(--color-white);
}
.leadership-stats strong {
	display: block;
	font-family: var(--font-display);
	font-size: 2.5rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--color-blue);
}


/* Tailored link: top picks first, the rest behind "More products" */
#tailored-heading { margin: 0.25rem 0 0.75rem; }
.product-grid.is-collapsed .is-more { display: none; }
.pick-note {
	/* Pushes the note and button to the card's bottom so buttons line up across cards */
	margin: auto 0 0;
	padding: 8px 12px;
	border-left: 4px solid var(--primary);
	background: var(--color-off-white);
	font-size: 0.9375rem;
}
.more-products { margin-top: 1.5rem; display: flex; justify-content: center; }

/* Every tab fits on wider screens, so the chevrons show on phones only */
.tabs-chevron { display: none; }

@media (max-width: 767px) {
	nav.view-tabs { padding-left: 16px; padding-right: 16px; }
	/* One swipeable row on phones, so the sticky bar stays short */
	.view-tabs ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.view-tabs ul::-webkit-scrollbar { display: none; }
	.view-tabs a { padding: 10px 10px; white-space: nowrap; }
	/* Chevrons over the row's edges while tabs are hidden that way; tapping one slides the row */
	.tabs-chevron {
		display: flex;
		position: absolute;
		top: 0;
		bottom: 1px; /* leave the bar's bottom border showing */
		align-items: center;
		width: 56px;
		border: 0;
		color: var(--color-off-black);
		cursor: pointer;
	}
	.tabs-more {
		right: 0;
		justify-content: flex-end;
		padding: 0 12px 0 0;
		background: linear-gradient(to right, rgba(253, 253, 253, 0), var(--color-off-white) 45%);
	}
	.tabs-less {
		left: 0;
		justify-content: flex-start;
		padding: 0 0 0 12px;
		background: linear-gradient(to left, rgba(253, 253, 253, 0), var(--color-off-white) 45%);
	}
	.tabs-chevron[hidden] { display: none; }
}

/* Pages with sticky tabs: anchor jumps and keyboard focus land below the nav and the tabs (WCAG 2.4.11) */
html:has(nav.view-tabs) { scroll-padding-top: calc(var(--nav-h) + 73px); } /* tabs 57px + 16px */