/* =========================================================
   USCS — design system
   Light canvas with Midnight Navy bands. Tokens first; components
   below use tokens only, so a palette change happens in one place.
   ========================================================= */

:root {
	/* --- Palette (Wireframe §2.1) --- */
	--navy-900: #0B1B33;   /* Base navy: dark heroes, bands, footer, navbar */
	--navy-700: #1E3A5F;   /* Section navy: bands, diagrams */
	--blue:     #C9A227;   /* Gold accent: CTAs, selected states */
	--blue-600: #B08D1E;   /* hover state for gold */
	--blue-300: #E3C766;   /* light gold for text and links on navy */
	--cyan:     #E3C766;   /* highlight: large text and graphics only */
	--violet:   #3E5C8A;   /* secondary accent, used sparingly */
	--cloud:    #FAF6EC;   /* soft warm backgrounds */
	--ink:      #8A6D12;   /* gold for text/links on white (readable) */
	--on-accent:#0B1B33;   /* text on gold fills */
	--graphite: #172033;   /* body text */
	--text-soft:#46526A;   /* card descriptions: a lighter graphite */
	--slate:    #627184;   /* labels, metadata */
	--white:    #FFFFFF;
	--line:     #DCE3EC;   /* hairlines on light */
	--line-strong: #C3CDDA;/* input borders */
	--on-dark:  #FFFFFF;
	--on-dark-muted: #B4C0D3; /* secondary text on navy (≈9:1) */
	--line-dark: rgba(255, 255, 255, .14);
	--ok:       #1B7F4B;
	--error:    #C62828;

	/* --- Type (Wireframe §2.2) --- */
	--font-display: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fs-h1: clamp(2.5rem, 4.2vw + 1rem, 4.75rem);       /* 40 → 76px (64+ at desktop) */
	--fs-h1-page: clamp(2.5rem, 4vw + .9rem, 4.5rem);    /* 40 → 72px (64+ at desktop) */
	--fs-h2: clamp(1.875rem, 2.4vw + 1rem, 3.25rem);     /* 30 → 52px (44+ at desktop) */
	--fs-h3: clamp(1.375rem, 1vw + 1.1rem, 2.125rem);    /* 22 → 34px (28+ at desktop) */
	--fs-card: clamp(1.375rem, .6vw + 1.2rem, 1.75rem);  /* 22 → 28px card titles */
	--fs-body: clamp(1rem, .25vw + .92rem, 1.125rem);    /* 16 → 18px */
	--fs-lead: clamp(1.0625rem, .3vw + .98rem, 1.1875rem);/* 17 → 19px */
	--fs-small: .9375rem;                                /* 15px */
	--fs-label: .8125rem;                                /* 13px */

	/* --- Space, grid, shape (Wireframe §2.6) --- */
	--s-1: 8px;
	--s-2: 16px;
	--s-3: 24px;
	--s-4: 32px;
	--s-5: 48px;
	--s-6: 64px;
	--section-y: clamp(56px, 7vw + 16px, 128px);         /* 56–64 mobile, 96–128 desktop */
	--container: 1280px;
	--gutter: clamp(16px, 3vw, 32px);
	--radius: 12px;
	--radius-sm: 8px;
	--shadow-hover: 0 14px 34px rgba(11, 27, 51, .09);
	--shadow-menu: 0 18px 44px rgba(11, 27, 51, .14);

	/* --- Header --- */
	--hdr-top-h: 76px;   /* 52px logo + 12px above and below */
	--hdr-nav-h: 48px;
	--header-h: calc(var(--hdr-top-h) + var(--hdr-nav-h));
}

@media (max-width: 1319px) {
	:root { --header-h: var(--hdr-top-h); }
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
	margin: 0;
	background: var(--white);
	color: var(--graphite);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--navy-900);
	line-height: 1.1;
	letter-spacing: -.022em;
	margin: 0 0 var(--s-2);
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.03em; line-height: 1.04; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; }

p { margin: 0 0 var(--s-2); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: var(--s-2);
	top: -60px;
	z-index: 200;
	background: var(--blue);
	color: var(--white);
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
}
.skip-link:focus { top: var(--s-2); color: var(--white); }

[hidden] { display: none !important; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* =========================================================
   Buttons and links (Wireframe §2.5)
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--s-1);
	min-height: 48px;
	padding: 12px 24px;
	border: 1.5px solid transparent;
	border-radius: 10px;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn--primary, .btn--ember { background: var(--blue); color: var(--white); }
.btn--primary:hover, .btn--ember:hover { background: var(--blue-600); color: var(--white); }

.btn--secondary, .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover, .btn--ghost:hover { background: rgba(201, 162, 39, .07); color: var(--ink); border-color: var(--ink); }

/* Secondary on navy: white outline */
.on-dark .btn--secondary, .section--dark .btn--secondary, .hero .btn--secondary,
.page-hero--dark .btn--secondary, .cta-band .btn--secondary {
	color: var(--white);
	border-color: rgba(255, 255, 255, .7);
}
.on-dark .btn--secondary:hover, .section--dark .btn--secondary:hover, .hero .btn--secondary:hover,
.page-hero--dark .btn--secondary:hover, .cta-band .btn--secondary:hover {
	background: rgba(255, 255, 255, .08);
	border-color: var(--white);
	color: var(--white);
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.btn-row--center { justify-content: center; margin-top: var(--s-4); }

.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	text-decoration: none;
}
.arrow-link:hover { text-decoration: none; }
.icon-arrow { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .18s ease; }
.arrow-link:hover .icon-arrow { transform: translateX(3px); }

.eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: var(--s-2);
}

/* =========================================================
   Header (Wireframe §3.0)
   Two rows on wide screens: logo + actions, then the nav.
   Solid navy (matching the footer) on every page.
   ========================================================= */
/* Navbar: the footer's navy (--navy-900) on every page and in every state */
.site-header {
	--hdr-fg: var(--white);
	--hdr-fg-muted: rgba(255, 255, 255, .82);
	--hdr-line: rgba(255, 255, 255, .12);
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	background: var(--navy-900);
	border-bottom: 1px solid var(--hdr-line);
	transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(11, 27, 51, .35); }

/* Two-line lockup (USCS over "US Consulting Services"); 52px + 12px above/below = the 76px top row */
.logo { display: inline-flex; align-items: center; margin: 12px 0; flex: 0 0 auto; }

