/*
Theme Name: Stealthlabs
Theme URI: https://example.com/stealthlabs
Author: Stealthlabs
Description: Black and gray block theme with a carbon fiber hero and sparing signal-orange highlights, built for a home automation, networking and security company.
Version: 1.3.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stealthlabs
*/

/* ------------------------------------------------------------------ tokens */
:root {
	--sl-black: #0b0c0e;
	--sl-carbon: #111418;
	--sl-graphite: #1a1e23;
	--sl-steel: #2a2f36;
	--sl-gray: #8a919b;
	--sl-muted: #aab0b8;
	--sl-silver: #c9cdd2;
	--sl-paper: #f4f4f1;
	--sl-white: #ffffff;
	--sl-orange: #ff6a1a;
	--sl-ink: #14171b;
	--sl-ink-muted: #4a515a;
	--sl-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--sl-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--sl-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
	--sl-gutter: clamp(20px, 4vw, 40px);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--sl-black);
	color: var(--sl-silver);
	font-family: var(--sl-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
h3,
h4,
ul {
	margin: 0;
}

h1,
h2,
h3,
h4 {
	font-family: var(--sl-display);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.05;
	color: var(--sl-paper);
}

a {
	color: inherit;
}

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ layout */
.sl-container {
	width: 100%;
	max-width: 1180px;
	margin-inline: auto;
	padding-inline: var(--sl-gutter);
}

.sl-container--narrow {
	max-width: 820px;
}

.sl-section {
	padding-block: clamp(64px, 8vw, 112px);
}

.sl-section--black {
	background: var(--sl-black);
}

.sl-section--carbon {
	background: var(--sl-carbon);
	border-top: 1px solid var(--sl-steel);
}

.sl-section--light {
	background: var(--sl-paper);
	color: var(--sl-ink-muted);
}

.sl-section--light h2,
.sl-section--light h3 {
	color: var(--sl-ink);
}

.sl-grid {
	display: grid;
	gap: 24px;
}

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

.sl-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sl-grid > *,
.sl-hero-grid > *,
.sl-footer-grid > * {
	margin: 0;
}

.sl-section-head {
	max-width: 720px;
	margin-bottom: 48px;
}

.sl-h2 {
	font-size: clamp(2rem, 4vw, 3.25rem);
	margin-bottom: 18px;
}

.sl-section-intro {
	font-size: 1.125rem;
	color: var(--sl-muted);
}

.sl-section--light .sl-section-intro {
	color: var(--sl-ink-muted);
}

.sl-eyebrow {
	font-family: var(--sl-mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sl-gray);
	margin-bottom: 18px;
}

.sl-eyebrow::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--sl-orange);
	vertical-align: middle;
	margin-right: 12px;
}

.sl-section--light .sl-eyebrow {
	color: var(--sl-ink-muted);
}

/* ----------------------------------------------------------------- buttons */
.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.wp-block-button__link {
	display: inline-block;
	border-radius: 0;
	font-family: var(--sl-display);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	text-decoration: none;
	padding: 15px 28px;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.sl-btn-primary .wp-block-button__link {
	background: var(--sl-orange);
	color: var(--sl-black);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.sl-btn-primary .wp-block-button__link:hover {
	background: #ff8444;
	color: var(--sl-black);
}

.sl-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--sl-paper);
	border: 1px solid #3a4048;
}

.sl-btn-ghost .wp-block-button__link:hover {
	border-color: var(--sl-paper);
	color: var(--sl-paper);
}

/* ------------------------------------------------------------------ header */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.sl-header {
	background: rgba(11, 12, 14, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--sl-steel);
}

.sl-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding-block: 16px;
}

.sl-brand {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.sl-header-right {
	display: flex;
	align-items: center;
	gap: 28px;
}

.sl-wordmark,
.sl-wordmark a {
	font-family: var(--sl-display);
	font-weight: 600;
	font-size: 1.75rem;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sl-paper);
	margin: 0;
}

.sl-wordmark .sl-labs {
	color: var(--sl-gray);
}

