/*
Theme Name: Salient Child Theme
Description: Denoflore 2026 visual system for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("assets/fonts/bricolage-grotesque-variable-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/atkinson-regular-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/atkinson-bold-latin.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/atkinson-italic-latin.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-regular-latin.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-medium-latin.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/ibm-plex-mono-semibold-latin.woff2") format("woff2");
}

:root {
	--df-ink: #171a1c;
	--df-ink-deep: #0f1112;
	--df-ink-soft: #343a3d;
	--df-paper: #f7f4ec;
	--df-paper-deep: #ece7da;
	--df-white: #f1f2f2;
	--df-blue: #3480c2;
	--df-red: #d04a3c;
	--df-red-on-dark: #d95a4c;
	--df-yellow: #f5c513;
	--df-green: #28b897;
	--df-line: rgba(23, 26, 28, 0.16);
	--df-line-light: rgba(241, 242, 242, 0.2);
	--df-shadow: 0 32px 80px rgba(23, 26, 28, 0.12);
	--df-display: "Bricolage Grotesque", Arial, sans-serif;
	--df-body: "Atkinson Hyperlegible", Arial, sans-serif;
	--df-mono: "IBM Plex Mono", Consolas, monospace;
	--df-shell: min(1240px, calc(100vw - 48px));
	--df-section-space: clamp(84px, 10vw, 148px);
}

html {
	overflow-x: clip;
	scroll-behavior: smooth;
}

body.denoflore-2026 {
	background: var(--df-paper);
	color: var(--df-ink);
	font-family: var(--df-body);
	font-size: 18px;
	line-height: 1.62;
	overflow-x: clip;
	text-rendering: optimizeLegibility;
}

body.denoflore-2026 h1,
body.denoflore-2026 h2,
body.denoflore-2026 h3,
body.denoflore-2026 h4,
body.denoflore-2026 h5,
body.denoflore-2026 h6 {
	color: inherit;
	font-family: var(--df-display);
	font-weight: 650;
	letter-spacing: -0.035em;
}

body.denoflore-2026 p,
body.denoflore-2026 li,
body.denoflore-2026 input,
body.denoflore-2026 textarea,
body.denoflore-2026 button {
	font-family: var(--df-body);
}

body.denoflore-2026 a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

body.denoflore-2026 :focus-visible {
	outline: 3px solid var(--df-yellow);
	outline-offset: 4px;
}

body.denoflore-2026 #header-outer a:focus-visible,
body.denoflore-2026 #slide-out-widget-area a:focus-visible,
body.denoflore-2026 .slide_out_area_close:focus-visible {
	outline: 3px solid var(--df-yellow) !important;
	outline-offset: 4px !important;
}

body.denoflore-2026 .nectar-skip-to-content:focus {
	background: var(--df-paper) !important;
	color: var(--df-ink-deep) !important;
	transition: none !important;
}

body.denoflore-2026 .slide_out_area_close[aria-hidden="true"] {
	pointer-events: none;
}

body.denoflore-2026 > .slide_out_area_close__wrap .slide_out_area_close,
body.denoflore-2026 > .slide_out_area_close {
	height: 44px;
	right: 24px;
	top: 28px;
	width: 44px;
}

body.denoflore-2026 > .slide_out_area_close__wrap .slide_out_area_close .close-wrap,
body.denoflore-2026 > .slide_out_area_close .close-wrap {
	left: 50%;
	right: auto;
	top: 50%;
	transform: translate(-50%, -50%);
}

body.denoflore-2026 .container-wrap {
	background: var(--df-paper);
	padding-bottom: 0;
}

body.denoflore-2026.home .container-wrap {
	padding-top: 0;
}

body.denoflore-2026.home #page-header-wrap,
body.denoflore-2026.home .row .col.section-title {
	display: none;
}

body.denoflore-2026 .main-content > .row {
	margin-bottom: 0;
}

body.denoflore-2026 .wpb_content_element {
	margin-bottom: 0;
}

body.denoflore-2026 .df-section.wpb_row {
	margin-bottom: 0;
}

body.denoflore-2026 #header-outer {
	border-bottom: 1px solid var(--df-line);
	box-shadow: none;
	backdrop-filter: blur(18px);
	background-color: rgba(247, 244, 236, 0.94) !important;
}

body.denoflore-2026 #header-outer #top {
	max-width: 1320px;
}

body.denoflore-2026 #header-outer #logo img {
	width: auto;
}

body.denoflore-2026 #top nav > ul > li > a,
body.denoflore-2026 #header-outer .nectar-header-text-content {
	color: var(--df-ink) !important;
	font-family: var(--df-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

body.denoflore-2026 #top nav > ul > li > a:hover,
body.denoflore-2026 #top nav > ul > li.current-menu-item > a {
	color: var(--df-blue) !important;
}

body.denoflore-2026 #header-outer #top nav > ul > li.menu-cta > a {
	background: var(--df-ink);
	border: 1px solid var(--df-ink);
	border-radius: 999px;
	color: var(--df-white) !important;
	margin-left: 12px;
	padding: 13px 20px !important;
}

body.denoflore-2026 #header-outer #top nav > ul > li.menu-cta > a .menu-title-text {
	color: var(--df-white) !important;
}

body.denoflore-2026 #header-outer #top nav > ul > li.menu-cta > a:hover {
	background: var(--df-blue);
	border-color: var(--df-blue);
	color: var(--df-white) !important;
}

body.denoflore-2026 #top .slide-out-widget-area-toggle a .lines:before,
body.denoflore-2026 #top .slide-out-widget-area-toggle a .lines:after,
body.denoflore-2026 #top .slide-out-widget-area-toggle a .lines-button:after {
	background-color: var(--df-ink) !important;
}

.df-shell {
	margin-inline: auto;
	width: var(--df-shell);
}

.df-kicker {
	align-items: center;
	color: var(--df-ink);
	display: flex;
	font-family: var(--df-mono);
	font-size: 12px;
	font-weight: 600;
	gap: 12px;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0 0 24px;
	text-transform: uppercase;
}

.df-kicker:before {
	background: var(--df-kicker-accent, currentColor);
	content: "";
	height: 2px;
	width: 32px;
}

.df-kicker--blue {
	--df-kicker-accent: var(--df-blue);
}

.df-kicker--green {
	--df-kicker-accent: var(--df-green);
}

.df-kicker--yellow {
	--df-kicker-accent: var(--df-yellow);
}

.df-beholder .df-kicker {
	color: var(--df-white);
}

.df-contact .df-kicker {
	color: var(--df-ink-deep);
}

.df-section-title {
	font-size: clamp(42px, 5.4vw, 76px);
	line-height: 0.98;
	margin: 0;
	max-width: 880px;
}

.df-section-lead {
	color: var(--df-ink-soft);
	font-size: clamp(19px, 1.8vw, 23px);
	line-height: 1.55;
	margin: 26px 0 0;
	max-width: 720px;
}

.df-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 38px;
}

.df-button {
	align-items: center;
	border: 1px solid var(--df-ink);
	border-radius: 999px;
	display: inline-flex;
	font-family: var(--df-mono);
	font-size: 12px;
	font-weight: 600;
	gap: 13px;
	justify-content: center;
	letter-spacing: 0.05em;
	line-height: 1;
	min-height: 52px;
	padding: 0 22px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.df-button:after {
	content: "↗";
	font-size: 16px;
	line-height: 1;
}

.df-button:hover {
	transform: translateY(-2px);
}

.df-button--primary {
	background: var(--df-ink);
	color: var(--df-white);
}

.df-button--primary:hover {
	background: var(--df-blue);
	border-color: var(--df-blue);
	color: var(--df-white);
}

.df-button--secondary {
	background: transparent;
	color: var(--df-ink);
}

.df-button--secondary:hover {
	background: var(--df-white);
	color: var(--df-ink);
}

.df-button--light {
	background: var(--df-white);
	border-color: var(--df-white);
	color: var(--df-ink);
}

.df-button--light:hover {
	background: var(--df-yellow);
	border-color: var(--df-yellow);
	color: var(--df-ink);
}

/* Hero */
.df-hero {
	background:
		linear-gradient(var(--df-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--df-line) 1px, transparent 1px),
		var(--df-paper);
	background-size: 72px 72px;
	border-bottom: 1px solid var(--df-line);
	overflow: hidden;
	position: relative;
}