/* ===== USCS animated Orbit logo ===== */
.uscs-logo{
  --uscs-size:35.5px;               /* change this to resize the whole logo (35.5px = the 52px-tall lockup) */
  font-family:"Poppins",system-ui,sans-serif;
  font-size:var(--uscs-size);
  display:inline-flex;flex-direction:column;align-items:center;
  padding-inline:.45em;             /* room for the rings on each side */
  line-height:1;text-decoration:none;
  user-select:none;-webkit-user-select:none;
  perspective:800px;
}
/* Keep the lockup's left edge where the old logo sat; the tagline is wider than the rings */
.logo.uscs-logo,.site-footer .logo.uscs-logo{margin-inline-start:-.45em}
.uscs-logo:focus-visible{outline:2px solid #D9AD35;outline-offset:4px;border-radius:6px}

.uscs-scene{position:relative;transform-style:preserve-3d}

.uscs-word{position:relative;display:flex;font-weight:800;letter-spacing:.03em}
.uscs-word .g{color:#E0B33A;text-shadow:0 .03em 0 #8F6914}
.uscs-word .w{color:#F5F3EE;text-shadow:0 .03em 0 #6B7891}

.uscs-tag{margin-top:.5em;font-size:.31em;font-weight:600;letter-spacing:.05em;color:#F5F3EE;white-space:nowrap}
.uscs-tag b{color:#D9AD35;font-weight:700}

/* rings */
.uscs-ring{
  position:absolute;left:50%;top:50%;
  width:3.5em;height:3.5em;margin:-1.75em 0 0 -1.75em;
  box-sizing:border-box;border-radius:50%;
  border:.016em solid rgba(217,173,53,.6);
  transform:rotateX(76deg);transform-style:preserve-3d;pointer-events:none;
}
.uscs-ring2{
  width:3.1em;height:3.1em;margin:-1.55em 0 0 -1.55em;
  border-color:rgba(169,196,234,.45);
  transform:rotateZ(-14deg) rotateX(72deg);
}
.uscs-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:uscs-spin 5s linear infinite}
.uscs-ring2 .uscs-spin{animation-duration:7.5s;animation-direction:reverse}

/* satellites */
.uscs-dot{
  position:absolute;left:50%;top:0;
  width:.17em;height:.17em;margin:-.085em 0 0 -.085em;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#FFF4C8,#E3B641 60%,#9C7216);
  box-shadow:0 0 .16em rgba(227,182,65,.85);
  animation:uscs-face 5s linear infinite;
}
.uscs-ring2 .uscs-dot{
  background:radial-gradient(circle at 35% 35%,#FFFFFF,#A9C4EA 60%,#5E7FAF);
  box-shadow:0 0 .16em rgba(169,196,234,.85);
  animation-name:uscs-face2;animation-duration:7.5s;animation-direction:reverse;
}

@keyframes uscs-spin{to{transform:rotateZ(360deg)}}
@keyframes uscs-face{from{transform:rotateZ(0deg) rotateX(-76deg)}to{transform:rotateZ(-360deg) rotateX(-76deg)}}
@keyframes uscs-face2{from{transform:rotateZ(0deg) rotateX(-72deg)}to{transform:rotateZ(-360deg) rotateX(-72deg)}}

/* smaller on phones (30px = the old 44px-tall phone lockup, same breakpoint as before) */
@media (max-width:719px){.uscs-logo{--uscs-size:30px}}

/* still for visitors who turn off animations */
@media (prefers-reduced-motion:reduce){
  .uscs-spin,.uscs-dot{animation:none}
}

.hdr-top__inner {
	height: var(--hdr-top-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}
.hdr-actions { display: flex; align-items: center; gap: var(--s-2); }

.nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: var(--hdr-fg);
	cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 5px; width: 22px; }
.nav-toggle__bars span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hdr-nav { border-top: 1px solid var(--hdr-line); }
.hdr-nav__inner { height: var(--hdr-nav-h); display: flex; align-items: stretch; }

.nav {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: clamp(32px, 3.5vw, 56px);
}
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	font-size: .875rem;
	font-weight: 500;
	color: var(--hdr-fg-muted);
	text-decoration: none;
	white-space: nowrap;
}
.nav__link::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: var(--blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s ease;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--hdr-fg); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }

.sub-toggle {
	width: 24px; height: 24px;
	margin-left: 2px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	border-radius: 6px;
	color: var(--hdr-fg-muted);
	cursor: pointer;
}
.sub-toggle svg { width: 12px; height: 12px; transition: transform .2s ease; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.sub {
	list-style: none;
	margin: 0;
	padding: var(--s-1);
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 290px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-menu);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.sub a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--radius-sm);
	font-size: .9375rem;
	font-weight: 500;
	color: var(--graphite);
	text-decoration: none;
}
.sub a:hover { background: var(--cloud); color: var(--ink); }
.has-sub.is-open > .sub,
.has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (min-width: 1320px) {
	.has-sub:hover > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
/* Keep the last dropdowns inside the viewport */
.nav__item:nth-last-child(-n+4) > .sub { left: auto; right: -16px; }

.nav__cta { display: none; }

/* --- Collapsed navigation (tablet and mobile) --- */
@media (max-width: 1319px) {
	.nav-toggle { display: inline-flex; }
	.hdr-nav {
		display: none;
		position: fixed;
		top: var(--hdr-top-h);
		left: 0; right: 0; bottom: 0;
		background: var(--navy-900);
		border-top: 1px solid var(--line-dark);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.site-header.is-open .hdr-nav { display: block; }
	.hdr-nav__inner {
		height: auto;
		min-height: 100%;
		flex-direction: column;
		padding-top: var(--s-1);
		padding-bottom: 0;
	}
	.nav { flex-direction: column; justify-content: flex-start; gap: 0; }
	.nav__item { flex-wrap: wrap; border-bottom: 1px solid var(--line-dark); }
	.nav__link { flex: 1 1 auto; height: auto; padding: 16px 0; font-size: 1.0625rem; font-weight: 600; color: var(--white); }
	.nav__link::after { display: none; }
	.nav__link[aria-current="page"] { color: var(--blue-300); }
	.sub-toggle { width: 44px; height: 44px; color: var(--white); }
	.sub-toggle svg { width: 14px; height: 14px; }
	.sub {
		position: static;
		flex: 0 0 100%;
		display: none;
		min-width: 0;
		padding: 0 0 var(--s-2) var(--s-2);
		background: transparent;
		border: 0;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.has-sub.is-open > .sub { display: block; }
	.sub a { padding: 10px 12px; color: var(--on-dark-muted); }
	.sub a:hover { background: rgba(255, 255, 255, .06); color: var(--white); }
	.nav__item:nth-last-child(-n+4) > .sub { right: auto; }
	.nav__cta {
		display: flex;
		position: sticky;
		bottom: 0;
		margin: var(--s-3) calc(var(--gutter) * -1) 0;
		border-radius: 0;
		min-height: 56px;
		box-shadow: 0 -8px 20px rgba(11, 27, 51, .9);
	}
	body.nav-locked { overflow: hidden; }
}
@media (max-width: 719px) {
	.hdr-cta { display: none; }
	.hdr-actions { gap: var(--s-1); }
}

/* =========================================================
   Sections and shared blocks
   ========================================================= */
.section { padding: var(--section-y) 0; }
.section--white { background: var(--white); }
.section--cloud { background: var(--cloud); }
.section--dark, .on-dark {
	background: var(--navy-900);
	color: var(--on-dark-muted);
}
.section--dark h2, .section--dark h3, .on-dark h2, .on-dark h3 { color: var(--on-dark); }
.section--dark a:not(.btn), .on-dark a:not(.btn) { color: var(--blue-300); }
.section--dark :focus-visible, .on-dark :focus-visible, .hero :focus-visible,
.cta-band :focus-visible, .site-footer :focus-visible, .page-hero--dark :focus-visible { outline-color: var(--cyan); }

.section-head { max-width: 860px; margin-bottom: var(--s-5); }
.section-head h2 { margin-bottom: var(--s-3); }
.section-head__body p { font-size: var(--fs-lead); color: var(--text-soft); }
.section--dark .section-head__body p { color: var(--on-dark-muted); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.text-block { max-width: 820px; }
.text-block h2 { margin-bottom: var(--s-3); }
.text-block p { font-size: var(--fs-lead); color: var(--text-soft); }
.text-block a { font-weight: 600; }

.split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}
.split__text h2 { margin-bottom: var(--s-3); }
.split__text p { font-size: var(--fs-lead); }
@media (max-width: 899px) {
	.split { grid-template-columns: 1fr; }
}

/* =========================================================
   Heroes
   ========================================================= */
.hero, .page-hero--dark, .cta-band {
	background:
		radial-gradient(900px 520px at 85% 15%, rgba(201, 162, 39, .20), transparent 62%),
		radial-gradient(760px 460px at 5% 110%, rgba(62, 92, 138, .13), transparent 60%),
		var(--navy-900);
	color: var(--on-dark-muted);
}

.hero {
	padding: calc(var(--header-h) + clamp(40px, 6vw, 96px)) 0 clamp(64px, 8vw, 120px);
}
.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.hero h1 { color: var(--on-dark); margin-bottom: var(--s-3); }
.hero__line { display: inline; }
.hero__line + br + .hero__line { color: var(--blue-300); }
.eyebrow--hero { color: var(--cyan); }
.hero__intro { font-size: var(--fs-lead); max-width: 58ch; margin-bottom: var(--s-4); }
.hero__visual { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; justify-self: end; }
.hero__mesh { width: 100%; height: 100%; }
@media (max-width: 899px) {
	.hero__inner { grid-template-columns: 1fr; }
	.hero__visual { max-width: 280px; justify-self: center; margin-top: calc(var(--s-2) * -1); }
}

.page-hero { padding: calc(var(--header-h) + clamp(40px, 5vw, 80px)) 0 clamp(48px, 6vw, 88px); }
.page-hero--light { background: linear-gradient(180deg, var(--white) 0%, var(--cloud) 100%); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: var(--fs-h1-page); max-width: 22ch; margin-bottom: var(--s-3); }
.page-hero--dark h1 { color: var(--on-dark); }
.page-hero__intro { font-size: var(--fs-lead); max-width: 66ch; color: var(--text-soft); margin: 0; }
.page-hero--dark .page-hero__intro { color: var(--on-dark-muted); }

/* Themed canvas animation behind every hero (initHeroFx in main.js;
   the theme is set per page with data-fx). The canvas is masked so it
   is strongest on the right and quieter behind the headline; on phones
   it fades top to bottom instead. */
.page-hero--net { position: relative; overflow: hidden; isolation: isolate; }
.page-hero--net > .container { position: relative; z-index: 1; }
.hero-net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .6) 40%, #000 72%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .6) 40%, #000 72%);
}
@media (max-width: 719px) {
	.hero-net { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .65)); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .65)); }
}
/* Side-only variant (Insights, Frameworks, What We Do, Data & AI and its
   subpages): the canvas starts just past
   the copy column (content edge + 780px) so the text sits on clean navy.
   Where the copy spans the full width there is no side, so it is hidden. */
