/*
 * Per-block styles. Every value traces to TOKENS.md or the corresponding design reference.
 * Grids use auto-fill, never auto-fit — auto-fit stretches a lone card in the last row.
 */

/* -------------------------------------------------------------------------
 * nvs/hero
 * ---------------------------------------------------------------------- */

.nvs-hero {
	background-color: var(--nvs-navy);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.nvs-hero--image {
	background-image: var(--nvs-scrim-hero), var(--nvs-hero-image);
}

.nvs-hero > .nvs-container {
	padding-top: var(--nvs-pad-hero);
	padding-bottom: var(--nvs-pad-hero);
}

.nvs-hero--page > .nvs-container {
	padding-top: var(--nvs-pad-hero-page);
	padding-bottom: var(--nvs-pad-hero-page);
}

.nvs-hero__inner {
	max-width: 780px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 28px;
}

/* Sub-page heroes give the headline more room and sit tighter than the home hero. */
.nvs-hero--section .nvs-hero__inner {
	max-width: 940px;
	gap: 20px;
}

.nvs-hero .nvs-eyebrow {
	color: var(--nvs-blue-light);
}

.nvs-hero h1 {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-h1);
	line-height: 1.08;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-wrap: pretty;
}

.nvs-hero--section h1 {
	font-size: var(--nvs-size-h1-sub);
	line-height: 1.1;
}

.nvs-hero__sub {
	margin: 0;
	max-width: 640px;
	font-size: var(--nvs-size-lead);
	line-height: var(--nvs-leading-lead);
	color: var(--nvs-on-dark);
	text-wrap: pretty;
}

.nvs-hero .nvs-buttons {
	margin-top: 8px;
}

.nvs-hero .nvs-btn {
	padding: 18px 34px;
}

/* -------------------------------------------------------------------------
 * nvs/rich-text — prose
 * ---------------------------------------------------------------------- */

.nvs-rich-text__figure {
	margin: 0 0 32px;
}

.nvs-rich-text__figure--below {
	margin: 32px 0 0;
}

.nvs-rich-text__figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--nvs-radius-card);
}

.nvs-rich-text .nvs-section__header {
	margin-bottom: 24px;
}

/*
 * Consecutive prose sections are one document, not a stack of bands.
 *
 * Section padding is sized for the gap against a *different* section — a card grid, a CTA, a
 * different background. Two prose sections back to back apply it twice, so 88px of bottom padding
 * meets 88px of top padding and every heading in a long document sits in 176px of white. On the
 * privacy policy, which is 38 sections, that is most of the page.
 *
 * Collapse the top padding and shrink the bottom, but only between sections sharing a background —
 * where the colour changes the full gap is doing real work and has to stay.
 */
.nvs-section--bg-white.nvs-rich-text + .nvs-section--bg-white.nvs-rich-text > .nvs-container,
.nvs-section--bg-light.nvs-rich-text + .nvs-section--bg-light.nvs-rich-text > .nvs-container {
	padding-top: 0;
}

.nvs-section--bg-white.nvs-rich-text:has(+ .nvs-section--bg-white.nvs-rich-text) > .nvs-container,
.nvs-section--bg-light.nvs-rich-text:has(+ .nvs-section--bg-light.nvs-rich-text) > .nvs-container {
	padding-bottom: var(--nvs-pad-prose-stack);
}

.nvs-prose {
	font-size: 16.5px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

.nvs-prose > *:first-child {
	margin-top: 0;
}

.nvs-prose > *:last-child {
	margin-bottom: 0;
}

.nvs-prose p {
	margin: 0 0 20px;
	text-wrap: pretty;
}

/*
 * theme.json sets blockGap to 0 so our sections can abut with no seam. Prose therefore owns its
 * own vertical rhythm — including for the core blocks a blog post body is written with.
 */
.nvs-prose h2 {
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-h2-narrow);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--nvs-navy);
	margin: 44px 0 16px;
}

.nvs-prose h3 {
	font-family: var(--nvs-font-heading);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--nvs-navy);
	margin: 36px 0 14px;
}

.nvs-prose figure,
.nvs-prose .wp-block-image,
.nvs-prose .wp-block-embed {
	margin: 32px 0;
}

.nvs-prose figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--nvs-radius-card);
}

.nvs-prose figcaption {
	margin-top: 10px;
	font-size: 14.5px;
	color: var(--nvs-ink-faint);
}

.nvs-prose h4 {
	font-family: var(--nvs-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--nvs-navy);
	margin: 28px 0 12px;
}

.nvs-prose ul,
.nvs-prose ol {
	margin: 0 0 22px;
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nvs-prose li {
	line-height: var(--nvs-leading-body);
}

.nvs-prose li::marker {
	color: var(--nvs-blue);
}

.nvs-prose strong {
	color: var(--nvs-navy);
	font-weight: 600;
}

.nvs-prose iframe,
.nvs-prose video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--nvs-radius-card);
	background: var(--nvs-navy);
	margin: 12px 0 0;
}

.nvs-prose blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 24px;
	border-left: 3px solid var(--nvs-blue);
	font-size: 18px;
	line-height: var(--nvs-leading-lead);
	color: var(--nvs-navy);
}

/* -------------------------------------------------------------------------
 * nvs/card-grid
 * ---------------------------------------------------------------------- */

.nvs-card-grid__items {
	margin-top: 56px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--nvs-col-min, 320px), 1fr));
	gap: 32px;
}

.nvs-card-grid--tile .nvs-card-grid__items,
.nvs-card-grid--accentTile .nvs-card-grid__items,
.nvs-card-grid--plain .nvs-card-grid__items {
	margin-top: 48px;
	gap: 28px;
}

.nvs-card-grid__items:first-child {
	margin-top: 0;
}

/* imageCard */
.nvs-card {
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow var(--nvs-duration-hover) ease, transform var(--nvs-duration-hover) ease;
}

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

.nvs-card__media img {
	width: 100%;
	height: 208px;
	object-fit: cover;
	display: block;
}

.nvs-card__body {
	padding: 30px 30px 34px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.nvs-card__body h3 {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-card-h3);
	font-weight: 700;
	line-height: 1.3;
	color: var(--nvs-navy);
}