.sl-tagline {
	font-family: var(--sl-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	color: var(--sl-gray);
	margin: 0;
	line-height: 1.3;
}

.sl-nav .wp-block-navigation__container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-nav a,
.sl-nav .wp-block-navigation-item__content {
	font-family: var(--sl-display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sl-silver);
	padding-block: 6px;
	border-bottom: 2px solid transparent;
	transition: color 0.2s, border-color 0.2s;
}

.sl-nav a:hover,
.sl-nav .current-menu-item > a {
	color: var(--sl-white);
	border-bottom-color: var(--sl-orange);
}

.sl-header-cta {
	margin: 0;
}

/* ------------------------------------------------------------------- carbon */
.sl-carbon,
.is-style-carbon {
	background-color: #0e1013;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232a2f36'/%3E%3Cstop offset='1' stop-color='%23171a1e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='12' height='12' fill='%230e1013'/%3E%3Crect width='6' height='6' fill='url(%23g)'/%3E%3Crect x='6' y='6' width='6' height='6' fill='url(%23g)'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------- hero */
.sl-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(72px, 10vw, 140px);
	border-bottom: 1px solid var(--sl-steel);
}

.sl-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(11, 12, 14, 0.94) 0%, rgba(11, 12, 14, 0.62) 55%, rgba(11, 12, 14, 0.9) 100%);
	z-index: 1;
}

.sl-hero::after {
	content: "";
	position: absolute;
	right: -4%;
	top: 6%;
	width: 52%;
	height: 88%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cpolygon points='40,120 380,50 330,120 380,190' fill='%23e6e8eb' fill-opacity='0.06'/%3E%3Cpolygon points='380,280 40,210 90,280 40,350' fill='%238a919b' fill-opacity='0.08'/%3E%3C/svg%3E") no-repeat center / contain;
	z-index: 1;
	pointer-events: none;
}

.sl-hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.sl-hero-title {
	font-size: clamp(2.75rem, 6.5vw, 5.25rem);
	letter-spacing: 0.02em;
	color: var(--sl-gray);
	margin-bottom: 24px;
}

.sl-hero-title::first-line {
	color: var(--sl-paper);
}

.sl-lead {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--sl-silver);
	max-width: 36em;
	margin-bottom: 36px;
}

.sl-spec {
	background: rgba(17, 20, 24, 0.78);
	border: 1px solid var(--sl-steel);
	padding: 28px 30px 12px;
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}

.sl-spec-title {
	font-family: var(--sl-mono);
	font-size: 0.75rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sl-gray);
	margin-bottom: 14px;
}

.sl-spec-title::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--sl-orange);
	margin-right: 10px;
}

.sl-spec-row {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	padding: 15px 0;
	border-top: 1px solid var(--sl-steel);
}

.sl-spec-key {
	font-family: var(--sl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sl-gray);
	padding-top: 3px;
}

.sl-spec-val {
	color: var(--sl-paper);
	font-size: 1rem;
	line-height: 1.45;
}

/* ---------------------------------------------------------------- services */
.sl-card {
	position: relative;
	background: var(--sl-graphite);
	border: 1px solid var(--sl-steel);
	padding: 32px;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
	transition: border-color 0.2s;
}

.sl-card:hover {
	border-color: var(--sl-orange);
}

.sl-icon svg {
	width: 44px;
	height: 44px;
	fill: none;
	stroke: var(--sl-silver);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	display: block;
}

.sl-card h3 {
	font-size: 1.75rem;
	margin: 22px 0 12px;
}

.sl-card p {
	color: var(--sl-muted);
}

.sl-card-list {
	list-style: none;
	margin: 22px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--sl-steel);
}

.sl-card-list li {
	font-family: var(--sl-mono);
	font-size: 0.8125rem;
	letter-spacing: 0.03em;
	color: var(--sl-gray);
	padding: 3px 0;
}

.sl-card-list li::before {
	content: "→ ";
	color: var(--sl-steel);
}

.sl-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	margin-top: 24px;
	padding: 22px 28px;
	border: 1px solid var(--sl-steel);
}

.sl-strip p {
	margin: 0;
	color: var(--sl-muted);
}

.sl-strip strong {
	color: var(--sl-paper);
	font-weight: 600;
}

.sl-strip-label {
	font-family: var(--sl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sl-gray) !important;
}

/* -------------------------------------------------------------- principles */
.sl-principle {
	position: relative;
	border-top: 2px solid var(--sl-ink);
	padding-top: 22px;
}

.sl-principle::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 48px;
	height: 2px;
	background: var(--sl-orange);
}