.hero-net--side {
	--side-left: calc(max((100% - var(--container)) / 2 - var(--gutter), 0px) + var(--gutter) + 780px);
	left: var(--side-left);
	width: calc(100% - var(--side-left));   /* explicit: a canvas ignores left+right and uses its bitmap size */
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
@media (max-width: 1099px) { .hero-net--side { display: none; } }
/* Hero content on navy: outline the navy flow steps (Industries) and lighten arrows and meta text */
.page-hero--dark .flow__step { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.page-hero--dark .flow--arrows .flow__step:not(:last-child)::after { border-color: var(--on-dark-muted); }
.page-hero--dark .page-hero__meta { color: var(--on-dark-muted); }

.crumb ol { list-style: none; margin: 0 0 var(--s-3); padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .875rem; color: var(--slate); }
.crumb li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.crumb a { color: var(--slate); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }
.page-hero--dark .crumb ol, .page-hero--dark .crumb a { color: var(--on-dark-muted); }
.page-hero--dark .crumb li + li::before { color: rgba(255, 255, 255, .35); }

/* =========================================================
   Cards (Wireframe §2.7 capability card)
   ========================================================= */
.cards { display: grid; gap: var(--s-3); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) {
	.cards--3, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
	.cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; }
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: clamp(24px, 2.4vw, 36px);
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text-soft);
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card__kicker { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin: 0; }
.card__title { margin: 0; font-size: var(--fs-card); }
.card__text { margin: 0; font-size: 1rem; line-height: 1.6; }
.card__arrow { margin-top: auto; padding-top: var(--s-1); color: var(--ink); }
.card__arrow .icon-arrow { width: 22px; height: 22px; }
.card--link:hover, .card--hover:hover { color: var(--text-soft); border-color: var(--ink); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.card--link:hover .icon-arrow { transform: translateX(4px); }
.card--link:hover .card__title, .card--hover:hover .card__title { color: var(--ink); }

.card__links { list-style: none; margin: auto 0 0; padding: var(--s-1) 0 0; display: grid; gap: 6px; }

.section--dark .card { background: rgba(255, 255, 255, .04); border-color: var(--line-dark); color: var(--on-dark-muted); }
.section--dark .card--hover:hover { color: var(--on-dark-muted); background: rgba(255, 255, 255, .07); border-color: var(--blue-300); }
.section--dark .card--hover:hover .card__title { color: var(--blue-300); }

/* Why USCS (About): a gold rule draws across the top of a card on hover */
.cards--why .card { overflow: hidden; }
.cards--why .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.cards--why .card:hover::before { transform: scaleX(1); }
/* =========================================================
   Meet Our Team (About): featured lead card + looping slider.
   Navy cards, white text, gold only as an accent. The slider is
   pure CSS: the member list appears twice and the track slides
   exactly -50%, so the second copy lands where the first began.
   Each card uses margin-right (not gap) so both halves are equal.
   ========================================================= */
.team-lead {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
	padding: clamp(28px, 3.2vw, 44px);
	background: var(--navy-900);
	border: 1px solid var(--blue);
	border-radius: var(--radius);
	box-shadow: 0 0 0 1px rgba(201, 162, 39, .25), 0 18px 44px -12px rgba(201, 162, 39, .35);
	transition: transform .2s ease, box-shadow .2s ease;
}
.team-lead:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(201, 162, 39, .45), 0 22px 50px -12px rgba(201, 162, 39, .5); }
.team-lead__name { margin: 0 0 6px; font-size: var(--fs-h3); color: var(--white); }
.team-lead__role { margin: 0; font-size: var(--fs-lead); color: var(--on-dark-muted); }
.team-lead__role::before { content: ""; display: block; width: 40px; height: 3px; margin: 0 auto 12px; background: var(--blue); border-radius: 2px; }

.team-slider {
	margin-top: var(--s-5);
	padding: 8px 0 12px; /* room for the hover lift */
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.team-slider__track { display: flex; width: max-content; animation: team-loop 55s linear infinite; }
.team-slider__set { display: flex; list-style: none; margin: 0; padding: 0; }
@keyframes team-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.team-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 260px;
	margin-right: var(--s-3);
	padding: var(--s-4) var(--s-3);
	background: var(--navy-900);
	border: 1px solid var(--navy-700);
	border-radius: var(--radius);
	text-align: center;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.team-card:hover { border-color: var(--blue-300); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.team-photo { width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; border: 2px solid var(--blue); object-fit: cover; } /* optional photo, see the note in about.html */
.team-card__name { margin: 0; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; line-height: 1.25; color: var(--white); }
.team-card__role { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--on-dark-muted); }

@media (max-width: 719px) {
	.team-card { width: 210px; margin-right: var(--s-2); padding: var(--s-3) var(--s-2); }
	.team-slider { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
}

/* Reduced motion: no loop. One copy of the list, scrolled by hand or swipe. */
@media (prefers-reduced-motion: reduce) {
	.team-slider { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none; mask-image: none; padding-left: var(--gutter); padding-right: var(--gutter); }
	.team-slider__track { animation: none; }
	.team-slider__set[aria-hidden="true"] { display: none; }
	.team-card { scroll-snap-align: start; }
}

.why-close { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--s-2); margin: var(--s-5) 0 0; font-size: var(--fs-lead); color: var(--on-dark-muted); }

/* Engagement model cards: small uppercase title over an accent rule */
.cards--engage .card { border-top: 0; padding-top: 0; overflow: hidden; }
.cards--engage .card::before {
	content: "";
	display: block;
	height: 4px;
	margin: 0 calc(clamp(24px, 2.4vw, 36px) * -1) clamp(20px, 2vw, 28px);
	background: var(--blue);
}
.cards--engage .card:nth-child(2)::before { background: var(--cyan); }
.cards--engage .card:nth-child(3)::before { background: var(--violet); }
.cards--engage .card:nth-child(4)::before { background: var(--navy-700); }
.cards--engage .card__title { font-size: 1.0625rem; font-weight: 800; letter-spacing: .14em; }

/* =========================================================
   Lists
   ========================================================= */
.steps { list-style: none; margin: 0; padding: 0; max-width: 900px; border-top: 1px solid var(--line); }
.steps li {
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--s-2);
	align-items: baseline;
	padding: 20px 0;
	border-bottom: 1px solid var(--line);
}
.steps__n { font-family: var(--font-display); font-weight: 800; font-size: .9375rem; color: var(--ink); letter-spacing: .04em; }
.steps__t { font-size: var(--fs-lead); color: var(--graphite); }
/* Unnumbered variant (What We Do > How we work): no number column */
.steps--plain li { grid-template-columns: 1fr; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px var(--s-5); }
.checklist--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.checklist li { position: relative; padding-left: 34px; font-size: var(--fs-lead); color: var(--graphite); }
.checklist li::before {
	content: "";
	position: absolute;
	left: 0; top: .2em;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%230B1B33' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
@media (max-width: 719px) {
	.checklist--2 { grid-template-columns: 1fr; }
}

/* =========================================================
   Enterprise Intelligence Framework rail (Home)
   ========================================================= */
/* align-items: flex-start keeps collapsed stages compact; only the
   active (hovered/focused) stage grows in width and height. */
.rail { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 12px; }
.rail__stage {
	--accent: var(--navy-900);
	--glow: 11, 27, 51;          /* accent as r, g, b for the hover glow */
	position: relative;
	isolation: isolate;
	flex: 1 1 0;
	min-width: 0;
	padding: 28px 24px 24px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: flex-grow .45s ease, border-color .3s ease, box-shadow .45s ease;
}
.rail__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--accent); }
/* Soft blurred wash of the accent colour, faded in while the stage expands */
.rail__stage::after {
	content: "";
	position: absolute;
	inset: -40%;
	z-index: -1;
	background: radial-gradient(closest-side at 50% 18%, rgba(var(--glow), .30), rgba(var(--glow), .10) 55%, transparent 100%);
	opacity: 0;
	transform: scale(.7);
	transition: opacity .45s ease, transform .6s ease;
	pointer-events: none;
}
.rail__stage:nth-child(2) { --accent: var(--navy-700); --glow: 30, 58, 95; }
.rail__stage:nth-child(3) { --accent: var(--blue); --glow: 201, 162, 39; }
.rail__stage:nth-child(4) { --accent: var(--cyan); --glow: 227, 199, 102; }
.rail__stage:nth-child(5) { --accent: var(--violet); --glow: 62, 92, 138; }
.rail__stage:nth-child(6) { --accent: var(--navy-900); --glow: 11, 27, 51; }
.rail__stage.is-active {
	flex-grow: 2.6;
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent), 0 18px 44px -10px rgba(var(--glow), .55), 0 0 36px rgba(var(--glow), .28);
}
.rail__stage.is-active::after { opacity: 1; transform: scale(1); }

