/* ============================================================
	VKCPL — Dark Luxury / Executive Edition
	Palette: midnight + oxblood undertone, champagne gold accent
	Typography: Cormorant Garamond (display), Marcellus (caps),
				Inter (rare, only for fine print)
   ============================================================ */

:root {
	/* Core — deep midnight with a warm oxblood undertone */
	--bg: #0d0a0c; /* near-black with a wine warmth */
	--bg-deep: #08060a;
	--bg-elevated: #14101a; /* very dark midnight-violet */
	--bg-card: #1a141d;
	--bg-card-hi: #221920;
	--bg-oxblood: #2a131a; /* dark wine for accent panels */

	--line: #2a2230;
	--line-hi: #3a2f3a;
	--line-gold: rgba(199, 163, 92, 0.25);

	--text: #f0e8dc; /* warm cream — not pure white */
	--text-mid: #b8aa95;
	--text-dim: #847564;
	--text-faint: #4a4138;

	/* The accent — champagne / brushed gold, two tones */
	--gold: #d4b06a;
	--gold-bright: #e8c885;
	--gold-deep: #a8884a;
	--gold-soft: rgba(212, 176, 106, 0.12);

	/* Type families */
	--f-display: "Cormorant Garamond", "Times New Roman", serif;
	--f-caps: "Marcellus", "Trajan Pro", serif;
	--f-body: "Cormorant Garamond", Georgia, serif;
	--f-fine: "Inter", system-ui, sans-serif;

	/* Spacing rhythm — generous, executive */
	--pad-x: clamp(1.5rem, 6vw, 8rem);
	--section-gap: clamp(7rem, 14vw, 14rem);
}

/* ============ RESET ============ */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.65;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;

	/* subtle vignette via fixed gradient overlay handled below */
	background-image:
		radial-gradient(ellipse 80% 60% at 50% 0%, rgba(42, 19, 26, 0.35), transparent 70%),
		radial-gradient(ellipse 60% 40% at 50% 100%, rgba(20, 16, 26, 0.5), transparent 60%);
	background-attachment: fixed;
}
a {
	color: inherit;
	text-decoration: none;
}
em {
	font-style: italic;
	font-family: var(--f-display);
	font-weight: 400;
}
sup {
	font-size: 0.5em;
	vertical-align: super;
	line-height: 0;
	color: var(--gold);
}

/* Marcellus for caps treatment — refined small caps feel */
.caps {
	font-family: var(--f-caps);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.72rem;
}

/* ============ AMBIENT LAYERS ============ */
.vignette {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.4) 100%);
}
.grain {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	opacity: 0.18;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='250' height='250'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.95  0 0 0 0 0.85  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Selection — gold, of course */
::selection {
	background: var(--gold);
	color: var(--bg);
}

/* ============ NAV ============ */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 1.5rem var(--pad-x);
	background: rgba(13, 10, 12, 0.65);
	backdrop-filter: blur(20px) saturate(1.2);
	-webkit-backdrop-filter: blur(20px) saturate(1.2);
	border-bottom: 1px solid var(--line);
}
.nav-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}
/* Brand wordmark + seal sit side by side, centred to each other */
.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
}
.brand-seal {
	width: 32px;
	height: 32px;
	display: block;
	flex-shrink: 0;
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* Subtle rotation on hover — feels like turning a seal in your hand */
.brand:hover .brand-seal {
	transform: rotate(15deg);
}

.brand-mono {
	font-family: var(--f-caps);
	font-size: 0.95rem;
	letter-spacing: 0.5em;
	color: var(--gold);
	padding-right: 0.5rem; /* compensate for tracking */
}
.nav-links {
	display: flex;
	align-items: center;
	gap: 2.5rem;
}
.nav-links a {
	font-family: var(--f-caps);
	font-size: 0.78rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-mid);
	position: relative;
	transition: color 0.4s;
}
.nav-links a:not(.nav-cta):hover {
	color: var(--gold);
}

.nav-cta {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	color: var(--text) !important;
}
.nav-cta-line {
	width: 100%;
	height: 1px;
	background: var(--gold);
	transform-origin: center;
	transform: scaleX(0.4);
	transition: transform 0.4s ease;
}
.nav-cta:hover .nav-cta-line {
	transform: scaleX(1);
}

@media (max-width: 880px) {
	.nav-links a:not(.nav-cta) {
		display: none;
	}
}

/* ============ HERO ============ */
.hero {
	position: relative;
	min-height: 100vh;
	padding: 10rem var(--pad-x) 6rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	isolation: isolate;
	overflow: hidden;
}

/* Hero seal — large statement Classical Seal logo at the top of the page.
	A slow, almost-imperceptible rotation gives it quiet ambient life
	without being showy (one full revolution every 90 seconds). */
