/* ==========================================================================
   HIGHTEK URJA — HOMEPAGE (demo.blade.php)
   --------------------------------------------------------------------------
   Self-contained stylesheet for the Hightek Urja homepage.

   This page deliberately does NOT load the Industro theme chain
   (bootstrap.min.css + style.css + skin-2.css ≈ 570KB) because the design
   here overrides essentially all of it. Loading it only to fight it would
   cost bandwidth and create specificity churn. Everything below is written
   from scratch against the brand palette.

   Naming: hk- prefix (HighteK) so nothing can collide with the theme's
   wt-/site-/section- classes if the two are ever loaded together.

   CONTENTS
     01  Tokens
     02  Reset & base
     03  Layout primitives
     04  Typography helpers
     05  Buttons
     06  Header + navigation
     07  Hero
     08  About
     09  Products (datasheet panels — signature component)
     10  Process rail
     11  Industries grid
     12  Why choose us
     13  Quality
     14  Sustainability flow
     15  Applications
     16  Global / B2B
     17  Final CTA
     18  Footer
     19  Reveal animation
     20  Reduced motion & print
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Surfaces */
	--hk-ink-900: #0B0D0C;   /* primary background          */
	--hk-ink-800: #121615;   /* secondary dark              */
	--hk-ink-700: #171C1A;   /* raised surface on dark      */
	--hk-paper:   #fff8f4;   /* light section               */
	--hk-white:   #FFFFFF;

	/* Text */
	--hk-ink:      #151815;                 /* dark text on light        */
	--hk-ink-soft: #4A524B;                 /* muted dark text           */
	--hk-on-dark:      rgba(255, 255, 255, .68);
	--hk-on-dark-dim:  rgba(255, 255, 255, .46);

	/* Accent — the orange taken from the HIGHTEK URJA logo.
	   It reads 7.65:1 on #0B0D0C, so it is safe anywhere on the dark
	   surfaces. It is NOT safe on the light #F4F5F1 sections (2.29:1), and
	   a hover state needs a value that differs from the base — hence the
	   four steps below. Change --hk-accent to re-brand; the other three
	   are derived from it and must move with it. */
	--hk-accent:        #f58634;  /* base — dark surfaces, fills, icons on dark */
	--hk-accent-bright: #f58634;  /* hover/active — must differ from the base   */
	--hk-accent-deep:   #f58634;  /* icons on light surfaces  (4.45:1, >=3)     */
	--hk-accent-ink:    #f58634;  /* small TEXT on light      (5.18:1, >=4.5)   */
	--hk-accent-rgb:    245, 134, 52;   /* keep in sync with --hk-accent */

	/* Hairlines */
	--hk-hair-dark:  rgba(255, 255, 255, .11);
	--hk-hair-dark2: rgba(255, 255, 255, .18);
	--hk-hair-light: rgba(21, 24, 21, .12);

	/* Type */
	--hk-display: 'Archivo', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--hk-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	/* Motion */
	--hk-ease: cubic-bezier(.22, .68, .28, 1);

	/* Metrics */
	--hk-wrap: 1440px;
	--hk-gutter: clamp(20px, 4vw, 64px);
	--hk-header-h: 120px;
}


/* --------------------------------------------------------------------------
   02. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* Photographs are wrapped in <picture> so a WebP source can be offered with
   the original JPEG/PNG as fallback. The wrapper must not become a box of
   its own, or it would sit between the image and the flex/grid parent that
   is sizing it — display:contents removes it from layout entirely, leaving
   every existing ".hk-… img" rule matching exactly as before. */
picture { display: contents; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.hk {
	margin: 0;
	background: var(--hk-ink-900);
	color: var(--hk-on-dark);
	font-family: var(--hk-display);
	font-size: 16px;
	line-height: 1.65;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip, not hidden: `hidden` on <body> propagates to the viewport and
	   turns it into a scroll container, which breaks scroll position
	   reporting and IntersectionObserver. `clip` contains full-bleed art
	   without that side effect. */
	overflow-x: clip;
}

/* Element resets are wrapped in :where() so they carry ZERO specificity.
   Written as `.hk h1` they would score (0,1,1) and silently beat every
   single-class component rule below — collapsing component margins and
   overriding button colours. :where() keeps them as true defaults. */
:where(.hk) :where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--hk-display);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--hk-white);
}

:where(.hk) :where(p) { margin: 0; }
:where(.hk) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.hk) :where(dl, dd) { margin: 0; }
:where(.hk) :where(a) { color: inherit; text-decoration: none; }
:where(.hk) :where(img, svg) { max-width: 100%; display: block; }
:where(.hk) :where(button) { font: inherit; color: inherit; background: none; border: 0; }

