/*
 * Hades Construction — sector / service landing pages.
 *
 * Matches the design language already established on /services/ and
 * /about-hades/: Playfair Display headings, Outfit body copy, near-black
 * ground, single blue accent.
 */

.hx {
	--hx-bg: #111;
	--hx-bg-alt: #0f1114;
	--hx-card: #161819;
	--hx-line: #232629;
	--hx-blue: #5bb8e8;
	--hx-blue-dim: rgba(91, 184, 232, 0.18);
	--hx-yellow: #e8d44d;
	--hx-light: #ccc;
	--hx-mid: #999;
	--hx-white: #fff;
	--hx-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--hx-body: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;

	font-family: var(--hx-body);
	color: var(--hx-light);
	font-size: 15px;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}

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

.hx section {
	padding: 70px 24px;
	background: var(--hx-bg);
}

.hx section.hx-alt {
	background: var(--hx-bg-alt);
}

.hx .hx-wrap {
	max-width: 1080px;
	margin: 0 auto;
}

.hx .hx-narrow {
	max-width: 780px;
	margin: 0 auto;
}

/* ---------- Typography ---------- */

/* The Archi theme uppercases h2/h3 sitewide. That reads well on one-word
   section labels and badly on full-sentence headings, so it is reset here. */

.hx h1,
.hx h2,
.hx h3 {
	font-family: var(--hx-display);
	color: var(--hx-white);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.2px;
}

/* The homepage section heading is the page's single h1, so it is sized to
   match the section headings around it rather than the theme's hero h1. */
.hx h1,
.hx h2 {
	font-size: 32px;
	line-height: 1.25;
	margin: 0 0 6px;
}

.hx h3 {
	font-size: 21px;
	line-height: 1.35;
	margin: 0 0 10px;
}

.hx h4 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--hx-blue);
	font-weight: 600;
	margin: 0 0 12px;
}

.hx p {
	margin: 0 0 16px;
	color: var(--hx-light);
}

.hx p:last-child {
	margin-bottom: 0;
}

.hx .hx-lead {
	font-size: 17px;
	line-height: 1.75;
	color: var(--hx-light);
}

.hx .hx-muted {
	color: var(--hx-mid);
	font-size: 14px;
}

.hx .hx-rule {
	width: 54px;
	height: 2px;
	background: var(--hx-blue);
	margin: 18px 0 26px;
	border: 0;
}

.hx .hx-center {
	text-align: center;
}

.hx .hx-center .hx-rule {
	margin-left: auto;
	margin-right: auto;
}

.hx a {
	color: var(--hx-blue);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.hx a:hover,
.hx a:focus {
	color: var(--hx-white);
	border-bottom-color: var(--hx-blue);
}

/* ---------- Hero ---------- */

.hx .hx-hero {
	padding-top: 60px;
	padding-bottom: 56px;
}

.hx .hx-hero .hx-lead {
	font-size: 18px;
	max-width: 760px;
}

.hx .hx-eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 3.5px;
	color: var(--hx-blue);
	font-weight: 600;
	display: block;
	margin-bottom: 16px;
}

/* ---------- Buttons ---------- */

.hx .hx-actions {
	margin-top: 28px;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.hx .hx-center .hx-actions {
	justify-content: center;
}

.hx .hx-btn {
	display: inline-block;
	padding: 14px 30px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	border: 1px solid var(--hx-blue);
	color: var(--hx-blue);
	background: transparent;
	border-radius: 2px;
	transition: background 0.28s ease, color 0.28s ease;
}

.hx .hx-btn:hover,
.hx .hx-btn:focus {
	background: var(--hx-blue);
	color: #0d0f11;
	border-bottom-color: var(--hx-blue);
}

.hx .hx-btn-solid {
	background: var(--hx-blue);
	color: #0d0f11;
}

.hx .hx-btn-solid:hover,
.hx .hx-btn-solid:focus {
	background: transparent;
	color: var(--hx-blue);
}

/* ---------- Trust strip ---------- */

.hx .hx-trust {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1px;
	background: var(--hx-line);
	border: 1px solid var(--hx-line);
}

.hx .hx-trust div {
	background: var(--hx-bg);
	padding: 24px 22px;
}

.hx .hx-trust strong {
	display: block;
	font-family: var(--hx-display);
	font-size: 18px;
	color: var(--hx-white);
	font-weight: 400;
	margin-bottom: 6px;
}

.hx .hx-trust span {
	font-size: 13.5px;
	color: var(--hx-mid);
	line-height: 1.65;
}

/* ---------- Cards ---------- */

.hx .hx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 22px;
	margin-top: 30px;
}

.hx .hx-card {
	background: var(--hx-card);
	border: 1px solid var(--hx-line);
	padding: 28px 26px;
	border-radius: 3px;
	transition: border-color 0.3s ease, transform 0.3s ease;
}