.nvs-card__body p {
	margin: 0;
	font-size: var(--nvs-size-card-body);
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

.nvs-card__body .nvs-textlink {
	margin-top: auto;
	padding-top: 4px;
	align-self: flex-start;
}

/* tile */
.nvs-tile {
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	padding: 28px 26px 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* A tile that leads with an icon — see the `icon`/`iconName` item keys in card-grid/render.php. */
.nvs-tile__icon {
	margin-bottom: 4px;
}

.nvs-tile__icon img {
	width: 56px;
	height: 56px;
	object-fit: contain;
	display: block;
}

/*
 * The inline-SVG variant (inc/icons.php). Slightly smaller than the raster one because these are
 * solid single-colour glyphs rather than illustrations, and they read heavier at the same box size.
 * Height is left to the aspect ratio: the set has three different viewBox widths, so forcing a
 * square would letterbox the wide ones.
 */
.nvs-tile__icon .nvs-icon {
	width: auto;
	height: 44px;
	max-width: 100%;
	display: block;
	color: var(--nvs-blue);
}

.nvs-tile h4 {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-tile-h4);
	font-weight: 700;
	color: var(--nvs-navy);
}

.nvs-tile p {
	margin: 0;
	font-size: var(--nvs-size-card-body);
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

.nvs-tile .nvs-textlink {
	margin-top: 4px;
	align-self: flex-start;
}

/* accentTile — 3px blue top border on surface-alt */
.nvs-tile--accent {
	background: var(--nvs-surface-alt);
	border: 0;
	border-top: 3px solid var(--nvs-blue);
	border-radius: 0;
}

/*
 * A lead sentence inside a tile: authored as <strong> at the start of the text field, promoted to
 * its own line so the editor never has to pick a size or colour.
 */
.nvs-tile p > strong:first-child {
	display: block;
	font-size: 16px;
	line-height: var(--nvs-leading-body);
	font-weight: 600;
	color: var(--nvs-navy);
	margin-bottom: 6px;
}

/* plain — no chrome, larger heading. Used for capability columns. */
.nvs-tile--plain {
	background: transparent;
	border: 0;
	padding: 0;
	border-radius: 0;
	gap: 12px;
}

.nvs-tile--plain h4 {
	font-size: clamp(21px, 2.3vw, 27px);
	line-height: 1.25;
}

.nvs-tile--plain p {
	font-size: 16.5px;
	line-height: var(--nvs-leading-body);
}

/* -------------------------------------------------------------------------
 * nvs/split-content
 * ---------------------------------------------------------------------- */

.nvs-split > .nvs-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	gap: var(--nvs-gap-split);
	align-items: center;
}

.nvs-split__text {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.nvs-split__text p {
	margin: 0;
	font-size: 16.5px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

.nvs-split__media {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.nvs-split--media-left > .nvs-container .nvs-split__media {
	order: -1;
}

.nvs-split__media img {
	width: 100%;
	height: auto;
	border-radius: var(--nvs-radius-card);
	display: block;
}

.nvs-checklist {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nvs-checklist li {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 14px;
	font-size: 16px;
	line-height: var(--nvs-leading-lead);
	color: var(--nvs-ink);
}

.nvs-checklist__mark {
	color: var(--nvs-blue);
	font-weight: 700;
}

.nvs-checklist strong {
	color: var(--nvs-navy);
	font-weight: 600;
}

.nvs-stats {
	margin-top: 24px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 24px;
}

.nvs-stat {
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.nvs-section--bg-white .nvs-stat {
	background: var(--nvs-surface-alt);
}

.nvs-stat__value {
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-stat);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--nvs-navy);
	line-height: 1.1;
}

.nvs-stat__label {
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--nvs-ink);
}

/* -------------------------------------------------------------------------
 * nvs/cta
 * ---------------------------------------------------------------------- */

.nvs-cta--bar {
	background: var(--nvs-blue);
}

.nvs-cta--bar > .nvs-container,
.nvs-cta--photoBar > .nvs-container {
	padding-top: 48px;
	padding-bottom: 48px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.nvs-cta--photoBar {
	position: relative;
	background: var(--nvs-navy);
	overflow: hidden;
}

.nvs-cta--photoBar > .nvs-container {
	position: relative;
	z-index: 1;
	padding-top: clamp(56px, 6vw, 88px);
	padding-bottom: clamp(56px, 6vw, 88px);
	gap: 28px;
}

.nvs-cta__backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.3;
}

.nvs-cta__bar-heading {
	margin: 0;
	max-width: 660px;
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-cta-h3);
	line-height: 1.25;
	font-weight: 700;
	color: #ffffff;
	text-wrap: pretty;
}

.nvs-cta--panel {
	background-color: var(--nvs-navy-deep);
	background-image: linear-gradient(var(--nvs-scrim-cta), var(--nvs-scrim-cta)), var(--nvs-cta-image);
	background-size: cover;
	background-position: center;
}

.nvs-cta--panel > .nvs-container {
	max-width: var(--nvs-width-faq);
	padding-top: var(--nvs-pad-cta-panel);
	padding-bottom: var(--nvs-pad-cta-panel);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}

.nvs-cta__panel-heading {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.14;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #ffffff;
	text-wrap: pretty;
}

.nvs-cta__panel-text {
	margin: 0;
	max-width: 700px;
	font-size: var(--nvs-size-body);
	line-height: var(--nvs-leading-body);
	color: var(--nvs-on-dark);
	text-wrap: pretty;
}

.nvs-cta .nvs-buttons {
	margin-top: 8px;
}

.nvs-cta--bar .nvs-buttons,
.nvs-cta--photoBar .nvs-buttons {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
 * nvs/faq
 * ---------------------------------------------------------------------- */

.nvs-faq > .nvs-container {
	max-width: var(--nvs-width-faq);
}

.nvs-faq__heading {
	margin: 0 0 40px;
}

.nvs-faq__items {
	display: flex;
	flex-direction: column;
}

.nvs-faq__item {
	border-top: 1px solid var(--nvs-border);
}

.nvs-faq__item:last-child {
	border-bottom: 1px solid var(--nvs-border);
}

.nvs-faq__item > summary {
	cursor: pointer;
	list-style: none;
	padding: 24px 40px 24px 0;
	font-family: var(--nvs-font-heading);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--nvs-navy);
	position: relative;
}

.nvs-faq__item > summary::-webkit-details-marker {
	display: none;
}

/*
 * The question is an <h3> so it carries document structure, but it should look like the summary
 * text it replaced — inherit everything rather than restate it, so the two can never drift.
 */
.nvs-faq__question {
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

.nvs-faq__item > summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--nvs-blue);
	border-bottom: 2px solid var(--nvs-blue);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--nvs-duration-hover) ease;
}