.hk ::selection { background: var(--hk-accent); color: #08110A; }

/* One focus treatment for the whole page. */
.hk :focus-visible {
	outline: 2px solid var(--hk-accent-bright);
	outline-offset: 3px;
	border-radius: 1px;
}

.hk-skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 2000;
	padding: 12px 20px;
	background: var(--hk-accent);
	color: #08110A;
	font-weight: 700;
	font-size: 14px;
	transition: top .2s var(--hk-ease);
}
.hk-skip:focus { top: 16px; }

.hk-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}


/* --------------------------------------------------------------------------
   03. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.hk-wrap {
	width: 100%;
	max-width: var(--hk-wrap);
	margin: 0 auto;
	padding-inline: var(--hk-gutter);
}

/* Single source of section rhythm. Modifiers follow, same specificity. */
.hk-sec { padding-block: clamp(64px, 8vw, 100px); position: relative; }
.hk-sec--tight { padding-block: clamp(52px, 6vw, 92px); }
.hk-sec--flush { padding-block: 0; }

.hk-dark  { background: var(--hk-ink-900); }
.hk-dark2 { background: var(--hk-ink-800); }
.hk-light { background: var(--hk-paper); color: var(--hk-ink-soft); }

.hk-light h1, .hk-light h2, .hk-light h3,
.hk-light h4, .hk-light h5, .hk-light h6 { color: var(--hk-ink); }

/* Anchor offset so sticky header never covers a section heading. */
.hk [id] { scroll-margin-top: calc(var(--hk-header-h) + 16px); }

.hk-grid2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 5vw, 76px);
	align-items: center;
}
@media (max-width: 900px) { .hk-grid2 { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   04. TYPOGRAPHY HELPERS
   -------------------------------------------------------------------------- */

/* Mono eyebrow — the page's utility voice. Doubles as the document-section
   numbering device (see .hk-eyebrow__no). */
.hk-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-family: var(--hk-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--hk-accent);
}
.hk-eyebrow::after {
	content: "";
	flex: 1 1 auto;
	max-width: 72px;
	height: 1px;
	background: linear-gradient(90deg, var(--hk-accent), transparent);
}
.hk-eyebrow__no {
	padding: 3px 8px;
	border: 1px solid rgba(var(--hk-accent-rgb), .4);
	color: var(--hk-accent);
	font-size: 11px;
	letter-spacing: .1em;
}
.hk-eyebrow--center { justify-content: center; }
.hk-eyebrow--center::after { display: none; }

/* Light sections: swap to the deeper accent so the eyebrow clears 4.5:1. */
.hk-light .hk-eyebrow { color: var(--hk-accent-ink); }
.hk-light .hk-eyebrow::after { background: linear-gradient(90deg, var(--hk-accent-ink), transparent); }
.hk-light .hk-eyebrow__no { color: var(--hk-accent-ink); border-color: rgba(163, 78, 19, .45); }

.hk-h2 {
	font-size: clamp(1.75rem, 1.05rem + 2.7vw, 3.1rem);
	font-weight: 700;
	margin-bottom: 20px;
	max-width: 20ch;
}
.hk-h2--wide { max-width: 26ch;color: #fff; }
.hk-h2 em { font-style: normal; color: var(--hk-accent); }

.hk-lead {
	font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
	line-height: 1.75;
	max-width: 62ch;
	color: var(--hk-on-dark);
}
.hk-light .hk-lead { color: var(--hk-ink-soft); }

.hk-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 68px); }
.hk-head--center { margin-inline: auto; text-align: center; }
.hk-head--center .hk-h2 { margin-inline: auto; color: #fff;}
.hk-head--center .hk-lead { margin-inline: auto; }

/* Section header with a right-aligned action on wide screens. */
.hk-head-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-bottom: clamp(40px, 5vw, 68px);
}
.hk-head-row .hk-head { margin-bottom: 0; }
@media (max-width: 860px) {
	.hk-head-row { flex-direction: column; align-items: flex-start; }
}


/* --------------------------------------------------------------------------
   05. BUTTONS
   -------------------------------------------------------------------------- */
.hk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 14px 28px;
	border: 1px solid transparent;
	font-family: var(--hk-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .25s var(--hk-ease),
				border-color .25s var(--hk-ease),
				color .25s var(--hk-ease);
}
.hk-btn svg { width: 15px; height: 15px; flex: none; transition: transform .25s var(--hk-ease); }
.hk-btn:hover svg { transform: translateX(3px); }

