/* ==========================================================================
   DanSources — "Clear Signal" design system (light)
   --------------------------------------------------------------------------
   Second full visual pass, replacing the dark "Precision & Power" system.
   Direction: the brand's own case-study collateral (white ground, navy +
   sky-blue hexagons, orange kicker labels) extended into a site-wide light
   design language. Navy #23356e and sky #009cde come from the logo; orange
   #ff9e1b and the blue gradient #002c71→#2269de come from the live site's
   own stored styles.

   Structure:
     1.  Design tokens
     2.  Base / reset
     3.  Layout: container, grid + legacy utility subset
     4.  Buttons
     5.  Header / navigation
     6.  Page mast (light)
     7.  Section primitives
     8.  Homepage: hero + industry rotator
     9.  Homepage: industries showcase (tabs + feature rows)
     10. Homepage: pathway cards, testimonial, CTA band
     11. Legacy DB-content re-skin (light)
     12. Case studies (index + cards + single)
     13. Contact
     14. Careers
     15. Seals strip + footer
     16. Motion (reveals, keyframes, reduced-motion)
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */
:root {
	/* Brand navy (from the logo) */
	--navy-950: #101a3d;
	--navy-900: #17224e;
	--navy:     #23356e;
	--navy-600: #33488f;

	/* Brand sky blue (logo + collateral) */
	--sky:      #009cde;
	--sky-deep: #0074a8;   /* AA-safe on white for text/links */
	--sky-100:  #e2f3fc;

	/* Brand orange (live-site collateral kicker) */
	--orange:      #ff9e1b;
	--orange-deep: #e88a00;

	/* Light surfaces */
	--white:  #ffffff;
	--mist:   #f4f8fc;
	--mist-2: #e8f0f8;
	--line:   #dce6f1;

	/* Text */
	--text:        #46536f;
	--text-strong: #17224e;

	/* Signature gradients */
	--grad-brand: linear-gradient(120deg, var(--navy) 0%, var(--sky) 100%);
	--grad-blue:  linear-gradient(180deg, #002c71 0%, #2269de 100%);   /* live-site case-study gradient */
	--grad-band:  linear-gradient(115deg, #002c71 0%, #1b4fb8 55%, #0091d0 100%);

	/* Hexagon motif (from the case-study collateral), as a faint outline tile */
	--hex-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='97' viewBox='0 0 112 97'%3E%3Cg fill='none' stroke='%2323356e' stroke-opacity='.09'%3E%3Cpath d='M28 2.3 52 16.2v27.7L28 57.7 4 43.9V16.2z'/%3E%3Cpath d='M84 50.8l24 13.9v27.7l-24 13.9-24-13.9V64.7z'/%3E%3C/g%3E%3C/svg%3E");

	/* Type */
	--font-display: "Archivo", "Inter", system-ui, sans-serif;
	--font-body:    "Inter", system-ui, -apple-system, sans-serif;
	--font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

	/* Shape + elevation */
	--radius-sm: 10px;
	--radius:    16px;
	--radius-lg: 24px;
	--shadow-1: 0 1px 2px rgba(23, 34, 78, .05), 0 4px 14px rgba(23, 34, 78, .07);
	--shadow-2: 0 4px 10px rgba(23, 34, 78, .06), 0 20px 48px rgba(23, 34, 78, .14);
	--shadow-sky: 0 10px 30px rgba(0, 156, 222, .25);

	/* Rhythm
	   Tightened pass: the previous values (band 4–7.5rem, band-sm 2.5–4.5rem)
	   produced 15rem of dead air between adjacent full-bleed sections once
	   both sides of the boundary were counted. These land a section boundary
	   at ~5–7rem total on desktop and ~4rem on mobile. */
	--space-band: clamp(2rem, 4.2vw, 3.25rem);      /* was clamp(4rem, 9vw, 7.5rem) */
	--space-band-sm: clamp(1.5rem, 3vw, 2.25rem);   /* was clamp(2.5rem, 6vw, 4.5rem) */
	--header-h: 84px;
}


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

/* No `scroll-behavior: smooth`: the only in-page anchors on the site are the
   case-study sidebar TOC, and animating a long scroll there reads as slow and
   disorienting. Anchor jumps are instant; scroll-margin-top clears the header. */
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--text);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--text-strong);
	line-height: 1.12;
	letter-spacing: -0.02em;
	margin: 0 0 .6em;
	font-weight: 700;
}
h1 { font-size: clamp(1.8rem, 3.8vw, 2.8rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h5 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }
li { margin-bottom: .45em; }

/* `body a` out-specifies the bare `a {}` rules inside imported DB-content
   <style> blocks. */
body a { color: var(--sky-deep); text-decoration: none; transition: color .2s ease; }
body a:hover { color: var(--navy); }

::selection { background: rgba(0, 156, 222, .22); }

.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--navy-900); color: #fff; padding: .7rem 1.2rem; z-index: 200;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }


/* 3. Layout: container, grid, legacy utility subset
   ========================================================================== */
.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1.25rem, 4vw, 2rem);
	padding-right: clamp(1.25rem, 4vw, 2rem);
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -1rem;
	margin-right: -1rem;
}
.row > * { padding-left: 1rem; padding-right: 1rem; width: 100%; }

.col-lg-4, .col-lg-6, .col-lg-8, .col-lg-10, .col-lg-12,
.col-md-4, .col-md-6, .col-md-8 { min-width: 0; }

@media (min-width: 768px) {
	.col-md-4 { width: 33.3333%; }
	.col-md-6 { width: 50%; }
	.col-md-8 { width: 66.6667%; }
}
@media (min-width: 992px) {
	.col-lg-4 { width: 33.3333%; }
	.col-lg-6 { width: 50%; }
	.col-lg-8 { width: 66.6667%; }
	.col-lg-10 { width: 83.3333%; }
	.col-lg-12 { width: 100%; }
}

.justify-content-center { justify-content: center; }
.text-center { text-align: center; }
.bg-white { background: var(--white); }
.d-block { display: block; }

/* Spacing utilities (legacy names, new rhythm) */
.py-5 { padding-top: var(--space-band-sm); padding-bottom: var(--space-band-sm); }
.pt-5 { padding-top: var(--space-band-sm); }
.pb-5 { padding-bottom: var(--space-band-sm); }
.py-4 { padding-top: 2rem; padding-bottom: 2rem; }
.pb-4 { padding-bottom: 2rem; }
.pt-3 { padding-top: 1rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.pt-2 { padding-top: .5rem; }
.p-0 { padding: 0; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 1.5rem; }   /* was 2.5rem */
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 1.5rem; }
.my-5 { margin-top: 1.5rem; margin-bottom: 1.5rem; }   /* was 2.5rem */
.fs-4 { font-size: 1.3rem; }

/* Collapse stacked band padding. The stored DB content nests `py-5` rows
   inside `py-5` containers (Services' service list, About's team grid), which
   doubled the section padding at the top and bottom of those blocks. Only the
   boundary padding is removed — inner siblings keep their separation, so the
   About team rows still sit apart from each other. */
.py-5 > :first-child.py-5, .py-5 > :first-child.pt-5,
.pt-5 > :first-child.py-5, .pt-5 > :first-child.pt-5 { padding-top: 0; }
.py-5 > :last-child.py-5, .py-5 > :last-child.pb-5,
.pb-5 > :last-child.py-5, .pb-5 > :last-child.pb-5 { padding-bottom: 0; }
@media (min-width: 992px) {
	.pt-lg-0 { padding-top: 0; }
	.py-lg-0 { padding-top: 0; padding-bottom: 0; }
}
@media (min-width: 768px) {
	.p-md-5 { padding: clamp(2rem, 5vw, 4rem); }
	.pl-md-5 { padding-left: clamp(2rem, 5vw, 4rem); }
}


/* 4. Buttons
   ========================================================================== */