.hero-seal {
	width: clamp(72px, 8vw, 110px);
	height: clamp(72px, 8vw, 110px);
	margin-bottom: 3rem;
	opacity: 0;
	animation: fadeIn 1.4s ease 0.2s forwards;
	filter: drop-shadow(0 0 24px rgba(212, 176, 106, 0.15));
}
.hero-seal svg {
	width: 100%;
	height: 100%;
	display: block;
	animation: heroSealRotate 90s linear infinite;
}
@keyframes heroSealRotate {
	to {
		transform: rotate(360deg);
	}
}

/* Old ornament class kept for any other usage but no longer rendered in hero */
.ornament-line {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold-deep), transparent);
}
.ornament-mark {
	color: var(--gold);
	font-size: 1.1rem;
	letter-spacing: 0;
}

.hero-eyebrow {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: var(--text-mid);
	margin-bottom: 2.5rem;
	opacity: 0;
	animation: fadeIn 1s ease 0.4s forwards;
}
.hero-eyebrow .bullet {
	color: var(--gold);
}

.hero-title {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(3rem, 9vw, 8rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	max-width: 14ch;
}
.hero-title .t-line {
	display: block;
	opacity: 0;
	transform: translateY(40px);
	animation: lineRise 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.hero-title .t-1 {
	animation-delay: 0.5s;
}
.hero-title .t-2 {
	animation-delay: 0.7s;
}
.hero-title .t-3 {
	animation-delay: 0.9s;
}
.hero-title .t-4 {
	animation-delay: 1.1s;
}
.hero-title em {
	font-weight: 400;
	font-style: italic;
	color: var(--gold);
}

@keyframes lineRise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadeIn {
	to {
		opacity: 1;
	}
}

.hero-rule {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	width: min(380px, 70%);
	margin: 3rem 0 2.5rem;
	opacity: 0;
	animation: fadeIn 1s ease 1.4s forwards;
}
.rule-line {
	flex: 1;
	height: 1px;
	background: var(--gold-deep);
	opacity: 0.5;
}
.rule-mark {
	color: var(--gold);
	font-size: 0.7rem;
}

.hero-lede {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	font-style: italic;
	line-height: 1.6;
	color: var(--text-mid);
	max-width: 56ch;
	margin-bottom: 5rem;
	opacity: 0;
	animation: fadeIn 1.2s ease 1.6s forwards;
}

/* Hero brand marks — laid horizontally with diamond dividers */
.hero-marks {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
	flex-wrap: wrap;
	justify-content: center;
	opacity: 0;
	animation: fadeIn 1.2s ease 1.9s forwards;
}
.mark-block {
	text-align: center;
	min-width: 200px;
}
.mark-name {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 1.15rem;
	letter-spacing: 0.01em;
	color: var(--text);
	margin-bottom: 0.4rem;
}
.mark-desc {
	color: var(--gold);
}
.mark-divide {
	color: var(--gold);
	font-size: 1.5rem;
	align-self: center;
}

@media (max-width: 880px) {
	.hero {
		padding-top: 8rem;
	}
	.hero-marks {
		flex-direction: column;
		gap: 1.5rem;
	}
	.mark-divide {
		display: none;
	}
}

/* ============ HALLMARK NUMBERS ============ */
.hallmarks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--line-gold);
	border-bottom: 1px solid var(--line-gold);
	background: var(--bg-deep);
	padding: 4rem var(--pad-x);
	gap: 2rem;
	position: relative;
}
.hallmarks::before,
.hallmarks::after {
	content: "◆";
	position: absolute;
	color: var(--gold);
	font-size: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
}
.hallmarks::before {
	left: var(--pad-x);
}
.hallmarks::after {
	right: var(--pad-x);
}

.hallmark {
	text-align: center;
	position: relative;
}
.hallmark + .hallmark::before {
	content: "";
	position: absolute;
	left: -1rem;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: var(--line-gold);
}
.hm-num {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(3rem, 6vw, 5rem);
	color: var(--gold);
	line-height: 1;
	margin-bottom: 1.25rem;
	letter-spacing: -0.02em;
}
.hm-num sup {
	font-size: 0.4em;
	color: var(--gold);
	vertical-align: super;
}
.hm-rule {
	width: 30px;
	height: 1px;
	background: var(--gold-deep);
	margin: 0 auto 1rem;
}
.hm-label {
	color: var(--text-mid);
	max-width: 18ch;
	margin: 0 auto;
	line-height: 1.7;
}

@media (max-width: 880px) {
	.hallmarks {
		grid-template-columns: 1fr 1fr;
		gap: 3rem 2rem;
	}
	.hallmarks::before,
	.hallmarks::after {
		display: none;
	}
	.hallmark + .hallmark::before {
		display: none;
	}
}

/* ============ SECTIONS — generic ============ */
section.section-leadership,
section.section-divisions,
section.section-tech,
section.section-clients,
section.section-pipeline {
	padding: var(--section-gap) var(--pad-x);
	max-width: 1500px;
	margin: 0 auto;
}

