/* DISPLAY Performance Advertising Rebrand 2026
   Palette: Display Red #FF0000 · Carbon Black #000 · Electric Cyan #00FFFF · Sunset Orange #FF4500 · Pure White
   Type:    Montserrat Black (all-caps headlines) · Space Grotesk (technical / ROI data)
   Rules:   red = conversion points + growth metrics; cyan/orange = secondary data call-outs; ~70% dark / 30% highlights. */
:root {
	--de-cyan: #00ffff;
	--de-orange: #ff4500;
	--de-display: "Montserrat", "Arial Black", sans-serif;
	--de-data: "Space Grotesk", "Montserrat", sans-serif;
}

/* headlines: Montserrat Black, all caps */
.de-hero__title,
.de-page-hero h1,
.de-cta h2,
.de-section h2,
.de-footer h2,
.de-service h2,
.de-service h3,
.de-portfolio__overlay h2,
.de-portfolio__overlay h3,
.de-card h3,
.de-feature h3 {
	font-family: var(--de-display);
	font-weight: 900;
	letter-spacing: 0;
	text-transform: uppercase;
}

.de-section h2,
.de-cta h2 {
	font-size: clamp(1.7rem, 3.2vw, 2.7rem);
	line-height: 1.12;
}

.de-page-hero h1 {
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
	line-height: 1.08;
}

.de-service h2,
.de-service h3 {
	font-size: clamp(1.05rem, 1.35vw, 1.25rem);
	line-height: 1.2;
}

.de-card h3,
.de-feature h3 {
	font-size: 1.05rem;
}

.de-hero--3d .de-hero__title {
	font-size: clamp(1.9rem, 3.3vw, 3.1rem);
	line-height: 1.08;
}

/* UI text: nav, buttons, labels */
/* identical in every state: hovering must not change size or spacing (the underline is the only hover effect) */
body.de-redesign .de-nav__link,
body.de-redesign .de-nav__link:hover,
body.de-redesign .de-nav__link:focus-visible,
body.de-redesign .de-nav .menu-item a,
body.de-redesign .de-nav .menu-item a:hover,
body.de-redesign .de-nav .menu-item a:focus-visible,
body.de-redesign .de-nav .current-menu-item a {
	font-family: var(--de-display) !important;
	font-weight: 700 !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.1em !important;
	transform: none !important;
}

.de-btn,
.de-btn--header {
	font-family: var(--de-display);
	font-weight: 800;
	letter-spacing: 0.08em;
}

.de-eyebrow,
.de-link {
	font-family: var(--de-display);
	font-weight: 700;
}

/* data: Space Grotesk, with the secondary accents for call-outs */
.de-stats strong,
.de-service__index,
.de-portfolio__cat {
	font-family: var(--de-data);
}

.de-stats strong {
	font-weight: 700;
	font-size: clamp(2.2rem, 4vw, 3.4rem);
	letter-spacing: -0.01em;
}

.de-stats > div:nth-child(1) strong { color: var(--de-red); }    /* growth metric */
.de-stats > div:nth-child(2) strong { color: var(--de-cyan); }
.de-stats > div:nth-child(3) strong { color: var(--de-orange); }
.de-stats > div:nth-child(4) strong { color: var(--de-red); }

.de-service__index {
	color: var(--de-orange);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
}

.de-portfolio__cat {
	color: var(--de-cyan);
	font-weight: 700;
	letter-spacing: 0.12em;
}

/* logo lockup (monogram + wordmark) is taller than the old wide logo */
.de-header .de-logo img {
	height: 3.3rem;
}

.de-logo--footer img {
	height: 5.5rem;
}

@media (max-width: 860px) {
	.de-header .de-logo img {
		height: 2.9rem;
	}
}

/* section headings are wider in Montserrat Black: give them room so they stay on 2 lines */
.de-section__head {
	max-width: 58rem;
}

/* small labels that sit on photos: white text + red rule (plain red is hard to read on dark images) */
.de-cta .de-eyebrow,
.de-page-hero .de-eyebrow {
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9);
}

.de-cta .de-eyebrow::before,
.de-page-hero .de-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 3px;
	background: var(--de-red);
}