.ds-btn,
body .button,
body .cta-button .button {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	padding: 1.05rem 1.9rem;
	border-radius: 999px;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	background: var(--navy);
	color: #fff !important;
	box-shadow: 0 6px 18px rgba(35, 53, 110, .22);
	transition: transform .25s cubic-bezier(.2, .7, .3, 1.2), box-shadow .25s ease, background .25s ease;
}
.ds-btn:hover,
body .button:hover,
body .cta-button .button:hover {
	transform: translateY(-3px);
	background: var(--navy-600);
	box-shadow: 0 12px 30px rgba(35, 53, 110, .3);
	color: #fff;
}
.ds-btn:active, body .button:active { transform: translateY(-1px); }

/* Orange CTA — the collateral's kicker color. (Class name kept from the
   previous system so existing templates don't need edits.) */
.ds-btn--amber {
	background: linear-gradient(120deg, var(--orange) 0%, var(--orange-deep) 100%);
	color: var(--navy-950) !important;
	box-shadow: 0 6px 18px rgba(255, 158, 27, .35);
}
.ds-btn--amber:hover { background: linear-gradient(120deg, #ffab3a 0%, var(--orange) 100%); box-shadow: 0 12px 30px rgba(255, 158, 27, .45); }

.ds-btn--ghost {
	background: transparent;
	color: var(--navy) !important;
	box-shadow: inset 0 0 0 1.5px rgba(35, 53, 110, .35);
}
.ds-btn--ghost:hover { background: rgba(35, 53, 110, .05); box-shadow: inset 0 0 0 1.5px var(--navy); }

/* Ghost on a colored/gradient band */
.ds-btn--ghost-light {
	background: transparent;
	color: #fff !important;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.ds-btn--ghost-light:hover { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1.5px #fff; }

.ds-btn .arrow { transition: transform .25s ease; display: inline-block; }
.ds-btn:hover .arrow { transform: translateX(4px); }

/* Text-arrow link */
.ds-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--sky-deep);
}
.ds-link::after { content: "→"; transition: transform .25s ease; }
.ds-link:hover::after { transform: translateX(5px); }


/* 5. Header / navigation
   ========================================================================== */
.ds-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, .85);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(23, 34, 78, .08);
	transition: box-shadow .3s ease, background .3s ease;
}
.ds-header.is-scrolled { box-shadow: 0 6px 24px rgba(23, 34, 78, .08); background: rgba(255, 255, 255, .96); }

.ds-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--header-h);
	gap: 2rem;
}
.ds-header__brand { display: inline-flex; align-items: center; }
.ds-header__brand img { width: 320px; height: auto; }

.ds-nav { display: flex; align-items: center; gap: .25rem; }
.ds-nav__link {
	position: relative;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	color: var(--text-strong);
	padding: .55rem .85rem;
	border-radius: 8px;
}
.ds-nav__link::after {
	content: "";
	position: absolute;
	left: .85rem; right: .85rem; bottom: .2rem;
	height: 2px;
	background: var(--sky);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .28s cubic-bezier(.2, .7, .3, 1);
}
.ds-nav__link:hover { color: var(--sky-deep); }
.ds-nav__link:hover::after,
.ds-nav__link.is-current::after { transform: scaleX(1); }
.ds-nav__link.is-current { color: var(--sky-deep); }

.ds-nav__cta {
	margin-left: .8rem;
	padding: .78rem 1.4rem;
	font-size: .95rem;
}

/* Hamburger */
.ds-burger {
	display: none;
	width: 46px; height: 46px;
	border: 0; background: transparent; cursor: pointer;
	position: relative; z-index: 130;
	border-radius: 10px;
}
.ds-burger span {
	display: block;
	width: 24px; height: 2px;
	background: var(--text-strong);
	margin: 5px auto;
	border-radius: 2px;
	transition: transform .3s ease, opacity .2s ease;
}
.ds-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ds-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ds-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991px) {
	.ds-burger { display: block; }
	.ds-nav {
		position: fixed;
		inset: 0;
		z-index: 120;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: .5rem;
		background:
			var(--hex-tile) repeat,
			radial-gradient(700px 500px at 85% 8%, rgba(0, 156, 222, .1), transparent 60%),
			rgba(255, 255, 255, .97);
		opacity: 0;
		visibility: hidden;
		transition: opacity .3s ease, visibility 0s linear .3s;
	}
	body.nav-open .ds-nav { opacity: 1; visibility: visible; transition-delay: 0s; }
	body.nav-open { overflow: hidden; }
	/* backdrop-filter would make the header the containing block for the
	   fixed-position overlay — drop it while the menu is open so the
	   overlay anchors to the viewport. */
	body.nav-open .ds-header {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: #fff;
	}

	.ds-nav__link {
		font-size: 1.7rem;
		font-weight: 700;
		padding: .7rem 1.2rem;
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .35s ease, transform .35s ease, color .2s ease;
	}
	body.nav-open .ds-nav__link { opacity: 1; transform: none; }
	body.nav-open .ds-nav__link:nth-child(1) { transition-delay: .05s; }
	body.nav-open .ds-nav__link:nth-child(2) { transition-delay: .1s; }
	body.nav-open .ds-nav__link:nth-child(3) { transition-delay: .15s; }
	body.nav-open .ds-nav__link:nth-child(4) { transition-delay: .2s; }
	body.nav-open .ds-nav__link:nth-child(5) { transition-delay: .25s; }
	.ds-nav__cta { margin: 1rem 0 0; font-size: 1.1rem; opacity: 0; transform: translateY(14px); }
	body.nav-open .ds-nav__cta { opacity: 1; transform: none; transition-delay: .3s; }
	.ds-header__brand img { width: 220px; }
}


/* 6. Page mast (light)
   --------------------------------------------------------------------------
   ds_mast() keeps its old markup (.ds-hero shell + __image / __aurora /
   __grid layers); the layers are repainted for a light ground: the page
   photo becomes a pale wash, the aurora becomes soft sky/navy tints, and
   the technical grid becomes the collateral's hexagon outline tile. */
.ds-hero {
	position: relative;
	background: linear-gradient(180deg, var(--mist) 0%, #fff 100%);
	color: var(--text);
	overflow: hidden;
	isolation: isolate;
	border-bottom: 1px solid var(--line);
}
.ds-hero__bg { position: absolute; inset: 0; z-index: -1; }

/* Page photo — pale monochrome wash into the light ground */
.ds-hero__image {
	position: absolute; inset: 0;
	background-size: cover;
	background-position: center;
	filter: grayscale(1) contrast(1.05);
	opacity: .1;
}
.ds-hero__image::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(244, 248, 252, .35) 0%, rgba(255, 255, 255, .9) 100%);
}
/* Soft light aurora */
.ds-hero__aurora span {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	opacity: .5;
	will-change: transform;
}
.ds-hero__aurora .a1 {
	width: 44vw; height: 44vw; min-width: 380px; min-height: 380px;
	left: -10%; top: -30%;
	background: radial-gradient(circle at 40% 40%, rgba(0, 156, 222, .28), transparent 65%);
	animation: ds-drift 16s ease-in-out infinite alternate;
}
.ds-hero__aurora .a2 {
	width: 36vw; height: 36vw; min-width: 320px; min-height: 320px;
	right: -8%; top: -14%;
	background: radial-gradient(circle at 60% 40%, rgba(35, 53, 110, .16), transparent 65%);
	animation: ds-drift 20s ease-in-out -6s infinite alternate-reverse;
}
.ds-hero__aurora .a3 {
	width: 26vw; height: 26vw; min-width: 240px; min-height: 240px;
	right: 24%; bottom: -36%;
	background: radial-gradient(circle at 50% 50%, rgba(255, 158, 27, .14), transparent 65%);
	animation: ds-drift 24s ease-in-out -12s infinite alternate;
}
/* Hexagon tile overlay (replaces the dark system's square grid) */
.ds-hero__grid {
	position: absolute; inset: 0;
	background: var(--hex-tile) repeat;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 25%, transparent 78%);
}