.rail__btn {
	all: unset;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	cursor: pointer;
}
.rail__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 6px; }
.rail__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--navy-900); overflow-wrap: anywhere; }
.rail__detail { margin-top: var(--s-2); }
.rail__detail p { font-size: 1rem; color: var(--text-soft); min-width: 220px; margin-bottom: 12px; }
.rail__detail .arrow-link { font-size: .9375rem; }

/* With JS, stages start collapsed on wide screens; the hovered or focused
   stage opens its detail with a height and fade transition. */
@media (min-width: 900px) {
	.js .rail__detail {
		max-height: 0;
		margin-top: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transition: max-height .45s ease, margin-top .45s ease, opacity .25s ease, visibility 0s linear .45s;
	}
	.js .rail__stage.is-active .rail__detail {
		max-height: 260px;
		margin-top: var(--s-2);
		opacity: 1;
		visibility: visible;
		transition: max-height .45s ease, margin-top .45s ease, opacity .35s ease .12s, visibility 0s;
	}
}
@media (max-width: 899px) {
	.rail { flex-direction: column; min-height: 0; }
	.rail__stage, .rail__stage.is-active { flex: none; box-shadow: none; border-color: var(--line); }
	.rail__btn { cursor: default; }
}

/* =========================================================
   Step flow (process graphics, lifecycles, delivery spectrum,
   industry flows). Horizontal on desktop, vertical on mobile.
   Stage colours cycle Navy → Deep Navy → Blue → Cyan → Violet.
   ========================================================= */
.flow { margin: var(--s-5) 0 0; }
.flow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
.flow--arrows .flow__steps { gap: 30px; }
.flow__step {
	--bg: var(--navy-900); --fg: var(--white);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 72px;
	padding: 16px 14px;
	background: var(--bg);
	color: var(--fg);
	border-radius: 10px;
	text-align: center;
}
.flow__step:nth-child(5n+2) { --bg: var(--navy-700); }
.flow__step:nth-child(5n+3) { --bg: var(--blue); }
.flow__step:nth-child(5n+4) { --bg: var(--cyan); --fg: var(--navy-900); }
.flow__step:nth-child(5n+5) { --bg: var(--violet); }
.flow__t { font-size: .8125rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3; }
.flow__n { font-size: .75rem; font-weight: 600; opacity: .75; }
.flow--compact .flow__t { font-size: .75rem; letter-spacing: .05em; }
.flow--arrows .flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%; right: -21px;
	width: 10px; height: 10px;
	border-top: 2px solid var(--slate);
	border-right: 2px solid var(--slate);
	transform: translateY(-50%) rotate(45deg);
}
.section--dark .flow--arrows .flow__step:not(:last-child)::after { border-color: var(--on-dark-muted); }
.flow--wrapped { position: relative; padding: 52px 20px 20px; border: 1.5px solid var(--blue); border-radius: var(--radius); background: rgba(201, 162, 39, .03); }
.flow__wrap-label { position: absolute; top: 16px; left: 20px; margin: 0; font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.section--dark .flow--wrapped { border-color: var(--blue-300); background: rgba(227, 199, 102, .05); }
.section--dark .flow__wrap-label { color: var(--blue-300); }
.flow__base {
	margin: 12px 0 0;
	padding: 14px 16px;
	background: var(--navy-700);
	color: var(--white);
	border-radius: 10px;
	text-align: center;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
@media (max-width: 899px) {
	.flow__steps { grid-auto-flow: row; grid-auto-columns: auto; }
	.flow--arrows .flow__steps { gap: 26px; }
	.flow--arrows .flow__step:not(:last-child)::after { top: auto; right: auto; bottom: -19px; left: 50%; transform: translateX(-50%) rotate(135deg); }
	.flow__step { min-height: 56px; }
}

/* =========================================================
   3D flow (Generative & Agentic AI, Trust & Governance, Data
   Governance, AI Governance). Tiles in the hero's navy (--navy-900)
   with an extruded edge and soft shadow on a slight tilt. When the
   figure scrolls into view (.is-in from the reveal observer) the tiles
   rise in sequence, then float gently; a cyan glow travels step to
   step and the arrows nudge in the direction of flow. Continuous
   motion uses only opacity and the translate/rotate properties.
   ========================================================= */
.flow--3d .flow__step {
	--bg: var(--navy-900);
	--fg: var(--white);
	--i: 0;
	--edge: 0 1px 0 #102443, 0 2px 0 #0E213D, 0 3px 0 #0D1E38, 0 4px 0 #0C1C35, 0 5px 0 #0A1830;
	border: 1px solid rgba(227, 199, 102, .2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--edge), 0 16px 26px -10px rgba(11, 27, 51, .5);
	/* per-tile perspective: every tile tilts the same, with no keystone at the row ends */
	transform: perspective(700px) rotateX(8deg);
	transform-origin: 50% 100%;
	transition: transform .3s ease;
}
.flow--3d .flow__step:nth-child(2) { --i: 1; }
.flow--3d .flow__step:nth-child(3) { --i: 2; }
.flow--3d .flow__step:nth-child(4) { --i: 3; }
.flow--3d .flow__step:nth-child(5) { --i: 4; }
.flow--3d .flow__step:nth-child(6) { --i: 5; }
.flow--3d .flow__step:nth-child(7) { --i: 6; }
.flow--3d .flow__step:hover { transform: perspective(700px) rotateX(0deg) translateY(-4px); }
/* travelling glow: an overlay whose opacity peaks as the flow reaches each step */
.flow--3d .flow__step::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	border: 1px solid rgba(227, 199, 102, .85);
	box-shadow: 0 0 22px rgba(227, 199, 102, .35), inset 0 0 14px rgba(227, 199, 102, .12);
	opacity: 0;
	pointer-events: none;
}
.flow--3d.flow--arrows .flow__step:not(:last-child)::after { --nx: 4px; --ny: 0px; border-color: var(--navy-700); }
.js .flow--3d .flow__step { opacity: 0; translate: 0 18px; }
.js .flow--3d.is-in .flow__step {
	animation:
		flow3d-in .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 120ms) both,
		flow3d-float 6s ease-in-out calc(var(--i) * 120ms + .6s) infinite;
}
.js .flow--3d.is-in .flow__step::before { animation: flow3d-glow 6s ease-in-out calc(1.2s + var(--i) * .7s) infinite; }
.js .flow--3d.is-in.flow--arrows .flow__step:not(:last-child)::after { animation: flow3d-nudge 6s ease-in-out calc(1.55s + var(--i) * .7s) infinite; }
@keyframes flow3d-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes flow3d-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes flow3d-glow { 0%, 16%, 100% { opacity: 0; } 7% { opacity: 1; } }
@keyframes flow3d-nudge { 0%, 14%, 100% { translate: 0 0; opacity: .5; } 6% { translate: var(--nx) var(--ny); opacity: 1; } }
/* persistent base band (Data Governance) */
.flow--3d .flow__base {
	position: relative;
	overflow: hidden;
	margin-top: 18px;
	background: var(--navy-900);
	border: 1px solid rgba(227, 199, 102, .2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 #102443, 0 2px 0 #0E213D, 0 3px 0 #0D1E38, 0 14px 24px -10px rgba(11, 27, 51, .45);
}
.flow--3d .flow__base::after {
	content: "";
	position: absolute;
	top: 0; bottom: 0; left: 0;
	width: 30%;
	background: linear-gradient(90deg, transparent, rgba(227, 199, 102, .16), transparent);
	translate: -100% 0;
	pointer-events: none;
}
.js .flow--3d.is-in .flow__base::after { animation: flow3d-sheen 6s ease-in-out 1.2s infinite; }
@keyframes flow3d-sheen { 0% { translate: -100% 0; } 60%, 100% { translate: 340% 0; } }
/* taller tiles with an icon (Trust & Governance) */
.flow--tiles .flow__steps { gap: 20px; }
.flow--tiles .flow__step { min-height: 150px; gap: 14px; padding: 26px 18px; border-top: 3px solid var(--blue-300); }
.flow--tiles .flow__step:nth-child(2) { border-top-color: var(--cyan); }
.flow--tiles .flow__step:nth-child(3) { border-top-color: var(--violet); }
.flow__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(227, 199, 102, .1); box-shadow: inset 0 0 0 1px rgba(227, 199, 102, .35); color: var(--cyan); }
.flow__icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow--tiles .flow__t { font-size: .9375rem; }
.js .flow--tiles.is-in .flow__icon { animation: flow3d-pulse 4s ease-in-out calc(1s + var(--i) * .5s) infinite; }
@keyframes flow3d-pulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(227, 199, 102, .35); } 50% { box-shadow: inset 0 0 0 1px rgba(227, 199, 102, .8), 0 0 0 6px rgba(227, 199, 102, .08); } }
@media (max-width: 899px) {
	.flow--3d .flow__step { transform: perspective(700px) rotateX(5deg); }
	.flow--3d.flow--arrows .flow__step:not(:last-child)::after { --nx: 0px; --ny: 4px; }
	.flow--tiles .flow__step { min-height: 0; flex-direction: row; justify-content: flex-start; text-align: left; padding: 16px 18px; }
	.flow--tiles .flow__icon { width: 44px; height: 44px; flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
	.js .flow--3d .flow__step { opacity: 1; translate: none; animation: none; }
	.js .flow--3d .flow__step::before, .js .flow--3d .flow__step::after, .js .flow--3d .flow__base::after, .js .flow--3d .flow__icon { animation: none; }
}

/* =========================================================
   Venn (Data & AI: Data, Analytics, AI → Intelligent Enterprise)
   ========================================================= */
/* 3D version: shaded translucent spheres with a gloss highlight and a
   floor shadow. The spheres drift toward the centre and back, so the
   overlap gently pulses; the core orb breathes with cyan rings, and a
   satellite travels a tilted orbit behind them. Labels sit on navy pills
   so they stay readable over any sphere colour. Off under reduced motion. */
.venn { margin: 0 auto; max-width: 460px; }
.venn svg { width: 100%; overflow: visible; }
.venn__c { stroke-width: 1.5; stroke-opacity: .75; }
.venn__c--1 { stroke: var(--blue); }
.venn__c--2 { stroke: var(--cyan); }
.venn__c--3 { stroke: var(--violet); }
.venn__gloss { fill: #FFFFFF; opacity: .4; }
.venn__orbit { fill: none; stroke: var(--blue); stroke-opacity: .3; stroke-width: 1.2; stroke-dasharray: 3 7; }
.venn__sat { fill: var(--cyan); }
.venn__tag rect { fill: var(--navy-900); }
.venn__tag text { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; fill: var(--white); text-anchor: middle; dominant-baseline: central; letter-spacing: .1em; text-transform: uppercase; }
.venn__center { font-family: var(--font-body); font-size: 11.5px; font-weight: 700; fill: var(--white); text-anchor: middle; letter-spacing: .04em; }
.venn__orb { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 10px 12px rgba(11, 27, 51, .35)); animation: venn-breathe 4s ease-in-out infinite; }
.venn__ring { fill: none; stroke: var(--cyan); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: venn-ring 3.2s ease-out infinite; }
.venn__ring--2 { animation-delay: 1.6s; }
.venn__stage { animation: venn-float 8s ease-in-out infinite; }
.venn__s { animation: venn-drift 6s ease-in-out infinite; }
.venn__s--1 { --dx: 5px; --dy: 4px; }
.venn__s--2 { --dx: -5px; --dy: 4px; }
.venn__s--3 { --dx: 0px; --dy: -6px; }
@keyframes venn-drift { 50% { transform: translate(var(--dx), var(--dy)); } }
@keyframes venn-float { 50% { transform: translateY(-6px); } }
@keyframes venn-breathe { 50% { transform: scale(1.05); } }
@keyframes venn-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
	.venn__stage, .venn__s, .venn__orb { animation: none; }
	.venn__ring, .venn__sat { display: none; }
}