.sl-principle h3 {
	font-size: 1.625rem;
	margin-bottom: 10px;
}

.sl-principle p {
	color: var(--sl-ink-muted);
}

/* ----------------------------------------------------------------- process */
.sl-step {
	border-left: 1px solid var(--sl-steel);
	padding: 4px 0 4px 24px;
}

.sl-step-num {
	font-family: var(--sl-mono);
	font-size: 0.8rem;
	letter-spacing: 0.2em;
	color: var(--sl-gray);
	margin-bottom: 14px;
}

.sl-step h3 {
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.sl-step p:last-child {
	color: var(--sl-muted);
}

/* --------------------------------------------------------------------- cta */
.sl-cta {
	border-top: 1px solid var(--sl-steel);
}

.sl-cta-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px;
	align-items: center;
}

.sl-cta-inner > * {
	margin: 0;
}

.sl-cta .sl-h2 {
	margin-bottom: 12px;
}

/* ------------------------------------------------------------------ footer */
.sl-footer {
	background: #08090a;
	border-top: 1px solid var(--sl-steel);
	padding: 64px 0 32px;
	color: var(--sl-gray);
}

.sl-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: 48px;
}

.sl-footer-blurb {
	max-width: 28em;
	margin-top: 18px;
	font-size: 0.9375rem;
}

.sl-footer-title {
	font-family: var(--sl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sl-paper);
	margin-bottom: 14px;
}

.sl-footer-col p {
	margin: 0 0 8px;
}

.sl-footer-col a {
	color: var(--sl-gray);
	text-decoration: none;
}

.sl-footer-col a:hover {
	color: var(--sl-paper);
}

.sl-footer-bottom {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid var(--sl-steel);
	font-size: 0.875rem;
	color: #6e757f;
}

/* ------------------------------------------------------------- inner pages */
.sl-page {
	padding-block: clamp(48px, 6vw, 96px);
	min-height: 50vh;
}

.sl-page-title {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	margin-bottom: 32px;
}

.sl-meta {
	font-family: var(--sl-mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sl-gray);
	margin-bottom: 14px;
}

.sl-post {
	padding-block: 28px;
	border-top: 1px solid var(--sl-steel);
}

.sl-post h2 {
	font-size: 1.75rem;
	margin-bottom: 10px;
}

.sl-post h2 a {
	text-decoration: none;
}

.entry-content > * + * {
	margin-top: 1.25em;
}

.entry-content a {
	color: var(--sl-paper);
	text-decoration: underline;
	text-decoration-color: var(--sl-orange);
	text-underline-offset: 3px;
}

.sl-featured {
	margin-bottom: 32px;
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 960px) {
	.sl-hero-grid,
	.sl-cta-inner,
	.sl-footer-grid {
		grid-template-columns: 1fr;
	}

	.sl-hero-grid {
		gap: 48px;
	}

	.sl-hero::after {
		display: none;
	}

	.sl-grid-3 {
		grid-template-columns: 1fr;
	}

	.sl-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 782px) {
	.sl-tagline,
	.sl-header-cta {
		display: none;
	}

	.sl-header-right {
		gap: 0;
	}
}

@media (max-width: 560px) {
	.sl-grid-4 {
		grid-template-columns: 1fr;
	}

	.sl-spec-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.sl-wordmark,
	.sl-wordmark a {
		font-size: 1.5rem;
	}
}

/* ------------------------------------------------------- inner pages (v1.1) */
.sl-more {
	margin-top: 32px;
}

.sl-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 8vw, 104px);
	border-bottom: 1px solid var(--sl-steel);
}

.sl-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, rgba(11, 12, 14, 0.94) 0%, rgba(11, 12, 14, 0.6) 60%, rgba(11, 12, 14, 0.9) 100%);
	z-index: 1;
}

.sl-page-hero-inner {
	position: relative;
	z-index: 2;
}

.sl-page-hero-title {
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	letter-spacing: 0.02em;
	margin: 0 0 20px;
}

.sl-page-hero--simple {
	padding-block: clamp(40px, 6vw, 72px);
}

.sl-page-hero--simple .sl-page-hero-title {
	margin: 0;
}

.sl-page-hero .sl-lead {
	margin-bottom: 0;
}