.hk-btn--primary { background: var(--hk-accent); border-color: var(--hk-accent); color: #08110A; }
.hk-btn--primary:hover, .hk-btn--primary:focus-visible {
	background: var(--hk-accent-bright); border-color: var(--hk-accent-bright);
}

.hk-btn--ghost { border-color: var(--hk-hair-dark2); color: var(--hk-white); }
.hk-btn--ghost:hover, .hk-btn--ghost:focus-visible {
	border-color: var(--hk-accent); color: var(--hk-accent);
}

.hk-btn--dark { border-color: rgba(21, 24, 21, .25); color: var(--hk-ink); }
.hk-btn--dark:hover, .hk-btn--dark:focus-visible {
	background: var(--hk-ink); border-color: var(--hk-ink); color: var(--hk-white);
}

/* Text link with a rule that grows on hover. */
.hk-link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 3px;
	font-family: var(--hk-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--hk-accent);
	border-bottom: 1px solid rgba(var(--hk-accent-rgb), .3);
	transition: color .25s var(--hk-ease), border-color .25s var(--hk-ease);
}
.hk-link svg { width: 13px; height: 13px; transition: transform .25s var(--hk-ease); }
.hk-link:hover, .hk-link:focus-visible { color: var(--hk-accent-bright); border-color: var(--hk-accent-bright); }
.hk-link:hover svg { transform: translateX(4px); }

.hk-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }


/* --------------------------------------------------------------------------
   06. HEADER + NAVIGATION
   -------------------------------------------------------------------------- */
.hk-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 900;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color .35s var(--hk-ease),
				border-color .35s var(--hk-ease),
				backdrop-filter .35s var(--hk-ease);
}
.hk-header.is-stuck {
	background: rgba(11, 13, 12, .94);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom-color: var(--hk-hair-dark);
}

.hk-header__bar {
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--hk-header-h);
	transition: height .35s var(--hk-ease);
}
.hk-header.is-stuck .hk-header__bar { height: 70px; }

.hk-logo { flex: none; display: flex; align-items: center; }
.hk-logo img {
	height: 40px;
	width: auto;
	transition: height .35s var(--hk-ease);
}
.hk-header.is-stuck .hk-logo img { height: 34px; }

.hk-nav { margin-left: auto; }
.hk-nav__list { display: flex; align-items: center; gap: 2px; }
.hk-nav__link {
	position: relative;
	display: block;
	padding: 12px 14px;   /* keeps the hit area at 44px+ */
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .82);
	transition: color .22s var(--hk-ease);
}
.hk-nav__link::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 2px;
	height: 2px;
	background: var(--hk-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s var(--hk-ease);
}
.hk-nav__link:hover,
.hk-nav__link:focus-visible { color: var(--hk-white); }
.hk-nav__link:hover::after { transform: scaleX(1); }

.hk-nav__item.is-current .hk-nav__link { color: var(--hk-accent); }
.hk-nav__item.is-current .hk-nav__link::after { transform: scaleX(1); }

.hk-header__cta { flex: none; }

/* The in-drawer CTA only exists for the mobile panel. */
.hk-nav__cta { display: none; }

.hk-burger {
	display: none;
	flex: none;
	width: 46px; height: 46px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--hk-hair-dark2);
	cursor: pointer;
}
.hk-burger span {
	display: block;
	position: relative;
	width: 20px; height: 2px;
	background: var(--hk-white);
	transition: background-color .2s var(--hk-ease);
}
.hk-burger span::before,
.hk-burger span::after {
	content: "";
	position: absolute;
	left: 0;
	width: 20px; height: 2px;
	background: var(--hk-white);
	transition: transform .3s var(--hk-ease);
}
.hk-burger span::before { top: -6px; }
.hk-burger span::after  { top: 6px; }
.hk-burger[aria-expanded="true"] span { background: transparent; }
.hk-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.hk-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

.hk-scrim {
	position: fixed;
	inset: 0;
	z-index: 890;
	background: rgba(4, 6, 5, .6);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--hk-ease), visibility .3s var(--hk-ease);
}
.hk-scrim.is-open { opacity: 1; visibility: visible; }

@media (max-width: 1100px) {
	.hk-nav__link { padding: 10px 10px; font-size: 13px; }
	.hk-header__bar { gap: 18px; }
}

@media (max-width: 980px) {
	.hk-burger { display: flex; }
	.hk-header__cta { display: none; }

	.hk-nav {
		position: fixed;
		top: 0; right: 0;
		width: min(340px, 84vw);
		height: 100dvh;
		margin-left: 0;
		padding: 96px 28px 40px;
		background: var(--hk-ink-800);
		border-left: 1px solid var(--hk-hair-dark);
		transform: translateX(100%);
		/* visibility keeps the closed drawer out of the tab order — an
		   off-screen transform alone leaves its links keyboard-focusable. */
		visibility: hidden;
		transition: transform .38s var(--hk-ease), visibility .38s var(--hk-ease);
		overflow-y: auto;
		z-index: 895;
	}
	.hk-nav.is-open { transform: translateX(0); visibility: visible; }

	.hk-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.hk-nav__link {
		padding: 15px 2px;
		font-size: 16px;
		border-bottom: 1px solid var(--hk-hair-dark);
	}
	.hk-nav__link::after { display: none; }
	.hk-nav__item.is-current .hk-nav__link { color: var(--hk-accent); }

	.hk-nav__cta { display: block; margin-top: 26px; }
	.hk-nav__cta .hk-btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   07. HERO
   -------------------------------------------------------------------------- */
.hk-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 100vh;
	min-height: 100dvh;
	padding-top: calc(var(--hk-header-h) + 40px);
	padding-bottom: clamp(40px, 5vw, 72px);
	overflow: hidden;
	background: #05100A;
}