.nvs-faq__item[open] > summary::after {
	transform: translateY(-30%) rotate(225deg);
}

.nvs-faq__answer {
	margin: 0;
	padding: 0 40px 26px 0;
	font-size: 16px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

/* -------------------------------------------------------------------------
 * nvs/case-highlight-grid
 * ---------------------------------------------------------------------- */

.nvs-cases__heading {
	margin: 0;
	max-width: 760px;
}

.nvs-cases__items {
	margin-top: 48px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
	gap: 36px;
}

.nvs-case {
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.nvs-case__media img {
	width: 100%;
	height: 232px;
	object-fit: cover;
	display: block;
}

.nvs-case__body {
	padding: 32px 32px 36px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	flex: 1;
}

.nvs-case__body h3 {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	color: var(--nvs-navy);
	text-wrap: pretty;
}

.nvs-case__body p {
	margin: 0;
	font-size: var(--nvs-size-card-body);
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

.nvs-case__body p strong,
.nvs-case__label {
	color: var(--nvs-navy);
	font-weight: 600;
}

.nvs-case__body .nvs-textlink {
	margin-top: auto;
	padding-top: 4px;
	font-weight: 700;
	align-self: flex-start;
}

.nvs-cases__footer {
	margin-top: 48px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	padding: 34px 36px;
}

.nvs-cases__footer h3 {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: clamp(19px, 2vw, 24px);
	font-weight: 700;
	color: var(--nvs-navy);
}

/* -------------------------------------------------------------------------
 * Archives and single posts
 *
 * Phase 1 renders these with core query-loop blocks inside our section chrome;
 * nvs/post-list replaces the loop in phase 2.
 * ---------------------------------------------------------------------- */

.nvs-archive .nvs-h2 {
	margin: 0 0 48px;
}

/* Archive cards are a grid, so the zeroed blockGap has to be replaced explicitly. */
.nvs-archive__grid > li > * {
	margin-block: 0;
}

.nvs-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nvs-archive__grid > li {
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	overflow: hidden;
	padding: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: box-shadow var(--nvs-duration-hover) ease, transform var(--nvs-duration-hover) ease;
}

.nvs-archive__grid > li:hover {
	box-shadow: var(--nvs-shadow-hover);
	transform: translateY(-4px);
}

.nvs-archive__grid .nvs-archive__thumb {
	margin: 0;
}

.nvs-archive__grid .nvs-archive__thumb img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	display: block;
}

.nvs-archive__grid > li > :not(.nvs-archive__thumb) {
	margin-left: 28px;
	margin-right: 28px;
}

.nvs-archive__grid .nvs-label {
	margin-top: 24px;
}

.nvs-archive__grid .nvs-h3 a {
	color: var(--nvs-navy);
	text-decoration: none;
}

.nvs-archive__grid .nvs-h3 a:hover {
	color: var(--nvs-blue);
}

.nvs-archive__grid p {
	font-size: var(--nvs-size-card-body);
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
	margin: 0;
}

.nvs-archive__pagination {
	margin-top: 48px;
	display: flex;
	gap: 12px;
	align-items: center;
	font-weight: 600;
}

.nvs-post-hero .nvs-hero__inner {
	max-width: 100%;
}

.nvs-post-hero__date {
	font-size: 15px;
	color: var(--nvs-on-dark-muted);
}

.nvs-post-body__figure {
	margin: 0 0 36px;
}

.nvs-post-body__figure img {
	width: 100%;
	height: auto;
	border-radius: var(--nvs-radius-card);
	display: block;
}

/* -------------------------------------------------------------------------
 * Narrow viewports
 * ---------------------------------------------------------------------- */

@media (max-width: 900px) {
	.nvs-cases__items {
		grid-template-columns: 1fr;
	}

	.nvs-split > .nvs-container {
		grid-template-columns: 1fr;
	}

	.nvs-split--media-left > .nvs-container .nvs-split__media {
		order: 0;
	}
}

@media (max-width: 600px) {
	:root {
		--nvs-gutter: 20px;
	}

	.nvs-card-grid__items,
	.nvs-cases__items {
		grid-template-columns: 1fr;
	}

	.nvs-cta--bar > .nvs-container,
	.nvs-cta--photoBar > .nvs-container,
	.nvs-cases__footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.nvs-btn {
		min-height: 44px;
	}
}

/* -------------------------------------------------------------------------
 * nvs/steps
 * ---------------------------------------------------------------------- */

.nvs-steps__list {
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: nvs-step;
}

.nvs-steps__list:first-child {
	margin-top: 0;
}

.nvs-step {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 24px;
	padding: 28px 0;
	border-top: 1px solid var(--nvs-border);
}

.nvs-step:last-child {
	border-bottom: 1px solid var(--nvs-border);
}

.nvs-step__number {
	font-family: var(--nvs-font-heading);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--nvs-blue);
	line-height: 1.2;
}

.nvs-step__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nvs-step__body p {
	margin: 0;
	font-size: 16px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

/* Card layout: numbered tiles instead of rows. */
.nvs-steps--cards .nvs-steps__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 28px;
}

.nvs-steps--cards .nvs-step {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px 26px 32px;
	border: 1px solid var(--nvs-border);
	border-top: 3px solid var(--nvs-blue);
	border-radius: var(--nvs-radius-card);
	background: var(--nvs-surface);
}

.nvs-steps--cards .nvs-step:last-child {
	border-bottom: 1px solid var(--nvs-border);
}

/* -------------------------------------------------------------------------
 * nvs/meta-band
 * ---------------------------------------------------------------------- */

.nvs-meta-band__list {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 32px;
}

.nvs-meta-band__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nvs-meta-band__item dt {
	margin: 0;
}

.nvs-meta-band__value {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--nvs-navy);
}