.sl-split {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.sl-split > * {
	margin: 0;
}

.sl-body-copy {
	margin-bottom: 18px;
	max-width: 38em;
	font-size: 1.125rem;
}

.sl-service .sl-icon {
	margin-bottom: 22px;
}

.sl-service-cta {
	margin-top: 28px;
}

.sl-panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sl-panel-list li {
	padding: 12px 0;
	border-top: 1px solid var(--sl-steel);
	color: var(--sl-paper);
	font-size: 1rem;
	line-height: 1.45;
}

.sl-panel-list li::before {
	content: "→ ";
	color: var(--sl-gray);
	font-family: var(--sl-mono);
}

.sl-spec-title--spaced {
	margin-top: 26px;
}

.sl-spec .sl-spec-val strong {
	font-weight: 600;
}

.sl-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

.sl-contact-grid > * {
	margin: 0;
}

.sl-form-title {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	margin-bottom: 24px;
}

/* Form plugins (WPForms, Fluent Forms, Contact Form 7...) inside the contact page */
.sl-form-content label,
.sl-form-content .wpforms-field-label {
	display: block;
	font-family: var(--sl-mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sl-gray);
	margin-bottom: 8px;
}

.sl-form-content input[type="text"],
.sl-form-content input[type="email"],
.sl-form-content input[type="tel"],
.sl-form-content input[type="url"],
.sl-form-content input[type="number"],
.sl-form-content select,
.sl-form-content textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	background: var(--sl-graphite);
	border: 1px solid var(--sl-steel);
	border-radius: 0;
	color: var(--sl-paper);
	font-family: var(--sl-body);
	font-size: 1rem;
	padding: 14px 16px;
	margin-bottom: 20px;
}

.sl-form-content input:focus,
.sl-form-content select:focus,
.sl-form-content textarea:focus {
	outline: 2px solid var(--sl-orange);
	outline-offset: 0;
}

.sl-form-content button[type="submit"],
.sl-form-content input[type="submit"] {
	background: var(--sl-orange);
	color: var(--sl-black);
	border: 0;
	border-radius: 0;
	font-family: var(--sl-display);
	font-weight: 700;
	font-size: 0.95rem;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 15px 28px;
	cursor: pointer;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.sl-form-content button[type="submit"]:hover,
.sl-form-content input[type="submit"]:hover {
	background: #ff8444;
}

@media (max-width: 960px) {
	.sl-split,
	.sl-contact-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

/* ----------------------------------------------------------- projects (v1.2) */
.wp-block-image {
	margin: 0;
}

.sl-split--media {
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
}

.sl-feature-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 1px solid var(--sl-steel);
}

.sl-split--media .sl-spec {
	margin-bottom: 8px;
}

.sl-project {
	background: var(--sl-graphite);
	border: 1px solid var(--sl-steel);
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
	transition: border-color 0.2s;
	display: flex;
	flex-direction: column;
}

.sl-project:hover {
	border-color: var(--sl-orange);
}

.sl-project > * {
	margin: 0;
}

.sl-project-img img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-bottom: 1px solid var(--sl-steel);
}

.sl-project-body {
	padding: 24px 28px 28px;
}

.sl-project-cat {
	font-family: var(--sl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sl-gray);
	margin-bottom: 10px;
}

.sl-project h3 {
	font-size: 1.5rem;
	margin-bottom: 10px;
}

.sl-project p {
	color: var(--sl-muted);
}

.sl-tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
}

.sl-tags li {
	font-family: var(--sl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: var(--sl-gray);
	border: 1px solid var(--sl-steel);
	padding: 4px 10px;
}

@media (max-width: 960px) {
	.sl-split--media {
		grid-template-columns: 1fr;
	}
}

.sl-split-copy .sl-section-intro {
	margin-bottom: 28px;
}

/* ------------------------------------------------------------ service area (v1.3) */
.sl-footer-area {
	margin-top: 14px;
	font-family: var(--sl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--sl-gray);
}

.sl-panel-text {
	color: var(--sl-paper);
	line-height: 1.5;
}

.sl-panel-text strong {
	font-weight: 600;
}

.sl-area-label {
	font-family: var(--sl-mono);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sl-gray);
	margin-bottom: 10px;
}

.sl-area h3 {
	font-size: 1.625rem;
	margin-bottom: 8px;
}

.sl-area p:last-child {
	color: var(--sl-muted);
}

.sl-section--black .sl-area {
	border-top-color: var(--sl-steel);
}