.hk-hero__media { position: absolute; inset: 0; z-index: 0; }
.hk-hero__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 40%;
	transform: scale(1.06);
	will-change: transform;
}
/* Two stacked scrims: a left-to-right wash for text legibility, and a
   bottom lift so the material rail sits on solid ground. */
.hk-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(94deg, rgba(6, 9, 7, .95) 0%, rgba(6, 9, 7, .88) 26%,
			rgba(6, 9, 7, .58) 52%, rgba(6, 9, 7, .32) 72%, rgba(6, 9, 7, .55) 100%),
		linear-gradient(0deg, rgba(6, 9, 7, .95) 0%, rgba(6, 9, 7, .1) 38%, transparent 60%);
}

.hk-hero__inner { position: relative; z-index: 2; width: 100%; }
.hk-hero__content { max-width: 660px; }

.hk-hero__tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 15px;
	margin-bottom: 26px;
	border: 1px solid var(--hk-hair-dark2);
	background: rgba(255, 255, 255, .05);
	font-family: var(--hk-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hk-accent-bright);
}
.hk-hero__tag i {
	width: 6px; height: 6px;
	background: var(--hk-accent);
	border-radius: 50%;
	flex: none;
}

.hk-hero h1 {
	/* font-size: clamp(2.1rem, 1.1rem + 4.2vw, 4.6rem); */
	font-size: clamp(2.1rem, 1.1rem + 3.2vw, 3.6rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.03em;
	margin-bottom: 24px;
}
.hk-hero h1 em { font-style: normal; color: var(--hk-accent); }

.hk-hero__copy {
	font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
	line-height: 1.72;
	color: rgba(255, 255, 255, .76);
	max-width: 55ch;
	margin-bottom: 36px;
}

/* Material rail — names the two outputs right in the hero, in the mono
   voice, so a buyer knows what is actually sold before scrolling. */
.hk-hero__rail {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin-top: clamp(44px, 6vw, 82px);
	border-top: 1px solid var(--hk-hair-dark);
}
.hk-hero__rail-item {
	flex: 1 1 210px;
	padding: 22px 26px 4px 20px;
	border-right: 1px solid var(--hk-hair-dark);
}
.hk-hero__rail-item:last-child { border-right: 0; }
.hk-hero__rail-item dt {
	font-family: var(--hk-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hk-accent);
	margin-bottom: 7px;
}
.hk-hero__rail-item dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--hk-white);
	line-height: 1.4;
}

.hk-hero__scroll {
	position: absolute;
	right: var(--hk-gutter);
	bottom: clamp(40px, 5vw, 72px);
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--hk-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hk-on-dark-dim);
}
.hk-hero__scroll::after {
	content: "";
	width: 44px; height: 1px;
	background: linear-gradient(90deg, var(--hk-on-dark-dim), transparent);
}

/* Load-in sequence. */
.hk-hero__tag,
.hk-hero h1,
.hk-hero__copy,
.hk-hero .hk-btn-row,
.hk-hero__rail {
	opacity: 0;
	transform: translateY(22px);
	animation: hkRise .85s var(--hk-ease) forwards;
}
.hk-hero__tag        { animation-delay: .10s; }
.hk-hero h1          { animation-delay: .22s; color: #fff;}
.hk-hero__copy       { animation-delay: .36s; }
.hk-hero .hk-btn-row { animation-delay: .48s; }
.hk-hero__rail       { animation-delay: .60s; }

@keyframes hkRise { to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
	.hk-hero { min-height: auto; padding-top: calc(var(--hk-header-h) + 60px); }
	.hk-hero__scroll { display: none; }
}
@media (max-width: 640px) {
	.hk-hero__rail-item { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--hk-hair-dark); padding-bottom: 18px; }
	.hk-hero__rail-item:last-child { border-bottom: 0; }
	.hk-hero .hk-btn-row .hk-btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   08. ABOUT
   -------------------------------------------------------------------------- */
.hk-about__media { position: relative; }
.hk-about__media img {
	width: 100%;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
}
/* Datasheet-style tab pinned to the image. */
.hk-about__tab {
	position: absolute;
	left: 0; bottom: 0;
	padding: 18px 26px;
	background: var(--hk-accent);
	color: #08110A;
	max-width: 78%;
}
.hk-about__tab span {
	display: block;
	font-family: var(--hk-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .72;
	margin-bottom: 4px;
}
.hk-about__tab strong { font-size: 15px; font-weight: 700; line-height: 1.35; }

.hk-feats { margin: 32px 0 34px; border-top: 1px solid var(--hk-hair-light); }
.hk-feat {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 17px 0;
	border-bottom: 1px solid var(--hk-hair-light);
}
.hk-feat svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--hk-accent-deep); }
.hk-feat h3 { font-size: 15.5px; font-weight: 700; margin-bottom: 3px; }
.hk-feat p { font-size: 14px; line-height: 1.6; color: var(--hk-ink-soft); }