.sec-head {
	text-align: center;
	margin-bottom: 5rem;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.sec-num {
	display: inline-block;
	color: var(--gold);
	margin-bottom: 1.5rem;
	position: relative;
	padding: 0 1.5rem;
}
.sec-num::before,
.sec-num::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 1rem;
	height: 1px;
	background: var(--gold-deep);
}
.sec-num::before {
	left: -0.25rem;
}
.sec-num::after {
	right: -0.25rem;
}

.sec-title {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(2.4rem, 5vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.015em;
}
.sec-title em {
	color: var(--gold);
	font-style: italic;
	font-weight: 400;
}
.sec-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}
.sec-rule span:not(.dia) {
	width: 60px;
	height: 1px;
	background: var(--gold-deep);
	display: block;
}
.sec-rule .dia {
	color: var(--gold);
	font-size: 0.7rem;
}
.sec-note {
	font-family: var(--f-display);
	font-style: italic;
	color: var(--text-dim);
	margin-top: 1.5rem;
	font-size: 1.05rem;
	max-width: 50ch;
	margin-left: auto;
	margin-right: auto;
}

/* ============ LEADERSHIP ============ */

/* Pull-quote leadership card */
.lead-headline {
	background: linear-gradient(135deg, rgba(212, 176, 106, 0.04), transparent 60%), var(--bg-card);
	border: 1px solid var(--line-gold);
	padding: 5rem clamp(2rem, 6vw, 6rem);
	margin-bottom: 3rem;
	position: relative;
	text-align: center;
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 1s ease,
		transform 1s ease;
}
.lead-headline.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.lh-quote-mark {
	font-family: var(--f-display);
	font-size: clamp(5rem, 10vw, 9rem);
	color: var(--gold);
	line-height: 0.7;
	margin-bottom: 1rem;
	font-style: italic;
}
.lh-quote {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(1.4rem, 2.5vw, 2rem);
	line-height: 1.45;
	color: var(--text);
	max-width: 36ch;
	margin: 0 auto 2.5rem;
	font-style: italic;
}
.lh-quote em {
	color: var(--gold);
	font-style: italic;
	font-weight: 400;
}
.lh-attr {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: var(--text-mid);
}
.lh-rule {
	width: 30px;
	height: 1px;
	background: var(--gold-deep);
}

/* Decorative corners on the headline card */
.lead-headline::before,
.lead-headline::after,
.lead-headline > .corner-tl,
.lead-headline > .corner-br {
	content: "";
	position: absolute;
	width: 24px;
	height: 24px;
	border: 1px solid var(--gold);
}
.lead-headline::before {
	top: 0;
	left: 0;
	border-right: none;
	border-bottom: none;
}
.lead-headline::after {
	bottom: 0;
	right: 0;
	border-left: none;
	border-top: none;
}

/* Credentials roll — like a registry entry */
.creds-frame {
	background: var(--bg-card);
	border: 1px solid var(--line);
	padding: 3.5rem clamp(2rem, 5vw, 5rem);
	margin-bottom: 3rem;
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 1s ease,
		transform 1s ease;
}
.creds-frame.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.creds-frame-tag {
	text-align: center;
	color: var(--gold);
	margin-bottom: 2.5rem;
	display: block;
}

.creds-roll {
	display: flex;
	flex-direction: column;
}
.cred-row {
	display: grid;
	grid-template-columns: 60px 1fr auto;
	gap: 2rem;
	align-items: baseline;
	padding: 1.25rem 0;
	border-bottom: 1px dashed var(--line);
	font-size: 1.05rem;
}
.cred-row:last-child {
	border-bottom: none;
}
.cred-mark {
	font-family: var(--f-display);
	font-weight: 400;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--gold);
}
.cred-name {
	font-family: var(--f-display);
	color: var(--text);
}
.cred-abbr {
	color: var(--text-dim);
}

/* Lead pair — two refined cards */
.lead-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}
.lead-card {
	background: var(--bg-card);
	border: 1px solid var(--line);
	padding: 3rem;
	position: relative;
	opacity: 0;
	transform: translateY(30px);
	transition:
		opacity 1s ease,
		transform 1s ease,
		border-color 0.4s;
}
.lead-card.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.lead-card:hover {
	border-color: var(--line-gold);
}

.lead-card-promise {
	background: linear-gradient(135deg, var(--bg-oxblood), var(--bg-card) 80%);
	border-color: var(--line-gold);
}

.lc-tag {
	color: var(--gold);
	margin-bottom: 1.5rem;
	display: block;
}
.lc-title {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.5vw, 2.2rem);
	line-height: 1.1;
	margin-bottom: 1.5rem;
	letter-spacing: -0.01em;
}
.lc-title em {
	color: var(--gold);
	font-style: italic;
}
.lc-body {
	font-family: var(--f-display);
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.6;
	color: var(--text-mid);
}
.lc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}
.lc-tag-pill {
	font-family: var(--f-caps);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-mid);
	padding: 0.4rem 0.9rem;
	border: 1px solid var(--line-hi);
	border-radius: 999px;
}