.nvs-meta-band--stats .nvs-meta-band__value {
	font-size: var(--nvs-size-stat);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

/* -------------------------------------------------------------------------
 * nvs/logo-grid
 * ---------------------------------------------------------------------- */

.nvs-logo-grid__items {
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--nvs-col-min, 200px), 1fr));
	gap: 24px;
}

.nvs-logo-grid__items:first-child {
	margin-top: 0;
}

.nvs-logo-grid__item {
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	background: var(--nvs-surface);
	min-height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px 24px;
}

.nvs-logo-grid__item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.nvs-logo-grid__item img {
	max-height: 72px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

.nvs-logo-grid__name {
	font-family: var(--nvs-font-heading);
	font-size: 16px;
	font-weight: 700;
	color: var(--nvs-navy);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * nvs/team-grid
 * ---------------------------------------------------------------------- */

.nvs-team__items {
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--nvs-col-min, 220px), 1fr));
	gap: 32px;
}

.nvs-team__items:first-child {
	margin-top: 0;
}

.nvs-team__member {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/*
 * `height: auto` is load-bearing, not decoration. wp_get_attachment_image() emits width/height
 * attributes, which map to the width/height CSS properties as presentational hints. `width: 100%`
 * out-specifies the width hint, but with no `height` declaration the height hint wins — so every
 * photo rendered at its own intrinsic height and the row came out ragged. Setting height auto lets
 * aspect-ratio size the box. Every other image rule in this file already sets a height for the
 * same reason.
 */
.nvs-team__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: var(--nvs-radius-card);
	filter: grayscale(0.15);
	margin-bottom: 14px;
}

.nvs-team__name {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--nvs-navy);
}

.nvs-team__role {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--nvs-blue);
	font-weight: 600;
}

.nvs-team__bio {
	margin: 4px 0 0;
	font-size: 15px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

.nvs-team__linkedin {
	margin-top: 6px;
	width: 34px;
	height: 34px;
	border: 1px solid var(--nvs-border);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--nvs-ink-muted);
	transition: background-color var(--nvs-duration-hover) ease, color var(--nvs-duration-hover) ease, border-color var(--nvs-duration-hover) ease;
}

.nvs-team__linkedin:hover {
	background: var(--nvs-blue);
	border-color: var(--nvs-blue);
	color: #ffffff;
}

/* -------------------------------------------------------------------------
 * nvs/office-grid
 * ---------------------------------------------------------------------- */

.nvs-offices__items {
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--nvs-col-min, 280px), 1fr));
	gap: 28px;
}

.nvs-offices__items:first-child {
	margin-top: 0;
}

.nvs-office {
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.nvs-office__media img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
}

.nvs-office__body {
	padding: 26px 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}

.nvs-office__badge {
	align-self: flex-start;
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-label);
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #ffffff;
	background: var(--nvs-blue);
	padding: 5px 10px;
	border-radius: var(--nvs-radius-control);
}

.nvs-office__address {
	margin: 0;
	font-style: normal;
	font-size: 15.5px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

.nvs-office__contact {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 15.5px;
	color: var(--nvs-ink);
}

.nvs-office__contact > div {
	display: grid;
	grid-template-columns: 18px 1fr;
	gap: 10px;
}

.nvs-office__contact dt {
	margin: 0;
	font-weight: 700;
	color: var(--nvs-ink-faint);
}

.nvs-office__contact dd {
	margin: 0;
}

.nvs-office .nvs-textlink {
	margin-top: auto;
	padding-top: 6px;
	align-self: flex-start;
}

/* -------------------------------------------------------------------------
 * Forms — nvs/contact-form and the listing controls
 * ---------------------------------------------------------------------- */

.nvs-contact--split > .nvs-container {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
	gap: var(--nvs-gap-split);
	align-items: start;
}

.nvs-contact__main .nvs-h2 {
	margin: 0 0 28px;
}

.nvs-form {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 20px 24px;
}

.nvs-form__row {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nvs-form__row--full,
.nvs-form__actions {
	grid-column: 1 / -1;
}

.nvs-form__label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--nvs-navy);
}

.nvs-form__required {
	color: var(--nvs-danger);
}

.nvs-form__control {
	width: 100%;
	font-family: var(--nvs-font-body);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--nvs-navy);
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border-input);
	border-radius: var(--nvs-radius-control);
	padding: 12px 14px;
}

.nvs-form__control:focus {
	outline: 2px solid var(--nvs-blue);
	outline-offset: 1px;
	border-color: var(--nvs-blue);
}

textarea.nvs-form__control {
	resize: vertical;
	min-height: 120px;
}

.nvs-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 4px;
}

.nvs-form__consent {
	margin: 0;
	flex: 1 1 260px;
	font-size: 13.5px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink-faint);
}

.nvs-form__notice {
	margin: 0 0 24px;
	padding: 16px 20px;
	border-radius: var(--nvs-radius-card);
	font-size: 15.5px;
	line-height: var(--nvs-leading-body);
	border: 1px solid var(--nvs-border);
}

.nvs-form__notice--ok {
	border-left: 3px solid var(--nvs-green);
	background: var(--nvs-surface-alt);
	color: var(--nvs-navy);
}

.nvs-form__notice--error {
	border-left: 3px solid var(--nvs-danger);
	background: var(--nvs-surface-alt);
	color: var(--nvs-navy);
}

.nvs-contact__aside {
	background: var(--nvs-surface-alt);
	border-radius: var(--nvs-radius-card);
	padding: 32px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.nvs-contact__aside p {
	margin: 0;
	font-size: 15.5px;
	line-height: var(--nvs-leading-body);
}

.nvs-contact__phone {
	font-family: var(--nvs-font-heading);
	font-size: 20px;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * nvs/post-list and nvs/job-board
 * ---------------------------------------------------------------------- */

.nvs-filters {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.nvs-chip {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--nvs-ink);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-control);
	padding: 9px 16px;
	background: var(--nvs-surface);
	transition: background-color var(--nvs-duration-hover) ease, color var(--nvs-duration-hover) ease, border-color var(--nvs-duration-hover) ease;
}

.nvs-chip:hover,
.nvs-chip.is-active {
	background: var(--nvs-blue);
	border-color: var(--nvs-blue);
	color: #ffffff;
}

.nvs-listing-search {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 560px;
}

.nvs-listing-search .nvs-form__control {
	flex: 1 1 240px;
}

.nvs-post-list__items {
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--nvs-col-min, 340px), 1fr));
	gap: 36px;
}

