/* ===== 9Senses Sample Projects — carousel + fog-cloud popups ===== */
.nsp-carousel-wrap { position: relative; margin: 1.5rem 0; padding: 0; visibility: hidden; }
/* The track is a native horizontal scroller (so touch swipe + momentum come for
   free from the browser). For the perpetual loop we keep it parked near the
   middle and shuffle cards from one end to the other, compensating scrollLeft in
   the same tick so the content never visibly jumps -- a "treadmill". No clones.
   overflow-anchor:none stops the browser's own scroll anchoring from fighting
   our scrollLeft compensation. Scrollbar is hidden; the nav arrows drive it too. */
.nsp-carousel {
	display: flex; gap: 20px; padding: 8px 4px 10px;
	overflow-x: auto; overflow-y: hidden; overflow-anchor: none;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; -ms-overflow-style: none;
	scroll-behavior: auto;
}
.nsp-carousel::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Plain, borderless chevrons (no circle/background) sitting outside the card viewport. */
.nsp-nav {
	position: absolute; top: calc(50% + 20px); transform: translateY(-50%); z-index: 3;
	width: 36px; height: 36px; cursor: pointer; padding: 0;
	border: 0; background: transparent; border-radius: 0;
	color: rgba(255,255,255,.8); display: flex; align-items: center; justify-content: center;
}
.nsp-nav .et-pb-icon, .nsp-nav-icon { font-family: ETmodules !important; font-weight: 400 !important; font-size: 28px !important; line-height: 1 !important; }
.nsp-nav:hover { color: #fff; }
.nsp-nav[disabled] { opacity: .25; cursor: default; }
.nsp-prev { left: -42px; }
.nsp-next { right: -42px; }

/* Photo-free cards reproducing the 9senses "Key Fields of AI" blurbs (exact tokens). */
.nsp-card {
	flex: 0 0 270px; box-sizing: border-box; cursor: pointer;
	background: transparent; border: 0; box-shadow: none;
	display: flex; flex-direction: column; align-items: flex-start; text-align: start;
	padding: 0 10px 5px; max-width: 550px; min-width: 0;
}
.nsp-card:focus-visible { outline: 2px solid #0c71c3; outline-offset: 3px; }
/* Icon is centered above the (left-aligned) title/body, matching the site's blurb layout. */
.nsp-card-iconwrap { align-self: stretch; text-align: center; line-height: 0; margin: 0 0 30px; }
/* ===== Person cards ([team_carousel]) ===== *
 * Layout matches a project card (left-aligned, photo in the icon slot); only the
 * requested visual deltas are applied here. The WIDTH is deliberately NOT set in
 * this block -- person cards go through the exact same sizing path as the project
 * cards (the shared carousel JS), differing only by the base reference width
 * passed to the shortcode (210 vs 270). That project logic is left untouched. */
/* Photo takes the icon slot's place: spans the card's content width, forced to a
   real square (width AND height pinned so a theme img{height:auto} can't stretch
   it back to portrait). No rounded corners. ~10px gap to the name. */
.nsp-card--person .nsp-card-photowrap {
	align-self: stretch !important; line-height: 0; margin: 0 0 10px !important;
}
.nsp-card--person {
	/* Keep the person-card visual rhythm, but do not spend 20px of a narrow
	   card on side padding before the skill chips even start. This gives long
	   compact labels such as "Human Technology Interaction" enough room. */
	padding-left: 6px !important; padding-right: 6px !important;
}
.nsp-card--person .nsp-card-photowrap .nsp-card-photo {
	display: block !important; width: 100% !important; height: auto !important;
	aspect-ratio: 1 / 1 !important; object-fit: cover !important;
	border-radius: 0 !important; box-shadow: none !important;
}
@supports not (aspect-ratio: 1 / 1) {
	.nsp-card--person .nsp-card-photowrap { position: relative; height: 0; padding-bottom: 100%; overflow: hidden; }
	.nsp-card--person .nsp-card-photowrap .nsp-card-photo { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
}
/* Capabilities: compact, non-breaking pills for people cards. Long topic
   names should get a backend abbreviation; when one exists the pill shows the
   abbreviation while retaining the full topic as title/aria-label. The pills
   use the plugin fog/sidebar grey, with a flat rectangular treatment that keeps
   horizontal space for text instead of spending it on capsule padding. */
.nsp-card--person .nsp-card-caps {
	display: flex !important; flex-wrap: wrap !important; gap: 6px 6px !important;
	list-style: none !important; margin: 2px 0 12px !important; padding: 0 !important;
	align-self: stretch !important; width: 100% !important; min-width: 0 !important; text-align: left !important;
	line-height: 1.2 !important; justify-content: flex-start !important; align-content: flex-start !important;
}
.nsp-card--person .nsp-card-caps > li.nsp-chip {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	position: relative !important; isolation: isolate !important;
	flex: 0 1 auto !important; max-width: 100% !important; min-width: 0 !important;
	box-sizing: border-box !important; margin: 0 !important; padding: 3px 5px !important;
	list-style: none !important; text-indent: 0 !important;
	border: 0 !important; background: transparent !important; color: #222b3f !important;
	box-shadow: none !important; border-radius: 2px !important; min-height: 20px !important;
	font-size: 11.5px !important; line-height: 1.12 !important;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif !important; font-weight: 600 !important;
	text-transform: none !important; letter-spacing: 0 !important;
	white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
	hyphens: none !important; -webkit-hyphens: none !important; word-break: normal !important; overflow-wrap: normal !important;
}
.nsp-card--person .nsp-card-caps > li.nsp-chip::before {
	content: "" !important; display: block !important; position: absolute !important;
	inset: -2px !important; z-index: 0 !important; pointer-events: none !important;
	border-radius: 3px !important; background: rgba(207,207,207,.88) !important; filter: blur(2.2px) !important;
}
.nsp-card--person .nsp-card-caps > li.nsp-chip::after {
	content: "" !important; display: block !important; position: absolute !important;
	inset: 0 !important; z-index: 1 !important; pointer-events: none !important;
	border-radius: 2px !important; background: rgba(207,207,207,.88) !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset, 0 1px 2px rgba(0,0,0,.13) !important;
}
.nsp-card--person .nsp-card-caps > li.nsp-chip.nsp-chip--squeeze {
	padding-left: 4px !important; padding-right: 4px !important;
}
.nsp-card--person .nsp-card-caps > li.nsp-chip.nsp-chip--ultra {
	padding-left: 3px !important; padding-right: 3px !important;
}
.nsp-card--person .nsp-card-caps > li:not(.nsp-chip)::before,
.nsp-card--person .nsp-card-caps > li:not(.nsp-chip)::after { content: none !important; display: none !important; }
.nsp-card--person .nsp-card-caps .nsp-chip-link,
.nsp-card--person .nsp-card-caps .nsp-chip-text {
	display: block !important; position: relative !important; z-index: 2 !important;
	max-width: 100% !important; min-width: 0 !important;
	overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
	font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important;
	color: inherit !important; text-decoration: none !important; cursor: pointer !important;
}
.nsp-card--person .nsp-card-caps .nsp-chip-text { cursor: default !important; }
.nsp-card--person .nsp-card-caps > li.nsp-chip:hover { color: #0d1530 !important; }
.nsp-card--person .nsp-card-caps > li.nsp-chip:hover::before {
	background: rgba(207,207,207,.98) !important; filter: blur(2.8px) !important;
}
.nsp-card--person .nsp-card-caps > li.nsp-chip:hover::after {
	background: rgba(207,207,207,.98) !important;
	box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset, 0 1px 3px rgba(0,0,0,.16) !important;
}
/* Person-card links (photo, name, read-more) are real <a> anchors now, so the
   profile link + capability links work with no JavaScript. Strip default link
   styling so they still look like plain card elements. */
.nsp-card--person .nsp-card-photowrap { display: block !important; text-decoration: none !important; }
.nsp-card--person .nsp-card-titlelink { color: inherit !important; text-decoration: none !important; }
.nsp-card--person .nsp-card-titlelink:hover { color: inherit !important; text-decoration: none !important; }
a.nsp-card-more { text-decoration: none !important; }

.nsp-card-icon { font-size: 40px !important; line-height: 1 !important; color: #0c71c3 !important; }
.nsp-card-icon.et-pb-icon { font-family: ETmodules !important; font-weight: 400 !important; }
.nsp-card .nsp-card-title {
	font-family: 'Special Elite', 'Courier New', Courier, monospace !important; font-weight: 500 !important; font-size: 26px !important; line-height: 1.1em !important;
	color: rgba(255,255,255,.8) !important; margin: 0 0 14px; padding: 0;
	/* Without this, the title is a flex child of a column container and shrink-to-fit
	   sizing doesn't account for hyphenation opportunities when a single word is wider
	   than the card -- the box just grows past the card instead of wrapping, so
	   hyphenation never gets a chance to run at all. Stretching it to the card's actual
	   width first is what lets wrap/hyphenate work normally after that. */
	align-self: stretch !important;
	/* hyphens:auto stays on so genuinely long titles that wrap to 3+ lines still get a
	   proper hyphenated break instead of an awkward whole-line overflow. The length limit
	   below is a Chrome-only refinement (no other engine supports it yet) that keeps short
	   common words like "Legal" from being split when a whole-word wrap would do just as
	   well; browsers without that property just fall back to plain hyphens:auto. */
	hyphens: auto !important; -webkit-hyphens: auto !important; -moz-hyphens: auto !important; -ms-hyphens: auto !important;
	hyphenate-limit-chars: 6 3 3;
	overflow-wrap: break-word !important; word-wrap: break-word !important;
}
.nsp-card .nsp-card-excerpt {
	font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif !important;
	font-size: 16px !important; line-height: 1.8em !important; letter-spacing: 0 !important; color: #d3d3d3 !important; margin: 0 0 2px; padding: 0;
	display: block !important; text-align: justify !important;
	hyphens: auto !important; -webkit-hyphens: auto !important; -moz-hyphens: auto !important; -ms-hyphens: auto !important;
	overflow-wrap: break-word !important; word-wrap: break-word !important;
}
/* Person size overrides — placed AFTER the base rules so they win the !important
 * tie. Only the requested deltas; alignment stays exactly as the project cards
 * (title left, body justified, read-more right). Converting the point deltas at
 * the CSS definition 1pt = 1.333px:
 *   title: 26px (19.5pt) - 3pt = 16.5pt = 22px
 *   body:  16px (12pt)   - 2pt = 10pt   ≈ 13px
 *   read-more matches the body size. */
.nsp-card--person .nsp-card-title { font-size: 22px !important; }
.nsp-card--person .nsp-card-excerpt { font-size: 13px !important; }
.nsp-card--person .nsp-card-more { font-size: 13px !important; }
.nsp-card-topics {
	display: flex !important; flex-wrap: wrap; gap: 6px; margin: 8px 0 0 !important; padding: 0 !important;
	list-style: none !important; align-self: flex-start;
}
.nsp-card-topics li { margin: 0 !important; padding: 0 !important; list-style: none !important; text-indent: 0 !important; }
.nsp-card-topics li:before, .nsp-card-topics li:after { content: none !important; display: none !important; }
.nsp-topic {
	font-size: 11.5px; line-height: 1; padding: 4px 10px; border-radius: 999px;
	background: rgba(12,113,195,.18); color: #d3d3d3; text-decoration: none;
	white-space: nowrap;
}
a.nsp-topic:hover { background: #0c71c3; color: #fff; }
/* "read more…" right-aligned, sitting close to the text, same size as the body copy. */
.nsp-card-more {
	margin-top: 2px; align-self: flex-end; text-align: right;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
	font-size: 16px !important; font-weight: 600 !important; color: #0c71c3 !important; letter-spacing: .01em;
}

/* ===== Overlay + fog-cloud dialog (mirrors 9Senses Sidebar) ===== */
.nsp-overlay {
	display: none; position: fixed; inset: 0; background: rgba(0,0,0,.55);
	z-index: 2147483600; align-items: center; justify-content: center;
	padding: 6vh 3vw; box-sizing: border-box;
}
.nsp-overlay.open { display: flex !important; }
.nsp-dialog {
	position: relative; background: transparent; color: #222b3f;
	border-radius: 14px; width: 100%; max-width: 960px;
	max-height: 86vh; overflow-y: auto; overflow-x: hidden;
	padding: 24px 34px 22px; box-sizing: border-box;
	font-size: 16px; line-height: 1.55; letter-spacing: normal;
}
.nsp-dialog::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	border-radius: 14px; background: rgba(207,207,207,.88); filter: blur(4px);
}
.nsp-dlg-h {
	display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 0 12px; margin: 0 0 14px;
	font-family: 'Special Elite', 'Courier New', Courier, monospace !important; font-weight: 400 !important; font-size: 40px !important; line-height: 1.2 !important;
	letter-spacing: .01em; color: #0d1530 !important; padding-right: 40px;
}
.nsp-dlg-h-title {
	/* Same underlying issue as the card title: a flex item's intrinsic sizing doesn't
	   account for hyphenation opportunities, so a single long word pushes the box wider
	   than the dialog instead of wrapping. min-width:0 lets it shrink below that
	   intrinsic size; flex:1 1 auto lets it actually take up the remaining row width
	   next to the icon so wrap/hyphenate then work normally. */
	min-width: 0; flex: 1 1 auto;
	hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto;
	hyphenate-limit-chars: 6 3 3; overflow-wrap: break-word;
}
.nsp-pop-icon { font-size: 30px !important; line-height: 1 !important; color: #0c71c3 !important; transform: translateY(-5px) !important; }
.nsp-pop-icon.et-pb-icon { font-family: ETmodules !important; font-weight: 400 !important; }
.nsp-close {
	position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
	font-size: 28px; line-height: 1; color: #555; cursor: pointer;
	background-color: transparent; border-width: 0; border-radius: 50%;
	transition: background .2s, color .2s;
}
.nsp-close:hover { color: #0d1530; background: rgba(255,255,255,.25); }

.nsp-pop-cols { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; }
.nsp-pop-main { flex: 1 1 300px; min-width: 0; }
.nsp-pop-aside { flex: 0 0 300px; max-width: 100%; }
.nsp-pop-img { width: 100%; border-radius: 10px; box-shadow: 0 4px 16px rgba(13,21,48,.15); display: block; }
.nsp-pop-desc { margin-bottom: 0 !important; }
.nsp-pop-desc, .nsp-pop-role { font-size: 16px; line-height: 1.6; color: #222b3f; }
.nsp-pop-desc p, .nsp-pop-role p { margin: 0 0 .6em; }
.nsp-pop-desc p:last-child, .nsp-pop-role p:last-child { margin-bottom: 0; }
/* Role/tech sits on the right under the image when an image exists (no divider — the image separates it)… */
.nsp-pop-role--aside { margin-top: 12px !important; }
/* …otherwise it falls below the main text with a divider line. */
.nsp-pop-role--below { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid rgba(13,21,48,.18) !important; }
.nsp-pop-role p:first-child { margin-top: 0; }
.nsp-dialog h1, .nsp-dialog h2, .nsp-dialog h3, .nsp-dialog h4 { font-family: 'Special Elite', 'Courier New', Courier, monospace; font-weight: 400; color: #0d1530; }

/* Flat capability chips at the bottom — no heading, no other dimensions.
   !important here isn't optional: .nsp-dialog .nsp-chiplist below is a more specific
   selector (two classes vs one) and sets margin:0, which would otherwise silently win
   over margin-top regardless of which rule comes first in the stylesheet. */
.nsp-pop-caps { margin-top: 14px !important; }
.nsp-dialog .nsp-chiplist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none !important; padding: 0 !important; margin: 0; }
.nsp-dialog .nsp-chiplist li { margin: 0 !important; padding: 0 !important; list-style: none !important; text-indent: 0 !important; }
.nsp-dialog .nsp-chiplist li:before, .nsp-dialog .nsp-chiplist li:after { content: none !important; display: none !important; }
.nsp-chip { background: rgba(45,108,223,.14); color: #0d1530; border-radius: 999px; padding: 6px 15px; font-size: 14px; line-height: 1.3; }
.nsp-chip a { color: inherit; text-decoration: none; }

/* Kill theme (Divi) list markers inside the tile content too. */
.nsp-dialog .nsp-pop-desc ul, .nsp-dialog .nsp-pop-desc ol,
.nsp-dialog .nsp-pop-role ul, .nsp-dialog .nsp-pop-role ol {
	list-style: none !important; margin: 0 0 .6em !important; padding: 0 !important;
}
.nsp-dialog .nsp-pop-desc li, .nsp-dialog .nsp-pop-role li {
	margin: 0 0 .35em !important; padding: 0 !important; list-style: none !important; text-indent: 0 !important;
}
.nsp-dialog .nsp-pop-desc li:before, .nsp-dialog .nsp-pop-desc li:after,
.nsp-dialog .nsp-pop-role li:before, .nsp-dialog .nsp-pop-role li:after {
	content: none !important; display: none !important;
}

@media (max-width: 640px) {
	.nsp-card { flex-basis: 82vw; }
	/* Not enough room outside the viewport on narrow screens — keep the arrows just inside instead of clipped. */
	.nsp-carousel-wrap { padding: 0 28px; }
	.nsp-prev { left: 0; }
	.nsp-next { right: 0; }
	.nsp-dialog { padding: 24px 20px 24px; font-size: 15px; }
	.nsp-dlg-h { font-size: 32px; }
	.nsp-pop-desc, .nsp-pop-role { font-size: 15px; }
	.nsp-pop-aside { flex-basis: 100%; }
}