@media (max-width: 880px) {
	.cred-row {
		grid-template-columns: 40px 1fr;
	}
	.cred-row .cred-abbr {
		grid-column: 2;
		color: var(--text-faint);
		font-size: 0.7rem;
	}
}
/* lead-pair collapses later — at 880px there's still enough room for two columns */
@media (max-width: 640px) {
	.lead-pair {
		grid-template-columns: 1fr;
	}
}

/* ============ DIVISIONS ============ */
.division {
	padding: 4rem 0;
	position: relative;
	opacity: 0;
	transform: translateY(40px);
	transition:
		opacity 1.1s ease,
		transform 1.1s ease;
}
.division.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.div-marker {
	display: inline-block;
	color: var(--gold);
	margin-bottom: 2.5rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid var(--gold-deep);
	border-radius: 999px;
}
.div-grid {
	display: grid;
	grid-template-columns: 0.8fr 1fr;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
}
.div-roman {
	font-family: var(--f-display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(5rem, 10vw, 8rem);
	color: var(--gold);
	line-height: 0.8;
	margin-bottom: 1.5rem;
	letter-spacing: -0.04em;
}
.div-name {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 4.5vw, 3.8rem);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 1.25rem;
}
.div-tagline {
	color: var(--gold);
	margin-bottom: 1.75rem;
	display: block;
}
.div-flag {
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 300;
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--text-mid);
	max-width: 38ch;
}
.hl {
	color: var(--gold);
	font-style: italic;
}

.div-services-tag {
	color: var(--gold);
	margin-bottom: 2rem;
	display: block;
	position: relative;
	padding-left: 2.5rem;
}
.div-services-tag::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 2rem;
	height: 1px;
	background: var(--gold-deep);
}

.services-list {
	list-style: none;
}
.services-list li {
	display: grid;
	grid-template-columns: 50px 1fr;
	align-items: baseline;
	gap: 1.5rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
	font-size: 1.05rem;
	color: var(--text);
	transition:
		padding-left 0.4s ease,
		color 0.4s;
}
.services-list li:last-child {
	border-bottom: none;
}
.services-list li:hover {
	padding-left: 0.5rem;
	color: var(--gold-bright);
}
.serv-num {
	font-family: var(--f-caps);
	font-size: 0.7rem;
	color: var(--gold);
	letter-spacing: 0.15em;
}
.serv-name {
	font-family: var(--f-display);
	font-weight: 400;
}

/* Decorative divider between divisions */
.div-divider {
	display: flex;
	align-items: center;
	gap: 2rem;
	margin: 3rem auto;
	max-width: 600px;
}
.dd-line {
	flex: 1;
	height: 1px;
	background: var(--gold-deep);
	opacity: 0.5;
}
.dd-mark {
	color: var(--gold);
	font-size: 0.7rem;
	letter-spacing: 0.5em;
}

@media (max-width: 880px) {
	.div-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}

/* ============ TECHNOLOGY ============ */
.tech-intro {
	text-align: center;
	max-width: 60ch;
	margin: 0 auto 5rem;
	font-family: var(--f-display);
	font-weight: 300;
	font-style: italic;
	font-size: clamp(1.15rem, 1.6vw, 1.45rem);
	line-height: 1.6;
	color: var(--text-mid);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 1s ease,
		transform 1s ease;
}
.tech-intro.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Partnership line — sits below the BIPROS intro, framed by gold rules.
   Calls out VKCPL's role in the partnership without competing with the headline. */
.tech-partner-line {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: 700px;
	margin: 2.5rem auto 0;
	padding-top: 2rem;
	border-top: 1px dashed var(--line-gold);
}
.tpl-rule {
	flex: 1;
	height: 1px;
	background: var(--gold-deep);
	opacity: 0.4;
}
.tpl-text {
	font-family: var(--f-display);
	font-style: normal;
	font-weight: 400;
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
	color: var(--text);
	text-align: center;
	line-height: 1.5;
	white-space: normal;
}
.tpl-text em {
	color: var(--gold);
	font-style: italic;
}
@media (max-width: 700px) {
	.tech-partner-line {
		flex-direction: column;
		gap: 1rem;
	}
	.tpl-rule {
		width: 60px;
		flex: none;
	}
}