.nvs-post-list__items .nvs-card__body h3 {
	margin: 0;
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-card-h3);
	font-weight: 700;
	line-height: 1.3;
}

.nvs-post-list__items .nvs-card__body h3 a {
	color: var(--nvs-navy);
}

.nvs-post-list__items .nvs-card__body h3 a:hover {
	color: var(--nvs-blue);
}

.nvs-pagination {
	margin-top: 48px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.nvs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-control);
	font-size: 15px;
	font-weight: 600;
	color: var(--nvs-ink);
}

.nvs-pagination .page-numbers:hover,
.nvs-pagination .page-numbers.current {
	background: var(--nvs-blue);
	border-color: var(--nvs-blue);
	color: #ffffff;
}

.nvs-jobs__filters {
	margin-top: 40px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 20px 24px;
	align-items: end;
}

.nvs-jobs__filter {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nvs-jobs__count {
	margin: 28px 0 0;
	font-family: var(--nvs-font-heading);
	font-size: 15px;
	font-weight: 700;
	color: var(--nvs-ink-muted);
}

.nvs-jobs__items {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
}

.nvs-job {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 26px 0;
	border-top: 1px solid var(--nvs-border);
}

.nvs-job:last-child {
	border-bottom: 1px solid var(--nvs-border);
}

.nvs-job h3 {
	margin: 0 0 6px;
}

.nvs-job h3 a {
	color: var(--nvs-navy);
}

.nvs-job h3 a:hover {
	color: var(--nvs-blue);
}

.nvs-job__meta {
	margin: 0;
	font-size: 15px;
	color: var(--nvs-ink-muted);
}

.nvs-empty {
	margin-top: 40px;
	padding: 48px 40px;
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	background: var(--nvs-surface);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.nvs-empty--dashed {
	border-style: dashed;
	border-color: var(--nvs-border-input);
	background: transparent;
}

.nvs-empty p {
	margin: 0;
	max-width: 560px;
	font-size: 16px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-ink);
}

.nvs-empty .nvs-btn {
	margin-top: 8px;
}

.nvs-editor-empty {
	padding: 32px;
	text-align: center;
	color: var(--nvs-ink-muted);
}

/* -------------------------------------------------------------------------
 * nvs/site-map
 * ---------------------------------------------------------------------- */

.nvs-sitemap__columns {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 40px 32px;
}

.nvs-sitemap__title {
	margin: 0 0 16px;
	font-family: var(--nvs-font-heading);
	font-size: var(--nvs-size-tile-h4);
	font-weight: 700;
	color: var(--nvs-navy);
}

.nvs-sitemap__list,
.nvs-sitemap__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.nvs-sitemap__list ul {
	margin: 10px 0 0 16px;
	padding-left: 14px;
	border-left: 2px solid var(--nvs-border);
}

.nvs-sitemap__list a {
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--nvs-ink);
}

.nvs-sitemap__list a:hover {
	color: var(--nvs-blue);
}

@media (max-width: 900px) {
	.nvs-contact--split > .nvs-container {
		grid-template-columns: 1fr;
	}
}

.nvs-split__footnote {
	margin: 8px 0 0;
	font-size: 16.5px;
	line-height: var(--nvs-leading-body);
	font-weight: 700;
	color: var(--nvs-navy);
}

/* -------------------------------------------------------------------------
 * nvs/member-login, nvs/member-signup, nvs/member-profile
 *
 * The member forms reuse .nvs-form__* wholesale. The only structural difference is that they stack
 * in a single column instead of the contact form's auto-fill grid — a sign-in form reads badly two
 * fields wide.
 * ---------------------------------------------------------------------- */

.nvs-member-auth__panel {
	max-width: 480px;
	margin: 0 auto;
}

.nvs-member-profile {
	max-width: 560px;
}

.nvs-member-auth__panel .nvs-h2 {
	margin: 0 0 20px;
}

.nvs-member-auth__panel .nvs-lead {
	margin: 0 0 28px;
}

.nvs-form--stack {
	grid-template-columns: 1fr;
}

.nvs-form__row--check {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.nvs-form__row--check label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--nvs-navy);
}

.nvs-form__hint {
	font-size: 13px;
	line-height: 1.5;
	color: var(--nvs-ink-faint);
}

.nvs-form__strength {
	font-size: 13px;
	font-weight: 600;
	color: var(--nvs-ink-faint);
}

.nvs-form__strength[data-level="0"],
.nvs-form__strength[data-level="1"] {
	color: var(--nvs-danger);
}

.nvs-form__strength[data-level="2"] {
	color: #996800;
}

/*
 * 0-4 are zxcvbn scores and 5 is a confirm-field mismatch — not a sixth strength. Level 4 had no
 * rule at all, so the strongest password rendered in the same faint grey as no verdict at all.
 */
.nvs-form__strength[data-level="3"],
.nvs-form__strength[data-level="4"] {
	color: var(--nvs-green);
}

.nvs-form__strength[data-level="5"] {
	color: var(--nvs-danger);
}

.nvs-form__fieldset {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 12px 0 0;
	padding: 24px 0 0;
	border: 0;
	border-top: 1px solid var(--nvs-border);
}

.nvs-form__legend {
	padding: 0;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nvs-navy);
}

/* The 6-digit code gets its own treatment: wide tracking so digits are easy to check. */
.nvs-form__control--code {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.4em;
	text-align: center;
	padding: 14px 14px 14px 24px;
}

.nvs-form__notice--info {
	border-left: 3px solid var(--nvs-blue);
	background: var(--nvs-surface-alt);
	color: var(--nvs-navy);
}

.nvs-member-auth__sentto,
.nvs-member-auth__signedin {
	margin: 0 0 24px;
	font-size: 15.5px;
	line-height: var(--nvs-leading-body);
	color: var(--nvs-navy);
}

