/* sections/about-clientele.css */
/* about-clientele — components/about/Clientele.tsx */

/* relative isolate overflow-hidden bg-[#020220] py-16 text-white md:py-24 */
.digiops-about-clientele {
	/* Tailwind's preflight line-height, which everything here inherits in the
	   original; theme.css sets body to 1.6. */
	line-height: 1.5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #020220;
	padding-block: 4rem;
	color: #fff;
}

/* pointer-events-none absolute inset-x-0 top-0 -z-10 h-1/2 */
.digiops-about-clientele__glow {
	position: absolute;
	inset-inline: 0;
	top: 0;
	z-index: -10;
	height: 50%;
	pointer-events: none;
}

.digiops-about-clientele__head {
	text-align: center;
}

/* label text-onv */
.digiops-about-clientele__label {
	color: var(--color-onv);
}

.digiops-about-clientele__title-wrap {
	margin-top: 1.25rem;
}

/* font-display mx-auto max-w-3xl text-[clamp 1.7rem/3.4vw/2.5rem] font-bold leading-snug tracking-tight */
.digiops-about-clientele__title {
	margin: 0 auto;
	max-width: 48rem;
	font-size: clamp(1.7rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: -0.025em;
}

/* container-x mt-12 md:mt-16 */
.digiops-about-clientele__rail {
	margin-top: 3rem;
}

/* flex w-56 shrink-0 flex-col border-r border-white/10 md:w-64 */
.digiops-about-clientele__column {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 14rem;
	border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* flex h-28 items-center justify-center px-8 md:h-32 */
.digiops-about-clientele__cell {
	display: flex;
	height: 7rem;
	align-items: center;
	justify-content: center;
	padding-inline: 2rem;
}

.digiops-about-clientele__cell--top {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* w-auto object-contain opacity-60 brightness-0 invert transition-opacity duration-300 hover:opacity-100 */
.digiops-about-clientele__logo {
	display: block;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.6;
	filter: brightness(0) invert(1);
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-about-clientele__logo:hover {
	opacity: 1;
}

/* max-h-10 max-w-[70%] md:max-h-12 */
.digiops-about-clientele__logo--default {
	max-height: 2.5rem;
	max-width: 70%;
}

/* max-h-16 max-w-[88%] md:max-h-20 */
.digiops-about-clientele__logo--large {
	max-height: 4rem;
	max-width: 88%;
}

/* max-h-12 max-w-[80%] md:max-h-14 */
.digiops-about-clientele__logo--medium {
	max-height: 3rem;
	max-width: 80%;
}

/* max-h-8 max-w-[56%] md:max-h-9 */
.digiops-about-clientele__logo--small {
	max-height: 2rem;
	max-width: 56%;
}

@media (min-width: 768px) {
	.digiops-about-clientele {
		padding-block: 6rem;
	}

	.digiops-about-clientele__rail {
		margin-top: 4rem;
	}

	.digiops-about-clientele__column {
		width: 16rem;
	}

	.digiops-about-clientele__cell {
		height: 8rem;
	}

	.digiops-about-clientele__logo--default {
		max-height: 3rem;
	}

	.digiops-about-clientele__logo--large {
		max-height: 5rem;
	}

	.digiops-about-clientele__logo--medium {
		max-height: 3.5rem;
	}

	.digiops-about-clientele__logo--small {
		max-height: 2.25rem;
	}
}

/* sections/about-hero.css */
/* about-hero — components/about/AboutHero.tsx */

.digiops-about-hero {
	/* Tailwind's preflight line-height, which everything here inherits in the
	   original; theme.css sets body to 1.6. */
	line-height: 1.5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #020220;
	color: #fff;
}

.digiops-about-hero__layer {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

.digiops-about-hero__photo {
	opacity: 0.3;
}

.digiops-about-hero__sheen {
	opacity: 0.7;
}

/* container-x flex min-h-[76svh] flex-col justify-end pb-16 pt-36 md:min-h-[82svh] md:pb-20 */
.digiops-about-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 76svh;
	padding-top: 9rem;
	padding-bottom: 4rem;
}

/* flex items-center gap-2 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-white/60 */
.digiops-about-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	line-height: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.6);
}

.digiops-about-hero__crumb-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-about-hero__crumb-link:hover,
.digiops-about-hero__crumb-current {
	color: #fff;
}

/* h-hero mt-7 max-w-4xl !text-[clamp 1.9rem/4.3vw/4.4rem] */
.digiops-about-hero__title.h-hero {
	margin-top: 1.75rem;
	max-width: 56rem;
	font-size: clamp(1.9rem, 4.3vw, 4.4rem);
}

/* mt-6 max-w-xl text-base font-semibold text-white/70 md:text-lg */
.digiops-about-hero__intro {
	margin: 1.5rem 0 0;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

/* mt-9 flex flex-wrap items-center gap-4 */
.digiops-about-hero__actions {
	margin-top: 2.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

/* bg-[#2f6bff] text-white hover:bg-[#1f57e0]. Its transition-colors utility
   loses to the unlayered .pill rule in the original, so .pill's own 0.3s
   colour transition is the one that runs. */
.pill.digiops-about-hero__book {
	background-color: #2f6bff;
	color: #fff;
}

.pill.digiops-about-hero__book:hover {
	background-color: #1f57e0;
}

@media (min-width: 768px) {
	.digiops-about-hero__inner {
		min-height: 82svh;
		padding-bottom: 5rem;
	}

	.digiops-about-hero__intro {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}

/* sections/about-story.css */
/* about-story — inline story section of app/about/page.tsx */

/* relative isolate overflow-hidden py-16 md:py-24 */
.digiops-about-story {
	/* Tailwind's preflight line-height, which everything here inherits in the
	   original; theme.css sets body to 1.6. */
	line-height: 1.5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 4rem;
}

.digiops-about-story__bg {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* mt-10 grid gap-10 lg:grid-cols-2 lg:items-start lg:gap-14 */
.digiops-about-story__grid {
	margin-top: 2.5rem;
	display: grid;
	gap: 2.5rem;
}

.digiops-about-story__col {
	min-width: 0;
}

/* font-display text-[clamp 1.9rem/3.2vw/2.5rem] font-bold leading-[1.25] tracking-tight */
.digiops-about-story__title {
	margin: 0;
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

.digiops-about-story__title-rest {
	color: var(--color-ink);
}

/* mt-10 grid grid-cols-2 gap-x-4 gap-y-8 border-t border-tint pt-8 sm:grid-cols-4 */
.digiops-about-story__stats {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1rem;
	row-gap: 2rem;
	border-top: 1px solid var(--color-tint);
	padding-top: 2rem;
}

/* text-xs font-bold uppercase leading-relaxed tracking-wider text-ink */
.digiops-about-story__stat-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.625;
	letter-spacing: 0.05em;
	color: var(--color-ink);
}

/* font-display mt-2 text-4xl font-bold tracking-tight text-violet md:text-5xl */
.digiops-about-story__stat-num {
	margin: 0.5rem 0 0;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-violet);
}

/* text-2xl md:text-3xl */
.digiops-about-story__stat-suffix {
	font-size: 1.5rem;
	line-height: 2rem;
}

/* leading-relaxed text-ink/70, mt-4 between */
.digiops-about-story__copy p {
	margin: 0;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

.digiops-about-story__copy p + p {
	margin-top: 1rem;
}

/* Phones: the four figures are centred in their columns. */
@media (max-width: 639px) {
	.digiops-about-story__stats {
		text-align: center;
	}
}

@media (min-width: 640px) {
	.digiops-about-story__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.digiops-about-story {
		padding-block: 6rem;
	}

	.digiops-about-story__stat-num {
		font-size: 3rem;
		line-height: 1;
	}

	.digiops-about-story__stat-suffix {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.digiops-about-story__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 3.5rem;
	}

	.digiops-about-story__copy {
		padding-top: 0.5rem;
	}
}

/* sections/about-values.css */
/* about-values — inline values section of app/about/page.tsx */

/* about-values relative isolate overflow-hidden py-16 md:py-24 */
.digiops-about-values {
	/* Tailwind's preflight line-height, which everything here inherits in the
	   original; theme.css sets body to 1.6. */
	line-height: 1.5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 4rem;
}

/* h-xl mt-4 max-w-2xl !text-[clamp 2rem/4.5vw/3rem] */
.digiops-about-values__title.h-xl {
	margin-top: 1rem;
	max-width: 42rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4 */
.digiops-about-values__grid {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
}

.digiops-about-values__cell {
	display: flex;
}

/* bento rounded-2xl border p-7 md:p-8 border-white/10 | border-black/5.
   .bento's own 1.25rem radius wins over rounded-2xl in the original (the
   .bento rule is unlayered), so the radius is left to .bento. */
.digiops-about-values__card {
	flex: 1 1 auto;
	border: 1px solid rgba(0, 0, 0, 0.05);
	padding: 1.75rem;
}

.digiops-about-values__card.is-dark {
	border-color: rgba(255, 255, 255, 0.1);
}

/* inline-flex h-11 w-11 items-center justify-center rounded-xl */
.digiops-about-values__icon {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
}

.digiops-about-values__icon svg {
	display: block;
}

/* font-display mt-4 text-xl font-bold tracking-tight md:text-2xl */
.digiops-about-values__card-title {
	margin: 1rem 0 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.is-dark .digiops-about-values__card-title {
	color: #fff;
}

/* mt-3 text-sm font-semibold leading-relaxed text-white/75 | text-ink/60 */
.digiops-about-values__text {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.is-dark .digiops-about-values__text {
	color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 640px) {
	.digiops-about-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.digiops-about-values {
		padding-block: 6rem;
	}

	.digiops-about-values__card {
		padding: 2rem;
	}

	.digiops-about-values__card-title {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.digiops-about-values__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* sections/about-vision-mission.css */
/* about-vision-mission — components/about/VisionMission.tsx */

/* about-vision relative isolate overflow-hidden py-16 text-white md:py-24 */
.digiops-about-vm {
	/* Tailwind's preflight line-height, which everything here inherits in the
	   original; theme.css sets body to 1.6. */
	line-height: 1.5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 4rem;
	color: #fff;
}

/* container-x grid gap-10 md:grid-cols-2 md:gap-14 */
.digiops-about-vm__grid {
	display: grid;
	gap: 2.5rem;
}

.digiops-about-vm__block {
	min-width: 0;
}

/* font-display text-2xl font-bold tracking-tight md:text-3xl */
.digiops-about-vm__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* mt-5 max-w-lg leading-relaxed text-white/85 */
.digiops-about-vm__body {
	margin: 1.25rem 0 0;
	max-width: 32rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 768px) {
	.digiops-about-vm {
		padding-block: 6rem;
	}

	.digiops-about-vm__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.5rem;
	}

	.digiops-about-vm__title {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

/* sections/about-what-we-do.css */
/* about-what-we-do — components/about/WhatWeDo.tsx */

/* relative isolate overflow-hidden py-16 md:py-24 */
.digiops-about-wwd {
	/* Tailwind's preflight line-height, which everything here inherits in the
	   original; theme.css sets body to 1.6. */
	line-height: 1.5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 4rem;
}

.digiops-about-wwd__layer {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* opacity-[0.12] grayscale */
.digiops-about-wwd__photo {
	opacity: 0.12;
	filter: grayscale(100%);
}

/* h-xl mt-4 !text-[clamp 2rem/4.5vw/3rem] */
.digiops-about-wwd__title.h-xl {
	margin-top: 1rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 */
.digiops-about-wwd__grid {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
}

.digiops-about-wwd__cell {
	display: flex;
}

/* group flex items-center justify-between gap-5 rounded-2xl border border-tint
   bg-white px-6 py-4 transition-all duration-300 hover:-translate-y-1
   hover:border-violet md:px-7 md:py-5 */
.digiops-about-wwd__card {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	border-radius: 1rem;
	border: 1px solid var(--color-tint);
	background: #fff;
	padding: 1rem 1.5rem;
	color: inherit;
	text-decoration: none;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-about-wwd__card:hover {
	transform: translateY(-0.25rem);
	border-color: var(--color-violet);
}

/* font-display max-w-[11rem] text-lg font-bold leading-snug tracking-tight
   transition-colors duration-300 group-hover:text-violet md:text-xl */
.digiops-about-wwd__card-title {
	margin: 0;
	max-width: 11rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: -0.025em;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* shrink-0 text-violet/70 group-hover:text-violet */
.digiops-about-wwd__icon {
	flex-shrink: 0;
	color: rgba(66, 69, 180, 0.7);
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-about-wwd__icon svg {
	display: block;
}

.digiops-about-wwd__card:hover .digiops-about-wwd__card-title,
.digiops-about-wwd__card:hover .digiops-about-wwd__icon {
	color: var(--color-violet);
}

@media (min-width: 640px) {
	.digiops-about-wwd__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.digiops-about-wwd {
		padding-block: 6rem;
	}

	.digiops-about-wwd__card {
		padding: 1.25rem 1.75rem;
	}

	.digiops-about-wwd__card-title {
		font-size: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.digiops-about-wwd__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* sections/ai-services-advantage.css */
/**
 * AI Services advantage band — app/ai-services/page.tsx:
 * <section className="relative isolate overflow-hidden bg-[#0a0a12] py-20 text-white md:py-28">
 */

.ais-adv {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 5rem;
	background: #0a0a12;
	color: #fff;
	line-height: 1.5;
}

.ais-adv :where(h1, h2, h3, p) {
	margin: 0;
}

.ais-adv__glow {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* grid gap-12 lg:grid-cols-[2fr_3fr] lg:gap-16 */
.ais-adv__grid {
	display: grid;
	gap: 3rem;
}

.ais-adv__lead,
.ais-adv__list {
	min-width: 0;
}

.ais-adv__eyebrow {
	color: var(--color-onv);
}

.ais-adv__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.ais-adv__body-wrap {
	margin-top: 1.5rem;
}

.ais-adv__body {
	max-width: 28rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

.ais-adv__cta {
	margin-top: 2rem;
}

.ais-adv__item {
	display: flex;
	gap: 1.25rem;
	padding-block: 1.75rem;
}

.ais-adv__item + .ais-adv__item {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ais-adv__badge {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin-top: 0.25rem;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
}

.ais-adv__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.ais-adv__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.ais-adv__desc {
	margin-top: 0.5rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

/* Phones: the button steps down a size, to match the other section buttons. */
@media (max-width: 767px) {
	.ais-adv__cta .pill {
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.ais-adv {
		padding-block: 7rem;
	}

	.ais-adv__title {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.ais-adv__grid {
		grid-template-columns: 2fr 3fr;
		gap: 4rem;
	}
}

/* sections/ai-services-agentic.css */
/**
 * AI Services agentic band — app/ai-services/page.tsx:
 * <section id="agentic-ai" className="relative isolate overflow-hidden py-20 text-white md:py-28">
 * The gradient + artwork are set inline from the fields.
 */

.ais-agentic {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 5rem;
	color: #fff;
	line-height: 1.5;
}

.ais-agentic :where(h1, h2, h3, p) {
	margin: 0;
}

/* grid gap-10 lg:grid-cols-[1fr_2fr] lg:gap-8 */
.ais-agentic__grid {
	display: grid;
	gap: 2.5rem;
}

.ais-agentic__eyebrow {
	color: var(--color-onv);
}

.ais-agentic__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.ais-agentic__statement-wrap {
	margin-top: 2rem;
}

/* font-display text-xl font-bold leading-snug tracking-tight md:text-2xl */
.ais-agentic__statement {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: -0.025em;
}

.ais-agentic__body {
	margin-top: 1.25rem;
	max-width: 24rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

/* mt-8 grid gap-6 sm:grid-cols-2 xl:grid-cols-4 */
.ais-agentic__list {
	margin-top: 2rem;
	display: grid;
	gap: 1.5rem;
}

.ais-agentic__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-left: 1.25rem;
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	transition: border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ais-agentic__item:hover {
	border-color: rgba(255, 255, 255, 0.4);
}

.ais-agentic__glow {
	position: absolute;
	inset: -1.25rem -0.75rem;
	z-index: -10;
	border-radius: 1rem;
	opacity: 0;
	filter: blur(24px);
	pointer-events: none;
	background: radial-gradient(circle at 0% 50%, rgba(139, 92, 246, 0.4), rgba(47, 107, 255, 0.2) 55%, transparent 80%);
	transition: opacity 0.7s cubic-bezier(0, 0, 0.2, 1);
}

.ais-agentic__item:hover .ais-agentic__glow {
	opacity: 1;
}

/* font-display text-lg font-bold leading-snug tracking-tight md:text-xl */
.ais-agentic__title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: -0.025em;
	color: #fff;
}

.ais-agentic__desc {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 640px) {
	.ais-agentic__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.ais-agentic {
		padding-block: 7rem;
	}

	.ais-agentic__statement {
		font-size: 1.5rem;
	}

	.ais-agentic__title {
		font-size: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.ais-agentic__grid {
		grid-template-columns: 1fr 2fr;
		gap: 2rem;
	}

	.ais-agentic__lead {
		position: sticky;
		top: 6rem;
		align-self: start;
	}

	/* CASCADE_STAGGER: lg:pt-0 / pt-16 / pt-32 / pt-48 */
	.ais-agentic__item {
		padding-top: calc(var(--ais-step, 0) * 4rem);
	}
}

@media (min-width: 1280px) {
	.ais-agentic__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* sections/ai-services-agents.css */
/**
 * AI Services agent bento — app/ai-services/page.tsx:
 * <section id="ai-agents" className="web-design-bg py-20 text-ink md:py-28">
 */

.ais-agents {
	padding-block: 5rem;
	color: var(--color-ink);
	line-height: 1.5;
}

.ais-agents :where(h1, h2, h3, p) {
	margin: 0;
}

/* flex flex-col gap-6 lg:flex-row lg:items-end lg:gap-10 */
.ais-agents__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ais-agents__eyebrow {
	color: var(--color-violet);
}

.ais-agents__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.ais-agents__intro {
	font-weight: 500;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

/* mt-12 grid gap-5 lg:grid-cols-3 */
.ais-agents__grid {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
}

.ais-agents__card {
	display: flex;
	flex-direction: column;
	border-radius: 1.5rem;
}

/* bg-gradient-to-br from-[#4141af] to-[#27276d] */
.ais-agents__card--feature {
	position: relative;
	overflow: hidden;
	background-image: linear-gradient(to bottom right, #4141af, #27276d);
	color: #fff;
}

.ais-agents__feature-copy {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
}

.ais-agents__feature-art {
	flex: 1 1 0%;
	min-height: 10rem;
	background-size: cover, cover;
	background-position: center, center;
}

.ais-agents__card--plain {
	justify-content: space-between;
	padding: 2rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background: #fff;
	box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.25);
}

.ais-agents__title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.025em;
}

.ais-agents__title--lg {
	font-size: 1.5rem;
	line-height: 2rem;
}

.ais-agents__title--md {
	font-size: 1.25rem;
	line-height: 1.75rem;
}

.ais-agents__desc {
	margin-top: 0.75rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.ais-agents__card--feature .ais-agents__desc {
	max-width: 20rem;
	color: rgba(255, 255, 255, 0.75);
}

/* pill … mt-8 w-fit !px-5 !py-2 !text-sm */
.ais-agents .ais-agents__link {
	margin-top: 2rem;
	width: fit-content;
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

@media (min-width: 768px) {
	.ais-agents {
		padding-block: 7rem;
	}

	.ais-agents__title--lg {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}

	.ais-agents__title--md {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.ais-agents__head {
		flex-direction: row;
		align-items: flex-end;
		gap: 2.5rem;
	}

	.ais-agents__head-main {
		width: 65%;
	}

	.ais-agents__head-side {
		width: 35%;
	}

	.ais-agents__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ais-agents__card--feature {
		grid-column: span 2 / span 2;
		flex-direction: row;
		align-items: stretch;
	}

	.ais-agents__feature-copy {
		flex: 2 1 0%;
	}

	.ais-agents__feature-art {
		flex: 3 1 0%;
		min-height: 0;
	}
}

/* sections/ai-services-automation.css */
/**
 * AI Services automation & integration — app/ai-services/page.tsx:
 * <section className="bg-white py-20 text-ink md:py-28">
 */

.ais-auto {
	position: relative;
	padding-block: 5rem;
	background: #fff;
	color: var(--color-ink);
	line-height: 1.5;
}

.ais-auto :where(h1, h2, h3, p) {
	margin: 0;
}

/* flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between lg:gap-10 */
.ais-auto__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ais-auto__head-main {
	max-width: 25.6rem;
}

.ais-auto__eyebrow {
	color: var(--color-violet);
}

.ais-auto__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
	color: var(--color-ink);
}

.ais-auto__head-side {
	max-width: 24rem;
}

.ais-auto__body {
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.ais-auto__em {
	font-weight: 700;
	color: var(--color-violet);
}

/* desktop circuit: mt-[-130px] hidden w-full lg:block */
.ais-auto__circuit {
	display: none;
	margin-top: -130px;
	width: 100%;
}

.ais-auto__board {
	position: relative;
	margin-inline: auto;
	width: 100%;
	max-width: 72rem;
	aspect-ratio: 1200 / 380;
}

.ais-auto__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ais-auto__hub {
	position: absolute;
	left: 41.667%;
	top: 2.632%;
	width: 16.667%;
	height: 15.789%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid #4245b4;
	border-radius: 999px;
	background: #fff;
	text-align: center;
}

/* text-[0.65rem] font-extrabold uppercase tracking-[0.12em] sm:text-xs */
.ais-auto__hub-label {
	font-size: 0.65rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #4245b4;
}

.ais-auto__node {
	position: absolute;
	top: 74%;
	width: 6rem;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.ais-auto__ring {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border: 2px solid;
	border-radius: 999px;
	background: #fff;
}

.ais-auto__ring--lg {
	width: 3.6rem;
	height: 3.6rem;
}

.ais-auto__ring--sm {
	width: 3.5rem;
	height: 3.5rem;
}

.ais-auto__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.ais-auto__short {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.375;
	color: rgba(27, 28, 58, 0.8);
}

/* mobile / tablet fallback: mt-10 grid grid-cols-3 gap-6 sm:grid-cols-5 lg:hidden */
.ais-auto__grid {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.ais-auto__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.ais-auto__systems-wrap {
	margin-top: 3.5rem;
}

/* about-values flex flex-col items-center gap-8 rounded-3xl px-8 py-10 md:px-10 */
.ais-auto__systems {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	padding: 2.5rem 2rem;
	border-radius: 1.5rem;
}

.ais-auto__systems-heading {
	text-align: center;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

.ais-auto__systems-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}

.ais-auto__system {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.ais-auto__system-icon {
	display: block;
	width: 2rem;
	height: 2rem;
	color: rgba(27, 28, 58, 0.5);
}

.ais-auto__system-name {
	white-space: nowrap;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--color-ink);
}

@media (min-width: 640px) {
	.ais-auto__hub-label {
		font-size: 0.75rem;
		line-height: 1rem;
	}

	.ais-auto__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.ais-auto {
		padding-block: 7rem;
	}

	.ais-auto__systems {
		padding-inline: 2.5rem;
	}
}

@media (min-width: 1024px) {
	.ais-auto__head {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: 2.5rem;
	}

	.ais-auto__head-side {
		padding-top: 2rem;
	}

	.ais-auto__circuit {
		display: block;
	}

	.ais-auto__grid {
		display: none;
	}

	.ais-auto__systems-row {
		flex-wrap: nowrap;
		column-gap: 0;
	}

	.ais-auto__system {
		padding-inline: 1rem;
	}

	.ais-auto__system + .ais-auto__system {
		border-left: 1px solid var(--color-tint);
	}
}

/* sections/ai-services-hero.css */
/**
 * AI Services hero — app/ai-services/page.tsx, first <section>.
 * The band itself is .web-hero from theme.css; the photo is set inline.
 */

.ais-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	line-height: 1.5;
}

.ais-hero :where(h1, h2, h3, p) {
	margin: 0;
}

.ais-hero__glow {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

.ais-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 4.8rem;
	padding-bottom: 5rem;
	text-align: center;
}

/* breadcrumb: text-[0.7rem] font-bold uppercase tracking-[0.18em] text-white/55 */
.ais-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
}

.ais-hero__crumb-link {
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.ais-hero__crumb-link:hover,
.ais-hero__crumb-current {
	color: #fff;
}

.ais-hero__title {
	margin-top: 1.75rem;
	margin-inline: auto;
	max-width: 48rem;
	font-size: clamp(1.9rem, 4.3vw, 4.4rem);
}

/* orb + connected cards: md:block, h-[480px], max-w-4xl, mt-[-35px] */
.ais-hero__graphic {
	position: relative;
	display: none;
	margin-top: -35px;
	margin-inline: auto;
	width: 100%;
	max-width: 56rem;
	height: 480px;
}

.ais-hero__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.ais-hero__orb {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 14rem;
	height: 14rem;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background-size: cover, cover;
	background-position: center, center;
	box-shadow: 0 0 100px 30px rgba(139, 92, 246, 0.4), 0 0 180px 60px rgba(47, 107, 255, 0.22);
}

.ais-hero__orb-ring {
	position: absolute;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.ais-hero__orb-ring--in {
	inset: 0.5rem;
}

.ais-hero__orb-ring--out {
	inset: -0.5rem;
	border-color: rgba(255, 255, 255, 0.1);
}

.ais-hero__orb-label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ais-hero__orb-label span {
	font-family: var(--font-display);
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 900;
	letter-spacing: -0.025em;
	color: #fff;
	filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.65));
}

.ais-hero__card {
	position: absolute;
	width: 18rem;
	padding: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 20px 50px -12px rgba(0, 0, 0, 0.5);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	text-align: left;
}

.ais-hero__card--tl,
.ais-hero__card--tr {
	top: 32%;
	transform: translateY(-50%);
}

.ais-hero__card--bl,
.ais-hero__card--br {
	bottom: 32%;
	transform: translateY(50%);
}

.ais-hero__card--tl,
.ais-hero__card--bl {
	left: 0;
}

.ais-hero__card--tr,
.ais-hero__card--br {
	right: 0;
}

.ais-hero__card-title {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
}

.ais-hero__card-rows {
	margin-top: 0.75rem;
}

.ais-hero__card-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.625rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.06);
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(255, 255, 255, 0.7);
}

.ais-hero__card-row + .ais-hero__card-row {
	margin-top: 0.5rem;
}

.ais-hero__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	border-radius: 999px;
	background: rgba(139, 92, 246, 0.3);
	color: #c4b5fd;
}

.ais-hero__bolt {
	color: #c4b5fd;
}

.ais-hero__cta {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

/* Phones: more air between the fixed header and the breadcrumb, and a
   smaller button. */
@media (max-width: 767px) {
	.ais-hero__inner {
		padding-top: 7.5rem;
	}

	.ais-hero__cta .pill {
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.ais-hero__inner {
		padding-top: 6.4rem;
		padding-bottom: 4rem;
	}

	.ais-hero__graphic {
		display: block;
	}

	.ais-hero__cta {
		margin-top: -65px;
	}
}

/* sections/ai-services-industries.css */
/**
 * AI Services industries marquee — app/ai-services/page.tsx:
 * <section className="bg-[#eeeefe] py-20 text-ink md:py-28">
 */

.ais-industries {
	position: relative;
	padding-block: 5rem;
	background: #eeeefe;
	color: var(--color-ink);
	line-height: 1.5;
}

.ais-industries :where(h1, h2, h3, p) {
	margin: 0;
}

.ais-industries__eyebrow {
	color: var(--color-violet);
}

.ais-industries__heading {
	margin-top: 1rem;
	max-width: 56rem;
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

.ais-industries__marquee {
	margin-top: 3rem;
}

/* flex shrink-0 gap-5 pr-5 */
.ais-industries__row {
	display: flex;
	flex-shrink: 0;
	gap: 1.25rem;
	padding-right: 1.25rem;
}

/* flex min-h-[8.5rem] w-56 shrink-0 flex-col justify-between rounded-2xl
   border border-violet/30 bg-[#e0e0ef] p-4 md:w-64 */
.ais-industries__card {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	justify-content: space-between;
	width: 14rem;
	min-height: 8.5rem;
	padding: 1rem;
	border: 1px solid rgba(66, 69, 180, 0.3);
	border-radius: 1rem;
	background: #e0e0ef;
	transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ais-industries__card:hover {
	border-color: rgba(66, 69, 180, 0.5);
}

.ais-industries__icon {
	display: block;
	width: 1.75rem;
	height: 1.75rem;
}

.ais-industries__title {
	font-family: var(--font-display);
	font-size: 0.875rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.ais-industries__desc {
	margin-top: 0.375rem;
	font-size: 0.75rem;
	line-height: 1.375;
	color: rgba(27, 28, 58, 0.6);
}

@media (min-width: 768px) {
	.ais-industries {
		padding-block: 7rem;
	}

	.ais-industries__marquee {
		margin-top: 3.5rem;
	}

	.ais-industries__card {
		width: 16rem;
	}

	.ais-industries__title {
		font-size: 1rem;
	}
}

/* sections/ai-services-problem.css */
/**
 * AI Services problem band — app/ai-services/page.tsx:
 * <section className="container-x py-20 md:py-28">
 */

.ais-problem {
	padding-block: 5rem;
	color: var(--color-ink);
	line-height: 1.5;
}

.ais-problem :where(h1, h2, h3, p) {
	margin: 0;
}

/* grid gap-10 lg:grid-cols-[1.5fr_2fr] lg:gap-20 */
.ais-problem__grid {
	display: grid;
	gap: 2.5rem;
}

.ais-problem__lead,
.ais-problem__side {
	min-width: 0;
}

.ais-problem__eyebrow {
	color: var(--color-violet);
}

.ais-problem__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.ais-problem__label-wrap {
	margin-top: 2.5rem;
}

.ais-problem__label {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.75rem;
	line-height: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(27, 28, 58, 0.45);
}

.ais-problem__rule {
	margin-top: 1rem;
	height: 1px;
	width: 100%;
	background: var(--color-tint);
}

.ais-problem__pains {
	margin-top: 2rem;
	display: grid;
	gap: 1rem;
}

.ais-problem__pain {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	background: var(--color-lavender);
}

.ais-problem__star {
	margin-top: 0.125rem;
	color: var(--color-violet);
}

.ais-problem__pain-text {
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.8);
}

.ais-problem__body-wrap {
	margin-top: 2rem;
}

.ais-problem__body {
	max-width: 48rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* Phones: tighter vertical rhythm. The heading and the "you may have
   experienced" label were 80px apart (grid gap plus the label's own margin);
   the label-to-cards and cards-to-paragraph gaps come in too. */
@media (max-width: 767px) {
	.ais-problem__grid {
		gap: 1.25rem;
	}

	.ais-problem__label-wrap {
		margin-top: 0;
	}

	.ais-problem__pains {
		margin-top: 1.25rem;
		gap: 0.75rem;
	}

	.ais-problem__body-wrap {
		margin-top: 1.5rem;
	}
}

@media (min-width: 640px) {
	.ais-problem__pains {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.ais-problem {
		padding-block: 7rem;
	}
}

@media (min-width: 1024px) {
	.ais-problem__grid {
		grid-template-columns: 1.5fr 2fr;
		gap: 5rem;
	}

	.ais-problem__label-wrap {
		margin-top: 0;
	}
}

/* sections/ai-services-voice.css */
/**
 * AI Services voice agent band — app/ai-services/page.tsx:
 * <section id="ai-voice-agent" className="relative isolate scroll-mt-16 overflow-hidden bg-[#0b0b12] text-white">
 */

.ais-voice {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	scroll-margin-top: 4rem;
	background: #0b0b12;
	color: #fff;
	line-height: 1.5;
}

.ais-voice :where(h1, h2, h3, p) {
	margin: 0;
}

.ais-voice__ground,
.ais-voice__texture {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

.ais-voice__texture {
	opacity: 0.05;
}

/* grid gap-12 pt-[70px] pb-16 md:pt-[86px] md:pb-24 lg:grid-cols-3 lg:items-center lg:gap-10 */
.ais-voice__grid {
	display: grid;
	gap: 3rem;
	padding-top: 70px;
	padding-bottom: 4rem;
}

/* the card: hover lift lives here; the reveal sits on its wrapper */
.ais-voice__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 30rem;
	overflow: hidden;
	padding: 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1.75rem;
	background: rgba(255, 255, 255, 0.04);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ais-voice__card:hover {
	transform: translateY(-0.375rem);
}

.ais-voice__glow {
	position: absolute;
	top: -4rem;
	left: 50%;
	width: 16rem;
	height: 16rem;
	border-radius: 999px;
	pointer-events: none;
	background: radial-gradient(circle, rgba(108, 111, 224, 0.55), transparent 68%);
	transform: translateX(-50%);
}

.ais-voice__aurora {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -33.333333%;
	right: -33.333333%;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 12%, rgba(108, 111, 224, 0.22) 42%, rgba(150, 120, 255, 0.14) 58%, transparent 86%);
}

.ais-voice__card-top {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

.ais-voice__plus {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ais-voice__card:hover .ais-voice__plus {
	transform: rotate(90deg);
}

.ais-voice__art {
	position: relative;
	margin: auto;
	width: 100%;
	max-width: 15rem;
	height: 7rem;
	opacity: 0.9;
}

.ais-voice__art svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ais-voice__card-copy {
	position: relative;
	margin-top: auto;
}

.ais-voice__card-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 1.3333;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.ais-voice__card-body {
	margin-top: 0.75rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.65);
}

.ais-voice__heading {
	max-width: 28rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

.ais-voice__body-wrap {
	margin-top: 1.5rem;
}

.ais-voice__body {
	max-width: 24rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.6);
}

.ais-voice__chain-wrap {
	margin-top: 2rem;
}

.ais-voice__kicker {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.4);
}

.ais-voice__chain {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	max-width: 24rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
}

.ais-voice__step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ais-voice__arrow {
	color: rgba(255, 255, 255, 0.3);
}

.ais-voice__uses {
	margin-top: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
}

.ais-voice__use {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: #fff;
}

.ais-voice__use-icon {
	display: block;
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}

@media (min-width: 768px) {
	.ais-voice__grid {
		padding-top: 86px;
		padding-bottom: 6rem;
	}

	.ais-voice__card {
		padding: 2rem;
	}

	.ais-voice__card-title {
		font-size: 1.7rem;
	}
}

@media (min-width: 1024px) {
	.ais-voice__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: center;
		gap: 2.5rem;
	}

	.ais-voice__uses-col {
		padding-left: 2.5rem;
		border-left: 1px solid rgba(255, 255, 255, 0.1);
	}
}

/* sections/autobgv-agents.css */
/*
 * AutoBGV agent network band — section#agent-network of app/autobgv/page.tsx.
 * Panel surfaces, colours, hover and the right-edge bleed are theme.css's
 * .agent-section / .agent-band / .agent-panel rules; only the Tailwind
 * utilities the page wrote inline are converted here.
 */

/* agent-section bg-lavender py-16 md:py-[90px] */
.autobgv-agents {
	background: var(--color-lavender);
	padding-block: 4rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.autobgv-agents {
		padding-block: 90px;
	}
}

/* max-w-2xl */
.autobgv-agents__head {
	max-width: 42rem;
}

/* h-xl mt-4 !text-[clamp 1.9rem/4vw/3rem] */
.autobgv-agents__title.h-xl {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

/* mt-14 */
.autobgv-agents__band {
	margin-top: 3.5rem;
}

/* AgentConstellation: pointer-events-none absolute inset-0 -z-10 h-full w-full */
.autobgv-agents__web {
	position: absolute;
	inset: 0;
	z-index: -10;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* relative z-10 */
.autobgv-agents__body {
	position: relative;
	z-index: 10;
}

/* font-display text-xl font-bold tracking-tight */
.autobgv-agents__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* mt-4 space-y-2.5 */
.autobgv-agents__list {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.autobgv-agents__list > li + li {
	margin-top: 0.625rem;
}

/* flex items-start gap-2.5 text-sm leading-relaxed */
.autobgv-agents__item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.875rem;
	line-height: 1.625;
}

/* mt-[7px] h-1 w-1 shrink-0 rounded-full */
.autobgv-agents__dot {
	margin-top: 7px;
	width: 0.25rem;
	height: 0.25rem;
	flex-shrink: 0;
	border-radius: 9999px;
}

/*
 * <Reveal stagger> on the band: the band itself stays put (its shadow is there
 * from the start, as in React) and its panels rise in 0.09s apart. `translate`
 * rather than `transform`, so the panels' hover scale keeps working.
 */
.js .autobgv-agents__band[data-digiops-reveal] {
	opacity: 1;
	transform: none;
}

.js .autobgv-agents__band[data-digiops-reveal] > .agent-panel {
	opacity: 0;
	translate: 0 36px;
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--d, 0s),
		translate 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--d, 0s);
}

.js .autobgv-agents__band[data-digiops-reveal].is-revealed > .agent-panel {
	opacity: 1;
	translate: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .autobgv-agents__band[data-digiops-reveal] > .agent-panel {
		opacity: 1;
		translate: none;
	}
}

/* sections/autobgv-capabilities.css */
/*
 * AutoBGV platform capabilities — the "platform capabilities" section of
 * app/autobgv/page.tsx and components/autobgv/CapabilityTabs.tsx.
 * The glow is theme.css's .autobgv-caps-glow and the grid fade is .cap-fade.
 */

/* relative isolate overflow-hidden bg-[#0a0a12] py-16 text-white md:py-[90px] */
.autobgv-caps {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #0a0a12;
	color: #fff;
	padding-block: 4rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.autobgv-caps {
		padding-block: 90px;
	}
}

.autobgv-caps .autobgv-grad-defs {
	position: absolute;
}

.autobgv-caps__glow {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* max-w-2xl */
.autobgv-caps__head {
	max-width: 42rem;
}

/* h-xl mt-4 !text-[clamp 1.9rem/4vw/3rem] */
.autobgv-caps__title.h-xl {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

/* mt-12 grid gap-8 md:mt-14 lg:grid-cols-[19rem_1fr] lg:gap-12 */
.autobgv-caps__tabs {
	margin-top: 3rem;
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.autobgv-caps__tabs {
		margin-top: 3.5rem;
	}
}

@media (min-width: 1024px) {
	.autobgv-caps__tabs {
		grid-template-columns: 19rem 1fr;
		gap: 3rem;
	}
}

/* h-max rounded-2xl border border-white/10 bg-white/[0.03] p-2 */
.autobgv-caps__list {
	height: max-content;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.03);
	padding: 0.5rem;
}

/* flex w-full items-center gap-3 rounded-xl px-3.5 py-3.5 text-left transition-colors duration-300 */
.autobgv-caps__tab {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	border: 0 solid transparent;
	border-radius: 0.75rem;
	background: transparent;
	padding: 0.875rem;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: left;
	cursor: default;
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.autobgv-caps__tab:hover {
	background: rgba(255, 255, 255, 0.05);
}

.autobgv-caps__tab.is-active {
	background: rgba(255, 255, 255, 0.09);
}

/* i > 0 && !isActive -> border-t border-white/[0.06] */
.autobgv-caps__tab + .autobgv-caps__tab:not(.is-active) {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* h-5 w-5 shrink-0 */
.autobgv-caps__tab-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

/* font-display text-[0.95rem] font-bold tracking-tight; white / white-65 */
.autobgv-caps__tab-name {
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: rgba(255, 255, 255, 0.65);
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.autobgv-caps__tab.is-active .autobgv-caps__tab-name {
	color: #fff;
}

/* ml-auto text-xs font-semibold; white-60 / white-30 */
.autobgv-caps__tab-count {
	margin-left: auto;
	min-width: 1.25rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.3);
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.autobgv-caps__tab.is-active .autobgv-caps__tab-count {
	color: rgba(255, 255, 255, 0.6);
}

/* One category at a time once the script is there; all of them without it. */
.js .autobgv-caps__panel:not(.is-active) {
	display: none;
}

/* Stacked one after another only when the script is absent. With the tabs
   working only one panel shows, and a panel that follows another in the markup
   must not start 48px lower than the first one did. */
.autobgv-caps__panel + .autobgv-caps__panel {
	margin-top: 3rem;
}

.js .autobgv-caps__panel + .autobgv-caps__panel {
	margin-top: 0;
}

/* font-display text-gradient-brand text-[clamp 1.6rem/3vw/2.25rem] font-bold tracking-tight */
.autobgv-caps__group {
	margin: 0;
	line-height: 1.5;
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* cap-fade mt-7 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 */
.autobgv-caps__grid {
	margin-top: 1.75rem;
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.autobgv-caps__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.autobgv-caps__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* flex flex-col rounded-2xl border border-white/10 bg-white/[0.03] p-5 */
.autobgv-caps__card {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.03);
	padding: 1.25rem;
}

/* flex items-start gap-3 */
.autobgv-caps__card-head {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

/* mt-0.5 h-5 w-5 shrink-0 */
.autobgv-caps__card-icon {
	display: block;
	margin-top: 0.125rem;
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

/* font-display text-[0.95rem] font-bold leading-snug tracking-tight */
.autobgv-caps__card-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: -0.025em;
}

/* mt-2.5 text-sm leading-relaxed text-white/60 */
.autobgv-caps__card-text {
	margin: 0.625rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.6);
}

/* sections/autobgv-hero.css */
/*
 * AutoBGV hero — the inline hero of app/autobgv/page.tsx.
 * The artwork and glows are theme.css's .autobgv-hero-bg / .autobgv-hero-glow.
 */

.autobgv-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	line-height: 1.5;
}

.autobgv-grad-defs {
	position: absolute;
}

/* absolute inset-0 -z-10 pointer-events-none */
.autobgv-hero__glow {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* container-x flex flex-col items-center pb-16 pt-28 text-center md:pb-20 md:pt-32 */
.autobgv-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 7rem;
	padding-bottom: 4rem;
	text-align: center;
}

@media (min-width: 768px) {
	.autobgv-hero__inner {
		padding-top: 8rem;
		padding-bottom: 5rem;
	}
}

/* <Reveal delay> — the shared reveal, offset per element */
.autobgv-hero__rv {
	transition-delay: var(--d, 0s);
}

/* flex items-center gap-2 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-white/55 */
.autobgv-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
}

.autobgv-hero__crumb-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.autobgv-hero__crumb-link:hover {
	color: #fff;
}

.autobgv-hero__crumb-current {
	color: #fff;
}

/* mt-6 */
.autobgv-hero__badge-wrap {
	margin-top: 1.5rem;
}

/* inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5
   px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-white/80 */
.autobgv-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.05);
	padding: 0.375rem 1rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.8);
}

.autobgv-hero__badge-icon {
	display: block;
	width: 1rem;
	height: 1rem;
}

/* h-hero mt-6 w-full max-w-5xl !text-[clamp 2rem/4.6vw/4.2rem] */
.autobgv-hero__title.h-hero {
	margin-top: 1.5rem;
	width: 100%;
	max-width: 64rem;
	font-size: clamp(2rem, 4.6vw, 4.2rem);
}

/* mt-6 */
.autobgv-hero__lead-wrap {
	margin-top: 1.5rem;
}

/* mx-auto max-w-2xl text-base font-semibold text-white/65 md:text-lg */
.autobgv-hero__lead {
	margin: 0 auto;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.65);
}

@media (min-width: 768px) {
	.autobgv-hero__lead {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}

/* mt-9 flex flex-wrap items-center justify-center gap-4 */
.autobgv-hero__ctas {
	margin-top: 2.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

/* Phones: the two buttons are a size smaller and share one row, each with
   comfortable room left and right of its label. */
@media (max-width: 767px) {
	.autobgv-hero__ctas {
		flex-wrap: nowrap;
		gap: 0.625rem;
	}

	.autobgv-hero__ctas .pill {
		padding: 0.7rem 1.1rem;
		font-size: 0.8125rem;
	}
}

/* mt-16 grid w-full max-w-3xl grid-cols-2 gap-x-6 gap-y-8 border-t border-white/10 pt-10 sm:grid-cols-4 */
.autobgv-hero__stats {
	margin-top: 4rem;
	display: grid;
	width: 100%;
	max-width: 48rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 2.5rem;
}

@media (min-width: 640px) {
	.autobgv-hero__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* font-display text-2xl font-bold tracking-tight md:text-3xl */
.autobgv-hero__stat-value {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

@media (min-width: 768px) {
	.autobgv-hero__stat-value {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

/* mt-1 text-xs font-semibold text-white/50 */
.autobgv-hero__stat-label {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
}

/* Where "See How It Works" lands: the top of the next section. */
.autobgv-hero__anchor {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

/* sections/blog-hero.css */
/**
 * Blog hero — the inline hero of app/blog/page.tsx.
 *
 *   section  blog-hero-bg pb-10 pt-28 text-center text-white md:pb-14 md:pt-32
 *   label    label text-onv
 *   title    h-hero mx-auto mt-5 max-w-4xl !text-[clamp 1.9rem/4.3vw/4.4rem]
 *
 * The artwork itself is .blog-hero-bg in theme.css.
 */

.digiops-bloghero {
	padding: 7rem 0 2.5rem;
	line-height: 1.5;
	text-align: center;
	color: #fff;
}

@media (min-width: 768px) {
	.digiops-bloghero {
		padding: 8rem 0 3.5rem;
	}
}

.digiops-bloghero__label {
	color: var(--color-onv);
}

.digiops-bloghero__title {
	margin: 1.25rem auto 0;
	max-width: 56rem;
	font-size: clamp(1.9rem, 4.3vw, 4.4rem);
}

/* sections/blog-index.css */
/**
 * Blog index — components/BlogIndex.tsx.
 *
 * Every value is the Tailwind utility the component used, resolved:
 *
 *   section        bg-[#f7effb] pb-24 pt-16 md:pb-32 md:pt-20
 *   feature        workcard block
 *   feature-grid   grid gap-0 overflow-hidden rounded-3xl bg-lavender md:grid-cols-[33.75%_66.25%]
 *   feature-art    relative min-h-64 overflow-hidden  (workcover absolute inset-0)
 *   badge          absolute left-6 top-6 rounded-full bg-violet px-4 py-1.5 text-xs font-bold text-white
 *   feature-copy   flex flex-col justify-center bg-white px-8 py-[0.9rem] md:px-12 md:py-[1.35rem]
 *   feature-meta   flex items-center gap-3 text-xs font-bold text-ink/50   (tagpill !bg-white)
 *   feature-title  worktitle h-md mt-5 !text-[clamp 21px/2.314vw/32.2px]
 *   feature-excerpt mt-4 leading-relaxed text-ink/60
 *   feature-cta    u-sweep mt-6 inline-flex w-fit items-center gap-2 text-sm font-bold text-violet
 *   grid           mt-12 grid gap-x-8 gap-y-8 sm:grid-cols-2 lg:grid-cols-3
 *   card           workcard group block overflow-hidden rounded-3xl border border-tint/60 bg-white
 *                  shadow-[0_20px_50px_-35px_rgba(44,46,126,0.35)]
 *   card-body      p-7 md:p-8
 *   card-meta      flex items-center gap-2
 *   card-cat       text-xs font-bold uppercase tracking-[0.14em] text-violet
 *   card-dot       text-ink/25
 *   card-date      text-xs font-semibold text-ink/45
 *   card-title     worktitle font-display mt-4 line-clamp-3 min-h-[75px] text-xl font-bold
 *                  leading-tight tracking-tight text-ink
 *   card-excerpt   mt-2 line-clamp-2 min-h-[46px] text-sm leading-relaxed text-ink/60
 *   card-art       relative h-[7.65rem] overflow-hidden md:h-[8.5rem]
 *   card-scrim     pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-t from-ink/75 to-transparent
 *   card-cta       absolute bottom-3 right-4 inline-flex items-center gap-1.5 text-xs font-bold text-white
 *   card-arrow     transition-transform duration-300 group-hover:translate-x-1
 *   pager          mt-14 flex items-center justify-center gap-3
 *   step           h-10 w-10 rounded-full border border-tint text-ink hover:border-violet hover:text-violet
 *                  disabled:opacity-30
 *   num            h-10 w-10 rounded-full text-sm font-bold; current bg-violet text-white,
 *                  else text-ink/60 hover:bg-lavender
 */

.digiops-blogindex {
	background: #f7effb;
	padding: 4rem 0 6rem;
	color: var(--color-ink);
	line-height: 1.5;
}

@media (min-width: 768px) {
	.digiops-blogindex {
		padding: 5rem 0 8rem;
	}
}

.digiops-blogindex a,
.digiops-blogindex__grid a {
	text-decoration: none;
	color: inherit;
}

.digiops-blogindex p,
.digiops-blogindex__grid p {
	margin: 0;
}

/*
 * The rules above and the card rules below carry a second selector on
 * .digiops-blogindex__grid so the grid is self-contained: single.php reuses it
 * for "keep reading", outside this section, and a card that only worked inside
 * .digiops-blogindex would lose its resets there.
 */

/* ---------- featured ---------- */

.digiops-blogindex__feature {
	display: block;
}

.digiops-blogindex__feature-grid {
	display: grid;
	gap: 0;
	overflow: hidden;
	border-radius: 1.5rem;
	background: var(--color-lavender);
}

@media (min-width: 768px) {
	.digiops-blogindex__feature-grid {
		grid-template-columns: 33.75% 66.25%;
	}
}

/* min-h-64 is the mobile floor: below md the columns are separate rows and
   this column's only children are absolutely positioned. */
.digiops-blogindex__feature-art {
	position: relative;
	min-height: 16rem;
	overflow: hidden;
}

.digiops-blogindex__cover {
	position: absolute;
	inset: 0;
}

.digiops-blogindex__cover img,
.digiops-blogindex__card-art img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.digiops-blogindex__badge {
	position: absolute;
	left: 1.5rem;
	top: 1.5rem;
	border-radius: 999px;
	background: var(--color-violet);
	padding: 0.375rem 1rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: #fff;
}

.digiops-blogindex__feature-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #fff;
	padding: 0.9rem 2rem;
}

@media (min-width: 768px) {
	.digiops-blogindex__feature-copy {
		padding: 1.35rem 3rem;
	}
}

.digiops-blogindex__feature-meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.5);
}

.digiops-blogindex .digiops-blogindex__tag {
	background: #fff;
	line-height: 1.3333;
}

.digiops-blogindex__feature-title {
	margin-top: 1.25rem;
	font-size: clamp(21px, 2.314vw, 32.2px);
}

.digiops-blogindex__feature-excerpt {
	margin-top: 1rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-blogindex p.digiops-blogindex__feature-excerpt {
	margin-top: 1rem;
}

.digiops-blogindex__feature-cta {
	margin-top: 1.5rem;
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--color-violet);
}

/* ---------- grid ---------- */

.digiops-blogindex__grid {
	margin-top: 3rem;
	display: grid;
	gap: 2rem;
}

@media (min-width: 640px) {
	.digiops-blogindex__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.digiops-blogindex__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.digiops-blogindex__card {
	display: block;
	overflow: hidden;
	border-radius: 1.5rem;
	border: 1px solid rgba(217, 218, 245, 0.6);
	background: #fff;
	box-shadow: 0 20px 50px -35px rgba(44, 46, 126, 0.35);
}

.digiops-blogindex__card-body {
	padding: 1.75rem;
}

@media (min-width: 768px) {
	.digiops-blogindex__card-body {
		padding: 2rem;
	}
}

.digiops-blogindex__card-meta {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1rem;
	line-height: 1.5rem;
}

.digiops-blogindex p.digiops-blogindex__card-cat,
.digiops-blogindex__grid p.digiops-blogindex__card-cat {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--color-violet);
}

.digiops-blogindex__card-dot {
	color: rgba(27, 28, 58, 0.25);
}

.digiops-blogindex p.digiops-blogindex__card-date,
.digiops-blogindex__grid p.digiops-blogindex__card-date {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.45);
}

.digiops-blogindex__card-title {
	margin: 1rem 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	min-height: 75px;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

.digiops-blogindex p.digiops-blogindex__card-excerpt,
.digiops-blogindex__grid p.digiops-blogindex__card-excerpt {
	margin-top: 0.5rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	min-height: 46px;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-blogindex__card-art {
	position: relative;
	height: 7.65rem;
	overflow: hidden;
}

@media (min-width: 768px) {
	.digiops-blogindex__card-art {
		height: 8.5rem;
	}
}

.digiops-blogindex__card-scrim {
	pointer-events: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3.5rem;
	background: linear-gradient(to top, rgba(27, 28, 58, 0.75), transparent);
}

.digiops-blogindex__card-cta {
	position: absolute;
	bottom: 0.75rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: #fff;
}

.digiops-blogindex__card-arrow {
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-blogindex__card:hover .digiops-blogindex__card-arrow {
	transform: translateX(0.25rem);
}

/* ---------- pagination ---------- */

.digiops-blogindex__pager {
	margin-top: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}

.digiops-blogindex__step,
.digiops-blogindex__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 999px;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-blogindex .digiops-blogindex__step {
	border: 1px solid var(--color-tint);
	color: var(--color-ink);
}

.digiops-blogindex .digiops-blogindex__step:hover {
	border-color: var(--color-violet);
	color: var(--color-violet);
}

.digiops-blogindex__step.is-disabled {
	pointer-events: none;
	opacity: 0.3;
}

.digiops-blogindex .digiops-blogindex__num {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-blogindex .digiops-blogindex__num:hover {
	background: var(--color-lavender);
}

.digiops-blogindex .digiops-blogindex__num.is-current {
	background: var(--color-violet);
	color: #fff;
}

/* sections/blog-section.css */
/**
 * Section: blog-section — the home page blog bento.
 *
 * Ported from components/home/BlogSection.tsx. The Tailwind utility strings
 * from the JSX are written out here as real CSS because the theme does not
 * load Tailwind; the shared surfaces the original used (.wash-indigo,
 * .wash-indigo-glow, .container-x, .label, .h-xl, .pill) already live in
 * theme.css and are reused by name.
 *
 * Tailwind values kept literal so the two can be compared:
 *   py-16 / md:py-24 = 4rem / 6rem      gap-10 / lg:gap-14 = 2.5rem / 3.5rem
 *   rounded-2xl = 1rem                  rounded-xl = 0.75rem
 *   min-h-44 / 52 / 60 = 11 / 13 / 15rem
 */

/* ---------- band ---------- */

.digiops-blogfeed {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 4rem;
}

@media (min-width: 768px) {
	.digiops-blogfeed {
		padding-block: 6rem;
	}
}

/* ambient glows, kept behind the content (the JSX used -z-10 inside an
   isolated stacking context) */
.digiops-blogfeed__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* ---------- reveal motion profile ---------- */

/*
 * components/Reveal.tsx tweens y: 36 -> 0 and opacity 0 -> 1 over 1s with
 * GSAP's power3.out. The theme's shared profile is a shorter, quicker move
 * (translateY(18px) over 0.7s on cubic-bezier(0.22, 1, 0.36, 1)), so the
 * original's numbers are restored here — scoped to this section, because
 * theme.css is not ours to change and the other sections should keep the
 * profile they were reviewed with.
 *
 * power3.out is GSAP's quartic ease-out (1 - (1 - t)^4); its CSS equivalent
 * is cubic-bezier(0.165, 0.84, 0.44, 1).
 *
 * The .is-revealed rule below is load-bearing: this block is more specific
 * than theme.css's landing rule, so without it every revealed element here
 * would stay pinned 36px down. Likewise the reduced-motion block at the foot
 * of this file, which is what keeps the section visible with motion off.
 */
.js .digiops-blogfeed [data-digiops-reveal] {
	transform: translateY(36px);
	transition:
		opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1),
		transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.js .digiops-blogfeed [data-digiops-reveal].is-revealed {
	transform: none;
}

/* ---------- 40 / 60 split ---------- */

.digiops-blogfeed__inner {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.digiops-blogfeed__inner {
		grid-template-columns: 2fr 3fr;
		align-items: center;
		gap: 3.5rem;
	}
}

/* min-w-0, so the card grid can never push the split out of shape */
.digiops-blogfeed__intro {
	min-width: 0;
}

.digiops-blogfeed__eyebrow {
	margin: 0;
	color: var(--color-violet);
}

/* the JSX forced a smaller size than .h-xl's own clamp */
.digiops-blogfeed__heading {
	margin: 1rem 0 0;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

.digiops-blogfeed__body {
	margin: 1.5rem 0 0;
	max-width: 24rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-blogfeed__ctawrap {
	margin-top: 2rem;
}

/* components/Magnetic.tsx is now a plain `inline-block` span — the cursor-
   follow tween was removed upstream ("buttons are now meant to stay put"),
   and only the shrink-wrapping wrapper is left. Ported literally so the pill
   sizes to its own content rather than stretching across the column. */
.digiops-blogfeed__magnetic {
	display: inline-block;
}

/* ---------- bento grid ---------- */

.digiops-blogfeed__grid {
	display: grid;
	min-width: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

@media (min-width: 768px) {
	.digiops-blogfeed__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.digiops-blogfeed__col {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 1rem;
}

/* the third column fills the row on mobile, then becomes a normal column */
.digiops-blogfeed__col--wide {
	grid-column: span 2;
}

@media (min-width: 768px) {
	.digiops-blogfeed__col--wide {
		grid-column: span 1;
	}
}

/* The original put <Reveal stagger> on the grid, which tweens its direct
   children — the three columns — with GSAP stagger: 0.09, i.e. 0s / 0.09s /
   0.18s. These carry the section class so they out-rank the `transition`
   shorthand above (which would otherwise zero the delay) whatever order the
   rules end up in. */
.js .digiops-blogfeed .digiops-blogfeed__col:nth-child(2) {
	transition-delay: 0.09s;
}

.js .digiops-blogfeed .digiops-blogfeed__col:nth-child(3) {
	transition-delay: 0.18s;
}

/* Phones: one article per screen width, the rest in a sideways swipe. The
   three columns step aside (display: contents) so every card becomes a direct
   child of the scrolling row; tablet and desktop keep the column layout. */
@media (max-width: 767px) {
	.digiops-blogfeed__grid {
		display: flex;
		gap: 1rem;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.digiops-blogfeed__grid::-webkit-scrollbar {
		display: none;
	}

	.digiops-blogfeed__col,
	.digiops-blogfeed__col--wide {
		display: contents;
	}

	.digiops-blogfeed__card {
		flex: 0 0 100%;
		scroll-snap-align: start;
		min-height: 18rem;
	}
}

/* Phones: the "Read the blog" button is hidden; the carousel below is the
   way into the articles there. It stays on tablet and desktop. */
@media (max-width: 767px) {
	.digiops-blogfeed__ctawrap {
		display: none;
	}
}

/* The dots under the phone carousel (assets/js/sections/blog-section.js adds
   them). Hidden from 768px up, where the cards are columns. */
.digiops-blogfeed__dots {
	display: none;
}

@media (max-width: 767px) {
	.digiops-blogfeed__dots {
		display: flex;
		justify-content: center;
		gap: 0.5rem;
		margin-top: 1.25rem;
	}

	.digiops-blogfeed__dot {
		width: 0.5rem;
		height: 0.5rem;
		padding: 0;
		border: 0;
		border-radius: 999px;
		background: rgba(66, 69, 180, 0.25);
		cursor: pointer;
		transition: width 0.3s ease, background-color 0.3s ease;
	}

	.digiops-blogfeed__dot.is-active {
		width: 1.5rem;
		background: var(--color-violet);
	}
}

/* ---------- cards, shared ---------- */

.digiops-blogfeed__card {
	display: flex;
	overflow: hidden;
	border-radius: 1rem;
	color: var(--color-ink);
	text-decoration: none;
}

/* tones lifted from the reference palette */
.digiops-blogfeed__card--tone-neutral {
	background: #eceae4;
}

.digiops-blogfeed__card--tone-mint {
	background: #d5ecdd;
}

.digiops-blogfeed__card--tone-lavender {
	background: #dcd6f4;
}

.digiops-blogfeed__card--tone-peach {
	background: #f7bd93;
}

.digiops-blogfeed__card--short {
	min-height: 11rem;
}

.digiops-blogfeed__card--tall {
	min-height: 13rem;
}

@media (min-width: 768px) {
	.digiops-blogfeed__card--tall {
		min-height: 15rem;
	}
}

/* ---------- cover card ---------- */

.digiops-blogfeed__card--cover {
	position: relative;
}

.digiops-blogfeed__cover-art {
	position: absolute;
	inset: 0;
	display: block;
	transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-blogfeed__card--cover:hover .digiops-blogfeed__cover-art,
.digiops-blogfeed__card--cover:focus-visible .digiops-blogfeed__cover-art {
	transform: scale(1.05);
}

.digiops-blogfeed__cover-art img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.digiops-blogfeed__cover-fallback {
	display: flex;
	height: 100%;
	width: 100%;
	align-items: center;
	justify-content: center;
}

.digiops-blogfeed__cover-fallback svg {
	height: 50%;
	width: auto;
}

/* the title chip sits at the bottom of the row-flex card (mt-auto) */
.digiops-blogfeed__chipwrap {
	position: relative;
	margin-top: auto;
	width: 100%;
	padding: 1rem;
}

.digiops-blogfeed__chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.9);
	padding: 0.75rem;
	/* backdrop-blur-sm on Tailwind v4 (the version this project is on) is
	   --blur-sm = 8px; 4px is v3's value, and v4's --blur-xs. */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.digiops-blogfeed__chip-text {
	min-width: 0;
}

.digiops-blogfeed__chip-cat {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: var(--color-deep);
}

.digiops-blogfeed__chip-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 0.875rem;
	line-height: 1.375;
	font-weight: 700;
	color: var(--color-ink);
}

.digiops-blogfeed__arrow {
	margin-left: auto;
	display: flex;
	height: 1.75rem;
	width: 1.75rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--color-violet);
	color: #fff;
}

/* ---------- text card ---------- */

.digiops-blogfeed__card--text {
	flex-direction: column;
	padding: 1.25rem;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
	.digiops-blogfeed__card--text {
		padding: 1.5rem;
	}
}

.digiops-blogfeed__card--text:hover,
.digiops-blogfeed__card--text:focus-visible {
	transform: translateY(-0.25rem);
}

.digiops-blogfeed__cat {
	display: block;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(27, 28, 58, 0.5);
}

.digiops-blogfeed__title {
	font-family: var(--font-display);
	margin: 0.5rem 0 0;
	font-size: 1.125rem;
	line-height: 1.375;
	font-weight: 700;
	letter-spacing: -0.025em;
}

@media (min-width: 768px) {
	.digiops-blogfeed__title {
		font-size: 1.25rem;
	}
}

.digiops-blogfeed__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-blogfeed__read {
	display: block;
	margin-top: auto;
	padding-top: 1rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	.digiops-blogfeed__cover-art,
	.digiops-blogfeed__card--text {
		transition: none;
	}

	/* Out-ranks the restored 36px profile above, so nothing in this section is
	   left translated off its place when motion is off. */
	.js .digiops-blogfeed [data-digiops-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.js .digiops-blogfeed .digiops-blogfeed__col:nth-child(2),
	.js .digiops-blogfeed .digiops-blogfeed__col:nth-child(3) {
		transition-delay: 0s;
	}
}

/* sections/blog-single.css */
/**
 * Single post — the port of app/blog/[slug]/page.tsx.
 *
 * The theme does not load Tailwind, so the utility strings from the JSX are
 * written out here as real CSS. Every value is the literal Tailwind value, so
 * the two can be read side by side:
 *
 *   pt-40 / md:pt-48 = 10rem / 12rem      pb-24 = 6rem
 *   max-w-3xl = 48rem                     max-w-4xl = 56rem
 *   gap-3 = 0.75rem                       gap-8 = 2rem
 *   mt-2 / 3 / 4 = 0.5 / 0.75 / 1rem      mt-6 / 8 = 1.5 / 2rem
 *   mt-10 / 12 / 14 = 2.5 / 3 / 3.5rem    mb-4 / 6 = 1 / 1.5rem
 *   p-8 = 2rem                            py-16 / md:py-20 = 4rem / 5rem
 *   rounded-2xl = 1rem                    rounded-3xl = 1.5rem
 *   text-xs / sm = 0.75 / 0.875rem        text-lg / xl = 1.125 / 1.25rem
 *   leading-snug / relaxed = 1.375 / 1.625
 *   tracking-tight = -0.025em
 *
 * ink/50, ink/55, ink/60 and ink/75 are --color-ink (#1b1c3a) at those
 * alphas; bg-lavender and bg-tint are --color-lavender and --color-tint.
 *
 * Shared classes are reused by name and are NOT redefined here: .container-x,
 * .h-xl, .label, .tagpill, .u-sweep, .text-violet, .workcard/.worktitle,
 * .wm/.wm-i (the word-mask reveal behind digiops_text_reveal) and the
 * .digiops-ctafinale band that closes the page.
 */

/* ============================================================
   Reveal motion profile
   ------------------------------------------------------------
   components/Reveal.tsx tweens y: 36 -> 0 and opacity 0 -> 1 over 1s on
   GSAP's power3.out. theme.css ships a shorter, quicker house profile
   (18px over 0.7s), so the original's numbers are restored here, scoped
   to this page — theme.css is not ours to change.

   power3.out is the cubic ease-out 1 - (1 - t)^3; cubic-bezier(0.165,
   0.84, 0.44, 1) is its CSS twin.

   The .is-revealed rule is load-bearing: this block outranks theme.css's
   landing rule, so without it every revealed element here would stay
   pinned 36px down for good.
   ============================================================ */

.js .digiops-post [data-digiops-reveal],
.js .digiops-postread [data-digiops-reveal] {
	transform: translateY(36px);
	transition:
		opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1),
		transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.js .digiops-post [data-digiops-reveal].is-revealed,
.js .digiops-postread [data-digiops-reveal].is-revealed {
	transform: none;
}

/* ============================================================
   Article shell — article.container-x.pb-24.pt-40.md:pt-48
   ============================================================ */

.digiops-post {
	padding-bottom: 6rem;
}

/* The reading column: mx-auto max-w-3xl. */
.digiops-post__col {
	max-width: 48rem;
	margin-inline: auto;
}

/* ---------- the head band ----------
   A pale blue plate behind the meta row, the title and the lede, run edge to
   edge so it reads as the page's own header rather than a tinted box. The
   band is a plain full-width element and the text inside it is .container-x,
   so the title starts and ends exactly where the site header's logo and
   "Let's talk" button do.

   The original ran pt-40 / md:pt-48 (10rem / 12rem) of empty white above the
   meta row. The band carries that run-up now, and a shorter one: the first
   4rem of it sits behind the fixed header. */
.digiops-post__band {
	background: #f1f5fd;
	/* The header is 4rem tall, fixed, and sits over the top of this band —
	   so the top padding is that 4rem plus the same gap the bottom has, and
	   the air above the meta row ends up equal to the air under the byline. */
	padding-top: 6.5rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
	.digiops-post__band {
		padding-top: 7rem;
		padding-bottom: 3rem;
	}
}

/* ---------- byline ----------
   "Updated on <date> | Author by DIGIOPS", one line under the band. The pipe
   is a separator, not a word, so it is aria-hidden in the markup and spaced
   here rather than padded with blanks in the string. */
.digiops-post__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.85rem;
	margin: 1.75rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.45;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.55);
}

/* Each half of the byline sits on its own chip: semi-transparent white, so it
   lifts off the band without becoming a solid white box on a pale blue plate
   — the band still reads through it. */
.digiops-post__byline-item {
	background: rgba(255, 255, 255, 0.6);
	border-radius: 0.375rem;
	padding: 5px 10px;
}

.digiops-post__byline-sep {
	color: rgba(27, 28, 58, 0.3);
}

/* Narrow enough and the two chips stack, which would leave the pipe hanging
   off the end of the first row with nothing after it. The chips already read
   as two separate things once they are on their own lines. */
@media (max-width: 34rem) {
	.digiops-post__byline-sep {
		display: none;
	}
}

/* Clear air between the band and the top of the sidebar and cover. */
.digiops-post__main {
	margin-top: 3rem;
}

/* ---------- meta row ----------
   flex flex-wrap items-center gap-3 text-xs font-bold text-ink/50 */

.digiops-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	line-height: 1.333;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.5);
}

/* The back link keeps .u-sweep's underline and .text-violet's colour; only
   the reset of the anchor's own decoration belongs to this page. */
.digiops-post__back {
	text-decoration: none;
	white-space: nowrap;
}

/* The category was a plain span in the source. It is a link here, because a
   category in WordPress has somewhere to go — the pill is unchanged. */
.digiops-post__meta .tagpill:hover {
	background: var(--color-tint);
}

.digiops-post__meta time {
	font-variant-numeric: tabular-nums;
}

/* ---------- title and lede ---------- */

/* The same size every other page header carries — About Us, each service
   page and the blog index all set .h-hero to this clamp — so a post's header
   reads at the same scale as the rest of the site. Line height, weight and
   tracking come from .h-hero itself. */
.digiops-post__title {
	margin-top: 1.25rem;
	font-size: clamp(1.9rem, 4.3vw, 4.4rem);
}

/* div.mt-6 wrapping p.text-lg.font-semibold.leading-relaxed.text-ink/60 */
.digiops-post__lede {
	margin-top: 1.5rem;
}

.digiops-post__lede p {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* ============================================================
   Cover panel — mx-auto mt-12 max-w-4xl, then a 21:9 tinted
   panel with the mark centred at two thirds of its height
   ============================================================ */

.digiops-post__figure {
	max-width: 56rem;
	margin-top: 3rem;
	margin-inline: auto;
}

/* In the sidebar layout the cover is the top of the content column, so it
   takes that column's width and its left edge rather than centring itself. */
@media (min-width: 1280px) {
	.digiops-post__content > .digiops-post__figure {
		max-width: none;
		margin-top: 0;
		margin-inline: 0;
	}
}

.digiops-post__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	border-radius: 1.5rem;
}

/* POSTS alternated `tint: "a" | "b"` between Lavender and Tint. */
.digiops-post__frame--a {
	background: var(--color-lavender);
}

.digiops-post__frame--b {
	background: var(--color-tint);
}

/* LogoMark at h-2/3 w-auto, filled rgba(66,69,180,0.15) in the markup. */
.digiops-post__mark {
	height: 66.6667%;
	width: auto;
}

/* A real featured image covers the panel; the tint underneath still shows
   while it loads, so the frame is never a white hole. */
.digiops-post__cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* ============================================================
   Body — mx-auto mt-14 max-w-3xl
   ------------------------------------------------------------
   The original rendered a fixed BODY array of h2/p pairs; the real
   post content stands in its place, so every element the editor can
   produce is given the same measure and rhythm those two had:
   1.05rem / 1.85 at ink/75, headings on .h-md's scale at 700 in
   Deep Indigo, mt-10 / mb-4.
   ============================================================ */

/* The reading measure. Centred on its own; in the sidebar layout below it
   keeps the width but moves to the content column's left edge. */
.digiops-post__body {
	max-width: 48rem;
	margin-top: 3.5rem;
	margin-inline: auto;
}

.digiops-post__prose {
	font-size: 1.05rem;
	line-height: 1.85;
	color: rgba(27, 28, 58, 0.75);
}

.digiops-post__prose > :first-child {
	margin-top: 0;
}

.digiops-post__prose > :last-child {
	margin-bottom: 0;
}

/* p.mb-6.text-[1.05rem].leading-[1.85].text-ink/75 */
.digiops-post__prose p {
	margin: 0 0 1.5rem;
}

/* h2.h-md.mb-4.mt-10.!font-bold.text-deep — .h-md is 600, the ! made it 700. */
.digiops-post__prose h2 {
	font-family: var(--font-display);
	font-size: clamp(1.35rem, 2.2vw, 1.9rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--color-deep);
	margin: 2.5rem 0 1rem;
}

/* The source had no h3–h6; they step down from the h2 on the same rules so a
   deeper outline stays in the same voice. */
.digiops-post__prose h3 {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1.7vw, 1.45rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--color-deep);
	margin: 2rem 0 0.75rem;
}

.digiops-post__prose h4,
.digiops-post__prose h5,
.digiops-post__prose h6 {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--color-deep);
	margin: 1.75rem 0 0.6rem;
}

/* Lists carry the paragraph's measure and rhythm, with violet markers. */
.digiops-post__prose ul,
.digiops-post__prose ol {
	margin: 0 0 1.5rem;
	padding-left: 1.35rem;
}

.digiops-post__prose li {
	margin-bottom: 0.5rem;
}

.digiops-post__prose li::marker {
	color: var(--color-violet);
	font-weight: 700;
}

.digiops-post__prose li > ul,
.digiops-post__prose li > ol {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

/* Links are underlined for the whole run — a body link has to be findable
   mid-paragraph, where .u-sweep's hover-only rule would hide it — and
   deepen on hover the way every violet control on the site does. */
.digiops-post__prose a {
	color: var(--color-violet);
	font-weight: 600;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 100% 1.5px;
	background-position: 0 100%;
	transition: color 0.3s ease;
}

.digiops-post__prose a:hover {
	color: var(--color-deep);
}

.digiops-post__prose strong,
.digiops-post__prose b {
	font-weight: 700;
	color: var(--color-ink);
}

/* Quote: the site's violet left rule, set on the display face at the lede's
   size so it reads as a lift out of the column rather than a new voice. */
.digiops-post__prose blockquote {
	margin: 2rem 0;
	padding-left: 1.5rem;
	border-left: 2px solid var(--color-violet);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: -0.01em;
	color: var(--color-deep);
}

.digiops-post__prose blockquote p:last-child {
	margin-bottom: 0;
}

.digiops-post__prose blockquote cite {
	display: block;
	margin-top: 0.75rem;
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.55);
}

/* Media takes the cover panel's radius. */
.digiops-post__prose figure {
	margin: 2rem 0;
}

.digiops-post__prose img,
.digiops-post__prose video,
.digiops-post__prose iframe {
	border-radius: 1rem;
	display: block;
	max-width: 100%;
}

.digiops-post__prose figcaption {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.6;
	color: rgba(27, 28, 58, 0.55);
}

/* Wide blocks reach out to the cover panel's 56rem, and no further. */
@media (min-width: 1024px) {
	.digiops-post__prose .alignwide,
	.digiops-post__prose .alignfull {
		margin-inline: -4rem;
	}
}

.digiops-post__prose .alignfull img,
.digiops-post__prose .alignwide img {
	width: 100%;
}

.digiops-post__prose code {
	padding: 0.15em 0.4em;
	border-radius: 0.35rem;
	background: var(--color-lavender);
	color: var(--color-deep);
	font-size: 0.9em;
}

.digiops-post__prose pre {
	margin: 2rem 0;
	padding: 1.25rem;
	border-radius: 1rem;
	background: var(--color-ink);
	color: #fff;
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.7;
}

.digiops-post__prose pre code {
	padding: 0;
	background: none;
	color: inherit;
}

.digiops-post__prose hr {
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--color-tint);
}

.digiops-post__prose table {
	width: 100%;
	margin: 2rem 0;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.digiops-post__prose th,
.digiops-post__prose td {
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--color-tint);
	text-align: left;
}

.digiops-post__prose th {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-deep);
}

/* Paged posts. */
.digiops-post__pagelinks {
	margin-top: 2rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.55);
}

.digiops-post__pagelinks a {
	color: var(--color-violet);
	text-decoration: none;
}

/* ---------- tags ----------
   Not in the source — WordPress has tags and they belong to the post, so
   they sit at the foot of the column on the same pills the meta row uses. */

.digiops-post__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.digiops-post__tags a {
	text-decoration: none;
}

/* ---------- author card ----------
   Reveal.mt-12.rounded-2xl.bg-lavender.p-8 */

.digiops-post__author {
	margin-top: 3rem;
	padding: 2rem;
	border-radius: 1rem;
	background: var(--color-lavender);
}

/* p.font-display.text-lg.font-semibold.tracking-tight.text-deep */
.digiops-post__author-name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.4;
	color: var(--color-deep);
}

/* p.mt-2.text-sm.font-semibold.leading-relaxed.text-ink/60 */
.digiops-post__author-note {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* ============================================================
   Keep reading — section.border-t.border-tint
   ============================================================ */

/*
 * theme.css pads every direct section child of .site-main by --section-pad.
 * This band brings its own py-16 / md:py-20, exactly as the original did, so
 * the shared padding is cleared the same way .digiops-page-hero clears it.
 */
.site-main > .digiops-postread {
	padding-block: 0;
}

.digiops-postread {
	border-top: 1px solid var(--color-tint);
}

.digiops-postread__inner {
	padding-block: 4rem;
}

@media (min-width: 768px) {
	.digiops-postread__inner {
		padding-block: 5rem;
	}
}

/* The "keep reading" row is the blog index's three-column grid and its cards,
   reused by class — see single.php. Nothing to style here beyond the spacing
   the grid does not carry itself. */

/* ============================================================
   Reduced motion
   ------------------------------------------------------------
   theme.css already lands every reveal when motion is unwelcome, but the
   profile above is more specific than its rule, so it has to be undone
   here too — otherwise this page alone would stay 36px down.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.js .digiops-post [data-digiops-reveal],
	.js .digiops-postread [data-digiops-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   On-this-page index — the left sidebar
   ------------------------------------------------------------
   Two columns: the index, then everything the reader scrolls through. The
   index is the first thing in the row, so it starts level with the top of the
   cover image rather than partway down the article, and the cover and the
   text share the second column's left edge.

   Below 1280px there is no room for a sidebar beside a readable column, so
   the rail is not rendered at all rather than pushed above the article, where
   it would sit between the cover and the first paragraph and read as content.
   ============================================================ */

.digiops-post__index {
	display: none;
}

@media (min-width: 1280px) {
	.digiops-post__main {
		display: grid;
		grid-template-columns: 17rem minmax(0, 1fr);
		align-items: start;
		column-gap: 3.5rem;
	}

	.digiops-post__index {
		display: block;
		/* 4rem of fixed header, then the same gap a heading gets when it is
		   scrolled to. */
		position: sticky;
		top: 6rem;
		max-height: calc(100vh - 8rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding-right: 0.75rem;
	}

	/* The text keeps a readable measure inside the wider column, against the
	   same left edge as the cover above it. */
	.digiops-post__content > .digiops-post__body {
		max-width: 48rem;
		margin-inline: 0;
	}
}

.digiops-post__index-title {
	margin: 0 0 1rem;
	font-size: 0.875rem;
	letter-spacing: 0.18em;
	color: rgba(27, 28, 58, 0.45);
}

.digiops-post__index-list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--color-tint);
}

/* Sized for reading across the room rather than as fine print, but kept a
   clear step below the body's H2s so the navigation never outshouts the
   headings it points at. */
.digiops-post__index-link {
	display: block;
	padding: 0.3rem 0 0.3rem 1rem;
	margin-left: -1px;
	border-left: 3px solid transparent;
	font-size: 1.125rem;
	line-height: 1.35;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.55);
	text-decoration: none;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.digiops-post__index-link:hover,
.digiops-post__index-link:focus-visible {
	color: var(--color-deep);
}

/* Set by assets/js/sections/blog-single.js as headings pass the top of the
   viewport. Without the script every link simply stays in its rest state and
   the index still works as a list of links. */
.digiops-post__index-link.is-current {
	border-left-color: var(--color-violet);
	color: var(--color-violet);
}

/* Anchors land under the fixed header otherwise. */
.digiops-post__prose h2 {
	scroll-margin-top: 6rem;
}

/* sections/careers-hero.css */
/**
 * Careers hero — app/careers/page.tsx, first <section>.
 * The artwork itself is theme.css's .training-hero-bg.
 */

/* relative isolate overflow-hidden text-white; line-height 1.5 is the
   original's root line-height (Tailwind preflight) */
.digiops-careers-hero {
	line-height: 1.5;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
}

/* container-x pb-14 pt-32 md:pb-20 md:pt-40 */
.digiops-careers-hero__inner {
	padding-top: 8rem;
	padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
	.digiops-careers-hero__inner {
		padding-top: 10rem;
		padding-bottom: 5rem;
	}
}

/* flex flex-wrap items-center gap-2 text-xs font-bold uppercase tracking-widest text-white/50 */
.digiops-careers-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	line-height: calc(1 / 0.75);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.5);
}

/* transition-colors hover:text-white */
.digiops-careers-hero__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-careers-hero__crumbs a:hover {
	color: #fff;
}

.digiops-careers-hero__crumb-current {
	color: #fff;
}

/* h-xl mt-5 max-w-3xl !text-[clamp 2rem/4.5vw/3rem] */
.digiops-careers-hero__title.h-xl {
	margin-top: 1.25rem;
	max-width: 48rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* mt-5 max-w-2xl text-base font-semibold leading-relaxed text-white/70 md:text-lg */
.digiops-careers-hero__body {
	margin: 1.25rem 0 0;
	max-width: 42rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.7);
}

@media (min-width: 768px) {
	.digiops-careers-hero__body {
		font-size: 1.125rem;
	}
}

/* mt-6 flex flex-wrap gap-2.5 */
.digiops-careers-hero__tags {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

/* tagpill !bg-white */
.digiops-careers-hero__tag.tagpill {
	background: #fff;
}

/* <Reveal delay={…}> — the delay rides on the shared reveal transition */
.js .digiops-careers-hero__delay[data-digiops-reveal] {
	transition-delay: var(--careers-d, 0s);
}

/* sections/careers-jobs.css */
/**
 * Careers — job cards and the application card.
 * app/careers/page.tsx (second <section>), components/careers/JobCard.tsx and
 * components/careers/CareerApplyForm.tsx, utility by utility.
 * .acc-panel, .label, .tagpill and .pill come from theme.css.
 */

/* bg-white; the original's root line-height (Tailwind preflight) is 1.5 */
.digiops-careers-jobs {
	background: #fff;
	line-height: 1.5;
}

.digiops-careers-jobs [hidden] {
	display: none !important;
}

/* container-x py-16 md:py-24 */
.digiops-careers-jobs__inner {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

@media (min-width: 768px) {
	.digiops-careers-jobs__inner {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

/* grid gap-10 lg:grid-cols-[1.5fr_1fr] lg:gap-14 */
.digiops-careers-jobs__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.digiops-careers-jobs__grid {
		grid-template-columns: 1.5fr 1fr;
		gap: 3.5rem;
	}
}

/* flex flex-col gap-6 (both columns) */
.digiops-careers-jobs__list,
.digiops-careers-jobs__aside {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-width: 0;
}

/* lg:sticky lg:top-28 lg:-mt-[392px] lg:h-fit — the card rides up over the hero */
@media (min-width: 1024px) {
	.digiops-careers-jobs__sticky {
		position: sticky;
		top: 7rem;
		margin-top: -392px;
		height: fit-content;
	}
}

/* ============================ JobCard ============================ */

/* rounded-2xl border border-tint {tint} p-6 md:p-7 */
.digiops-careers-job {
	border: 1px solid var(--color-tint);
	border-radius: 1rem;
	padding: 1.5rem;
	background: #f3effd;
}

@media (min-width: 768px) {
	.digiops-careers-job {
		padding: 1.75rem;
	}
}

/* CARD_TINTS */
.digiops-careers-job--t0 { background: #f3effd; }
.digiops-careers-job--t1 { background: #eaf4ff; }
.digiops-careers-job--t2 { background: #eafbf0; }
.digiops-careers-job--t3 { background: #fff4e8; }
.digiops-careers-job--t4 { background: #fdeff5; }

/* flex flex-wrap items-start justify-between gap-4 */
.digiops-careers-job__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

/* font-display text-xl font-bold tracking-tight text-ink md:text-2xl */
.digiops-careers-job__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: calc(1.75 / 1.25);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

@media (min-width: 768px) {
	.digiops-careers-job__title {
		font-size: 1.5rem;
		line-height: calc(2 / 1.5);
	}
}

/* mt-2.5 flex flex-wrap gap-2 */
.digiops-careers-job__tags {
	margin-top: 0.625rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* tagpill !bg-white */
.digiops-careers-job__tag.tagpill {
	background: #fff;
}

/* flex shrink-0 items-center gap-1.5 rounded-full border border-tint px-4 py-2
   text-xs font-bold text-violet transition-colors hover:border-violet */
.digiops-careers-job__toggle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	border: 1px solid var(--color-tint);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	background: transparent;
	font-family: inherit;
	font-size: 0.75rem;
	line-height: calc(1 / 0.75);
	font-weight: 700;
	letter-spacing: inherit;
	color: var(--color-violet);
	cursor: pointer;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-careers-job__toggle:hover {
	border-color: var(--color-violet);
}

/* transition-transform duration-300, rotate-180 when open */
.digiops-careers-job__chev {
	display: block;
	flex-shrink: 0;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-careers-job__toggle[aria-expanded="true"] .digiops-careers-job__chev {
	transform: rotate(180deg);
}

/* mt-4 text-sm font-semibold leading-relaxed text-ink/70 */
.digiops-careers-job__intro {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

/* Without JavaScript nothing can open the panel, so it reads open and the
   toggle that could not work is not offered. */
.no-js .digiops-careers-job__panel {
	grid-template-rows: minmax(0, 1fr);
}

.no-js .digiops-careers-job__toggle {
	display: none;
}

.digiops-careers-job__panel.open {
	grid-template-rows: minmax(0, 1fr);
}

/* pt-5 */
.digiops-careers-job__panel-inner {
	padding-top: 1.25rem;
}

/* grid gap-6 sm:grid-cols-2 */
.digiops-careers-job__cols {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.digiops-careers-job__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* mt-3 space-y-2 */
.digiops-careers-job__ul {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

/* flex items-start gap-2 text-sm font-semibold leading-relaxed text-ink/70 */
.digiops-careers-job__ul li {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

.digiops-careers-job__ul li + li {
	margin-top: 0.5rem;
}

/* mt-2 h-1 w-1 shrink-0 rounded-full bg-ink/30 */
.digiops-careers-job__dot {
	margin-top: 0.5rem;
	width: 0.25rem;
	height: 0.25rem;
	flex-shrink: 0;
	border-radius: 999px;
	background: rgba(27, 28, 58, 0.3);
}

/* mt-5 rounded-xl bg-lavender/50 px-4 py-3 text-xs font-semibold leading-relaxed text-ink/60 */
.digiops-careers-job__note {
	margin: 1.25rem 0 0;
	border-radius: 0.75rem;
	background: rgba(237, 237, 251, 0.5);
	padding: 0.75rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* ======================== CareerApplyForm ======================== */

/* rounded-2xl border border-tint bg-white p-7 shadow-[0_30px_80px_-40px_rgba(44,46,126,0.35)] md:p-8 */
.digiops-careers-apply {
	display: block;
	margin: 0;
	border: 1px solid var(--color-tint);
	border-radius: 1rem;
	background: #fff;
	padding: 1.75rem;
	box-shadow: 0 30px 80px -40px rgba(44, 46, 126, 0.35);
}

@media (min-width: 768px) {
	.digiops-careers-apply {
		padding: 2rem;
	}
}

/* sent state: … p-7 text-center md:p-8 */
.digiops-careers-apply--sent {
	text-align: center;
}

/* mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-lavender */
.digiops-careers-apply__check {
	margin-inline: auto;
	display: flex;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--color-lavender);
}

/* font-display mt-5 text-xl font-bold tracking-tight text-ink */
.digiops-careers-apply__sent-title {
	margin: 1.25rem 0 0;
	font-size: 1.25rem;
	line-height: calc(1.75 / 1.25);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

/* mt-2 text-sm leading-relaxed text-ink/60 */
.digiops-careers-apply__sent-body {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

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

/* space-y-5 */
.digiops-careers-apply__fields > * + * {
	margin-top: 1.25rem;
}

/* block text-xs font-semibold text-ink */
.digiops-careers-apply__label {
	display: block;
	font-size: 0.75rem;
	line-height: calc(1 / 0.75);
	font-weight: 600;
	color: var(--color-ink);
}

/* w-full border-b border-tint bg-transparent pb-2 pt-1 text-sm font-semibold
   text-ink outline-none transition-colors placeholder:font-medium
   placeholder:text-ink/35 focus:border-violet */
.digiops-careers-apply__field {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	border: 0 solid;
	border-bottom: 1px solid var(--color-tint);
	border-radius: 0;
	background: transparent;
	padding: 0.25rem 0 0.5rem;
	font-family: inherit;
	font-size: 0.875rem;
	line-height: calc(1.25 / 0.875);
	font-weight: 600;
	letter-spacing: inherit;
	color: var(--color-ink);
	outline: none;
	box-shadow: none;
	transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-careers-apply__field::placeholder {
	font-weight: 500;
	color: rgba(27, 28, 58, 0.35);
	opacity: 1;
}

.digiops-careers-apply__field:focus {
	border-color: var(--color-violet);
}

/* appearance-none */
.digiops-careers-apply__select {
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

/* mt-1.5 flex items-center gap-3 */
.digiops-careers-apply__picker {
	margin-top: 0.375rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* pill pill-ghost-ink !px-4 !py-2 (text-xs loses to the unlayered .pill) */
.digiops-careers-apply__choose.pill {
	padding: 0.5rem 1rem;
	background: transparent;
	flex-shrink: 0;
}

/* truncate text-xs font-semibold text-ink/50 */
.digiops-careers-apply__filename {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: calc(1 / 0.75);
	font-weight: 600;
	color: rgba(27, 28, 58, 0.5);
}

/* The native input is "hidden" in the original and driven by the button.
   Without JavaScript the button cannot open it, so the native control is
   shown instead and the scripted picker is not. */
.js .digiops-careers-apply__file {
	display: none;
}

.no-js .digiops-careers-apply__picker {
	display: none;
}

.no-js .digiops-careers-apply__file {
	display: block;
	margin-top: 0.375rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.7);
}

/* mt-2 inline-flex items-center rounded-full bg-lavender px-3 py-1 text-[11px]
   font-extrabold uppercase tracking-wide text-violet */
.digiops-careers-apply__badge {
	margin: 0.5rem 0 0;
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--color-lavender);
	padding: 0.25rem 0.75rem;
	font-size: 11px;
	line-height: 1.5;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	color: var(--color-violet);
}

/* mt-4 text-xs font-semibold text-red-600 */
.digiops-careers-apply__error {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	line-height: calc(1 / 0.75);
	font-weight: 600;
	color: #e7000b;
}

/* mt-7 */
.digiops-careers-apply__actions {
	margin-top: 1.75rem;
}

/* <Magnetic className="block w-full"> */
.digiops-careers-apply__magnetic.digiops-magnetic {
	display: block;
	width: 100%;
}

/* pill pill-violet w-full disabled:opacity-60 */
.digiops-careers-apply__submit {
	width: 100%;
}

.digiops-careers-apply__submit:disabled {
	opacity: 0.6;
}

/* ======================= phones: apply from the card ======================= */

/* The "Apply now" button on each job card exists for phones, where the form is
   a long scroll away at the bottom; from 768px up the form is already beside
   or near the cards, so the button is hidden. */
.digiops-careers-job__apply {
	display: none;
}

@media (max-width: 767px) {
	.digiops-careers-job__apply {
		display: inline-flex;
		margin-top: 1.25rem;
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}

	/* the form's submit steps down a size */
	.digiops-careers-apply__submit {
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}

	/* land the form clear of the fixed header */
	.digiops-careers-jobs__aside {
		scroll-margin-top: 5rem;
	}
}

/* sections/chrome-footer.css */
/**
 * Site footer — ported from components/Footer.tsx.
 *
 * A #020220 slab with three stacked backdrops (mesh artwork, a black shade to
 * keep it moody, and the brand gradient washing up from the bottom), then the
 * five link columns and the centred logo / social / copyright stack.
 *
 * The backdrop paints themselves live in theme.css as .home-footer-mesh and
 * .home-footer-glow; only the boxes they fill are described here.
 */

.digiops-foot {
	position: relative;
	isolation: isolate;
	z-index: 10;
	overflow: hidden;
	background: #020220;
	color: #fff;
}

/* ---------- backdrops ---------- */

.digiops-foot__mesh,
.digiops-foot__shade,
.digiops-foot__glow {
	display: block;
	position: absolute;
	pointer-events: none;
}

.digiops-foot__mesh {
	inset: 0;
	z-index: -20;
	opacity: 0.2;
}

.digiops-foot__shade {
	inset: 0;
	z-index: -20;
	background: rgba(0, 0, 0, 0.45);
}

.digiops-foot__glow {
	left: 0;
	right: 0;
	bottom: 0;
	height: 62%;
	z-index: -10;
}

/* ---------- link columns ---------- */

.digiops-foot__cols {
	display: grid;
	gap: 2.5rem;
	padding-top: 45px;
}

.digiops-foot__col {
	min-width: 0;
}

.digiops-foot__col-title {
	margin: 0;
	color: var(--color-onv);
}

.digiops-foot__links {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.digiops-foot__link {
	font-size: 0.875rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
	text-decoration: none;
	transition: color 0.3s ease;
}

.digiops-foot__link:hover,
.digiops-foot__link:focus-visible {
	color: #fff;
}

/* ---------- logo, socials, copyright ---------- */

.digiops-foot__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin-top: 4rem;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding-top: 1.75rem;
	padding-bottom: 22px;
}

.digiops-foot__brandrow {
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.digiops-foot__logo {
	display: inline-flex;
}

.digiops-foot__logo img {
	display: block;
	height: 2.75rem;
	width: auto;
}

/* hairline rules: a bordered zero-width box, not a filled block */
.digiops-foot__rule {
	display: block;
	width: 0;
	height: 2rem;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.digiops-foot__rule--short {
	height: 0.75rem;
}

/* the rule between the copyright and the legal links only earns its place
   once the two sit on one row */
.digiops-foot__rule--row {
	display: none;
}

.digiops-foot__socials {
	display: flex;
	gap: 1.25rem;
}

.digiops-foot__social {
	display: inline-flex;
	color: #fff;
	transition: opacity 0.3s ease;
}

.digiops-foot__social:hover,
.digiops-foot__social:focus-visible {
	opacity: 0.7;
}

.digiops-foot__social svg {
	display: block;
}

/* ---------- contact line (Customizer → Contact Details) ---------- */

.digiops-foot__contact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--color-onv);
}

.digiops-foot__contact a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.digiops-foot__contact a:hover,
.digiops-foot__contact a:focus-visible {
	color: #fff;
}

/* ---------- copyright + legal ---------- */

.digiops-foot__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	/* text-xs is 0.75rem/1rem in the original; without the line-height these
	   rows inherit body 1.5 and run 2px taller. */
	line-height: 1rem;
	font-weight: 600;
	color: var(--color-onv);
	text-align: center;
}

.digiops-foot__meta p {
	margin: 0;
}

.digiops-foot__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.digiops-foot__legal li {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* hairline rule between two legal links, not a filled block */
.digiops-foot__legal li + li::before {
	content: "";
	display: block;
	width: 0;
	height: 0.75rem;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.digiops-foot__legal a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.digiops-foot__legal a:hover,
.digiops-foot__legal a:focus-visible {
	color: #fff;
}

/* ---------- breakpoints ---------- */

/* Phones: the logo sits centred on its own line, the social icons centred on
   the line below it, and the vertical divider between them is dropped. */
@media (max-width: 639px) {
	.digiops-foot__brandrow {
		flex-direction: column;
		justify-content: center;
		gap: 1.25rem;
	}

	.digiops-foot__brandrow > .digiops-foot__rule {
		display: none;
	}

	.digiops-foot__socials {
		justify-content: center;
	}
}

@media (min-width: 640px) {
	.digiops-foot__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.digiops-foot__meta {
		flex-direction: row;
		gap: 1rem;
	}

	.digiops-foot__rule--row {
		display: block;
	}
}

@media (min-width: 768px) {
	.digiops-foot__cols {
		padding-top: 67px;
	}
}

@media (min-width: 1024px) {
	.digiops-foot__cols {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 2rem;
	}
}

/* sections/chrome-header.css */
/**
 * Site header — the bar, its dropdowns and the full-screen menu.
 *
 * Ported from components/Navbar.tsx and components/MegaMenu.tsx. Every value
 * here is the Tailwind utility the React source used, resolved:
 *   h-16 = 4rem, gap-6 = 1.5rem, px-3.5 = 0.875rem, text-[0.85rem], and so on.
 *
 * This file loads after theme.css, so the few rules there that also match
 * `.digiops-header` are restated at equal or higher specificity rather than
 * edited in place — theme.css belongs to the design system, not to the header.
 */

/* ============================================================
   1. The bar
   ============================================================ */

/* React: fixed inset-x-0 top-0 z-50 transition-all duration-500, with
   `border-b border-tint/60 bg-white/95 backdrop-blur-md` as the resting look. */
.digiops-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(217, 218, 245, 0.6);
	color: var(--color-ink);
	box-shadow: none;
	transition: background-color 0.5s ease, border-color 0.5s ease;
}

/* The bar is fixed and out of flow, and <main> deliberately gets NO offset for
   it. That is how the original works: app/layout.tsx renders a bare
   <main>{children}</main>, and every page's first block clears the bar with
   its own top padding (the post page's article is pt-40 md:pt-48, ContactSplit
   and LegalPage carry their own). An earlier `padding-top: 4rem` here, undone
   only when the first section was a dark band, stacked on top of that padding
   and made /contact and every blog post 64px taller than the original. */

/* Transparent while a [data-nav-dark] band is under the bar — but never while
   a dropdown is open, because the panel is white and a transparent bar above it
   would leave the panel floating. React: `overlay && !openMega`. */
.digiops-header.is-over-dark {
	background: transparent;
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: #fff;
}

.digiops-header.is-over-dark.is-menu-open {
	background: rgba(255, 255, 255, 0.95);
	border-bottom-color: rgba(217, 218, 245, 0.6);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: var(--color-ink);
}

/* Still over the dark band but scrolled: dark glass so content passing
   underneath never collides with the menu. White text and logo stay. */
.digiops-header.is-over-dark.is-scrolled:not(.is-menu-open) {
	background: rgba(2, 2, 32, 0.72);
	border-bottom-color: rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
}

/* theme.css adds a hairline shadow once the page scrolls; the React bar has a
   border and nothing else. */
.digiops-header.is-stuck {
	box-shadow: none;
}

.digiops-hdr__inner {
	display: flex;
	height: 4rem;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

/* ============================================================
   2. Logo
   ------------------------------------------------------------
   Two marks stacked in the same box, cross-fading over 500ms: the
   ink one on white, the white one over a dark band.
   ============================================================ */

.digiops-hdr__brand {
	position: relative;
	display: block;
	height: 2.5rem;
	flex-shrink: 0;
	line-height: 0;
}

.digiops-hdr__logo {
	display: block;
	height: 2.5rem;
	width: auto;
	transition: opacity 0.5s ease;
}

.digiops-hdr__logo--white {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__logo--ink {
	opacity: 0;
}

.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__logo--white {
	opacity: 1;
}

/* ============================================================
   3. Desktop nav
   ============================================================ */

/* hidden … lg:flex — the bar's menu only exists from 1024px up. */
.digiops-hdr__menu {
	display: none;
}

.digiops-hdr__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Full row height, so a dropdown's `top: 100%` lands exactly on the bar's
   bottom edge and the pointer never crosses a gap on the way down. */
.digiops-hdr__item {
	position: relative;
	display: flex;
	height: 4rem;
	align-items: center;
}

.digiops-hdr__link {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	border: 0;
	border-radius: 999px;
	padding: 0.5rem 0.875rem;
	background: transparent;
	color: inherit;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.digiops-hdr__link:hover {
	background: var(--color-lavender);
	color: var(--color-ink);
}

.digiops-hdr__item.current-menu-item > .digiops-hdr__link,
.digiops-hdr__item.current-menu-ancestor > .digiops-hdr__link,
.digiops-hdr__item.current-menu-parent > .digiops-hdr__link,
.digiops-hdr__item.current_page_item > .digiops-hdr__link,
.digiops-hdr__item.current_page_ancestor > .digiops-hdr__link {
	color: var(--color-violet);
}

/* Over a dark band the item is white and its hover is a wash of white. */
.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__link,
.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__item.current-menu-item > .digiops-hdr__link,
.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__item.current-menu-ancestor > .digiops-hdr__link,
.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__item.current-menu-parent > .digiops-hdr__link,
.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__item.current_page_item > .digiops-hdr__link,
.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__item.current_page_ancestor > .digiops-hdr__link {
	color: #fff;
}

.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__link:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.digiops-hdr__chev {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.digiops-hdr__item.is-open .digiops-hdr__chev {
	transform: rotate(180deg);
}

/* ============================================================
   4. Dropdown
   ------------------------------------------------------------
   Anchored under its own nav item. The 0.5rem of top padding is
   part of the trigger's hover area, so the pointer can cross the
   visual gap without the panel closing under it.
   ============================================================ */

.digiops-hdr__drop {
	position: absolute;
	left: 0;
	top: 100%;
	padding-top: 0.5rem;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-0.25rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* With JavaScript the panel is state-driven, exactly as it is in React: hover,
   click, Enter and focus all go through header.js, which keeps `is-open`,
   `aria-expanded` and the chevron in step and holds the panel open for a beat
   after the pointer leaves. Without JavaScript, plain hover stands in. */
.digiops-hdr__item.is-open > .digiops-hdr__drop,
.no-js .digiops-hdr__item:hover > .digiops-hdr__drop,
.no-js .digiops-hdr__item:focus-within > .digiops-hdr__drop {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.digiops-hdr__drop-list {
	min-width: 260px;
	margin: 0;
	padding: 0.625rem;
	list-style: none;
	border: 1px solid rgba(217, 218, 245, 0.6);
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.98);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 24px 50px -24px rgba(44, 46, 126, 0.45);
}

/* divide-y divide-tint/50: a hairline between rows, none above the first. */
.digiops-hdr__drop-item + .digiops-hdr__drop-item {
	border-top: 1px solid rgba(217, 218, 245, 0.5);
}

.digiops-hdr__drop-link {
	display: block;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.3s ease;
}

.digiops-hdr__drop-link:hover,
.digiops-hdr__drop-link:focus-visible {
	color: var(--color-violet);
}

.digiops-hdr__drop-label {
	display: block;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
}

.digiops-hdr__drop-desc {
	display: block;
	margin-top: 0.125rem;
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(27, 28, 58, 0.5);
}

/* ============================================================
   5. Actions — CTA and burger
   ============================================================ */

.digiops-hdr__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* pill !px-6 !py-2.5 text-[0.82rem] — a shorter pill than the page buttons. */
.digiops-hdr__cta {
	padding: 0.625rem 1.5rem;
	font-size: 0.82rem;
	text-decoration: none;
	transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;
}

/* Over a dark band the violet pill becomes the white one. */
.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__cta {
	background: #fff;
	color: var(--color-violet);
}

.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__cta:hover {
	background: var(--color-lavender);
}

.digiops-hdr__burger {
	display: flex;
	height: 2.75rem;
	width: 2.75rem;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 0;
	border: 1px solid var(--color-tint);
	border-radius: 999px;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.5s ease;
}

.digiops-hdr__burger:hover {
	border-color: var(--color-violet);
}

.digiops-hdr__burger-bar {
	display: block;
	height: 2px;
	width: 1.125rem;
	background: var(--color-ink);
	transition: background-color 0.5s ease;
}

.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__burger {
	border-color: rgba(255, 255, 255, 0.4);
}

.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__burger:hover {
	border-color: #fff;
}

.digiops-header.is-over-dark:not(.is-menu-open) .digiops-hdr__burger-bar {
	background: #fff;
}

@media (min-width: 1024px) {
	.digiops-hdr__menu {
		display: flex;
		align-items: center;
	}

	.digiops-hdr__burger {
		display: none;
	}
}

/* ============================================================
   6. Full-screen menu
   ------------------------------------------------------------
   0.85, not 0.98: at 98% only 2% of the page shows through, which
   reads as a solid slab. This is low enough to actually see
   through while the blur keeps the white menu text legible.
   ============================================================ */

.digiops-mega {
	position: fixed;
	inset: 0;
	z-index: 90;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba(66, 69, 180, 0.85);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	color: #fff;
	visibility: hidden;
	/* The panel drops in from above the viewport, as the GSAP timeline did:
	   yPercent -100 -> 0 on power4.inOut. */
	transform: translateY(-100%);
	transition: transform 0.47s cubic-bezier(0.76, 0, 0.24, 1), visibility 0.47s;
}

.digiops-mega.is-open {
	visibility: visible;
	transform: translateY(0);
	transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s;
}

/* No JS: the menu can't be opened, so the burger is hidden and the primary
   menu stays reachable through the footer menu and the skip link. */
.no-js .digiops-mega,
.no-js .digiops-hdr__burger {
	display: none;
}

.digiops-mega__bar {
	display: flex;
	height: 4rem;
	align-items: center;
	justify-content: space-between;
}

.digiops-mega__logo {
	display: block;
	height: 2.25rem;
	width: auto;
}

.digiops-mega__close {
	display: inline-flex;
	height: 2.75rem;
	width: 2.75rem;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: border-color 0.3s ease;
}

.digiops-mega__close:hover {
	border-color: #fff;
}

.digiops-mega__body {
	padding-top: 0.5rem;
	padding-bottom: 2rem;
}

.digiops-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.digiops-mega__row {
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.digiops-mega__clip {
	overflow: hidden;
}

/* Each row slides up into its clip, staggered — the GSAP stagger of 0.055s
   starting a quarter-second before the panel finishes dropping. */
.digiops-mega__item {
	transform: translateY(130%);
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.digiops-mega.is-open .digiops-mega__item {
	transform: translateY(0);
}

.digiops-mega.is-open .digiops-mega__row:nth-child(1) .digiops-mega__item {
	transition-delay: 0.5s;
}
.digiops-mega.is-open .digiops-mega__row:nth-child(2) .digiops-mega__item {
	transition-delay: 0.555s;
}
.digiops-mega.is-open .digiops-mega__row:nth-child(3) .digiops-mega__item {
	transition-delay: 0.61s;
}
.digiops-mega.is-open .digiops-mega__row:nth-child(4) .digiops-mega__item {
	transition-delay: 0.665s;
}
.digiops-mega.is-open .digiops-mega__row:nth-child(5) .digiops-mega__item {
	transition-delay: 0.72s;
}
.digiops-mega.is-open .digiops-mega__row:nth-child(6) .digiops-mega__item {
	transition-delay: 0.775s;
}
.digiops-mega.is-open .digiops-mega__row:nth-child(n + 7) .digiops-mega__item {
	transition-delay: 0.83s;
}

.digiops-mega__link {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 0.75rem 0;
	border: 0;
	background: transparent;
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #fff;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.digiops-mega__link:hover {
	opacity: 0.7;
}

.digiops-mega__toggle {
	justify-content: space-between;
}

.digiops-mega__plus {
	font-family: var(--font-body);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	color: var(--color-onv);
	transition: transform 0.3s ease;
}

.digiops-mega__toggle[aria-expanded="true"] .digiops-mega__plus {
	transform: rotate(45deg);
}

.digiops-mega__panel {
	padding-bottom: 1rem;
}

.digiops-mega__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.digiops-mega__sub-link {
	display: block;
	padding: 0.375rem 0;
	font-size: 0.875rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.digiops-mega__sub-link:hover {
	opacity: 0.7;
}

/* The socials row in the React menu; here it carries whatever contact details
   the Customizer holds, and disappears when it holds none. */
.digiops-mega__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-top: 1.75rem;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.digiops-mega.is-open .digiops-mega__meta {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.75s;
}

.digiops-mega__meta a {
	font-size: 0.85rem;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.digiops-mega__meta a:hover {
	opacity: 0.7;
}

/* The page behind the menu must not scroll under it. */
body.digiops-menu-open {
	overflow: hidden;
}

@media (min-width: 640px) {
	.digiops-mega__link {
		font-size: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.digiops-mega {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.digiops-mega,
	.digiops-mega__item,
	.digiops-mega__meta {
		transition-delay: 0s;
		transform: none;
	}
}

/* ============================================================
   The Products panel — Navbar.tsx's full-width "products" mega
   panel, the one dropdown that spans the bar instead of hanging
   under its own item:

     absolute inset-x-0 top-full border-b border-tint/60
     bg-white/[0.98] shadow-[0_30px_60px_-30px_rgba(44,46,126,.35)]
     backdrop-blur-md  ·  inner: container-x py-8
     grid md:grid-cols-[2fr_3fr_5fr] gap-8 md:gap-12 items-center

   The item goes `position: static` so the panel anchors to the
   header (which is fixed) rather than to the menu item.
   ============================================================ */

.digiops-hdr__item--mega {
	position: static;
}

.digiops-hdr__drop--mega {
	left: 0;
	right: 0;
	padding-top: 0;
	border-bottom: 1px solid rgba(217, 218, 245, 0.6);
	background: rgba(255, 255, 255, 0.98);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 30px 60px -30px rgba(44, 46, 126, 0.35);
}

.digiops-hdr__mega {
	display: grid;
	align-items: center;
	gap: 2rem;
	padding-block: 2rem;
}

@media (min-width: 768px) {
	.digiops-hdr__mega {
		grid-template-columns: 2fr 3fr 5fr;
		gap: 3rem;
	}
}

.digiops-hdr__mega-title {
	display: block;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
	text-decoration: none;
	transition: color 0.3s ease;
}

.digiops-hdr__mega-title:hover {
	color: var(--color-violet);
}

@media (min-width: 768px) {
	.digiops-hdr__mega-title {
		font-size: 2.25rem;
		line-height: 2.5rem;
	}
}

/* `!px-6 !py-2.5 text-[0.82rem]` on the shared pill — but only the padding
   lands: text-[0.82rem] carries no !important, so .pill's own 0.95rem wins in
   the original too, and the button renders at 15.2px. Matching what the site
   actually renders, not what the class list intends. */
.digiops-hdr__mega-cta {
	margin-top: 1.25rem;
	padding: 0.625rem 1.5rem;
}

.digiops-hdr__mega-tagline {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.375;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-violet);
}

.digiops-hdr__mega-desc {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-hdr__mega-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--color-lavender);
	text-align: center;
}

.digiops-hdr__mega-value {
	margin: 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-deep);
}

@media (min-width: 768px) {
	.digiops-hdr__mega-value {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

.digiops-hdr__mega-label {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1.375;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.55);
}

/* sections/contact-connect.css */
/**
 * Contact: Connect With Us — the second band of app/contact/page.tsx.
 *
 *   item   flex gap-4
 *   bar    mt-1 h-10 w-[3px] shrink-0 rounded-full
 *          bg-gradient-to-b from-[#8b5cf6] to-[#2f6bff]
 *   name   font-display text-lg font-bold text-violet
 *   email  mt-1 block text-sm font-semibold text-ink/60 hover:text-ink
 */

.digiops-cc {
	background: #fff;
	color: var(--color-ink);
	padding-block: 5rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.digiops-cc {
		padding-block: 7rem;
	}
}

.digiops-cc__grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.digiops-cc__grid {
		grid-template-columns: 1fr 2fr;
		align-items: start;
		gap: 4rem;
	}
}

.digiops-cc .digiops-cc__title {
	font-size: clamp(1.9rem, 3.6vw, 2.75rem);
}

.digiops-cc__list {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 640px) {
	.digiops-cc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.digiops-cc__item {
	display: flex;
	gap: 1rem;
}

.digiops-cc__bar {
	margin-top: 0.25rem;
	height: 2.5rem;
	width: 3px;
	flex-shrink: 0;
	border-radius: 999px;
	background: linear-gradient(to bottom, #8b5cf6, #2f6bff);
}

.digiops-cc__name {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: var(--color-violet);
}

.digiops-cc__email {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.6);
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-cc__email:hover {
	color: var(--color-ink);
}

/* sections/contact-split.css */
/**
 * Contact split — ported from components/ContactSplit.tsx.
 *
 *   section  contact-hero-bg relative isolate overflow-hidden text-white
 *   mark     absolute -bottom-16 -right-16 opacity-[0.06]; h-72 md:h-96 w-auto
 *   grid     container-x grid gap-14 pb-10 pt-32 md:pb-12 md:pt-40
 *            lg:grid-cols-[1fr_1.05fr] lg:items-center lg:gap-10
 *   crumbs   flex items-center gap-2 text-[0.7rem] font-bold uppercase
 *            tracking-[0.18em] text-white/55
 *   h1       h-hero mt-6 max-w-lg !text-[clamp 2.25rem/4.6vw/4rem]
 *   intro    mt-6 / max-w-md text-base italic leading-relaxed text-white/60
 *   rule     mt-8 max-w-md border-t border-white/10
 *   list     mt-8 max-w-md space-y-6; item flex items-start gap-3
 *   tick     mt-0.5 h-5 w-5 rounded-full bg-white/10 text-onv
 *   card     rounded-3xl border border-black/15 bg-white p-8 text-ink
 *            shadow-[0_30px_80px_-30px_rgba(0,0,0,0.6)] md:p-10
 *   input    w-full rounded-xl border border-tint bg-white px-5 py-4 text-sm
 *            font-semibold focus:border-violet focus:ring-4 focus:ring-violet/15
 *   stats    container-x grid grid-cols-2 gap-y-10 border-t border-white/10
 *            pt-8 pb-14 text-center md:grid-cols-4 md:pt-10 md:pb-16
 */

.digiops-cs {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	/* Tailwind's Preflight line-height, which every inherited line here uses */
	line-height: 1.5;
}

.digiops-cs__layer {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

.digiops-cs__mark {
	position: absolute;
	right: -4rem;
	bottom: -4rem;
	opacity: 0.06;
	pointer-events: none;
}

.digiops-cs__mark svg {
	display: block;
	height: 18rem;
	width: auto;
}

@media (min-width: 768px) {
	.digiops-cs__mark svg {
		height: 24rem;
	}
}

.digiops-cs__grid {
	display: grid;
	gap: 3.5rem;
	padding-top: 8rem;
	padding-bottom: 2.5rem;
}

@media (min-width: 768px) {
	.digiops-cs__grid {
		padding-top: 10rem;
		padding-bottom: 3rem;
	}
}

@media (min-width: 1024px) {
	.digiops-cs__grid {
		grid-template-columns: 1fr 1.05fr;
		align-items: center;
		gap: 2.5rem;
	}
}

.digiops-cs__copy {
	min-width: 0;
}

/* Phones: the form comes before the reasons to get in touch. The copy column
   steps aside (display: contents) so its pieces and the form are siblings, and
   `order` puts the heading and divider first, then the form, then the
   checklist. Spacing is the pieces' own margins, so the grid gap is dropped.
   From 768px the original column order is back. */
@media (max-width: 767px) {
	.digiops-cs__grid {
		gap: 0;
	}

	.digiops-cs__copy {
		display: contents;
	}

	.digiops-cs__formwrap {
		order: 1;
		margin-top: 2rem;
	}

	.digiops-cs__checklist {
		order: 2;
		margin-top: 2.5rem;
	}
}

/* ---------- breadcrumb ---------- */

.digiops-cs__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
}

.digiops-cs__crumbs a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-cs__crumbs a:hover {
	color: #fff;
}

.digiops-cs__crumb-current {
	color: #fff;
}

/* ---------- copy ---------- */

.digiops-cs .digiops-cs__title {
	margin-top: 1.5rem;
	max-width: 32rem;
	font-size: clamp(2.25rem, 4.6vw, 4rem);
}

.digiops-cs__intro-wrap {
	margin-top: 1.5rem;
}

/* Phones: the italic intro line is hidden; the heading leads straight into
   the divider and the checklist. */
@media (max-width: 767px) {
	.digiops-cs__intro-wrap {
		display: none;
	}
}

.digiops-cs__intro {
	margin: 0;
	max-width: 28rem;
	font-size: 1rem;
	font-style: italic;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.6);
}

.digiops-cs__rule {
	margin-top: 2rem;
	max-width: 28rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.digiops-cs__checklist {
	margin-top: 2rem;
	max-width: 28rem;
}

.digiops-cs__check {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.digiops-cs__check + .digiops-cs__check {
	margin-top: 1.5rem;
}

.digiops-cs__tick {
	margin-top: 0.125rem;
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-onv);
}

.digiops-cs__check-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.7);
}

.digiops-cs__check-title {
	display: block;
	font-weight: 700;
	color: #fff;
}

/* ---------- form card ---------- */

.digiops-cs__card {
	border-radius: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
	padding: 2rem;
	color: var(--color-ink);
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6);
}

@media (min-width: 768px) {
	.digiops-cs__card {
		padding: 2.5rem;
	}
}

.digiops-cs__form {
	margin: 0;
}

.digiops-cs__form[hidden],
.digiops-cs__success[hidden],
.digiops-cs__error[hidden] {
	display: none;
}

/* honeypot: off-screen for people, present for bots */
.digiops-cs__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin: 0;
}

.digiops-cs__row {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 640px) {
	.digiops-cs__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.digiops-cs__gap {
	margin-top: 1.25rem;
}

.digiops-cs__label {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-ink);
}

.digiops-cs__input {
	display: block;
	width: 100%;
	margin: 0;
	border-radius: 0.75rem;
	border: 1px solid var(--color-tint);
	background-color: #fff;
	padding: 1rem 1.25rem;
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--color-ink);
	outline: none;
	box-shadow: 0 0 0 0 rgba(66, 69, 180, 0);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-cs__input::placeholder {
	color: rgba(27, 28, 58, 0.35);
	opacity: 1;
}

.digiops-cs__input:focus {
	border-color: var(--color-violet);
	box-shadow: 0 0 0 4px rgba(66, 69, 180, 0.15);
}

.digiops-cs__textarea {
	/* Preflight leaves textarea inline-block, so it sits on a line box and
	   gains the strut's descender below it — part of the original spacing */
	display: inline-block;
	vertical-align: baseline;
	resize: none;
}

.digiops-cs__error {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: #dc2626;
}

.digiops-cs__actions {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.digiops-cs .digiops-magnetic {
	display: inline-block;
}

.digiops-cs__submit:disabled {
	opacity: 0.6;
}

/* ---------- sent state ---------- */

.digiops-cs__success {
	text-align: center;
}

.digiops-cs__success-icon {
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	border-radius: 999px;
	background: var(--color-lavender);
}

.digiops-cs__success-icon svg {
	width: 2.25rem;
	height: 2.25rem;
}

.digiops-cs__success-title {
	margin-top: 2rem;
}

.digiops-cs__success-body {
	margin: 1rem 0 0;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-cs__success-actions {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

@media (min-width: 1024px) {
	.digiops-cs__success {
		text-align: left;
	}

	.digiops-cs__success-icon {
		margin-inline: 0;
	}

	.digiops-cs__success-actions {
		justify-content: flex-start;
	}
}

/* ---------- stats row ---------- */

.digiops-cs__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 2.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 2rem;
	padding-bottom: 3.5rem;
	text-align: center;
}

@media (min-width: 768px) {
	.digiops-cs__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		padding-top: 2.5rem;
		padding-bottom: 4rem;
	}
}

.digiops-cs__num {
	margin: 0;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

@media (min-width: 768px) {
	.digiops-cs__num {
		font-size: 3rem;
		line-height: 1;
	}
}

.digiops-cs__stat-label {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
}

/* sections/course-single.css */
/**
 * Course detail page.
 *
 * The port of app/training/[slug]/page.tsx, components/CourseCurriculum.tsx
 * and components/training/CourseEnrollForm.tsx. Tailwind is not loaded in the
 * theme, so every utility string in those files is written out here against
 * the tokens theme.css already defines — same values, semantic names.
 *
 * Nothing here redefines a design-system class. .container-x, .h-xl, .h-md,
 * .tagpill, .pill, .acc-panel, .font-display, .training-hero-bg and the
 * reveal primitives all come from theme.css and are used by name.
 */

/* ============================================================
   Hero
   ============================================================ */

/* the hero supplies its own vertical rhythm, like .digiops-hero does */
.site-main > .digiops-chero {
	padding-block: 0;
}

.digiops-chero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
}

/* pb-14 pt-32 md:pb-20 md:pt-40 */
.digiops-chero__inner {
	padding-top: 8rem;
	padding-bottom: 3.5rem;
}

/* text-xs font-bold uppercase tracking-widest text-white/50 */
.digiops-chero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: rgba(255, 255, 255, 0.5);
}

.digiops-chero__crumb {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.digiops-chero__crumb:hover,
.digiops-chero__crumb:focus-visible {
	color: #fff;
}

.digiops-chero__crumb-now {
	color: #fff;
}

/* h-xl mt-5 max-w-3xl !text-[clamp 2rem/4.5vw/3rem] */
.digiops-chero__title {
	margin-top: 1.25rem;
	max-width: 48rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* mt-5 max-w-2xl text-base font-semibold leading-relaxed text-white/70 md:text-lg */
.digiops-chero__summary {
	margin: 1.25rem 0 0;
	max-width: 42rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.7);
}

/* mt-6 flex flex-wrap gap-2.5 */
.digiops-chero__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.5rem;
}

/* `tagpill !bg-white` — a pill on the dark hero */
.tagpill-onw {
	background: #fff;
}

/* Reveal's `delay` prop, as a transition delay on the reveal primitive. */
.js .digiops-chero [data-digiops-reveal] {
	transition-delay: var(--cs-delay, 0s);
}

@media (min-width: 768px) {
	.digiops-chero__inner {
		padding-top: 10rem;
		padding-bottom: 5rem;
	}

	.digiops-chero__summary {
		font-size: 1.125rem;
	}
}

/* ============================================================
   Body band
   ============================================================ */

/* py-16 md:py-24 is the band's own rhythm */
.site-main > .digiops-cbody {
	padding-block: 0;
}

.digiops-cbody {
	background: #fff;
}

.digiops-cbody__inner {
	padding-block: 4rem;
}

/* grid gap-10 lg:grid-cols-[1.5fr_1fr] lg:gap-14 */
.digiops-cbody__grid {
	display: grid;
	gap: 2.5rem;
}

.digiops-cbody__main,
.digiops-cbody__aside {
	min-width: 0;
}

/* flex flex-col divide-y divide-tint */
.digiops-cbody__main {
	display: flex;
	flex-direction: column;
}

/* flex flex-col gap-6 */
.digiops-cbody__aside {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

@media (min-width: 1024px) {
	.digiops-cbody__inner {
		padding-block: 6rem;
	}

	.digiops-cbody__grid {
		grid-template-columns: 1.5fr 1fr;
		gap: 3.5rem;
	}
}

/* ---------- one hairline-divided block, pt-7 pb-7 ---------- */

.digiops-cblock {
	padding-block: 1.75rem;
	border-top: 1px solid var(--color-tint);
}

.digiops-cbody__main > .digiops-cblock:first-child {
	padding-top: 0;
	border-top: 0;
}

.digiops-cbody__main > .digiops-cblock:last-child {
	padding-bottom: 0;
}

.digiops-cblock__title {
	color: var(--color-ink);
}

/* ---------- the check-mark grids ---------- */

/* mt-5 grid gap-4 sm:grid-cols-2 */
.digiops-cticks {
	display: grid;
	gap: 1rem;
	margin-top: 1.25rem;
}

/* mt-5 grid gap-3 sm:grid-cols-2 */
.digiops-cticks--tight {
	gap: 0.75rem;
}

@media (min-width: 640px) {
	.digiops-cticks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* flex items-start gap-3 */
.digiops-ctick {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

/* mt-0.5 h-5 w-5 shrink-0 rounded-full bg-lavender text-violet */
.digiops-ctick__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.125rem;
	border-radius: 999px;
	background: var(--color-lavender);
	color: var(--color-violet);
}

/* text-sm font-semibold leading-relaxed text-ink/70 */
.digiops-ctick__text {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

/* ---------- pill rows ---------- */

/* mt-4 flex flex-wrap gap-2.5 */
.digiops-ctags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1rem;
}

/* ---------- bullet lists ---------- */

/* mt-5 space-y-3 */
.digiops-cbullets {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

.digiops-cbullets > li + li {
	margin-top: 0.75rem;
}

/* flex items-start gap-3 text-sm font-semibold leading-relaxed text-ink/70 */
.digiops-cbullet {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

/* mt-2 h-1.5 w-1.5 shrink-0 rounded-full bg-violet */
.digiops-cbullet__dot {
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	margin-top: 0.5rem;
	border-radius: 999px;
	background: var(--color-violet);
}

/* ---------- program description ---------- */

/* mt-5 max-w-2xl space-y-4 */
.digiops-cprose {
	max-width: 42rem;
	margin-top: 1.25rem;
}

.digiops-cprose > * {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

.digiops-cprose > * + * {
	margin-top: 1rem;
}

/* ---------- capstone panel ---------- */

/* mt-5 max-w-2xl rounded-2xl border border-tint bg-lavender p-6 md:p-7 */
.digiops-ccapstone {
	max-width: 42rem;
	margin-top: 1.25rem;
	padding: 1.5rem;
	border: 1px solid var(--color-tint);
	border-radius: 1rem;
	background: var(--color-lavender);
}

.digiops-ccapstone p {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

@media (min-width: 768px) {
	.digiops-ccapstone {
		padding: 1.75rem;
	}
}

/* ============================================================
   Curriculum accordion
   ============================================================ */

/* mt-2 text-sm font-semibold text-ink/50 */
.digiops-ccur__meta {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	/* text-sm carries its own 1.25rem leading; the body's 1.6 would make the
	   line — and with it every row below — two pixels taller than the original */
	line-height: 1.25rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.5);
}

/* mt-4 space-y-1.5 */
.digiops-ccur {
	margin-top: 1rem;
}

.digiops-cmod + .digiops-cmod {
	margin-top: 0.375rem;
}

/* flex w-full items-center gap-5 rounded-xl bg-lavender/50 px-4 py-4.5 text-left */
.digiops-cmod__head {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 1.25rem;
	padding: 1.125rem 1rem;
	border: 0;
	border-radius: 0.75rem;
	background: rgba(237, 237, 251, 0.5);
	text-align: left;
	font-family: inherit;
	color: inherit;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.digiops-cmod__head--static {
	cursor: default;
}

button.digiops-cmod__head:hover {
	background: var(--color-lavender);
}

/* text-sm font-bold, ink/30 closed and violet open */
.digiops-cmod__num {
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.3);
	transition: color 0.3s ease;
}

.digiops-cmod__head[aria-expanded="true"] .digiops-cmod__num {
	color: var(--color-violet);
}

/* font-display flex-1 text-lg font-semibold tracking-tight md:text-xl */
.digiops-cmod__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

/* text-lg text-violet, rotate-45 when open */
.digiops-cmod__plus {
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: var(--color-violet);
	transition: transform 0.3s ease;
}

.digiops-cmod__head[aria-expanded="true"] .digiops-cmod__plus {
	transform: rotate(45deg);
}

/* pb-5 pl-10 */
.digiops-cmod__body {
	padding: 0 0 1.25rem 2.5rem;
}

/* space-y-1.5 */
.digiops-cmod__topics {
	list-style: none;
	margin: 0;
	padding: 0;
}

.digiops-cmod__topics > li + li {
	margin-top: 0.375rem;
}

/* flex items-start gap-2 text-sm font-semibold leading-relaxed text-ink/60 */
.digiops-cmod__topic {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* mt-2 h-1 w-1 shrink-0 rounded-full bg-ink/30 */
.digiops-cmod__dot {
	flex-shrink: 0;
	width: 0.25rem;
	height: 0.25rem;
	margin-top: 0.5rem;
	border-radius: 999px;
	background: rgba(27, 28, 58, 0.3);
}

/* mt-3 text-sm font-semibold leading-relaxed text-violet */
.digiops-cmod__lab {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: var(--color-violet);
}

.digiops-cmod__lab-label {
	font-weight: 700;
}

@media (min-width: 768px) {
	.digiops-cmod__title {
		font-size: 1.25rem;
	}
}

/* ============================================================
   The purchase box
   ============================================================ */

.digiops-cbuy__inner {
	position: relative;
}

/* absolute -inset-x-2 top-6 -bottom-2 -z-10 rounded-3xl bg-lavender/50 */
.digiops-cbuy__wash {
	position: absolute;
	left: -0.5rem;
	right: -0.5rem;
	top: 1.5rem;
	bottom: -0.5rem;
	z-index: -1;
	border-radius: 1.5rem;
	background: rgba(237, 237, 251, 0.5);
}

@media (min-width: 1024px) {
	/* lg:sticky lg:top-28 lg:-mt-[441px] lg:h-fit — the box's top edge lands
	   beside the breadcrumb in the dark hero above, then stays in view. */
	.digiops-cbuy {
		position: sticky;
		top: 7rem;
		height: -moz-fit-content;
		height: fit-content;
		margin-top: -441px;
	}
}

/* ---------- the enrol form card ---------- */

/* rounded-2xl border border-tint bg-white p-7 md:p-8
   shadow-[0_30px_80px_-40px_rgba(44,46,126,0.35)] */
.digiops-cform {
	padding: 1.75rem;
	border: 1px solid var(--color-tint);
	border-radius: 1rem;
	background: #fff;
	box-shadow: 0 30px 80px -40px rgba(44, 46, 126, 0.35);
}

/* space-y-5 */
.digiops-cform__fields > * + * {
	margin-top: 1.25rem;
}

/* block text-xs font-semibold text-ink */
.digiops-cform__label {
	display: block;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--color-ink);
}

/* w-full border-b border-tint bg-transparent pb-2 pt-1 text-sm font-semibold
   text-ink outline-none placeholder:font-medium placeholder:text-ink/35
   focus:border-violet */
.digiops-cform__input {
	display: block;
	width: 100%;
	padding: 0.25rem 0 0.5rem;
	border: 0;
	border-bottom: 1px solid var(--color-tint);
	border-radius: 0;
	background: transparent;
	font-family: inherit;
	font-size: 0.875rem;
	/* text-sm's own leading — an input's default `normal` is a pixel shorter */
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--color-ink);
	outline: none;
	transition: border-color 0.3s ease;
	appearance: none;
}

.digiops-cform__input::placeholder {
	font-weight: 500;
	color: rgba(27, 28, 58, 0.35);
}

.digiops-cform__input:focus {
	border-bottom-color: var(--color-violet);
}

/* the honeypot: off-screen rather than display:none, which some bots skip */
.digiops-cform__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* mt-4 text-xs font-semibold text-red-600 */
.digiops-cform__error {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: #dc2626;
}

.digiops-cform__error[hidden] {
	display: none;
}

/* mt-7 */
.digiops-cform__foot {
	margin-top: 1.75rem;
}

/* font-display text-3xl font-bold tracking-tight text-deep */
.digiops-cform__price {
	margin: 0;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-deep);
}

/* mt-1 text-xs font-semibold text-ink/50 */
.digiops-cform__price-note {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.5);
}

/* <Magnetic className="mt-5 block w-full"> */
.digiops-cform__magnetic {
	display: block;
	width: 100%;
	margin-top: 1.25rem;
}

.digiops-cform__submit {
	width: 100%;
}

.digiops-cform__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

.digiops-cform__notice {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.6;
	color: rgba(27, 28, 58, 0.7);
}

/* ---------- the sent panel ---------- */

.digiops-cform--sent {
	text-align: center;
}

.digiops-cform--sent[hidden] {
	display: none;
}

/* mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-lavender */
.digiops-cform__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-inline: auto;
	border-radius: 999px;
	background: var(--color-lavender);
}

/* font-display mt-5 text-xl font-bold tracking-tight text-ink */
.digiops-cform__sent-title {
	margin: 1.25rem 0 0;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

/* mt-2 text-sm leading-relaxed text-ink/60 */
.digiops-cform__sent-body {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

@media (min-width: 768px) {
	.digiops-cform {
		padding: 2rem;
	}
}

/* ---------- the format strip under the card ---------- */

/* grid grid-cols-3 gap-2 px-4 pb-4 pt-5 text-center */
.digiops-cformat {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
	padding: 1.25rem 1rem 1rem;
	text-align: center;
}

/* text-[10px] font-bold uppercase tracking-wider text-ink/40 */
.digiops-cformat__label {
	margin: 0;
	font-size: 0.625rem;
	line-height: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(27, 28, 58, 0.4);
}

/* mt-1 text-xs font-bold leading-snug text-deep */
.digiops-cformat__value {
	margin: 0.25rem 0 0;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.375;
	color: var(--color-deep);
}

/* sections/cta-finale.css */
/**
 * Section: cta-finale — the closing call to action.
 *
 * Ported from components/CtaFinale.tsx. Tailwind is not loaded, so every
 * utility string from the JSX is written out here as real CSS. The shared
 * surfaces the original used (.container-x, .h-xl, .pill, .pill-violet,
 * .wash-indigo, .wash-indigo-glow, .cta-photo, .text-violet) already live in
 * theme.css and are reused by name.
 *
 * Tailwind values kept literal so the two can be compared:
 *   py-28 / md:py-40 = 7rem / 10rem      mt-12 = 3rem       gap-4 = 1rem
 *   max-w-4xl = 56rem                    max-w-lg = 32rem
 *   -z-10 / -z-20 = z-index -1 / -2
 */

/* ---------- band ----------
   section.relative.isolate.overflow-hidden.py-28.md:py-40.text-center */

.digiops-ctafinale {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 7rem;
	text-align: center;
}

@media (min-width: 768px) {
	.digiops-ctafinale {
		padding-block: 10rem;
	}
}

/* the photo variant is the one that reads left, not centred */
.digiops-ctafinale--photo {
	text-align: left;
}

/* ---------- decorative grounds ----------
   All three sit behind the content. The JSX used -z-10 / -z-20 inside the
   section's own stacking context (isolate), which is what keeps them behind
   the copy without escaping to the back of the page. */

.digiops-ctafinale__glow,
.digiops-ctafinale__scatter {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* the scatter layer carried .text-violet, so every mark's currentColor is
   Brand Violet and each one is faded individually by its inline opacity */
.digiops-ctafinale__scatter {
	color: var(--color-violet);
}

.digiops-ctafinale__icon {
	position: absolute;
	/* top / left / opacity / translate(-50%, -50%) rotate() are per-icon and
	   arrive inline, exactly as they did from the SCATTER const */
}

.digiops-ctafinale__photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}

/* ---------- headline ----------
   h2.h-xl.max-w-4xl.mx-auto, narrowed and resized per variant. The original
   used !important utilities to beat .h-xl's clamp; here the extra class in
   the selector does the same job. */

.digiops-ctafinale__title {
	max-width: 56rem;
	margin-inline: auto;
}

.digiops-ctafinale--tinted .digiops-ctafinale__title {
	font-size: clamp(1.9rem, 4.4vw, 4rem);
}

.digiops-ctafinale--photo .digiops-ctafinale__title {
	max-width: 32rem;
	margin-inline: 0;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* ---------- button row ----------
   div.mt-12.flex.flex-wrap.items-center.gap-4.justify-center */

.digiops-ctafinale__actions {
	margin-top: 3rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	justify-content: center;
}

.digiops-ctafinale--photo .digiops-ctafinale__actions {
	justify-content: flex-start;
}

/* Magnetic.tsx is a plain inline-block wrapper now, but it still shapes the
   row — the flex item is the span, not the anchor. */
.digiops-ctafinale__magnetic {
	display: inline-block;
}

/* ---------- phones ----------
   The headline is dark text sitting straight on a busy photograph, which
   made it unreadable. A pale wash over the photo (behind the copy, on top of
   the picture) lifts it, and the button steps down a size. Tablet and desktop
   are untouched. */
@media (max-width: 767px) {
	.digiops-ctafinale__photo::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.86) 0%,
			rgba(255, 255, 255, 0.78) 55%,
			rgba(255, 255, 255, 0.62) 100%
		);
	}

	.digiops-ctafinale .pill {
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}

	/* centred on phones; the photo variant reads left from 768px up */
	.digiops-ctafinale--photo {
		text-align: center;
	}

	.digiops-ctafinale--photo .digiops-ctafinale__title {
		margin-inline: auto;
	}

	.digiops-ctafinale--photo .digiops-ctafinale__actions {
		justify-content: center;
	}
}

/* ---------- reveal motion profile ----------
 * components/Reveal.tsx tweens y: 36 -> 0 and opacity 0 -> 1 over 1s on
 * GSAP's power3.out. The theme's shared profile is a shorter, quicker move,
 * so the original's numbers are restored here, scoped to this section.
 * power3.out is a cubic ease-out; cubic-bezier(0.215, 0.61, 0.355, 1) is its
 * CSS equivalent.
 *
 * The .is-revealed rule is load-bearing: this block outranks theme.css's
 * landing rule, so without it the row would stay pinned 36px down.
 */

.js .digiops-ctafinale [data-digiops-reveal] {
	opacity: 0;
	transform: translateY(36px);
	transition:
		opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1),
		transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	will-change: opacity, transform;
}

.js .digiops-ctafinale [data-digiops-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .digiops-ctafinale [data-digiops-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* sections/dev-service-list.css */
/*
 * dev-service-list — components/web/DevServiceList.tsx and the dark band
 * every call site wraps it in. Tailwind source -> rules below:
 *
 *   band     relative isolate overflow-hidden bg-[#0a0a12] py-20 text-white md:py-28
 *            (compact: py-16 md:py-[90px])
 *   grid     container-x grid gap-8 lg:grid-cols-[1fr_1.6fr] lg:gap-10
 *   intro    min-w-0 lg:sticky lg:top-0 lg:self-start lg:pr-8
 *   eyebrow  label text-onv
 *   title    h-xl mt-4 !text-[clamp 1.9rem/4vw/3rem]
 *   lead     mt-5 > p leading-relaxed text-white/55
 *
 *   list     grid gap-8 sm:grid-cols-[1fr_1.4fr]
 *   button   flex w-full items-center gap-3 border-b border-white/10 py-4 text-left
 *            transition-colors duration-300 last:border-0
 *            text-white | text-white/40 hover:text-white/60
 *   chip     flex h-9 w-9 shrink-0 items-center justify-center rounded-lg (bg-white/10 on)
 *   icon     h-4.5 w-4.5
 *   name     font-display text-lg font-bold leading-snug tracking-tight
 *   panel    relative sm:pl-8
 *   rule     absolute left-0 top-0 hidden h-full w-px bg-white/10 sm:block
 *   marker   absolute left-0 hidden h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2
 *            rounded-full bg-violet transition-[top] duration-300 ease-out sm:block
 *   h3       font-display max-w-md text-[1.2rem] font-medium leading-snug tracking-tight text-white
 *   blurb    mt-3 max-w-md leading-relaxed text-white/45
 *   p        mt-4 leading-relaxed text-white/60
 *   tight p  flex items-start gap-2 (mt-4 first, mt-2 after) + chevron mt-1 h-3.5 w-3.5 shrink-0
 */

/* ---------- band ---------- */

.digiops-dsl-band {
	position: relative;
	/* Tailwind preflight line-height; the theme body is 1.6. */
	line-height: 1.5;
	isolation: isolate;
	overflow: hidden;
	background: #0a0a12;
	color: #fff;
	padding-block: 5rem;
}

.digiops-dsl-band--compact {
	padding-block: 4rem;
}

.digiops-dsl-band__glow {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.digiops-dsl-band__grid {
	display: grid;
	gap: 2rem;
}

.digiops-dsl-band__intro,
.digiops-dsl-band__list {
	min-width: 0;
}

.digiops-dsl-band__eyebrow {
	color: var(--color-onv);
}

.h-xl.digiops-dsl-band__title {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.digiops-dsl-band__lead {
	margin-top: 1.25rem;
}

.digiops-dsl-band__lead p {
	margin: 0;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

@media (min-width: 768px) {
	.digiops-dsl-band {
		padding-block: 7rem;
	}

	.digiops-dsl-band--compact {
		padding-block: 90px;
	}
}

@media (min-width: 1024px) {
	.digiops-dsl-band__grid {
		grid-template-columns: 1fr 1.6fr;
		gap: 2.5rem;
	}

	.digiops-dsl-band__intro {
		position: sticky;
		top: 0;
		align-self: start;
		padding-right: 2rem;
	}
}

/* ---------- the list component ---------- */

.digiops-dsl {
	display: grid;
	line-height: 1.5;
	gap: 2rem;
}

.digiops-dsl__btn {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 1rem 0;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: none;
	color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	-webkit-appearance: none;
	appearance: none;
}

.digiops-dsl__btn:last-child {
	border-width: 0;
}

.digiops-dsl__btn:hover {
	color: rgba(255, 255, 255, 0.6);
}

.digiops-dsl__btn.is-active {
	color: #fff;
}

.digiops-dsl__chip {
	display: flex;
	width: 2.25rem;
	height: 2.25rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-dsl__btn.is-active .digiops-dsl__chip {
	background: rgba(255, 255, 255, 0.1);
}

.digiops-dsl__icon {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
}

.digiops-dsl__name {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: -0.025em;
}

.digiops-dsl__panel {
	position: relative;
}

.digiops-dsl__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

.digiops-dsl__rule {
	position: absolute;
	left: 0;
	top: 0;
	display: none;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.1);
}

.digiops-dsl__marker {
	position: absolute;
	left: 0;
	/* Centre of the first row (py-4 + h-9 chip + 1px hairline) until the
	   script measures it — the same value React's layout effect sets. */
	top: calc(2.125rem + 0.5px);
	display: none;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 9999px;
	background: var(--color-violet);
	transform: translate(-50%, -50%);
	transition: top 300ms cubic-bezier(0, 0, 0.2, 1);
}

.digiops-dsl__title {
	margin: 0;
	max-width: 28rem;
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.375;
	letter-spacing: -0.025em;
	color: #fff;
}

.digiops-dsl__blurb {
	margin: 0.75rem 0 0;
	max-width: 28rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.45);
}

.digiops-dsl__p {
	margin: 1rem 0 0;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.6);
}

.digiops-dsl__p--tight {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.digiops-dsl__p--tight + .digiops-dsl__p--tight {
	margin-top: 0.5rem;
}

.digiops-dsl__chev {
	display: block;
	flex-shrink: 0;
	width: 0.875rem;
	height: 0.875rem;
	margin-top: 0.25rem;
}

@media (min-width: 640px) {
	.digiops-dsl {
		grid-template-columns: 1fr 1.4fr;
	}

	.digiops-dsl__panel {
		padding-left: 2rem;
	}

	.digiops-dsl__rule,
	.digiops-dsl__marker {
		display: block;
	}
}

/* sections/digital-marketing-ai.css */
/**
 * Digital Marketing AI band — app/digital-marketing/page.tsx, #ai-marketing.
 * The list itself is styled by dev-service-list.css; the glow is
 * .web-dev-glow-strong from theme.css.
 */

/* relative isolate overflow-hidden bg-[#0a0a12] py-20 text-white md:py-28 */
.dm-ai {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #0a0a12;
	color: #fff;
	padding-block: 5rem;
	/* Tailwind preflight line-height; the theme body is 1.6. */
	line-height: 1.5;
}

.dm-ai__intro :where(h2, p),
.dm-ai__ind :where(h3, p) {
	margin: 0;
}

/* pointer-events-none absolute inset-0 -z-10 */
.dm-ai__glow {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* grid gap-8 lg:grid-cols-[1fr_1.6fr] lg:gap-10 */
.dm-ai__grid {
	display: grid;
	gap: 2rem;
}

/* min-w-0 */
.dm-ai__intro,
.dm-ai__list {
	min-width: 0;
}

/* label text-onv */
.dm-ai__eyebrow {
	color: var(--color-onv);
}

/* h-xl mt-4 !text-[clamp 1.9rem/4vw/3rem] */
.h-xl.dm-ai__title {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

/* mt-5 > p leading-relaxed text-white/55 */
.dm-ai__lead {
	margin-top: 1.25rem;
}

.dm-ai__lead p {
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

/* Reveal mt-10 md:mt-14 */
.dm-ai__ind {
	margin-top: 2.5rem;
}

/* font-display mt-3 text-xl font-bold tracking-tight md:text-2xl */
.dm-ai__ind-title {
	margin-top: 0.75rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* mt-8 grid grid-cols-2 gap-x-4 gap-y-10 sm:grid-cols-4 lg:grid-cols-7 */
.dm-ai__ind-grid {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1rem;
	row-gap: 2.5rem;
}

/* flex flex-col items-center gap-4 text-center */
.dm-ai__ind-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
}

/* relative flex h-14 w-14 items-center justify-center */
.dm-ai__ind-icon {
	position: relative;
	display: flex;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
}

/* absolute inset-0 rounded-full bg-[radial-gradient(circle,rgba(139,92,246,0.45),transparent_70%)] blur-lg */
.dm-ai__ind-halo {
	position: absolute;
	inset: 0;
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.45), transparent 70%);
	filter: blur(16px);
}

/* relative text-white/80 */
.dm-ai__ind-glyph {
	position: relative;
	color: rgba(255, 255, 255, 0.8);
}

/* h-8 w-8 */
.dm-ai__ind-glyph svg {
	display: block;
	width: 2rem;
	height: 2rem;
}

/* font-display text-sm font-bold leading-tight tracking-tight */
.dm-ai__ind-label {
	font-family: var(--font-display);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

@media (min-width: 640px) {
	.dm-ai__ind-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.dm-ai {
		padding-block: 7rem;
	}

	.dm-ai__ind {
		margin-top: 3.5rem;
	}

	.dm-ai__ind-title {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.dm-ai__grid {
		grid-template-columns: 1fr 1.6fr;
		gap: 2.5rem;
	}

	/* lg:sticky lg:top-0 lg:self-start lg:pr-8 */
	.dm-ai__intro {
		position: sticky;
		top: 0;
		align-self: start;
		padding-right: 2rem;
	}

	.dm-ai__ind-grid {
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
}

/* sections/digital-marketing-approach.css */
/**
 * Digital Marketing "Our Approach" — app/digital-marketing/page.tsx.
 * The band paint is .about-values and the card hover is .bento, both from
 * theme.css.
 */

/* about-values relative isolate overflow-hidden py-16 md:py-24 */
.dm-approach {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 4rem;
	/* Tailwind preflight line-height; the theme body is 1.6. */
	line-height: 1.5;
}

.dm-approach :where(h2, h3, p) {
	margin: 0;
}

/* h-xl mt-4 max-w-2xl !text-[clamp 2rem/4.5vw/3rem] */
.h-xl.dm-approach__title {
	margin-top: 1rem;
	max-width: 42rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-4 */
.dm-approach__grid {
	margin-top: 3rem;
	display: grid;
	gap: 1.25rem;
}

/* The reveal wrapper stands in for the grid item; the card fills it. */
.dm-approach__cell {
	display: flex;
	flex-direction: column;
}

/* bento rounded-2xl border p-7 md:p-8 (border-white/10 | border-black/5).
   .bento's own 1.25rem radius is unlayered in globals.css, so it wins over
   rounded-2xl there too. */
.dm-approach__card {
	flex: 1 1 auto;
	border: 1px solid rgba(0, 0, 0, 0.05);
	padding: 1.75rem;
}

.dm-approach__card--dark {
	border-color: rgba(255, 255, 255, 0.1);
}

/* inline-flex h-11 w-11 items-center justify-center rounded-xl */
.dm-approach__chip {
	display: inline-flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
}

.dm-approach__chip svg {
	display: block;
}

/* font-display mt-4 text-xl font-bold tracking-tight md:text-2xl */
.dm-approach__card-title {
	margin-top: 1rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* mt-3 text-sm font-semibold leading-relaxed text-ink/60 */
.dm-approach .dm-approach__card-text {
	margin-top: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.625;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.6);
}

/* text-white / text-white/75 */
.dm-approach__card--dark .dm-approach__card-title {
	color: #fff;
}

.dm-approach .dm-approach__card--dark .dm-approach__card-text {
	color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 640px) {
	.dm-approach__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.dm-approach {
		padding-block: 6rem;
	}

	.dm-approach__card {
		padding: 2rem;
	}

	.dm-approach__card-title {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.dm-approach__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* sections/digital-marketing-hero.css */
/**
 * Digital Marketing hero — app/digital-marketing/page.tsx, first <section>.
 * The band paint is .web-hero / .web-hero-scrim / .web-hero-glow from
 * theme.css; the photo is set inline.
 */

/* relative isolate overflow-hidden text-white */
.dm-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	/* Tailwind preflight line-height; the theme body is 1.6. */
	line-height: 1.5;
}

.dm-hero :where(h1, p) {
	margin: 0;
}

/* pointer-events-none absolute inset-0 -z-10 */
.dm-hero__layer {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* container-x flex min-h-[85svh] flex-col justify-end pb-20 pt-36 */
.dm-hero__inner {
	display: flex;
	min-height: 85svh;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 9rem;
	padding-bottom: 5rem;
}

/* flex items-center gap-2 text-[0.7rem] font-bold uppercase tracking-[0.18em] text-white/55 */
.dm-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
}

.dm-hero__crumb-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-hero__crumb-link:hover,
.dm-hero__crumb-current {
	color: #fff;
}

/* h-hero mt-7 max-w-4xl !text-[clamp 1.9rem/4.3vw/4.4rem] */
.h-hero.dm-hero__title {
	margin-top: 1.75rem;
	max-width: 56rem;
	font-size: clamp(1.9rem, 4.3vw, 4.4rem);
}

/* mt-6 max-w-2xl text-base font-semibold text-white/70 md:text-lg */
.dm-hero__intro {
	margin-top: 1.5rem;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

/* mt-9 flex flex-wrap items-center gap-4 */
.dm-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2.25rem;
}

/* Phones: the hero is no longer forced to 85% of the screen height, which
   left a large empty band above the breadcrumb. It is as tall as its content
   plus clear space under the header, and the button is a size smaller. */
@media (max-width: 767px) {
	.dm-hero__inner {
		min-height: 0;
		padding-top: 8rem;
		padding-bottom: 4rem;
	}

	.dm-hero__cta .pill {
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.dm-hero__inner {
		min-height: 90svh;
		padding-bottom: 6rem;
	}

	.dm-hero__intro {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}

/* sections/digital-marketing-services.css */
/**
 * Digital Marketing core services — app/digital-marketing/page.tsx,
 * <section id="digital-marketing-services">. The pastel photo layer is
 * .dm-services-bg from theme.css.
 */

/* relative isolate overflow-hidden bg-[#f3f3f5] py-20 text-ink md:py-28 */
.dm-services {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #f3f3f5;
	padding-block: 5rem;
	color: var(--color-ink);
	/* Tailwind preflight line-height; the theme body is 1.6. */
	line-height: 1.5;
}

.dm-services :where(h2, p) {
	margin: 0;
}

/* pointer-events-none absolute -inset-1/2 -z-10, rotate(40deg) */
.dm-services__bg {
	position: absolute;
	inset: -50%;
	z-index: -10;
	pointer-events: none;
	transform: rotate(40deg);
}

/* mt-6 */
.dm-services__head {
	margin-top: 1.5rem;
}

/* h-xl !text-[clamp 2rem/4.5vw/3rem] */
.h-xl.dm-services__title {
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* relative inline-block */
.dm-services__circled {
	position: relative;
	display: inline-block;
}

/* pointer-events-none absolute -inset-x-3 -inset-y-3 h-[calc 100%+1.5rem] w-[calc 100%+1.5rem] text-[#8ee000] */
.dm-services__circled svg {
	position: absolute;
	inset: -0.75rem;
	display: block;
	width: calc(100% + 1.5rem);
	height: calc(100% + 1.5rem);
	color: #8ee000;
	pointer-events: none;
}

/* mt-12 grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5 */
.dm-services__grid {
	margin-top: 3rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

/* relative min-h-[180px] overflow-hidden rounded-3xl md:min-h-[220px] */
.dm-services__photo {
	position: relative;
	min-height: 180px;
	overflow: hidden;
	border-radius: 1.5rem;
}

/* absolute inset-0 h-full w-full object-cover object-right */
.dm-services__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right;
}

/* flex min-h-[180px] flex-col justify-between rounded-3xl p-5 md:min-h-[220px] */
.dm-services__card {
	display: flex;
	min-height: 180px;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 1.5rem;
	padding: 1.25rem;
}

/* flex h-10 w-10 items-center justify-center rounded-xl */
.dm-services__icon {
	display: flex;
	width: 2.5rem;
	height: 2.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
}

/* h-5 w-5 */
.dm-services__icon svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* font-display text-base font-bold leading-snug tracking-tight */
.dm-services__card-title {
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.375;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* mt-2 text-sm leading-relaxed */
.dm-services .dm-services__card-text {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.625;
}

/* TONE_CLASSES.black */
.dm-services__card--black {
	background: #0b0b14;
}

.dm-services__card--black .dm-services__icon {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.dm-services__card--black .dm-services__card-title {
	color: #fff;
}

.dm-services__card--black .dm-services__card-text {
	color: rgba(255, 255, 255, 0.55);
}

/* TONE_CLASSES.gray */
.dm-services__card--gray {
	background: #e2e5ec;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.dm-services__card--gray .dm-services__icon {
	background: #fff;
	color: var(--color-ink);
}

.dm-services__card--gray .dm-services__card-title {
	color: var(--color-ink);
}

.dm-services__card--gray .dm-services__card-text {
	color: rgba(27, 28, 58, 0.55);
}

/* TONE_CLASSES.blue */
.dm-services__card--blue {
	background: #2f6bff;
}

.dm-services__card--blue .dm-services__icon {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.dm-services__card--blue .dm-services__card-title {
	color: #fff;
}

.dm-services__card--blue .dm-services__card-text {
	color: rgba(255, 255, 255, 0.7);
}

/* Phones: one service per row, full width, instead of two squeezed columns. */
@media (max-width: 639px) {
	.dm-services__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 640px) {
	.dm-services__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.dm-services {
		padding-block: 7rem;
	}

	.dm-services__photo,
	.dm-services__card {
		min-height: 220px;
	}
}

@media (min-width: 1024px) {
	.dm-services__grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

/* sections/digital-marketing-value.css */
/**
 * Digital Marketing value proposition — app/digital-marketing/page.tsx,
 * second <section>. Tailwind (v4) utilities -> rules, one comment per element.
 */

/* container-x py-24 md:py-32 */
.dm-value {
	padding-block: 6rem;
	/* Tailwind preflight line-height; the theme body is 1.6. */
	line-height: 1.5;
}

.dm-value :where(h2, p) {
	margin: 0;
}

/* grid gap-12 lg:grid-cols-2 lg:items-center lg:gap-16 */
.dm-value__grid {
	display: grid;
	gap: 3rem;
}

/* h-xl mt-6 max-w-xl !text-[clamp 2rem/4.5vw/3rem] */
.h-xl.dm-value__title {
	margin-top: 1.5rem;
	max-width: 36rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* mt-6 > p max-w-lg leading-relaxed text-ink/60 */
.dm-value__lead {
	margin-top: 1.5rem;
}

.dm-value__lead p {
	max-width: 32rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* grid grid-cols-1 gap-4 md:grid-cols-2 */
.dm-value__collage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

/* flex flex-col rounded-2xl bg-gradient-to-b from-[#e9f1f7] to-[#e6f4ee] p-5 */
.dm-value__chart-card {
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
	background-image: linear-gradient(to bottom, #e9f1f7, #e6f4ee);
	padding: 1.25rem;
}

/* flex items-start justify-between gap-2 */
.dm-value__chart-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
}

/* font-display text-base font-bold tracking-tight text-ink */
.dm-value__card-title {
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

/* mt-1 text-xs leading-relaxed text-ink/55 */
.dm-value .dm-value__card-text {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.55);
}

/* flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white text-[#1fa971] shadow-sm */
.dm-value__trend {
	display: flex;
	width: 2rem;
	height: 2rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #fff;
	color: #1fa971;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.dm-value__trend svg,
.dm-value__view svg,
.dm-value__check svg,
.dm-value__mail svg {
	display: block;
	width: 1rem;
	height: 1rem;
}

/* relative mt-6 */
.dm-value__chart {
	position: relative;
	margin-top: 1.5rem;
}

/* h-24 w-full */
.dm-value__chart svg {
	display: block;
	width: 100%;
	height: 6rem;
}

/* absolute left-1/2 top-1 -translate-x-1/2 rounded-full bg-[#1fa971] px-2.5 py-1 text-xs font-bold text-white shadow-sm */
.dm-value__peak {
	position: absolute;
	left: 50%;
	top: 0.25rem;
	transform: translateX(-50%);
	border-radius: 9999px;
	background: #1fa971;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: #fff;
	white-space: nowrap;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

/* mt-auto inline-flex w-fit items-center gap-2 rounded-full border border-black/10 bg-white
   px-4 py-2 text-xs font-bold text-ink transition-colors hover:border-black/20 */
.dm-value__view {
	margin-top: auto;
	display: inline-flex;
	width: fit-content;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 9999px;
	background: #fff;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: 150ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-value__view:hover {
	border-color: rgba(0, 0, 0, 0.2);
}

/* text-[#8b5cf6] */
.dm-value__view svg {
	color: #8b5cf6;
}

/* flex flex-col gap-4 */
.dm-value__side {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.dm-value__photo-wrap {
	position: relative;
}

/* relative aspect-[4/3] overflow-hidden rounded-2xl */
.dm-value__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 1rem;
}

/* absolute inset-0 h-full w-full object-cover object-right */
.dm-value__photo img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right;
}

/* flex items-center gap-2 rounded-full bg-white px-3 py-1.5 text-xs font-bold text-ink shadow-lg */
.dm-value__badge {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	background: #fff;
	padding: 0.375rem 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: var(--color-ink);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* absolute -top-3 left-2 */
.dm-value__badge--top {
	top: -0.75rem;
	left: 0.5rem;
}

/* absolute -bottom-3 -right-2 */
.dm-value__badge--bottom {
	bottom: -0.75rem;
	right: -0.5rem;
}

/* flex h-4 w-4 items-center justify-center rounded-full bg-[#8b5cf6] text-white */
.dm-value__badge-icon {
	display: flex;
	width: 1rem;
	height: 1rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #8b5cf6;
	color: #fff;
}

/* h-2.5 w-2.5 */
.dm-value__badge-icon svg {
	display: block;
	width: 0.625rem;
	height: 0.625rem;
}

/* h-2 w-2 rounded-full bg-[#8b5cf6] */
.dm-value__badge-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: #8b5cf6;
}

/* absolute -top-2 -right-2 flex h-8 w-8 items-center justify-center rounded-full bg-white text-[#8b5cf6] shadow-lg */
.dm-value__check {
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	display: flex;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #fff;
	color: #8b5cf6;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* relative flex flex-1 flex-col justify-center rounded-2xl bg-[#f0e7fb] p-5 */
.dm-value__team {
	position: relative;
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	justify-content: center;
	border-radius: 1rem;
	background: #f0e7fb;
	padding: 1.25rem;
}

/* font-display text-base font-bold leading-snug tracking-tight text-ink */
.dm-value__team-title {
	font-family: var(--font-display);
	font-size: 1rem;
	line-height: 1.375;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

/* mt-4 flex -space-x-3 */
.dm-value__avatars {
	margin-top: 1rem;
	display: flex;
}

/* h-8 w-8 rounded-full border-2 border-white object-cover */
.dm-value__avatars img {
	display: block;
	width: 2rem;
	height: 2rem;
	border: 2px solid #fff;
	border-radius: 9999px;
	object-fit: cover;
}

.dm-value__avatars img + img {
	margin-left: -0.75rem;
}

/* mt-3 text-xs font-semibold text-ink/55 */
.dm-value .dm-value__team-caption {
	margin-top: 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.55);
}

/* absolute bottom-4 right-4 flex h-9 w-9 items-center justify-center rounded-full bg-[#e6d8fb] text-[#8b5cf6] */
.dm-value__mail {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	display: flex;
	width: 2.25rem;
	height: 2.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background: #e6d8fb;
	color: #8b5cf6;
}

/* Phones: the photo box shrinks to the picture. It is 4:3 but the picture is
   about 2.2:1, and Elementor's own "img { height: auto }" keeps the picture
   from stretching to fill the box — which left a 100px empty band under it and
   pushed the team card that far away. */
@media (max-width: 767px) {
	/* the empty band above and below the section: 96px each -> 56px */
	.dm-value {
		padding-block: 3.5rem;
	}

	.dm-value .dm-value__photo {
		aspect-ratio: 1920 / 866;
	}

	.dm-value .dm-value__photo img {
		height: 100%;
	}
}

@media (min-width: 768px) {
	.dm-value {
		padding-block: 8rem;
	}

	.dm-value__collage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.dm-value__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		gap: 4rem;
	}
}

/* sections/digital-marketing-why.css */
/**
 * Digital Marketing "Why Choose Us" — app/digital-marketing/page.tsx.
 * The glow is .web-dev-glow from theme.css.
 */

/* relative isolate overflow-hidden bg-[#0a0a12] py-20 text-white md:py-28 */
.dm-why {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #0a0a12;
	color: #fff;
	padding-block: 5rem;
	/* Tailwind preflight line-height; the theme body is 1.6. */
	line-height: 1.5;
}

.dm-why :where(h2, h3, p) {
	margin: 0;
}

/* pointer-events-none absolute inset-0 -z-10 */
.dm-why__glow {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* the page-level <svg width="0" height="0" class="absolute"> holding #webGrad */
.dm-why__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* container-x grid gap-12 lg:grid-cols-[2fr_3fr] lg:gap-16 */
.dm-why__grid {
	display: grid;
	gap: 3rem;
}

/* min-w-0 */
.dm-why__lead,
.dm-why__cards {
	min-width: 0;
}

/* label text-onv */
.dm-why__eyebrow {
	color: var(--color-onv);
}

/* h-xl mt-4 !text-[clamp 1.9rem/4vw/3rem] */
.h-xl.dm-why__title {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

/* Reveal mt-6 > p max-w-md leading-relaxed text-white/55 */
.dm-why__body {
	margin-top: 1.5rem;
}

.dm-why__body p {
	max-width: 28rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

/* Reveal mt-8 */
.dm-why__cta {
	margin-top: 2rem;
}

/* grid min-w-0 grid-cols-1 gap-4 sm:grid-cols-3 */
.dm-why__cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
}

/* The reveal wrapper stands in for the grid item; the card fills it. */
.dm-why__cell {
	display: flex;
	flex-direction: column;
}

/* flex flex-col items-center gap-4 rounded-2xl border border-white/10 bg-white/[0.04] p-6 text-center
   transition-colors duration-300 hover:border-white/20 hover:bg-white/[0.07] */
.dm-why__card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.04);
	padding: 1.5rem;
	text-align: center;
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-duration: 300ms;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.dm-why__card:hover {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.07);
}

/* h-10 w-10 */
.dm-why__icon {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
}

/* font-display text-lg font-bold leading-snug tracking-tight */
.dm-why__card-title {
	font-family: var(--font-display);
	font-size: 1.125rem;
	line-height: 1.375;
	font-weight: 700;
	letter-spacing: -0.025em;
}

@media (min-width: 640px) {
	.dm-why__cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Phones: the button steps down a size, to match the other section buttons. */
@media (max-width: 767px) {
	.dm-why__cta .pill {
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.dm-why {
		padding-block: 7rem;
	}
}

@media (min-width: 1024px) {
	.dm-why__grid {
		grid-template-columns: 2fr 3fr;
		gap: 4rem;
	}
}

/* sections/faq.css */
/**
 * Section: faq — the accordion band.
 *
 * Ported from components/Faq.tsx. Every Tailwind utility in the source is
 * written out here as real CSS; the pieces that already exist in theme.css —
 * .container-x, .label, .text-violet, .h-lg, .h-md and the .acc-panel grid
 * transition — are reused by name and are not redefined.
 *
 * Tailwind values used by the source, for reference:
 *   py-20 md:py-28  = 5rem / 7rem        gap-6  = 1.5rem
 *   mt-4            = 1rem               py-6   = 1.5rem
 *   mt-10 md:mt-14  = 2.5rem / 3.5rem    h-8 w-8 = 2rem
 *   max-w-xl        = 36rem              w-3.5  = 0.875rem
 *   max-w-3xl       = 48rem              pb-7   = 1.75rem
 *   leading-relaxed = 1.625
 */

/* ---------- band ----------
   Beats `.site-main > section`'s shared rhythm so the section keeps the
   padding the React prop carried. The doubled class matches that rule's
   specificity for the cases where the section is not a direct child of
   .site-main (Elementor wraps it). */

.site-main > .digiops-faq,
.digiops-faq.digiops-faq {
	padding-block: 5rem;
}

@media (min-width: 768px) {
	.site-main > .digiops-faq,
	.digiops-faq.digiops-faq {
		padding-block: 7rem;
	}
}

/* `padding="py-16 md:py-[89.6px]"` (training) and `py-16 md:py-[90px]`
   (AutoBGV) — the same rhythm to within half a pixel, offered as one option.
   Declared after the default so it wins at equal specificity. */

.site-main > .digiops-faq--compact,
.digiops-faq--compact.digiops-faq--compact {
	padding-block: 4rem;
}

@media (min-width: 768px) {
	.site-main > .digiops-faq--compact,
	.digiops-faq--compact.digiops-faq--compact {
		padding-block: 89.6px;
	}
}

/* ---------- heading ---------- */

.digiops-faq__title {
	margin-top: 1rem;
	max-width: 36rem;
}

/* ---------- list ----------
   theme.css still carries the earlier generic FAQ block (its section 14),
   which caps this list at 52rem and draws a border on every side of a row.
   That file belongs to the design system and is not mine to edit, so the two
   declarations that would fight the port are cancelled here — this sheet is
   enqueued after theme.css, so an equal-specificity rule wins. If that block
   is ever dropped, these are simply no-ops. */

.digiops-faq__list {
	margin-top: 2.5rem;
	max-width: none;
	border-top: 0;
}

@media (min-width: 768px) {
	.digiops-faq__list {
		margin-top: 3.5rem;
	}
}

/* `border-t border-tint last:border-b` — one hairline above every row and a
   closing one under the last, not a border per row (see the note above). */
.digiops-faq__item {
	border-top: 1px solid var(--color-tint);
	border-bottom: 0;
}

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

/* ---------- question row ----------
   The source's <button className="flex w-full items-center justify-between
   gap-6 py-6 text-left">. The marker is removed in both spellings: Safari
   still uses the -webkit pseudo-element. */

.digiops-faq__q {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.5rem;
	text-align: left;
	cursor: pointer;
	list-style: none;
	/* iOS otherwise flashes a grey box over the whole row on tap. */
	-webkit-tap-highlight-color: transparent;
}

.digiops-faq__q::-webkit-details-marker {
	display: none;
}

/* The row is the control, so the focus ring belongs to the whole row. */
.digiops-faq__q:focus-visible {
	outline: 2px solid var(--color-violet);
	outline-offset: 2px;
	border-radius: 0.5rem;
}

.digiops-faq__q-text {
	display: block;
}

/* ---------- the plus / minus mark ----------
   `relative h-8 w-8 shrink-0 rounded-full border transition-colors
   duration-300`, with two absolutely centred 1.5px x 0.875rem bars. Closed,
   the second bar is rotated 90deg so the pair reads as a plus; open, it
   returns to 0deg and the pair collapses into a single minus. Only the
   circle's colours and the bar's rotation transition — the bars' own colour
   snaps, exactly as in the source, which puts transition-colors on the
   circle alone. */

.digiops-faq__mark {
	position: relative;
	flex: 0 0 auto;
	height: 2rem;
	width: 2rem;
	border-radius: 999px;
	border: 1px solid var(--color-tint);
	transition: background-color 0.3s, border-color 0.3s;
}

.digiops-faq__bar {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 1.5px;
	width: 0.875rem;
	transform: translate(-50%, -50%);
	background: var(--color-ink);
}

.digiops-faq__bar--turn {
	transform: translate(-50%, -50%) rotate(90deg);
	transition: transform 0.3s;
}

.digiops-faq__item[open] .digiops-faq__mark {
	border-color: var(--color-violet);
	background: var(--color-violet);
}

.digiops-faq__item[open] .digiops-faq__bar {
	background: #fff;
}

.digiops-faq__item[open] .digiops-faq__bar--turn {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* ---------- answer ----------
   `max-w-3xl pb-7 leading-relaxed text-ink/70`. The panel itself is
   theme.css's .acc-panel: a grid whose single row tweens between
   minmax 0/0fr and minmax 0/1fr.

   A closed <details> does not render its panel at all, so the open state has
   to come from the attribute rather than a class. assets/js/sections/faq.js
   drives the close with an inline grid-template-rows, which outranks this
   rule, holds the element open for the length of the tween and then drops
   the attribute — which is how the panel gets an animated close as well as
   an animated open. With no script the row simply appears, already open. */

.digiops-faq__item[open] .digiops-faq__panel {
	grid-template-rows: minmax(0, 1fr);
}

.digiops-faq__a {
	max-width: 48rem;
	margin: 0;
	padding-bottom: 1.75rem;
	line-height: 1.625;
	/* text-ink/70 */
	color: rgba(27, 28, 58, 0.7);
}

/* ---------- reveal ----------
   <Reveal stagger> tweened the list's children, not the list, from one
   trigger. So the list keeps data-digiops-reveal only to be observed, its
   own fade is cancelled, and the rows carry the hidden state and play 0.09s
   apart — the GSAP stagger value from Reveal.tsx. */

.js .digiops-faq__list[data-digiops-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
	will-change: auto;
}

.js .digiops-faq__list[data-digiops-reveal] > .digiops-faq__item {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--digiops-faq-i, 0) * 0.09s);
	will-change: opacity, transform;
}

.js .digiops-faq__list[data-digiops-reveal].is-revealed > .digiops-faq__item {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js .digiops-faq__list[data-digiops-reveal] > .digiops-faq__item {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.digiops-faq__mark,
	.digiops-faq__bar--turn {
		transition: none;
	}
}

/* sections/hero.css */
/**
 * Home hero — ported from components/home/HeroSection.tsx.
 *
 * Every rule below is the Tailwind utility the React source carried, resolved:
 *   pt-28 = 7rem, md:pt-32 = 8rem, pb-20 = 5rem, mt-6 = 1.5rem,
 *   mt-9 = 2.25rem, mt-14 = 3.5rem, gap-4 = 1rem, gap-2.5 = 0.625rem,
 *   gap-y-7 = 1.75rem, max-w-md = 28rem, max-w-3xl = 48rem,
 *   max-w-4xl = 56rem, max-w-xl = 36rem, h-9/w-9 = 2.25rem,
 *   text-base = 1rem/1.5rem, text-lg = 1.125rem/1.75rem, text-xs = 0.75rem.
 * `md:` is min-width 768px and `max-md:` is max-width 767px.
 *
 * theme.css no longer defines any generic .digiops-hero rule, so nothing here
 * depends on winning a source-order tie. What this sheet still shares with
 * theme.css is deliberate and unduplicated: the breathing scrim and its two
 * drifting shadow blobs on `.home-hero-scrim`, the copy's text-shadow, and
 * the word-mask reveal on [data-digiops-wm]. The background paint, which used
 * to come from `.home-hero` in theme.css with a hard-coded image URL, is
 * declared here instead so the Background image field can actually be
 * cleared — see section 1.
 */

/* ============================================================
   1. The band
   ============================================================ */

/* React: `relative isolate flex min-h-[100svh] items-center overflow-hidden
   text-white` on the section, with `data-nav-dark`. */
.digiops-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	color: #fff;
	/* a hero supplies its own vertical rhythm */
	padding-block: 0;
	/* Background paint. globals.css hard-coded the image URL on .home-hero,
	   which meant clearing the Background image field silently fell back to
	   Home_BG.webp. The template now sets --digiops-hero-image instead, and
	   omits it entirely when the field is empty — so an empty field resolves
	   to `none` and the brand-violet base shows through, which is what the
	   control promises. This rule also overrides theme.css's .home-hero
	   background-image (same specificity, later sheet). */
	background-color: var(--color-violet);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* theme.css still carries globals.css's `.home-hero { background-image:
   url(../images/Home_BG.webp) }` — the literal port of the original sheet, and
   not ours to delete. A bare `.digiops-hero` here would only beat it by
   source order, so the paint is re-declared on the two classes the section
   always prints together (0,2,0). That wins outright, whatever order the
   sheets land in, and is what makes the Background image field clearable:
   the template omits --digiops-hero-image entirely when the field is empty,
   so it resolves to `none` and the brand-violet base shows through. */
.home-hero.digiops-hero {
	background-image: var(--digiops-hero-image, none);
}

/* React: `pointer-events-none absolute inset-0 -z-10`. The section makes its
   own stacking context, so the scrim sits over the background image and under
   the copy. */
.digiops-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* React: `container-x flex flex-col items-center pb-20 pt-28 text-center`. */
.digiops-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 7rem;
	padding-bottom: 5rem;
}

@media (min-width: 768px) {
	/* md:pt-32 */
	.digiops-hero__inner {
		padding-top: 8rem;
	}
}

/* ============================================================
   2. Headline and body
   ============================================================ */

/* React: <TextReveal as="h1" className="h-hero mx-auto max-w-4xl
   !text-[clamp 2.25rem/5.2vw/4.5rem]" delay={0.2} /> — the hero scale,
   deliberately stepped down from the .h-hero default. The `!` in the original
   was Tailwind's way of beating .h-hero's own clamp; here the element carries
   both classes, so the selector is scoped to the section (0,2,0) to beat
   theme.css's `.h-hero` on specificity rather than on sheet order.

   The reveal itself is the theme's word-mask primitive: digiops_text_reveal()
   emits .wm/.wm-i per word and theme.css slides each word up from
   translateY(120%) over 0.9s, staggered 0.03s by --wm-i. The delay={0.2} is
   carried by --wm-delay on the element, so nothing is needed here for it. */
.digiops-hero .digiops-hero__title {
	max-width: 56rem;
	margin-inline: auto;
	font-size: clamp(2.25rem, 5.2vw, 4.5rem);
}

/* React: `mx-auto mt-6 max-w-xl text-base font-semibold text-white/75
   md:text-lg`. Tailwind's font-size utilities each carry their own
   line-height, so the md step changes both. */
.digiops-hero__body {
	max-width: 36rem;
	margin: 1.5rem auto 0;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
}

@media (min-width: 768px) {
	.digiops-hero__body {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}

/* ============================================================
   3. CTAs
   ============================================================ */

/* React: `mt-9 flex flex-wrap items-center justify-center gap-4`. */
.digiops-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2.25rem;
}

/* React: `max-md:order-last max-md:mt-10 max-md:flex-nowrap max-md:gap-3`, with
   the pills trimmed down so both fit one row without wrapping
   (`max-md:!px-4 max-md:!py-2.5 max-md:!text-[0.8rem]`). */
@media (max-width: 767px) {
	.digiops-hero__ctas {
		order: 9999;
		flex-wrap: nowrap;
		gap: 0.75rem;
		margin-top: 2.5rem;
	}

	.digiops-hero__ctas .pill {
		padding: 0.625rem 1rem;
		font-size: 0.8rem;
	}
}

/* ============================================================
   4. Capability strip
   ============================================================ */

/* React: `mt-14 grid w-full max-w-md grid-cols-3 items-stretch gap-y-7
   md:max-w-3xl md:grid-cols-6 md:gap-y-0`. */
.digiops-hero__caps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	row-gap: 1.75rem;
	width: 100%;
	max-width: 28rem;
	margin-top: 3.5rem;
}

@media (min-width: 768px) {
	.digiops-hero__caps {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		max-width: 48rem;
		/* React set md:gap-y-0, which is invisible with the six items it
		   shipped — six items are one row, and a row gap between one row and
		   nothing is nothing. The repeater is uncapped, though, so a seventh
		   item wraps to a second row: keeping the gap here is identical for
		   six and stops two rows from colliding beyond that. */
		row-gap: 1.75rem;
	}
}

/* React: `flex flex-col items-center gap-2.5 px-2 py-1`. */
.digiops-hero__cap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.625rem;
	padding: 0.25rem 0.5rem;
}

/* Hairline dividers: every item carries a rule except the one that starts its
   row, and the row changes with the column count — three across below 768px,
   six across above it. So the two widths carry independent classes rather
   than React's single `i % 3`, which puts a stray hairline on the start of
   the second row once the repeater holds more than six items. */
@media (max-width: 767px) {
	.digiops-hero__cap--rule-sm {
		border-left: 1px solid rgba(255, 255, 255, 0.2);
	}
}

@media (min-width: 768px) {
	.digiops-hero__cap--rule-md {
		border-left: 1px solid rgba(255, 255, 255, 0.2);
	}
}

/* React: `h-9 w-9 brightness-0 invert` — black source icons rendered white. */
.digiops-hero__cap-icon {
	height: 2.25rem;
	width: 2.25rem;
	filter: brightness(0) invert(1);
}

/* React: `text-xs font-semibold text-white`. */
.digiops-hero__cap-label {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: #fff;
}

/* sections/highlight-band.css */
/**
 * Highlight band — home page portfolio strip.
 *
 * A port of components/home/HighlightBand.tsx. The Tailwind utility strings in
 * the original are written out here as real rules; the shared pieces it leaned
 * on (.container-x, .label, .h-xl, .marquee, .marquee-track,
 * .marquee-hover-pause, .no-scrollbar, .outline-word-dark, .home-highlight)
 * already live in theme.css and are reused by name.
 *
 * Breakpoints match Tailwind's defaults: sm 640px, md 768px, lg 1024px.
 */

/* `pt-16 pb-[34px] md:pt-24 md:pb-[46px]` — the band sets its own rhythm, so
   it has to out-specify `.site-main > section`'s shared section padding. */
.digiops-highlight,
.site-main > .digiops-highlight {
	overflow: hidden;
	padding-block: 4rem 34px;
}

@media ( min-width: 768px ) {
	.digiops-highlight,
	.site-main > .digiops-highlight {
		padding-block: 6rem 46px;
	}
}

/* ---------- intro: title ~40% left, tags ~60% right ---------- */

.digiops-highlight__top {
	display: grid;
	align-items: center;
	gap: 2rem;
}

@media ( min-width: 768px ) {
	.digiops-highlight__top {
		grid-template-columns: 2fr 3fr;
		gap: 3rem;
	}
}

/* `min-w-0` — without it a grid column refuses to shrink below the width of
   the marquee inside it and the whole band overflows. */
.digiops-highlight__col {
	min-width: 0;
}

.digiops-highlight__eyebrow {
	color: var(--color-violet);
}

/* `h-xl mt-4 !text-[clamp 2rem/4.5vw/3rem]` — the band's title is a step
   smaller than a regular h-xl, hence the doubled-up selector. */
.h-xl.digiops-highlight__heading {
	margin-top: 1rem;
	font-size: clamp( 2rem, 4.5vw, 3rem );
	color: var(--color-ink);
}

.digiops-highlight__intro {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba( 27, 28, 58, 0.7 );
}

@media ( min-width: 1024px ) {
	.digiops-highlight__intro {
		font-size: 1.125rem;
	}
}

/* ---------- word marquee ---------- */

.digiops-highlight__words {
	margin-top: 1.5rem;
}

.digiops-highlight__word-row {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.digiops-highlight__word-wrap {
	display: flex;
	align-items: center;
}

.digiops-highlight__word {
	font-size: clamp( 1rem, 2.1vw, 2rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
	white-space: nowrap;
	/* Every word in the design is set in capitals (both WORDS lists in the
	   original). Uppercasing here rather than in the copy lets the brand be
	   stored with its correct capitalisation and still display in capitals. */
	text-transform: uppercase;
}

.digiops-highlight__sep {
	margin-inline: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: rgba( 27, 28, 58, 0.25 );
}

@media ( min-width: 768px ) {
	.digiops-highlight__sep {
		margin-inline: 2rem;
	}
}

/* ---------- work showcase ----------
   Horizontal overflow is kept from the original so the strip can be dragged
   while the animation is paused under the pointer. The vertical padding on the
   track is what gives the hover scale somewhere to grow into. */

/* Compounded with .marquee on purpose: theme.css's .marquee sets
   `overflow: hidden` at the same specificity, and the original sets
   overflowX:auto inline on this element. Winning on specificity rather than
   on stylesheet order keeps the drag-through behaviour if the enqueue order
   ever changes. */
.marquee.digiops-highlight__shots {
	margin-top: 1rem;
	overflow-x: auto;
	overflow-y: hidden;
}

@media ( min-width: 768px ) {
	.marquee.digiops-highlight__shots {
		margin-top: 2rem;
	}
}

.digiops-highlight__track {
	padding-block: 3.5rem;
}

.digiops-highlight__shot {
	position: relative; /* so `hover:z-10` actually has something to stack against */
	margin-right: 1.25rem;
	width: 88vw;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid rgba( 217, 218, 245, 0.6 );
	background: #fff;
	box-shadow: 0 12px 34px -20px rgba( 44, 46, 126, 0.45 );
	/* `transition-all duration-500` — Tailwind's default easing, not `ease`,
	   or the scale and the shadow lift arrive on a different curve. */
	transition: all 0.5s cubic-bezier( 0.4, 0, 0.2, 1 );
}

.digiops-highlight__shot:hover {
	z-index: 10;
	transform: scale( 1.06 );
	box-shadow: 0 18px 44px -16px rgba( 44, 46, 126, 0.5 );
}

@media ( min-width: 640px ) {
	.digiops-highlight__shot {
		margin-right: 1.5rem;
		width: 50vw;
	}
}

@media ( min-width: 1024px ) {
	.digiops-highlight__shot {
		width: 35vw;
	}
}

.digiops-highlight__shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 900 / 560;
	object-fit: cover;
	object-position: top;
}

/* The original's globals.css does not remove the hover scale under reduced
   motion — it squashes every transition to 0.01ms, so the card still grows,
   it just gets there instantly. Matched here rather than cancelling the
   transform, which would be a different behaviour from the source. The
   looping marquee animation is a separate matter and theme.css already stops
   .marquee-track outright, because an infinite animation sped up to 0.01ms
   repaints forever. */
@media ( prefers-reduced-motion: reduce ) {
	.digiops-highlight__shot {
		transition-duration: 0.01ms;
	}
}

/* sections/legal-page.css */
/**
 * Section: legal-page — ported from components/LegalPage.tsx.
 *
 * .container-x, .tagpill, .h-xl and .h-md come from theme.css. Tailwind
 * utilities in the source, written out:
 *   pb-24 pt-40 md:pt-48  = 6rem / 10rem / 12rem (md = 768px)
 *   max-w-3xl mx-auto     = 48rem, centred
 *   gap-3 text-xs         = 0.75rem; 0.75rem / 1rem line
 *   mt-8 mt-6 mt-14 mt-10 = 2rem, 1.5rem, 3.5rem, 2.5rem
 *   text-lg leading-relaxed = 1.125rem / 1.625
 *   ink/50 ink/60 ink/75  = #1b1c3a at 50%, 60%, 75%
 */

.digiops-legal {
	padding-top: 10rem;
	padding-bottom: 6rem;
}

@media (min-width: 768px) {
	.digiops-legal {
		padding-top: 12rem;
	}
}

.digiops-legal__head,
.digiops-legal__body {
	max-width: 48rem;
	margin-inline: auto;
}

.digiops-legal__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.5);
}

.digiops-legal__title {
	margin-top: 2rem;
	margin-bottom: 0;
}

.digiops-legal__intro-wrap {
	margin-top: 1.5rem;
}

.digiops-legal__intro {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.625;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-legal__body {
	margin-top: 3.5rem;
}

.digiops-legal__h {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	font-weight: 700;
	color: var(--color-deep);
}

.digiops-legal__p {
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
	line-height: 1.85;
	color: rgba(27, 28, 58, 0.75);
}

/* sections/lp-channels.css */
/**
 * Landing page channel cards — centred head, then a six-up row of cards that
 * falls to three, two and one as the viewport narrows.
 */

.lp-channels {
	background: var(--lp-band);
}

.lp-channels__head {
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
}

.lp-channels__head .lp-lead {
	margin-top: 0.85rem;
}

.lp-channels__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.lp-channels__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 860px) {
	.lp-channels__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1180px) {
	.lp-channels__grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

.lp-channels__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: 1.6rem 1rem 1.75rem;
	text-align: center;
}

.lp-channels__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-bottom: 0.35rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 4px 14px rgba(12, 35, 64, 0.08);
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--lp-blue);
}

.lp-channels__mark img {
	display: block;
	width: 1.6rem;
	height: 1.6rem;
	object-fit: contain;
}

.lp-channels__mark .lp-brand {
	width: 1.7rem;
	height: 1.7rem;
}

/* The pair is wider than the tile, so that card's mark sits on a pill rather
   than a circle and is allowed to run past the usual width. */
.lp-channels__mark:has(.lp-brand--wide) {
	width: auto;
	min-width: 3.9rem;
	padding-inline: 0.7rem;
	border-radius: 999px;
}

.lp-channels__mark .lp-brand--wide {
	width: 2.6rem;
	height: 1.35rem;
}

.lp-channels__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lp-navy);
}

.lp-channels__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--lp-slate);
}

/* sections/lp-conversion.css */
/**
 * Landing page image and checklist block — two tinted panels side by side.
 */

.lp-conversion {
	background: #fff;
	padding-block: clamp(0rem, 1vw, 1rem) clamp(2rem, 4vw, 3rem);
}

.lp-conversion__inner {
	display: grid;
	gap: 1.25rem;
	align-items: stretch;
}

@media (min-width: 980px) {
	.lp-conversion__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.lp-conversion__figure {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 1rem;
	background: #eaf4fd;
	padding: clamp(1.25rem, 3vw, 2rem);
	overflow: hidden;
}

.lp-conversion__figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

.lp-conversion__placeholder {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 0.5rem;
	background: linear-gradient(135deg, #dbe9f8, #f2f8fd);
}

.lp-conversion__copy {
	border-radius: 1rem;
	background: #f4fafe;
	padding: clamp(1.5rem, 3vw, 2.1rem);
}

.lp-conversion__copy .lp-lead {
	max-width: 44ch;
}

.lp-conversion__list {
	margin-top: 1.5rem;
}

/* A filled disc for the tick here, rather than the bare stroke the service
   lists use — it is the design's own distinction between the two. */
.lp-conversion__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.2rem;
	border-radius: 999px;
	background: var(--lp-green);
	color: #fff;
}

.lp-conversion__tick .lp-icon {
	width: 0.8rem;
	height: 0.8rem;
	margin: 0;
}

/* sections/lp-cta.css */
/**
 * Landing page closing band — navy, three columns on a wide screen, stacked
 * below it.
 */

.lp-cta {
	background: #0a2d57;
	padding-block: clamp(2rem, 3.5vw, 2.75rem);
	color: #fff;
}

.lp-cta__inner {
	display: grid;
	gap: 1.5rem;
	align-items: center;
}

@media (min-width: 980px) {
	.lp-cta__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr) auto;
		gap: 2.5rem;
	}
}

.lp-cta__eyebrow {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6fc6f5;
}

.lp-cta__title {
	margin: 0.75rem 0 0;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.7rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: #fff;
	max-width: 24ch;
}

.lp-cta__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.75);
	max-width: 36ch;
}

.lp-cta__action {
	display: flex;
}

@media (min-width: 980px) {
	.lp-cta__action {
		justify-content: flex-end;
	}
}

/* sections/lp-demand.css */
/**
 * Landing page demand journey and service checklists — two panels side by
 * side, the mint one carrying a horizontal step flow.
 */

.lp-demand {
	background: #fff;
	padding-block: clamp(0rem, 1vw, 1rem) clamp(2rem, 4vw, 3rem);
}

.lp-demand__inner {
	display: grid;
	gap: 1.25rem;
	align-items: stretch;
}

@media (min-width: 980px) {
	.lp-demand__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.lp-demand__panel {
	border-radius: 1rem;
	padding: clamp(1.5rem, 3vw, 2.1rem);
}

.lp-demand__panel--mint {
	background: var(--lp-mint);
}

.lp-demand__panel--services {
	background: #fbfdff;
	border: 1px solid var(--lp-line);
}

.lp-demand__panel .lp-lead {
	max-width: 42ch;
}

/* ---------- the journey ---------- */

.lp-demand__flow {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.lp-demand__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	position: relative;
	flex: 1 1 4.5rem;
	min-width: 4.5rem;
	text-align: center;
}

.lp-demand__step-tile {
	background: #fff;
	color: var(--lp-blue);
	box-shadow: 0 4px 14px rgba(12, 35, 64, 0.07);
}

.lp-demand__step-label {
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lp-navy);
	max-width: 6rem;
}

/* The arrow sits between two steps, level with the tiles rather than the
   labels, which are a line taller on some steps than others. */
.lp-demand__arrow {
	position: absolute;
	top: 1.5rem;
	right: -0.6rem;
	transform: translateY(-50%);
	font-size: 0.9rem;
	line-height: 1;
	color: #9fb8cc;
}

/* ---------- services ---------- */

.lp-demand__groups {
	display: grid;
	gap: 1.75rem;
	margin-top: 1.75rem;
}

@media (min-width: 620px) {
	.lp-demand__groups {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem;
	}

	/* A hairline between the two lists, as in the design. */
	.lp-demand__group + .lp-demand__group {
		border-left: 1px solid var(--lp-line);
		padding-left: 2rem;
	}
}

.lp-demand__group-head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.lp-demand__group-icon {
	display: inline-flex;
	color: var(--lp-blue);
}

.lp-demand__group-icon .lp-icon {
	width: 1.75rem;
	height: 1.75rem;
}

.lp-demand__group-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--lp-navy);
}

/* sections/lp-elementor.css */
/**
 * The campaign landing page, applied to Elementor's own markup.
 *
 * Every rule starts at .lpe, the class each section band carries. That makes
 * them three classes deep: enough to beat Elementor's defaults and its global
 * kit typography (two), not enough to beat anything set on an element in the
 * panel (four). The design holds until an editor changes something; then the
 * editor's change wins.
 *
 * A widget's CSS classes land on its outer wrapper, so these rules reach
 * through to the element that actually carries the type — the heading title,
 * the paragraph, the icon.
 *
 * Measurements come from the attached design, scaled to the 1216px content
 * width the rest of the site uses.
 */

/* ============================================================
   Ground rules
   ============================================================ */

/*
 * --u is one pixel of the design at the current content width. The design is
 * a fixed comp: at full width (content 1216px) --u is exactly 1px; between
 * 1025px and 1255px it shrinks in proportion to the content, so a headline
 * that breaks onto three lines at 1440 still breaks onto three at 1092 instead
 * of four. At tablet and phone the layout stacks and the sizes at the end of
 * this file take over, so it stays 1px there.
 */
.lpe {
	--u: 1px;
	--lp-ink: #111318;
	--lp-olive: #98b651;
	--lp-blue: #2b7fd4;
	--lp-slate: #5a6b7d;
	--lp-grey: #6b7280;
	--lpe-ink: #111318;
	--lpe-navy: #0c2340;
	--lpe-blue: #2b7fd4;
	--lpe-slate: #5a6b7d;
	--lpe-grey: #6b7280;
	--lpe-olive: #98b651;
	--lpe-green: #22a06b;
	--lpe-line: #e6eef6;
	font-family: var(--font-body);
}

/* ---------- the rows ----------
   Each row reproduces .container-x, the box the site header sits in: at most
   84rem wide, with side padding of 1.25rem to 4rem (4vw between). Content edges
   therefore land on the logo and the "Let's talk" button at every width.

   Elementor draws a boxed container's width and padding from these custom
   properties, so setting them here (three classes deep) wins over its
   defaults without touching any per-element value set in the panel.

   A bleed row is a row of panels. It is wider by the panels' 32px padding on
   each side, so a panel reaches past the text column while the text inside
   it stays on the same line as the text above and below. */

.lpe .e-con.lpe-row {
	--lpe-pad: clamp(20px, 4vw, 64px);
	--padding-left: var(--lpe-pad);
	--padding-right: var(--lpe-pad);
	--padding-top: 0px;
	--padding-bottom: 0px;
	--content-width: calc(84rem - 2 * var(--lpe-pad));
}

.lpe .e-con.lpe-row--bleed {
	--padding-left: max(8px, calc(var(--lpe-pad) - 32px));
	--padding-right: max(8px, calc(var(--lpe-pad) - 32px));
	--content-width: calc(84rem - 2 * var(--lpe-pad) + 64px);
}

/* Spacing between widgets is set below, element by element, from the design;
   Elementor's own default widget spacing is taken out so it cannot add to it. */
.lpe .elementor-widget:not(:last-child) {
	margin-bottom: 0;
}

.lpe .elementor-widget-text-editor p {
	margin: 0;
}

.lpe .elementor-heading-title {
	font-family: var(--font-body);
}

/* ============================================================
   Shared type
   ============================================================ */

.lpe .lpe-eyebrow .elementor-heading-title {
	font-size: calc(11.5 * var(--u));
	font-weight: 800;
	line-height: 1.55;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lpe-blue);
}

.lpe .lpe-h2 .elementor-heading-title {
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--lpe-navy);
}

.lpe .lpe-h2--lg .elementor-heading-title {
	font-size: calc(33 * var(--u));
}

.lpe .lpe-h2--md .elementor-heading-title {
	font-size: calc(29 * var(--u));
}

.lpe .lpe-h2--sm .elementor-heading-title {
	font-size: calc(25 * var(--u));
}

.lpe .lpe-h2--30 .elementor-heading-title {
	font-size: calc(30 * var(--u));
}

.lpe .lpe-h2--24 .elementor-heading-title {
	font-size: calc(24 * var(--u));
}

.lpe .lpe-h2--22 .elementor-heading-title {
	font-size: calc(22 * var(--u));
}

.lpe .lpe-eyebrow + .lpe-h2 {
	margin-top: calc(8 * var(--u));
}

.lpe .lpe-lead {
	margin-top: calc(14 * var(--u));
}

.lpe .lpe-lead p {
	font-size: calc(16 * var(--u));
	line-height: 1.75;
	color: var(--lpe-slate);
}

.lpe .lpe-lead--narrow p {
	max-width: calc(420 * var(--u));
}

/* ============================================================
   Hero
   ============================================================ */

.lpe .lpe-hero-title .elementor-heading-title {
	font-size: calc(56 * var(--u));
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--lpe-ink);
}

.lpe .lpe-hero-text {
	margin-top: calc(22 * var(--u));
}

.lpe .lpe-hero-text p {
	max-width: calc(480 * var(--u));
	font-size: calc(16 * var(--u));
	line-height: 1.75;
	color: var(--lpe-grey);
}

.lpe .lpe-hero-promise {
	margin-top: calc(22 * var(--u));
}

.lpe .lpe-hero-promise .elementor-heading-title {
	border-left: 3px solid var(--lpe-olive);
	padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(14 * var(--u));
	font-size: calc(16 * var(--u));
	font-weight: 700;
	line-height: 1.5;
	color: var(--lpe-ink);
}

.lpe .lpe-label .elementor-heading-title {
	font-size: calc(11 * var(--u));
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #8a9099;
}

.lpe .lpe-hero-partners-label {
	margin-top: calc(40 * var(--u));
}

.lpe .lpe-hero-partners {
	margin-top: calc(32 * var(--u));
	gap: calc(16 * var(--u)) calc(112 * var(--u)) !important;
}

.lpe .lpe-partner img {
	display: block;
	width: auto;
}

.lpe .lpe-partner--google img {
	height: calc(62 * var(--u));
}

.lpe .lpe-partner--linkedin img,
.lpe .lpe-partner--meta img {
	height: calc(26 * var(--u));
}

/* ---------- the enquiry card ---------- */

.lpe .lpe-hero-card {
	box-shadow: 0 18px 50px rgba(17, 19, 24, 0.07);
}

.lpe .lpe-hero-rule .elementor-divider {
	padding: 0;
}

.lpe .lpe-form-title {
	margin-top: calc(22 * var(--u));
}

.lpe .lpe-form-title .elementor-heading-title {
	font-size: calc(17 * var(--u));
	font-weight: 700;
	line-height: 1.35;
	color: var(--lpe-ink);
}

.lpe .lpe-form {
	margin-top: calc(26 * var(--u));
}

.lpe .lpe-form .lp-form__input::placeholder {
	color: #8d939c;
}

.lpe .lpe-form .lp-form__label {
	color: #6f7580;
}

/* Square, with dark type — the design's submit is not the theme's pill. */
.lpe .lpe-form .lp-btn--olive,
.lpe .lpe-form input[type="submit"] {
	width: 100%;
	margin-top: calc(34 * var(--u));
	border: 0;
	border-radius: 0;
	padding: calc(15 * var(--u)) calc(20 * var(--u));
	background: #98b651;
	font-family: var(--font-body);
	font-size: calc(12.5 * var(--u));
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #1d2410;
	cursor: pointer;
}

.lpe .lpe-form .lp-btn--olive:hover,
.lpe .lpe-form input[type="submit"]:hover {
	background: #8aa848;
}

/* ============================================================
   Outcomes
   ============================================================ */

.lpe .lpe-outcome .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: calc(18 * var(--u));
	text-align: left;
}

.lpe .lpe-outcome .elementor-icon-box-icon {
	flex: none;
	margin: 0;
	display: flex;
}

.lpe .lpe-outcome .elementor-icon {
	width: calc(64 * var(--u));
	height: calc(64 * var(--u));
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(38 * var(--u));
}

.lpe .lpe-outcome .elementor-icon-box-title {
	margin: 0;
	font-size: calc(16.5 * var(--u));
	font-weight: 500;
	line-height: 1.55;
	color: var(--lpe-slate);
}

/* ============================================================
   Channels
   ============================================================ */

.lpe .lpe-channels .lpe-h2 {
	margin-top: calc(8 * var(--u));
}

.lpe .lpe-channels-sub {
	margin-top: calc(12 * var(--u));
}

.lpe .lpe-channels-sub p {
	font-size: calc(16.5 * var(--u));
}

.lpe .lpe-channels-grid {
	margin-top: calc(30 * var(--u));
}

.lpe .lpe-channel {
	height: 100%;
	border: 1px solid var(--lpe-line);
	border-radius: 12px;
	background: #fff;
	padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(18 * var(--u));
	box-shadow: 0 6px 20px rgba(12, 35, 64, 0.03);
}

.lpe .lpe-channel .elementor-image-box-wrapper {
	text-align: center;
}

/* The mark sits on a white disc with a soft shadow. */
.lpe .lpe-channel .elementor-image-box-img {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: calc(66 * var(--u)) !important;
	height: calc(66 * var(--u));
	margin: 0 auto 14px !important;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(12, 35, 64, 0.09);
}

.lpe .lpe-channel .elementor-image-box-img img {
	width: calc(36 * var(--u));
	height: calc(36 * var(--u));
	object-fit: contain;
}

.lpe .lpe-channel:nth-child(2) .elementor-image-box-img {
	width: calc(96 * var(--u)) !important;
}

.lpe .lpe-channel:nth-child(2) .elementor-image-box-img img {
	width: calc(70 * var(--u));
	height: calc(34 * var(--u));
}

.lpe .lpe-channel .elementor-image-box-title {
	margin: 0 0 8px;
	font-size: calc(14.5 * var(--u));
	font-weight: 700;
	line-height: 1.3;
	color: var(--lpe-navy);
}

.lpe .lpe-channel .elementor-image-box-description {
	font-size: calc(12 * var(--u));
	line-height: 1.65;
	color: var(--lpe-slate);
}

/* ============================================================
   Panels — demand, conversion, why, results
   ============================================================ */

.lpe .lpe-panel--outline {
	border: 1px solid var(--lpe-line);
}

/* ---------- the journey ---------- */

.lpe .lpe-journey {
	margin-top: calc(30 * var(--u));
}

.lpe .lpe-journey > * {
	position: relative;
}

.lpe .lpe-journey-step .elementor-icon-box-wrapper {
	text-align: center;
}

.lpe .lpe-journey-step .elementor-icon-box-icon {
	margin-bottom: calc(12 * var(--u));
}

.lpe .lpe-journey-step .elementor-icon {
	width: calc(64 * var(--u));
	height: calc(64 * var(--u));
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(36 * var(--u));
	box-shadow: 0 6px 16px rgba(12, 35, 64, 0.07);
}

.lpe .lpe-journey-step .elementor-icon-box-title {
	margin: 0 auto;
	max-width: calc(70 * var(--u));
	font-size: calc(12.5 * var(--u));
	font-weight: 700;
	line-height: 1.35;
	color: var(--lpe-navy);
}

@media (min-width: 620px) {
	.lpe .lpe-journey > *:not(:last-child)::after {
		content: "\2192";
		position: absolute;
		top: calc(32 * var(--u));
		right: calc(-28 * var(--u));
		transform: translateY(-50%);
		font-size: calc(15 * var(--u));
		line-height: 1;
		color: #8fb1cc;
	}
}

/* ---------- service groups ---------- */

.lpe .lpe-groups {
	margin-top: calc(22 * var(--u));
}

@media (min-width: 768px) {
	.lpe .lpe-groups > * + * {
		border-left: 1px solid var(--lpe-line);
		padding-left: 30px;
	}

	.lpe .lpe-groups > *:first-child {
		padding-right: calc(30 * var(--u));
	}
}

.lpe .lpe-group-head .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: calc(14 * var(--u));
	text-align: left;
}

.lpe .lpe-group-head .elementor-icon-box-icon {
	flex: none;
	margin: 0;
	display: flex;
}

.lpe .lpe-group-head .elementor-icon {
	width: calc(40 * var(--u));
	height: calc(40 * var(--u));
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(40 * var(--u));
}

.lpe .lpe-group-head .elementor-icon-box-title {
	margin: 0;
	font-size: calc(15 * var(--u));
	font-weight: 700;
	color: var(--lpe-navy);
}

/* ---------- tick lists ---------- */

.lpe .lpe-ticks .elementor-icon-list-items {
	display: flex;
	flex-direction: column;
	gap: calc(11 * var(--u));
}

.lpe .lpe-ticks .elementor-icon-list-item {
	align-items: center;
	margin: 0;
	padding: 0;
}

.lpe .lpe-ticks .elementor-icon-list-icon {
	padding-right: calc(12 * var(--u));
}

.lpe .lpe-ticks .elementor-icon-list-icon i,
.lpe .lpe-ticks .elementor-icon-list-icon svg {
	font-size: calc(13 * var(--u));
	width: calc(13 * var(--u));
	height: calc(13 * var(--u));
}

.lpe .lpe-ticks .elementor-icon-list-text {
	font-size: calc(14.5 * var(--u));
	line-height: 1.5;
	color: var(--lpe-slate);
}

.lpe .lpe-ticks--filled {
	margin-top: calc(20 * var(--u));
}

.lpe .lpe-ticks--filled .elementor-icon-list-icon i,
.lpe .lpe-ticks--filled .elementor-icon-list-icon svg {
	font-size: calc(18 * var(--u));
	width: calc(18 * var(--u));
	height: calc(18 * var(--u));
}

/* ---------- conversion figure ---------- */

.lpe .lpe-figure {
	min-height: calc(220 * var(--u));
}

.lpe .lpe-figure-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

/* ============================================================
   Process
   ============================================================ */

.lpe .lpe-process .lpe-steps,
.lpe .lpe-steps {
	margin-top: calc(32 * var(--u));
}

.lpe .lpe-steps > * {
	position: relative;
	padding-inline: 14px;
}

.lpe .lpe-step .elementor-icon-box-wrapper {
	text-align: center;
}

.lpe .lpe-step .elementor-icon-box-icon {
	margin-bottom: calc(16 * var(--u));
}

.lpe .lpe-step .elementor-icon {
	width: calc(64 * var(--u));
	height: calc(64 * var(--u));
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(38 * var(--u));
}

.lpe .lpe-step .elementor-icon-box-title {
	margin: 0 0 8px;
	font-size: calc(15 * var(--u));
	font-weight: 700;
	line-height: 1.35;
	color: var(--lpe-navy);
}

.lpe .lpe-step .elementor-icon-box-description {
	margin: 0 auto;
	max-width: calc(180 * var(--u));
	font-size: calc(13 * var(--u));
	line-height: 1.6;
	color: var(--lpe-slate);
}

@media (min-width: 1025px) {
	/* The hairline runs from just under the tile to the foot of the text,
	   as in the design, not up through the tile row. */
	.lpe .lpe-steps > * + *::before {
		content: "";
		position: absolute;
		top: calc(80 * var(--u));
		bottom: 0;
		left: 0;
		width: 1px;
		background: var(--lpe-line);
	}

	.lpe .lpe-steps > *:not(:last-child)::after {
		content: "\2192";
		position: absolute;
		top: calc(32 * var(--u));
		right: calc(-8 * var(--u));
		transform: translateY(-50%);
		font-size: calc(15 * var(--u));
		line-height: 1;
		color: #8fb1cc;
	}
}

/* ============================================================
   Why choose us
   ============================================================ */

.lpe .lpe-reasons {
	margin-top: calc(26 * var(--u));
}

.lpe .lpe-reason .elementor-icon-box-wrapper {
	text-align: left;
}

.lpe .lpe-reason .elementor-icon-box-icon {
	margin-bottom: calc(12 * var(--u));
}

.lpe .lpe-reason .elementor-icon {
	width: calc(48 * var(--u));
	height: calc(48 * var(--u));
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: calc(30 * var(--u));
}

.lpe .lpe-reason .elementor-icon-box-title {
	margin: 0 0 8px;
	font-size: calc(14.5 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	color: var(--lpe-navy);
}

.lpe .lpe-reason .elementor-icon-box-description {
	font-size: calc(13 * var(--u));
	line-height: 1.6;
	color: var(--lpe-slate);
}

@media (min-width: 1025px) {
	.lpe .lpe-reasons > * {
		padding-inline: 24px;
	}

	.lpe .lpe-reasons > *:first-child {
		padding-left: 0;
	}

	.lpe .lpe-reasons > * + * {
		border-left: 1px solid #dbe8f4;
	}
}

/* ============================================================
   Results
   ============================================================ */

.lpe .lpe-stats {
	margin-top: calc(18 * var(--u));
}

.lpe .lpe-stat-value .elementor-heading-title {
	font-size: calc(28 * var(--u));
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #1f9d55;
}

.lpe .lpe-stat-caption p {
	font-size: calc(12.5 * var(--u));
	line-height: 1.55;
	color: var(--lpe-slate);
}

@media (min-width: 1024px) {
	/* The case study sits behind a hairline with a small chevron on it, as in
	   the design. */
	.lpe .lpe-results-right {
		position: relative;
		border-left: 1px solid #d6e4f1;
		padding-left: 28px !important;
	}

}

.lpe .lpe-case-art {
	flex: none;
	width: calc(128 * var(--u)) !important;
	height: calc(100 * var(--u));
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg, #dbe8f6, #eef5fc);
}

.lpe .lpe-case-image img {
	display: block;
	width: calc(128 * var(--u));
	height: calc(100 * var(--u));
	object-fit: cover;
}

.lpe .lpe-case-title .elementor-heading-title {
	font-size: calc(14.5 * var(--u));
	font-weight: 700;
	color: var(--lpe-navy);
}

.lpe .lpe-case-facts {
	margin-top: calc(10 * var(--u));
}

.lpe .lpe-case-facts p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(6 * var(--u));
	font-size: calc(12.5 * var(--u));
	color: var(--lpe-slate);
}

.lpe .lpe-dot {
	display: inline-block;
	width: calc(6 * var(--u));
	height: calc(6 * var(--u));
	border-radius: 999px;
	background: #1f9d55;
}

.lpe .lpe-sep {
	margin-inline: 6px;
	color: #b9c7d4;
}

.lpe .lpe-case-link {
	margin-top: calc(12 * var(--u));
}

.lpe .lpe-case-link .elementor-button-icon svg,
.lpe .lpe-cta-button .elementor-button-icon svg {
	fill: currentColor;
}

.lpe .lpe-case-link .elementor-button-content-wrapper,
.lpe .lpe-cta-button .elementor-button-content-wrapper {
	flex-direction: row-reverse;
	gap: calc(8 * var(--u));
}

.lpe .lpe-case-link .elementor-button {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--font-body);
	font-size: calc(14 * var(--u));
	font-weight: 700;
	color: var(--lpe-blue);
}

/* ============================================================
   FAQ
   ============================================================ */

.lpe .lpe-faq-grid {
	margin-top: calc(18 * var(--u));
}

.lpe .lpe-faq .elementor-toggle-item {
	margin-bottom: calc(6 * var(--u));
	border: 1px solid var(--lpe-line);
	border-radius: 8px;
	background: #fff;
}

.lpe .lpe-faq .elementor-tab-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: calc(16 * var(--u));
	border: 0;
	padding: calc(8 * var(--u)) calc(16 * var(--u));
	font-family: var(--font-body);
	font-size: calc(13 * var(--u));
	font-weight: 500;
	line-height: 1.45;
	color: #3d4b5c;
}

.lpe .lpe-faq .elementor-toggle-title {
	order: 1;
	color: inherit;
}

.lpe .lpe-faq .elementor-toggle-icon {
	order: 2;
	flex: none;
	font-size: calc(11 * var(--u));
	color: #7f97ad;
}

.lpe .lpe-faq .elementor-tab-content {
	border: 0;
	padding: 0 calc(16 * var(--u)) calc(14 * var(--u));
	font-size: calc(13.5 * var(--u));
	line-height: 1.7;
	color: var(--lpe-slate);
}

/* ============================================================
   Closing band
   ============================================================ */

.lpe .lpe-eyebrow--light .elementor-heading-title {
	color: #6fc6f5;
}

.lpe .lpe-cta-title {
	margin-top: calc(12 * var(--u));
}

.lpe .lpe-cta-title .elementor-heading-title {
	font-size: calc(22 * var(--u));
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.015em;
	color: #fff;
}

.lpe .lpe-cta-text p {
	max-width: calc(330 * var(--u));
	font-size: calc(14 * var(--u));
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.78);
}

.lpe .lpe-cta-button .elementor-button {
	border-radius: 8px;
	padding: calc(15 * var(--u)) calc(24 * var(--u));
	background: #17b978;
	font-family: var(--font-body);
	font-size: calc(14 * var(--u));
	font-weight: 700;
	color: #fff;
}

.lpe.lpe-cta {
	background-image: radial-gradient(120% 140% at 100% 100%, rgba(40, 98, 170, 0.35), transparent 55%);
}

/* ============================================================
   Narrow screens
   ============================================================ */

@media (min-width: 1025px) and (max-width: 1321px) {
	.lpe {
		/* content = 100vw minus 4vw of padding each side */
		--u: calc(92vw / 1216);
	}
}

@media (max-width: 1023px) {
	.lpe .lpe-hero-title .elementor-heading-title {
		font-size: 38px;
	}

	.lpe .lpe-h2--lg .elementor-heading-title {
		font-size: 28px;
	}

	.lpe .lpe-h2--md .elementor-heading-title,
	.lpe .lpe-h2--sm .elementor-heading-title {
		font-size: 24px;
	}
}

@media (max-width: 767px) {
	.lpe .lpe-hero-title .elementor-heading-title {
		font-size: 31px;
	}
}

/* sections/lp-enquiries.css */
/**
 * Landing page outcomes grid — copy left, two columns of icon rows right.
 */

.lp-enquiries {
	background: #fff;
}

.lp-enquiries__inner {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.lp-enquiries__inner {
		grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
		gap: 4rem;
	}
}

.lp-enquiries__copy .lp-lead {
	max-width: 38ch;
}

.lp-enquiries__grid {
	display: grid;
	gap: 1.75rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.lp-enquiries__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.lp-enquiries__item {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.lp-enquiries__text {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--lp-slate);
	max-width: 22ch;
}

/* sections/lp-faq.css */
/**
 * Landing page FAQ — two columns of bordered rows.
 *
 * CSS columns rather than a grid: a grid would put row 2 beside row 1, and
 * the design reads down each column. break-inside keeps a row whole when it
 * opens.
 */

.lp-faq {
	background: #fff;
}

.lp-faq__grid {
	margin-top: 1.75rem;
}

@media (min-width: 860px) {
	.lp-faq__grid {
		column-count: 2;
		column-gap: 1.5rem;
	}
}

.lp-faq__row {
	break-inside: avoid;
	margin-bottom: 0.7rem;
	border: 1px solid var(--lp-line);
	border-radius: 0.5rem;
	background: #fff;
}

.lp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1.1rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--lp-navy);
	cursor: pointer;
	list-style: none;
}

/* Safari draws its own disclosure triangle without this. */
.lp-faq__q::-webkit-details-marker {
	display: none;
}

/* The plus is drawn rather than typed, so the two strokes stay centred and
   the horizontal one can survive on its own when the row opens. */
.lp-faq__sign {
	position: relative;
	flex: none;
	width: 0.85rem;
	height: 0.85rem;
	color: #8ba3b8;
}

.lp-faq__sign::before,
.lp-faq__sign::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1.5px;
	background: currentColor;
	transform: translateY(-50%);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.lp-faq__sign::after {
	transform: translateY(-50%) rotate(90deg);
}

.lp-faq__row[open] .lp-faq__sign::after {
	transform: translateY(-50%) rotate(0deg);
	opacity: 0;
}

.lp-faq__row[open] .lp-faq__q {
	color: var(--lp-blue);
}

.lp-faq__a {
	margin: 0;
	padding: 0 1.1rem 1rem;
	font-size: 0.85rem;
	line-height: 1.7;
	color: var(--lp-slate);
}

/* sections/lp-hero.css */
/**
 * Landing page hero.
 *
 * Cream plate, two columns: the copy sits left on the page grid, the enquiry
 * card overhangs the right so its white edge runs past the grid's right
 * gutter, as in the design. Below the split breakpoint the card stacks under
 * the copy at full width.
 */

.lp-hero {
	background: var(--lp-cream);
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.lp-hero__inner {
	display: grid;
	gap: 2.5rem;
	align-items: start;
}

@media (min-width: 900px) {
	.lp-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
		gap: 3.5rem;
	}
}

/* ---------- copy ---------- */

.lp-hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2rem, 4.4vw, 3.25rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.03em;
	color: var(--lp-ink);
	max-width: 15ch;
}

.lp-hero__text {
	margin: 1.5rem 0 0;
	max-width: 46ch;
	font-size: 0.975rem;
	line-height: 1.75;
	color: var(--lp-grey);
}

/* The promise reads as a pull quote: an olive rule, then bold ink. */
.lp-hero__promise {
	margin: 1.75rem 0 0;
	border-left: 3px solid var(--lp-olive);
	padding-left: 0.85rem;
	font-size: 0.975rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--lp-ink);
}

.lp-hero__partners {
	margin-top: 2.5rem;
}

.lp-hero__partners-label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9aa0a6;
}

.lp-hero__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.lp-hero__logos img {
	display: block;
	max-height: 1.75rem;
	width: auto;
}

.lp-hero__logos li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lp-hero__mark {
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
}

.lp-hero__logo-name {
	font-size: 0.9rem;
	font-weight: 700;
	color: #6f7580;
}

/* ---------- card ---------- */

.lp-hero__card {
	background: #fff;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	box-shadow: 0 18px 50px rgba(17, 19, 24, 0.07);
}

.lp-hero__rule {
	display: block;
	width: 2.25rem;
	height: 4px;
	border-radius: 2px;
	background: var(--lp-olive);
}

.lp-hero__form-title {
	margin: 1.1rem 0 1.6rem;
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lp-ink);
}

.lp-hero__sent {
	border-radius: 0.6rem;
	background: #f4f8ec;
	padding: 1.25rem 1.4rem;
}

.lp-hero__sent-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 700;
	color: var(--lp-ink);
}

.lp-hero__sent-text {
	margin: 0.4rem 0 0;
	font-size: 0.9rem;
	color: var(--lp-grey);
}

/* ---------- form ---------- */

.lp-form__grid {
	display: grid;
	gap: 1.4rem 1.75rem;
}

@media (min-width: 560px) {
	.lp-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.lp-form__field--wide {
		grid-column: 1 / -1;
	}
}

.lp-form__label {
	display: block;
	margin-bottom: 0.55rem;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #8b9099;
}

.lp-form__req {
	color: #e0355a;
}

/* Underline fields, not boxes — the design's form is a set of rules. */
.lp-form__input {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-bottom: 1px solid #dcdfe4;
	border-radius: 0;
	background: transparent;
	padding: 0.35rem 0 0.6rem;
	font-family: var(--font-body);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--lp-ink);
	box-shadow: none;
	transition: border-color 0.25s ease;
}

.lp-form__input::placeholder {
	color: #b6bcc4;
}

.lp-form__input:focus {
	outline: none;
	border-bottom-color: var(--lp-olive);
}

.lp-form__textarea {
	min-height: 4.5rem;
	resize: vertical;
}

.lp-form .lp-btn--olive {
	margin-top: 2rem;
}

.lp-form__error {
	margin: 1rem 0 0;
	font-size: 0.85rem;
	font-weight: 600;
	color: #c0392b;
}

/* The honeypot is for bots, so it is taken out of the layout rather than
   hidden with display:none, which some bots skip. */
.lp-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* sections/lp-kit.css */
/**
 * Landing page kit — the tokens and the few primitives the lp-* sections share.
 *
 * The landing page is its own design: a cream hero, blue-on-white body bands
 * and a navy closing band, none of which are the DigiOps brand palette. Rather
 * than overriding the theme's tokens (which would change every other page),
 * the page carries its own set, scoped to .lp so nothing leaks out of it.
 */

.lp {
	--lp-cream: #f8f4ec;
	--lp-ink: #111318;
	--lp-navy: #0c2340;
	--lp-blue: #2b7fd4;
	--lp-blue-soft: #e8f1fd;
	--lp-slate: #5a6b7d;
	--lp-grey: #6b7280;
	--lp-olive: #98b651;
	--lp-green: #22a06b;
	--lp-green-bright: #17b978;
	--lp-mint: #e9f8f3;
	--lp-band: #f2f9fd;
	--lp-line: #e3ecf4;
	--lp-card: #ffffff;

	color: var(--lp-slate);
	font-family: var(--font-body);
	line-height: 1.6;
}

/* ---------- shared type ---------- */

.lp-eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--lp-blue);
}

.lp-h2 {
	margin: 0.6rem 0 0;
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.15rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--lp-navy);
}

.lp-h3 {
	margin: 0.5rem 0 0;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--lp-navy);
}

.lp-lead {
	margin: 1rem 0 0;
	font-size: 0.975rem;
	line-height: 1.75;
	color: var(--lp-slate);
}

.lp-section {
	padding-block: clamp(2.75rem, 5vw, 4.25rem);
}

/* ---------- icons ---------- */

.lp-icon {
	width: 1.5rem;
	height: 1.5rem;
	display: block;
}

/* A platform mark carries its own colours, so it is sized but never tinted. */
.lp-brand {
	width: 1.75rem;
	height: 1.75rem;
	display: block;
}

/* Two marks on one canvas — the pair keeps its height and takes the width it
   needs, rather than being letterboxed into a square. */
.lp-brand--wide {
	width: auto;
}

/* A rounded tile behind an icon. The colours come from inline custom
   properties so an editor can recolour a row without touching CSS. */
.lp-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 3rem;
	height: 3rem;
	border-radius: 0.9rem;
	background: var(--tile-bg, var(--lp-blue-soft));
	color: var(--tile-fg, var(--lp-blue));
}

.lp-tile--round {
	border-radius: 999px;
}

/* ---------- buttons ---------- */

.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	border: 0;
	border-radius: 0.4rem;
	padding: 0.95rem 1.6rem;
	font-family: var(--font-body);
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.lp-btn--olive {
	width: 100%;
	background: var(--lp-olive);
	color: #fff;
}

.lp-btn--olive:hover {
	background: #88a546;
}

.lp-btn--green {
	border-radius: 0.5rem;
	padding: 0.85rem 1.4rem;
	background: var(--lp-green-bright);
	color: #fff;
	letter-spacing: 0.01em;
	text-transform: none;
	font-size: 0.875rem;
}

.lp-btn--green:hover {
	background: #14a76b;
}

/* ---------- cards and lists ---------- */

.lp-card {
	background: var(--lp-card);
	border: 1px solid var(--lp-line);
	border-radius: 0.85rem;
}

.lp-checklist {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

.lp-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--lp-slate);
}

.lp-checklist .lp-icon {
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	margin-top: 0.2rem;
	color: var(--lp-green);
}

/* sections/lp-process.css */
/**
 * Landing page process row — six steps divided by hairlines, with an arrow
 * riding the divider at tile height.
 */

.lp-process {
	background: #fff;
}

.lp-process__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.lp-process__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 860px) {
	.lp-process__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1180px) {
	.lp-process__row {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 0;
	}
}

.lp-process__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	padding-inline: 1rem;
	text-align: center;
}

@media (min-width: 1180px) {
	.lp-process__step + .lp-process__step {
		border-left: 1px solid var(--lp-line);
	}
}

.lp-process__tile {
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 0.35rem;
	background: #eaf3fd;
	color: var(--lp-blue);
}

.lp-process__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--lp-navy);
}

.lp-process__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--lp-slate);
	max-width: 18ch;
}

.lp-process__arrow {
	display: none;
	font-size: 0.95rem;
	line-height: 1;
	color: #9fb8cc;
}

@media (min-width: 1180px) {
	.lp-process__arrow {
		display: block;
		position: absolute;
		top: 1.6rem;
		right: -0.5rem;
		transform: translateY(-50%);
	}
}

/* sections/lp-results.css */
/**
 * Landing page results — stat cards on the left, one case study on the right,
 * both on a single pale plate.
 */

.lp-results {
	background: #fff;
	padding-block: clamp(0rem, 1vw, 1rem) clamp(2rem, 4vw, 3rem);
}

.lp-results__plate {
	display: grid;
	gap: 2rem;
	align-items: center;
	border-radius: 1rem;
	background: #f5fafe;
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
}

@media (min-width: 1024px) {
	.lp-results__plate {
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: 2.5rem;
	}

	/* A hairline divides the numbers from the case study; the card keeps its
	   own padding, so the rule is drawn on the column rather than the card. */
	.lp-results__case {
		margin-left: 2.5rem;
		box-shadow: -2.5rem 0 0 -2.44rem #dbe8f4;
	}
}

.lp-results__stats {
	display: grid;
	gap: 1rem;
	margin: 1.75rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 620px) {
	.lp-results__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.lp-results__stat {
	border-radius: 0.75rem;
	background: #fff;
	padding: 1.1rem 1.25rem 1.25rem;
}

.lp-results__value {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #1f9d55;
}

.lp-results__caption {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--lp-slate);
}

/* ---------- case study ---------- */

.lp-results__case {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border-radius: 0.75rem;
	background: #fff;
	padding: 1rem;
}

.lp-results__case-art {
	display: block;
	flex: none;
	width: 6.5rem;
	border-radius: 0.75rem;
	overflow: hidden;
}

.lp-results__case-art img {
	display: block;
	width: 100%;
	height: 5rem;
	object-fit: cover;
}

.lp-results__case-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--lp-navy);
}

.lp-results__case-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin: 0.6rem 0 0;
	font-size: 0.8125rem;
	color: var(--lp-slate);
}

.lp-results__case-sep {
	color: #b9c7d4;
}

.lp-results__case-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.75rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--lp-blue);
	text-decoration: none;
}

.lp-results__case-link:hover {
	text-decoration: underline;
}

.lp-results__case-link.is-plain {
	color: var(--lp-slate);
}

/* sections/lp-why.css */
/**
 * Landing page reasons row — a pale plate inset from the page grid, holding
 * five hairline-divided columns.
 */

.lp-why {
	background: #fff;
	padding-block: clamp(0rem, 1vw, 1rem) clamp(2rem, 4vw, 3rem);
}

.lp-why__plate {
	border-radius: 1rem;
	background: linear-gradient(180deg, #f2f9fe 0%, #f8fcff 100%);
	padding: clamp(1.75rem, 3.5vw, 2.5rem);
}

.lp-why__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 560px) {
	.lp-why__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.lp-why__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1180px) {
	.lp-why__row {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 0;
	}

	.lp-why__item + .lp-why__item {
		border-left: 1px solid #dfeaf5;
	}
}

.lp-why__item {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-inline: 0;
}

@media (min-width: 1180px) {
	.lp-why__item {
		padding-inline: 1.5rem;
	}

	.lp-why__item:first-child {
		padding-left: 0;
	}

	.lp-why__item:last-child {
		padding-right: 0;
	}
}

.lp-why__tile {
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.5rem;
	background: #e4f0fc;
	color: var(--lp-blue);
}

.lp-why__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lp-navy);
}

.lp-why__text {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.65;
	color: var(--lp-slate);
}

/* sections/manifesto.css */
/**
 * Home manifesto — ported from components/home/Manifesto.tsx.
 *
 * A white band sitting on the pastel aurora (.home-manifesto-glow, painted in
 * theme.css): centred tag pill, a word-fill statement, then a four-column
 * figure strip beside the positioning paragraph and the outlined button.
 *
 * The statement's word-by-word fill is scrubbed against the scrollbar by
 * assets/js/sections/manifesto.js, as it was in the original. This file only
 * paints the two states of a word — pale tint underneath, ink or violet on top
 * — and hides the top layer once the script has armed the heading.
 */

.digiops-mf {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* The theme pads every top-level section, but this one carries the original's
   own py-16 / md:py-24 on its inner wrapper — otherwise the two stack up. */
.site-main > .digiops-mf {
	padding-block: 0;
}

/* the aurora only covers the lower 72% of the band, as in the original */
.digiops-mf__glow {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 72%;
	z-index: -10;
	pointer-events: none;
}

.digiops-mf__inner {
	padding-block: 4rem;
}

/* ---------- tag pill ---------- */

.digiops-mf__tagrow {
	display: flex;
	justify-content: center;
}

.digiops-mf .tagpill.digiops-mf__tag {
	/* the original overrode the tag pill here: translucent white on the
	   aurora, with a little more air than the default pill. The original said
	   so with !important utilities; the extra specificity here does the same
	   job without depending on which stylesheet loads last. */
	background: rgba(255, 255, 255, 0.7);
	padding: 0.5rem 1.25rem;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* ---------- statement ---------- */

.digiops-mf__statement {
	margin: 1.5rem auto 0;
	max-width: 56rem;
	text-align: center;
	font-size: clamp(2rem, 4.5vw, 3rem);
	color: var(--color-tint);
}

/* ---------- figures + paragraph ---------- */

.digiops-mf__grid {
	margin-top: 2.5rem;
	display: grid;
	gap: 2rem;
}

.digiops-mf__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	row-gap: 2rem;
}

.digiops-mf__stat-label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1.625;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-ink);
}

.digiops-mf__stat-value {
	margin: 0.5rem 0 0;
	font-family: var(--font-display);
	font-size: 2.25rem;
	font-weight: 700;
	/* text-4xl ships 2.25rem/2.5rem in the original, not a ratio */
	line-height: 2.5rem;
	letter-spacing: -0.025em;
	color: var(--color-violet);
}

.digiops-mf__stat-suffix {
	font-size: 1.5rem;
}

.digiops-mf__body {
	margin: 0;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

/* ---------- button ---------- */

.digiops-mf__ctarow {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

/* Outlined violet: the base .pill leaves its 1.5px border transparent, this
   colours it. Scoped to the section so the order of stylesheets is irrelevant. */
.digiops-mf .pill.digiops-mf__cta {
	border-color: var(--color-violet);
	color: var(--color-violet);
	background: transparent;
}

.digiops-mf .pill.digiops-mf__cta:hover,
.digiops-mf .pill.digiops-mf__cta:focus-visible {
	background: rgba(66, 69, 180, 0.05);
}

/* ---------- breakpoints ---------- */

/* Phones: the headline above is centred, so the figures and the paragraph
   are centred under it too, inside a little extra side margin, rather than
   hanging off the left edge. The two figure columns share a hairline. */
@media (max-width: 639px) {
	.digiops-mf__grid {
		padding-inline: 0.5rem;
	}

	.digiops-mf__stats {
		text-align: center;
	}

	.digiops-mf__stat:nth-child(2n) {
		border-left: 1px solid var(--color-tint);
	}

	.digiops-mf__body {
		text-align: center;
		max-width: 32rem;
		margin-inline: auto;
	}
}

/* sm: the figure strip becomes four hairline-divided columns */
@media (min-width: 640px) {
	.digiops-mf__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.digiops-mf__stat {
		padding-inline: 1.5rem;
		border-left: 1px solid var(--color-tint);
	}

	/* The original hardcoded four figures; this is a repeater, so the rules
	   are written per row of four rather than per strip. A fifth figure wraps
	   onto a second row and starts it flush, without a stray leading rule. */
	.digiops-mf__stat:nth-child(4n + 1) {
		padding-left: 0;
		border-left: 0;
	}

	.digiops-mf__stat:nth-child(4n),
	.digiops-mf__stat:last-child {
		padding-right: 0;
	}
}

@media (min-width: 768px) {
	.digiops-mf__inner {
		padding-block: 6rem;
	}

	.digiops-mf__grid,
	.digiops-mf__ctarow {
		margin-top: 3.5rem;
	}

	/* md:text-5xl in the original carried line-height: 1, not the 1.1 that
	   comes with the 4xl base size — without it the line box runs ~0.3rem tall. */
	.digiops-mf__stat-value {
		font-size: 3rem;
		line-height: 1;
	}

	.digiops-mf__stat-suffix {
		font-size: 1.875rem;
	}
}

/* lg: the figures take the wider of the two columns */
@media (min-width: 1024px) {
	.digiops-mf__grid {
		grid-template-columns: 1.15fr 1fr;
		align-items: start;
		gap: 3rem;
	}
}

/* sections/marquee.css */
/**
 * Marquee — a port of components/Marquee.tsx.
 *
 * The component itself carries no styling: it hands .marquee / .marquee-track
 * the loop (both already in theme.css, along with @keyframes
 * digiops-marquee-x, .marquee-hover-pause, .outline-word and
 * .outline-word-dark) and lets the caller pass Tailwind strings for the items
 * and the separator. Those two strings are what this file writes out as real
 * rules, in the two shapes the site actually uses:
 *
 *   filled    KeyFacts.tsx:48-49
 *             "font-display text-2xl font-semibold text-deep md:text-3xl"
 *             separator "text-tint"
 *   outlined  HighlightBand.tsx:37-38 and web-development/page.tsx:431-432
 *             "outline-word-dark font-display text-[clamp 1rem/2.1vw/2rem]
 *              font-bold leading-none tracking-tight"
 *             separator "text-ink/25 text-lg"
 *
 * Breakpoints match Tailwind's defaults: md 768px.
 */

/* The band's own rhythm — `py-8` from the KeyFacts card this strip is lifted
   out of. The shared section padding in theme.css deliberately leaves the
   marquee alone, so this is the only rule setting it. */
.site-main > .digiops-marquee,
.digiops-marquee {
	padding-block: 2rem;
}

/* ---------- grounds ----------
   Violet and near black also flip the item and separator colours below. */

.digiops-marquee--bg-lavender {
	background: var(--color-lavender);
	color: var(--color-ink);
}

.digiops-marquee--bg-white {
	background: #fff;
	color: var(--color-ink);
}

.digiops-marquee--bg-violet {
	background: var(--color-violet);
	color: #fff;
}

.digiops-marquee--bg-dark {
	background: #04061c;
	color: #fff;
}

/* ---------- label ----------
   `label px-8 text-ink/40 md:px-10` — .label and .container-x come from
   theme.css; only the colour and the `gap-4` below the line are local. */

.digiops-marquee__eyebrow {
	margin-bottom: 1rem;
	color: rgba( 27, 28, 58, 0.4 );
}

.digiops-marquee--bg-violet .digiops-marquee__eyebrow,
.digiops-marquee--bg-dark .digiops-marquee__eyebrow {
	color: rgba( 255, 255, 255, 0.45 );
}

/* ---------- the two rows ----------
   `flex shrink-0 items-center` on the row, `flex items-center` on each item. */

.digiops-marquee__row {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.digiops-marquee__item {
	display: flex;
	align-items: center;
}

/* A flex item still wraps its own text; the source is safe from this only
   because the row never shrinks. Held on one line explicitly so a long item
   cannot break the -50% translate the loop depends on. */
.digiops-marquee__text {
	white-space: nowrap;
}

/* `mx-5 md:mx-8` — on the separator in the component itself, not on the
   items, which is why the spacing survives whatever the caller passes. */
.digiops-marquee__sep {
	margin-inline: 1.25rem;
}

@media ( min-width: 768px ) {
	.digiops-marquee__sep {
		margin-inline: 2rem;
	}
}

/* ---------- filled — the KeyFacts tools strip ---------- */

.digiops-marquee--filled .digiops-marquee__text {
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 600;
	color: var(--color-deep);
}

@media ( min-width: 768px ) {
	.digiops-marquee--filled .digiops-marquee__text {
		font-size: 1.875rem;
		line-height: 2.25rem;
	}
}

.digiops-marquee--filled .digiops-marquee__sep {
	color: var(--color-tint);
}

/* On a dark ground the Deep-on-white pairing inverts: Deep would vanish, and
   Tint is already the light end of the same ramp, so the separator drops to a
   translucent white at the tone Tint holds against white. */
.digiops-marquee--filled.digiops-marquee--bg-violet .digiops-marquee__text,
.digiops-marquee--filled.digiops-marquee--bg-dark .digiops-marquee__text {
	color: #fff;
}

.digiops-marquee--filled.digiops-marquee--bg-violet .digiops-marquee__sep,
.digiops-marquee--filled.digiops-marquee--bg-dark .digiops-marquee__sep {
	color: rgba( 255, 255, 255, 0.35 );
}

/* ---------- outlined — the portfolio words ----------
   The stroke, the transparent fill and the hover fill all come from
   .outline-word / .outline-word-dark in theme.css; what is left is the type
   scale the caller passed. */

.digiops-marquee--outlined .digiops-marquee__text {
	font-size: clamp( 1rem, 2.1vw, 2rem );
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
}

.digiops-marquee--outlined .digiops-marquee__sep {
	font-size: 1.125rem;
	line-height: 1.75rem;
	color: rgba( 27, 28, 58, 0.25 );
}

.digiops-marquee--outlined.digiops-marquee--bg-violet .digiops-marquee__sep,
.digiops-marquee--outlined.digiops-marquee--bg-dark .digiops-marquee__sep {
	color: rgba( 255, 255, 255, 0.25 );
}

/* sections/page-hero.css */
/**
 * Page hero — components/PageHero.tsx.
 *
 * Every value here is the Tailwind utility the React component used, resolved:
 *
 *   section  relative overflow-hidden bg-violet text-white
 *   mark     persp pointer-events-none absolute -right-6 bottom-6 opacity-25
 *            md:right-10 md:bottom-10   /  LogoMark h-36 w-auto md:h-52
 *   inner    container-x flex min-h-[62svh] flex-col justify-end pb-16 pt-36
 *            md:min-h-[68svh] md:pb-20
 *   label    label text-onv
 *   title    h-hero mt-5 max-w-5xl !text-[clamp 2.25rem/5.4vw/5.5rem]
 *   sub      mt-6 max-w-2xl text-base font-semibold text-onv md:text-lg
 *
 * The block is named .digiops-pagehero rather than .digiops-page-hero because
 * theme.css still carries an older, invented .digiops-page-hero__* set from
 * before this port; the root class is kept on the element so the theme's
 * "a hero supplies its own vertical rhythm" and Elementor full-bleed rules
 * still find it, and the element classes are new so none of that old sizing
 * leaks in.
 */

.digiops-pagehero {
	position: relative;
	/* the scrim and glow layers sit at z-index:-1; isolating the section keeps
	   them above the section's own background and below everything else,
	   exactly as `isolate` + `-z-10` did in React */
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* The component's own background. The artwork treatments bring their own
   colour and image with them from theme.css. */
.digiops-pagehero--violet {
	background-color: var(--color-violet);
}

/* Restated here as well as in theme.css: a hero carries its own padding, and
   the generic `.site-main > section` rhythm would double it. */
.site-main > .digiops-pagehero {
	padding-block: 0;
}

.digiops-pagehero__layer {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

/* ---------- spinning mark ---------- */

.digiops-pagehero__mark {
	position: absolute;
	right: -1.5rem;
	bottom: 1.5rem;
	opacity: 0.25;
	pointer-events: none;
}

.digiops-pagehero__mark-svg {
	display: block;
	height: 9rem;
	width: auto;
}

@media (min-width: 768px) {
	.digiops-pagehero__mark {
		right: 2.5rem;
		bottom: 2.5rem;
	}

	.digiops-pagehero__mark-svg {
		height: 13rem;
	}
}

/* ---------- copy ---------- */

/* The copy hangs off the BOTTOM of a tall band — justify-end is what gives the
   inner-page heroes their proportions, so the min-height and the asymmetric
   9rem/4rem padding go together. svh, not vh: the React value was 62svh, which
   ignores mobile browser chrome. */
.digiops-pagehero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 62vh;
	min-height: 62svh;
	padding-top: 9rem;
	padding-bottom: 4rem;
}

@media (min-width: 768px) {
	.digiops-pagehero__inner {
		min-height: 68vh;
		min-height: 68svh;
		padding-bottom: 5rem;
	}
}

.digiops-pagehero__label {
	color: var(--color-onv);
}

/* `!text-[clamp 2.25rem/5.4vw/5.5rem]` — a shade smaller than .h-hero's own
   clamp, because an inner page's title sits under the eyebrow rather than
   opening the site. */
.digiops-pagehero__title {
	margin-top: 1.25rem;
	max-width: 64rem;
	font-size: clamp(2.25rem, 5.4vw, 5.5rem);
}

.digiops-pagehero__sub {
	margin: 1.5rem 0 0;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	color: var(--color-onv);
}

@media (min-width: 768px) {
	.digiops-pagehero__sub {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}

/* React passes accentClass="text-onv" for the headline; there is no global
   .text-onv in the theme, so the accent is scoped to this block. */
.digiops-pagehero .digiops-pagehero__accent {
	color: var(--color-onv);
}

/* sections/products.css */
/**
 * Section: products
 *
 * A dark premium band carrying two feature cards — the AI Voice Agent service
 * and the AutoBGV product. The looping decoration (.eq-bar, .product-glow,
 * .product-aurora, .shield-pulse) lives in theme.css; everything here is the
 * layout and the per-card accent those animations run on top of.
 */

.digiops-products {
	position: relative;
	/* The two background layers sit at z-index -1; isolating the section keeps
	   them behind its own content and nowhere near the rest of the page. */
	isolation: isolate;
	overflow: hidden;
	background: #0b0b12;
	color: #fff;
}

/* theme.css pads every direct `section` child of .site-main, but this band
   carries the original's own pt-[70px]/pb-16 on its inner wrapper — without
   this the two stack up and roughly double the vertical rhythm wherever the
   section renders straight into .site-main (ACF/shortcode). */
.site-main > .digiops-products {
	padding-block: 0;
}

.digiops-products__ground,
.digiops-products__texture {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.digiops-products__texture {
	opacity: 0.05;
}

/* ---------- headline column + cards ---------- */

.digiops-products__grid {
	display: grid;
	gap: 3rem;
	padding-top: 70px;
	padding-bottom: 4rem;
}

.digiops-products__eyebrow {
	margin: 0;
	color: var(--color-onv);
}

.digiops-products__heading {
	margin: 1.25rem 0 0;
	max-width: 28rem;
	/* the section runs a tighter scale than the global .h-xl */
	font-size: clamp(2rem, 4.5vw, 3rem);
}

.digiops-products__body-wrap {
	margin-top: 1.5rem;
}

.digiops-products__body {
	margin: 0;
	max-width: 24rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.6);
}

.digiops-products__cards {
	display: grid;
	gap: 1.25rem;
}

/* The reveal wrapper is separate from the card so the scroll transition and
   the card's own hover lift never fight over the same transform. */
.digiops-products__card-wrap {
	display: flex;
}

/* <Reveal stagger> animated the *children* of the container, not the container
   itself, and triggered once. So the grid keeps data-digiops-reveal purely to
   be observed — its own fade is cancelled here — and the hidden state moves
   onto the cards, which play 0.09s apart from that single trigger. */
.js .digiops-products__cards[data-digiops-reveal] {
	opacity: 1;
	transform: none;
	transition: none;
	will-change: auto;
}

.js .digiops-products__cards[data-digiops-reveal] > .digiops-products__card-wrap {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--digiops-products-delay, 0s);
	will-change: opacity, transform;
}

.js .digiops-products__cards[data-digiops-reveal].is-revealed > .digiops-products__card-wrap {
	opacity: 1;
	transform: none;
}

/* A card stuck at opacity 0 is worse than no animation at all. */
@media (prefers-reduced-motion: reduce) {
	.js .digiops-products__cards[data-digiops-reveal] > .digiops-products__card-wrap {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- the card ---------- */

.digiops-products__card {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 30rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1.75rem;
	background: rgba(255, 255, 255, 0.04);
	padding: 1.75rem;
	color: #fff;
	text-decoration: none;
	/* Tailwind's transition-transform curve, not the CSS `ease` default. */
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

a.digiops-products__card:hover {
	transform: translateY(-0.375rem);
}

a.digiops-products__card:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 3px;
}

/* the breathing glow behind the top of the card */
.digiops-products__glow {
	position: absolute;
	top: -4rem;
	left: 50%;
	height: 16rem;
	width: 16rem;
	border-radius: 999px;
	pointer-events: none;
	/* the glow-breathe keyframes re-state this; it is here so the glow is
	   still centred when animation is switched off for reduced motion */
	transform: translateX(-50%);
}

/* the gradient wash drifting across the card */
.digiops-products__aurora {
	position: absolute;
	top: 0;
	bottom: 0;
	left: -33.3333%;
	right: -33.3333%;
	pointer-events: none;
}

.digiops-products__card--violet .digiops-products__glow {
	background: radial-gradient(circle, rgba(108, 111, 224, 0.55), transparent 68%);
}

.digiops-products__card--violet .digiops-products__aurora {
	background: linear-gradient(
		100deg,
		transparent 12%,
		rgba(108, 111, 224, 0.22) 42%,
		rgba(150, 120, 255, 0.14) 58%,
		transparent 86%
	);
}

.digiops-products__card--lime .digiops-products__glow {
	background: radial-gradient(circle, rgba(196, 245, 66, 0.6), transparent 68%);
	/* offset so the two cards never breathe in step */
	animation-delay: -3.5s;
}

.digiops-products__card--lime .digiops-products__aurora {
	background: linear-gradient(
		100deg,
		transparent 12%,
		rgba(196, 245, 66, 0.16) 42%,
		rgba(120, 220, 140, 0.12) 58%,
		transparent 86%
	);
	animation-delay: -5s;
}

/* Phones: the glow and the wash stay, but hold still. The cards stack full
   width there, so the breathing and drifting moved most of the screen. With
   the animation off the glow keeps its centring transform from the rule
   above and the wash rests at its starting position. */
@media (max-width: 767px) {
	.digiops-products__glow,
	.digiops-products__aurora {
		animation: none;
		will-change: auto;
	}

	/* the glow's resting frame from glow-breathe */
	.digiops-products__glow {
		opacity: 0.8;
	}
}

/* ---------- plus button ---------- */

.digiops-products__top {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}

.digiops-products__plus {
	display: flex;
	height: 2.75rem;
	width: 2.75rem;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only a card that actually links anywhere shows the hover affordance — in
   the original the group was always a <Link>. */
a.digiops-products__card:hover .digiops-products__plus,
a.digiops-products__card:focus-visible .digiops-products__plus {
	transform: rotate(90deg);
}

/* ---------- artwork ---------- */

.digiops-products__art {
	position: relative;
	display: block;
	/* auto on all four sides centres the art in whatever space is left
	   between the plus button and the copy */
	margin: auto;
}

.digiops-products__art svg {
	height: 100%;
	width: 100%;
	display: block;
}

.digiops-products__art--voice {
	height: 7rem;
	width: 100%;
	max-width: 15rem;
	opacity: 0.9;
}

.digiops-products__art--shield {
	height: 10rem;
	width: 10rem;
	color: rgba(255, 255, 255, 0.9);
}

/* ---------- copy ---------- */

.digiops-products__copy {
	position: relative;
	margin-top: auto;
}

.digiops-products__card-title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.digiops-products__card-body {
	margin: 0.75rem 0 0;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.65);
}

.digiops-products__card--tone-bright .digiops-products__card-body {
	color: rgba(255, 255, 255, 0.8);
}

.digiops-products__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 999px;
	background: #fff;
	padding: 0.375rem 1rem;
	font-size: 0.875rem;
	/* Tailwind's text-sm is 0.875rem/1.25rem; without the paired line-height
	   the pill inherits the 1.6 body leading and grows to 2.15rem. */
	line-height: 1.25rem;
	font-weight: 700;
	color: var(--color-violet);
}

.digiops-products__cta--below {
	margin-top: 1.25rem;
}

/* ---------- the CTA line under the cards ---------- */

.digiops-products__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.digiops-products__foot-text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}

/* Phones: the question and the button stack, centred. */
@media (max-width: 767px) {
	.digiops-products__foot {
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}
}

/* ---------- breakpoints ---------- */

@media (min-width: 640px) {
	.digiops-products__cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.digiops-products__grid {
		padding-top: 86px;
		padding-bottom: 6rem;
	}

	.digiops-products__card {
		padding: 2rem;
	}

	.digiops-products__card-title {
		font-size: 1.7rem;
	}
}

@media (min-width: 1024px) {
	.digiops-products__grid {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: center;
		gap: 4rem;
	}
}

/* sections/promotional-videos-hero.css */
/**
 * Promotional Videos hero — app/promotional-videos/page.tsx, first <section>:
 *
 *   section   web-hero relative isolate overflow-hidden text-white (bg /bg3.jpg)
 *   layers    web-hero-scrim / web-hero-glow pointer-events-none absolute inset-0 -z-10
 *   inner     container-x pb-[56px] pt-[113px] md:pb-[70px] md:pt-[126px]
 *   eyebrow   Reveal flex justify-center > label text-onv
 *   h1        h-hero mt-6 text-center !text-[clamp 1.9rem/4.3vw/4.4rem] lg:whitespace-nowrap
 *   sub       mx-auto mt-6 max-w-xl text-center text-base font-semibold text-onv md:text-lg
 *   gallery   Reveal relative mt-0 md:mt-1
 *   grid      grid grid-cols-2 gap-3 sm:grid-cols-3 md:hidden
 *   cols      hidden md:flex md:items-end md:gap-4; each column flex-1 (flex-col gap-4)
 *   cta       mt-8 flex justify-center md:absolute md:bottom-4 md:left-1/2 md:mt-0 md:-translate-x-1/2
 *   Frame     group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.04]
 *             img absolute inset-0 object-cover + bg-gradient-to-t from-black/35 via-transparent
 *             (no image: bg-gradient-to-br from-white/[0.06] to-transparent)
 *             play  h-11 w-11 rounded-full bg-white/90 text-violet shadow-lg, group-hover:scale-110
 *             label bottom-3 left-3 text-[0.7rem] font-bold uppercase tracking-[0.12em] text-white/45
 */

.pvh {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	line-height: 1.5;
}

.pvh :where(h1, h2, h3, p) {
	margin: 0;
}

.pvh__layer {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

.pvh__inner {
	padding-top: 113px;
	padding-bottom: 56px;
}

.pvh__eyebrow-wrap {
	display: flex;
	justify-content: center;
}

.pvh__eyebrow {
	color: var(--color-onv);
}

.h-hero.pvh__title {
	margin-top: 1.5rem;
	text-align: center;
	font-size: clamp(1.9rem, 4.3vw, 4.4rem);
}

.pvh__sub {
	margin-inline: auto;
	margin-top: 1.5rem;
	max-width: 36rem;
	text-align: center;
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 600;
	color: var(--color-onv);
}

.pvh__gallery {
	position: relative;
	margin-top: 0;
}

.pvh__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.pvh__cols {
	display: none;
}

.pvh__col {
	flex: 1 1 0%;
	min-width: 0;
}

.pvh__cta {
	margin-top: 2rem;
	display: flex;
	justify-content: center;
}

/* ---------- Frame ---------- */

.pvh-frame {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(255, 255, 255, 0.04);
}

.pvh-frame--3-4 {
	aspect-ratio: 3 / 4;
}

.pvh-frame--3-5 {
	aspect-ratio: 3 / 5;
}

.pvh-frame--16-10 {
	aspect-ratio: 16 / 10;
}

.pvh-frame__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.pvh-frame__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.35), transparent, transparent);
}

.pvh-frame--empty .pvh-frame__shade {
	background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.06), transparent);
}

.pvh-frame__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-violet);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transform: translate(-50%, -50%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pvh-frame:hover .pvh-frame__play {
	transform: translate(-50%, -50%) scale(1.1);
}

.pvh-frame__play svg {
	margin-left: 0.125rem;
	width: 1rem;
	height: 1rem;
}

.pvh-frame__label {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.45);
}

/* ---------- phones: the fan ----------
   Five photo cards pivot from a shared bottom-centre point and spread out
   like a hand of cards, the middle one on top. Hidden from 768px, where the
   five-column gallery takes over. */
.pvh__fan {
	position: relative;
	height: 15.5rem;
	margin: 0.5rem auto 0;
}

.pvh__fancard {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 9.25rem;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
	transform-origin: 50% 100%;
	transform: translateX(-50%) rotate(var(--fan-r, 0deg));
}

.pvh__fancard img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.pvh__fancard:nth-child(1) { --fan-r: -30deg; z-index: 1; }
.pvh__fancard:nth-child(2) { --fan-r: -15deg; z-index: 2; }
.pvh__fancard:nth-child(3) { --fan-r: 0deg;   z-index: 5; }
.pvh__fancard:nth-child(4) { --fan-r: 15deg;  z-index: 3; }
.pvh__fancard:nth-child(5) { --fan-r: 30deg;  z-index: 4; }

/* with fewer than five photos, the cards close up around the middle */
.pvh__fancard:first-child:nth-last-child(1) { --fan-r: 0deg; }
.pvh__fancard:first-child:nth-last-child(2) { --fan-r: -10deg; }
.pvh__fancard:first-child:nth-last-child(2) ~ .pvh__fancard { --fan-r: 10deg; }

/* Phones: the button is a size smaller and sits clear of the cards. */
@media (max-width: 767px) {
	.pvh__cta {
		margin-top: 3rem;
	}

	.pvh__cta .pill {
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.pvh__fan {
		display: none;
	}
}

@media (min-width: 640px) {
	.pvh__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.pvh__inner {
		padding-top: 126px;
		padding-bottom: 70px;
	}

	.pvh__sub {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.pvh__gallery {
		margin-top: 0.25rem;
	}

	.pvh__grid {
		display: none;
	}

	.pvh__cols {
		display: flex;
		align-items: flex-end;
		gap: 1rem;
	}

	.pvh__col:first-child,
	.pvh__col:last-child {
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	.pvh__cta {
		position: absolute;
		bottom: 1rem;
		left: 50%;
		margin-top: 0;
		transform: translateX(-50%);
	}
}

@media (min-width: 1024px) {
	.h-hero.pvh__title {
		white-space: nowrap;
	}
}

/* sections/promotional-videos-problem.css */
/**
 * Promotional Videos intro — app/promotional-videos/page.tsx:
 *
 *   section  container-x pb-6 pt-16 md:pb-8 md:pt-[90px]
 *   grid     grid gap-10 lg:grid-cols-[3fr_2fr] lg:gap-16
 *   lead     Reveal min-w-0 > label text-violet + h-xl mt-4 !text-[clamp 1.9rem/4vw/3rem]
 *   spacer   label pointer-events-none hidden select-none opacity-0 lg:block
 *   body     Reveal mt-10 lg:mt-4 > max-w-3xl leading-relaxed text-ink/60
 */

.pvp {
	padding-top: 4rem;
	padding-bottom: 1.5rem;
	color: var(--color-ink);
	line-height: 1.5;
}

.pvp :where(h1, h2, h3, p) {
	margin: 0;
}

.pvp__grid {
	display: grid;
	gap: 2.5rem;
}

.pvp__lead,
.pvp__side {
	min-width: 0;
}

.pvp__eyebrow {
	color: var(--color-violet);
}

.h-xl.pvp__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.pvp__spacer {
	display: none;
	opacity: 0;
	pointer-events: none;
	user-select: none;
}

.pvp__body-wrap {
	margin-top: 2.5rem;
}

.pvp__body {
	max-width: 48rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* Phones: the heading and the paragraph stack close together. The grid gap
   and the paragraph's own top margin were adding up to 80px between them. */
@media (max-width: 767px) {
	.pvp__grid {
		gap: 1.25rem;
	}

	.pvp__body-wrap {
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.pvp {
		padding-top: 90px;
		padding-bottom: 2rem;
	}
}

@media (min-width: 1024px) {
	.pvp__grid {
		grid-template-columns: 3fr 2fr;
		gap: 4rem;
	}

	.pvp__spacer {
		display: block;
	}

	.pvp__body-wrap {
		margin-top: 1rem;
	}
}

/* sections/promotional-videos-process.css */
/**
 * Promotional Videos process wave — app/promotional-videos/page.tsx, "process":
 *
 *   section   relative isolate overflow-hidden py-16 md:py-[90px]
 *   glow      promo-process-glow pointer-events-none absolute inset-x-0 bottom-0 -z-10 h-[72%]
 *   eyebrow   relative flex items-center justify-center > label text-violet
 *   m-head    relative mx-auto mt-4 max-w-xl text-center md:hidden > h-lg
 *   wave      relative mx-auto mt-6 hidden h-[400px] max-w-4xl md:block
 *     svg     pointer-events-none absolute inset-x-0 top-0 h-[420px] w-full text-violet
 *     head    absolute left-1/2 top-[24px] w-full max-w-lg -translate-x-1/2 text-center > h-lg
 *     step    absolute flex w-40 -translate-x-1/2 flex-col items-center text-center (left x, top y)
 *   grid      mt-10 grid grid-cols-2 gap-x-6 gap-y-10 md:hidden
 *   step      icon  h-14 w-14 rounded-full bg-white text-violet shadow-[0_14px_32px_-14px_rgba(66,69,180,0.55)], svg h-5 w-5
 *             num   font-display mt-4 text-4xl font-bold text-ink/10
 *             title font-display -mt-2 text-lg font-semibold tracking-tight text-ink
 *             text  mt-1.5 text-sm font-medium leading-relaxed text-ink/55
 */

.pvpr {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 4rem;
	color: var(--color-ink);
	line-height: 1.5;
}

.pvpr :where(h1, h2, h3, p) {
	margin: 0;
}

.pvpr__glow {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: -10;
	height: 72%;
	pointer-events: none;
}

.pvpr__eyebrow-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pvpr__eyebrow {
	color: var(--color-violet);
}

.pvpr__mobile-head {
	position: relative;
	margin-inline: auto;
	margin-top: 1rem;
	max-width: 36rem;
	text-align: center;
}

.pvpr__wave {
	position: relative;
	display: none;
	margin-inline: auto;
	margin-top: 1.5rem;
	height: 400px;
	max-width: 56rem;
}

.pvpr__path {
	position: absolute;
	inset-inline: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 420px;
	color: var(--color-violet);
	pointer-events: none;
}

.pvpr__wave-head {
	position: absolute;
	left: 50%;
	top: 24px;
	width: 100%;
	max-width: 32rem;
	text-align: center;
	transform: translateX(-50%);
}

.pvpr-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.pvpr-step--wave {
	position: absolute;
	width: 10rem;
	transform: translateX(-50%);
}

.pvpr-step__icon {
	display: flex;
	flex-shrink: 0;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #fff;
	color: var(--color-violet);
	box-shadow: 0 14px 32px -14px rgba(66, 69, 180, 0.55);
}

.pvpr-step__icon svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.pvpr-step__num {
	margin-top: 1rem;
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.1);
}

.pvpr-step__title {
	margin-top: -0.5rem;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

.pvpr-step__text {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	line-height: 1.625;
	font-weight: 500;
	color: rgba(27, 28, 58, 0.55);
}

.pvpr__grid {
	margin-top: 2.5rem;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 1.5rem;
	row-gap: 2.5rem;
}

@media (min-width: 768px) {
	.pvpr {
		padding-block: 90px;
	}

	.pvpr__mobile-head,
	.pvpr__grid {
		display: none;
	}

	.pvpr__wave {
		display: block;
	}
}

/* sections/promotional-videos-services.css */
/**
 * Promotional Videos services band — app/promotional-videos/page.tsx, #video-services:
 *
 *   section   relative isolate overflow-hidden bg-[#0a0a12] py-16 text-white md:py-[90px]
 *   glow      web-dev-glow-strong pointer-events-none absolute inset-0 -z-10
 *   grid      grid gap-8 lg:grid-cols-[1fr_1.6fr] lg:gap-10
 *   intro     min-w-0 lg:sticky lg:top-0 lg:self-start lg:pr-8
 *             label text-onv · h-xl mt-4 !text-[clamp 1.9rem/4vw/3rem] · Reveal mt-5 > leading-relaxed text-white/55
 *   list      Reveal min-w-0 > <DevServiceList tight /> (shared dev-service-list)
 *   industries Reveal mt-10 md:mt-14
 *     row     flex flex-col gap-6 sm:flex-row sm:items-center sm:gap-6
 *     title   font-display shrink-0 text-lg font-bold leading-tight tracking-tight text-white/80 sm:text-xl
 *     chevron hidden shrink-0 items-center text-violet/60 sm:flex; h-14 w-14, second -ml-9 opacity-50
 *     grid    grid flex-1 grid-cols-3 gap-x-4 gap-y-8 sm:grid-cols-6 sm:gap-x-0 sm:divide-x sm:divide-white/10
 *     item    flex flex-col items-center gap-3 text-center sm:px-3
 *     icon    relative flex h-14 w-14 items-center justify-center
 *             halo absolute inset-0 rounded-full bg-[radial-gradient(circle,rgba(139,92,246,0.45),transparent_70%)] blur-lg
 *             glyph relative text-white/80, svg h-9 w-9
 *     label   font-display text-sm font-bold leading-tight tracking-tight
 */

.pvsv {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #0a0a12;
	color: #fff;
	line-height: 1.5;
	padding-block: 4rem;
}

/* Reset only this section's own copy — the embedded dev-service-list sets
   its own paragraph margins and must keep them. */
.pvsv__intro :where(h2, p),
.pvsv__ind :where(p) {
	margin: 0;
}

.pvsv__glow {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

.pvsv__grid {
	display: grid;
	gap: 2rem;
}

.pvsv__intro,
.pvsv__list {
	min-width: 0;
}

.pvsv__eyebrow {
	color: var(--color-onv);
}

.h-xl.pvsv__title {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.pvsv__lead {
	margin-top: 1.25rem;
}

.pvsv__lead p {
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

/* ---------- industries row ---------- */

.pvsv__ind-wrap {
	margin-top: 2.5rem;
}

.pvsv__ind {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.pvsv__ind-title {
	flex-shrink: 0;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
	color: rgba(255, 255, 255, 0.8);
}

.pvsv__chevrons {
	display: none;
	flex-shrink: 0;
	align-items: center;
	color: rgba(66, 69, 180, 0.6);
}

.pvsv__chevrons svg {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
}

.pvsv__chevrons svg + svg {
	margin-left: -2.25rem;
	opacity: 0.5;
}

.pvsv__ind-grid {
	display: grid;
	flex: 1 1 0%;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 1rem;
	row-gap: 2rem;
}

.pvsv__ind-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
}

.pvsv__ind-icon {
	position: relative;
	display: flex;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
}

.pvsv__ind-halo {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(139, 92, 246, 0.45), transparent 70%);
	filter: blur(16px);
}

.pvsv__ind-glyph {
	position: relative;
	color: rgba(255, 255, 255, 0.8);
}

.pvsv__ind-glyph svg {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
}

.pvsv__ind-label {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

/* Phones: "Industry-Specific Videos" runs on one line; the heading's line
   break only applies from 768px up. */
@media (max-width: 767px) {
	.pvsv__ind-title br {
		display: none;
	}
}

@media (min-width: 640px) {
	.pvsv__ind {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}

	.pvsv__ind-title {
		font-size: 1.25rem;
	}

	.pvsv__chevrons {
		display: flex;
	}

	.pvsv__ind-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		column-gap: 0;
	}

	.pvsv__ind-item {
		padding-inline: 0.75rem;
	}

	.pvsv__ind-item:not(:last-child) {
		border-right: 1px solid rgba(255, 255, 255, 0.1);
	}
}

@media (min-width: 768px) {
	.pvsv {
		padding-block: 90px;
	}

	.pvsv__ind-wrap {
		margin-top: 3.5rem;
	}
}

@media (min-width: 1024px) {
	.pvsv__grid {
		grid-template-columns: 1fr 1.6fr;
		gap: 2.5rem;
	}

	.pvsv__intro {
		position: sticky;
		top: 0;
		align-self: start;
		padding-right: 2rem;
	}
}

/* sections/promotional-videos-stats.css */
/**
 * Promotional Videos stats bento — app/promotional-videos/page.tsx:
 *
 *   section  container-x pb-16 pt-6 md:pb-[90px] md:pt-8
 *   grid     grid gap-4 md:grid-cols-3
 *   photo    relative min-h-[22rem] overflow-hidden rounded-3xl border border-black/5 bg-cover bg-center
 *            shade  absolute inset-x-0 top-0 h-28 bg-gradient-to-b from-black/45 to-transparent
 *            brand  font-display absolute left-6 top-6 text-sm font-bold tracking-wide text-white
 *            badge  absolute right-6 top-6 h-8 w-8 rounded-lg bg-white/90 text-violet
 *            card   absolute inset-x-5 bottom-5 rounded-2xl bg-white p-5 shadow-[0_20px_50px_-30px_rgba(44,46,126,0.5)]
 *                   value font-display text-4xl font-bold tracking-tight text-ink
 *                   text  mt-1.5 text-sm font-medium leading-relaxed text-ink/55
 *   quote    flex flex-col rounded-3xl border border-black/5 bg-[#f2f2f6] p-7
 *            label text-xs font-semibold text-ink/45 · value font-display mt-1 text-5xl font-bold tracking-tight
 *            avatars mt-8 flex -space-x-3 · h-9 w-9 rounded-full border-2 border-[#f2f2f6] object-cover
 *            quote mt-4 text-sm font-medium leading-relaxed text-ink/70
 *   stack    flex flex-col gap-4
 *            blue flex flex-1 flex-col rounded-3xl bg-[#2f6bff] p-7 text-white
 *                 text mt-auto pt-6 text-sm font-medium leading-relaxed text-white/75
 *            dark flex items-center justify-between rounded-3xl bg-[#0b0b14] p-7 text-white
 *                 value font-display text-4xl font-bold tracking-tight
 */

.pvs {
	padding-top: 1.5rem;
	padding-bottom: 4rem;
	color: var(--color-ink);
	line-height: 1.5;
}

.pvs :where(h1, h2, h3, p) {
	margin: 0;
}

.pvs__grid {
	display: grid;
	gap: 1rem;
}

/* ---------- photo card ---------- */

.pvs__photo {
	position: relative;
	min-height: 22rem;
	overflow: hidden;
	border-radius: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background-size: cover;
	background-position: center;
}

.pvs__photo-shade {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 7rem;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
}

.pvs__brand {
	position: absolute;
	left: 1.5rem;
	top: 1.5rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.025em;
	color: #fff;
}

.pvs__badge {
	position: absolute;
	right: 1.5rem;
	top: 1.5rem;
	display: flex;
	width: 2rem;
	height: 2rem;
	align-items: center;
	justify-content: center;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.9);
	color: var(--color-violet);
}

.pvs__badge svg {
	margin-left: 0.125rem;
	width: 1rem;
	height: 1rem;
}

.pvs__photo-card {
	position: absolute;
	inset-inline: 1.25rem;
	bottom: 1.25rem;
	border-radius: 1rem;
	background: #fff;
	padding: 1.25rem;
	box-shadow: 0 20px 50px -30px rgba(44, 46, 126, 0.5);
}

.pvs__photo-value,
.pvs__dark-value {
	font-size: 2.25rem;
	line-height: 2.5rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.pvs__photo-value {
	color: var(--color-ink);
}

.pvs__photo-text {
	margin-top: 0.375rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.55);
}

/* ---------- quote card ---------- */

.pvs__quote {
	display: flex;
	flex-direction: column;
	border-radius: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background: #f2f2f6;
	padding: 1.75rem;
}

.pvs__label {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.45);
}

.pvs__label--light {
	color: rgba(255, 255, 255, 0.7);
}

.pvs__big {
	margin-top: 0.25rem;
	font-size: 3rem;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.pvs__big--ink {
	color: var(--color-ink);
}

.pvs__avatars {
	margin-top: 2rem;
	display: flex;
}

.pvs__avatar {
	display: block;
	width: 2.25rem;
	height: 2.25rem;
	max-width: none;
	border-radius: 999px;
	border: 2px solid #f2f2f6;
	object-fit: cover;
}

.pvs__avatar + .pvs__avatar {
	margin-left: -0.75rem;
}

.pvs__quote-text {
	margin-top: 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

/* ---------- right column ---------- */

.pvs__stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pvs__blue {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	border-radius: 1.5rem;
	background: #2f6bff;
	padding: 1.75rem;
	color: #fff;
}

.pvs__blue-text {
	margin-top: auto;
	padding-top: 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.75);
}

.pvs__dark {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 1.5rem;
	background: #0b0b14;
	padding: 1.75rem;
	color: #fff;
}

@media (min-width: 768px) {
	.pvs {
		padding-top: 2rem;
		padding-bottom: 90px;
	}

	.pvs__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* sections/promotional-videos-work.css */
/**
 * Promotional Videos work wall — app/promotional-videos/page.tsx, #work:
 *
 *   section  overflow-hidden bg-lavender
 *   head     container-x pt-16 md:pt-[90px] > label text-violet · h-lg mt-4
 *   rows     mt-[50px] space-y-5 pb-16 md:pb-[90px]
 *   track    marquee marquee-hover-pause > marquee-track gap-5 (--marquee-dur 100s / 118s reverse)
 *   WorkCard group relative shrink-0 overflow-hidden rounded-2xl border border-black/5
 *            row 1  aspect-[3/4] h-[289px] sm:h-[324px]
 *            row 2  aspect-video h-[231px] sm:h-[259px]
 *            img    absolute inset-0 h-full w-full object-cover
 *            shade  absolute inset-0 bg-gradient-to-t from-black/55 via-black/5 to-transparent
 *            play   absolute centred h-14 w-14 rounded-full border border-white/25 bg-black/15
 *                   backdrop-blur-sm, transition-transform 300ms, group-hover:scale-110
 *                   svg ml-1 h-5 w-5 fill #fff
 *            label  absolute bottom-3 left-3 right-3 text-xs font-bold text-white
 */

.pvw {
	overflow: hidden;
	background: var(--color-lavender);
	color: var(--color-ink);
	line-height: 1.5;
}

.pvw :where(h1, h2, h3, p) {
	margin: 0;
}

.pvw__head {
	padding-top: 4rem;
}

.pvw__eyebrow {
	color: var(--color-violet);
}

.h-lg.pvw__title {
	margin-top: 1rem;
}

.pvw__rows {
	margin-top: 50px;
	padding-bottom: 4rem;
}

.pvw__rows > * + * {
	margin-top: 1.25rem;
}

.pvw__track {
	gap: 1.25rem;
}

.pvw-card {
	position: relative;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.05);
}

.pvw-card--reel {
	aspect-ratio: 3 / 4;
	height: 289px;
}

.pvw-card--film {
	aspect-ratio: 16 / 9;
	height: 231px;
}

.pvw-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.pvw-card__shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.05), transparent);
}

.pvw-card__play {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	width: 3.5rem;
	height: 3.5rem;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.15);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transform: translate(-50%, -50%);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pvw-card:hover .pvw-card__play {
	transform: translate(-50%, -50%) scale(1.1);
}

.pvw-card__play svg {
	display: block;
	margin-left: 0.25rem;
	width: 1.25rem;
	height: 1.25rem;
}

.pvw-card__label {
	position: absolute;
	bottom: 0.75rem;
	left: 0.75rem;
	right: 0.75rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: #fff;
}

@media (min-width: 640px) {
	.pvw-card--reel {
		height: 324px;
	}

	.pvw-card--film {
		height: 259px;
	}
}

@media (min-width: 768px) {
	.pvw__head {
		padding-top: 90px;
	}

	.pvw__rows {
		padding-bottom: 90px;
	}
}

/* sections/services-index.css */
/**
 * Section: services-index — the home page service carousel.
 *
 * Ported from components/home/ServicesIndex.tsx. Everything the original did
 * with Tailwind utilities lives here as real CSS; the band's icy diagonal
 * gradient (.home-services) already ships in theme.css and is reused by name.
 *
 * Layout only. The motion — a 3s auto-advance that tweens scrollLeft over
 * 700ms, the seamless wrap and the step dots — lives in
 * assets/js/sections/services-index.js, exactly where the original kept it.
 * An earlier port drove the walk from a CSS keyframe transform on an inner
 * track; that fought the scroll-snap container it lived inside and broke the
 * loop as soon as the visitor scrolled, so the scroller is now a plain flex
 * scroll-snap box with the cards as its direct children, matching the React
 * markup one for one.
 */

/* ---------- band ---------- */

.digiops-svc {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Beats `.site-main > section`'s shared vertical rhythm — this band carries
   the tighter padding the original used so the next section tucks in close. */
.site-main > .digiops-svc,
.digiops-svc.digiops-svc {
	padding-block: 4rem 2.25rem;
}

@media (min-width: 768px) {
	.site-main > .digiops-svc,
	.digiops-svc.digiops-svc {
		padding-block: 6rem 52px;
	}
}

/* ---------- heading row ---------- */

.digiops-svc__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem;
}

.digiops-svc__eyebrow {
	color: var(--color-violet);
}

.digiops-svc__title {
	margin: 1rem 0 0;
	max-width: 42rem;
	/* The original forced a smaller size than .h-xl here. */
	font-size: clamp(2rem, 4.5vw, 3rem);
}

/* ---------- step dots ---------- */

.digiops-svc__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.5rem;
}

/* The dots do nothing without the section script, so they are not offered
   until the document is marked `js`. The scroller itself still swipes. */
.no-js .digiops-svc__dots {
	display: none;
}

.digiops-svc__dot {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	height: 0.5rem;
	width: 0.5rem;
	flex: none;
	border-radius: 999px;
	background: var(--color-violet);
	opacity: 0.3;
	cursor: pointer;
	/* duration-400 on the original button. */
	transition: width 0.4s ease, opacity 0.4s ease;
	-webkit-tap-highlight-color: transparent;
}

.digiops-svc__dot.is-active {
	width: 1.5rem;
	opacity: 1;
}

.digiops-svc__dot:focus-visible {
	outline: 2px solid var(--color-violet);
	outline-offset: 3px;
	opacity: 1;
}

/* ---------- carousel ---------- */

.digiops-svc__stage {
	margin-top: 1.5rem;
}

/* The scroller IS the flex track, like the original — the script measures
   offsetLeft on its direct children to find one card step and one full set.
   The vertical padding gives the card's hover lift and shadow room inside the
   scroll box, which clips vertically because overflow-x is set. */
.digiops-svc__viewport {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	/* The script tweens scrollLeft frame by frame; a smooth scroll-behaviour
	   inherited from anywhere would fight it. */
	scroll-behavior: auto;
	padding-inline: clamp(1.25rem, 4vw, 4rem);
	padding-block: 2rem;
	scroll-padding-inline: clamp(1.25rem, 4vw, 4rem);
	-webkit-overflow-scrolling: touch;
}

.digiops-svc__viewport:focus-visible {
	outline: 2px solid var(--color-violet);
	outline-offset: -2px;
}

/* ---------- card ---------- */

.digiops-svc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: none;
	width: min(82vw, 24rem);
	max-width: 24rem;
	min-height: 28rem;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: 1.5rem;
	padding: 1.75rem;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}

@media (min-width: 768px) {
	.digiops-svc__card {
		min-height: 30rem;
		padding: 2.25rem;
	}
}

.digiops-svc__card--dark {
	color: #fff;
}

.digiops-svc__card--light {
	color: var(--color-ink);
	border: 1px solid rgba(27, 28, 58, 0.05);
}

.digiops-svc__photo {
	pointer-events: none;
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: bottom;
	user-select: none;
}

/* Translucent wash the photo still shows through. On hover devices it is
   transparent until hover; on touch it stays on, because there the
   description is always visible and needs the contrast. */
.digiops-svc__scrim {
	pointer-events: none;
	position: absolute;
	inset: 0;
	transition: opacity 0.5s ease;
}

.digiops-svc__card--dark .digiops-svc__scrim {
	background: linear-gradient(to bottom, rgba(6, 8, 20, 0.78) 0%, rgba(6, 8, 20, 0.34) 100%);
}

.digiops-svc__card--light .digiops-svc__scrim {
	background: linear-gradient(to bottom, rgba(238, 244, 251, 0.85) 0%, rgba(238, 244, 251, 0.4) 100%);
}

.digiops-svc__body,
.digiops-svc__tags {
	position: relative;
}

.digiops-svc__row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.digiops-svc__name {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.025em;
}

@media (min-width: 768px) {
	.digiops-svc__name {
		font-size: 1.875rem;
	}
}

.digiops-svc__arrow {
	flex: none;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.digiops-svc__card--light .digiops-svc__arrow {
	color: var(--color-violet);
}

.digiops-svc__pitch {
	margin: 0.75rem 0 0;
	line-height: 1.625;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.digiops-svc__card--dark .digiops-svc__pitch {
	color: rgba(255, 255, 255, 0.85);
}

.digiops-svc__card--light .digiops-svc__pitch {
	color: rgba(27, 28, 58, 0.75);
}

.digiops-svc__tags {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-top: 2rem;
}

.digiops-svc__tag {
	border-radius: 999px;
	border: 1px solid transparent;
	padding: 0.375rem 0.875rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.digiops-svc__card--dark .digiops-svc__tag {
	border-color: rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.digiops-svc__card--light .digiops-svc__tag {
	border-color: rgba(27, 28, 58, 0.1);
	background: rgba(255, 255, 255, 0.6);
	color: var(--color-deep);
}

/* ---------- hover states ---------- */

@media (hover: hover) {
	.digiops-svc__scrim {
		opacity: 0;
	}

	.digiops-svc__pitch {
		opacity: 0;
		transform: translateY(0.375rem);
	}

	.digiops-svc__card:hover .digiops-svc__scrim,
	.digiops-svc__card:focus-visible .digiops-svc__scrim {
		opacity: 1;
	}

	.digiops-svc__card:hover .digiops-svc__pitch,
	.digiops-svc__card:focus-visible .digiops-svc__pitch {
		opacity: 1;
		transform: translateY(0);
	}
}

.digiops-svc__card:hover .digiops-svc__arrow,
.digiops-svc__card:focus-visible .digiops-svc__arrow {
	opacity: 1;
}

.digiops-svc__card--dark:hover .digiops-svc__tag,
.digiops-svc__card--dark:focus-visible .digiops-svc__tag {
	border-color: rgba(255, 255, 255, 0.5);
}

.digiops-svc__card--light:hover .digiops-svc__tag,
.digiops-svc__card--light:focus-visible .digiops-svc__tag {
	border-color: rgba(66, 69, 180, 0.4);
}

/* ---------- reduced motion ----------
   The original only short-circuited the auto-advance interval; the card's
   hover states were untouched. So this drops the durations rather than the
   states — forcing the scrim on would leave every photo permanently washed
   out for exactly the visitors who asked for less movement, not less
   contrast. The script makes the same distinction. */

@media (prefers-reduced-motion: reduce) {
	.digiops-svc__scrim,
	.digiops-svc__pitch,
	.digiops-svc__arrow,
	.digiops-svc__tag,
	.digiops-svc__dot {
		transition-duration: 0.01ms;
	}
}

/* sections/stacked-journey.css */
/**
 * Stacked step journey — ported from components/StackedStepJourney.tsx.
 *
 * A white band on the pastel aurora (.journey-glow, painted in theme.css):
 * a two-line centred headline, then one fixed-aspect stage (.journey-figure,
 * also from theme.css) holding a stack of rhombus plates with three callouts
 * down each side. The template places every piece of that stage in % of the
 * box, so this file only has to paint it.
 *
 * HOVER
 * -----
 * In React an `active` index recoloured the row's connector, dot, plate and
 * text together, and slid the callout 6px toward the stack. Here every
 * element of a row carries the same data-sj-i, the row's colours live in
 * custom properties, and one :has() rule per row flips them when either the
 * plate or the callout is hovered. No script, no state — and a browser
 * without :has() simply gets the resting state, which is the whole diagram.
 *
 * Transitions are 0.35s ease-in-out throughout, as they were in the source;
 * theme.css already reduces them to nothing under prefers-reduced-motion.
 */

.digiops-sj {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: var(--color-ink);
}

/* The theme pads every top-level section, but this one carries the
   original's own pt-10 / md:pt-14 / pb-[3.85rem] on its inner wrapper. */
.site-main > .digiops-sj {
	padding-block: 0;
}

.digiops-sj__inner {
	padding-block: 2.5rem 3.85rem;
}

@media (min-width: 768px) {
	.digiops-sj__inner {
		padding-top: 3.5rem;
	}
}

/* the aurora only covers the lower 72% of the band, as in the original */
.digiops-sj__glow {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 72%;
	z-index: -10;
	pointer-events: none;
}

/* ---------- headline ---------- */

.digiops-sj__head {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

/* Both lines are set in the display face at a clamped size with no leading
   utility of their own, so they keep the 1.5 line-height they inherited in
   the original rather than the theme's body 1.6. */
.digiops-sj__h2,
.digiops-sj__sub {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.5;
	margin: 0;
}

.digiops-sj__h2 {
	font-size: clamp(1.9rem, 4vw, 3rem);
	color: var(--color-ink);
}

/* smaller than the h2 above it, and sized so it stays on one line all the
   way down to mobile */
.digiops-sj__sub {
	margin-top: 0.25rem;
	font-size: clamp(1.25rem, 2.4vw, 1.85rem);
	color: #0648c8;
}

/* ============================================================
   The diagram
   ============================================================ */

.digiops-sj__fig {
	position: relative;
	margin-inline: auto;
	/* Below lg the stacked layout runs instead: three callouts a side need
	   real width. */
	display: none;

	/* resting state of a row */
	--sj-line: #56bdea;
	--sj-dot: #1e9bd8;
	--sj-title: #1b1c3a;
	--sj-body: rgba(27, 28, 58, 0.6);
	--sj-plate-scale: 1;
	--sj-plate-filter: drop-shadow(0 8px 16px rgba(27, 28, 58, 0.14));

	/* the hovered row — deep enough that the active row reads at a glance */
	--sj-line-on: #0b5175;
	--sj-body-on: rgba(11, 81, 117, 0.88);
	--sj-plate-filter-on: brightness(1.08) drop-shadow(0 14px 22px rgba(15, 107, 255, 0.28));
}

@media (min-width: 1024px) {
	.digiops-sj__fig {
		display: block;
	}

	.digiops-sj__stack {
		display: none;
	}
}

/* connectors sit behind the plates so the elbows tuck under each tip */
.digiops-sj__lines {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
}

.digiops-sj__line {
	stroke: var(--sj-line);
	transition: stroke 0.35s ease-in-out;
}

/* ---------- plates ---------- */

.digiops-sj__plate {
	position: absolute;
	left: 50%;
	cursor: default;
	transform: translateX(-50%) scale(var(--sj-plate-scale, 1));
	filter: var(--sj-plate-filter);
	transition: filter 0.35s ease-in-out, transform 0.35s ease-in-out;
}

/* ---------- connector dots ---------- */

.digiops-sj__dot {
	position: absolute;
	z-index: 20;
	display: block;
	width: 11px;
	height: 11px;
	margin-left: -5.5px;
	margin-top: -5.5px;
	border-radius: 999px;
	background: var(--sj-dot);
	transition: background 0.35s ease-in-out;
}

/* ---------- callouts ---------- */

.digiops-sj__callout {
	position: absolute;
	z-index: 20;
	width: 27%;
	/* the -50% keeps it centred on its dot; --sj-shift slides the active one
	   toward the stack, tightening it to its connector */
	transform: translateY(-50%) translateX(var(--sj-shift, 0px));
	transition: transform 0.35s ease-in-out;
}

.digiops-sj__callout--left {
	right: 71%;
	text-align: right;
	--sj-nudge: 6px;
}

.digiops-sj__callout--right {
	left: 71%;
	text-align: left;
	--sj-nudge: -6px;
}

.digiops-sj__row {
	display: flex;
	align-items: stretch;
	gap: 0.625rem;
}

.digiops-sj__text {
	min-width: 0;
	flex: 1 1 0%;
}

/* the `}` / `{` beside each callout, stretched to the text height */
.digiops-sj__brace {
	display: block;
	width: 14px;
	flex-shrink: 0;
	align-self: stretch;
	stroke: var(--sj-line);
	transition: stroke 0.35s ease-in-out;
}

.digiops-sj__callout--right .digiops-sj__brace {
	transform: scaleX(-1);
}

.digiops-sj__c-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--sj-title);
	transition: color 0.35s ease-in-out;
}

.digiops-sj__c-body {
	margin: 0.375rem 0 0;
	font-size: 0.8rem;
	line-height: 1.375;
	color: var(--sj-body);
	transition: color 0.35s ease-in-out;
}

/* ---------- the hovered row ----------
   One rule per row index. Hovering a plate or a callout colours that step's
   line, dot and text too, so the whole row reads as one highlighted unit.
   Six is the design; the extra indices keep a longer repeater behaving. */

.digiops-sj__fig:has(.digiops-sj__hot[data-sj-i="0"]:hover) [data-sj-i="0"],
.digiops-sj__fig:has(.digiops-sj__hot[data-sj-i="1"]:hover) [data-sj-i="1"],
.digiops-sj__fig:has(.digiops-sj__hot[data-sj-i="2"]:hover) [data-sj-i="2"],
.digiops-sj__fig:has(.digiops-sj__hot[data-sj-i="3"]:hover) [data-sj-i="3"],
.digiops-sj__fig:has(.digiops-sj__hot[data-sj-i="4"]:hover) [data-sj-i="4"],
.digiops-sj__fig:has(.digiops-sj__hot[data-sj-i="5"]:hover) [data-sj-i="5"],
.digiops-sj__fig:has(.digiops-sj__hot[data-sj-i="6"]:hover) [data-sj-i="6"],
.digiops-sj__fig:has(.digiops-sj__hot[data-sj-i="7"]:hover) [data-sj-i="7"] {
	--sj-line: var(--sj-line-on);
	--sj-dot: var(--sj-line-on);
	--sj-title: var(--sj-line-on);
	--sj-body: var(--sj-body-on);
	--sj-plate-scale: 1.04;
	--sj-plate-filter: var(--sj-plate-filter-on);
	/* resolves to nothing on the line, dot and plate, which do not use it */
	--sj-shift: var(--sj-nudge);
}

/* ============================================================
   Below 1024px: the same steps, stacked
   ============================================================ */

.digiops-sj__stack {
	margin-top: 3rem;
}

.digiops-sj__mstep {
	text-align: center;
}

.digiops-sj__mstep + .digiops-sj__mstep {
	margin-top: 2.5rem;
}

.digiops-sj__mplate {
	display: block;
	width: 62%;
	max-width: 240px;
	margin-inline: auto;
	filter: drop-shadow(0 8px 16px rgba(27, 28, 58, 0.14));
}

.digiops-sj__mtitle {
	margin: 1.25rem 0 0;
	font-family: var(--font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

.digiops-sj__mbody {
	max-width: 24rem;
	margin: 0.5rem auto 0;
	font-size: 0.875rem;
	line-height: 1.375;
	color: rgba(27, 28, 58, 0.6);
}

/* sections/stats-get-in-touch.css */
/**
 * Stats + Get In Touch — ported from components/web/StatsGetInTouch.tsx.
 *
 * The Tailwind utilities from the JSX, written out as real CSS:
 *
 *   section  bg-[#e8e7eb] py-16 text-ink md:py-[90px]
 *   grid     container-x grid items-center gap-12 lg:grid-cols-[1fr_1.15fr]
 *   title    h-xl max-w-md !text-[clamp 2rem/4.5vw/3rem]
 *   body     mt-5 max-w-md leading-relaxed text-ink/60
 *   stats    mt-10 grid max-w-md grid-cols-3 gap-6
 *   number   font-display text-4xl font-bold tracking-tight md:text-5xl
 *   label    mt-2 text-sm font-semibold text-ink/60
 *   card     rounded-3xl border border-black/15 bg-white p-8
 *            shadow-[0_30px_80px_-40px_rgba(44,46,126,0.35)] md:p-10
 *   field    w-full border-b border-tint bg-transparent pb-2 pt-1 text-sm
 *            font-semibold text-ink placeholder:font-medium
 *            placeholder:text-ink/35 focus:border-violet
 *   flabel   block text-xs font-semibold text-ink
 *
 * The card holds the theme's own copy of that form by default. When an editor
 * pastes a plugin shortcode instead, the card is marked --plugin and the
 * generic element selectors at the bottom dress whatever the plugin printed.
 */

.digiops-sgt {
	/* the one hard-coded colour in the original — a warm grey band that sets
	   the white form card off from the white page above it */
	background: #e8e7eb;
	color: var(--color-ink);
	padding-block: 4rem;
}

@media (min-width: 768px) {
	.digiops-sgt {
		padding-block: 90px;
	}
}

.digiops-sgt__inner {
	display: grid;
	align-items: center;
	gap: 3rem;
}

@media (min-width: 1024px) {
	/* the copy column is the narrower of the two, as in the original */
	.digiops-sgt__inner {
		grid-template-columns: 1fr 1.15fr;
	}
}

/* ---------- copy column ---------- */

/* The React className was `h-xl max-w-md !text-[clamp 2rem/4.5vw/3rem]`: the
   `!` beat .h-xl's own clamp 2.25rem/5.4vw/5rem. Scoping the selector to the
   section wins on specificity rather than on stylesheet order, so the cap
   holds however the sheets end up being loaded. */
.digiops-sgt .digiops-sgt__title {
	max-width: 28rem;
	font-size: clamp(2rem, 4.5vw, 3rem);
}

.digiops-sgt__body {
	margin: 1.25rem 0 0;
	max-width: 28rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* ---------- counters ---------- */

.digiops-sgt__stats {
	margin-top: 2.5rem;
	max-width: 28rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Reveal's `stagger` prop, as a delay off the item's own index. */
.js .digiops-sgt__stat {
	transition-delay: calc(var(--sgt-i, 0) * 90ms);
}

.digiops-sgt__num {
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.025em;
	font-size: 2.25rem;
	line-height: 2.5rem;
}

@media (min-width: 768px) {
	.digiops-sgt__num {
		font-size: 3rem;
		line-height: 1;
	}
}

.digiops-sgt__stat-label {
	margin: 0.5rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.6);
}

/* ---------- form card ---------- */

.digiops-sgt__card {
	border-radius: 1.5rem;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: #fff;
	padding: 2rem;
	box-shadow: 0 30px 80px -40px rgba(44, 46, 126, 0.35);
}

@media (min-width: 768px) {
	.digiops-sgt__card {
		padding: 2.5rem;
	}
}

/* Editors-only note, shown while nothing is receiving the built-in form. */
.digiops-sgt__notice {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	border: 1px dashed var(--color-tint);
	border-radius: var(--radius-card);
	font-size: 0.8rem;
	line-height: 1.5;
	color: rgba(27, 28, 58, 0.7);
}

/* ---------- the form itself ---------- */

/*
 * The React `field` and `label` utility strings. Element selectors are scoped
 * to the card so a plugin's markup inherits exactly the same design without
 * the theme depending on any one plugin's class names.
 */

.digiops-sgt__card label {
	display: block;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: var(--color-ink);
}

.digiops-sgt__card input[type="text"],
.digiops-sgt__card input[type="email"],
.digiops-sgt__card input[type="tel"],
.digiops-sgt__card input[type="url"],
.digiops-sgt__card input[type="number"],
.digiops-sgt__card input[type="date"],
.digiops-sgt__card select,
.digiops-sgt__card textarea {
	width: 100%;
	max-width: 100%;
	border: 0;
	border-bottom: 1px solid var(--color-tint);
	border-radius: 0;
	background: transparent;
	padding: 0.25rem 0 0.5rem;
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 0.875rem;
	/* text-sm is 0.875rem/1.25rem in the original: 20px, not 1.4 (19.6px).
	   The fraction is invisible per field but the form carries four of them. */
	line-height: 1.25rem;
	font-weight: 600;
	box-shadow: none;
	transition: border-color 0.25s ease;
}

.digiops-sgt__card input:focus,
.digiops-sgt__card select:focus,
.digiops-sgt__card textarea:focus {
	outline: none;
	border-bottom-color: var(--color-violet);
}

.digiops-sgt__card ::placeholder {
	font-weight: 500;
	color: rgba(27, 28, 58, 0.35);
}

/* The select's own disabled first option is the placeholder; give it the same
   weight and colour so the resting state reads like the inputs' placeholders. */
.digiops-sgt__card select:invalid {
	font-weight: 500;
	color: rgba(27, 28, 58, 0.35);
}

.digiops-sgt__card select option {
	font-weight: 600;
	color: var(--color-ink);
}

.digiops-sgt__card textarea {
	resize: none;
}

/* Two-up row — `grid gap-6 sm:grid-cols-2` in the source. The built-in form
   uses these classes; an editor can add them to a plugin's fields too. */
.digiops-sgt-row {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.digiops-sgt-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.digiops-sgt-row > .digiops-sgt-col {
	margin: 0;
	min-width: 0;
}

/* mt-6 between the two rows and the message block. */
.digiops-sgt__form > .digiops-sgt-row + .digiops-sgt-row,
.digiops-sgt__form > .digiops-sgt__field {
	margin-top: 1.5rem;
}

.digiops-sgt__form[hidden] {
	display: none;
}

/* mt-4 text-sm font-semibold text-red-600 */
.digiops-sgt__error {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: #dc2626;
}

.digiops-sgt__error[hidden] {
	display: none;
}

/* mt-8 above the button, independent of whatever precedes it. */
.digiops-sgt__actions {
	margin-top: 2rem;
}

/* <Magnetic> — an inline-block span in the React source. */
.digiops-sgt__magnetic {
	display: inline-block;
}

/* The button is .pill .pill-violet from theme.css; only the disabled state is
   the section's own (`disabled:opacity-60`). */
.digiops-sgt__submit[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* ---------- success panel ---------- */

/* flex h-full flex-col justify-center py-6 text-center */
.digiops-sgt__success {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	padding-block: 1.5rem;
	text-align: center;
}

.digiops-sgt__success[hidden] {
	display: none;
}

.digiops-sgt__success:focus {
	outline: none;
}

/* mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-lavender */
.digiops-sgt__check {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto;
	width: 4rem;
	height: 4rem;
	border-radius: 999px;
	background: var(--color-lavender);
}

/* font-display mt-6 text-2xl font-bold tracking-tight */
.digiops-sgt__success-title {
	margin: 1.5rem 0 0;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* mx-auto mt-3 max-w-sm leading-relaxed text-ink/60 */
.digiops-sgt__success-body {
	margin: 0.75rem auto 0;
	max-width: 24rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* mt-8 flex flex-wrap justify-center gap-3 */
.digiops-sgt__success-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 2rem;
}

/* ---------- plugin-rendered forms ---------- */

/*
 * Only for the shortcode path. The built-in form carries the theme's own
 * classes and reuses .pill / .pill-violet directly; a plugin's markup cannot,
 * so these rules approximate the same rhythm and button for it. Selectors are
 * generic on purpose so WPForms, Contact Form 7 and Fluent Forms all inherit
 * the design without the theme depending on any one of them.
 */

.digiops-sgt__card--plugin form > p,
.digiops-sgt__card--plugin .wpforms-field,
.digiops-sgt__card--plugin .ff-el-group,
.digiops-sgt__card--plugin .frm_form_field,
.digiops-sgt__card--plugin .digiops-sgt-row {
	margin: 0 0 1.5rem;
	padding: 0;
}

.digiops-sgt__card--plugin button[type="submit"],
.digiops-sgt__card--plugin input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	/* the source's mt-8, measured from the last field rather than added to it */
	margin-top: 2rem;
	width: auto;
	border-radius: 999px;
	border: 1.5px solid transparent;
	padding: 0.95rem 2rem;
	background: var(--color-violet);
	color: #fff;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1.5;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	/* same three properties .pill transitions */
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.digiops-sgt__card--plugin button[type="submit"]:hover,
.digiops-sgt__card--plugin input[type="submit"]:hover {
	background: var(--color-deep);
}

.digiops-sgt__card--plugin button[type="submit"][disabled],
.digiops-sgt__card--plugin input[type="submit"][disabled] {
	opacity: 0.6;
}

/* Honeypot. Kept out of the accessibility tree and off-screen rather than
   display:none — some bots skip hidden inputs, and a screen reader never
   reaches it because the wrapper is aria-hidden. */
.digiops-sgt__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* sections/testimonial-row.css */
/**
 * Section: testimonial-row
 *
 * components/home/Testimonials.tsx and components/home/TestimonialRow.tsx,
 * with every Tailwind utility string in those two files resolved to real CSS
 * — Tailwind is not loaded in the theme.
 *
 * Shared primitives are NOT re-declared here: .bento (radius + lift), .marquee
 * / .marquee-track / .marquee-hover-pause (the seamless -50% loop), .label,
 * .h-lg, .text-violet, .font-display, .container-x and the .wm word mask all
 * come from theme.css by the same names the React source used.
 */

/* `bg-lavender` on all three layouts. Each layout carries the React source's
   own vertical rhythm on its inner wrapper, so the blanket padding theme.css
   gives every direct `section` child of .site-main is cleared — otherwise the
   two stack and roughly double the space. */
.digiops-tr {
	background: var(--color-lavender);
}

.site-main > .digiops-tr {
	padding-block: 0;
}

/* ---------- the card: `bento flex h-full flex-col justify-between bg-white p-8 md:p-9` ---------- */

.digiops-tr__card {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: space-between;
	background: #fff;
	margin: 0;
	padding: 2rem;
}

@media (min-width: 768px) {
	.digiops-tr__card {
		padding: 2.25rem;
	}
}

/* `font-display block text-6xl font-bold leading-none text-violet` — the
   oversized opening quotation mark. */
.digiops-tr__mark {
	display: block;
	font-size: 3.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-violet);
}

/* `mt-2 leading-relaxed text-ink/80` */
.digiops-tr__quote {
	margin: 0.5rem 0 0;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.8);
}

/* `mt-8` */
.digiops-tr__caption {
	margin-top: 2rem;
}

/* `font-bold` */
.digiops-tr__name {
	margin: 0;
	font-weight: 700;
}

/* `text-sm font-semibold text-ink/50` */
.digiops-tr__role {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.5);
}

/* ---------- the shared heading block ---------- */

.digiops-tr__label {
	margin: 0;
}

/* `h-lg mt-4 max-w-2xl` */
.digiops-tr__title {
	margin-top: 1rem;
	max-width: 42rem;
}

/* `!text-[2.55rem] !leading-none` — the columned layout overrides .h-lg's
   fluid scale with a fixed one, and it must still win. */
.h-lg.digiops-tr__title--columned {
	max-width: none;
	font-size: 2.55rem;
	line-height: 1;
}

/* ---------- vertical rhythm (the React `padding` prop) ---------- */

/* `py-24 md:py-32` */
.digiops-tr__pad--default {
	padding-block: 6rem;
}

/* `py-[76.8px] md:py-[102.4px]` */
.digiops-tr__pad--compact {
	padding-block: 76.8px;
}

@media (min-width: 768px) {
	.digiops-tr__pad--default {
		padding-block: 8rem;
	}

	.digiops-tr__pad--compact {
		padding-block: 102.4px;
	}
}

/* ============================================================
   Marquee layout — app/autobgv/page.tsx
   ============================================================ */

/* `container-x pt-16 md:pt-[90px]` and `container-x pb-16 md:pb-[90px]` */
.digiops-tr__marquee-head {
	padding-top: 4rem;
}

.digiops-tr__marquee-body {
	padding-bottom: 4rem;
}

@media (min-width: 768px) {
	.digiops-tr__marquee-head {
		padding-top: 90px;
	}

	.digiops-tr__marquee-body {
		padding-bottom: 90px;
	}
}

/* `mt-14` */
.digiops-tr__marquee {
	margin-top: 3.5rem;
}

/* theme.css centres .marquee-track's items; the source sets
   alignItems: "stretch" inline so every card in a row is the height of the
   tallest quote. */
.digiops-tr__mtrack {
	align-items: stretch;
}

/* `flex shrink-0` */
.digiops-tr__mrow {
	display: flex;
	flex-shrink: 0;
}

/* `mr-6 w-[288px] shrink-0 sm:w-[320px] lg:w-[340px]` — the spacing is a
   right margin on each card, not a track gap: with a gap, half the track
   lands mid-gap and the -50% loop visibly jumps. */
.digiops-tr__mcard {
	margin-right: 1.5rem;
	width: 288px;
	flex-shrink: 0;
}

@media (min-width: 640px) {
	.digiops-tr__mcard {
		width: 320px;
	}
}

@media (min-width: 1024px) {
	.digiops-tr__mcard {
		width: 340px;
	}
}

/* ============================================================
   Columned layout — app/training/page.tsx
   ============================================================ */

/* `grid gap-10 lg:grid-cols-[minmax 0/260px_1fr] lg:gap-14` */
.digiops-tr__cols {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1024px) {
	.digiops-tr__cols {
		grid-template-columns: minmax(0, 260px) 1fr;
		gap: 3.5rem;
	}
}

/* Reveal's `className="min-w-0"` on the carousel column — without it the
   track's intrinsic width blows the grid column out past 1fr. */
.digiops-tr__main {
	min-width: 0;
}

/* `mt-4 text-sm font-semibold leading-relaxed text-ink/60` */
.digiops-tr__blurb {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

/* TestimonialRow's `overflow-hidden` viewport and `flex gap-6` track. The
   transform and its transition are set by the section JS, one step at a
   time; with JS off the track simply sits at zero. */
.digiops-tr__viewport {
	overflow: hidden;
}

.digiops-tr__track {
	display: flex;
	gap: 1.5rem;
	will-change: transform;
}

/* `w-[85%] shrink-0 sm:w-[calc 100%-1.5rem over 2] lg:w-[calc 100%-3rem over 3]`
   — the same width formula CourseRow uses, so a lg viewport always shows
   exactly three with no partial fourth peeking in. */
.digiops-tr__slide {
	width: 85%;
	flex-shrink: 0;
}

@media (min-width: 640px) {
	.digiops-tr__slide {
		width: calc((100% - 1.5rem) / 2);
	}
}

@media (min-width: 1024px) {
	.digiops-tr__slide {
		width: calc((100% - 3rem) / 3);
	}
}

/* ============================================================
   Grid layout — the React component's own default
   ============================================================ */

/* `mt-14 grid gap-6 md:grid-cols-3` */
.digiops-tr__grid {
	display: grid;
	gap: 1.5rem;
	margin-top: 3.5rem;
}

@media (min-width: 768px) {
	.digiops-tr__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Reveal `stagger` — 0.09s between direct children. theme.css owns the fade
   itself; only the offset is added here, and only once the document is
   marked `js`, so a no-JS page still shows every card. */
.js .digiops-tr__grid > [data-digiops-reveal] {
	transition-delay: calc(var(--digiops-tr-i, 0) * 0.09s);
}

@media (prefers-reduced-motion: reduce) {
	.js .digiops-tr__grid > [data-digiops-reveal] {
		transition-delay: 0s;
	}
}

/* The reveal lives on this wrapper so the card keeps .bento's hover lift (see
   the template). It is the grid item now, so it stretches to the row height;
   the card fills it, keeping every card in a row the same height. */
.digiops-tr__cell {
	display: flex;
}

.digiops-tr__cell > .digiops-tr__card {
	flex: 1 1 auto;
}

/* The wrapper must fill whatever holds it, in every layout — not only the
   grid. In the carousel and the marquee it sits inside a slide / card box
   that is stretched to the row height; left at height:auto there, each card
   shrank to its own content and the row came out ragged. */
.digiops-tr__slide > .digiops-tr__cell,
.digiops-tr__mcard > .digiops-tr__cell {
	height: 100%;
}

/* sections/training-catalog.css */
/* Training course catalog — components/training/CourseCatalog.tsx and
   CourseRow.tsx. One band per track, alternating bg-white / bg-lavender. */

.digiops-tcat {
	background: #fff;
	line-height: 1.5;
}

.digiops-tcat--alt {
	background: var(--color-lavender);
}

/* container-x pb-16 md:pb-[89.6px], pt-[57.6px] md:pt-[80.64px] (pt-0 first) */
.digiops-tcat__inner {
	padding-top: 57.6px;
	padding-bottom: 4rem;
}

.digiops-tcat--first .digiops-tcat__inner {
	padding-top: 0;
}

/* grid gap-10 lg:grid-cols-[minmax 0/260px_1fr] lg:gap-14 */
.digiops-tcat__grid {
	display: grid;
	gap: 2.5rem;
}

/* h-lg mt-4 !text-[2.55rem] !leading-none */
.digiops-tcat__title {
	margin-top: 1rem;
	font-size: 2.55rem;
	line-height: 1;
}

/* mt-4 text-sm font-semibold leading-relaxed text-ink/60 */
.digiops-tcat__blurb {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.6);
}

.digiops-tcat__rowwrap {
	min-width: 0;
}

/* mb-5 flex justify-end gap-2 */
.digiops-tcat__nav {
	margin-bottom: 1.25rem;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}

/* flex h-10 w-10 items-center justify-center rounded-full border border-tint text-ink */
.digiops-tcat__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border-radius: 999px;
	border: 1px solid var(--color-tint);
	background: transparent;
	color: var(--color-ink);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-tcat__arrow:hover {
	border-color: var(--color-violet);
	color: var(--color-violet);
}

.digiops-tcat__arrow:disabled {
	pointer-events: none;
	opacity: 0.3;
}

/* no-scrollbar flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth */
.digiops-tcat__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
}

/* w-[85%] shrink-0 snap-start sm:w-[calc 100%-1.5rem over 2] lg:w-[calc 100%-3rem over 3] */
.digiops-tcat__slot {
	width: 85%;
	flex-shrink: 0;
	scroll-snap-align: start;
}

/* ---------- the card ----------
   workcard group relative flex h-full flex-col overflow-hidden rounded-2xl
   border border-tint/60 bg-white shadow-[0_20px_50px_-35px_rgba(44,46,126,0.35)] */
.digiops-tcard {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: hidden;
	border-radius: 1rem;
	border: 1px solid rgba(217, 218, 245, 0.6);
	background: #fff;
	box-shadow: 0 20px 50px -35px rgba(44, 46, 126, 0.35);
}

/* relative h-36 overflow-hidden */
.digiops-tcard__media {
	position: relative;
	height: 9rem;
	overflow: hidden;
}

.digiops-tcard__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-tcard:hover .digiops-tcard__img {
	transform: scale(1.05);
}

/* flex flex-1 flex-col p-5 */
.digiops-tcard__body {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	padding: 1.25rem;
}

/* line-clamp-2 min-h-[2.75rem] text-base font-bold leading-snug tracking-tight text-ink */
.digiops-tcard__title {
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	min-height: 2.75rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.375;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

/* the stretched pseudo-element makes the whole card clickable */
.digiops-tcard__link {
	color: inherit;
	text-decoration: none;
}

.digiops-tcard__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* mt-2 flex items-center gap-2 text-xs font-bold text-ink/50 */
.digiops-tcard__provider {
	margin-top: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.5);
}

/* flex h-5 w-5 items-center justify-center rounded bg-lavender text-[0.65rem] font-black text-violet */
.digiops-tcard__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 0.25rem;
	background: var(--color-lavender);
	font-size: 0.65rem;
	font-weight: 900;
	color: var(--color-violet);
}

/* mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 */
.digiops-tcard__meta {
	margin-top: 0.75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.5rem;
	row-gap: 0.25rem;
}

/* rounded bg-lavender px-2 py-0.5 text-[0.7rem] font-bold text-deep */
.digiops-tcard__type {
	border-radius: 0.25rem;
	background: var(--color-lavender);
	padding: 0.125rem 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--color-deep);
}

/* text-xs font-semibold text-ink/45 */
.digiops-tcard__duration {
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.45);
}

/* mt-4 flex items-center justify-between gap-3 pt-1 */
.digiops-tcard__foot {
	margin-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-top: 0.25rem;
}

/* font-display text-lg font-bold tracking-tight text-deep */
.digiops-tcard__fee {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-deep);
}

/* relative z-10 shrink-0 rounded-full border-2 border-violet px-4 py-1.5
   text-xs font-bold text-violet transition-colors hover:bg-violet hover:text-white */
.digiops-tcard__enroll {
	position: relative;
	z-index: 10;
	flex-shrink: 0;
	border-radius: 999px;
	border: 2px solid var(--color-violet);
	padding: 0.375rem 1rem;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: var(--color-violet);
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-tcard__enroll:hover {
	background: var(--color-violet);
	color: #fff;
}

/* The arrows for a track that fits the desktop row exist for phones only. */
.digiops-tcat__nav--phone {
	display: none;
}

/* Phones: the arrows sit in the centre above the cards, and a track that
   needs them on a phone but not on desktop shows them here. */
@media (max-width: 639px) {
	.digiops-tcat__nav,
	.digiops-tcat__nav--phone {
		display: flex;
		justify-content: center;
	}
}

@media (min-width: 640px) {
	.digiops-tcat__slot {
		width: calc((100% - 1.5rem) / 2);
	}
}

@media (min-width: 768px) {
	.digiops-tcat__inner {
		padding-top: 80.64px;
		padding-bottom: 89.6px;
	}
}

@media (min-width: 1024px) {
	.digiops-tcat__grid {
		grid-template-columns: minmax(0, 260px) 1fr;
		gap: 3.5rem;
	}

	/* drops the heading level with the top of the cards (see CourseCatalog.tsx) */
	.digiops-tcat__intro {
		padding-top: 25.29px;
	}

	.digiops-tcat__slot {
		width: calc((100% - 3rem) / 3);
	}
}

/* sections/training-cta-band.css */
/* Training dark CTA band — app/training/page.tsx.
   relative isolate overflow-hidden bg-[#0a0a12] text-white */

.digiops-tcta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #0a0a12;
	color: #fff;
	line-height: 1.5;
}

/* container-x grid gap-12 md:grid-cols-2 */
.digiops-tcta__grid {
	display: grid;
	gap: 3rem;
}

.digiops-tcta__copy {
	padding-block: 82.5px;
}

/* h-lg line-clamp-2 max-w-md */
.digiops-tcta__title {
	max-width: 28rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/* mt-5 max-w-md text-base font-semibold leading-relaxed text-white/60 */
.digiops-tcta__para {
	margin: 1.25rem 0 0;
	max-width: 28rem;
	font-size: 1rem;
	line-height: 1.625;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
}

/* mt-8 grid gap-4 sm:grid-cols-2 */
.digiops-tcta__list {
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1rem;
}

/* text-sm leading-relaxed text-white/70 */
.digiops-tcta__item {
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.7);
}

.digiops-tcta__lead {
	font-weight: 700;
	color: #fff;
}

.digiops-tcta__pill {
	margin-top: 2.25rem;
}

/* relative hidden overflow-hidden rounded-3xl md:block lg:rounded-none */
.digiops-tcta__media {
	position: relative;
	display: none;
	overflow: hidden;
	border-radius: 1.5rem;
}

.digiops-tcta__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

@media (min-width: 640px) {
	.digiops-tcta__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.digiops-tcta__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.digiops-tcta__media {
		display: block;
	}
}

@media (min-width: 1024px) {
	.digiops-tcta__media {
		border-radius: 0;
	}
}

/* sections/training-hero.css */
/* Training hero — app/training/page.tsx, the data-nav-dark band.
   The background artwork is .training-hero-bg in theme.css. */

.digiops-thero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	line-height: 1.5;
}

/* container-x grid gap-14 pb-[21px] pt-14 md:grid-cols-2 md:items-center md:pb-7 md:pt-[70px] */
.digiops-thero__grid {
	display: grid;
	gap: 3.5rem;
	padding-top: 3.5rem;
	padding-bottom: 21px;
}

.digiops-thero__eyebrow {
	color: var(--color-onv);
}

/* h-hero mt-5 whitespace-nowrap !text-[clamp 1.4rem/3.25vw/4.2rem] */
.digiops-thero__title {
	margin-top: 1.25rem;
	white-space: nowrap;
	font-size: clamp(1.4rem, 3.25vw, 4.2rem);
}

/* Reveal delay 0.35 around the pill */
.digiops-thero__cta {
	transition-delay: 0.35s;
}

.digiops-thero__pill {
	margin-top: 2.25rem;
}

/* relative ml-auto hidden aspect-square w-full max-w-[19.2rem] md:block */
.digiops-thero__mark {
	position: relative;
	margin-left: auto;
	display: none;
	aspect-ratio: 1 / 1;
	width: 100%;
	max-width: 19.2rem;
	transition-delay: 0.3s;
}

.digiops-thero__shape {
	position: absolute;
	inset: 1.2rem;
	opacity: 0.6;
}

.digiops-thero__word {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: clamp(2.5rem, 5vw, 3.75rem);
	font-weight: 700;
	line-height: 0.95;
	color: #fff;
}

.digiops-thero__sub {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	font-weight: 700;
	color: rgba(255, 255, 255, 0.9);
}

/* Phones: the section clears the fixed header and gets room below, the
   headline is larger (it stays on one line, scaling with the screen), the
   eyebrow sits closer to it, and the button is a size smaller. */
@media (max-width: 767px) {
	.digiops-thero__grid {
		padding-top: 6.5rem;
		padding-bottom: 3rem;
	}

	.digiops-thero__title {
		margin-top: 0.5rem;
		font-size: clamp(1.4rem, 7vw, 1.625rem);
	}

	.digiops-thero__pill {
		margin-top: 1.75rem;
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.digiops-thero__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: center;
		padding-top: 70px;
		padding-bottom: 1.75rem;
	}

	.digiops-thero__mark {
		display: block;
	}
}

/* sections/training-stats.css */
/* Training stats band — section bg-white py-14 in app/training/page.tsx. */

.digiops-tstats {
	background: #fff;
	padding-block: 3.5rem;
	line-height: 1.5;
}

/* container-x grid gap-4 sm:grid-cols-3 */
.digiops-tstats__grid {
	display: grid;
	gap: 1rem;
}

/* flex items-center gap-5 rounded-2xl p-6 */
.digiops-tstats__tile {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	border-radius: 1rem;
	padding: 1.5rem;
}

.digiops-tstats__tile--lavender {
	background: var(--color-lavender);
}

.digiops-tstats__tile--mint {
	background: #e6f7f1;
}

.digiops-tstats__tile--peach {
	background: #fbeee1;
}

/* font-display shrink-0 text-3xl font-bold tracking-tight text-deep */
.digiops-tstats__value {
	margin: 0;
	flex-shrink: 0;
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-deep);
}

/* h-10 w-px shrink-0 bg-ink/15 */
.digiops-tstats__rule {
	display: block;
	height: 2.5rem;
	width: 1px;
	flex-shrink: 0;
	background: rgba(27, 28, 58, 0.15);
}

/* text-sm font-semibold leading-snug text-ink/60 */
.digiops-tstats__text {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.375;
	font-weight: 600;
	color: rgba(27, 28, 58, 0.6);
}

@media (min-width: 640px) {
	.digiops-tstats__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* sections/training-why.css */
/* Training "why learn from an agency" band — app/training/page.tsx.
   The gradient is .training-why-bg in theme.css. */

.digiops-twhy {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	line-height: 1.5;
}

/* pointer-events-none absolute -z-10 rounded-full blur-3xl */
.digiops-twhy__glow {
	pointer-events: none;
	position: absolute;
	z-index: -10;
	border-radius: 999px;
	filter: blur(64px);
}

/* -left-24 -top-24 h-72 w-72 bg-white/10 */
.digiops-twhy__glow--a {
	left: -6rem;
	top: -6rem;
	width: 18rem;
	height: 18rem;
	background: rgba(255, 255, 255, 0.1);
}

/* -bottom-32 right-0 h-96 w-96 bg-[#7c5cff]/30 */
.digiops-twhy__glow--b {
	bottom: -8rem;
	right: 0;
	width: 24rem;
	height: 24rem;
	background: rgba(124, 92, 255, 0.3);
}

/* container-x py-16 md:py-[89.6px] */
.digiops-twhy__inner {
	padding-block: 4rem;
}

/* grid gap-10 lg:grid-cols-[1.15fr_1fr_1fr_1fr] lg:gap-x-0 */
.digiops-twhy__grid {
	display: grid;
	gap: 2.5rem;
}

.digiops-twhy__eyebrow {
	color: var(--color-onv);
}

/* h-lg mt-4 !text-[2.55rem] */
.digiops-twhy__title {
	margin-top: 1rem;
	font-size: 2.55rem;
}

/* mt-4 max-w-xs text-sm font-semibold leading-relaxed text-onv */
.digiops-twhy__blurb {
	margin: 1rem 0 0;
	max-width: 20rem;
	font-size: 0.875rem;
	line-height: 1.625;
	font-weight: 600;
	color: var(--color-onv);
}

/* group transition-transform duration-300 hover:-translate-y-1 */
.digiops-twhy__point {
	height: 100%;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-twhy__point:hover {
	transform: translateY(-0.25rem);
}

/* flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-onv transition-colors duration-300 */
.digiops-twhy__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.1);
	color: var(--color-onv);
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.digiops-twhy__point:hover .digiops-twhy__icon {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* font-display mt-5 text-xl font-semibold tracking-tight md:text-2xl */
.digiops-twhy__ptitle {
	margin: 1.25rem 0 0;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
	letter-spacing: -0.025em;
}

/* mt-3 text-sm font-semibold leading-relaxed text-onv */
.digiops-twhy__ptext {
	margin: 0.75rem 0 0;
	font-size: 0.875rem;
	line-height: 1.625;
	font-weight: 600;
	color: var(--color-onv);
}

/* Phones: each point (icon, title, text) is centred. */
@media (max-width: 767px) {
	.digiops-twhy__point {
		text-align: center;
	}

	.digiops-twhy__icon {
		margin-inline: auto;
	}
}

@media (min-width: 768px) {
	.digiops-twhy__inner {
		padding-block: 89.6px;
	}

	.digiops-twhy__ptitle {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.digiops-twhy__grid {
		grid-template-columns: 1.15fr 1fr 1fr 1fr;
		column-gap: 0;
	}

	.digiops-twhy__intro {
		padding-right: 2.5rem;
	}

	.digiops-twhy__point {
		padding-inline: 2.5rem;
	}

	.digiops-twhy__point--rule {
		border-left: 1px solid rgba(255, 255, 255, 0.15);
	}
}

/* sections/web-development-advantage.css */
/**
 * Web Development advantage band — app/web-development/page.tsx:
 * <section className="relative isolate overflow-hidden bg-[#0a0a12] py-20 text-white md:py-28">
 */

.wd-adv {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: 5rem;
	background: #0a0a12;
	color: #fff;
	line-height: 1.5;
}

.wd-adv :where(h1, h2, h3, p) {
	margin: 0;
}

.wd-adv__glow {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* grid gap-12 lg:grid-cols-[2fr_3fr] lg:gap-16 */
.wd-adv__grid {
	display: grid;
	gap: 3rem;
}

.wd-adv__lead,
.wd-adv__list {
	min-width: 0;
}

.wd-adv__eyebrow {
	color: var(--color-onv);
}

.wd-adv__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.wd-adv__body-wrap {
	margin-top: 1.5rem;
}

.wd-adv__body {
	max-width: 28rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

.wd-adv__cta {
	margin-top: 2rem;
}

.wd-adv__item {
	display: flex;
	gap: 1.25rem;
	padding-block: 1.75rem;
}

.wd-adv__item + .wd-adv__item {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wd-adv__badge {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	margin-top: 0.25rem;
	width: 3rem;
	height: 3rem;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.75rem;
}

.wd-adv__icon {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

.wd-adv__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
}

.wd-adv__desc {
	margin-top: 0.5rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.55);
}

/* Phones: the button steps down a size, to match the hero's. */
@media (max-width: 767px) {
	.wd-adv__cta .pill {
		padding: 0.7rem 1.5rem;
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.wd-adv {
		padding-block: 7rem;
	}

	.wd-adv__title {
		font-size: 1.5rem;
		line-height: 2rem;
	}
}

@media (min-width: 1024px) {
	.wd-adv__grid {
		grid-template-columns: 2fr 3fr;
		gap: 4rem;
	}
}

/* sections/web-development-hero.css */
/**
 * Web Development hero — app/web-development/page.tsx:
 * <section data-nav-dark className="web-hero relative isolate overflow-hidden text-white">
 * The photo, scrim and glow are .web-hero / .web-dev-hero-scrim / .web-hero-glow
 * from theme.css.
 */

.wd-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	line-height: 1.5;
}

.wd-hero :where(h1, h2, h3, p) {
	margin: 0;
}

/* pointer-events-none absolute inset-0 -z-10 */
.wd-hero__layer {
	position: absolute;
	inset: 0;
	z-index: -10;
	pointer-events: none;
}

/* container-x flex min-h-[76svh] flex-col justify-end pb-20 pt-36 md:min-h-[82svh] md:pb-24 */
.wd-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 76svh;
	padding-top: 9rem;
	padding-bottom: 5rem;
}

/* text-[0.7rem] font-bold uppercase tracking-[0.18em] text-white/55 */
.wd-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.7rem;
	line-height: 1.5;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(255, 255, 255, 0.55);
}

.wd-hero__crumb-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-hero__crumb-link:hover,
.wd-hero__crumb-current {
	color: #fff;
}

/* h-hero mt-7 max-w-4xl !text-[clamp 1.9rem/4.3vw/4.4rem] */
.wd-hero__title {
	margin-top: 1.75rem;
	max-width: 56rem;
	font-size: clamp(1.9rem, 4.3vw, 4.4rem);
}

/* mt-6 max-w-2xl text-base font-semibold text-white/70 md:text-lg */
.wd-hero__sub {
	margin-top: 1.5rem;
	max-width: 42rem;
	font-size: 1rem;
	line-height: 1.5rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

/* mt-9 flex flex-wrap items-center gap-4 */
.wd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 2.25rem;
}

/* Phones: the two buttons step down a size and share one row, half each. */
@media (max-width: 767px) {
	.wd-hero__actions {
		flex-wrap: nowrap;
		gap: 0.625rem;
	}

	.wd-hero__actions .digiops-magnetic {
		flex: 1 1 0;
		min-width: 0;
	}

	.wd-hero__actions .pill {
		width: 100%;
		padding: 0.7rem 0.75rem;
		font-size: 0.8125rem;
	}
}

@media (min-width: 768px) {
	.wd-hero__inner {
		min-height: 82svh;
		padding-bottom: 6rem;
	}

	.wd-hero__sub {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}
}

/* sections/web-development-industries.css */
/**
 * Web Development industries marquee — app/web-development/page.tsx:
 * <section className="bg-[#eeeefe] py-20 text-ink md:py-28">
 */

.wd-industries {
	position: relative;
	padding-block: 5rem;
	background: #eeeefe;
	color: var(--color-ink);
	line-height: 1.5;
}

.wd-industries :where(h1, h2, h3, p) {
	margin: 0;
}

.wd-industries__eyebrow {
	color: var(--color-violet);
}

/* h-xl mt-4 max-w-4xl !text-[clamp 1.9rem/3.2vw/2.6rem] */
.wd-industries__heading {
	margin-top: 1rem;
	max-width: 56rem;
	font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

/* marquee marquee-hover-pause container-x mt-12 md:mt-14 */
.wd-industries__marquee {
	margin-top: 3rem;
}

/* flex shrink-0 gap-5 pr-5 */
.wd-industries__row {
	display: flex;
	flex-shrink: 0;
	gap: 1.25rem;
	padding-right: 1.25rem;
}

/* group flex min-h-[13rem] w-72 shrink-0 flex-col justify-between rounded-3xl
   border border-violet/30 bg-[#e0e0ef] p-7 transition-colors duration-300
   hover:border-violet/50 md:w-80 */
.wd-industries__card {
	display: flex;
	flex-shrink: 0;
	flex-direction: column;
	justify-content: space-between;
	width: 18rem;
	min-height: 13rem;
	padding: 1.75rem;
	border: 1px solid rgba(66, 69, 180, 0.3);
	border-radius: 1.5rem;
	background: #e0e0ef;
	transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-industries__card:hover {
	border-color: rgba(66, 69, 180, 0.5);
}

/* GradIcon h-11 w-11 */
.wd-industries__icon {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
}

/* font-display text-xl font-bold leading-tight tracking-tight md:text-2xl */
.wd-industries__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -0.025em;
}

/* mt-2.5 leading-snug text-ink/60 */
.wd-industries__desc {
	margin-top: 0.625rem;
	line-height: 1.375;
	color: rgba(27, 28, 58, 0.6);
}

@media (min-width: 768px) {
	.wd-industries {
		padding-block: 7rem;
	}

	.wd-industries__marquee {
		margin-top: 3.5rem;
	}

	.wd-industries__card {
		width: 20rem;
	}

	.wd-industries__title {
		font-size: 1.5rem;
		line-height: 1.25;
	}
}

/* sections/web-development-problem.css */
/**
 * Web Development problem band — app/web-development/page.tsx:
 * <section className="container-x py-20 md:py-28">
 */

.wd-problem {
	padding-block: 5rem;
	color: var(--color-ink);
	line-height: 1.5;
}

.wd-problem :where(h1, h2, h3, p) {
	margin: 0;
}

/* grid gap-10 lg:grid-cols-[1.5fr_2fr] lg:gap-20 */
.wd-problem__grid {
	display: grid;
	gap: 2.5rem;
}

.wd-problem__lead,
.wd-problem__side {
	min-width: 0;
}

.wd-problem__eyebrow {
	color: var(--color-violet);
}

.wd-problem__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

.wd-problem__label-wrap {
	margin-top: 2.5rem;
}

.wd-problem__label {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 0.75rem;
	line-height: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(27, 28, 58, 0.45);
}

.wd-problem__rule {
	margin-top: 1rem;
	height: 1px;
	width: 100%;
	background: var(--color-tint);
}

.wd-problem__pains {
	margin-top: 2rem;
	display: grid;
	gap: 1rem;
}

.wd-problem__pain {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1.25rem 1.5rem;
	border-radius: 1rem;
	background: var(--color-lavender);
}

.wd-problem__star {
	margin-top: 0.125rem;
	color: var(--color-violet);
}

.wd-problem__pain-text {
	font-weight: 600;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.8);
}

.wd-problem__body-wrap {
	margin-top: 2rem;
}

.wd-problem__body {
	max-width: 48rem;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.6);
}

@media (min-width: 640px) {
	.wd-problem__pains {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.wd-problem {
		padding-block: 7rem;
	}
}

@media (min-width: 1024px) {
	.wd-problem__grid {
		grid-template-columns: 1.5fr 2fr;
		gap: 5rem;
	}

	.wd-problem__label-wrap {
		margin-top: 0;
	}
}

/* sections/web-development-service-accordion.css */
/**
 * Web Development design accordion — app/web-development/page.tsx:
 * <section id="services" className="web-design-bg py-20 text-ink md:py-28">
 * with components/web/ServiceAccordion.tsx rendered `light`.
 * The canvas itself is .web-design-bg from theme.css.
 */

.wd-design {
	padding-block: 5rem;
	color: var(--color-ink);
	line-height: 1.5;
}

.wd-design :where(h1, h2, h3, p, ul) {
	margin: 0;
}

/* flex flex-col gap-6 md:flex-row md:items-end md:justify-between */
.wd-design__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* max-w-xl */
.wd-design__lead {
	max-width: 36rem;
}

.wd-design__eyebrow {
	color: var(--color-violet);
}

/* h-xl mt-4 !text-[clamp 1.9rem/4vw/3rem] */
.wd-design__heading {
	margin-top: 1rem;
	font-size: clamp(1.9rem, 4vw, 3rem);
}

/* max-w-sm font-medium leading-relaxed text-ink/70 */
.wd-design__intro {
	max-width: 24rem;
	font-weight: 500;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.7);
}

/* mt-12 */
.wd-acc {
	margin-top: 3rem;
}

/* ---------- shared bits ---------- */

.wd-acc__icon,
.wd-acc__micon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	border-radius: 0.75rem;
}

.wd-acc__glyph {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.wd-acc__glyph--lg {
	width: 1.5rem;
	height: 1.5rem;
}

/* ---------- desktop: horizontal accordion (hidden h-[22rem] gap-3 lg:flex) ---------- */

.wd-acc__row {
	display: none;
	height: 22rem;
	gap: 0.75rem;
}

/* relative overflow-hidden rounded-2xl border text-left
   transition-[flex-grow,border-color,background-color] duration-500 ease-out */
.wd-acc__panel {
	position: relative;
	overflow: hidden;
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(66, 69, 180, 0.42);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.52);
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	flex: 1 1 0%;
	transition-property: flex-grow, border-color, background-color;
	transition-duration: 0.5s;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* idle: flex-[1] border-[#4245b46b] bg-[#ffffff85] hover:border-[#4245b4] */
.wd-acc__panel:hover {
	border-color: #4245b4;
}

/* active: flex-[6] border-violet shadow-[0_24px_60px_-34px_rgba(44,46,126,0.45)] */
.wd-acc__panel.is-active {
	flex: 6 6 0%;
	border-color: var(--color-violet);
	background: transparent;
	box-shadow: 0 24px 60px -34px rgba(44, 46, 126, 0.45);
}

.wd-acc__panel:focus-visible {
	outline: 2px solid var(--color-violet);
	outline-offset: 2px;
}

/* open content: flex h-full flex-col justify-between p-7 md:p-8 */
.wd-acc__open {
	display: none;
	height: 100%;
	flex-direction: column;
	justify-content: space-between;
	padding: 2rem;
}

.wd-acc__panel.is-active .wd-acc__open {
	display: flex;
}

/* flex items-start justify-between */
.wd-acc__open-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/* font-display text-5xl font-bold text-ink/30 */
.wd-acc__num {
	font-family: var(--font-display);
	font-size: 3rem;
	line-height: 1;
	font-weight: 700;
	color: rgba(27, 28, 58, 0.3);
}

/* h-11 w-11 rounded-xl */
.wd-acc__icon {
	width: 2.75rem;
	height: 2.75rem;
}

/* bg-violet/10 text-violet */
.wd-acc__icon--on {
	background: rgba(66, 69, 180, 0.1);
	color: var(--color-violet);
}

/* bg-[#4245b4] text-white */
.wd-acc__icon--off,
.wd-acc__micon {
	background: #4245b4;
	color: #fff;
}

.wd-acc__open-body {
	display: block;
}

/* font-display text-2xl font-bold tracking-tight text-ink md:text-3xl */
.wd-acc__title {
	display: block;
	font-family: var(--font-display);
	font-size: 1.875rem;
	line-height: 2.25rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--color-ink);
}

/* leading-relaxed text-ink/65 (mobile); desktop adds mt-3 max-w-lg */
.wd-acc__desc {
	display: block;
	line-height: 1.625;
	color: rgba(27, 28, 58, 0.65);
}

.wd-acc__open .wd-acc__desc {
	margin-top: 0.75rem;
	max-width: 32rem;
}

/* mt-5 flex flex-wrap gap-2.5 */
.wd-acc__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

/* rounded-full border px-3.5 py-1.5 text-xs font-bold border-tint bg-ink/[0.04] text-ink/75 */
.wd-acc__pill,
.wd-acc__mpill {
	display: block;
	border: 1px solid var(--color-tint);
	border-radius: 9999px;
	background: rgba(27, 28, 58, 0.04);
	color: rgba(27, 28, 58, 0.75);
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
}

.wd-acc__pill {
	padding: 0.375rem 0.875rem;
}

/* closed content: flex h-full min-w-[5.5rem] flex-col items-center justify-between py-7 */
.wd-acc__closed {
	display: flex;
	height: 100%;
	min-width: 5.5rem;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.75rem;
}

.wd-acc__panel.is-active .wd-acc__closed {
	display: none;
}

/* font-display text-2xl font-bold text-black */
.wd-acc__cnum {
	font-family: var(--font-display);
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
	color: #000;
}

/* font-display px-2 text-center text-xs font-bold leading-tight text-black */
.wd-acc__ctitle {
	display: block;
	padding-inline: 0.5rem;
	font-family: var(--font-display);
	font-size: 0.75rem;
	line-height: 1.25;
	font-weight: 700;
	text-align: center;
	color: #000;
}

/* ---------- mobile: vertical accordion (space-y-3 lg:hidden) ---------- */

.wd-acc__stack {
	display: block;
}

.wd-acc__card + .wd-acc__card {
	margin-top: 0.75rem;
}

/* overflow-hidden rounded-2xl border transition-colors — idle / active tokens */
.wd-acc__card {
	overflow: hidden;
	border: 1px solid rgba(66, 69, 180, 0.42);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.52);
	transition-property: color, background-color, border-color;
	transition-duration: 0.15s;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-acc__card:hover {
	border-color: #4245b4;
}

.wd-acc__card.is-active {
	border-color: var(--color-violet);
	background: transparent;
	box-shadow: 0 24px 60px -34px rgba(44, 46, 126, 0.45);
}

/* flex w-full items-center gap-4 p-5 text-left */
.wd-acc__toggle {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 1.25rem;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-align: left;
	text-transform: none;
	cursor: pointer;
}

.wd-acc__toggle:focus-visible {
	outline: 2px solid var(--color-violet);
	outline-offset: -2px;
}

/* font-display text-lg font-bold — text-black idle, text-ink/30 active */
.wd-acc__mnum {
	font-family: var(--font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	color: #000;
}

.wd-acc__card.is-active .wd-acc__mnum {
	color: rgba(27, 28, 58, 0.3);
}

/* h-10 w-10 shrink-0 rounded-xl */
.wd-acc__micon {
	width: 2.5rem;
	height: 2.5rem;
}

.wd-acc__card.is-active .wd-acc__micon {
	background: rgba(66, 69, 180, 0.1);
	color: var(--color-violet);
}

/* font-display flex-1 text-lg font-bold tracking-tight — text-black idle, text-ink active */
.wd-acc__mtitle {
	flex: 1 1 0%;
	font-family: var(--font-display);
	font-size: 1.125rem;
	line-height: 1.75rem;
	font-weight: 700;
	letter-spacing: -0.025em;
	color: #000;
}

.wd-acc__card.is-active .wd-acc__mtitle {
	color: var(--color-ink);
}

/* grid h-7 w-7 shrink-0 place-items-center rounded-full border transition-transform duration-300
   idle: border-white/30 text-white; active: border-ink/25 text-ink rotate-45 */
.wd-acc__plus {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 9999px;
	color: #fff;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wd-acc__card.is-active .wd-acc__plus {
	border-color: rgba(27, 28, 58, 0.25);
	color: var(--color-ink);
	transform: rotate(45deg);
}

/* px-5 pb-6 — only the open card renders its body */
.wd-acc__mbody {
	display: none;
	padding: 0 1.25rem 1.5rem;
}

.wd-acc__card.is-active .wd-acc__mbody {
	display: block;
}

/* mt-4 flex flex-wrap gap-2 */
.wd-acc__mpills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
	padding: 0;
	list-style: none;
}

/* px-3 py-1 */
.wd-acc__mpill {
	padding: 0.25rem 0.75rem;
}

@media (min-width: 768px) {
	.wd-design {
		padding-block: 7rem;
	}

	.wd-design__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

@media (min-width: 1024px) {
	.wd-acc__row {
		display: flex;
	}

	.wd-acc__stack {
		display: none;
	}
}