/* Stats — refined inline frame */
.tech-stats {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	border-top: 1px solid var(--line-gold);
	border-bottom: 1px solid var(--line-gold);
	padding: 4rem 0;
	margin-bottom: 6rem;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 1s ease 0.1s,
		transform 1s ease 0.1s;
}
.tech-stats.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ts-block {
	flex: 1;
	text-align: center;
	padding: 0 1.5rem;
}
.ts-num {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(2.5rem, 5vw, 4rem);
	color: var(--gold);
	line-height: 1;
	margin-bottom: 1.25rem;
	letter-spacing: -0.02em;
}
.ts-num sup {
	font-size: 0.4em;
	color: var(--gold);
	vertical-align: super;
}
.ts-label {
	color: var(--text-mid);
}
.ts-divide {
	width: 1px;
	background: var(--line-gold);
}

/* Proprietary suite */
.tech-suite {
	margin-bottom: 5rem;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 1s ease 0.2s,
		transform 1s ease 0.2s;
}
.tech-suite.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.suite-tag {
	text-align: center;
	display: block;
	color: var(--gold);
	margin-bottom: 3rem;
}

.suite-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}
.suite-card {
	background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
	border: 1px solid var(--line);
	padding: 2.5rem 2rem;
	text-align: center;
	position: relative;
	transition: all 0.5s ease;
	overflow: hidden;
}
.suite-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	opacity: 0;
	transition: opacity 0.5s;
}
.suite-card:hover {
	border-color: var(--gold-deep);
	transform: translateY(-6px);
}
.suite-card:hover::before {
	opacity: 1;
}

.suite-num {
	font-family: var(--f-display);
	font-weight: 300;
	font-style: italic;
	font-size: 1.5rem;
	color: var(--gold);
	margin-bottom: 1rem;
}
.suite-name {
	font-family: var(--f-display);
	font-weight: 500;
	/* Fluid size — scales between 1.2rem on narrow phones and 1.5rem
		on tablets/desktop. Prevents fixed 1.5rem clipping product names
		like "ConvenePro" or "UnitySphere" inside narrow 2-column cards. */
	font-size: clamp(1.2rem, 3.5vw, 1.5rem);
	letter-spacing: -0.01em;
	margin-bottom: 0.5rem;
	/* If a name is still too long for the column, break gracefully
		rather than clipping. Won't trigger at most widths thanks to
		the fluid sizing above. */
	word-break: break-word;
}
.suite-dot {
	color: var(--gold);
	font-weight: 300;
}
.suite-desc {
	font-family: var(--f-display);
	font-style: italic;
	font-size: 0.95rem;
	font-weight: 300;
	color: var(--text-dim);
}

/* Pedigree line */
.tech-pedigree {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 2rem 0;
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 1s ease 0.3s,
		transform 1s ease 0.3s;
}
.tech-pedigree.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.pedigree-line {
	flex: 1;
	height: 1px;
	background: var(--line-gold);
}
.pedigree-text {
	color: var(--gold);
	font-size: 0.78rem;
	letter-spacing: 0.25em;
	text-align: center;
}

/* Tech stats — 4-across on desktop, 2x2 on tablets/phones-landscape,
	single column only on the narrowest phones. Done with flex wrap +
	percentage widths since `.ts-block` and `.ts-divide` alternate. */
@media (max-width: 880px) {
	.tech-stats {
		flex-wrap: wrap;
		padding: 3rem 0;
	}
	.ts-block {
		flex: 1 1 40%;
		padding: 1.5rem 1rem;
	}
	/* Hide vertical dividers in wrap mode — they break the grid */
	.ts-divide {
		display: none;
	}
	.suite-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 500px) {
	.ts-block {
		flex: 1 1 100%;
	}
	/* On the smallest phones, two cards per row leaves no room for the
		product names. Stack to single column — better readability and
		each card gets its own breathing room. */
	.suite-grid {
		grid-template-columns: 1fr;
	}
	.suite-card {
		padding: 2rem 1.5rem;
	}
}

/* ============ CLIENTS — LEDGER ============ */
.ledger {
	border-top: 1px solid var(--gold-deep);
	border-bottom: 1px solid var(--gold-deep);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 1s ease,
		transform 1s ease;
}
.ledger.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ledger-row {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	border-bottom: 1px solid var(--line);
	transition: background 0.4s;
}
.ledger-row:last-child {
	border-bottom: none;
}
.ledger-head {
	background: var(--bg-deep);
}
.ledger-row:not(.ledger-head):hover {
	background: var(--bg-card);
}

.ledger-cell {
	padding: 1.75rem 2rem;
	font-size: 1.05rem;
	line-height: 1.5;
	font-family: var(--f-display);
}
.ledger-cell:first-child {
	border-right: 1px solid var(--line);
}
.ledger-head .ledger-cell {
	color: var(--gold);
}
.ledger-sector {
	color: var(--text);
	font-weight: 500;
}
.ledger-row:not(.ledger-head) .ledger-cell:last-child {
	color: var(--text-mid);
	font-style: italic;
	font-weight: 300;
}

