/*=====================================================================
	HIGHTEK URJA — ADDITIVE BRAND LAYER
	---------------------------------------------------------------
	Loaded AFTER style.css and the brand skin.

	This file only ADDS the handful of components the Industro theme
	does not already ship. It does NOT touch Industro's grid,
	container widths, typography scale, button sizing, breakpoints,
	header, footer or existing component styles.

	Palette is taken from the HIGHTEK URJA logo.

	CONTENTS
	  01  Tokens
	  02  Brand rule (logo tricolour device)
	  03  Hero
	  04  Approach points
	  05  Resource-recovery transformation
	  06  Quality pillars
	  07  Scroll reveal
	  08  Contact page
	  09  Utilities
	  10  Responsive
=====================================================================*/

/*---------------------------------------------------------------
	01. TOKENS
----------------------------------------------------------------*/
:root {
	--ht-orange: #F58634;
	--ht-green: #00A859;
	--ht-grey-light: #D2D3D5;
	--ht-hairline: #E4E5E7;
}

/*---------------------------------------------------------------
	02. BRAND RULE — the tricolour device from the logo
----------------------------------------------------------------*/
.ht-rule {
	display: block;
	width: 88px;
	height: 4px;
	margin: 20px 0 0;
	background: linear-gradient(
		to right,
		var(--ht-orange) 0 33.33%,
		var(--ht-grey-light) 33.33% 66.66%,
		var(--ht-green) 66.66% 100%
	);
}

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

/*---------------------------------------------------------------
	03. HERO
	This site uses header-style-4, which sits OVER the page rather
	than above it (correct for the home page's full-screen slider).
	Inner pages must therefore reserve the header's height — the
	theme does the same thing itself at <=991px.
----------------------------------------------------------------*/
.ht-hero {
	height: auto;
	padding-top: 260px;
	padding-bottom: 80px;
}

.ht-hero .wt-bnr-inr-entry {
	text-align: center;
}

.ht-hero h1 {
	max-width: 900px;
	margin: 0 auto 22px;
	color: #fff;
	font-size: 58px;
	line-height: 1.08;
}

.ht-hero .ht-rule {
	margin: 26px auto 30px;
}

.ht-hero .wt-breadcrumb {
	margin-top: 30px;
}

/*---------------------------------------------------------------
	04. APPROACH POINTS
----------------------------------------------------------------*/
.ht-point {
	display: flex;
	gap: 20px;
	padding: 22px 0;
	border-bottom: 1px solid var(--ht-hairline);
}

.ht-point:last-child {
	border-bottom: 0;
}

.ht-point-num {
	flex: 0 0 auto;
	width: 46px;
	color: var(--ht-orange);
	font-family: 'Teko', sans-serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
}

.ht-point h4 {
	margin-bottom: 6px;
}

.ht-point p {
	margin-bottom: 0;
}

/*---------------------------------------------------------------
	05. RESOURCE RECOVERY — the transformation diagram
----------------------------------------------------------------*/
.ht-transform {
	position: relative;
	z-index: 1;
}

.ht-transform-tier {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 18px;
}

.ht-transform-item {
	flex: 0 1 300px;
	padding: 26px 24px;
	text-align: center;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .14);
}

.ht-transform-item .ht-transform-kicker {
	display: block;
	margin-bottom: 6px;
	color: rgba(255, 255, 255, .5);
	font-family: 'Teko', sans-serif;
	font-size: 14px;
	letter-spacing: 2.4px;
	line-height: 1;
	text-transform: uppercase;
}

.ht-transform-item h4 {
	margin-bottom: 0;
	color: #fff;
}

/* input tier */
.ht-transform-item.is-input {
	border-top: 3px solid var(--ht-orange);
}

/* process tier */
.ht-transform-item.is-process {
	flex: 0 1 640px;
	background: #fff;
	border: 0;
}

.ht-transform-item.is-process .ht-transform-kicker {
    color: rgba(0, 0, 0, 0.75);
}
.ht-transform-item.is-process .title-style-2 {
    color: #1e1e1e;
}

/* output tier */
.ht-transform-item.is-output {
	border-top: 3px solid var(--ht-green);
}

.ht-transform-plus,
.ht-transform-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ht-orange);
	font-family: 'Teko', sans-serif;
	font-weight: 500;
	line-height: 1;
}

.ht-transform-plus {
	flex: 0 0 auto;
	font-size: 30px;
}