.ds-hero__content {
	position: relative;
	/* was clamp(3.5rem, 8vw, 6.5rem) top and bottom — the bottom half stacked
	   on the following section's own band padding for a ~14rem seam. */
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
	text-align: center;
}
.ds-hero__content h1 { color: var(--text-strong); margin-bottom: .3em; }

.ds-eyebrow {
	font-family: var(--font-mono);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--sky-deep);
	margin-bottom: 1.3rem;
}
/* Orange kicker dash — straight from the collateral's CASE STUDY label */
.ds-eyebrow::before {
	content: "";
	display: inline-block;
	width: 30px; height: 3px;
	border-radius: 3px;
	background: var(--orange);
	vertical-align: middle;
	margin-right: .9rem;
}

.ds-hero__sub {
	max-width: 640px;
	margin: 0 auto 1.5rem;
	font-size: clamp(1.05rem, 1.8vw, 1.25rem);
	color: var(--text);
}

.ds-accent-text { color: var(--sky-deep); }


/* 7. Section primitives
   ========================================================================== */
.ds-band { padding-top: var(--space-band); padding-bottom: var(--space-band); }
.ds-band--mist { background: var(--mist); }
.ds-band--paper { background: var(--mist); } /* legacy alias */

.ds-section-head { max-width: 760px; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); text-align: center; }   /* was 3rem */
.ds-section-head p { color: var(--text); font-size: 1.1rem; }
.ds-section-head--left { margin-left: 0; text-align: left; }


/* 8. Homepage: hero + industry rotator
   ========================================================================== */
.ds-home-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--mist) 0%, #fff 90%);
	border-bottom: 1px solid var(--line);
}
.ds-home-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--hex-tile) repeat;
	-webkit-mask-image: radial-gradient(90% 110% at 85% 8%, #000 20%, transparent 72%);
	mask-image: radial-gradient(90% 110% at 85% 8%, #000 20%, transparent 72%);
	pointer-events: none;
}
.ds-home-hero::after {
	content: "";
	position: absolute;
	right: -14%; top: -34%;
	width: 56vw; height: 56vw; min-width: 420px; min-height: 420px;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgba(0, 156, 222, .16), transparent 65%);
	filter: blur(70px);
	pointer-events: none;
}

.ds-home-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 6.2fr) minmax(0, 5.8fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	/* was clamp(3rem, 7vw, 5.5rem) / clamp(3rem, 7vw, 6rem) */
	padding-top: clamp(2.25rem, 5vw, 4rem);
	padding-bottom: clamp(2.25rem, 5vw, 4rem);
}

.ds-home-hero__copy .ds-eyebrow { margin-bottom: 1.1rem; }
.ds-home-hero__copy h1 { margin-bottom: .35em; }
.ds-home-hero__sub {
	max-width: 520px;
	font-size: clamp(1.05rem, 1.6vw, 1.2rem);
	margin-bottom: 0;
}
.ds-home-hero__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 2rem 0 0;
}
.ds-home-hero__stats {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	margin-top: 2.6rem;
	width: fit-content;
	max-width: 100%;
}
.ds-home-hero__stats-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.ds-home-hero__stats-row--split { width: 100%; justify-content: space-between; }
.ds-stat-chip {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .06em;
	color: var(--text);
	border: 1px solid var(--line);
	background: rgba(255, 255, 255, .8);
	border-radius: 999px;
	padding: .55rem 1.05rem;
}
.ds-stat-chip strong { color: var(--text-strong); font-weight: 700; margin-right: .35rem; }

/* --- Industry rotator ------------------------------------------------- */
.ds-rotator { position: relative; }

/* Sky offset frame behind the visual */
.ds-rotator::before {
	content: "";
	position: absolute;
	inset: 8% -4% -4% 8%;
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, rgba(0, 156, 222, .2), rgba(35, 53, 110, .12));
	clip-path: polygon(9% 0, 100% 0, 100% 91%, 91% 100%, 0 100%, 0 9%);
	pointer-events: none;
}
.ds-rotator__frame {
	position: relative;
	aspect-ratio: 5 / 4.4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-2);
	/* Stretched-hexagon clip — the collateral's signature shape */
	clip-path: polygon(9% 0, 100% 0, 100% 91%, 91% 100%, 0 100%, 0 9%);
	background: var(--navy-900);
}
.ds-rotator__slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity .8s ease;
}
.ds-rotator__slide.is-active { opacity: 1; }
.ds-rotator__slide img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.ds-rotator__slide::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(200deg, rgba(16, 26, 61, 0) 42%, rgba(16, 26, 61, .78) 100%);
}
.ds-rotator__label {
	position: absolute;
	left: clamp(1.1rem, 3vw, 1.8rem);
	right: clamp(1.1rem, 3vw, 1.8rem);
	bottom: clamp(1rem, 2.6vw, 1.6rem);
	z-index: 1;
	color: #fff;
}
.ds-rotator__label .tag {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--navy-950);
	background: var(--orange);
	border-radius: 999px;
	padding: .32rem .75rem;
	margin-bottom: .6rem;
}
.ds-rotator__label .title {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(.95rem, 1.5vw, 1.1rem);
	line-height: 1.35;
	text-wrap: balance;
	text-shadow: 0 1px 12px rgba(16, 26, 61, .5);
}

/* Dots — one per industry, synced with the slides */
.ds-rotator__dots {
	display: flex;
	gap: .5rem;
	justify-content: center;
	margin-top: 1.4rem;
}
.ds-rotator__dot {
	appearance: none;
	border: 0;
	cursor: pointer;
	width: 34px; height: 5px;
	border-radius: 3px;
	background: var(--mist-2);
	transition: background .3s ease;
	padding: 0;
}
.ds-rotator__dot:hover { background: var(--sky-100); }
.ds-rotator__dot.is-active { background: var(--sky); }

@media (max-width: 991px) {
	.ds-home-hero__inner { grid-template-columns: 1fr; gap: 2.6rem; }
	.ds-home-hero__copy { text-align: center; }
	.ds-home-hero__sub { margin-left: auto; margin-right: auto; }
	.ds-home-hero__actions { justify-content: center; }
	.ds-home-hero__stats { align-items: center; width: auto; margin-left: auto; margin-right: auto; }
	.ds-home-hero__stats-row, .ds-home-hero__stats-row--split { justify-content: center; width: auto; }
	.ds-rotator { max-width: 560px; margin: 0 auto; width: 100%; }
	.ds-rotator__frame { aspect-ratio: 16 / 11; }
}
@media (max-width: 520px) {
	.ds-home-hero__actions .ds-btn { width: 100%; justify-content: center; }
	.ds-rotator__frame { aspect-ratio: 4 / 3.4; }
}


/* 9. Homepage: industries showcase
   ========================================================================== */
.ds-inds { position: relative; }

/* Tab bar — industry pills. Without JS every panel simply stacks and the
   pills act as in-page anchors. */
.ds-inds__tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .7rem;
	margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);   /* was clamp(2rem, 4vw, 3rem) */
	padding: 0;
	list-style: none;
}
.ds-inds__tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .98rem;
	color: var(--text-strong);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding: .8rem 1.5rem;
	cursor: pointer;
	transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.ds-inds__tab:hover { border-color: var(--sky); color: var(--sky-deep); transform: translateY(-2px); }
.ds-inds__tab[aria-selected="true"] {
	background: var(--navy);
	border-color: var(--navy);
	color: #fff;
	box-shadow: 0 8px 22px rgba(35, 53, 110, .28);
}
.ds-inds__tab .count {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem; height: 1.5rem;
	padding: 0 .3rem;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 600;
	border-radius: 999px;
	background: var(--sky-100);
	color: var(--sky-deep);
}
.ds-inds__tab[aria-selected="true"] .count { background: var(--orange); color: var(--navy-950); }

/* Panels */
.ds-inds__panel[hidden] { display: none; }
.ds-inds__panel.is-entering { animation: ds-panel-in .45s cubic-bezier(.2, .7, .3, 1) both; }