@media (max-width: 880px) {
	.ledger-row {
		grid-template-columns: 1fr;
	}
	.ledger-cell {
		padding: 1.25rem 1.25rem;
	}
	.ledger-cell:first-child {
		border-right: none;
		border-bottom: 1px solid var(--line);
		padding-bottom: 0.5rem;
	}
	.ledger-row:not(.ledger-head) .ledger-cell:last-child {
		padding-top: 0.5rem;
	}
	.ledger-head {
		display: none;
	}
}

/* ============ PIPELINE ============ */
.pipe-list {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--line);
}
.pipe-row {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	gap: 2rem;
	align-items: center;
	padding: 2.5rem 0;
	border-bottom: 1px solid var(--line);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity 0.9s ease,
		transform 0.9s ease,
		padding 0.4s ease;
}
.pipe-row.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.pipe-row:hover {
	padding-left: 1.5rem;
}

.pipe-roman {
	font-family: var(--f-display);
	font-weight: 300;
	font-style: italic;
	font-size: 2.5rem;
	color: var(--gold);
	line-height: 1;
}
.pipe-info {
	padding-right: 2rem;
}
.pipe-name {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	line-height: 1.2;
	margin-bottom: 0.5rem;
	letter-spacing: -0.01em;
}
.pipe-desc {
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 300;
	font-size: 1.05rem;
	color: var(--text-mid);
}
.pipe-status {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--gold);
}
.ps-mark {
	width: 6px;
	height: 6px;
	background: var(--gold);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(212, 176, 106, 0.5);
}

@media (max-width: 880px) {
	.pipe-row {
		grid-template-columns: 60px 1fr;
		gap: 1.5rem;
		padding: 2rem 0;
	}
	.pipe-status {
		grid-column: 2;
		padding-left: 0;
		margin-top: 0.5rem;
	}
	.pipe-info {
		padding-right: 0;
	}
}

/* ============ CONTACT / ENGAGE ============ */
.section-engage {
	border-top: 1px solid var(--line);
	background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 100%);
	position: relative;
}
.engage-frame {
	padding: var(--section-gap) var(--pad-x) 6rem;
	max-width: 1500px; /* wider than before since we host a form now */
	margin: 0 auto;
}

/* Header — centred above the two-column grid */
.engage-header {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 5rem;
}
.engage-seal {
	width: 64px;
	height: 64px;
	margin: 0 auto 2rem;
	filter: drop-shadow(0 0 18px rgba(212, 176, 106, 0.18));
}
.engage-seal svg {
	width: 100%;
	height: 100%;
	display: block;
}

.engage-eyebrow {
	color: var(--gold);
	margin-bottom: 2rem;
	display: block;
}
.engage-title {
	font-family: var(--f-display);
	font-weight: 300;
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: 2rem;
}
.engage-title em {
	color: var(--gold);
	font-style: italic;
	font-weight: 400;
}
.engage-sub {
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 300;
	font-size: 1.25rem;
	color: var(--text-mid);
	max-width: 50ch;
	margin: 0 auto;
	line-height: 1.6;
}

/* Two-column body: offices on the left, form on the right.
   At < 1024px the form drops underneath the offices. */
.contact-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
@media (max-width: 1024px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

/* ============ OFFICES COLUMN ============ */
.contact-offices {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.office-card {
	background: linear-gradient(135deg, rgba(212, 176, 106, 0.03) 0%, transparent 60%), var(--bg-card);
	border: 1px solid var(--line);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	position: relative;
	transition: border-color 0.4s;
}
.office-card:hover {
	border-color: var(--line-gold);
}
.office-card-alt {
	background: linear-gradient(135deg, rgba(42, 19, 26, 0.4) 0%, var(--bg-card) 70%);
}

.office-card-head {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 1.25rem;
	align-items: start;
	margin-bottom: 1.75rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px dashed var(--line-gold);
}
.oc-roman {
	font-family: var(--f-display);
	font-weight: 300;
	font-style: italic;
	font-size: 2.8rem;
	color: var(--gold);
	line-height: 1;
}
.oc-tag {
	color: var(--gold);
	margin-bottom: 0.5rem;
	display: block;
	font-size: 0.65rem;
	letter-spacing: 0.18em;
}
.oc-city {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	letter-spacing: -0.02em;
	line-height: 1;
}

.oc-firm {
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--text);
	margin-bottom: 0.75rem;
}
.oc-address {
	font-family: var(--f-display);
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--text-mid);
	margin-bottom: 1.25rem;
}
.oc-purpose {
	color: var(--text-dim);
	font-size: 0.7rem;
	margin-bottom: 1.25rem;
	padding-left: 1rem;
	border-left: 1px solid var(--gold-deep);
	line-height: 1.5;
	display: block;
}

/* Contact-person block — sits at the bottom of an office card.
   Hosts: a gold label, the consultant's name, and one or more
   contact-link rows (mobile, mail). Reads as a single cohesive
   "this is the person to reach" panel rather than fragmented rows. */
