:root {
	--cc-ink: #172126;
	--cc-muted: #5f6b73;
	--cc-bg: #f6f1e8;
	--cc-paper: rgba(255, 252, 246, 0.96);
	--cc-primary: #0f766e;
	--cc-primary-deep: #0b5e57;
	--cc-secondary: #d97706;
	--cc-accent: #f1e6d3;
	--cc-border: rgba(23, 33, 38, 0.12);
	--cc-shadow: 0 24px 72px rgba(23, 33, 38, 0.12);
}

body {
	background:
		radial-gradient(circle at 12% 10%, rgba(15, 118, 110, 0.16), transparent 28%),
		radial-gradient(circle at 88% 16%, rgba(217, 119, 6, 0.12), transparent 24%),
		linear-gradient(180deg, #fbf7f0 0%, var(--cc-bg) 100%);
	color: var(--cc-ink);
}

body,
input,
select,
textarea {
	font-family: "DM Sans", sans-serif;
	color: var(--cc-muted);
	line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6,
.button,
input[type="submit"],
input[type="reset"],
input[type="button"],
button {
	font-family: "Fraunces", serif;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
}

a {
	color: var(--cc-primary);
}

	a:hover {
		color: var(--cc-secondary) !important;
	}

p {
	text-align: left;
}

blockquote {
	border-left-color: rgba(15, 118, 110, 0.28);
	font-style: normal;
}

code {
	border-color: rgba(23, 33, 38, 0.08);
	background: rgba(23, 33, 38, 0.04);
}

#wrapper > * {
	background: var(--cc-paper);
	box-shadow: var(--cc-shadow);
}

#intro {
	background:
		linear-gradient(135deg, rgba(255, 252, 246, 0.94), rgba(241, 230, 211, 0.92)),
		linear-gradient(145deg, rgba(15, 118, 110, 0.12), rgba(217, 119, 6, 0.08));
}

#intro h1,
#intro p {
	position: relative;
	z-index: 2;
}

#intro h1 {
	font-size: clamp(3rem, 7vw, 6rem);
	color: var(--cc-ink);
}

#intro p {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.15rem;
}

#intro:before,
#intro:after {
	content: "";
	position: absolute;
	border-radius: 999px;
	z-index: 1;
}

#intro:before {
	width: 22rem;
	height: 22rem;
	right: -5rem;
	top: -6rem;
	background: radial-gradient(circle, rgba(15, 118, 110, 0.22), transparent 64%);
}

#intro:after {
	width: 18rem;
	height: 18rem;
	left: -5rem;
	bottom: -6rem;
	background: radial-gradient(circle, rgba(217, 119, 6, 0.2), transparent 66%);
}

#header .logo {
	color: var(--cc-primary);
}

#nav {
	background: rgba(255, 252, 246, 0.92);
}

#nav ul.links li a,
#nav ul.icons li a {
	font-family: "DM Sans", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cc-muted);
}

#nav ul.links li.active a,
#nav ul.links li a:hover,
#nav ul.icons li a:hover {
	color: var(--cc-ink) !important;
	background: rgba(15, 118, 110, 0.08);
}

#nav ul.links li.active a {
	box-shadow: inset 0 -3px 0 0 var(--cc-primary);
}

#main > * {
	border-top-color: rgba(23, 33, 38, 0.08);
}

.post.featured .image.main {
	margin-bottom: 3rem;
}

.post header.major > .date,
.posts article header > .date {
	border: 0;
	background: rgba(15, 118, 110, 0.1);
	color: var(--cc-primary);
	padding: 0.45rem 0.85rem;
	border-radius: 999px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.posts article {
	border-color: rgba(23, 33, 38, 0.08);
}

.hero-canvas,
.service-banner,
.cc-panel {
	border-radius: 1.25rem;
	border: 1px solid rgba(23, 33, 38, 0.08);
}

.hero-canvas {
	position: relative;
	min-height: 28rem;
	background:
		linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(23, 33, 38, 0.9)),
		linear-gradient(45deg, rgba(217, 119, 6, 0.52), transparent 46%);
	overflow: hidden;
}

.hero-gridline {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size: 3rem 3rem;
}

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

.hero-orbit-a {
	width: 18rem;
	height: 18rem;
	left: 8%;
	top: 12%;
}

.hero-orbit-b {
	width: 12rem;
	height: 12rem;
	right: 14%;
	top: 18%;
}

.hero-callout,
.hero-pill,
.panel-copy,
.service-banner-copy {
	position: absolute;
	background: rgba(255, 252, 246, 0.94);
	border: 1px solid rgba(23, 33, 38, 0.08);
	box-shadow: 0 18px 40px rgba(23, 33, 38, 0.16);
}