/* --------------------------------------------------------------------------
   09. PRODUCTS — datasheet panels (signature component)
   --------------------------------------------------------------------------
   The page's one bold idea. Each product is presented the way this industry
   actually evaluates material: as a spec panel. Properties whose real values
   are not yet supplied render as "ON REQUEST" rather than invented numbers.
   -------------------------------------------------------------------------- */
.hk-products {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}
@media (max-width: 900px) { .hk-products { grid-template-columns: 1fr; } }

.hk-sheet {
	display: flex;
	flex-direction: column;
	background: var(--hk-ink-800);
	border: 1px solid var(--hk-hair-dark);
	transition: border-color .4s var(--hk-ease), transform .4s var(--hk-ease);
}
.hk-sheet:hover { border-color: rgba(var(--hk-accent-rgb), .45); transform: translateY(-5px); }

.hk-sheet__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.hk-sheet__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .9s var(--hk-ease);
}
/* rCB: crop to the granular material and away from the frame's right edge. */
.hk-sheet__media--rcb img { object-position: 20% 62%; }
.hk-sheet:hover .hk-sheet__media img { transform: scale(1.06); }
.hk-sheet__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(18, 22, 21, .96) 2%, rgba(18, 22, 21, .25) 55%, rgba(18, 22, 21, .1) 100%);
}
.hk-sheet__code {
	position: absolute;
	top: 18px; left: 18px;
	z-index: 2;
	padding: 6px 12px;
	background: rgba(8, 11, 10, .62);
	border: 1px solid var(--hk-hair-dark2);
	font-family: var(--hk-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hk-white);
}

.hk-sheet__head { position: absolute; left: 28px; right: 28px; bottom: 20px; z-index: 2; }
.hk-sheet__head h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 700; color: var(--hk-white); }
.hk-sheet__head p {
	font-family: var(--hk-mono);
	font-size: 12px;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--hk-accent);
	margin-top: 6px;

}

.hk-sheet__body { display: flex; flex-direction: column; flex: 1; padding: 30px 28px 32px; }
.hk-sheet__body > p { font-size: 15px; line-height: 1.72; margin-bottom: 26px; }

/* Property rows — the datasheet itself. */
.hk-spec { border-top: 1px solid var(--hk-hair-dark); margin-bottom: 26px; }
.hk-spec__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--hk-hair-dark);
}
.hk-spec__key {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--hk-on-dark);
}
.hk-spec__val {
	font-family: var(--hk-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .09em;
	text-transform: uppercase;
	text-align: right;
	color: var(--hk-white);
}
/* Value not yet verified — reads as a deliberate datasheet state. */
.hk-spec__val--req { color: var(--hk-on-dark-dim); }

.hk-sheet__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.hk-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid var(--hk-hair-dark);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--hk-white);
}
.hk-tag svg { width: 12px; height: 12px; color: var(--hk-accent); flex: none; }

.hk-sheet__body .hk-link { margin-top: auto; align-self: flex-start; }


/* --------------------------------------------------------------------------
   10. PROCESS RAIL
   -------------------------------------------------------------------------- */
.hk-proc { position: relative; }

.hk-proc__track {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 16px;
	padding-top: 46px;
	position: relative;
}
/* Base rail + the green line that draws across it on reveal. */
.hk-proc__track::before,
.hk-proc__track::after {
	content: "";
	position: absolute;
	top: 15px;
	left: calc(100% / 14);
	height: 2px;
}
.hk-proc__track::before { right: calc(100% / 14); background: var(--hk-hair-dark); }
.hk-proc__track::after {
	width: 0;
	background: linear-gradient(90deg, var(--hk-accent-deep), var(--hk-accent));
	transition: width 1.6s var(--hk-ease);
}
.hk-proc.is-on .hk-proc__track::after { width: calc(100% - (100% / 7)); }