.nvs-member-auth__secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--nvs-border);
	font-size: 14.5px;
}

.nvs-member-auth__secondary form {
	margin: 0;
}

/* Resend / start over are real form submissions, so they must be buttons — styled as links. */
.nvs-textlink--button {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	cursor: pointer;
}

.nvs-member-profile__confirm {
	margin: 0 0 32px;
	padding: 24px;
	background: var(--nvs-surface-alt);
	border-radius: var(--nvs-radius-card);
}

.nvs-member-profile__confirm .nvs-h3 {
	margin: 0 0 12px;
}

/* -------------------------------------------------------------------------
 * nvs/resource-list
 * ---------------------------------------------------------------------- */

.nvs-resource-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--nvs-resource-columns, 1), minmax(0, 1fr));
	gap: 2px 40px;
}

.nvs-resource-list__row {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: baseline;
	gap: 4px 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--nvs-border);
}

.nvs-resource-list__icon {
	grid-row: 1 / span 2;
	align-self: center;
	display: inline-flex;
	color: var(--nvs-ink-faint);
}

.nvs-resource-list__row--pdf .nvs-resource-list__icon {
	color: var(--nvs-danger);
}

.nvs-resource-list__row--video .nvs-resource-list__icon {
	color: var(--nvs-blue);
}

.nvs-resource-list__row--doc .nvs-resource-list__icon,
.nvs-resource-list__row--ppt .nvs-resource-list__icon {
	color: var(--nvs-blue-dark);
}

.nvs-resource-list__row--xls .nvs-resource-list__icon {
	color: var(--nvs-green);
}

.nvs-resource-list__link {
	font-size: 16px;
	line-height: 1.5;
	font-weight: 600;
	color: var(--nvs-navy);
	text-decoration: none;
}

.nvs-resource-list__link:hover,
.nvs-resource-list__link:focus-visible {
	color: var(--nvs-blue);
	text-decoration: underline;
}

.nvs-resource-list__link--locked {
	color: var(--nvs-ink-faint);
	font-weight: 500;
}

.nvs-resource-list__meta {
	grid-column: 2;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--nvs-ink-faint);
}

.nvs-file-icon {
	flex: none;
}

@media (max-width: 700px) {
	.nvs-resource-list__items {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Card bullets and the "Watch video" link (nvs/card-grid)
 * ---------------------------------------------------------------------- */

.nvs-card__bullets {
	margin: 12px 0 0;
	padding: 0 0 0 20px;
	list-style: disc;
}

.nvs-card__bullet {
	margin: 0 0 5px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--nvs-ink);
}

.nvs-card__bullet::marker {
	color: var(--nvs-green);
}

/* A bullet that carries a member file reads as a link, marked as opening in a new tab. */
.nvs-card__bullet--file > a {
	color: var(--nvs-blue);
	text-decoration: none;
	font-weight: 600;
}

.nvs-card__bullet--file > a::after {
	content: "\2197";
	display: inline-block;
	margin-left: 5px;
	font-weight: 700;
	text-decoration: none;
}

.nvs-card__bullet--file > a:hover,
.nvs-card__bullet--file > a:focus-visible {
	color: var(--nvs-blue-dark);
	text-decoration: underline;
}

.nvs-card__video {
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * nvs/member-login — "beside copy" layout
 *
 * Same grid-on-the-container approach as .nvs-contact--split, and it collapses at the same 900px
 * so the two read consistently. The form column is capped rather than fluid: a sign-in form that
 * grows to half a 1280px canvas looks broken.
 * ---------------------------------------------------------------------- */

.nvs-member-auth--split > .nvs-container {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(320px, 440px);
	gap: var(--nvs-gap-split);
	align-items: start;
}

.nvs-member-auth--split .nvs-member-auth__panel {
	max-width: none;
	margin: 0;
}

.nvs-member-auth__aside .nvs-eyebrow {
	display: block;
	margin: 0 0 12px;
}

.nvs-member-auth__aside .nvs-h2 {
	margin: 0 0 20px;
}

.nvs-member-auth__aside .nvs-prose > :last-child {
	margin-bottom: 0;
}

.nvs-member-auth__aside .nvs-prose ul {
	margin: 0;
	padding-left: 20px;
}

.nvs-member-auth__aside .nvs-prose li {
	margin: 0 0 12px;
}

.nvs-member-auth__aside .nvs-prose li::marker {
	color: var(--nvs-green);
}

/* Give the form a card of its own so it reads as a distinct panel next to the copy. */
.nvs-member-auth--split .nvs-member-auth__panel {
	background: var(--nvs-surface);
	border: 1px solid var(--nvs-border);
	border-radius: var(--nvs-radius-card);
	padding: 36px 32px;
}

.nvs-section--bg-white .nvs-member-auth--split .nvs-member-auth__panel {
	background: var(--nvs-surface-alt);
}

@media (max-width: 900px) {
	.nvs-member-auth--split > .nvs-container {
		grid-template-columns: 1fr;
	}

	.nvs-member-auth--split .nvs-member-auth__panel {
		max-width: 560px;
		padding: 28px 24px;
	}
}

/* Card-level document links — the card's own collateral, above its bullet list. */
.nvs-card__docs {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nvs-card__doc > a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--nvs-blue);
	text-decoration: none;
}

.nvs-card__doc > a:hover,
.nvs-card__doc > a:focus-visible {
	color: var(--nvs-blue-dark);
}

.nvs-card__doc > a:hover span,
.nvs-card__doc > a:focus-visible span {
	text-decoration: underline;
}

.nvs-card__doc .nvs-file-icon {
	color: var(--nvs-danger);
}

/* A card that leads with a document wants a little air above its bullets. */
.nvs-card__docs + .nvs-card__bullets {
	margin-top: 14px;
}

/* -------------------------------------------------------------------------
 * nvs/code-snippet
 *
 * Third-party markup arrives with its own styling, so this deliberately adds almost nothing —
 * only enough to stop an embedded form overflowing the container on small screens.
 * ---------------------------------------------------------------------- */

.nvs-code-snippet .nvs-container > * {
	max-width: 100%;
}

.nvs-code-snippet img,
.nvs-code-snippet iframe {
	max-width: 100%;
}

/* -------------------------------------------------------------------------
 * Zoho CRM web-to-lead, as embedded on /contact/
 *
 * Zoho's own stylesheet lays the form out as floated 30%/68% label-beside-field pairs sized in
 * percentages of whatever contains them, in Arial, with a hairline border and a small gradient
 * button. Dropped into a 1050px container that reads as a raw vendor form bolted onto the page:
 * labels and inputs land at different scales, the rows don't share a grid, and the floats leave
 * the whole thing visually detached from the heading above it.
 *
 * These rules restate the same fields in the theme's own form language — labels above controls,
 * one column, paired fields side by side — reusing the tokens .nvs-form__* uses so the embed and
 * the native forms are indistinguishable.
 *
 * Everything is scoped through #crmWebToEntityForm rather than .nvs-code-snippet alone. Zoho's
 * rules are two classes deep (`.zcwf_lblLeft .zcwf_col_fld`) and its <style> sits in the body,
 * *after* this file in source order — so a selector that merely ties on specificity loses. The id
 * settles it without an !important on every line. The ones that remain are marked; each answers
 * an inline style attribute or an !important in the vendor stylesheet, which nothing else beats.
 *
 * Scoped to this block on purpose: it is styling for one vendor's markup and has no business
 * leaking into the rest of the site.
 * ---------------------------------------------------------------------- */

.nvs-code-snippet #crmWebToEntityForm.zcwf_lblLeft {
	width: 100%;
	/*
	 * Zoho's 25px inset fights the section's own padding, and its inline style="max-width:900px"
	 * is wider than the theme reads comfortably.
	 */
	max-width: 720px !important;
	padding: 0;
	margin: 0;
}