.hero-callout,
.panel-copy,
.service-banner-copy {
	border-radius: 1rem;
	padding: 1rem 1.1rem;
}

.hero-callout {
	right: 2.5rem;
	bottom: 2.5rem;
	max-width: 18rem;
}

.hero-callout strong,
.panel-copy strong,
.service-banner-copy strong {
	display: block;
	color: var(--cc-ink);
	font-size: 1.15rem;
}

.hero-callout span,
.panel-copy span,
.service-banner-copy span {
	display: block;
	margin-top: 0.35rem;
	color: var(--cc-muted);
	line-height: 1.6;
}

.hero-pill {
	padding: 0.55rem 0.85rem;
	border-radius: 999px;
	font-family: "DM Sans", sans-serif;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cc-ink);
}

.hero-pill-top { left: 10%; bottom: 18%; }
.hero-pill-mid { left: 28%; top: 18%; }
.hero-pill-low { right: 18%; top: 18%; }

.cc-panel {
	position: relative;
	min-height: 14rem;
	background:
		linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(23, 33, 38, 0.9)),
		linear-gradient(45deg, rgba(217, 119, 6, 0.48), transparent 46%);
	overflow: hidden;
}

.panel-copy {
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
}

.panel-glow {
	position: absolute;
	top: -2rem;
	right: -1rem;
	width: 12rem;
	height: 12rem;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 60%);
}

.panel-grid {
	position: absolute;
	inset: 1rem;
	border: 1px dashed rgba(255, 255, 255, 0.24);
	border-radius: 1rem;
}

.panel-dots {
	position: absolute;
	inset: 1rem;
	border-radius: 1rem;
	background-image: radial-gradient(rgba(255, 255, 255, 0.28) 1.5px, transparent 1.5px);
	background-size: 1rem 1rem;
}

.service-banner {
	position: relative;
	min-height: 20rem;
	background:
		linear-gradient(140deg, rgba(255, 252, 246, 0.24), rgba(255, 252, 246, 0)),
		url("/assets/cleanandco/massively/images/pic01.jpg") center/cover;
}

.service-banner-copy {
	left: 2rem;
	bottom: 2rem;
	max-width: 22rem;
	position: absolute;
}

.cc-sidecard {
	padding: 1.6rem;
	border: 1px solid rgba(23, 33, 38, 0.08);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.72);
}

.cc-sidecard h3 {
	margin-top: 0;
}

ul.alt li {
	border-top-color: rgba(23, 33, 38, 0.08);
}

table tbody tr {
	border-color: rgba(23, 33, 38, 0.08);
}

table.alt tbody tr:nth-child(2n + 1) {
	background: rgba(23, 33, 38, 0.03);
}

input,
select,
textarea {
	border-color: rgba(23, 33, 38, 0.12);
	border-radius: 0.65rem;
	background: rgba(255, 255, 255, 0.96);
	color: var(--cc-ink);
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--cc-primary);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(23, 33, 38, 0.16);
	color: var(--cc-ink) !important;
	background-color: transparent;
}

.button.primary,
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary {
	background: linear-gradient(135deg, var(--cc-primary), #2aa198);
	box-shadow: none;
	color: #fff !important;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
	box-shadow: inset 0 0 0 1px var(--cc-primary);
	color: var(--cc-primary) !important;
}

.button.primary:hover,
input[type="submit"].primary:hover,
input[type="reset"].primary:hover,
input[type="button"].primary:hover,
button.primary:hover {
	background: linear-gradient(135deg, var(--cc-primary-deep), var(--cc-primary));
	color: #fff !important;
}

.status-message {
	display: none;
	margin-bottom: 1rem;
	padding: 0.9rem 1rem;
	border-radius: 0.85rem;
	font-weight: 700;
}

.status-message.is-visible { display: block; }
.status-message.is-success { background: rgba(15, 118, 110, 0.12); color: var(--cc-primary); }
.status-message.is-error { background: rgba(220, 38, 38, 0.12); color: #b91c1c; }

#footer {
	background: rgba(255, 252, 246, 0.94);
}

#footer > section {
	border-top-color: rgba(23, 33, 38, 0.08);
}

#footer > section:first-child {
	border-right-color: rgba(23, 33, 38, 0.08);
}

#copyright {
	color: rgba(95, 107, 115, 0.92);
}

@media screen and (max-width: 736px) {
	.hero-canvas {
		min-height: 23rem;
	}

	.hero-callout {
		right: 1rem;
		left: 1rem;
		bottom: 1rem;
		max-width: none;
	}

	.hero-pill-mid,
	.hero-pill-low {
		display: none;
	}

	.service-banner-copy {
		left: 1rem;
		right: 1rem;
		bottom: 1rem;
		max-width: none;
	}
}