.hx .hx-card:hover {
	border-color: var(--hx-blue-dim);
	transform: translateY(-3px);
}

.hx .hx-card p {
	font-size: 14px;
	color: var(--hx-mid);
	line-height: 1.75;
}

/* ---------- Lists ---------- */

.hx ul.hx-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hx ul.hx-list li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 11px;
	font-size: 14.5px;
	color: var(--hx-light);
	line-height: 1.7;
}

.hx ul.hx-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 6px;
	height: 6px;
	background: var(--hx-blue);
	border-radius: 50%;
}

.hx .hx-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 22px 40px;
	margin-top: 26px;
}

/* ---------- Process ---------- */

.hx ol.hx-steps {
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
	counter-reset: hxstep;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 22px;
}

.hx ol.hx-steps li {
	counter-increment: hxstep;
	background: var(--hx-card);
	border: 1px solid var(--hx-line);
	border-top: 2px solid var(--hx-blue);
	padding: 24px 22px;
	border-radius: 3px;
}

.hx ol.hx-steps li::before {
	content: '0' counter(hxstep);
	display: block;
	font-family: var(--hx-display);
	font-size: 15px;
	color: var(--hx-blue);
	margin-bottom: 10px;
	letter-spacing: 1px;
}

.hx ol.hx-steps strong {
	display: block;
	color: var(--hx-white);
	font-size: 15px;
	font-weight: 500;
	margin-bottom: 7px;
}

.hx ol.hx-steps span {
	font-size: 13.5px;
	color: var(--hx-mid);
	line-height: 1.7;
}

/* ---------- Projects ---------- */

.hx .hx-projects {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
	margin-top: 30px;
}

.hx .hx-project {
	background: var(--hx-card);
	border: 1px solid var(--hx-line);
	padding: 24px 22px;
	border-radius: 3px;
}

.hx .hx-project h3 {
	font-size: 18px;
	margin-bottom: 4px;
}

.hx .hx-project .hx-meta {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hx-blue);
	margin-bottom: 12px;
	display: block;
}

.hx .hx-project p {
	font-size: 13.5px;
	color: var(--hx-mid);
	margin-bottom: 14px;
}

/* ---------- Quote ---------- */

.hx blockquote.hx-quote {
	margin: 30px 0 0;
	padding: 28px 30px;
	background: var(--hx-card);
	border-left: 2px solid var(--hx-blue);
	border-radius: 0 3px 3px 0;
}

.hx blockquote.hx-quote p {
	font-family: var(--hx-display);
	font-size: 18px;
	line-height: 1.65;
	color: var(--hx-light);
	font-style: italic;
	margin-bottom: 14px;
}

.hx blockquote.hx-quote cite {
	font-style: normal;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hx-mid);
}

/* ---------- FAQ ---------- */

.hx .hx-faq {
	margin-top: 30px;
	border-top: 1px solid var(--hx-line);
}

.hx .hx-faq > div {
	border-bottom: 1px solid var(--hx-line);
	padding: 24px 0;
}

.hx .hx-faq h3 {
	font-size: 17px;
	margin-bottom: 8px;
}

.hx .hx-faq p {
	font-size: 14.5px;
	color: var(--hx-mid);
	margin-bottom: 0;
}

/* ---------- Related links ---------- */

.hx .hx-related {
	margin-top: 26px;
	font-size: 14.5px;
	color: var(--hx-mid);
	line-height: 2;
}

.hx .hx-related strong {
	color: var(--hx-white);
	font-weight: 500;
}

/* ---------- Final CTA ---------- */

.hx .hx-cta {
	background: var(--hx-bg-alt);
	border-top: 1px solid var(--hx-line);
	text-align: center;
}

.hx .hx-cta h2 {
	margin-bottom: 4px;
}

.hx .hx-cta p {
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
}

.hx .hx-callline {
	margin-top: 22px;
	font-size: 14px;
	color: var(--hx-mid);
}

.hx .hx-callline a {
	font-size: 17px;
	font-family: var(--hx-display);
}

/* =====================================================================
 * Projects index (/projects/)
 *
 * The grid is an Isotope masonry. Because each thumbnail kept its own
 * aspect ratio the tiles came out at slightly different heights, so
 * masonry staggered them and left holes in the grid. Rather than replace
 * the layout engine — which would break the category filters — every tile
 * is given the same aspect ratio, and masonry then produces clean rows on
 * its own.
 * ================================================================== */

body.page-id-76 {
	--hx-line: #232629;
	--hx-blue: #5bb8e8;
	--hx-white: #fff;
	--hx-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--hx-body: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body.page-id-76 .de-gallery .item .picframe-new,
body.page-id-76 .de-gallery .item .picframe-new > a {
	display: block;
	position: relative;
	overflow: hidden;
}

body.page-id-76 .de-gallery .item img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.6s ease;
}