.ht-transform-arrow {
	padding: 18px 0;
	font-size: 28px;
}

/*---------------------------------------------------------------
	06. QUALITY PILLARS
----------------------------------------------------------------*/
.ht-pillar {
	height: 100%;
	padding: 30px 26px;
	background: rgba(255, 255, 255, .05);
	border-left: 3px solid var(--ht-orange);
}

.ht-pillar .ht-pillar-num {
	display: block;
	margin-bottom: 10px;
	color: rgba(255, 255, 255, .28);
	font-family: 'Teko', sans-serif;
	font-size: 34px;
	font-weight: 600;
	line-height: 1;
}

.ht-pillar h4 {
	color: #fff;
}

/*---------------------------------------------------------------
	07. SCROLL REVEAL
	Progressive enhancement. Without JS, or with reduced motion,
	everything stays fully visible — see js/hightek.js.
----------------------------------------------------------------*/
.ht-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s cubic-bezier(.2, .7, .3, 1),
				transform .7s cubic-bezier(.2, .7, .3, 1);
	will-change: opacity, transform;
}

.ht-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.ht-reveal,
	.ht-reveal.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/*---------------------------------------------------------------
	08. CONTACT PAGE
	The theme's contact-1.html uses .gmap-outline, but this copy of
	style.css carries no rule for it, so the iframe would collapse to
	its 300x150 default. The rest is form affordances the theme does
	not ship: field labels and the info-panel link colour.
----------------------------------------------------------------*/

/* --- map --- */
.ht-map {
	position: relative;
	overflow: hidden;
	border: 8px solid #fff;
	box-shadow: 0 0 30px rgba(0, 0, 0, .18);
	line-height: 0;
}

.ht-map iframe {
	display: block;
	width: 100%;
	height: 430px;
	border: 0;
}

/* --- field labels --- */
.ht-label {
	display: block;
	margin-bottom: 7px;
	color: var(--ht-charcoal, #23272B);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 1.2px;
	line-height: 1;
	text-transform: uppercase;
}

/* --- linked phone / email inside the dark info panel --- */
.ht-info-link {
	color: #fff;
}

.ht-info-link:hover,
.ht-info-link:focus {
	color: var(--ht-orange);
}

/*---------------------------------------------------------------
	09. UTILITIES
----------------------------------------------------------------*/
.ht-lead {
	font-size: 16px;
	line-height: 1.8;
}

.contact-one {
    margin-bottom: 70px;
}

/*---------------------------------------------------------------
	10. RESPONSIVE
	Industro's own breakpoints are preserved; these only relax the
	additions above so nothing can overflow horizontally.
----------------------------------------------------------------*/
@media only screen and (max-width: 1199px) {
	.ht-hero h1 {
		font-size: 48px;
	}
}

@media only screen and (max-width: 991px) {
	.ht-hero {
		padding-top: 190px;
		padding-bottom: 50px;
	}

	.ht-hero h1 {
		font-size: 40px;
	}

	.ht-transform-item.is-process {
		flex: 0 1 100%;
	}
}

@media only screen and (max-width: 767px) {
	.ht-hero {
		padding-top: 200px;
		padding-bottom: 40px;
	}

	.ht-hero h1 {
		font-size: 32px;
	}

	.ht-transform-item {
		flex: 0 1 100%;
		padding: 22px 18px;
	}

	.ht-point {
		gap: 14px;
	}

	.ht-point-num {
		width: 38px;
		font-size: 28px;
	}

	.ht-pillar {
		padding: 26px 20px;
	}
    .contact-one {
        margin-bottom: 50px;
    }
}



/*=====================================================================
	WEBP DELIVERY
	---------------------------------------------------------------
	Photographs are wrapped in <picture> so a WebP <source> can be
	offered with the original JPEG/PNG left on the <img> as fallback.

	display:contents removes the wrapper from layout, so the <img>
	still participates in its parent's flex/grid box exactly as it did
	before and every existing descendant rule ("... img") keeps
	matching.

	Descendant rules are fine; DIRECT-CHILD rules are not, because the
	<picture> now sits in between. style.css §29 sizes .wt-media>img on
	mobile, so that one selector is restated here to reach through the
	wrapper. If another "> img" rule is ever added upstream, it needs
	the same treatment.
=====================================================================*/
picture { display: contents; }

@media only screen and (max-width: 768px) {
	.wt-media > picture > img,
	.wt-media a > picture > img {
		width: 100%;
	}
}