/* Stacked-mode industry heading (mobile / no-JS) */
.ds-inds__panel-title {
	display: flex;
	align-items: center;
	gap: .9rem;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	margin: 0 0 1.6rem;
}
.ds-inds__panel-title .icon {
	width: 46px; height: 46px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--grad-brand);
	box-shadow: var(--shadow-1);
}
.ds-inds__panel-title .icon img { width: 24px; height: 24px; }
.ds-inds--tabbed .ds-inds__panel-title { display: none; }
.ds-inds__panel + .ds-inds__panel { margin-top: clamp(2rem, 4vw, 2.75rem); }   /* was clamp(2.6rem, 6vw, 4rem) */
.ds-inds--tabbed .ds-inds__panel + .ds-inds__panel { margin-top: 0; }

/* Feature row: real case-study collateral beside the real story */
.ds-featrow {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
	gap: clamp(1.8rem, 4.5vw, 4rem);
	align-items: center;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(1.4rem, 3.4vw, 2.8rem);
	box-shadow: var(--shadow-1);
	transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}
.ds-featrow:hover { box-shadow: var(--shadow-2); transform: translateY(-4px); border-color: rgba(0, 156, 222, .35); }
.ds-featrow + .ds-featrow { margin-top: 1.6rem; }
.ds-inds__panel-more { margin: 1.4rem 0 0; }

.ds-featrow__media { position: relative; }
.ds-featrow__media a { display: block; position: relative; }
.ds-featrow__media img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: 0 14px 34px rgba(23, 34, 78, .18);
	transition: transform .5s cubic-bezier(.2, .7, .3, 1), box-shadow .5s ease;
	transform: rotate(-1.2deg);
}
.ds-featrow:hover .ds-featrow__media img { transform: rotate(0deg) scale(1.015); box-shadow: 0 20px 44px rgba(23, 34, 78, .24); }
/* Sky accent chip behind the collateral */
.ds-featrow__media::before {
	content: "";
	position: absolute;
	inset: -4% -3% auto auto;
	width: 34%; height: 42%;
	border-radius: var(--radius);
	background: linear-gradient(135deg, rgba(0, 156, 222, .18), rgba(35, 53, 110, .08));
	clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%);
	z-index: -1;
}

.ds-featrow__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1rem;
}
.ds-tag {
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: .35rem .8rem;
}
.ds-tag--industry { background: var(--sky-100); color: var(--sky-deep); }
.ds-tag--service  { background: rgba(255, 158, 27, .14); color: #a25e00; }

.ds-featrow__body h3 {
	font-size: clamp(1.25rem, 2.2vw, 1.65rem);
	line-height: 1.28;
	margin-bottom: .7rem;
}
.ds-featrow__body h3 a { color: var(--text-strong); }
.ds-featrow__body h3 a:hover { color: var(--sky-deep); }
.ds-featrow__body p { margin-bottom: 1.3rem; }

@media (max-width: 991px) {
	.ds-featrow { grid-template-columns: 1fr; gap: 1.6rem; }
	.ds-featrow__media { max-width: 520px; }
	.ds-inds__tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .5rem; margin-left: calc(-1 * clamp(1.25rem, 4vw, 2rem)); margin-right: calc(-1 * clamp(1.25rem, 4vw, 2rem)); padding-left: clamp(1.25rem, 4vw, 2rem); padding-right: clamp(1.25rem, 4vw, 2rem); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.ds-inds__tabs::-webkit-scrollbar { display: none; }
	.ds-inds__tab { white-space: nowrap; flex: none; }
}

/* All-studies link under the showcase */
.ds-inds__more { text-align: center; margin-top: clamp(1.6rem, 3.2vw, 2.25rem); }   /* was clamp(2.2rem, 5vw, 3.2rem) */


/* 10. Homepage: pathway cards, testimonial, CTA band
   ========================================================================== */
.ds-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 991px) { .ds-cards { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

.ds-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease;
}
.ds-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); }
.ds-card::after {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--grad-brand);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.2, .7, .3, 1);
	z-index: 1;
}
.ds-card:hover::after { transform: scaleX(1); }

.ds-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.ds-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ds-card:hover .ds-card__media img { transform: scale(1.06); }
.ds-card__body { padding: 1.8rem 1.8rem 2rem; display: flex; flex-direction: column; flex: 1; }
.ds-card__body h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.ds-card__body p { flex: 1; margin-bottom: 1.2rem; color: var(--text); }

/* Testimonial — navy band */
.ds-band--testimonial {
	background: #F5F0E8;
	position: relative;
	overflow: hidden;
}
.ds-band--testimonial::before {
	content: "\201C";
	font-family: var(--font-display);
	position: absolute;
	top: -2rem; left: 50%;
	transform: translateX(-50%);
	font-size: clamp(14rem, 28vw, 22rem);
	line-height: 1;
	color: rgba(30, 50, 100, .05);
	pointer-events: none;
	user-select: none;
}
.ds-quote { max-width: 800px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.ds-quote__mark { display: none; }
.ds-quote blockquote {
	margin: 0 0 2.4rem;
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.55rem);
	font-weight: 500;
	line-height: 1.55;
	color: var(--navy);
	letter-spacing: -.01em;
}
.ds-quote blockquote strong { color: var(--sky-deep); font-weight: 700; }
.ds-quote__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
}
.ds-quote__rule {
	display: block;
	width: 48px; height: 3px;
	background: var(--orange);
	border-radius: 2px;
}
.ds-quote cite {
	font-style: normal;
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--text);
}

/* CTA band — the live site's own blue gradient, kept as the one full-bleed
   color moment on the page */