/* =========================================================
   Role matrix (Talent): 6 columns desktop, accordions mobile
   ========================================================= */
.roles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-2); }
.roles__col { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: 12px; padding: 20px 18px; }
.roles__col:nth-child(2) { border-top-color: var(--cyan); }
.roles__col:nth-child(3) { border-top-color: var(--violet); }
.roles__col:nth-child(4) { border-top-color: var(--navy-700); }
.roles__col:nth-child(5) { border-top-color: var(--ink); }
.roles__col:nth-child(6) { border-top-color: var(--navy-900); }
.roles__col summary { list-style: none; cursor: default; }
.roles__col summary::-webkit-details-marker { display: none; }
.roles__col h3 { font-size: 1.0625rem; margin: 0 0 12px; }
.roles__col ul { list-style: none; margin: 0; padding: 0; }
.roles__col li { padding: 8px 0; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--text-soft); }
@media (max-width: 1199px) {
	.roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
	.roles { grid-template-columns: 1fr; gap: 10px; }
	.roles__col { padding: 0; }
	.roles__col summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; min-height: 44px; }
	.roles__col summary::after { content: "+"; font-size: 1.375rem; font-weight: 400; color: var(--ink); line-height: 1; }
	.roles__col[open] summary::after { content: "–"; }
	.roles__col h3 { margin: 0; }
	.roles__col ul { padding: 0 18px 12px; }
}

/* =========================================================
   Hub-and-spoke diagram (What We Do: Integrated Consulting Model)
   Node positions match the connector end points in the SVG
   (viewBox 300×300 stretched to the figure).
   ========================================================= */
/* 3D version: extruded node cards on a tilted stage, a glowing orb at
   the centre, and energy pulses that travel out along each connector
   in sequence, lighting each practice as they arrive (5s cycle).
   Everything is CSS transform/opacity; off under reduced motion. */
.hub {
	--cycle: 5s;
	position: relative;
	margin: 0 auto var(--s-5);
	max-width: 860px;
	aspect-ratio: 1.75 / 1;
	perspective: 1200px;
}
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__line { stroke: rgba(201, 162, 39, .35); stroke-width: 2; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; animation: hub-dash 1.6s linear infinite; }
.hub__pulse {
	stroke: var(--cyan);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 22 400;
	stroke-dashoffset: 22;
	opacity: 0;
	filter: drop-shadow(0 0 4px rgba(227, 199, 102, .9));
	animation: hub-pulse var(--cycle) ease-in infinite;
	animation-delay: calc(var(--i) * 1s);
}
@keyframes hub-dash { to { stroke-dashoffset: -18; } }
@keyframes hub-pulse {
	0%   { stroke-dashoffset: 22; opacity: 0; }
	3%   { opacity: 1; }
	17%  { stroke-dashoffset: calc(var(--len) * -1 + 20); opacity: 1; }
	20%, 100% { stroke-dashoffset: calc(var(--len) * -1 + 20); opacity: 0; }
}

.hub__center {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	z-index: 2;
	display: grid;
	place-items: center;
}
.hub__orb {
	grid-area: 1 / 1;
	width: 172px; height: 172px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55), transparent 32%),
		radial-gradient(circle at 50% 50%, var(--violet) 0%, var(--navy-700) 62%, var(--navy-900) 100%);
	box-shadow:
		inset -14px -18px 34px rgba(11, 27, 51, .55),
		inset 10px 10px 24px rgba(227, 199, 102, .25),
		0 24px 40px -14px rgba(11, 27, 51, .55),
		0 0 0 10px rgba(201, 162, 39, .10);
	animation: hub-breathe 4s ease-in-out infinite;
}
.hub__orb::before, .hub__orb::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1.5px solid rgba(227, 199, 102, .55);
	animation: hub-ring 3s ease-out infinite;
}
.hub__orb { position: relative; }
.hub__orb::after { animation-delay: 1.5s; }
.hub__label {
	grid-area: 1 / 1;
	position: relative;
	max-width: 130px;
	text-align: center;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--white);
	text-shadow: 0 2px 10px rgba(11, 27, 51, .5);
}
@keyframes hub-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.04; } }
@keyframes hub-ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.45); opacity: 0; } }