/*
 * Zoho hides its lead-source row with this class. The .zcwf_row rule below would otherwise turn
 * it back on and expose the "Partner - TELUS" routing options on the public page.
 */
.nvs-code-snippet #crmWebToEntityForm .zcwf_row.wfrm_fld_dpNn {
	display: none;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_lab,
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld {
	float: none;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/*
 * The captcha-image row and the button row carry a whitespace-only label div purely to fill the
 * float grid, so collapse the ones with no element children. That also catches the captcha
 * field's own label, which is a bare text node in a div rather than a <label> — Zoho wires it up
 * with aria-labelledby instead — so it is put back by id on the next rule.
 */
.nvs-code-snippet #crmWebToEntityForm .zcwf_row > .zcwf_col_lab:not(:has(*)) {
	display: none;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_lab#reCaptchaField {
	display: block;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_lab,
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_lab label {
	font-weight: 600;
	line-height: 1.4;
	color: var(--nvs-navy);
	/* The captcha label carries an inline style="font-size:12px; font-family: Arial". */
	font-family: var(--nvs-font-body) !important;
	font-size: 13.5px !important;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_lab label {
	display: block;
}

/* Zoho marks required fields with an inline style="color:red" span. */
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_lab label span {
	color: var(--nvs-danger) !important;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld input[type='text'],
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld input[type='email'],
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld input[type='tel'],
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld textarea,
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld select {
	float: none;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--nvs-font-body);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--nvs-navy);
	background: var(--nvs-surface);
	/* Zoho sets its hairline border !important, so this has to answer in kind. */
	border: 1px solid var(--nvs-border-input) !important;
	border-radius: var(--nvs-radius-control);
	padding: 12px 14px;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld input:focus,
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld textarea:focus,
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld select:focus {
	outline: 2px solid var(--nvs-blue);
	outline-offset: 1px;
	border-color: var(--nvs-blue) !important;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld textarea {
	resize: vertical;
	min-height: 120px;
}

/*
 * Paired fields — name, email/phone, captcha. Zoho's own rule is a flex row that only stacks at
 * its breakpoint; auto-fit stacks whenever the columns would go under 220px, which is what the
 * rest of the theme does.
 */
.nvs-code-snippet #crmWebToEntityForm .twocol-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 24px;
}

/*
 * Every field trails a .zcwf_col_help div for a tooltip it mostly doesn't have. Left in the flex
 * column, the whitespace-only ones each render a blank line and open a ragged gap under the row.
 */
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_help {
	float: none;
	display: inline-block;
	margin-left: 6px;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_help:not(:has(*)) {
	display: none;
}

/* Other section blocks space their own body off the header; this one has to say so. */
.nvs-code-snippet .nvs-section__header {
	margin-bottom: 40px;
}

/* Captcha image and its reload link share a line. */
.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld img {
	vertical-align: middle;
	border-radius: var(--nvs-radius-control);
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_col_fld img + a {
	margin-left: 16px;
	font-weight: 600;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	min-height: 44px;
	font-family: var(--nvs-font-body);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	padding: 16px 30px;
	margin: 4px 12px 0 0;
	border: 1px solid var(--nvs-border-input);
	border-radius: var(--nvs-radius-button);
	background: var(--nvs-surface);
	color: var(--nvs-navy);
	cursor: pointer;
	transition: background-color var(--nvs-duration-hover) ease, color var(--nvs-duration-hover) ease,
		border-color var(--nvs-duration-hover) ease;
}

.nvs-code-snippet #crmWebToEntityForm .zcwf_button:hover {
	background: var(--nvs-surface-alt);
	border-color: var(--nvs-navy);
}

/*
 * Zoho paints the submit button with a blue gradient and sets its colour !important; this
 * restates it as the theme's primary button.
 */
.nvs-code-snippet #crmWebToEntityForm .formsubmit.zcwf_button {
	background: var(--nvs-blue) !important;
	border-color: var(--nvs-blue);
	color: #ffffff !important;
}

.nvs-code-snippet #crmWebToEntityForm .formsubmit.zcwf_button:hover {
	background: var(--nvs-navy) !important;
	border-color: var(--nvs-navy);
}

.nvs-code-snippet #crmWebToEntityForm .formsubmit.zcwf_button[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* -------------------------------------------------------------------------
 * Video overlay (site.js → initVideoOverlay)
 *
 * Sits above the sticky header (z-index 100) and below the skip link (1000), so a keyboard user can
 * still reach the skip link if they somehow get behind it.
 * ---------------------------------------------------------------------- */

.nvs-video-overlay {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 4vw, 48px);
	background: rgba(8, 24, 38, 0.88);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.nvs-video-overlay.is-open {
	opacity: 1;
}

.nvs-video-overlay[hidden] {
	display: none;
}

.nvs-video-overlay__inner {
	position: relative;
	width: min(1080px, 100%);
}

/*
 * The height cap is what keeps a portrait or square video from pushing its own controls off the
 * bottom of a phone. object-fit lets the black box letterbox rather than stretch.
 */
.nvs-video-overlay__player {
	display: block;
	width: 100%;
	max-height: 78vh;
	max-height: 78dvh;
	background: #000000;
	border-radius: var(--nvs-radius-card);
	outline: none;
}

.nvs-video-overlay__close {
	position: absolute;
	top: clamp(10px, 2.5vw, 22px);
	right: clamp(10px, 2.5vw, 22px);
	width: 44px;                 /* 44px is the minimum comfortable touch target. */
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.nvs-video-overlay__close:hover,
.nvs-video-overlay__close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

.nvs-video-overlay__close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* Scroll lock. Without it the page behind scrolls under the overlay on touch. */
html.nvs-video-open,
html.nvs-video-open body {
	overflow: hidden;
}

@media (max-width: 600px) {
	/* Clear the close button rather than sitting under it. */
	.nvs-video-overlay {
		padding: 68px 12px 12px;
		align-items: center;
	}

	.nvs-video-overlay__player {
		max-height: 70vh;
		max-height: 70dvh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nvs-video-overlay {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * nvs/card-grid — carousel style (site.js → initCarousels)
 *
 * A scroll-snap track, not a transform slider. The browser owns the scrolling, which means touch
 * swipe, trackpad, shift-wheel and keyboard all work with no code, and with JS off the track is
 * still a scrollable region so no slide becomes unreachable — only the buttons disappear.
 * ---------------------------------------------------------------------- */

.nvs-carousel {
	margin-top: 48px;
}

.nvs-carousel__track {
	display: grid;
	grid-auto-flow: column;
	/* Overrides the grid style's auto-fill columns: in a carousel the slide width is the point. */
	/*
	 * A definite width, not minmax(0, …). minmax lets a track shrink below its maximum to fit the
	 * container, so every slide packed into one screen and there was nothing left to scroll — the
	 * carousel rendered as a cramped grid. A fixed fraction forces the track to overflow, which is
	 * what makes it a carousel.
	 */
	grid-auto-columns: calc((100% - var(--nvs-carousel-gap)) / 2);
	grid-template-columns: none;
	gap: var(--nvs-carousel-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* The animation lives here, so the script only ever sets a position. */
	scroll-behavior: smooth;
	scroll-padding-left: 0;
	margin: 0;
	/* Room for the focus ring and the tiles' shadow, which a clipped track would otherwise cut. */
	padding: 4px;
	scrollbar-width: thin;
}

.nvs-card-grid--carousel {
	--nvs-carousel-gap: 24px;
}

.nvs-carousel__track > * {
	scroll-snap-align: start;
}

.nvs-carousel__track:focus-visible {
	outline: 2px solid var(--nvs-blue);
	outline-offset: 2px;
	border-radius: var(--nvs-radius-card);
}

.nvs-carousel__controls {
	margin-top: 20px;
	display: flex;
	align-items: center;
	/* Centred: the buttons are the primary control, and thumbs reach the middle on a phone. */
	justify-content: center;
	gap: 14px;
}

.nvs-carousel__status {
	margin: 0;
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
	color: var(--nvs-ink-faint);
}

.nvs-carousel__btn {
	width: 44px;                 /* Minimum comfortable touch target. */
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--nvs-border);
	border-radius: 50%;
	background: var(--nvs-surface);
	color: var(--nvs-navy);
	cursor: pointer;
	transition: background var(--nvs-duration-hover) ease, border-color var(--nvs-duration-hover) ease;
}

.nvs-carousel__btn:hover:not(:disabled) {
	background: var(--nvs-blue);
	border-color: var(--nvs-blue);
	color: #ffffff;
}

.nvs-carousel__btn:focus-visible {
	outline: 2px solid var(--nvs-blue);
	outline-offset: 2px;
}

/*
 * Disabled rather than hidden at the ends: a control that vanishes moves the one beside it under
 * the pointer, so the next click lands on something the reader did not aim at.
 */
.nvs-carousel__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

/* No JS, no buttons — the track still scrolls, so nothing is lost. */
html:not(.nvs-js) .nvs-carousel__controls {
	display: none;
}

@media (max-width: 700px) {
	.nvs-carousel {
		margin-top: 32px;
	}

	.nvs-carousel__track {
		grid-auto-columns: 100%;
		--nvs-carousel-gap: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nvs-carousel__track {
		scroll-behavior: auto;
	}
}

/*
 * Prose tables — the privacy policy's cookie table. Scoped to .nvs-prose so it cannot reach the
 * tables the member and admin screens render, which have their own treatment.
 */
.nvs-prose table {
	width: 100%;
	margin: 24px 0;
	border-collapse: collapse;
	font-size: 15px;
	line-height: var(--nvs-leading-body);
	/* Narrow columns of legal prose wrap badly; let the widest one keep its share. */
	table-layout: auto;
}

.nvs-prose thead th {
	text-align: left;
	font-family: var(--nvs-font-heading);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--nvs-navy);
	background: var(--nvs-surface-alt, #f4f7fa);
	border-bottom: 2px solid var(--nvs-blue);
	padding: 12px 14px;
	vertical-align: bottom;
}

.nvs-prose tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--nvs-border);
	vertical-align: top;
	color: var(--nvs-ink);
}

.nvs-prose tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * On a phone a three-column table cannot fit, and squeezing it produces one word per line. Scroll
 * it inside its own box rather than letting it widen the page.
 */
@media (max-width: 700px) {
	.nvs-prose table {
		display: block;
		overflow-x: auto;
		white-space: normal;
	}

	.nvs-prose table th,
	.nvs-prose table td {
		min-width: 150px;
	}
}