.df-hero:before {
	background: var(--df-paper);
	content: "";
	inset: 0;
	opacity: 0.72;
	position: absolute;
}

.df-hero .df-shell {
	align-items: center;
	display: grid;
	gap: clamp(48px, 5vw, 72px);
	grid-template-columns: minmax(0, 1.22fr) minmax(390px, 0.78fr);
	min-height: min(850px, calc(100vh - 90px));
	padding-block: clamp(84px, 8vw, 112px);
	position: relative;
	z-index: 1;
}

.df-signal-field {
	inset: 0;
	opacity: 0.72;
	pointer-events: none;
	position: absolute;
	width: 100%;
}

.df-hero h1 {
	font-size: clamp(62px, 5.2vw, 82px);
	line-height: 0.9;
	margin: 0;
	max-width: 760px;
}

.df-hero h1 > span {
	display: block;
}

.df-hero h1 .df-word-signal,
.df-hero h1 .df-word-matters {
	display: inline;
}

.df-hero h1 .df-word-signal {
	color: var(--df-blue);
}

.df-hero h1 .df-word-matters {
	color: var(--df-red);
}

.df-hero__copy > p {
	color: var(--df-ink-soft);
	font-size: clamp(20px, 1.75vw, 24px);
	line-height: 1.52;
	margin: 32px 0 0;
	max-width: 670px;
}

.df-hero__scope {
	border-top: 1px solid var(--df-line);
	font-family: var(--df-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	line-height: 1.7;
	margin-top: 44px;
	max-width: 670px;
	padding-top: 18px;
	text-transform: uppercase;
}

.df-signal-map {
	aspect-ratio: 1 / 1;
	background: rgba(241, 242, 242, 0.56);
	border: 1px solid var(--df-line);
	border-radius: 50%;
	box-shadow: var(--df-shadow);
	margin-inline: auto;
	max-width: 520px;
	position: relative;
	width: 100%;
}

.df-signal-map:before,
.df-signal-map:after {
	border: 1px solid var(--df-line);
	border-radius: inherit;
	content: "";
	inset: 14%;
	position: absolute;
}

.df-signal-map:after {
	inset: 29%;
}

.df-signal-axis {
	background: var(--df-line);
	left: 50%;
	position: absolute;
	top: 8%;
	transform-origin: 50% 100%;
	width: 1px;
}

.df-signal-axis--one {
	height: 84%;
}

.df-signal-axis--two {
	height: 84%;
	transform: rotate(90deg);
}

.df-signal-core {
	align-items: center;
	background: var(--df-ink);
	border-radius: 50%;
	color: var(--df-white);
	display: flex;
	flex-direction: column;
	height: 34%;
	justify-content: center;
	left: 33%;
	position: absolute;
	text-align: center;
	top: 33%;
	width: 34%;
	z-index: 2;
}

.df-signal-core strong {
	font-family: var(--df-display);
	font-size: clamp(18px, 2vw, 28px);
	font-weight: 650;
	line-height: 1;
}

.df-signal-core small {
	font-family: var(--df-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	margin-top: 9px;
	text-transform: uppercase;
}

.df-signal-mark {
	display: grid;
	gap: 3px;
	grid-template-columns: repeat(2, 11px);
	margin-bottom: 14px;
}

.df-signal-mark i {
	display: block;
	height: 11px;
}

.df-signal-mark i:nth-child(1) { background: var(--df-blue); }
.df-signal-mark i:nth-child(2) { background: var(--df-red); }
.df-signal-mark i:nth-child(3) { background: var(--df-yellow); }
.df-signal-mark i:nth-child(4) { background: var(--df-green); }

.df-signal-node {
	align-items: center;
	background: var(--df-paper);
	border: 1px solid var(--df-line);
	border-radius: 999px;
	display: flex;
	font-family: var(--df-mono);
	font-size: 10px;
	font-weight: 600;
	gap: 8px;
	letter-spacing: 0.05em;
	padding: 8px 12px;
	position: absolute;
	text-transform: uppercase;
	z-index: 3;
}

.df-signal-node:before {
	border-radius: 50%;
	content: "";
	height: 9px;
	width: 9px;
}

.df-signal-node--source { left: 2%; top: 19%; }
.df-signal-node--source:before { background: var(--df-blue); }
.df-signal-node--interpret { right: -4%; top: 22%; }
.df-signal-node--interpret:before { background: var(--df-yellow); }
.df-signal-node--decide { bottom: 17%; right: 3%; }
.df-signal-node--decide:before { background: var(--df-red); }
.df-signal-node--receipt { bottom: 13%; left: 1%; }
.df-signal-node--receipt:before { background: var(--df-green); }

.df-signal-pulse {
	animation: df-pulse 3.6s ease-in-out infinite;
	background: var(--df-blue);
	border-radius: 50%;
	height: 12px;
	left: calc(50% - 6px);
	position: absolute;
	top: calc(50% - 6px);
	width: 12px;
}

@keyframes df-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(52, 128, 194, 0.35); }
	50% { box-shadow: 0 0 0 42px rgba(52, 128, 194, 0); }
}