.hub__nodes { list-style: none; margin: 0; padding: 0; }
.hub__node {
	--accent: var(--blue);
	--glow: 201, 162, 39;
	position: absolute;
	z-index: 1;
	transform: translate(-50%, -50%);
	width: 212px;
	transform-style: preserve-3d;
	animation: hub-float 6s ease-in-out infinite;
	animation-delay: calc(var(--i) * -1.2s);
}
.hub__face {
	display: block;
	padding: 16px 18px;
	background: linear-gradient(180deg, var(--white) 0%, #FCF9F3 100%);
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent);
	border-radius: var(--radius);
	text-align: center;
	font-family: var(--font-display);
	font-size: .9375rem;
	font-weight: 700;
	color: var(--navy-900);
	line-height: 1.3;
	transform: rotateX(14deg);
	/* stacked edges give the card visible thickness, then a soft drop shadow */
	box-shadow:
		0 1px 0 #DCE3EC, 0 2px 0 #D3DBE6, 0 3px 0 #CAD3DF, 0 4px 0 #C1CBD8, 0 5px 0 #B8C3D1,
		0 14px 22px -6px rgba(11, 27, 51, .22);
	transition: transform .3s ease;
	animation: hub-light var(--cycle) ease-out infinite;
	animation-delay: calc(var(--i) * 1s);
}
.hub__node:hover .hub__face { transform: rotateX(0deg) translateY(-4px); }
.hub__node--top { left: 50%; top: 13.3%; }
.hub__node--left { left: 13.3%; top: 50%; --accent: var(--cyan); --glow: 227, 199, 102; }
.hub__node--right { left: 86.7%; top: 50%; --accent: var(--violet); --glow: 62, 92, 138; }
.hub__node--bottom-left { left: 20%; top: 87.3%; --accent: var(--navy-700); --glow: 30, 58, 95; }
.hub__node--bottom-right { left: 80%; top: 87.3%; }
@keyframes hub-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
/* Lights up as the pulse reaches it (pulse arrives at ~17% of the cycle) */
@keyframes hub-light {
	0%, 12%, 40%, 100% {
		border-color: var(--line); border-top-color: var(--accent);
		box-shadow: 0 1px 0 #DCE3EC, 0 2px 0 #D3DBE6, 0 3px 0 #CAD3DF, 0 4px 0 #C1CBD8, 0 5px 0 #B8C3D1, 0 14px 22px -6px rgba(11, 27, 51, .22);
	}
	18%, 26% {
		border-color: var(--accent);
		box-shadow: 0 1px 0 #DCE3EC, 0 2px 0 #D3DBE6, 0 3px 0 #CAD3DF, 0 4px 0 #C1CBD8, 0 5px 0 #B8C3D1, 0 14px 30px -4px rgba(var(--glow), .45), 0 0 26px rgba(var(--glow), .35);
	}
}
@media (max-width: 719px) {
	.hub { aspect-ratio: auto; display: grid; gap: 16px; justify-items: center; perspective: none; }
	.hub__lines { display: none; }
	.hub__center { position: static; transform: none; }
	.hub__orb { width: 132px; height: 132px; }
	.hub__nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
	.hub__node { position: static; transform: none; width: auto; animation: none; }
	.hub__face { transform: none; height: 100%; display: flex; align-items: center; justify-content: center; }
	.hub__node:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
	.hub__line, .hub__pulse, .hub__orb, .hub__orb::before, .hub__orb::after, .hub__node, .hub__face { animation: none !important; }
	.hub__pulse { opacity: 0; }
}

/* =========================================================
   Data-to-AI stack (Home)
   ========================================================= */
.stack { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 12px; }
.stack__layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stack__layer {
	padding: 15px 18px;
	border-radius: 10px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--white);
}
.stack__layer--1 { background: var(--navy-700); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }
.stack__layer--2 { background: #565C4D; }
.stack__layer--3 { background: #857636; }   /* palette #8F7F3A darkened 7% so white text meets 4.5:1 */
.stack__layer--4 { background: var(--blue); }
.stack__layer--5 { background: var(--cyan); color: var(--navy-900); }
.stack__layer--6 { background: var(--violet); }
.stack__layer--7 { background: var(--white); color: var(--navy-900); }
.stack__rail {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid rgba(227, 199, 102, .75);
	border-radius: 10px;
}
.stack__rail span {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--on-dark);
	white-space: nowrap;
}
/* Builds upward once, in under 1.2s: 7 layers × 110ms stagger + 350ms */
.js .stack.reveal { opacity: 1; transform: none; }
.js .stack .stack__layer { opacity: 0; transform: translateY(14px); }
.js .stack.is-in .stack__layer {
	opacity: 1;
	transform: none;
	transition: opacity .35s ease, transform .35s ease;
	transition-delay: calc(var(--i) * 110ms);
}
.js .stack .stack__rail { opacity: 0; transition: opacity .5s ease .5s; }
.js .stack.is-in .stack__rail { opacity: 1; }
/* Stack on a light band (Technology & Engineering) */
.section--white .stack__layer--1, .section--cloud .stack__layer--1 { box-shadow: none; }
.section--white .stack__rail, .section--cloud .stack__rail { border-color: var(--ink); background: rgba(201, 162, 39, .04); }
.section--white .stack__rail span, .section--cloud .stack__rail span { color: var(--navy-900); }
@media (max-width: 899px) {
	.stack { margin-top: var(--s-2); }
}
/* 3D gradient stack (Technology & Engineering). Blues run from dark navy
   at the base to pastel at the top; each layer has an extruded edge on a
   slight tilt, floats gently, and a small pulse climbs the connector
   into the layer above. Continuous motion uses the translate property
   and a background-position on tiny connectors only. */
.stack--grad .stack__layers { gap: 14px; perspective: 900px; }
.stack--grad .stack__layer {
	--c: #0B1B33;
	--e: #050D19;
	position: relative;
	background: var(--c);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, .12);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 0 var(--e), 0 2px 0 var(--e), 0 3px 0 var(--e), 0 4px 0 var(--e), 0 14px 22px -10px rgba(11, 27, 51, .45);
	rotate: x 10deg;
}
.stack--grad .stack__layer--1 { --c: #0B1B33; --e: #050D19; }
.stack--grad .stack__layer--2 { --c: #1E3A5F; --e: #142842; }
.stack--grad .stack__layer--3 { --c: #3E5C8A; --e: #2E4668; }
.stack--grad .stack__layer--4 { --c: #6E86AB; --e: #566D90; color: var(--navy-900); }
.stack--grad .stack__layer--5 { --c: #9EADC4; --e: #8395AE; color: var(--navy-900); }
.stack--grad .stack__layer--6 { --c: #D8DEE8; --e: #B9C3D2; color: var(--navy-900); }
/* connector below each layer (the bottom layer is last in the list) */
.stack--grad .stack__layer:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	width: 2px;
	height: 14px;
	margin-left: -1px;
	background: linear-gradient(to top, rgba(30, 58, 95, .15), rgba(227, 199, 102, .95) 50%, rgba(30, 58, 95, .15)) 0 0 / 100% 300%;
}
.stack--grad .stack__rail { border-color: var(--navy-700); background: linear-gradient(to top, rgba(30, 58, 95, .08), rgba(216, 222, 232, .45)); }
.stack--grad .stack__rail span { color: var(--navy-900); }
.js .stack--grad.is-in .stack__layer { animation: stack-float 7s ease-in-out calc(1s + var(--i) * .25s) infinite; }
.js .stack--grad.is-in .stack__layer:not(:last-child)::after { animation: stack-climb 2.4s linear calc(var(--i) * .3s) infinite; }
@keyframes stack-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes stack-climb { from { background-position: 0 0; } to { background-position: 0 100%; } }
@media (prefers-reduced-motion: reduce) {
	.js .stack--grad .stack__layer, .js .stack--grad .stack__layer::after { animation: none; }
}

/* =========================================================
   Technology expertise rows (Home)
   ========================================================= */
.tech-rows { border-top: 1px solid var(--line); }
.tech-row {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--s-3);
	align-items: center;
	padding: 22px 0;
	border-bottom: 1px solid var(--line);
}
.tech-row__label { font-size: 1.0625rem; margin: 0; }
.tech-row__items { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tech-row__items li {
	padding: 7px 14px;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--graphite);
}
.tech-row__note { margin: 10px 0 0; font-size: var(--fs-small); color: var(--slate); }
@media (max-width: 719px) {
	.tech-row { grid-template-columns: 1fr; gap: 12px; }
}

/* =========================================================
   Ambient background (Home: Four ways to engage). Two large soft
   colour fields drift slowly behind the content. Transform-only
   animation for smooth performance; off under reduced motion.
   ========================================================= */
.section--ambient { position: relative; overflow: hidden; isolation: isolate; }
.section--ambient::before, .section--ambient::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 60vmax;
	height: 60vmax;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}
.section--ambient::before {
	top: -30vmax;
	left: -18vmax;
	background: radial-gradient(closest-side, rgba(201, 162, 39, .10), rgba(227, 199, 102, .05) 55%, transparent);
	animation: ambient-a 22s ease-in-out infinite alternate;
}
.section--ambient::after {
	bottom: -32vmax;
	right: -20vmax;
	background: radial-gradient(closest-side, rgba(62, 92, 138, .09), rgba(201, 162, 39, .04) 55%, transparent);
	animation: ambient-b 26s ease-in-out infinite alternate;
}
@keyframes ambient-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(22vw, 8vmax, 0) scale(1.15); } }
@keyframes ambient-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-24vw, -6vmax, 0) scale(.95); } }
@media (prefers-reduced-motion: reduce) {
	.section--ambient::before, .section--ambient::after { animation: none; }
}