.oc-contact-person {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--line-gold);
}
.ocp-label {
	color: var(--gold);
	font-size: 0.65rem;
}
.ocp-name {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--text);
	letter-spacing: 0.01em;
	margin-bottom: 0.5rem;
}

/* Stack of contact links inside the contact-person block */
.ocp-contacts {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 0.25rem;
}
.ocp-contact-link {
	display: grid;
	grid-template-columns: 75px 1fr;
	align-items: baseline;
	gap: 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid transparent;
	transition:
		border-color 0.3s,
		transform 0.3s;
}
.ocp-contact-link:hover {
	border-bottom-color: var(--gold-deep);
}
.ocp-contact-label {
	color: var(--text-dim);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
}
.ocp-contact-value {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 1.05rem;
	color: var(--text);
	letter-spacing: 0.02em;
	transition: color 0.3s;
	word-break: break-word;
}
.ocp-contact-link:hover .ocp-contact-value {
	color: var(--gold);
}

/* Email values are longer than phone numbers — give them slightly
   smaller type so they fit gracefully on narrow cards. */
.ocp-contact-mail {
	font-size: 0.95rem;
}

/* On narrow cards, stack the label above the value instead of side-by-side */
@media (max-width: 420px) {
	.ocp-contact-link {
		grid-template-columns: 1fr;
		gap: 0.2rem;
		padding: 0.5rem 0 0.65rem;
	}
	/* Tighten the office card head — numeral was eating 60px of ~280px */
	.office-card-head {
		grid-template-columns: 40px 1fr;
		gap: 0.85rem;
	}
	.oc-roman {
		font-size: 2.2rem;
	}
	.oc-phones {
		row-gap: 0.4rem;
	}
}

/* Phone-only block (used by Bhubaneswar — multiple phone numbers) */
.oc-phones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding-top: 1rem;
	border-top: 1px dashed var(--line);
}
.oc-label {
	color: var(--text-dim);
	font-size: 0.65rem;
	margin-right: 0.5rem;
}
.oc-phone-link {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 1.1rem;
	color: var(--text);
	letter-spacing: 0.02em;
	border-bottom: 1px solid transparent;
	transition:
		color 0.3s,
		border-color 0.3s;
}
.oc-phone-link:hover {
	color: var(--gold);
	border-bottom-color: var(--gold-deep);
}
.oc-divide {
	color: var(--gold);
}

/* ============ FORM COLUMN ============ */
.contact-form-wrap {
	background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
	border: 1px solid var(--line-gold);
	padding: clamp(2rem, 4vw, 3.5rem);
	position: relative;
	/* Decorative corner brackets — gold strokes that frame the form */
}
.contact-form-wrap::before,
.contact-form-wrap::after {
	content: "";
	position: absolute;
	width: 28px;
	height: 28px;
	border: 1px solid var(--gold);
	pointer-events: none;
}
.contact-form-wrap::before {
	top: -1px;
	left: -1px;
	border-right: none;
	border-bottom: none;
}
.contact-form-wrap::after {
	bottom: -1px;
	right: -1px;
	border-left: none;
	border-top: none;
}

.form-header {
	text-align: center;
	margin-bottom: 2.5rem;
}
.form-tag {
	color: var(--gold);
	margin-bottom: 0.75rem;
	display: block;
}
.form-title {
	font-family: var(--f-display);
	font-weight: 400;
	font-style: italic;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--text);
}
.form-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}
.form-rule span:not(.dia) {
	width: 40px;
	height: 1px;
	background: var(--gold-deep);
	display: block;
}
.form-rule .dia {
	color: var(--gold);
	font-size: 0.6rem;
}

/* Honeypot — visually hidden but still in the DOM for bots to find */
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.enquiry-form {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.form-row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	position: relative;
}
.form-row-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}
@media (max-width: 600px) {
	.form-row-pair {
		grid-template-columns: 1fr;
	}
}

.form-label {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	color: var(--text-mid);
	font-size: 0.7rem;
	letter-spacing: 0.18em;
}
.fl-num {
	font-family: var(--f-display);
	font-style: italic;
	font-size: 0.85rem;
	color: var(--gold);
	letter-spacing: 0;
	text-transform: lowercase;
}

/* Form inputs — ledger-paper feel, no rounded corners, gold focus state */
.enquiry-form input,
.enquiry-form textarea {
	font-family: var(--f-display);
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--text);
	background: var(--bg-deep);
	border: 1px solid var(--line);
	border-radius: 0;
	padding: 0.85rem 1rem;
	width: 100%;
	transition:
		border-color 0.3s,
		background 0.3s;
	-webkit-appearance: none;
	appearance: none;
	outline: none;
}
.enquiry-form textarea {
	resize: vertical;
	min-height: 120px;
	line-height: 1.5;
}
.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder {
	color: var(--text-faint);
	font-style: italic;
}
.enquiry-form input:focus,
.enquiry-form textarea:focus {
	border-color: var(--gold);
	background: rgba(212, 176, 106, 0.04);
}