.ds-cta-band {
	position: relative;
	overflow: hidden;
	background: var(--grad-band);
	color: #fff;
	text-align: center;
	padding: var(--space-band) 0;
}
.ds-cta-band::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--hex-tile) repeat;
	filter: invert(1) brightness(2);
	opacity: .35;
	-webkit-mask-image: radial-gradient(80% 120% at 80% 0%, #000 20%, transparent 75%);
	mask-image: radial-gradient(80% 120% at 80% 0%, #000 20%, transparent 75%);
	pointer-events: none;
}
.ds-cta-band::after {
	content: "";
	position: absolute; inset: 0;
	background: url('../img/DS-CTA-bg.png') center center / cover no-repeat;
	opacity: .13;
	pointer-events: none;
	mix-blend-mode: luminosity;
}
.ds-cta-band .container { position: relative; }
.ds-cta-band h2 { color: #fff; margin-bottom: .4em; }
.ds-cta-band p { color: rgba(255, 255, 255, .85); max-width: 560px; margin: 0 auto 2rem; }


/* 11. Legacy DB-content re-skin (light)
   --------------------------------------------------------------------------
   The Services/About/case-study bodies live in the WP database using the
   old build's class vocabulary (and small inline <style> blocks). These
   rules give that vocabulary the light design language without touching
   the stored content. */

body .gray-bg { background: var(--mist); }
/* was 2.5rem — this rides on top of the child's own pt-5/pb-5 band padding */
body .gray-bg > div { padding-top: 1.25rem !important; }
/* The page-intro bands (Services/About, `.pt-5.pt-lg-0.pb-5`) still had that
   smaller forced top padding fighting their own full-size `pb-5` bottom
   padding, leaving the intro paragraph sitting near the top of a visibly
   taller-than-tall-looks-right band. Match top to bottom so it's actually
   centered, not just less lopsided. */
body .gray-bg > .pt-5.pb-5 { padding-top: var(--space-band-sm) !important; }
/* .half-gray-bg is a transparent wrapper around the decorative orange chevron
   divider, so its padding was pure air on both sides of a 42px glyph
   (was 1.5rem 0). */
body .half-gray-bg { background: transparent; padding: .25rem 0; }

/* Intro/lead paragraphs (About, Services) — the DB markup's col-lg-8 caps
   these at 66.7% of the container (~800px), reading narrow against the
   page's full 1200px width. Widen to near the container's own edge. The
   plain `.col-lg-8` split-image blocks ("Who We Are" etc.) lack
   `.text-center`, so they're untouched. */
body .col-lg-8.text-center { max-width: min(1080px, 92%) !important; flex: 0 0 min(1080px, 92%) !important; }
/* Gray-bg body text: left-align for readability at wide measure; headings stay
   centered. `.f1` (the page-intro lead paragraph) is excluded — it has its
   own justify rule below. */
body .gray-bg .col-lg-8.text-center p:not(.f1),
body .gray-bg .container.text-center p:not(.f1) { text-align: left !important; }
/* Gray-bg headings: always centered to match About Us / Our Mission style */
body .gray-bg h1, body .gray-bg h2, body .gray-bg h3,
body .gray-bg h4, body .gray-bg h5 { text-align: center !important; width: 100%; }
/* About page: all h3 section headings (Our Mission, Our Team) — match h2 scale */
.page-id-63 .container h3,
.page-id-63 .gray-bg h3 {
	font-size: clamp(1.9rem, 3.6vw, 2.7rem) !important;
	font-weight: 700 !important;
	letter-spacing: -.01em;
}
/* UNIFIED COLUMN WIDTH — all About page text sections get the same 860px max-width,
   centered with consistent left/right breathing room regardless of which wrapper they're in */
body .gray-bg .col-lg-8,
.page-id-63 .container .col-lg-8 {
	max-width: min(860px, 92%) !important;
	flex: 0 0 min(860px, 92%) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.page-id-63 .container .row,
.page-id-63 .gray-bg .row { justify-content: center; }
/* Mission paragraph: match left-align of intro for visual consistency
   (`.f1` excluded — justified via its own rule below) */
.page-id-63 .container .col-lg-8 p:not(.f1) { text-align: left !important; }

/* Lead paragraph */
body .f1 {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	line-height: 1.6;
	color: var(--text-strong);
	font-weight: 500;
	text-align: left !important;
}
body .f1 strong { font-weight: 700; }

body .color-blue { color: var(--text-strong); }
body .color-blue h3, body .color-blue h4 { color: var(--text-strong); }

/* Certifications + NAICS section */
.ds-certs-naics-band {
	background: var(--mist);
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.ds-certs-naics-row { align-items: flex-start; gap: 2rem 0; max-width: 960px; margin-left: auto; margin-right: auto; }
.ds-certs-naics-heading {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--navy);
	margin: .4rem 0 1.4rem;
	letter-spacing: -.01em;
}

/* Certifications — chip badges */
.ds-certs-list {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	flex-direction: column;
	gap: .55rem;
}
.ds-certs-list li {
	display: flex;
	align-items: center;
	gap: .65rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	padding: .55rem 1rem;
	font-size: .9rem;
	color: var(--text-strong);
	font-weight: 500;
	box-shadow: 0 1px 3px rgba(23,34,78,.06);
}
.ds-certs-list li::before {
	content: "✓";
	flex-shrink: 0;
	width: 1.4rem; height: 1.4rem;
	background: var(--sky-deep);
	color: #fff;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: .75rem;
	font-weight: 700;
}

/* NAICS — code table rows */
.ds-naics-list {
	list-style: none;
	padding: 0; margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.ds-naics-list li {
	display: flex;
	align-items: baseline;
	gap: .8rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--line);
	font-size: .875rem;
}
.ds-naics-list li:last-child { border-bottom: 0; }
.ds-naics-code {
	font-family: var(--font-mono);
	font-size: .78rem;
	font-weight: 700;
	color: var(--sky-deep);
	letter-spacing: .04em;
	flex-shrink: 0;
	min-width: 3.8rem;
}
.ds-naics-desc {
	color: var(--text);
	line-height: 1.4;
}
body .light-blue { color: var(--sky-deep) !important; }
body .primary-blue { color: var(--text-strong); }

/* The orange triple-chevron divider SVG in DB content */
body svg#arrows-orange {
	width: 42px; height: 42px;
	fill: var(--orange);
	animation: ds-bob 2.6s ease-in-out infinite;
}

/* Alternating image/text feature bands — the live site's brand blue
   gradient (its own palette), text stays white on it */
/* Flexbox, not grid: the image sits first in the DOM in two of the three
   bands but second in "Consulting" (text first) — a flex-grow ratio applied
   per class (.main-image vs .container) gives the photo the wider share
   regardless of which side it's actually on, which a grid-column-track
   ratio couldn't do (a track is keyed to position, not to which item is in
   it). */
body .alternating-text.image-stretch-columns {
	display: flex;
	align-items: stretch;
	background: var(--grad-blue);
	color: #fff;
	overflow: hidden;
	border-radius: var(--radius-lg);
	max-width: 1200px;
	height: clamp(352px, 31vw, 440px);
	margin: 1.8rem auto;
	box-shadow: var(--shadow-2);
}
/* wpautop leaves orphan `</p>` tags in the stored page content. The HTML
   parser turns every one of them into a real, empty <p> element — so each
   band ends up with a phantom third grid item that opens a whole extra
   implicit grid row under the image (the "blue gap below the photo"), plus
   more phantom <p>s inside .container/.row that pad the text column. They
   hold no content, only margin, so hiding them is always safe. */
body .alternating-text p:empty { display: none; }

/* The photo fills its entire grid column, flush to all four card edges. Its
   height is simply the grid row height, which the text column drives, so the
   two columns always match no matter how long the list is. `min-height` is a
   floor only — it stops the short 3-item bands from becoming a letterbox
   sliver; it never adds height above the text column. */
body .alternating-text.image-stretch-columns .main-image {
	position: relative;
	flex: 1.25 1 0%;
	align-self: stretch;
	min-height: clamp(300px, 26vw, 380px);
}
/* py-5 on the inner row bloats the text column — zero it out */
body .alternating-text.image-stretch-columns .row.py-5 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
body .alternating-text.image-stretch-columns .main-image img {
	position: absolute; inset: -1px;   /* swallow the hairline sub-pixel gap grid-row rounding can leave at the bottom edge — the card's own overflow:hidden clips the 1px overhang */
	width: calc(100% + 2px); height: calc(100% + 2px);
	max-width: none;                   /* base `img { max-width: 100% }` would otherwise clamp the overhang back off the right edge */
	display: block;
	object-fit: cover;
}
body .alternating-text.image-stretch-columns > .container {
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	max-width: 700px;
	margin: 0 auto;
	padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 4vw, 2.5rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,.25) transparent;
}
body .alternating-text.image-stretch-columns .row {
	width: 100%;
	justify-content: center;
	align-items: center;
}
body .alternating-text.image-stretch-columns .col-lg-8 {
	max-width: 100% !important;
	flex: 0 0 100% !important;
}
body .alternating-text h4 {
	color: #fff;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	position: relative;
	padding-bottom: .8rem;
	margin-bottom: 1.2rem;
}
body .alternating-text h4::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 56px; height: 3px;
	border-radius: 3px;
	background: var(--orange);
}
body .alternating-text p { color: rgba(255, 255, 255, .85); }
body .alternating-text ul { list-style: none; padding: 0; margin: 0; }
body .alternating-text ul li {
	position: relative;
	padding: .35rem 0 .35rem 1.5rem;
	margin: 0;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}
body .alternating-text ul li:last-child { border-bottom: 0; }
body .alternating-text ul li::before {
	content: "▸";
	position: absolute;
	left: 0;
	color: var(--orange);
}
@media (max-width: 767px) {
	body .alternating-text.image-stretch-columns { flex-direction: column; margin-left: 1rem; margin-right: 1rem; }
	body .alternating-text.image-stretch-columns .main-image { flex: 0 0 auto; aspect-ratio: 1 / 1; height: auto; min-height: 0; order: -1; }
	body .alternating-text.image-stretch-columns > .container { flex: 0 0 auto; max-width: none; }
}