.hk-step { position: relative; }
.hk-step__dot {
	position: absolute;
	top: -38px; left: 0;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: var(--hk-ink-900);
	border: 2px solid var(--hk-hair-dark2);
	transition: background-color .45s var(--hk-ease), border-color .45s var(--hk-ease);
}
.hk-proc.is-on .hk-step__dot { background: var(--hk-accent); border-color: var(--hk-accent); }
.hk-proc.is-on .hk-step:nth-child(1) .hk-step__dot { transition-delay: .05s; }
.hk-proc.is-on .hk-step:nth-child(2) .hk-step__dot { transition-delay: .27s; }
.hk-proc.is-on .hk-step:nth-child(3) .hk-step__dot { transition-delay: .49s; }
.hk-proc.is-on .hk-step:nth-child(4) .hk-step__dot { transition-delay: .71s; }
.hk-proc.is-on .hk-step:nth-child(5) .hk-step__dot { transition-delay: .93s; }
.hk-proc.is-on .hk-step:nth-child(6) .hk-step__dot { transition-delay: 1.15s; }
.hk-proc.is-on .hk-step:nth-child(7) .hk-step__dot { transition-delay: 1.37s; }

.hk-step__no {
	display: block;
	font-family: var(--hk-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--hk-accent);
	margin-bottom: 14px;
}
.hk-step__icon {
	width: 44px; height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	border: 1px solid var(--hk-hair-dark);
	color: var(--hk-white);
}
.hk-step__icon svg { width: 20px; height: 20px; }
.hk-step h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
.hk-step p { font-size: 13px; line-height: 1.6; color: var(--hk-on-dark-dim); }

/* Tablet: 4-up grid, rail hidden (it would read as a false sequence). */
@media (max-width: 1180px) {
	.hk-proc__track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 20px; padding-top: 0; }
	.hk-proc__track::before, .hk-proc__track::after { display: none; }
	.hk-step__dot { display: none; }
}
/* Tablet and below: a true vertical process with its own connecting spine.
   Four columns below ~860px squeezes each step under 180px, which is too
   narrow for the step title plus its description. */
@media (max-width: 860px) {
	.hk-proc__track { grid-template-columns: 1fr; gap: 0; }
	.hk-step {
		display: grid;
		grid-template-columns: 44px 1fr;
		gap: 0 18px;
		padding-bottom: 30px;
	}
	.hk-step::before {
		content: "";
		grid-column: 1;
		grid-row: 1 / 4;
		justify-self: center;
		width: 1px;
		background: var(--hk-hair-dark);
		margin-top: 52px;
	}
	.hk-step:last-child { padding-bottom: 0; }
	.hk-step:last-child::before { display: none; }
	.hk-step__no { grid-column: 2; grid-row: 1; margin-bottom: 6px; }
	.hk-step__icon { grid-column: 1; grid-row: 1 / 3; margin-bottom: 0; background: var(--hk-ink-800); }
	.hk-step h3 { grid-column: 2; grid-row: 2; }
	.hk-step p { grid-column: 2; grid-row: 3; }
}


/* --------------------------------------------------------------------------
   11. INDUSTRIES GRID
   --------------------------------------------------------------------------
   A hairline grid, not a set of floating cards: closer to a technical
   schedule than to a marketing card wall.
   -------------------------------------------------------------------------- */
.hk-inds {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--hk-hair-light);
	border: 1px solid var(--hk-hair-light);
}
.hk-ind {
	position: relative;
	background: var(--hk-paper);
	padding: 34px 26px 30px;
	transition: background-color .3s var(--hk-ease);
}
.hk-ind::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 2px;
	background: var(--hk-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .35s var(--hk-ease);
}
.hk-ind:hover { background: var(--hk-white); }
.hk-ind:hover::after { transform: scaleX(1); }
.hk-ind svg {
	width: 26px; height: 26px;
	margin-bottom: 18px;
	color: var(--hk-accent-deep);
	transition: transform .35s var(--hk-ease);
}
.hk-ind:hover svg { transform: translateY(-3px); }
.hk-ind h3 { font-size: 15px; font-weight: 700; line-height: 1.35; }

@media (max-width: 1024px) { .hk-inds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .hk-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .hk-ind { padding: 26px 18px 24px; } }


/* --------------------------------------------------------------------------
   12. WHY CHOOSE US
   -------------------------------------------------------------------------- */
.hk-why__list { margin-top: 30px; border-top: 1px solid var(--hk-hair-dark); }
.hk-why__item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hk-hair-dark);
}
.hk-why__item svg { width: 17px; height: 17px; color: var(--hk-accent); flex: none; }
.hk-why__item span { font-size: 15.5px; font-weight: 600;  }

.hk-why__media { position: relative; }
.hk-why__media img {
	width: 100%;
	aspect-ratio: 4 / 4.2;
	object-fit: cover;
}
/* Qualitative overlay cards — deliberately no numbers, because no verified
   figures exist for this company yet. */