body.page-id-76 .de-gallery .item:hover img {
	transform: scale(1.04);
}

/* Project names were only readable on hover. They now sit permanently in a
   gradient along the bottom of each tile, so the grid can be scanned. */

body.page-id-76 .de-gallery .item .mask {
	background: linear-gradient(180deg, rgba(10, 11, 12, 0) 45%, rgba(10, 11, 12, 0.88) 100%) !important;
	opacity: 1 !important;
	transition: background 0.35s ease;
}

body.page-id-76 .de-gallery .item:hover .mask {
	background: linear-gradient(180deg, rgba(10, 11, 12, 0.25) 0%, rgba(10, 11, 12, 0.92) 100%) !important;
}

body.page-id-76 .de-gallery .item .pr_text {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	top: auto !important;
	width: auto !important;
	height: auto !important;
	padding: 16px 20px 18px !important;
	margin: 0 !important;
	text-align: left;
	transform: none !important;
}

body.page-id-76 .de-gallery .item .project-name {
	/* The theme hides the name until hover and positions it absolutely,
	   which pushed it out of the tile once the caption moved to the
	   bottom. It flows normally here and stays visible. */
	opacity: 1 !important;
	position: static !important;
	top: auto !important;
	left: auto !important;
	transform: none !important;
	margin: 0 !important;
	font-family: var(--hx-display);
	font-size: 19px;
	line-height: 1.25;
	color: var(--hx-white);
	text-transform: none;
	letter-spacing: 0.2px;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* ---------- Category filter ---------- */

body.page-id-76 .de-gallery-filter,
body.page-id-76 .gallery-filter {
	border-bottom: 1px solid var(--hx-line);
	padding-bottom: 22px;
}

/* ---------- Closing call to action ---------- */

body.page-id-76 .call-to-action.bg-color {
	background: #0f1114 !important;
	border-top: 1px solid var(--hx-line);
}

body.page-id-76 .call-to-action a {
	display: inline-block;
	font-family: var(--hx-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	padding: 15px 34px;
	border: 1px solid var(--hx-blue);
	border-radius: 2px;
	background: var(--hx-blue);
	color: #0d0f11 !important;
	transition: background 0.28s ease, color 0.28s ease;
}

body.page-id-76 .call-to-action a:hover {
	background: transparent;
	color: var(--hx-blue) !important;
}

@media (max-width: 600px) {

	body.page-id-76 .de-gallery .item .pr_text {
		padding: 12px 14px;
	}

	body.page-id-76 .de-gallery .item .project-name {
		font-size: 16px;
	}
}

/* =====================================================================
 * Project case-study pages (body.single-portfolio)
 *
 * The Archi portfolio layout was drawn for the small AJAX popup on
 * /projects/: one narrow stack of images in a 2/3 column and a short meta
 * block in a 1/3 column. At full page width that leaves the photography
 * small and a large dead gap down the right-hand side. These rules only
 * apply to the standalone page — the popup markup is unaffected because it
 * never carries the single-portfolio body class.
 * ================================================================== */

body.single-portfolio {
	--hx-bg: #111;
	--hx-card: #161819;
	--hx-line: #232629;
	--hx-blue: #5bb8e8;
	--hx-mid: #999;
	--hx-white: #fff;
	--hx-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--hx-body: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ---------- Hero band ---------- */

body.single-portfolio #subheader {
	position: relative;
	background-size: cover !important;
	background-position: 50% 50% !important;
	padding: 120px 0 96px;
}

body.single-portfolio #subheader::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(10, 11, 12, 0.62) 0%, rgba(10, 11, 12, 0.88) 100%);
	z-index: 0;
}

body.single-portfolio #subheader > .container {
	position: relative;
	z-index: 1;
}

body.single-portfolio #subheader h1 {
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

/* ---------- Prev / all / next strip ---------- */

body.single-portfolio .left-right-portfolio,
body.single-portfolio .center-portfolio {
	background: var(--hx-card) !important;
	border-top: 1px solid var(--hx-line);
	border-bottom: 1px solid var(--hx-line);
	transition: background 0.25s ease;
}

body.single-portfolio .left-right-portfolio:hover,
body.single-portfolio .center-portfolio:hover {
	background: #1c1f21 !important;
}

body.single-portfolio .portfolio-icon,
body.single-portfolio .portfolio-icon a,
body.single-portfolio .portfolio-icon i {
	color: var(--hx-mid) !important;
	transition: color 0.25s ease;
}

body.single-portfolio .portfolio-icon a:hover,
body.single-portfolio .portfolio-icon a:hover i {
	color: var(--hx-blue) !important;
}