/* Validation error styling — applied via JS on submit */
.enquiry-form input.is-invalid,
.enquiry-form textarea.is-invalid {
	border-color: #c97670; /* muted oxblood, in keeping with palette */
	background: rgba(201, 118, 112, 0.05);
}

/* Status banner — appears above the submit button on success/failure */
.form-status {
	font-family: var(--f-display);
	font-size: 1rem;
	font-style: italic;
	text-align: center;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition:
		max-height 0.4s ease,
		padding 0.4s ease;
}
.form-status.is-shown {
	padding: 1rem 1.25rem;
	max-height: 200px;
	border: 1px solid;
	margin-top: 0.5rem;
}
.form-status.is-success {
	color: var(--gold-bright);
	border-color: var(--gold-deep);
	background: rgba(212, 176, 106, 0.06);
}
.form-status.is-error {
	color: #d8978f;
	border-color: #6b3a35;
	background: rgba(107, 58, 53, 0.1);
}

/* Submit button — gold-fill on hover, similar to old engage-cta */
.form-submit {
	font-family: var(--f-caps);
	font-size: 0.85rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--gold);
	background: transparent;
	border: 1px solid var(--gold);
	padding: 1.15rem 2rem;
	cursor: pointer;
	margin-top: 1rem;
	position: relative;
	overflow: hidden;
	transition: color 0.4s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	white-space: nowrap; /* keep "Despatch Enquiry →" on one line */
}
/* On small phones, tighten tracking + padding so the button stays clean */
@media (max-width: 420px) {
	.form-submit {
		letter-spacing: 0.18em;
		padding: 1rem 1.25rem;
		font-size: 0.78rem;
	}
}
.form-submit::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gold);
	transform: translateY(101%);
	transition: transform 0.5s ease;
	z-index: 0;
}
.form-submit > * {
	position: relative;
	z-index: 1;
}
.form-submit:hover {
	color: var(--bg);
}
.form-submit:hover::before {
	transform: translateY(0);
}
.form-submit:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.form-submit:disabled::before {
	transform: translateY(101%);
}

.fs-arrow {
	font-family: var(--f-display);
	font-size: 1.2rem;
	transition: transform 0.4s;
}
.form-submit:hover .fs-arrow {
	transform: translateX(4px);
}

.form-note {
	font-family: var(--f-display);
	font-style: italic;
	font-size: 0.85rem;
	color: var(--text-dim);
	text-align: center;
	margin-top: 1rem;
	line-height: 1.5;
	max-width: 50ch;
	margin-left: auto;
	margin-right: auto;
}

/* ============ FOOTER ============ */
.footer {
	padding: 3rem var(--pad-x) 2.5rem;
	border-top: 1px solid var(--line);
	background: var(--bg-deep);
}
.footer-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2.5rem;
}
.footer-rule span:not(.fr-mark) {
	width: 80px;
	height: 1px;
	background: var(--gold-deep);
	display: block;
}
.fr-mark {
	color: var(--gold);
	font-size: 0.7rem;
}

.footer-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}
.footer-mark {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.fm-name {
	font-family: var(--f-display);
	font-weight: 500;
	font-size: 1.1rem;
	color: var(--text);
}
.fm-meta {
	color: var(--text-dim);
}
.footer-meta {
	color: var(--text-dim);
}
.fm-bullet {
	color: var(--gold);
	margin: 0 0.75rem;
}

.footer-brands {
	text-align: center;
	color: var(--text-faint);
	font-size: 0.7rem;
	letter-spacing: 0.25em;
	padding-top: 2rem;
	border-top: 1px solid var(--line);
}

/* Final legal line — copyright on the left, designed-by credit on the right.
   The smallest, quietest tier of footer text — sits beneath everything else
   so it never competes for attention. */
.footer-legal {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 1.5rem;
	margin-top: 1.5rem;
	border-top: 1px dashed var(--line);
	font-family: var(--f-display);
	font-size: 0.78rem;
	font-style: italic;
	color: var(--text-faint);
}
.fl-copy {
	letter-spacing: 0.01em;
}
.fl-divide {
	color: var(--gold-deep);
	display: none;
} /* shown on mobile when stacked */

.fl-credit-link {
	color: var(--text-dim);
	border-bottom: 1px solid transparent;
	transition:
		color 0.3s,
		border-color 0.3s;
	font-style: italic;
}
.fl-credit-link:hover {
	color: var(--gold);
	border-bottom-color: var(--gold-deep);
}

@media (max-width: 880px) {
	.footer-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.footer-legal {
		flex-direction: column;
		gap: 0.5rem;
		text-align: center;
	}
	.fl-divide {
		display: none;
	}
}

/* ============ ACCESSIBILITY ============ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}