/* CTA button rows in DB content */
/* was 3rem 0 / padding-top 3.5rem — a one-button row does not need band-scale
   padding, and About stacks pb-5 + mb-5 on top of it. */
body .cta-button { padding: 1.5rem 0; }
body .cta-button.negative-margin-top { margin-top: 0; padding-top: 1.75rem; }
body .cta-button.pb-5 { padding-bottom: 1.5rem; }

/* About — team grid */
body .proven-success img,
body img.border-s-clip {
	border-radius: var(--radius-lg) !important;
	width: 100% !important;
	max-width: 300px;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin: 0 auto 15px;
	box-shadow: var(--shadow-1);
	border: 3px solid transparent;
	background: linear-gradient(#fff, #fff) padding-box, var(--grad-brand) border-box;
}
body .proven-success .row > div { margin-bottom: 1.75rem; }   /* was 2.5rem */
body .team-member-titles { color: var(--text-strong); margin-bottom: .1em; }
body .team-member-subtitles {
	font-family: var(--font-mono);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--sky-deep);
	margin-bottom: .9em;
}
/* Team bio paragraphs — same justify treatment as the page-intro `.f1` lead
   paragraph. Scoped via the adjacent-sibling combinator off the unique
   `.team-member-subtitles` heading, so this can't catch any other `p`. */
body .team-member-subtitles + p { text-align: left !important; }
body .proven-success p { font-size: .98rem; }


/* 12. Case studies
   ========================================================================== */
/* Industry filter chips — Case Studies mast + library filter bar */
.ds-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }   /* was 2rem */
.ds-chip {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .95rem;
	color: var(--text-strong) !important;
	padding: .75rem 1.5rem;
	border-radius: 999px;
	border: 1.5px solid var(--line);
	background: rgba(255, 255, 255, .8);
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
}
.ds-chip:hover { background: var(--navy); border-color: var(--navy); color: #fff !important; transform: translateY(-2px); }
.ds-chip.is-active { background: var(--navy); border-color: var(--navy); color: #fff !important; }
.ds-chip__count {
	display: inline-block;
	margin-left: .4rem;
	font-family: var(--font-mono);
	font-size: .72rem;
	opacity: .7;
}

.ds-cs-filterbar { margin-top: 0; }
.ds-cs-count {
	font-family: var(--font-mono);
	font-size: .8rem;
	letter-spacing: .04em;
	color: var(--text);
	text-align: center;
	margin: 1.4rem 0 1.6rem;
}
.ds-cs-more { display: flex; margin: 2.4rem auto 0; }

/* Industry section header (legacy — no longer used by the library, kept for
   any template still calling ds_industry_icon() in a heading context) */
.ds-industry-head {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin-bottom: 1.75rem;   /* was 2.4rem */
}
.ds-industry-head__icon {
	width: 58px; height: 58px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 16px;
	background: var(--grad-brand);
	box-shadow: var(--shadow-1);
}
.ds-industry-head__icon img { width: 32px; height: 32px; }
.ds-industry-head h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* Case-study card */
.ds-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.ds-cs-grid--2up { grid-template-columns: repeat(2, 1fr); max-width: 880px; margin: 0 auto; }
@media (max-width: 991px) { .ds-cs-grid, .ds-cs-grid--2up { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }

.ds-cs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	transition: transform .35s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
	text-align: left;
}
.ds-cs-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); border-color: rgba(0, 156, 222, .35); }
.ds-cs-card[hidden] { display: none; }   /* class's own `display: flex` above would otherwise beat the [hidden] UA default */
.ds-cs-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist-2); display: block; }
.ds-cs-card__media > .bgimg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ds-cs-card:hover .ds-cs-card__media > .bgimg { transform: scale(1.05); }
.ds-cs-card__badge {
	position: absolute;
	top: 1rem; left: 1rem;
	z-index: 1;
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--navy-950);
	background: var(--orange);
	border-radius: 999px;
	padding: .35rem .8rem;
}
.ds-cs-card__body { padding: 1.6rem 1.6rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.ds-cs-card__body h3 {
	font-size: 1.18rem;
	line-height: 1.35;
	margin-bottom: .6rem;
}
.ds-cs-card__body h3 a { color: var(--text-strong); }
.ds-cs-card__body h3 a:hover { color: var(--sky-deep); }
.ds-cs-card__excerpt {
	font-size: .92rem;
	line-height: 1.55;
	color: var(--text);
	margin: 0 0 1rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ds-cs-card__roles { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0 0 1.3rem; padding: 0; }
.ds-cs-card__roles li {
	font-family: var(--font-mono);
	font-size: .68rem;
	letter-spacing: .03em;
	color: var(--navy);
	background: var(--sky-100);
	border-radius: 999px;
	padding: .3rem .7rem;
}
.ds-cs-card__body .ds-link { margin-top: auto; }

/* --------------------------------------------------------------------------
   Single case study
   --------------------------------------------------------------------------
   single-case_study.php re-renders the stored legacy markup (see
   inc/case-study-parts.php) into the structure styled below: an editorial
   left-aligned hero, a sticky facts rail, and numbered narrative sections.
   The legacy `.single-content` rules further down still apply to any study
   whose stored HTML doesn't match the scaffold and falls back to raw
   the_content().
   ----------------------------------------------------------------------- */

/* Hero — left-aligned editorial masthead rather than a centred page title */
.ds-hero--study { border-bottom: 4px solid var(--orange); }
.ds-hero--study .ds-hero__content {
	text-align: left;
	max-width: 1000px;
	margin-inline: auto;
	/* Tight: the back link sits directly on the orange rule, and the body
	   band below adds its own (now small) top padding. */
	padding-bottom: clamp(1.1rem, 2.2vw, 1.6rem);
}
.ds-hero--study h1 {
	font-size: clamp(1.9rem, 4.2vw, 3.15rem);
	max-width: 24ch;
	text-wrap: balance;
}
.ds-study-deck {
	margin: .75rem 0 1.1rem;
	max-width: 62ch;
	font-size: clamp(1.08rem, 1.7vw, 1.3rem);
	line-height: 1.5;
	color: var(--text);
	font-weight: 500;
}

/* Spec chips: mono label above the value, hairline separators */
.ds-study-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 2.4rem;
	list-style: none;
	margin: 0 0 .95rem;
	padding: .9rem 0 0;
	border-top: 1px solid var(--line);
}
.ds-study-tags li {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--text-strong);
	line-height: 1.3;
}
.ds-study-tags li span {
	display: block;
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sky-deep);
	margin-bottom: .25rem;
}

.ds-study-back {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--font-mono);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.ds-study-back::before { content: "\2190"; transition: transform .25s ease; }
.ds-study-back:hover::before { transform: translateX(-4px); }

/* The body band carries the generic --space-band, which stacked on the hero's
   own bottom padding for a large dead gap under the orange rule. Scope it down
   here — the case study wants a dense, report-like rhythm. */
.ds-band.ds-study {
	padding-top: clamp(1.15rem, 2.2vw, 1.6rem);
	padding-bottom: clamp(1.75rem, 3.4vw, 2.5rem);
}

/* Two-column body: sticky rail + measured prose column */
.ds-study__grid {
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4.5rem);
}
/* Grid tracks default to min-width:auto, and the nested auto-fit grids
   inside the article (quick facts, outcomes) report a wide min-content —
   without this the column blows past the viewport on narrow screens. */
.ds-study__aside,
.ds-study__main { min-width: 0; }
.ds-study__sticky {
	position: sticky;
	top: calc(var(--header-h) + 1.25rem);
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* Table of contents */
.ds-study-toc__title {
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sky-deep);
	margin: 0 0 .7rem;
}
.ds-study-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--line);
}
.ds-study-toc li { margin: 0; }
.ds-study-toc a {
	display: flex;
	gap: .7rem;
	padding: .55rem 0 .55rem 1rem;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .95rem;
	color: var(--text);
	line-height: 1.35;
	transition: color .2s ease, border-color .2s ease;
}
.ds-study-toc a span {
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--sky-deep);
	padding-top: .12em;
}
.ds-study-toc a:hover,
.ds-study-toc a.is-current {
	color: var(--text-strong);
	border-left-color: var(--orange);
}
.ds-study-toc a.is-current span { color: var(--orange-deep); }