/* =========================================================
   Technology marquee (Home): two rows scrolling in opposite
   directions. Each track holds its list twice and moves exactly
   -50%, so the loop is seamless. Pauses on hover.
   ========================================================= */
/* Dark band with the same ambient gradient as the heroes and CTA bands */
.section--tech {
	background:
		radial-gradient(900px 520px at 85% 0%, rgba(201, 162, 39, .18), transparent 62%),
		radial-gradient(760px 460px at 5% 100%, rgba(62, 92, 138, .12), transparent 60%),
		var(--navy-900);
}
/* Rows run the full viewport width, outside the content container */
.marquees { display: grid; gap: 16px; margin-inline: calc(50% - 50vw); }
.marquee {
	position: relative;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Each track holds two identical halves; moving exactly one half
   (-50% minus half a gap) makes the loop seamless. */
.marquee__track {
	list-style: none;
	margin: 0;
	padding: 6px 0;
	display: flex;
	align-items: center;
	gap: 12px;
	width: max-content;
	will-change: transform;
	animation: marquee-l 38s linear infinite;
}
.marquee--rev .marquee__track { animation-name: marquee-r; animation-duration: 34s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-l { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
@keyframes marquee-r { from { transform: translateX(calc(-50% - 6px)); } to { transform: translateX(0); } }
.marquee__item {
	flex: 0 0 auto;
	padding: 12px 22px;
	background: rgba(255, 255, 255, .04);
	border: 1px solid var(--line-dark);
	border-radius: 12px;
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: .01em;
	color: #E6EBF3;
	white-space: nowrap;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.marquee__item:hover { border-color: var(--blue-300); background: rgba(227, 199, 102, .10); color: var(--white); }
.marquee__note { flex: 0 0 auto; padding: 0 6px; font-size: var(--fs-small); color: var(--on-dark-muted); white-space: nowrap; }
@media (max-width: 719px) {
	.marquee__item { padding: 10px 16px; }
	.marquees { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	/* No endless scroll: the list wraps in place, duplicates hidden, no scrollbar. */
	.marquees { margin-inline: 0; }
	.marquee { -webkit-mask-image: none; mask-image: none; }
	.marquee__track { animation: none; width: auto; flex-wrap: wrap; }
	.marquee__track [aria-hidden="true"] { display: none; }
}

/* =========================================================
   Trusted-by logo band (Home). One full-width row of logos floating
   free (no tiles), evenly spaced, scrolling right to left without
   pausing (hover pauses it on desktop). The track holds the list twice
   and each logo, the last included, carries the same right margin, so
   moving exactly 50% loops seamlessly. Logos keep their own proportions
   and are optically balanced (see below). The <img> width/height
   attributes match each file's real aspect ratio and load eagerly, so
   no logo resizes or pops in while the belt is moving.
   ========================================================= */
.logo-band {
	--logo-band-speed: 36s;   /* one full set; change to speed up or slow down */
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-band__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	animation: logo-band var(--logo-band-speed) linear infinite;
}
.logo-band__item {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin-right: 56px;
}
@keyframes logo-band { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (hover: hover) and (pointer: fine) {
	.logo-band:hover .logo-band__track { animation-play-state: paused; }
}
@media (max-width: 719px) {
	.logo-band { --logo-band-speed: 30s; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
	.logo-band__item { margin-right: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	/* No endless scroll: the logos wrap in place, duplicates hidden. */
	.logo-band { -webkit-mask-image: none; mask-image: none; }
	.logo-band__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 24px 48px; padding: 0 var(--gutter); }
	.logo-band__track .logo-band__item { margin-right: 0; }
	.logo-band__track [aria-hidden="true"] { display: none; }
}
/* Optical sizing: each <li> carries --h (image height) and --mt/--mr/--mb/--ml
   (negative margins that trim the artwork's built-in whitespace), measured
   from the logo's visible ink so every mark reads at a similar weight:
   wide wordmarks up to 150px wide, compact marks up to 50px tall.
   Width follows the natural aspect ratio. --z scales the whole set. */
.logo-band__item img {
	--z: 1;
	display: block;
	height: calc(var(--h, 40) * var(--z) * 1px);
	width: auto;
	max-width: none;
	object-fit: contain;
	mix-blend-mode: multiply;   /* PwC/USAA ship on opaque white; keep their trimmed white from covering neighbours */
	margin: calc(var(--mt, 0) * var(--z) * 1px) calc(var(--mr, 0) * var(--z) * 1px) calc(var(--mb, 0) * var(--z) * 1px) calc(var(--ml, 0) * var(--z) * 1px);
}
@media (max-width: 719px) { .logo-band__item img { --z: .8; } }
/* The NMHealth mark is supplied white-only; render it as dark ink so it shows on white */
.logo-band__item--invert img { filter: brightness(0); opacity: .85; }

/* =========================================================
   Subtle dot-grid texture (Home: Built around enterprise outcomes)
   Fades out toward the edges so it never competes with the cards.
   ========================================================= */
.section--pattern { position: relative; isolation: isolate; }
.section--pattern::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(circle, rgba(201, 162, 39, .22) 1.2px, transparent 1.6px),
		linear-gradient(rgba(30, 58, 95, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(30, 58, 95, .035) 1px, transparent 1px);
	background-size: 24px 24px, 96px 96px, 96px 96px;
	background-position: 0 0, -1px -1px, -1px -1px;
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 85%);
	mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 20%, transparent 85%);
}

/* Text with a single action on the right (Home: Industry context) */
.split-cta { display: grid; grid-template-columns: minmax(0, 820px) auto; justify-content: space-between; align-items: end; gap: var(--s-4) var(--s-5); }
.split-cta .text-block { max-width: none; }
@media (max-width: 899px) { .split-cta { grid-template-columns: 1fr; align-items: start; } }

/* =========================================================
   Closing CTA band (every page)
   ========================================================= */
.cta-band { padding: clamp(64px, 8vw, 120px) 0; text-align: center; }
.cta-band__inner { max-width: 860px; }
.cta-band h2 { color: var(--on-dark); margin: 0 auto var(--s-3); }
.cta-band p { font-size: var(--fs-lead); max-width: 62ch; margin: 0 auto var(--s-4); }
.cta-band .btn-row { justify-content: center; }

/* =========================================================
   Newsletter (global, above the footer)
   ========================================================= */
.newsletter { background: var(--cloud); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0; }
.newsletter__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.newsletter h2 { font-size: clamp(1.5rem, 1.2vw + 1rem, 2rem); margin-bottom: 12px; }
.newsletter p { color: var(--text-soft); }
.newsletter__field label { display: block; font-size: .875rem; font-weight: 600; color: var(--graphite); margin-bottom: 8px; }
.newsletter__row { display: flex; gap: 12px; }
.newsletter__row input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 899px) {
	.newsletter__inner { grid-template-columns: 1fr; gap: var(--s-3); }
}
@media (max-width: 479px) {
	.newsletter__row { flex-direction: column; }
}

/* =========================================================
   Forms
   ========================================================= */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
	width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	background: var(--white);
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	font: inherit;
	font-size: 1rem;
	color: var(--graphite);
	transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { min-height: 160px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, .22);
}
[aria-invalid="true"] { border-color: var(--error) !important; }

.form-status { margin: 10px 0 0; font-size: .9375rem; min-height: 1.5em; }
.form-status.is-error { color: var(--error); }
.form-status.is-success { color: var(--ok); font-weight: 600; }

/* =========================================================
   Placeholders for copy still to be supplied
   ========================================================= */
.is-pending { color: var(--slate); font-style: italic; }
.section--dark .is-pending, .cta-band .is-pending, .page-hero--dark .is-pending { color: var(--on-dark-muted); }

/* =========================================================
   Contact (Wireframe §3.25): form left ~2/3, direct contact right ~1/3
   ========================================================= */
.contact-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 899px) { .contact-layout { grid-template-columns: 1fr; } }

.form { display: grid; gap: var(--s-4); }
.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend, .form__h { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 700; color: var(--navy-900); line-height: 1.2; margin: 0 0 var(--s-2); padding: 0; }
.form__req { color: var(--error); }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px var(--s-3); }
@media (max-width: 719px) { .checks { grid-template-columns: 1fr; } }
.check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); cursor: pointer; font-size: 1rem; color: var(--graphite); }
.check:hover { border-color: var(--ink); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.check:has(input:checked) { border-color: var(--ink); background: rgba(201, 162, 39, .05); }

.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.field-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 719px) { .field-grid { grid-template-columns: 1fr; } }
.field label { display: block; font-size: .9375rem; font-weight: 600; color: var(--graphite); margin-bottom: 8px; }
.field__opt { font-weight: 400; color: var(--slate); }
.field__error { margin: 6px 0 0; font-size: .875rem; color: var(--error); min-height: 0; }
.field__error:empty { display: none; }