/* Service system */
.df-services {
	background: var(--df-paper);
	padding-block: var(--df-section-space);
}

.df-services__header {
	align-items: end;
	display: grid;
	gap: 48px;
	grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
}

.df-services__header .df-section-lead {
	margin: 0;
}

.df-service-grid {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 72px;
}

.df-service-card {
	border-left: 1px solid var(--df-line);
	border-top: 1px solid var(--df-line);
	min-height: 310px;
	padding: 34px;
	position: relative;
	transition: background-color 180ms ease, transform 180ms ease;
}

.df-service-card:nth-child(3n),
.df-service-card:last-child {
	border-right: 1px solid var(--df-line);
}

.df-service-card:nth-last-child(-n + 3) {
	border-bottom: 1px solid var(--df-line);
}

.df-service-card:hover {
	background: var(--df-white);
	transform: translateY(-4px);
	z-index: 1;
}

.df-service-card__index {
	font-family: var(--df-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.df-service-card__dot {
	border-radius: 50%;
	height: 12px;
	position: absolute;
	right: 32px;
	top: 32px;
	width: 12px;
}

.df-service-card:nth-child(4n + 1) .df-service-card__dot { background: var(--df-blue); }
.df-service-card:nth-child(4n + 2) .df-service-card__dot { background: var(--df-red); }
.df-service-card:nth-child(4n + 3) .df-service-card__dot { background: var(--df-yellow); }
.df-service-card:nth-child(4n + 4) .df-service-card__dot { background: var(--df-green); }

.df-service-card h3 {
	font-size: clamp(27px, 2.4vw, 36px);
	line-height: 1.02;
	margin: 76px 0 16px;
}

.df-service-card p {
	color: var(--df-ink-soft);
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
}

/* BEHOLDER */
.df-beholder {
	background: var(--df-ink);
	color: var(--df-white);
	overflow: hidden;
	padding-block: var(--df-section-space);
	position: relative;
}

.df-beholder:before {
	background:
		linear-gradient(var(--df-line-light) 1px, transparent 1px),
		linear-gradient(90deg, var(--df-line-light) 1px, transparent 1px);
	background-size: 64px 64px;
	content: "";
	inset: 0;
	opacity: 0.28;
	position: absolute;
}

.df-beholder .df-shell {
	position: relative;
}

.df-beholder__grid {
	align-items: center;
	display: grid;
	gap: clamp(52px, 8vw, 120px);
	grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
}

.df-beholder .df-section-lead {
	color: rgba(241, 242, 242, 0.72);
}

.df-receipt {
	background: #0f1112;
	border: 1px solid var(--df-line-light);
	box-shadow: 18px 18px 0 rgba(52, 128, 194, 0.18);
	padding: clamp(26px, 4vw, 48px);
}

.df-receipt__top {
	align-items: center;
	border-bottom: 1px solid var(--df-line-light);
	display: flex;
	font-family: var(--df-mono);
	font-size: 10px;
	justify-content: space-between;
	letter-spacing: 0.07em;
	padding-bottom: 18px;
	text-transform: uppercase;
}

.df-receipt__live {
	align-items: center;
	display: inline-flex;
	gap: 8px;
}

.df-receipt__live:before {
	background: var(--df-green);
	border-radius: 50%;
	box-shadow: 0 0 0 5px rgba(40, 184, 151, 0.12);
	content: "";
	height: 8px;
	width: 8px;
}

.df-receipt__rows {
	list-style: none;
	margin: 0;
	padding: 10px 0 0;
}

.df-receipt__rows li {
	align-items: baseline;
	border-bottom: 1px solid rgba(241, 242, 242, 0.1);
	display: grid;
	font-size: 16px;
	gap: 20px;
	grid-template-columns: 112px 1fr;
	padding: 18px 0;
}

.df-receipt__rows code {
	font-family: var(--df-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.df-receipt__rows li:nth-child(1) code { color: var(--df-blue); }
.df-receipt__rows li:nth-child(2) code { color: var(--df-yellow); }
.df-receipt__rows li:nth-child(3) code { color: var(--df-red-on-dark); }
.df-receipt__rows li:nth-child(4) code { color: var(--df-green); }
.df-receipt__rows li:nth-child(5) code { color: var(--df-white); }

.df-evidence-rule {
	background: rgba(241, 242, 242, 0.06);
	border-left: 3px solid var(--df-yellow);
	font-size: 15px;
	line-height: 1.55;
	margin-top: 28px;
	padding: 18px 20px;
}

.df-evidence-flow {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(5, 1fr);
	margin-top: 72px;
}

.df-evidence-flow span {
	border-top: 1px solid var(--df-line-light);
	font-family: var(--df-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	padding-top: 14px;
	text-transform: uppercase;
}

/* Human judgement */
.df-judgement {
	background: var(--df-white);
	padding-block: var(--df-section-space);
}

.df-judgement__grid {
	align-items: start;
	display: grid;
	gap: clamp(52px, 9vw, 136px);
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.74fr);
}

.df-judgement__statement {
	font-family: var(--df-display);
	font-size: clamp(46px, 6.2vw, 88px);
	font-weight: 620;
	letter-spacing: -0.045em;
	line-height: 0.96;
	margin: 0;
}

.df-judgement__statement em {
	color: var(--df-blue);
	font-style: normal;
}

.df-judgement__copy > p {
	color: var(--df-ink-soft);
	font-size: 20px;
	margin: 0;
}

.df-judgement__list {
	list-style: none;
	margin: 38px 0 0;
	padding: 0;
}

.df-judgement__list li {
	align-items: start;
	border-top: 1px solid var(--df-line);
	display: grid;
	gap: 20px;
	grid-template-columns: 28px 1fr;
	padding: 18px 0;
}

.df-judgement__list li:before {
	color: var(--df-green);
	content: "●";
	font-family: var(--df-mono);
	font-size: 13px;
}

.df-principles {
	display: grid;
	gap: 1px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 82px;
}

.df-principle {
	background: var(--df-paper);
	min-height: 170px;
	padding: 28px;
}

.df-principle strong {
	display: block;
	font-family: var(--df-display);
	font-size: 28px;
	letter-spacing: -0.03em;
}

.df-principle span {
	color: var(--df-ink-soft);
	display: block;
	font-size: 16px;
	line-height: 1.5;
	margin-top: 12px;
}

/* Method */
.df-method {
	background: var(--df-paper-deep);
	padding-block: var(--df-section-space);
}

.df-method__steps {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 72px;
}

.df-method-step {
	background: var(--df-paper);
	border: 1px solid var(--df-line);
	min-height: 390px;
	padding: 34px;
	position: relative;
}

.df-method-step__number {
	color: rgba(23, 26, 28, 0.5);
	font-family: var(--df-display);
	font-size: 96px;
	font-weight: 700;
	line-height: 0.8;
}

.df-method-step h3 {
	font-size: 38px;
	line-height: 1;
	margin: 90px 0 16px;
}

.df-method-step p {
	color: var(--df-ink-soft);
	font-size: 17px;
	margin: 0;
}

.df-method-step:nth-child(1) { border-top: 5px solid var(--df-blue); }
.df-method-step:nth-child(2) { border-top: 5px solid var(--df-red); }
.df-method-step:nth-child(3) { border-top: 5px solid var(--df-green); }

/* Deliverables */
.df-deliverables {
	background: var(--df-paper);
	padding-block: var(--df-section-space);
}

.df-deliverables__grid {
	display: grid;
	gap: 44px;
	grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1.25fr);
}

.df-deliverables__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.df-deliverables__list li {
	align-items: center;
	border-top: 1px solid var(--df-line);
	display: grid;
	font-family: var(--df-display);
	font-size: clamp(25px, 3vw, 40px);
	font-weight: 580;
	gap: 22px;
	grid-template-columns: 18px 1fr;
	letter-spacing: -0.025em;
	line-height: 1.1;
	padding: 25px 0;
}

.df-deliverables__list li:last-child {
	border-bottom: 1px solid var(--df-line);
}

.df-deliverables__list li:before {
	background: var(--df-green);
	border-radius: 50%;
	content: "";
	height: 10px;
	width: 10px;
}

/* Contact */
.df-contact {
	background: var(--df-blue);
	color: var(--df-white);
	padding-block: clamp(88px, 12vw, 164px);
	position: relative;
}

.df-contact:after {
	background-image: url("assets/images/denoflore-logo-white@2x.png");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
	bottom: 34px;
	content: "";
	height: 70px;
	opacity: 0.14;
	position: absolute;
	right: 4vw;
	width: 390px;
}

.df-contact h2 {
	font-size: clamp(62px, 9vw, 132px);
	line-height: 0.86;
	margin: 0;
	max-width: 980px;
}

.df-contact p {
	font-size: clamp(19px, 2vw, 25px);
	line-height: 1.5;
	margin: 32px 0 0;
	max-width: 660px;
}

.df-contact .df-button-row {
	position: relative;
	z-index: 1;
}

.df-contact-form {
	background: rgba(241, 242, 242, 0.96);
	border: 1px solid rgba(241, 242, 242, 0.5);
	border-radius: 18px;
	box-shadow: 0 28px 70px rgba(15, 17, 18, 0.18);
	color: var(--df-ink);
	margin-top: 44px;
	max-width: 760px;
	padding: clamp(24px, 4vw, 42px);
	position: relative;
	z-index: 2;
}

.df-contact-form label {
	color: var(--df-ink);
	font-family: var(--df-mono);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.df-contact-form input,
.df-contact-form textarea {
	background: var(--df-white) !important;
	border: 1px solid var(--df-line) !important;
	border-radius: 8px !important;
	color: var(--df-ink) !important;
}

.df-contact-form button.ff-btn-submit {
	background: var(--df-ink) !important;
	border: 1px solid var(--df-ink) !important;
	border-radius: 999px !important;
	color: var(--df-white) !important;
	font-family: var(--df-mono) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.05em;
	min-height: 52px;
	padding-inline: 24px !important;
	text-transform: uppercase;
}

body.denoflore-2026 #footer-outer #copyright {
	background: var(--df-ink) !important;
	border-top: 1px solid var(--df-line-light);
	color: rgba(241, 242, 242, 0.7);
	font-family: var(--df-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
}

body.denoflore-2026 #footer-outer #copyright a {
	color: var(--df-white);
}

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

@media (max-width: 1100px) {
	:root {
		--df-shell: min(100% - 40px, 960px);
	}

	.df-hero .df-shell,
	.df-services__header,
	.df-beholder__grid,
	.df-judgement__grid,
	.df-deliverables__grid {
		grid-template-columns: 1fr;
	}

	.df-hero .df-shell {
		min-height: auto;
	}

	.df-hero__visual {
		max-width: 560px;
		width: 100%;
	}

	.df-services__header .df-section-lead {
		margin-top: 0;
	}

	.df-beholder__grid {
		align-items: stretch;
	}

	.df-judgement__copy {
		max-width: 720px;
	}
}

@media (max-width: 900px) {
	.df-service-grid,
	.df-method__steps {
		grid-template-columns: 1fr 1fr;
	}

	.df-service-card:nth-child(n) {
		border: 1px solid var(--df-line);
	}

	.df-service-card:nth-child(even) {
		border-left: 0;
	}

	.df-service-card:nth-child(n + 3) {
		border-top: 0;
	}

	.df-method-step:last-child {
		grid-column: 1 / -1;
	}

	.df-evidence-flow {
		grid-template-columns: repeat(3, 1fr);
	}

	.df-principles {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 690px) {
	:root {
		--df-shell: calc(100vw - 30px);
		--df-section-space: 78px;
	}

	body.denoflore-2026 {
		font-size: 17px;
	}

	.df-hero {
		background-size: 46px 46px;
	}

	.df-hero .df-shell {
		gap: 60px;
		grid-template-columns: 1fr;
		padding-block: 78px;
	}

	.df-hero h1 {
		font-size: clamp(52px, 14.4vw, 56px);
	}

	.df-hero__copy > p {
		font-size: 19px;
	}

	.df-button {
		width: 100%;
	}

	.df-signal-map {
		max-width: 390px;
	}

	.df-signal-node {
		font-size: 8px;
		padding: 6px 9px;
	}

	.df-signal-node--interpret,
	.df-signal-node--decide {
		right: -2%;
	}

	.df-section-title {
		font-size: clamp(40px, 13vw, 58px);
	}

	.df-service-grid,
	.df-method__steps,
	.df-evidence-flow {
		grid-template-columns: 1fr;
	}

	.df-service-card:nth-child(n) {
		border: 1px solid var(--df-line);
		border-bottom: 0;
		min-height: 270px;
	}

	.df-service-card:last-child {
		border-bottom: 1px solid var(--df-line);
	}

	.df-beholder__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.df-receipt {
		box-shadow: 10px 10px 0 rgba(52, 128, 194, 0.18);
		padding: 22px;
	}

	.df-receipt__rows li {
		gap: 8px;
		grid-template-columns: 86px 1fr;
		font-size: 14px;
	}

	.df-principles {
		margin-top: 58px;
	}

	.df-method-step,
	.df-method-step:last-child {
		grid-column: auto;
		min-height: 330px;
	}

	.df-method-step h3 {
		margin-top: 66px;
	}

	.df-contact:after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*:before,
	*:after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}


/* Headline asterisk: theme CSS collapses this span's line-height to 0, which
   empties the background-clip:text paint box and hides the gradient star. */
.display .brand-star {
	display: inline-block;
	/* Full-size line box so background-clip:text paints the whole glyph
	   (a shrunken box clips the ink), then transform-scale it up — transforms
	   don't affect layout and scale the painted glyph cleanly.
	   !important beats the page's inline 1.28em/line-height:0 rule. */
	font-size: 1em !important;
	line-height: .76 !important;
	vertical-align: baseline !important;
	transform: scale(1.7) translateY(16%);
}


/* Display headers: Golos Text 800 (overrides the inline page styles). */
.display,
.statement h2,
.tools h2,
.contact h2,
.section-title,
.outcome h3,
.service-card h3,
.account-copy h2,
.step h3,
.fit-card h3 {
	font-family: 'Golos Text', var(--display, sans-serif) !important;
	font-weight: 800 !important;
}

/* Hero compression: keep the bottom three-cell meta bar above the fold on desktop. */
@media (min-width: 961px) {
	.hero .display {
		font-size: clamp(4.4rem, 10.4vw, 11.6rem) !important;
	}
	.hero-bottom {
		margin-top: clamp(1rem, 2vw, 1.8rem) !important;
	}
	.hero-copy-wrap {
		padding-top: clamp(.6rem, 1.4vw, 1.6rem) !important;
	}
}


/* Sticky nav: the nav now lives outside the hero (front-page.php), sticks
   page-wide. !important beats the page's inline .nav {position:relative}. */
.nav {
	position: sticky !important;
	top: 0;
	z-index: 10000 !important; /* hero section carries z 9998; nav must always be on top */
}
/* Hero lost its nav grid row and the nav now takes ~5rem above it. */
.hero {
	grid-template-rows: 1fr auto !important;
	min-height: calc(100svh - 5.75rem) !important;
}


/* Nav compaction on scroll: bar height, colour and logo crossfade all run on
   the same 320ms curve so they read as one movement. */
.nav {
	transition: padding .32s cubic-bezier(.4,0,.2,1),
	            background-color .32s cubic-bezier(.4,0,.2,1),
	            border-color .32s cubic-bezier(.4,0,.2,1);
}
.brand {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.brand .brand-logo {
	transition: width .32s cubic-bezier(.4,0,.2,1),
	            opacity .32s cubic-bezier(.4,0,.2,1);
}
/* The white logo stacks on the dark one so the swap is a crossfade, not a jump. */
.brand .brand-logo--light {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
}
.nav .nav-links a,
.nav .menu-button {
	transition: color .32s cubic-bezier(.4,0,.2,1),
	            background-color .32s cubic-bezier(.4,0,.2,1),
	            border-color .32s cubic-bezier(.4,0,.2,1);
}

.nav.is-compact {
	padding-top: .62rem;
	padding-bottom: .62rem;
	background-color: rgba(24, 23, 23, .82);
	border-bottom-color: rgba(255, 255, 255, .18);
}
.nav.is-compact .brand-logo {
	width: clamp(8.6rem, 13vw, 12.6rem);
}
.nav.is-compact .brand-logo--dark { opacity: 0; }
.nav.is-compact .brand-logo--light { opacity: 1; }
.nav.is-compact .nav-links a:not(.button) { color: #fffefa; }
.nav.is-compact .menu-button { color: #fffefa; border-color: rgba(255,255,255,.5); }
.nav.is-compact .button-dark {
	background: #fffefa;
	color: #252424;
	border-color: #fffefa;
}

@media (prefers-reduced-motion: reduce) {
	.nav, .brand .brand-logo, .nav .nav-links a, .nav .menu-button { transition: none; }
}


/* Service cards: headings were pushed to different heights by an `auto` top
   margin (each card had different slack) and ran past the card edge.
   Fixed top offset = top aligned across cards; smaller type = fits inside. */
.service-card h3 {
	margin: 1.1rem 0 1rem !important;
	max-width: none !important;
	font-size: clamp(2.1rem, 3.1vw, 3rem) !important;
	line-height: .88 !important;
	/* Two-line box so the copy below each heading also lines up card to card. */
	min-height: calc(2 * .88em) !important;
}
.service-card p {
	margin-top: 0;
}
/* space-between distributed leftover space BETWEEN items, so each heading sat
   at a different height. Anchor everything to the top, push tags to the bottom. */
.service-card {
	justify-content: flex-start !important;
}
/* The tags live in an inner wrapper, not directly in the card, so the wrapper
   has to be the flex column that pushes them to the bottom. */
.service-card > div:not(.card-top) {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
}
.service-card .tags {
	margin-top: auto !important;
}


/* ---- Mobile fit ----
   The theme's phone clamps were still too large for the longest words
   (19.5vw = 84px at 430px wide; "DEPARTMENT" needs ~520px there), and the
   two-column grids never collapsed, so headings and copy ran off the right
   edge. Sized so the longest word in each block fits inside the padding. */
@media (max-width: 640px) {
	.statement h2 {
		font-size: clamp(2.9rem, 13.5vw, 5rem) !important;
		max-width: none !important;
	}
	.account-copy h2 {
		font-size: clamp(2.6rem, 12.5vw, 4.6rem) !important;
		max-width: none !important;
	}
	.tools h2 {
		font-size: clamp(2.9rem, 14vw, 5.2rem) !important;
		max-width: none !important;
	}
	.contact h2 {
		font-size: clamp(3rem, 14.5vw, 5.4rem) !important;
		max-width: none !important;
	}
	.section-title {
		font-size: clamp(2.8rem, 13.5vw, 4.8rem) !important;
		max-width: none !important;
	}
	.outcome h3 {
		font-size: clamp(1.9rem, 8.5vw, 3rem) !important;
		max-width: none !important;
	}

	/* Copy blocks were held at fixed rem widths wider than the screen. */
	.statement p,
	.account-copy p,
	.tools p,
	.section-intro,
	.hero-support,
	.contact p {
		max-width: 100% !important;
	}

	/* Two-column grids collapse to one on phones. */
	.statement-grid,
	.account-grid,
	.section-head,
	.outcome-grid,
	.fit-grid {
		grid-template-columns: 1fr !important;
	}

	/* Long uppercase words must never punch out of their box. */
	.statement h2,
	.account-copy h2,
	.tools h2,
	.contact h2,
	.section-title,
	.display {
		overflow-wrap: normal !important;
		word-break: keep-all !important;
		hyphens: none !important;
	}
}


/* Card row: a settled card must never be chopped by the screen edge. */
.service-track {
	scroll-padding-inline: var(--pad) !important;
}
.service-card {
	scroll-snap-stop: always !important;
}
/* A scroll container clips BOTH axes once one axis scrolls, so cards were cut
   off at the top and bottom (hover lift, shadow, any bleed). Pad the block axis
   to create room to overflow into, then pull it back with an equal negative
   margin so the row's layout height is unchanged. */
.service-track {
	padding-block: 3.75rem !important;
	margin-block: -3.75rem !important;
}


/* Statement: the copy sat in a second grid column beside the headline. It reads
   below the headline at every width now. */
.statement-grid {
	grid-template-columns: 1fr !important;
	align-items: start !important;
	gap: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.statement-grid p {
	max-width: 62ch !important;
}

/* Process steps: justify-content space-between spread the leftover space
   between the number and the heading, so every box started its heading at a
   different height. Anchor to the top with one fixed offset. */
.step {
	justify-content: flex-start !important;
}
.step h3 {
	margin: 2.4rem 0 .7rem !important;
}
.step p {
	margin-top: auto !important;
	padding-top: 1rem;
}


/* Outcome boxes: same space-between defect as the cards and steps. The leftover
   space was distributed between the label, heading and copy, so every box put
   its heading at a different height once the grid stacked. */
.outcome {
	justify-content: flex-start !important;
}
.outcome h3 {
	margin: 1.6rem 0 1rem !important;
	min-height: calc(2 * .93em) !important;
}
.outcome p {
	margin-top: auto !important;
	padding-top: 1rem;
}

/* Hero meta bar: each cell is a flex row whose min-content width (long line plus
   two lots of page padding) exceeded the phone viewport, so the bar ran past the
   right edge and the text was chopped. Let the cells shrink and the text wrap. */
@media (max-width: 640px) {
	.hero-meta {
		max-width: 100% !important;
	}
	.hero-meta span {
		min-width: 0 !important;
		flex-wrap: wrap !important;
		padding-block: .6rem !important;
	}
}


/* Hero track: the hero is a grid whose column sized itself to the widest child's
   min-content (the nowrap display spans), resolving to 404.78px inside a 390px
   hero. Every row then inherited that width, which is why the meta bar ran past
   the right edge and its text was chopped. minmax(0, 1fr) stops a track from
   exceeding its container; min-width: 0 lets the rows shrink with it. */
.hero {
	grid-template-columns: minmax(0, 1fr) !important;
}
.hero > * {
	min-width: 0 !important;
	max-width: 100% !important;
}
.hero-meta span {
	min-width: 0 !important;
}


/* Phone headline sizing is set by the LONGEST WORD in each block, not by taste.
   STATISTICIANS is 13 characters and cannot be split, so the type has to be
   small enough for that word to fit inside the page padding. Letting words break
   mid-way was the alternative and it read as a typo. */
@media (max-width: 640px) {
	.tools h2 {
		font-size: clamp(2rem, 9.6vw, 3.4rem) !important;
	}
	.account-copy h2 {
		font-size: clamp(2.3rem, 11.4vw, 4.2rem) !important;
	}
	.statement h2 {
		font-size: clamp(2.5rem, 12.4vw, 4.6rem) !important;
	}
	.contact h2 {
		font-size: clamp(2.6rem, 12.8vw, 4.8rem) !important;
	}
	.section-title {
		font-size: clamp(2.5rem, 12.4vw, 4.6rem) !important;
	}
}


/* Contact form: FluentForm ships its own typography (IBM Plex Mono labels and
   buttons, system-font inputs), which read as a different website bolted on.
   Bring it onto the site's own type, borders and button shape. */
.contact .frm-fluent-form,
.contact .frm-fluent-form input,
.contact .frm-fluent-form textarea,
.contact .frm-fluent-form select,
.contact .frm-fluent-form label,
.contact .frm-fluent-form button {
	font-family: inherit !important;
}

.contact .ff-el-input--label label {
	font-size: .68rem !important;
	font-weight: 900 !important;
	letter-spacing: .095em !important;
	text-transform: uppercase !important;
	color: var(--ink) !important;
}

.contact .ff-el-form-control {
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	border: 1.5px solid var(--ink) !important;
	border-radius: .8rem !important;
	background: rgba(255, 255, 255, .55) !important;
	padding: .85rem 1rem !important;
}

.contact .ff-el-form-control:focus {
	outline: 3px solid var(--ink) !important;
	outline-offset: 2px !important;
}

/* Match the site's pill buttons. */
.contact .ff-btn-submit {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 3.35rem !important;
	padding: .8rem 1.6rem !important;
	border: 1.5px solid var(--ink) !important;
	border-radius: 999px !important;
	background: var(--ink) !important;
	color: var(--white) !important;
	font-size: .75rem !important;
	font-weight: 900 !important;
	letter-spacing: .065em !important;
	text-transform: uppercase !important;
	transition: transform .2s ease, box-shadow .2s ease !important;
}
.contact .ff-btn-submit:hover {
	transform: translateY(-2px) !important;
	box-shadow: 5px 6px 0 rgba(37, 36, 36, .28) !important;
}


/* FluentForm's own button rule outranks the generic one, so the submit button
   needs the form in the selector to take the site's button weight. */
.contact form.frm-fluent-form button.ff-btn-submit,
.contact form.frm-fluent-form button[type="submit"] {
	font-family: inherit !important;
	font-weight: 900 !important;
	font-size: .75rem !important;
	letter-spacing: .065em !important;
	text-transform: uppercase !important;
	background: var(--ink) !important;
	color: var(--white) !important;
	border: 1.5px solid var(--ink) !important;
	border-radius: 999px !important;
	min-height: 3.35rem !important;
	padding: .8rem 1.6rem !important;
}


/* Section kickers were being skipped over: too small, too quiet, and the rule
   next to them was a hairline. They label the block underneath, so they need to
   register before the headline does. */
.kicker {
	margin-bottom: 1.25rem !important;
	font-size: clamp(.74rem, .95vw, .86rem) !important;
	font-weight: 900 !important;
	letter-spacing: .18em !important;
	gap: .95rem !important;
	opacity: 1 !important;
}
.kicker::before {
	width: 3.4rem !important;
	height: 4px !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, var(--electric), rgba(8, 127, 245, 0)) !important;
}
/* the dark section needs the label lifted off the ink */
.statement .kicker,
.tools .kicker {
	opacity: 1 !important;
}


/* Hero geometry.
   1. The call-out row sits on the bottom edge of the screen. The hero height
      was subtracting a hard coded 5.75rem for the nav, which only matched
      desktop; on a phone the nav is 52px, so the row stopped 40px short.
      denoflore-index.js publishes the real height as --nav-h.
   2. The buttons sit halfway between the end of the body copy and the top of
      that call-out row: auto margins above and below inside the hero body,
      whose bottom edge IS the call-out row. */
.hero {
	min-height: calc(100svh - var(--nav-h, 5.75rem)) !important;
}
.hero-main {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}
.hero-copy-wrap {
	flex: 0 0 auto;
}
.hero-actions {
	margin-top: 2.4rem !important;
	margin-bottom: 0 !important;
	justify-content: flex-start !important;
}
.hero-bottom {
	grid-template-columns: 1fr !important;
}

/* the rainbow bar across the top of the services section */
.services::before {
	display: none !important;
}


/* Desktop hero: the call-out row was landing 59px below the fold. The hero is
   now a column whose last child is that row, so the row is pinned to the bottom
   edge and the body above it absorbs whatever is left. Its padding is trimmed
   because the row itself now supplies the bottom margin. */
@media (min-width: 1025px) {
	.hero {
		display: flex !important;
		flex-direction: column !important;
	}
	.hero-main {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		padding-bottom: 0 !important;
		/* the headline-to-copy gap added below costs 47px of desktop height, and
		   this dead band above the eyebrow is where it comes from */
		padding-top: 2.4rem !important;
		/* desktop copy already fills the box; centring would push it past the
		   fold, so it stays top aligned and the buttons ride a tighter gap */
		justify-content: flex-start !important;
	}
	.hero-actions {
		margin-top: 1.4rem !important;
	}
	/* The desktop copy ran 25px taller than the gap between nav and fold, which
	   pushed the call-out row under the edge. Six lines at 1.28 give that back
	   at 1.15 without touching the headline or the type size. */
	.hero-support {
		line-height: 1.15 !important;
	}
}


/* Sticky nav. body carried overflow:hidden from the theme, which makes body a
   scroll container; the nav then pinned to body instead of the viewport and
   rode away on mobile. clip does the same sideways clipping without becoming a
   scroll container. */
html, body {
	overflow-x: clip !important;
	overflow-y: visible !important;
}


/* Phone headline. It rendered at a flat 15.8vw, and BUILD SOME ran 15px past
   the content box at 390px, clipping the E. 14.85vw is the same line broken the
   same way with 8px of slack at the tightest phone width. */
@media (max-width: 600px) {
	.display {
		font-size: 14.85vw !important;
	}
}


/* The creed: five constraints, each with its price. Numbered like the process
   steps but read as a list of refusals, so the number stays quiet and the
   value carries the weight. */
.creed .section-inner {
	position: relative;
	z-index: 1;
}
.creed-list {
	list-style: none;
	margin: 3rem 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	border-top: 2px solid rgba(37, 36, 36, .16);
}
.creed-item {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
	gap: 1rem 2.5rem;
	align-items: baseline;
	padding: 1.45rem 0;
	border-bottom: 2px solid rgba(37, 36, 36, .16);
}
.creed-item h3 {
	margin: 0;
	font-family: "Golos Text", system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(1.35rem, 2vw, 1.9rem);
	line-height: 1.05;
	letter-spacing: -.01em;
}
.creed-item p {
	margin: 0;
	font-size: clamp(1rem, 1.15vw, 1.18rem);
	line-height: 1.4;
	max-width: 54ch;
}
.creed-foot {
	margin: 2.5rem 0 0;
	font-weight: 700;
	font-size: clamp(1.05rem, 1.35vw, 1.35rem);
	line-height: 1.35;
	max-width: 60ch;
	border-left: 5px solid var(--electric, #087ff5);
	padding-left: 1.15rem;
}
@media (max-width: 760px) {
	.creed-item {
		grid-template-columns: minmax(0, 1fr);
		gap: .5rem;
		padding: 1.25rem 0;
	}
	.creed-item p {
		max-width: none;
	}
}


/* The hero body copy sat directly under the headline with no breathing room,
   so the two blocks read as one. The gap scales with the viewport so it holds
   from a phone to a 4K screen. */
.hero-bottom {
	margin-top: clamp(1.4rem, 2.6vw, 2.6rem) !important;
}


/* ---- Services: sticky stack + six shapes -------------------------------
   1. The row was a horizontal drag track, which asks the reader to do work
      before they have any reason to. Cards now stack: each one sticks under
      the nav and the next slides up over it, so a single downward scroll
      deals the deck. Offsets step by 14px so the pile stays legible.
   2. Every card carried the same ::before ring at the top right with the
      dot beside it. Six identical silhouettes, and that silhouette was a
      problem. Each card now clips its own polygon from one family. */
.services .service-track {
	display: block !important;
	grid-auto-flow: unset !important;
	grid-auto-columns: unset !important;
	overflow: visible !important;
	scroll-snap-type: none !important;
	cursor: default !important;
	padding-bottom: 3rem !important;
}
.services .service-card {
	position: sticky !important;
	top: calc(var(--nav-h, 5.75rem) + 1.1rem) !important;
	min-height: clamp(20rem, 34vw, 27rem) !important;
	margin: 0 auto 1.15rem !important;
	max-width: 68rem;
	scroll-snap-align: none !important;
	box-shadow: 0 -1px 0 rgba(37, 36, 36, .1), 6px 8px 0 rgba(37, 36, 36, .1);
}
.services .service-card:nth-child(1) { top: calc(var(--nav-h, 5.75rem) + 1.1rem) !important; }
.services .service-card:nth-child(2) { top: calc(var(--nav-h, 5.75rem) + 1.95rem) !important; }
.services .service-card:nth-child(3) { top: calc(var(--nav-h, 5.75rem) + 2.8rem) !important; }
.services .service-card:nth-child(4) { top: calc(var(--nav-h, 5.75rem) + 3.65rem) !important; }
.services .service-card:nth-child(5) { top: calc(var(--nav-h, 5.75rem) + 4.5rem) !important; }
.services .service-card:nth-child(6) { top: calc(var(--nav-h, 5.75rem) + 5.35rem) !important; }
.services .service-card:hover {
	transform: none !important;
	box-shadow: 0 -1px 0 rgba(37, 36, 36, .1), 10px 12px 0 var(--ink) !important;
}
.services .service-card h3 {
	max-width: 12ch !important;
	font-size: clamp(2.6rem, 4.4vw, 4.4rem) !important;
}

/* the shapes. One stroke weight, one offset-repeat shadow, six silhouettes. */
.services .service-card::before {
	width: 15rem !important;
	right: -4.5rem !important;
	top: -4rem !important;
	border-radius: 0 !important;
	border: none !important;
	background: rgba(37, 36, 36, .10);
	box-shadow: -1.5rem 1.5rem 0 rgba(255, 255, 255, .30),
	            -3rem 3rem 0 rgba(37, 36, 36, .05) !important;
}
/* 01 quarter arc */
.services .service-card:nth-child(1)::before {
	clip-path: path("M 0 240 A 240 240 0 0 1 240 0 L 240 240 Z");
}
/* 02 triangle */
.services .service-card:nth-child(2)::before {
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* 03 diamond */
.services .service-card:nth-child(3)::before {
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
/* 04 stepped bars */
.services .service-card:nth-child(4)::before {
	clip-path: polygon(0 0, 33% 0, 33% 66%, 66% 66%, 66% 33%, 100% 33%, 100% 100%, 0 100%);
}
/* 05 cross */
.services .service-card:nth-child(5)::before {
	clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
}
/* 06 hexagon */
.services .service-card:nth-child(6)::before {
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

/* the dot paired with the old ring to make the shape Chris flagged; squared
   off it reads as an index marker instead */
.services .card-dot {
	border-radius: 2px !important;
	transform: rotate(45deg);
}

@media (max-width: 760px) {
	.services .service-card {
		min-height: clamp(19rem, 62vw, 24rem) !important;
		margin-bottom: .85rem !important;
	}
	.services .service-card::before {
		width: 10rem !important;
		right: -3rem !important;
		top: -2.6rem !important;
	}
}


/* Services lead-in. Sits between the diagnosis and the deck, so the cards
   arrive after the reader knows who is talking. The verbs run at headline
   weight, the body at reading weight, and the dare gets its own line because
   it is the only place on the page allowed to be a swagger. */
.services-lead {
	max-width: 68rem;
	margin: clamp(2rem, 4vw, 3.4rem) auto clamp(2.2rem, 4vw, 3.2rem);
	padding: 0 var(--pad, 1.5rem);
}
.lead-verbs {
	margin: 0 0 1.1rem;
	font-family: "Golos Text", var(--display), system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(1.9rem, 4.2vw, 3.4rem);
	line-height: .98;
	letter-spacing: -.035em;
}
.lead-body {
	margin: 0 0 1.1rem;
	max-width: 46ch;
	font-size: clamp(1.05rem, 1.35vw, 1.32rem);
	line-height: 1.42;
	font-weight: 680;
}
.lead-dare {
	margin: 0;
	font-family: "Golos Text", var(--display), system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	line-height: 1;
	letter-spacing: -.03em;
}
@media (max-width: 760px) {
	.lead-body {
		max-width: none;
	}
}


/* Body font. The index stylesheet set --sans to Inter, but no Inter webfont
   was ever loaded, so every device fell back to its own system font and the
   page read differently on every screen. Open Sans is now enqueued alongside
   Golos and bound to the same variable, so the fallback chain only matters if
   Google is unreachable. */
:root,
body.denoflore-index {
	--sans: "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
body.denoflore-index,
body.denoflore-index p,
body.denoflore-index li,
body.denoflore-index span,
body.denoflore-index a,
body.denoflore-index input,
body.denoflore-index textarea,
body.denoflore-index button {
	font-family: var(--sans) !important;
}
/* headlines and the numeric display faces keep their own stacks */
body.denoflore-index .display,
body.denoflore-index .section-title,
body.denoflore-index h1,
body.denoflore-index h2,
body.denoflore-index h3,
body.denoflore-index h4,
body.denoflore-index h5,
body.denoflore-index h6,
body.denoflore-index .lead-verbs,
body.denoflore-index .lead-dare,
body.denoflore-index .stat strong,
body.denoflore-index .step strong {
	font-family: "Golos Text", var(--display) !important;
	/* Only the 800 cut is loaded. Anything asking for 600 or 650 was being
	   synthesised by the browser, which reads thinner and softer beside the
	   real weight. Pin every Golos element to the cut that actually exists. */
	font-weight: 800 !important;
}


/* Self-hosted Golos Text and Open Sans.
   These were coming from fonts.googleapis.com and failing to arrive on some
   machines, which the browser handles by silently falling back. Served from the
   theme there is nothing to block. font-display: swap keeps text visible while
   the file loads; Open Sans is the variable cut, so one file covers 300-800. */
@font-face {
	font-family: "Golos Text";
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url("assets/fonts/golos-text-800-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 300 800;
	font-display: swap;
	src: url("assets/fonts/open-sans-variable-latin.woff2") format("woff2");
}