/* Rail panels */
.ds-study-panel {
	border-radius: var(--radius);
	padding: 1.5rem 1.4rem;
}
.ds-study-panel--dark {
	background: var(--grad-blue);
	color: rgba(255, 255, 255, .82);
	box-shadow: var(--shadow-1);
	position: relative;
	overflow: hidden;
}
.ds-study-panel--dark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--hex-tile) repeat;
	filter: invert(1);
	opacity: .18;
	pointer-events: none;
}
.ds-study-panel--dark > * { position: relative; z-index: 1; }
.ds-study-panel__icon { width: 44px; height: 44px; margin-bottom: 1rem; }
.ds-study-panel__label {
	font-family: var(--font-mono);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--orange);
	margin: 0 0 .8rem;
}
.ds-study-panel__intro {
	font-size: .9rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
	margin: 0 0 1rem;
}
.ds-study-roles { list-style: none; margin: 0; padding: 0; }
.ds-study-roles li {
	position: relative;
	padding: .55rem 0 .55rem 1.35rem;
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: .96rem;
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	line-height: 1.35;
}
.ds-study-roles li:last-child { border-bottom: 0; }
.ds-study-roles li::before {
	content: "";
	position: absolute;
	left: 0; top: 1.05em;
	width: 7px; height: 7px;
	border-radius: 2px;
	background: var(--orange);
}

.ds-study-panel--cta {
	border: 1px solid var(--line);
	background: var(--mist);
	text-align: center;
}
.ds-study-panel--cta p {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--text-strong);
	font-size: 1.02rem;
	line-height: 1.35;
	margin: 0 0 1rem;
}

/* Quick-facts cards above the narrative */
.ds-study-facts { margin-bottom: clamp(1.25rem, 2.4vw, 1.8rem); }
.ds-study-facts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1rem;
}
.ds-study-fact {
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 3px solid var(--orange);
	border-radius: var(--radius);
	padding: 1.35rem 1.3rem;
	box-shadow: var(--shadow-1);
}
.ds-study-fact h3 {
	font-size: 1.02rem;
	line-height: 1.3;
	margin-bottom: .55rem;
	letter-spacing: -0.01em;
}
.ds-study-fact p {
	margin: 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--text);
}

/* Narrative sections */
.ds-study-section { padding-block: clamp(1.1rem, 2.2vw, 1.75rem); }
.ds-study-section + .ds-study-section { border-top: 1px solid var(--line); }
.ds-study-section:first-child { padding-top: 0; }
.ds-study-section__head { margin-bottom: .8rem; }
/* The head's only child is an <h2 class="ds-eyebrow"> — the numbered mono
   label doubles as the heading, so it needs the heading element's own
   font-size/margin/letter-spacing rolled back to the eyebrow's. */
.ds-study-section__head .ds-eyebrow {
	font-size: .82rem;
	line-height: 1.4;
	letter-spacing: .26em;
	font-weight: 600;
	margin: 0;
}
.ds-study-section { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Measured prose column — ~70 characters at the default body size */
.ds-study-prose { max-width: 70ch; }
.ds-study-prose > p {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--text);
}
.ds-study-prose > p:last-child { margin-bottom: 0; }
.ds-study-prose > p:first-child { font-size: 1.12rem; line-height: 1.7; color: var(--text-strong); }

.ds-study-subhead {
	font-size: 1.12rem;
	margin: 1.35rem 0 .55rem;
	color: var(--text-strong);
}
.ds-study-subhead:first-child { margin-top: 0; }
.ds-study-subhead::before {
	content: "";
	display: block;
	width: 24px; height: 2px;
	background: var(--sky);
	margin-bottom: .5rem;
}

.ds-study-list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.ds-study-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: .7em;
	line-height: 1.7;
}
.ds-study-list li::before {
	content: "";
	position: absolute;
	left: 0; top: .72em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--sky);
}
.ds-study-list li ul { margin: .6em 0 0; padding-left: 1.1rem; }

/* Bold-lead-in bullets become numbered point cards */
.ds-study-points {
	display: grid;
	gap: .9rem;
	margin-bottom: 1.4rem;
}
.ds-study-point {
	display: flex;
	gap: 1.1rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1rem 1.15rem;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.ds-study-point:hover {
	border-color: rgba(0, 156, 222, .4);
	box-shadow: var(--shadow-1);
	transform: translateX(3px);
}
.ds-study-point__num {
	flex: none;
	font-family: var(--font-mono);
	font-size: .82rem;
	font-weight: 600;
	color: var(--orange-deep);
	padding-top: .2em;
}
/* Legacy card bodies can hold a bare text node ("…candidates with:") between
   the title and its list, so the base type lives on the body, not just <p>. */
.ds-study-point__body {
	font-size: 1rem;
	line-height: 1.68;
	color: var(--text);
}
.ds-study-point__body h4 {
	font-size: 1.04rem;
	line-height: 1.3;
	margin: 0 0 .45rem;
}
.ds-study-point__body p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.68;
}
/* Some studies' bullets carry their own nested <ul> (and a stray <br> the
   parser now strips). Keep it snug under the card title rather than letting
   the global list margin open a gap. */
.ds-study-point__body > ul {
	margin: .4rem 0 0;
	padding-left: 1.1rem;
	font-size: 1rem;
	line-height: 1.6;
}
.ds-study-point__body > ul li { margin-bottom: .25em; }
.ds-study-point__body > ul li:last-child { margin-bottom: 0; }
.ds-study-point__body > *:last-child { margin-bottom: 0; }
.ds-study-section--approach .ds-study-point { border-left: 3px solid var(--sky); }
.ds-study-section--challenges .ds-study-point { border-left: 3px solid var(--orange); }

/* Point cards and results panels want the full column, not the text measure */
.ds-study-prose > .ds-study-points { max-width: none; }
.ds-study-section--challenges .ds-study-prose,
.ds-study-section--approach .ds-study-prose { max-width: 74ch; }

/* Results — checked outcomes on a tinted panel */
.ds-study-section--results .ds-study-prose {
	max-width: none;
	background: var(--mist);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: clamp(1.4rem, 3vw, 2rem);
}
.ds-study-outcomes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: .5rem 1.6rem;
}
.ds-study-outcomes li {
	position: relative;
	padding: .55rem 0 .55rem 2rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text-strong);
}
.ds-study-outcomes li::before {
	content: "";
	position: absolute;
	left: 0; top: .82em;
	width: 12px; height: 7px;
	border-left: 2.5px solid var(--sky-deep);
	border-bottom: 2.5px solid var(--sky-deep);
	transform: rotate(-45deg);
}

/* Conclusion reads as a closing statement, not another body paragraph */
.ds-study-section--conclusion .ds-study-prose {
	max-width: none;
	border-left: 4px solid var(--orange);
	padding-left: clamp(1.2rem, 3vw, 2rem);
}
.ds-study-section--conclusion .ds-study-prose > p {
	font-family: var(--font-display);
	font-size: clamp(1.12rem, 1.9vw, 1.32rem);
	line-height: 1.55;
	font-weight: 500;
	color: var(--text-strong);
}

@media (max-width: 991px) {
	.ds-study__grid { grid-template-columns: minmax(0, 1fr); }
	.ds-study__sticky { position: static; }
	.ds-study-toc { display: none; }
	.ds-study-panel--dark { order: -1; }
	.ds-study-prose,
	.ds-study-section--challenges .ds-study-prose,
	.ds-study-section--approach .ds-study-prose { max-width: none; }
	.ds-study-tags { gap: .9rem 1.8rem; }
}