.consent { display: flex; align-items: flex-start; gap: 12px; font-size: .9375rem; color: var(--graphite); cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--ink); }
.privacy-note { margin: 8px 0 0 32px; font-size: .875rem; color: var(--slate); }

.form__close { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.form__close p { color: var(--text-soft); }
.form__success { padding: var(--s-4); border: 1px solid var(--ok); border-radius: var(--radius); background: rgba(27, 127, 75, .05); }
.form__success h2 { font-size: var(--fs-h3); }

.panel { padding: clamp(24px, 2.4vw, 36px); background: var(--cloud); border: 1px solid var(--line); border-radius: var(--radius); }
.panel h2 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.panel dl { margin: 0; display: grid; gap: var(--s-2); }
.panel dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.panel dd { margin: 2px 0 0; color: var(--graphite); }

/* =========================================================
   Person card (About: Leadership)
   ========================================================= */
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 899px) { .people { grid-template-columns: 1fr; } }
.person { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 32px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.person--wide { grid-column: 1 / -1; }
.person__photo { width: 96px; height: 96px; border-radius: 50%; background: var(--cloud); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: var(--fs-label); color: var(--slate); text-align: center; }
.person__name { font-size: var(--fs-card); margin: 0; }
.person__role { margin: 0; font-size: var(--fs-small); font-weight: 600; letter-spacing: .04em; color: var(--slate); }
.person__bio p { font-size: 1rem; color: var(--text-soft); }

/* =========================================================
   Insight card (Insights) and article template
   ========================================================= */
.insight { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text-soft); text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.insight:hover { color: var(--text-soft); border-color: var(--ink); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.insight__img { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); display: flex; align-items: center; justify-content: center; color: var(--on-dark-muted); font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; }
.insight__body { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.insight__type { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.insight__title { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.insight:hover .insight__title { color: var(--ink); }
.insight__meta { margin: 0; font-size: var(--fs-small); color: var(--slate); }
.insight__text { margin: 0; font-size: 1rem; }

.article-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: var(--fs-small); color: var(--slate); }
.article-type { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-2); }
.takeaways { max-width: 820px; padding: clamp(24px, 2.4vw, 36px); background: var(--cloud); border-left: 4px solid var(--blue); border-radius: var(--radius-sm); margin-bottom: var(--s-5); }
.takeaways h2 { font-size: var(--fs-h3); }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

/* =========================================================
   Case study card (component, CD §27; no host page yet)
   ========================================================= */
.case-card { display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 36px); background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--blue); border-radius: var(--radius); }
.case-card__industry { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.case-card__title { margin: 0; font-size: var(--fs-card); }
.case-card h4 { margin: 8px 0 4px; font-size: 1rem; font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

/* =========================================================
   Long-form text (legal pages, article body)
   ========================================================= */
.prose { max-width: 760px; }
.prose h2 { font-size: var(--fs-h3); margin: var(--s-5) 0 var(--s-2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.25rem; margin: var(--s-4) 0 var(--s-1); }
.prose p, .prose li { font-size: var(--fs-lead); color: var(--graphite); }
.prose .btn { margin-top: var(--s-2); }
.page-hero__meta { margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--slate); }
.page-hero .flow { margin-top: var(--s-5); }

/* =========================================================
   Utility pages (404, search): centered message on white
   ========================================================= */
.utility { padding: calc(var(--header-h) + clamp(56px, 8vw, 128px)) 0 var(--section-y); text-align: center; }
.utility__inner { max-width: 720px; margin: 0 auto; }
.utility h1 { font-size: var(--fs-h2); }
.utility p { font-size: var(--fs-lead); color: var(--text-soft); }
.utility .btn-row { justify-content: center; margin-top: var(--s-4); }
.search-form { display: flex; gap: 12px; margin: 0 0 var(--s-4); text-align: left; }
.search-form input { flex: 1 1 auto; min-width: 0; }
@media (max-width: 479px) { .search-form { flex-direction: column; } }
.utility__links { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* =========================================================
   Footer (Wireframe §3.0)
   ========================================================= */
.site-footer { background: var(--navy-900); color: var(--on-dark-muted); padding: clamp(56px, 6vw, 80px) 0 32px; font-size: var(--fs-small); }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 3fr); gap: var(--s-5); }
.site-footer .logo { margin: 0 0 var(--s-3); }
.site-footer__brand p { max-width: 40ch; }
.site-footer__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.footer-col__title {
	font-family: var(--font-body);
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--on-dark);
	margin: 0 0 var(--s-2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer__bottom {
	margin-top: var(--s-6);
	padding-top: var(--s-3);
	border-top: 1px solid var(--line-dark);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-2);
}
.site-footer .cc-footer-link { color: var(--on-dark-muted); }
.site-footer .cc-footer-link:hover { color: var(--on-dark); }
@media (max-width: 1099px) {
	.site-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 719px) {
	.site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
}

/* =========================================================
   Motion. Nothing is hidden without JS (the .js class arms it),
   and a 3s failsafe in main.js reveals everything regardless.
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; transition-delay: 0s !important; }
	.js .reveal, .js .stack .stack__layer, .js .stack .stack__rail { opacity: 1; transform: none; }
}

/* =========================================================
   Navy & gold palette: text on gold fills, gold text on navy
   ========================================================= */
/* White text is hard to read on gold, so gold fills carry navy text */
.btn--primary, .btn--ember,
.btn--primary:hover, .btn--ember:hover,
.skip-link, .skip-link:focus, .stack__layer--4 { color: var(--on-accent); }
.flow__step:nth-child(5n+3) { --fg: var(--on-accent); }
/* Dark gold (--ink) is for white surfaces; on navy use light gold */
.page-hero--dark .crumb a:hover, .hero .crumb a:hover { color: var(--blue-300); }
.site-footer .cc-footer-link { color: var(--blue-300); }
.section--dark .card__arrow, .section--dark .steps__n { color: var(--blue-300); }

/* =========================================================
   Navy cards and diagrams: white text, subtle gold accents
   ========================================================= */
/* 3D flow tiles are navy in every position. The palette rule above gives
   every 3rd flat-flow step navy text (that step is gold there); on the
   3D flows that made the 3rd tile navy-on-navy. */
.flow--3d .flow__step:nth-child(n) { --fg: var(--white); color: var(--white); }
.flow--3d .flow__step {
	border-color: rgba(201, 162, 39, .4);
	box-shadow: inset 0 1px 0 rgba(227, 199, 102, .35), var(--edge), 0 16px 26px -10px rgba(11, 27, 51, .5);
	transition: transform .3s ease, box-shadow .3s ease;
}
.flow--3d .flow__step:hover {
	box-shadow: inset 0 1px 0 rgba(227, 199, 102, .35), var(--edge), 0 0 0 1px var(--blue), 0 14px 30px -8px rgba(201, 162, 39, .4);
}
.flow--3d.flow--arrows .flow__step:not(:last-child)::after { border-color: var(--ink); }
.flow--3d .flow__base { border-color: rgba(201, 162, 39, .4); }
/* Trust tiles: gold top edges (the side borders above would otherwise recolour them) */
.flow--tiles .flow__step:nth-child(n) { border-top-color: var(--blue); }
.flow--tiles .flow__step:nth-child(2) { border-top-color: var(--blue-300); }
/* Flat flows: navy and secondary-blue steps get a thin gold top line and hairline */
.flow:not(.flow--3d) .flow__step:nth-child(5n+1),
.flow:not(.flow--3d) .flow__step:nth-child(5n+2),
.flow:not(.flow--3d) .flow__step:nth-child(5n+5) {
	--fg: var(--white);
	box-shadow: inset 0 2px 0 var(--blue), inset 0 0 0 1px rgba(201, 162, 39, .3);
}
/* Data-to-AI stack (Home): gold hairline on the navy and secondary-blue layers */
.stack:not(.stack--grad) .stack__layer--1,
.stack:not(.stack--grad) .stack__layer--6 { box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .5); }
/* Architecture stack (Technology & Engineering): gold edge on the three navy/blue layers */
.stack--grad .stack__layer--1,
.stack--grad .stack__layer--2,
.stack--grad .stack__layer--3 { border-color: rgba(201, 162, 39, .45); }
/* Venn (Data & AI): gold outline on the navy label pills */
.venn__tag rect { stroke: var(--blue); stroke-width: 1; stroke-opacity: .7; }