.hk-why__cards {
	position: absolute;
	left: 22px; right: 22px; bottom: 22px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.hk-why__card {
	padding: 16px 18px;
	background: rgba(9, 12, 11, .86);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid var(--hk-hair-dark2);
}
.hk-why__card strong {
	display: block;
	/* font-family: var(--hk-mono); */
	font-size: 17px;
	/* letter-spacing: .14em; */
	text-transform: uppercase;
	color: var(--hk-accent-bright);
	margin-bottom: 6px;
}
.hk-why__card span { display: block; font-size: 13px; line-height: 1.5; color: var(--hk-on-dark); }

@media (max-width: 560px) {
	.hk-why__cards { position: static; margin-top: 12px; grid-template-columns: 1fr; }
	.hk-why__media img { aspect-ratio: 4 / 3; }
}


/* --------------------------------------------------------------------------
   13. QUALITY
   -------------------------------------------------------------------------- */
.hk-qual { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .hk-qual { grid-template-columns: 1fr; } }

.hk-qual__media img { width: 100%; aspect-ratio: 4 / 3.9; object-fit: cover; }

.hk-qual__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--hk-hair-light);
	border: 1px solid var(--hk-hair-light);
	margin: 32px 0 34px;
}
.hk-qual__block { background: var(--hk-white); padding: 26px 24px; }
.hk-qual__block svg { width: 22px; height: 22px; color: var(--hk-accent-deep); margin-bottom: 14px; }
.hk-qual__block h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.hk-qual__block p { font-size: 13.5px; line-height: 1.6; color: var(--hk-ink-soft);margin-bottom: 0; }

@media (max-width: 480px) { .hk-qual__grid { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   14. SUSTAINABILITY FLOW
   -------------------------------------------------------------------------- */
.hk-flow { display: flex; align-items: stretch; flex-wrap: wrap; }
.hk-flow__stage {
	flex: 1 1 210px;
	padding: 30px 26px;
	border: 1px solid var(--hk-hair-dark);
	border-left: 0;
}
.hk-flow__stage:first-child { border-left: 1px solid var(--hk-hair-dark); }
.hk-flow__stage--out { background: rgba(var(--hk-accent-rgb), .07); border-color: rgba(var(--hk-accent-rgb), .3); }
.hk-flow__stage span {
	display: block;
	font-family: var(--hk-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hk-accent);
	margin-bottom: 12px;
}
.hk-flow__stage h3 { font-size: 16px; font-weight: 700; margin-bottom: 8px;color: var(--hk-white); }
.hk-flow__stage p { font-size: 13px; line-height: 1.6; color: var(--hk-on-dark-dim); }

@media (max-width: 860px) {
	.hk-flow__stage { flex-basis: calc(50% - 0px); border-left: 1px solid var(--hk-hair-dark); }
}
@media (max-width: 520px) {
	.hk-flow__stage { flex-basis: 100%; border-top: 0; }
	.hk-flow__stage:first-child { border-top: 1px solid var(--hk-hair-dark); }
}


/* --------------------------------------------------------------------------
   15. APPLICATIONS
   -------------------------------------------------------------------------- */
.hk-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 880px) { .hk-apps { grid-template-columns: 1fr; } }

.hk-app { position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; }
.hk-app img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .9s var(--hk-ease);
}
.hk-app:hover img { transform: scale(1.05); }
.hk-app::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(7, 10, 9, .96) 6%, rgba(7, 10, 9, .55) 46%, rgba(7, 10, 9, .3) 100%);
}
.hk-app__body { position: relative; z-index: 2; padding: 32px 30px; width: 100%; }
.hk-app__body > span {
	display: block;
	font-family: var(--hk-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hk-accent);
	margin-bottom: 10px;
}
.hk-app__body h3 { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 700; margin-bottom: 18px;color: var(--hk-white); }
.hk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hk-chip {
	padding: 7px 13px;
	border: 1px solid var(--hk-hair-dark2);
	background: rgba(255, 255, 255, .06);
	font-size: 12.5px;
	font-weight: 500;
	color: var(--hk-white);
}
.hk-chip::marker{
    content: none;
}

@media (max-width: 480px) { .hk-app { min-height: 340px; } .hk-app__body { padding: 26px 22px; } }


/* --------------------------------------------------------------------------
   16. GLOBAL / B2B
   -------------------------------------------------------------------------- */
.hk-global { position: relative; overflow: hidden; }
.hk-global__map {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: min(1180px, 96%) auto;
	opacity: .12;
}
.hk-global .hk-wrap { position: relative; z-index: 2; }

.hk-global__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin-top: clamp(40px, 5vw, 64px);
	background: var(--hk-hair-dark);
	border: 1px solid var(--hk-hair-dark);
}
.hk-global__item { background: var(--hk-ink-900); padding: 30px 26px; }
.hk-global__item svg { width: 24px; height: 24px; color: var(--hk-accent); margin-bottom: 16px; }
.hk-global__item h3 { font-size: 15px; font-weight: 700; margin-bottom: 7px; }
.hk-global__item p { font-size: 13px; line-height: 1.6; color: var(--hk-on-dark-dim); }