/* ---------- Two-column case-study layout ---------- */

body.single-portfolio .wpb-content-wrapper .container {
	max-width: 1340px;
	width: 100%;
}

body.single-portfolio .wpb-content-wrapper .container > .row {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: 48px;
	/* Columns stretch so the facts panel has room to travel while the
	   photography scrolls past it. align-items:start would collapse it. */
	align-items: stretch;
	margin: 0;
	padding: 64px 0 24px;
}

body.single-portfolio .wpb-content-wrapper .container > .row::before,
body.single-portfolio .wpb-content-wrapper .container > .row::after {
	display: none;
}

body.single-portfolio .wpb-content-wrapper .vc_column-inner {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

body.single-portfolio .wpb-content-wrapper .vc_col-sm-8,
body.single-portfolio .wpb-content-wrapper .vc_col-sm-4 {
	width: 100% !important;
	float: none !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ---------- Photography grid ---------- */

body.single-portfolio .vc_col-sm-8 > .vc_column-inner > .wpb_wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

body.single-portfolio .vc_col-sm-8 .wpb_single_image {
	margin: 0 !important;
	min-width: 0;
}

/* The opening shot runs full width, the rest pair up. */
body.single-portfolio .vc_col-sm-8 .wpb_single_image:first-child {
	grid-column: 1 / -1;
}

body.single-portfolio .vc_col-sm-8 .wpb_single_image figure,
body.single-portfolio .vc_col-sm-8 .vc_single_image-wrapper {
	display: block;
	height: 100%;
	margin: 0;
}

body.single-portfolio .vc_col-sm-8 .wpb_single_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 2px;
	background: var(--hx-card);
}

body.single-portfolio .vc_col-sm-8 .wpb_single_image:first-child img {
	aspect-ratio: 16 / 9;
}

body.single-portfolio .vc_col-sm-8 .wpb_single_image:not(:first-child) img {
	aspect-ratio: 4 / 3;
}

/* A lone trailing image shouldn't sit half-width against empty space. */
body.single-portfolio .vc_col-sm-8 .wpb_single_image:last-child:nth-child(even) {
	grid-column: 1 / -1;
}

body.single-portfolio .vc_col-sm-8 .wpb_single_image:last-child:nth-child(even) img {
	aspect-ratio: 16 / 9;
}

/* ---------- Sticky project facts ---------- */

body.single-portfolio .vc_col-sm-4 > .vc_column-inner {
	position: sticky;
	top: 104px;
	align-self: start;
}

body.single-portfolio .vc_col-sm-4 .project-info h2 {
	font-family: var(--hx-display);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 400;
	color: var(--hx-white);
	text-transform: none;
	letter-spacing: 0.2px;
	margin: 0 0 20px;
}

body.single-portfolio .vc_col-sm-4 .details {
	border-top: 1px solid var(--hx-line);
	margin-bottom: 24px;
	background: none;
	padding: 0;
}

body.single-portfolio .vc_col-sm-4 .details > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hx-line);
}

body.single-portfolio .vc_col-sm-4 .details > div > .title {
	font-family: var(--hx-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--hx-blue);
	flex: 0 0 auto;
}

body.single-portfolio .vc_col-sm-4 .details > div > .val {
	font-family: var(--hx-body);
	font-size: 14px;
	color: var(--hx-white);
	text-align: right;
	font-weight: 400;
}

body.single-portfolio .vc_col-sm-4 .wpb_text_column p {
	font-family: var(--hx-body);
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--hx-mid);
}

/* ---------- Closing CTA sits full width ---------- */

body.single-portfolio .hx .hx-cta {
	margin-top: 40px;
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {

	body.single-portfolio #subheader {
		padding: 80px 0 60px;
	}

	body.single-portfolio .wpb-content-wrapper .container > .row {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 36px 0 16px;
	}

	body.single-portfolio .vc_col-sm-4 > .vc_column-inner {
		position: static;
	}

	body.single-portfolio .vc_col-sm-8 > .vc_column-inner > .wpb_wrapper {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	body.single-portfolio .vc_col-sm-8 .wpb_single_image img,
	body.single-portfolio .vc_col-sm-8 .wpb_single_image:first-child img {
		aspect-ratio: 4 / 3;
	}
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {

	.hx {
		font-size: 14.5px;
	}

	.hx section {
		padding: 48px 18px;
	}

	.hx h2 {
		font-size: 25px;
	}

	.hx .hx-hero .hx-lead {
		font-size: 16px;
	}

	.hx .hx-actions .hx-btn {
		width: 100%;
		text-align: center;
	}

	.hx blockquote.hx-quote {
		padding: 22px 20px;
	}

	.hx blockquote.hx-quote p {
		font-size: 16px;
	}
}