/* Legacy fallback: a study whose stored HTML doesn't match the scaffold
   still renders the live-site blue-gradient two-column layout. */
body.single-case_study .ds-hero { border-bottom: 5px solid var(--orange); }
/* The stored styles paint .left white-on-blue; keep its headings white too
   (our global heading color would otherwise render navy-on-blue). */
body.single-case_study .single-content .left h2,
body.single-case_study .single-content .left h3,
body.single-case_study .single-content .left h4 { color: #fff; }
body.single-case_study .single-content .left ul { list-style: none; padding: 0; }
body.single-case_study .single-content .left ul li {
	position: relative;
	padding-left: 1.5rem;
}
body.single-case_study .single-content .left ul li::before {
	content: "▸";
	position: absolute; left: 0;
	color: var(--orange);
}
body.single-case_study .quick-facts {
	border: 2px solid var(--orange) !important;
	border-radius: var(--radius) !important;
	background: rgba(255, 255, 255, .06);
	padding: 1.4rem 1.4rem !important;
}
body.single-case_study .quick-facts h4 { color: var(--orange); }
body.single-case_study .gray-bg .label {
	font-family: var(--font-mono) !important;
	color: var(--text) !important;
	letter-spacing: .18em;
	font-size: .75rem !important;
}
body.single-case_study .gray-bg .text {
	font-family: var(--font-display) !important;
	color: var(--text-strong) !important;
}
body.single-case_study .right h2.light-blue { color: var(--sky-deep) !important; font-weight: 700; }
body.single-case_study .right h3 {
	color: var(--text-strong);
	margin-top: 1.6em;
}


/* 13. Contact
   ========================================================================== */
.ds-contact { display: grid; grid-template-columns: 5fr 7fr; gap: 2rem; align-items: start; }
@media (max-width: 991px) { .ds-contact { grid-template-columns: 1fr; } }

.ds-contact__info {
	background: #fff;
	color: var(--text);
	border: 1px solid var(--line);
	border-top: 4px solid var(--sky);
	border-radius: var(--radius-lg);
	padding: clamp(2rem, 4vw, 3rem);
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-1);
}
.ds-contact__info::after {
	content: "";
	position: absolute;
	right: -30%; bottom: -40%;
	width: 70%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 156, 222, .12), transparent 70%);
	filter: blur(40px);
}
.ds-contact__info h2 { color: var(--text-strong); font-size: 1.6rem; }
.ds-contact__info p { color: var(--text); }
.ds-contact__info a { color: var(--sky-deep); }
.ds-contact__row {
	display: flex; gap: .9rem; align-items: baseline;
	padding: .9rem 0;
	border-bottom: 1px solid var(--mist-2);
	position: relative; z-index: 1;
}
.ds-contact__row:last-of-type { border-bottom: 0; }
.ds-contact__label {
	flex: none;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #a25e00;
	width: 82px;
}

.ds-form { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); padding: clamp(1.8rem, 4vw, 2.8rem); }
.ds-form h2 { font-size: 1.6rem; }
.ds-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ds-form__field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .ds-form__grid { grid-template-columns: 1fr; } }
.ds-form label {
	display: block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: .9rem;
	color: var(--text-strong);
	margin-bottom: .45rem;
}
.ds-form input[type="text"],
.ds-form input[type="email"],
.ds-form input[type="tel"],
.ds-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text-strong);
	padding: .95rem 1.1rem;
	border: 1.5px solid var(--mist-2);
	background: var(--mist);
	border-radius: 14px;
	transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.ds-form input:focus, .ds-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--sky);
	box-shadow: 0 0 0 4px rgba(0, 156, 222, .16);
}
.ds-form textarea { min-height: 130px; resize: vertical; }
.ds-form__footer { margin-top: 1.5rem; }
@media (max-width: 600px) { .ds-form__footer .ds-btn { width: 100%; justify-content: center; } }


/* 14. Careers
   ========================================================================== */
.ds-jobs-head { text-align: center; margin: var(--space-band-sm) auto 1.75rem; }
.ds-jobs-panel__tag {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sky-deep);
	background: var(--sky-100);
	border-radius: 999px;
	padding: .45rem 1rem;
	margin-bottom: 1.4rem;
}
.ds-jobs-panel__tag .dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--sky);
	animation: ds-pulse 1.8s ease-in-out infinite;
}
.ds-jobs-head h2 { font-size: 1.7rem; }

/* Live Ceipal ATS job-board embed */
.ds-jobs-embed {
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	overflow: hidden;
	box-shadow: var(--shadow-1);
	margin-bottom: var(--space-band-sm);
}
.ds-jobs-embed iframe { display: block; width: 100%; height: 1400px; border: 0; }
@media (max-width: 600px) { .ds-jobs-embed iframe { height: 1800px; } }   /* listings stack narrower, so taller */


/* 15. Seals strip + footer
   ========================================================================== */
.ds-seals { background: var(--white); padding: var(--space-band-sm) 0; border-top: 1px solid var(--mist-2); }
.ds-seals__label {
	text-align: center;
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--text);
	margin-bottom: 1.25rem;   /* was 2rem */
}
.ds-seals__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: clamp(1.2rem, 3.5vw, 3rem);
}
.ds-seals__row img {
	width: clamp(76px, 9vw, 108px);
	height: auto;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .35s ease, opacity .35s ease, transform .35s ease;
}
.ds-seals__row img:hover { filter: none; opacity: 1; transform: scale(1.06); }

/* Footer — brand navy anchor under the light page */
.ds-footer {
	background: var(--navy-950);
	color: #aeb9dc;
	padding: var(--space-band-sm) 0 2rem;
	position: relative;
	overflow: hidden;
}
.ds-footer::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--sky), var(--orange));
}
.ds-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 2.5rem;
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
}
@media (max-width: 767px) { .ds-footer__grid { grid-template-columns: 1fr; } }

.ds-footer__brand img { width: 220px; filter: brightness(0) invert(1); opacity: .95; }
.ds-footer address { font-style: normal; margin-top: 1.4rem; line-height: 1.8; }
.ds-footer__title {
	font-family: var(--font-mono);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1.2rem;
}
.ds-footer__nav { list-style: none; padding: 0; margin: 0; }
.ds-footer__nav li { margin-bottom: .55rem; }
.ds-footer__nav a { color: #aeb9dc; }
.ds-footer__nav a:hover { color: #fff; }
.ds-footer a { color: #aeb9dc; }
.ds-footer a:hover { color: #fff; }

.ds-footer__social { display: flex; gap: .8rem; margin-top: .4rem; }
.ds-footer__social a {
	display: grid;
	place-items: center;
	width: 42px; height: 42px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .07);
	transition: background .25s ease, transform .25s ease;
}
.ds-footer__social a:hover { background: var(--sky); transform: translateY(-3px); }
.ds-footer__social img { width: 20px; height: 20px; filter: brightness(0) invert(1); }

.ds-footer__legal {
	padding-top: 1.8rem;
	text-align: center;
	font-size: .88rem;
}
.ds-footer__legal a { color: #7fc9ff; }
.ds-footer__legal a:hover { color: #fff; }


/* 16. Motion
   ========================================================================== */
@keyframes ds-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(6%, 9%, 0) scale(1.12); }
}
@keyframes ds-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(7px); }
}
@keyframes ds-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 156, 222, .5); }
	60%      { box-shadow: 0 0 0 8px rgba(0, 156, 222, 0); }
}
@keyframes ds-panel-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

/* Scroll reveals — the hidden state is applied by JS (progressive
   enhancement); without JS everything is simply visible. */
.ds-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
.ds-reveal.is-in { opacity: 1; transform: none; }
.ds-reveal[data-reveal-delay="1"] { transition-delay: .1s; }
.ds-reveal[data-reveal-delay="2"] { transition-delay: .2s; }
.ds-reveal[data-reveal-delay="3"] { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.ds-reveal { opacity: 1; transform: none; }
	.ds-rotator__slide { transition: none; }
}