@media (max-width: 1024px) { .hk-global__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px)  { .hk-global__list { grid-template-columns: 1fr; } }


/* --------------------------------------------------------------------------
   17. FINAL CTA
   -------------------------------------------------------------------------- */
.hk-cta { position: relative; overflow: hidden; }
.hk-cta__media { position: absolute; inset: 0; z-index: 0; }
.hk-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.hk-cta__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(96deg, rgba(9, 12, 11, .97) 0%, rgba(9, 12, 11, .9) 48%, rgba(9, 12, 11, .78) 100%);
}
.hk-cta__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(28px, 4vw, 60px);
}
.hk-cta__inner h2 { max-width: 18ch; }
.hk-cta__inner .hk-lead { max-width: 46ch; }
.hk-cta__actions { flex: none; display: flex; gap: 14px; flex-wrap: wrap; }

@media (max-width: 940px) {
	.hk-cta__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
	.hk-cta__actions { width: 100%; flex-direction: column; }
	.hk-cta__actions .hk-btn { width: 100%; }
}


/* --------------------------------------------------------------------------
   18. FOOTER
   -------------------------------------------------------------------------- */
.hk-footer { background: var(--hk-ink-800); border-top: 1px solid var(--hk-hair-dark); }
.hk-footer__top {
	display: grid;
	grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr));
	gap: clamp(28px, 3vw, 48px);
	padding-block: clamp(56px, 6vw, 88px);
}
.hk-footer__brand img { height: 38px; width: auto; margin-bottom: 22px; }
.hk-footer__brand p { font-size: 14px; line-height: 1.75; color: var(--hk-on-dark-dim); max-width: 34ch; }

.hk-footer__col h3 {
	font-family: var(--hk-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hk-accent);
	margin-bottom: 20px;
}
.hk-footer__col li { margin-bottom: 11px; }
.hk-footer__col a {
	font-size: 14px;
	color: var(--hk-on-dark-dim);
	transition: color .22s var(--hk-ease), padding-left .22s var(--hk-ease);
}
.hk-footer__col a:hover, .hk-footer__col a:focus-visible { color: var(--hk-accent); padding-left: 4px; }
.hk-footer__col address { font-style: normal; font-size: 14px; line-height: 1.9; color: var(--hk-on-dark-dim); }
.hk-footer__col address a { display: inline; }

.hk-footer__social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.hk-footer__social a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--hk-hair-dark);
	font-family: var(--hk-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.hk-footer__social a:hover { padding-left: 12px; border-color: var(--hk-accent); }

/* Marks a value that still needs the real company detail. */
.hk-todo {
	font-family: var(--hk-mono);
	font-size: 11px;
	letter-spacing: .1em;
	color: var(--hk-on-dark-dim);
	opacity: .8;
}

.hk-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-block: 22px;
	border-top: 1px solid var(--hk-hair-dark);
}
.hk-footer__bottom p { font-size: 13px; color: var(--hk-on-dark-dim); }
.hk-footer__bottom p b { color: var(--hk-accent); font-weight: 600; }
.hk-footer__legal { display: flex; gap: 22px; flex-wrap: wrap; }
.hk-footer__legal a { font-size: 13px; color: var(--hk-on-dark-dim); }
.hk-footer__legal a:hover { color: var(--hk-accent); }

@media (max-width: 1100px) {
	.hk-footer__top { grid-template-columns: 1fr 1fr 1fr; }
	.hk-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
	.hk-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
	.hk-footer__top { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   19. REVEAL
   -------------------------------------------------------------------------- */
.hk-r {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s var(--hk-ease), transform .8s var(--hk-ease);
}
.hk-r.is-in { opacity: 1; transform: none; }
.hk-r-1 { transition-delay: .08s; }
.hk-r-2 { transition-delay: .16s; }
.hk-r-3 { transition-delay: .24s; }
.hk-r-4 { transition-delay: .32s; }

/* Nothing is hidden if JS never runs. */
.no-js .hk-r { opacity: 1; transform: none; }


/* --------------------------------------------------------------------------
   20. REDUCED MOTION & PRINT
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.hk *,
	.hk *::before,
	.hk *::after {
		animation-duration: .001ms !important;
		animation-delay: 0ms !important;
		transition-duration: .001ms !important;
		transition-delay: 0ms !important;
	}

	.hk-hero__tag, .hk-hero h1, .hk-hero__copy,
	.hk-hero .hk-btn-row, .hk-hero__rail,
	.hk-r { opacity: 1; transform: none; }

	.hk-hero__media img { transform: none; }
	.hk-proc .hk-proc__track::after { width: calc(100% - (100% / 7)); }
	.hk-proc .hk-step__dot { background: var(--hk-accent); border-color: var(--hk-accent); }
}

@media print {
	.hk-header, .hk-scrim, .hk-hero__scroll { display: none !important; }
	.hk { background: #fff; color: #000; }
}