/* =====================================================================
   Haecom Telesys – main stylesheet
   1rem = 10px (html font-size: 10px). Everything is rem / vw so the
   layout scales from phones to 8K. Design follows the reference:
   fixed transparent header, full-screen hero with glass cards, oversized
   display headings, eyebrow labels with an animated orange line, grey
   rounded cards, dark gradient feature band and a blue footer.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Root tokens
   --------------------------------------------------------------------- */
:root {
	/* Brand colours */
	--hc-primary: #245ddd;
	--hc-primary-dark: #1a5ed4;
	--hc-primary-deep: #1141ae;
	--hc-primary-light: #eaf0ff;
	--hc-primary-rgb: 36, 93, 221;
	--hc-navy: #1e2b59;
	--hc-navy-2: #1e2956;
	--hc-accent: #ffc000;
	--hc-accent-rgb: 255, 192, 0;
	--hc-accent-dark: #e0a800;
	--hc-accent-light: #fff6d6;
	--hc-whatsapp: #25d366;

	/* Neutrals */
	--hc-dark: #1d1d1d;
	--hc-dark-2: #252525;
	--hc-dark-3: #2c2c2c;
	--hc-body: #454545;
	--hc-body-2: #474747;
	--hc-muted: #686868;
	--hc-light: #f6f6f6;
	--hc-light-2: #f3f3f5;
	--hc-border: #e7e7e7;
	--hc-border-2: #d1d1d1;
	--hc-dot: #a7aebb;
	--hc-white: #ffffff;

	/* Typography */
	--hc-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--hc-fw-light: 300;
	--hc-fw-regular: 400;
	--hc-fw-medium: 500;
	--hc-fw-semibold: 600;
	--hc-fw-bold: 700;
	--hc-fw-extrabold: 800;

	/* Fluid type scale (reference uses vw units; clamped for sanity) */
	--hc-fs-14: clamp(1.2rem, 0.73vw, 1.6rem);
	--hc-fs-16: clamp(1.3rem, 0.83vw, 1.8rem);
	--hc-fs-18: clamp(1.4rem, 0.94vw, 2rem);
	--hc-fs-20: clamp(1.5rem, 1.04vw, 2.2rem);
	--hc-fs-24: clamp(1.6rem, 1.25vw, 2.6rem);
	--hc-fs-26: clamp(1.7rem, 1.35vw, 2.8rem);
	--hc-fs-28: clamp(1.8rem, 1.46vw, 3rem);
	--hc-fs-30: clamp(1.9rem, 1.56vw, 3.2rem);
	--hc-fs-32: clamp(2rem, 1.67vw, 3.6rem);
	--hc-fs-40: clamp(2.4rem, 2.08vw, 4.4rem);
	--hc-fs-48: clamp(2.8rem, 2.5vw, 5.2rem);
	--hc-fs-56: clamp(3rem, 2.92vw, 6rem);
	--hc-fs-70: clamp(2.8rem, 3.65vw, 7.4rem);
	--hc-fs-110: clamp(4.2rem, 5.73vw, 11.6rem);
	--hc-fs-120: clamp(4.4rem, 6.25vw, 12.6rem);
	--hc-fs-160: clamp(5.6rem, 8.33vw, 16.8rem);
	--hc-lh: 1.6;

	/* Layout */
	--hc-pad: clamp(2rem, 2.5vw, 6rem);
	--hc-section-py: clamp(6rem, 5vw, 12rem);
	--hc-header-h: clamp(6.8rem, 5.2vw, 11rem);
	--hc-appbar-h: 6.4rem;

	/* Shape & effects */
	--hc-radius: clamp(1.2rem, 1.25vw, 2.8rem);
	--hc-radius-sm: clamp(0.8rem, 0.85vw, 1.8rem);
	--hc-radius-pill: 100rem;
	--hc-shadow: 0 1rem 3rem rgba(29, 29, 29, 0.08);
	--hc-shadow-lg: 0 2rem 6rem rgba(29, 29, 29, 0.16);
	--hc-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--hc-t: 0.3s var(--hc-ease);
	--hc-t-slow: 0.6s var(--hc-ease);

	/* Z-index */
	--hc-z-header: 1030;
	--hc-z-appbar: 1036;
	--hc-z-float: 1020;
	--hc-z-loader: 20000;

	/* Bootstrap bridge */
	--bs-body-font-family: var(--hc-font);
	--bs-body-font-size: 1.6rem;
	--bs-body-line-height: var(--hc-lh);
	--bs-body-color: var(--hc-body);
	--bs-body-bg: var(--hc-white);
	--bs-heading-color: var(--hc-dark);
	--bs-link-color: var(--hc-primary);
	--bs-link-hover-color: var(--hc-primary-dark);
	--bs-border-color: var(--hc-border);
	--bs-border-radius: var(--hc-radius-sm);
	--bs-primary: var(--hc-primary);
	--bs-primary-rgb: var(--hc-primary-rgb);
}

/* ---------------------------------------------------------------------
   2. Base & responsive root scaling
   --------------------------------------------------------------------- */
html {
	font-size: 10px;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--hc-header-h);
}

@media (max-width: 360px) {
	html {
		font-size: 9px;
	}
}

/* Above FHD the whole design scales proportionally: 10px @1920 → 20px @4K → 40px @8K */
@media (min-width: 1921px) {
	html {
		font-size: 0.5208vw;
	}
}

@media (max-width: 767.98px) {
	:root {
		--hc-pad: 5vw;
		--hc-section-py: 12vw;
		--hc-radius: 5vw;
		--hc-radius-sm: 3vw;
	}
}

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

body {
	margin: 0;
	font-family: var(--hc-font);
	font-size: 1.6rem;
	font-weight: var(--hc-fw-regular);
	line-height: var(--hc-lh);
	color: var(--hc-body);
	background: var(--hc-white);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.hc-loading {
	overflow: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--hc-t);
}

button {
	font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--hc-font);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.2;
	color: var(--hc-dark);
	margin: 0 0 1.6rem;
}

p {
	margin: 0 0 1.6rem;
}

ul,
ol {
	margin: 0 0 1.6rem;
	padding-left: 2rem;
}

::selection {
	background: var(--hc-primary);
	color: var(--hc-white);
}

:focus-visible {
	outline: 0.3rem solid rgba(var(--hc-primary-rgb), 0.45);
	outline-offset: 0.2rem;
}

.hc-wrap {
	padding-left: var(--hc-pad);
	padding-right: var(--hc-pad);
}

.hc-section {
	position: relative;
	padding: var(--hc-section-py) 0;
}

.hc-section--light {
	background: var(--hc-light);
}

.hc-grid {
	display: grid;
	gap: clamp(1.6rem, 1.5vw, 3.6rem);
}

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

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

@media (max-width: 991.98px) {
	.hc-grid--3,
	.hc-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px) {
	.hc-grid--3,
	.hc-grid--4 {
		grid-template-columns: 1fr;
	}
}

.offcanvas {
	--bs-offcanvas-width: min(40rem, 90vw);
	--bs-offcanvas-padding-x: 2.4rem;
	--bs-offcanvas-padding-y: 2rem;
}

.modal {
	--bs-modal-border-radius: var(--hc-radius);
	--bs-modal-border-width: 0;
	--bs-modal-padding: 0;
	--bs-modal-margin: 1.2rem;
	--bs-modal-box-shadow: var(--hc-shadow-lg);
}

.modal-xl {
	--bs-modal-width: 112rem;
}

@media (min-width: 576px) {
	.modal {
		--bs-modal-margin: 2.4rem;
	}
}

/* ---------------------------------------------------------------------
   3. Typography components: display headings, eyebrow, line
   --------------------------------------------------------------------- */
.hc-display {
	display: flex;
	flex-direction: column;
	font-size: var(--hc-fs-110);
	font-weight: var(--hc-fw-semibold);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--hc-dark);
	margin: 0;
}

.hc-display__line {
	display: block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.hc-display__inner {
	display: inline-block;
	will-change: transform;
}

.hc-display--xl {
	font-size: var(--hc-fs-160);
	line-height: 0.875;
}

.hc-display--lg {
	font-size: var(--hc-fs-120);
	line-height: 0.9;
}

.hc-display--md {
	font-size: var(--hc-fs-70);
	line-height: 1;
}

.hc-display--sm {
	font-size: var(--hc-fs-32);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.hc-display--white {
	color: var(--hc-white);
}

.hc-eyebrow {
	display: flex;
	flex-direction: column;
	gap: clamp(1.2rem, 1.25vw, 2.8rem);
	margin-bottom: clamp(3.2rem, 4vw, 9rem);
	color: var(--hc-dark);
}

.hc-eyebrow__row {
	display: flex;
	align-items: center;
	gap: clamp(0.8rem, 0.7vw, 1.6rem);
}

.hc-eyebrow__mark {
	width: clamp(2rem, 1.35vw, 3.2rem);
	height: auto;
	color: var(--hc-primary);
	flex: 0 0 auto;
}

.hc-eyebrow__text {
	font-size: var(--hc-fs-26);
	font-weight: var(--hc-fw-medium);
	line-height: 1.2;
}

.hc-eyebrow--dark {
	color: var(--hc-white);
}

.hc-eyebrow--dark .hc-eyebrow__mark {
	color: var(--hc-white);
}

.hc-line {
	position: relative;
	width: 100%;
	height: 0.15rem;
}

.hc-line__bar {
	width: 100%;
	height: 100%;
	background: var(--hc-accent);
	transform-origin: left center;
	transform: scaleX(0);
}

.hc-eyebrow--dark .hc-line__bar {
	background: var(--hc-white);
}

.hc-lead {
	font-size: var(--hc-fs-20);
	color: var(--hc-body-2);
	max-width: 70rem;
	margin: clamp(1.6rem, 1.5vw, 3rem) 0 0;
}

.hc-mark {
	width: 2.4rem;
	height: auto;
}

/* ---------------------------------------------------------------------
   4. Buttons, pills, glass cards, grey cards
   --------------------------------------------------------------------- */
.hc-btn {
	--btn-bg: var(--hc-white);
	--btn-border: var(--hc-white);
	--btn-color: var(--hc-dark-3);
	--btn-circle: var(--hc-primary);
	--btn-arrow: var(--hc-white);
	--btn-gap: clamp(2.4rem, 4vw, 8rem);
	--btn-fs: var(--hc-fs-24);
	--btn-circle-size: clamp(4rem, 2.5vw, 5.6rem);
	--btn-pad-l: clamp(1.6rem, 1.35vw, 3rem);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--btn-gap);
	padding: clamp(0.3rem, 0.3vw, 0.7rem);
	padding-left: var(--btn-pad-l);
	border: 0.2rem solid var(--btn-border);
	border-radius: var(--hc-radius-pill);
	background: var(--btn-bg);
	color: var(--btn-color);
	font-size: var(--btn-fs);
	font-weight: var(--hc-fw-semibold);
	letter-spacing: -0.01em;
	line-height: 1.3;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	contain: layout;
	transition: transform 0.15s ease, background var(--hc-t), border-color var(--hc-t), color var(--hc-t);
	-webkit-tap-highlight-color: transparent;
}

.hc-btn:active {
	transform: scale(0.97);
}

.hc-btn__text {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	overflow: hidden;
	backface-visibility: hidden;
}

.hc-btn__label {
	display: inline-block;
	transition: transform var(--hc-t);
}

.hc-btn__label--clone {
	position: absolute;
	top: 100%;
	left: 0;
}

.hc-btn:hover .hc-btn__label {
	transform: translateY(-100%);
}

.hc-btn__circle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--btn-circle-size);
	height: var(--btn-circle-size);
	border-radius: 50%;
	background: var(--btn-circle);
	color: var(--btn-arrow);
	animation: hcPulse 2s ease-in-out infinite;
	transform: translateZ(0);
	transition: box-shadow var(--hc-t);
}

.hc-btn__circle i {
	font-size: calc(var(--btn-circle-size) * 0.55);
	line-height: 1;
	transition: transform var(--hc-t);
}

.hc-btn:hover .hc-btn__circle {
	animation: none;
	box-shadow: 0 0 2rem rgba(var(--hc-primary-rgb), 0.35);
}

.hc-btn:hover .hc-btn__circle i {
	transform: rotate(45deg);
}

@keyframes hcPulse {
	0%,
	100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.06);
	}
}

.hc-btn--blue,
.hc-btn--primary {
	--btn-bg: var(--hc-primary);
	--btn-border: var(--hc-primary);
	--btn-color: var(--hc-white);
	--btn-circle: var(--hc-white);
	--btn-arrow: var(--hc-primary);
}

.hc-btn--accent {
	--btn-bg: var(--hc-accent);
	--btn-border: var(--hc-accent);
	--btn-color: var(--hc-white);
	--btn-circle: var(--hc-white);
	--btn-arrow: var(--hc-accent);
}

.hc-btn--glass,
.hc-btn--outline-white {
	--btn-bg: rgba(255, 255, 255, 0.08);
	--btn-border: rgba(255, 255, 255, 0.7);
	--btn-color: var(--hc-white);
	--btn-circle: var(--hc-white);
	--btn-arrow: var(--hc-primary);
	backdrop-filter: blur(0.6rem);
}

.hc-btn--outline {
	--btn-bg: transparent;
	--btn-border: var(--hc-dark);
	--btn-color: var(--hc-dark);
	--btn-circle: var(--hc-dark);
	--btn-arrow: var(--hc-white);
}

.hc-btn--dark {
	--btn-bg: var(--hc-dark);
	--btn-border: var(--hc-dark);
	--btn-color: var(--hc-white);
	--btn-circle: var(--hc-white);
	--btn-arrow: var(--hc-dark);
}

.hc-btn--success {
	--btn-bg: var(--hc-whatsapp);
	--btn-border: var(--hc-whatsapp);
	--btn-color: var(--hc-white);
	--btn-circle: var(--hc-white);
	--btn-arrow: var(--hc-whatsapp);
}

.hc-btn--sm {
	--btn-gap: clamp(1.6rem, 1.6vw, 3.2rem);
	--btn-fs: var(--hc-fs-16);
	--btn-circle-size: clamp(3.4rem, 1.9vw, 4.4rem);
	--btn-pad-l: clamp(1.4rem, 1vw, 2.2rem);
}

.hc-btn--block {
	width: 100%;
}

.hc-pill {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: clamp(0.5rem, 0.45vw, 1rem) clamp(1rem, 1vw, 2.2rem);
	border: 0.15rem solid currentColor;
	border-radius: var(--hc-radius-pill);
	font-size: var(--hc-fs-16);
	font-weight: var(--hc-fw-semibold);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
}

.hc-pill--wide {
	justify-content: space-between;
	width: 100%;
	padding-block: clamp(0.8rem, 0.6vw, 1.4rem);
}

.hc-pill--dark {
	color: var(--hc-dark);
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--hc-fw-medium);
	border-color: var(--hc-dark);
}

.hc-glass {
	display: block;
	padding: clamp(1.6rem, 1.5vw, 3.6rem);
	border: 0.2rem solid rgba(255, 255, 255, 0.23);
	border-radius: var(--hc-radius);
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(clamp(0.6rem, 0.5vw, 1.2rem));
	-webkit-backdrop-filter: blur(clamp(0.6rem, 0.5vw, 1.2rem));
	color: var(--hc-white);
	transition: background var(--hc-t), border-color var(--hc-t), filter var(--hc-t), transform 0.15s ease;
}

.hc-glass:hover {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.35);
	filter: brightness(1.05);
	color: var(--hc-white);
}

.hc-glass:active {
	transform: scale(0.99);
}

.hc-glass--dark {
	border-width: 0.1rem;
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4rem);
	-webkit-backdrop-filter: blur(4rem);
}

.hc-glass__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.hc-glass__arrow {
	font-size: clamp(1.8rem, 1.25vw, 2.8rem);
	line-height: 1;
	transition: transform var(--hc-t);
}

.hc-glass:hover .hc-glass__arrow {
	transform: translate(0.3rem, -0.3rem);
}

.hc-glass__title {
	font-size: var(--hc-fs-26);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.2;
	color: var(--hc-white);
	margin: clamp(1.6rem, 1.5vw, 3.2rem) 0 0;
}

.hc-glass__text {
	font-size: var(--hc-fs-16);
	line-height: 1.5;
	margin: clamp(1rem, 1vw, 2rem) 0 0;
	color: rgba(255, 255, 255, 0.92);
}

.hc-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(1.8rem, 1.5vw, 3.6rem);
	border-radius: var(--hc-radius);
	background: var(--hc-light);
	color: var(--hc-dark);
	transition: background var(--hc-t), transform var(--hc-t), box-shadow var(--hc-t);
}

a.hc-card:hover {
	background: var(--hc-light-2);
	transform: translateY(-0.4rem);
	box-shadow: var(--hc-shadow);
	color: var(--hc-dark);
}

/* ---------------------------------------------------------------------
   5. Preloader
   --------------------------------------------------------------------- */
.hc-loader {
	position: fixed;
	inset: 0;
	z-index: var(--hc-z-loader);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--hc-navy);
	color: var(--hc-white);
}

.hc-loader__inner {
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 1vw, 2.4rem);
}

.hc-loader__mark {
	width: clamp(2.6rem, 1.5vw, 3.6rem);
	height: auto;
	transform: translateY(0.2rem);
}

.hc-loader__word-wrap {
	display: flex;
	align-items: flex-end;
}

.hc-loader__word {
	font-size: var(--hc-fs-48);
	font-weight: var(--hc-fw-bold);
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
}

.hc-loader__dot {
	width: 0.8rem;
	height: 0.8rem;
	margin-left: 0.5rem;
	margin-bottom: 0.3rem;
	border-radius: 50%;
	background: var(--hc-accent);
}

/* ---------------------------------------------------------------------
   6. Header & navigation
   --------------------------------------------------------------------- */
.hc-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: var(--hc-z-header);
	background: var(--hc-white);
	color: var(--hc-dark);
	border-bottom: 0.1rem solid var(--hc-border-2);
	transition: background var(--hc-t), color var(--hc-t), border-color var(--hc-t), transform var(--hc-t);
}

.hc-header--transparent:not(.is-scrolled) {
	background: transparent;
	color: var(--hc-white);
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

.hc-header.is-hidden {
	transform: translateY(-100%);
}

.hc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2vw;
	height: var(--hc-header-h);
}

/* Logo */
.hc-logo {
	display: inline-flex;
	align-items: center;
	gap: clamp(0.8rem, 0.7vw, 1.6rem);
	color: inherit;
	flex: 0 0 auto;
}

.hc-logo__img {
	max-height: calc(var(--hc-header-h) * 0.62);
	width: auto;
}

.hc-logo__mark {
	width: clamp(3.4rem, 2.3vw, 5.2rem);
	height: auto;
	color: inherit;
}

.hc-logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.hc-logo__name {
	font-size: clamp(2rem, 1.45vw, 3.2rem);
	font-weight: var(--hc-fw-extrabold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: inherit;
}

.hc-logo__sub {
	font-size: clamp(0.9rem, 0.6vw, 1.3rem);
	font-weight: var(--hc-fw-medium);
	letter-spacing: 0.28em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-top: 0.3rem;
}

.hc-logo--dark {
	color: var(--hc-dark);
}

.hc-logo--dark .hc-logo__mark,
.hc-logo--dark .hc-logo__name {
	color: var(--hc-primary);
}

.hc-logo--white {
	color: var(--hc-white);
}

.is-scrolled .hc-logo--auto .hc-logo__mark,
.is-scrolled .hc-logo--auto .hc-logo__name,
.hc-header:not(.hc-header--transparent) .hc-logo--auto .hc-logo__mark,
.hc-header:not(.hc-header--transparent) .hc-logo--auto .hc-logo__name {
	color: var(--hc-primary);
}

/* Desktop nav */
.hc-nav {
	position: relative;
	z-index: 11;
}

.hc-nav__list {
	position: relative;
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1vw, 2.4rem);
	margin: 0;
	padding: clamp(0.2rem, 0.25vw, 0.6rem);
	list-style: none;
	border-radius: var(--hc-radius-pill);
	font-size: var(--hc-fs-20);
	font-weight: var(--hc-fw-semibold);
	color: inherit;
	transition: background var(--hc-t), color var(--hc-t);
}

.hc-nav.is-hovered .hc-nav__list {
	background: var(--hc-primary);
	color: var(--hc-white);
}

.hc-nav__indicator {
	position: absolute;
	top: 50%;
	left: 0;
	height: 85%;
	width: 0;
	border-radius: var(--hc-radius);
	background: var(--hc-primary-deep);
	transform: translateY(-50%);
	opacity: 0;
	transition: transform var(--hc-t), width var(--hc-t), opacity var(--hc-t);
	will-change: transform, width;
	z-index: 0;
	pointer-events: none;
}

.hc-nav.is-hovered .hc-nav__indicator {
	opacity: 1;
}

.hc-nav__item {
	position: static;
}

.hc-nav__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: clamp(0.8rem, 1vw, 2.2rem) clamp(1rem, 0.85vw, 2rem);
	color: inherit;
	white-space: nowrap;
}

.hc-nav__plus {
	font-weight: var(--hc-fw-semibold);
}

.hc-nav__toggle {
	display: none;
}

/* Dropdown panel (desktop) */
.hc-nav:not(.hc-nav--mobile) .hc-nav__panel {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	min-width: 34rem;
	padding-top: clamp(1rem, 1vw, 2rem);
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.8rem);
	transition: opacity var(--hc-t), transform var(--hc-t), visibility var(--hc-t);
	pointer-events: none;
}

.hc-nav:not(.hc-nav--mobile) .hc-nav__item:hover > .hc-nav__panel,
.hc-nav:not(.hc-nav--mobile) .hc-nav__item:focus-within > .hc-nav__panel,
.hc-nav:not(.hc-nav--mobile) .hc-nav__item.is-open > .hc-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.hc-nav__panel-list {
	list-style: none;
	margin: 0;
	padding: clamp(0.6rem, 0.75vw, 1.6rem) clamp(1.6rem, 1.75vw, 3.6rem);
	background: var(--hc-white);
	border-radius: var(--hc-radius-sm);
	box-shadow: var(--hc-shadow-lg);
	color: var(--hc-dark-2);
	overflow: hidden;
}

.hc-nav__panel-item + .hc-nav__panel-item {
	border-top: 0.2rem solid var(--hc-border);
}

.hc-nav__sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(1.2rem, 1.25vw, 2.6rem) 0;
	color: var(--hc-dark-2);
}

.hc-nav__sub-main {
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 1.25vw, 2.6rem);
	min-width: 0;
}

.hc-nav__sub-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(4.4rem, 3.5vw, 7.6rem);
	height: clamp(4.4rem, 3.5vw, 7.6rem);
	border-radius: 50%;
	background: var(--hc-light-2);
	color: var(--hc-primary);
	font-size: clamp(2rem, 1.5vw, 3.2rem);
	transition: background var(--hc-t), color var(--hc-t);
}

.hc-nav__sub-text {
	display: flex;
	flex-direction: column;
	gap: clamp(0.3rem, 0.35vw, 0.8rem);
	min-width: 0;
}

.hc-nav__sub-title {
	font-size: var(--hc-fs-26);
	font-weight: var(--hc-fw-medium);
	line-height: 1.2;
	color: var(--hc-dark-2);
	transition: color var(--hc-t);
}

.hc-nav__sub-desc {
	font-size: var(--hc-fs-18);
	font-weight: var(--hc-fw-medium);
	line-height: 1.3;
	color: var(--hc-body);
	transition: color var(--hc-t);
	white-space: normal;
}

.hc-nav__sub-arrow {
	flex: 0 0 auto;
	font-size: clamp(1.6rem, 1.1vw, 2.4rem);
	color: var(--hc-primary);
	filter: grayscale(1);
	opacity: 0.6;
	transition: filter 0.5s ease-out, opacity 0.5s ease-out, transform var(--hc-t);
}

.hc-nav__sub:hover .hc-nav__sub-title,
.hc-nav__sub:hover .hc-nav__sub-desc {
	color: var(--hc-primary);
}

.hc-nav__sub:hover .hc-nav__sub-icon {
	background: var(--hc-primary);
	color: var(--hc-white);
}

.hc-nav__sub:hover .hc-nav__sub-arrow {
	filter: none;
	opacity: 1;
	transform: translate(0.2rem, -0.2rem);
}

/* Header actions */
.hc-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 1.2vw, 2.8rem);
	flex: 0 0 auto;
}

.hc-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	font-size: var(--hc-fs-18);
	font-weight: var(--hc-fw-semibold);
	color: inherit;
}

.hc-header__phone i {
	color: var(--hc-accent);
}

.hc-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.6rem;
	width: 4.6rem;
	height: 4.6rem;
	padding: 0 1.1rem;
	border: 0.15rem solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.hc-burger span {
	display: block;
	height: 0.2rem;
	background: currentColor;
	border-radius: 0.2rem;
}

.hc-burger span:nth-child(2) {
	width: 65%;
}

/* ---------------------------------------------------------------------
   7. Offcanvas (mobile menu)
   --------------------------------------------------------------------- */
.hc-offcanvas {
	border: 0;
	display: flex;
	flex-direction: column;
	color: var(--hc-dark);
}

.hc-offcanvas__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.6rem var(--bs-offcanvas-padding-x);
	border-bottom: 0.1rem solid var(--hc-border);
}

.hc-offcanvas__close {
	width: 4.2rem;
	height: 4.2rem;
	border: 0;
	border-radius: 50%;
	background: var(--hc-light);
	color: var(--hc-dark);
	font-size: 1.6rem;
	cursor: pointer;
}

.hc-offcanvas__body {
	flex: 1;
	overflow-y: auto;
	padding: 1.6rem var(--bs-offcanvas-padding-x) calc(var(--hc-appbar-h) + 2rem);
}

.hc-nav--mobile .hc-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0.2rem;
	padding: 0;
	font-size: 1.8rem;
	border-radius: 0;
}

.hc-nav--mobile .hc-nav__item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

.hc-nav--mobile .hc-nav__link {
	flex: 1;
	padding: 1.3rem 1.2rem;
	border-radius: var(--hc-radius-sm);
}

.hc-nav--mobile .hc-nav__item.is-current > .hc-nav__link {
	color: var(--hc-primary);
}

.hc-nav--mobile .hc-nav__plus {
	display: none;
}

.hc-nav--mobile .hc-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.4rem;
	height: 4.4rem;
	border: 0;
	border-radius: var(--hc-radius-sm);
	background: var(--hc-light);
	color: var(--hc-primary);
	font-size: 1.4rem;
	cursor: pointer;
	transition: transform var(--hc-t), background var(--hc-t);
}

.hc-nav--mobile .hc-nav__item.is-open > .hc-nav__toggle {
	transform: rotate(45deg);
	background: var(--hc-primary);
	color: var(--hc-white);
}

.hc-nav--mobile .hc-nav__panel {
	display: none;
	flex-basis: 100%;
	padding: 0.4rem 0 0.8rem;
}

.hc-nav--mobile .hc-nav__item.is-open > .hc-nav__panel {
	display: block;
}

.hc-nav--mobile .hc-nav__panel-list {
	box-shadow: none;
	background: var(--hc-light);
	padding: 0.4rem 1.6rem;
}

.hc-nav--mobile .hc-nav__sub {
	padding: 1.2rem 0;
}

.hc-nav--mobile .hc-nav__sub-icon {
	width: 4.2rem;
	height: 4.2rem;
	font-size: 1.8rem;
	background: var(--hc-white);
}

.hc-nav--mobile .hc-nav__sub-title {
	font-size: 1.6rem;
}

.hc-nav--mobile .hc-nav__sub-desc {
	font-size: 1.3rem;
}

.hc-offcanvas__contact {
	display: grid;
	gap: 1.2rem;
	margin-top: 2.4rem;
	padding-top: 2.4rem;
	border-top: 0.1rem solid var(--hc-border);
}

.hc-offcanvas__line {
	display: flex;
	align-items: flex-start;
	gap: 1.2rem;
	font-size: 1.4rem;
	color: var(--hc-body);
}

.hc-offcanvas__line i {
	color: var(--hc-accent);
	font-size: 1.6rem;
	line-height: 1.5;
}

/* Social */
.hc-social {
	display: flex;
	gap: 0.8rem;
}

.hc-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 0.8rem;
	border: 0.15rem solid var(--hc-border);
	color: var(--hc-dark);
	font-size: 1.7rem;
	transition: all var(--hc-t);
}

.hc-social__link:hover {
	background: var(--hc-primary);
	border-color: var(--hc-primary);
	color: var(--hc-white);
}

.hc-social--footer .hc-social__link {
	width: clamp(3.6rem, 2.5vw, 5.6rem);
	height: clamp(3.6rem, 2.5vw, 5.6rem);
	border-color: rgba(255, 255, 255, 0.8);
	color: var(--hc-white);
	font-size: clamp(1.6rem, 1.1vw, 2.4rem);
}

.hc-social--footer .hc-social__link:hover {
	background: var(--hc-white);
	color: var(--hc-primary);
}

/* ---------------------------------------------------------------------
   8. Hero
   --------------------------------------------------------------------- */
.hc-hero {
	position: relative;
	background: var(--hc-navy);
	color: var(--hc-white);
}

.hc-hero__swiper {
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 64rem;
}

.hc-hero__slide {
	position: relative;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
}

.hc-hero__media {
	position: absolute;
	inset: 0;
}

.hc-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 8s linear;
}

.swiper-slide-active .hc-hero__img {
	transform: scale(1);
}

.hc-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 25, 70, 0.6) 0%, rgba(10, 25, 70, 0.25) 55%, rgba(10, 25, 70, 0.1) 100%);
}

.hc-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	padding-top: calc(var(--hc-header-h) + clamp(4rem, 6.5vw, 14rem));
	padding-bottom: clamp(4rem, 3vw, 8rem);
}

.hc-hero__left {
	width: 50%;
}

.hc-hero__title {
	font-size: var(--hc-fs-110);
	font-weight: var(--hc-fw-light);
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--hc-white);
}

.hc-hero__text {
	width: 90%;
	max-width: 70rem;
	margin: clamp(2rem, 2vw, 4.4rem) 0 0;
	font-size: var(--hc-fs-24);
	line-height: 1.41;
	color: var(--hc-white);
}

.hc-hero__text strong {
	font-weight: var(--hc-fw-semibold);
}

.hc-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	margin-top: clamp(2.8rem, 3.5vw, 7.6rem);
}

/* Right-hand glass cards */
.hc-hero__right {
	position: absolute;
	right: var(--hc-pad);
	bottom: clamp(3rem, 3vw, 7rem);
	z-index: 3;
	width: calc(50% - var(--hc-pad));
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: clamp(1rem, 1vw, 2.2rem);
}

.hc-hero__pcard {
	width: 37.93%;
	display: flex;
	flex-direction: column;
}

.hc-hero__pcard-media {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hc-hero__pcard-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0.6rem 1.6rem rgba(0, 0, 0, 0.25));
	transition: transform var(--hc-t-slow);
}

.hc-hero__pcard:hover .hc-hero__pcard-img {
	transform: scale(1.05) rotate(-2deg);
}

.hc-hero__pcard .hc-pill {
	margin-top: clamp(1.2rem, 1.5vw, 3.2rem);
}

.hc-hero__cards {
	display: flex;
	gap: clamp(1rem, 1vw, 2.2rem);
	width: 100%;
}

.hc-hero__card {
	width: 37.93%;
}

.hc-hero__card--wide {
	width: 62.07%;
}

/* Controls */
.hc-hero__controls {
	position: absolute;
	left: 0;
	bottom: clamp(3rem, 3vw, 7rem);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 1.4rem;
	pointer-events: none;
}

.hc-hero__controls > * {
	pointer-events: auto;
}

.hc-hero__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(4rem, 2.5vw, 5.6rem);
	height: clamp(4rem, 2.5vw, 5.6rem);
	border: 0.15rem solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: var(--hc-white);
	font-size: 1.8rem;
	cursor: pointer;
	backdrop-filter: blur(0.6rem);
	transition: all var(--hc-t);
}

.hc-hero__arrow:hover {
	background: var(--hc-white);
	color: var(--hc-primary);
	border-color: var(--hc-white);
}

.hc-hero__pagination.swiper-pagination {
	position: static;
	width: auto;
	display: flex;
	gap: 0.6rem;
}

.hc-hero__pagination .swiper-pagination-bullet {
	width: 1rem;
	height: 1rem;
	margin: 0;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	border-radius: var(--hc-radius-pill);
	transition: all var(--hc-t);
}

.hc-hero__pagination .swiper-pagination-bullet-active {
	width: 3.2rem;
	background: var(--hc-accent);
}

.hc-hero__controls.is-single {
	display: none;
}

@media (max-width: 991.98px) {
	.hc-hero__swiper {
		height: auto;
		min-height: 100svh;
	}

	.hc-hero__slide {
		min-height: 100svh;
		align-items: flex-end;
	}

	.hc-hero__overlay {
		background: linear-gradient(180deg, rgba(10, 25, 70, 0.3) 0%, rgba(10, 25, 70, 0.85) 100%);
	}

	.hc-hero__content {
		padding-top: calc(var(--hc-header-h) + 37.5vw);
		padding-bottom: 16rem;
	}

	.hc-hero__left {
		width: 100%;
	}

	.hc-hero__title {
		font-size: clamp(4.4rem, 15vw, 8rem);
		font-weight: var(--hc-fw-semibold);
		letter-spacing: -0.04em;
		line-height: 0.98;
	}

	.hc-hero__text {
		width: 100%;
		font-size: clamp(1.6rem, 5vw, 2.2rem);
		line-height: 1.5;
	}

	.hc-hero__actions {
		margin-top: 10vw;
	}

	.hc-hero__controls {
		bottom: 8rem;
	}

	.hc-hero__right {
		position: static;
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 3vw;
		padding: 4vw var(--hc-pad) 6vw;
		background: var(--hc-navy);
	}

	.hc-hero__pcard,
	.hc-hero__card,
	.hc-hero__card--wide {
		width: 100%;
	}

	.hc-hero__pcard {
		flex-direction: row;
		align-items: center;
		gap: 4vw;
	}

	.hc-hero__pcard-media {
		width: 36%;
		flex: 0 0 auto;
	}

	.hc-hero__pcard .hc-pill {
		margin-top: 0;
	}

	.hc-hero__cards {
		flex-direction: column;
		gap: 3vw;
	}

	.hc-glass {
		padding: 6vw;
		border-radius: 5vw;
	}

	.hc-glass__title {
		font-size: clamp(2rem, 6vw, 2.8rem);
		margin-top: 6vw;
	}

	.hc-glass__text {
		font-size: clamp(1.4rem, 3.7vw, 1.8rem);
		margin-top: 3vw;
	}

	.hc-pill {
		font-size: clamp(1.2rem, 3.2vw, 1.5rem);
		padding: 2vw 3.5vw;
	}
}

/* ---------------------------------------------------------------------
   9. Dots canvas, vision, about & stairs
   --------------------------------------------------------------------- */
.hc-dots {
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: calc(100% - 10vw);
	transform: translateY(-50%);
	z-index: 0;
	overflow: hidden;
}

.hc-dots canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hc-vision {
	overflow: hidden;
}

.hc-vision__inner {
	position: relative;
	z-index: 1;
	pointer-events: none;
}

.hc-vision__body {
	display: flex;
	justify-content: center;
	padding: clamp(8rem, 12vw, 26rem) 0;
}

.hc-vision__text {
	max-width: 90rem;
	margin: 0;
	text-align: center;
	font-size: var(--hc-fs-70);
	font-weight: var(--hc-fw-medium);
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--hc-dark);
	pointer-events: auto;
}

.hc-vision__hl {
	color: var(--hc-primary-dark);
}

.hc-about {
	overflow: hidden;
}

.hc-about__dots {
	top: auto;
	bottom: clamp(4rem, 6vw, 12rem);
	height: 32%;
	transform: none;
}

.hc-about__deco {
	position: absolute;
	right: 0;
	top: 0;
	width: 43.5%;
	transform: rotate(-12deg) translateY(-8vw);
	z-index: 0;
	opacity: 0.9;
	pointer-events: none;
}

.hc-about__deco-img {
	width: 100%;
	height: auto;
}

.hc-about__inner {
	position: relative;
	z-index: 1;
}

.hc-about__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(3rem, 4vw, 9rem);
	align-items: end;
}

.hc-about__text {
	margin: clamp(2rem, 2.5vw, 5.6rem) 0 0;
	font-size: var(--hc-fs-28);
	font-weight: var(--hc-fw-medium);
	line-height: 1.35;
	color: var(--hc-body-2);
}

.hc-about__actions {
	margin-top: clamp(2.4rem, 3vw, 6.8rem);
}

/* Staircase stats */
.hc-stairs {
	display: flex;
	align-items: flex-end;
	gap: 0;
	height: clamp(26rem, 24vw, 52rem);
}

.hc-stair {
	position: relative;
	flex: 1 1 0;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	height: var(--stair-h, 10rem);
}

.hc-stair--1 { --stair-h: 20%; }
.hc-stair--2 { --stair-h: 36%; }
.hc-stair--3 { --stair-h: 52%; }
.hc-stair--4 { --stair-h: 68%; }
.hc-stair--5 { --stair-h: 84%; }
.hc-stair--6 { --stair-h: 100%; }

.hc-stair__inner {
	padding-right: clamp(0.8rem, 1vw, 2.2rem);
	text-align: right;
}

.hc-stair__value {
	font-size: var(--hc-fs-56);
	font-weight: var(--hc-fw-medium);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--hc-dark);
	white-space: nowrap;
}

.hc-stair__label {
	margin-top: 0.4rem;
	font-size: var(--hc-fs-18);
	line-height: 1.25;
	color: var(--hc-dark);
}

.hc-stair__bar {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 0.1rem;
	background: var(--hc-dark);
	transform-origin: bottom center;
}

@media (max-width: 991.98px) {
	.hc-about__grid {
		grid-template-columns: 1fr;
	}

	.hc-about__deco {
		width: 70%;
		top: 2%;
		transform: rotate(-10deg) translateY(-2vw);
		opacity: 0.5;
	}

	.hc-stairs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 4vw 6vw;
		min-height: 0;
		margin-top: 8vw;
	}

	.hc-stair {
		height: auto;
		justify-content: flex-start;
		padding-left: 4vw;
		border-left: 0.1rem solid var(--hc-dark);
	}

	.hc-stair__inner {
		text-align: left;
		padding: 0;
	}

	.hc-stair__bar {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   10. Products: heading, category cards, filter, product cards
   --------------------------------------------------------------------- */
.hc-products__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 3vw;
	margin-bottom: clamp(2.4rem, 2.5vw, 5.6rem);
}

.hc-cats {
	display: grid;
	grid-template-columns: 1.1fr repeat(4, 1fr);
	gap: clamp(1rem, 1vw, 2.4rem);
}

.hc-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(20rem, 20vw, 44rem);
	padding: clamp(1.6rem, 1.5vw, 3.6rem);
	border-radius: var(--hc-radius);
	background: var(--hc-light);
	color: var(--hc-dark);
	overflow: hidden;
	transition: background var(--hc-t), transform var(--hc-t), box-shadow var(--hc-t);
}

.hc-cat:hover {
	background: var(--hc-primary-light);
	transform: translateY(-0.4rem);
	box-shadow: var(--hc-shadow);
	color: var(--hc-dark);
}

.hc-cat--intro {
	justify-content: flex-start;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 2rem;
}

.hc-cat__intro-text {
	font-size: var(--hc-fs-26);
	font-weight: var(--hc-fw-regular);
	line-height: 1.25;
	color: var(--hc-dark);
}

.hc-cat__intro-mark {
	width: clamp(2.6rem, 2vw, 4.4rem);
	height: auto;
	color: var(--hc-primary);
	flex: 0 0 auto;
	transition: transform var(--hc-t);
}

.hc-cat--intro:hover .hc-cat__intro-mark {
	transform: rotate(45deg);
}

.hc-cat__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--hc-radius-sm);
	overflow: hidden;
	background: var(--hc-white);
}

.hc-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hc-t-slow);
}

.hc-cat:hover .hc-cat__img {
	transform: scale(1.06);
}

.hc-cat__body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding-top: clamp(1.4rem, 1.25vw, 2.8rem);
	padding-right: 4rem;
}

.hc-cat__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.2rem, 2.2vw, 4.8rem);
	height: clamp(3.2rem, 2.2vw, 4.8rem);
	border-radius: 50%;
	background: var(--hc-white);
	color: var(--hc-primary);
	font-size: clamp(1.5rem, 1.1vw, 2.4rem);
	margin-bottom: 0.6rem;
}

.hc-cat__title {
	font-size: var(--hc-fs-24);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.2;
	margin: 0;
}

.hc-cat__count {
	font-size: var(--hc-fs-16);
	color: var(--hc-muted);
}

.hc-cat__arrow {
	position: absolute;
	right: 0;
	top: clamp(1.4rem, 1.25vw, 2.8rem);
	font-size: clamp(1.8rem, 1.25vw, 2.8rem);
	color: var(--hc-primary);
	transition: transform var(--hc-t);
}

.hc-cat:hover .hc-cat__arrow {
	transform: translate(0.3rem, -0.3rem);
}

.hc-products__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin: clamp(4rem, 4vw, 9rem) 0 clamp(2rem, 2vw, 4.4rem);
}

.hc-products__subtitle {
	font-size: var(--hc-fs-32);
	font-weight: var(--hc-fw-semibold);
	margin: 0;
}

.hc-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.hc-filter__btn {
	display: inline-flex;
	align-items: center;
	min-height: clamp(3.8rem, 2.3vw, 5.2rem);
	padding: 0 clamp(1.6rem, 1.2vw, 2.8rem);
	border: 0.15rem solid var(--hc-border-2);
	border-radius: var(--hc-radius-pill);
	background: var(--hc-white);
	color: var(--hc-dark);
	font-size: var(--hc-fs-16);
	font-weight: var(--hc-fw-medium);
	cursor: pointer;
	transition: all var(--hc-t);
}

.hc-filter__btn:hover {
	border-color: var(--hc-dark);
	color: var(--hc-dark);
}

.hc-filter__btn.is-active {
	background: var(--hc-dark);
	border-color: var(--hc-dark);
	color: var(--hc-white);
}

.hc-filter--links {
	margin-bottom: clamp(2.4rem, 2.5vw, 5.6rem);
}

@media (max-width: 767.98px) {
	.hc-filter {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 0.8rem;
		margin-left: calc(-1 * var(--hc-pad));
		margin-right: calc(-1 * var(--hc-pad));
		padding-left: var(--hc-pad);
		padding-right: var(--hc-pad);
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.hc-filter::-webkit-scrollbar {
		display: none;
	}

	.hc-filter__btn {
		flex: 0 0 auto;
	}
}

.hc-products__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1vw, 2.4rem);
}

.hc-products__item.is-hidden {
	display: none;
}

.hc-product__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.2rem;
}

.hc-product__media {
	display: block;
	width: 52%;
	aspect-ratio: 4 / 3;
	border-radius: var(--hc-radius-sm);
	overflow: hidden;
	background: var(--hc-white);
}

.hc-product__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hc-t-slow);
}

.hc-product:hover .hc-product__img {
	transform: scale(1.06);
}

.hc-product__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-top: clamp(1.4rem, 1.25vw, 2.8rem);
}

.hc-product__model {
	font-size: var(--hc-fs-14);
	font-weight: var(--hc-fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-primary);
	margin-bottom: 0.6rem;
}

.hc-product__title {
	font-size: var(--hc-fs-24);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.25;
	margin: 0 0 0.8rem;
}

.hc-product__title a:hover {
	color: var(--hc-primary);
}

.hc-product__tagline {
	font-size: var(--hc-fs-16);
	line-height: 1.5;
	color: var(--hc-body);
	margin-bottom: clamp(1.6rem, 1.5vw, 3.2rem);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hc-product__actions {
	margin-top: auto;
}

@media (max-width: 1199.98px) {
	.hc-cats {
		grid-template-columns: repeat(3, 1fr);
	}

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

@media (max-width: 991.98px) {
	.hc-products__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 2.4rem;
	}

	.hc-cats {
		grid-template-columns: repeat(2, 1fr);
	}

	.hc-cat--intro {
		grid-column: 1 / -1;
		min-height: 0;
	}

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

@media (max-width: 575.98px) {
	.hc-cats {
		grid-template-columns: 1fr;
	}

	.hc-products__grid {
		grid-template-columns: 1fr;
	}
}

/* Product details (modal + single) */
.hc-modal__content {
	position: relative;
	overflow: hidden;
}

.hc-modal__close {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	z-index: 5;
	width: 4.4rem;
	height: 4.4rem;
	border: 0;
	border-radius: 50%;
	background: var(--hc-white);
	color: var(--hc-dark);
	font-size: 1.6rem;
	box-shadow: var(--hc-shadow);
	cursor: pointer;
	transition: all var(--hc-t);
}

.hc-modal__close:hover {
	background: var(--hc-accent);
	color: var(--hc-white);
}

.hc-modal__body {
	padding: 0;
}

.hc-modal__grid {
	display: grid;
	grid-template-columns: 44% 1fr;
	min-height: 48rem;
}

.hc-modal__media {
	position: relative;
	background: var(--hc-light);
	padding: clamp(2rem, 2.5vw, 5.6rem);
}

.hc-modal__img {
	position: sticky;
	top: clamp(2rem, 2.5vw, 5.6rem);
	width: 100%;
	height: auto;
	max-height: 70vh;
	object-fit: contain;
	border-radius: var(--hc-radius-sm);
	background: var(--hc-white);
	box-shadow: var(--hc-shadow);
}

.hc-modal__details {
	padding: clamp(2.4rem, 2.5vw, 5.6rem);
}

@media (max-width: 991.98px) {
	.hc-modal__grid {
		grid-template-columns: 1fr;
	}

	.hc-modal__media {
		padding: 1.6rem;
	}

	.hc-modal__img {
		position: static;
		max-height: 40vh;
		margin: 0 auto;
		width: auto;
		max-width: 100%;
	}
}

.hc-details__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-bottom: 1.4rem;
}

.hc-details__cats .hc-badge {
	display: inline-flex;
	padding: 0.5rem 1.2rem;
	border-radius: var(--hc-radius-pill);
	background: var(--hc-primary-light);
	color: var(--hc-primary);
	font-size: 1.2rem;
	font-weight: var(--hc-fw-semibold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.hc-details__title {
	font-size: var(--hc-fs-32);
	margin-bottom: 0.8rem;
}

.hc-details--single .hc-details__title {
	font-size: var(--hc-fs-48);
}

.hc-details__model {
	font-size: 1.4rem;
	color: var(--hc-muted);
	margin-bottom: 0.6rem;
}

.hc-details__model span {
	font-weight: var(--hc-fw-semibold);
	color: var(--hc-dark);
}

.hc-details__tagline {
	font-size: var(--hc-fs-20);
	color: var(--hc-body);
	margin-bottom: 1.6rem;
}

.hc-details__desc {
	font-size: 1.5rem;
	color: var(--hc-muted);
}

.hc-details__block {
	margin-top: 2.4rem;
	padding-top: 2.4rem;
	border-top: 0.1rem solid var(--hc-border);
}

.hc-details__heading {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.4rem;
	font-weight: var(--hc-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hc-dark);
	margin-bottom: 1.4rem;
}

.hc-details__heading i {
	color: var(--hc-primary);
	font-size: 1.8rem;
}

.hc-checklist {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.8rem;
}

.hc-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-size: 1.5rem;
	color: var(--hc-body);
}

.hc-checklist i {
	color: var(--hc-accent);
	font-size: 1.8rem;
	line-height: 1.3;
	flex: 0 0 auto;
}

.hc-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.4rem;
}

.hc-specs th,
.hc-specs td {
	padding: 1rem 1.2rem;
	text-align: left;
	border-bottom: 0.1rem solid var(--hc-border);
	vertical-align: top;
}

.hc-specs th {
	width: 40%;
	font-weight: var(--hc-fw-semibold);
	color: var(--hc-dark);
	background: var(--hc-light);
}

.hc-specs tr:last-child th,
.hc-specs tr:last-child td {
	border-bottom: 0;
}

.hc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

.hc-tag,
.hc-tags a {
	display: inline-flex;
	align-items: center;
	padding: 0.6rem 1.4rem;
	font-size: 1.3rem;
	font-weight: var(--hc-fw-medium);
	color: var(--hc-body);
	background: var(--hc-light);
	border: 0.1rem solid var(--hc-border);
	border-radius: var(--hc-radius-pill);
}

.hc-details__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	margin-top: 3.2rem;
}

.hc-details__actions .hc-btn {
	--btn-gap: 2rem;
	--btn-fs: 1.5rem;
	--btn-circle-size: 4rem;
	--btn-pad-l: 1.8rem;
}

.hc-details__full {
	margin-left: auto;
	font-size: 1.4rem;
	font-weight: var(--hc-fw-medium);
	color: var(--hc-primary);
}

.hc-single-product__media {
	position: sticky;
	top: calc(var(--hc-header-h) + 2rem);
	border-radius: var(--hc-radius);
	overflow: hidden;
	background: var(--hc-light-2);
}

.hc-single-product__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------------------------------------------------------------------
   11. Special (dark gradient) section
   --------------------------------------------------------------------- */
.hc-special {
	background: linear-gradient(180deg, var(--hc-navy-2) 0%, #2e5db6 100%);
	color: var(--hc-white);
	overflow: hidden;
}

.hc-special__title {
	position: relative;
	z-index: 2;
}

.hc-special__stage {
	position: relative;
	display: grid;
	grid-template-columns: 31.5% 1fr 31.5%;
	grid-template-rows: auto auto;
	gap: clamp(2rem, 3vw, 7rem) clamp(1.5rem, 2vw, 5rem);
	margin-top: clamp(-4rem, -3vw, -2rem);
	padding-left: clamp(1rem, 2vw, 4.8rem);
}

.hc-special__card {
	position: relative;
	z-index: 1;
}

.hc-special__card--1 {
	grid-column: 1;
	grid-row: 1 / 3;
	align-self: center;
}

.hc-special__card--2 {
	grid-column: 3;
	grid-row: 1;
	margin-top: clamp(2rem, 4vw, 9rem);
}

.hc-special__card--3 {
	grid-column: 2;
	grid-row: 2;
	margin-left: clamp(0rem, 2vw, 5rem);
}

.hc-special__center {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 42%;
	transform: translate(-50%, -50%);
	z-index: 0;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hc-special__img {
	position: relative;
	width: 100%;
	height: auto;
	z-index: 2;
	opacity: 0.95;
}

.hc-ping {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(6rem, 6.5vw, 14rem);
	height: clamp(6rem, 6.5vw, 14rem);
	margin: calc(-1 * clamp(3rem, 3.25vw, 7rem)) 0 0 calc(-1 * clamp(3rem, 3.25vw, 7rem));
	border: 0.1rem solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	animation: hcPing 3.2s ease-out infinite;
	z-index: 1;
}

.hc-ping--2 {
	animation-delay: 0.8s;
}

.hc-ping--3 {
	animation-delay: 1.6s;
}

@keyframes hcPing {
	0% {
		transform: scale(0.6);
		opacity: 1;
	}

	100% {
		transform: scale(4.5);
		opacity: 0;
	}
}

.hc-special__num {
	font-size: var(--hc-fs-20);
	font-weight: var(--hc-fw-medium);
}

.hc-special__card-title {
	font-size: var(--hc-fs-40);
	font-weight: var(--hc-fw-semibold);
	color: var(--hc-white);
	margin: clamp(2rem, 2.75vw, 6rem) 0 0;
	line-height: 1.15;
}

.hc-special__card-sub {
	font-size: var(--hc-fs-30);
	font-weight: var(--hc-fw-regular);
	color: var(--hc-white);
	margin: clamp(0.4rem, 0.5vw, 1.2rem) 0 0;
	line-height: 1.2;
}

.hc-special__card-text {
	width: 92%;
	font-size: var(--hc-fs-20);
	line-height: 1.3;
	margin: clamp(1.2rem, 1.25vw, 2.8rem) 0 0;
	color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 991.98px) {
	.hc-special__stage {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		padding-left: 0;
		margin-top: 60vw;
	}

	.hc-special__card--1,
	.hc-special__card--2,
	.hc-special__card--3 {
		grid-column: 1;
		grid-row: auto;
		margin: 0;
	}

	.hc-special__center {
		width: 90%;
		top: -30vw;
		transform: translate(-50%, 0);
	}
}

/* ---------------------------------------------------------------------
   12. Clients grid
   --------------------------------------------------------------------- */
.hc-clients__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: clamp(2rem, 3vw, 7rem) clamp(1.6rem, 2vw, 4.8rem);
	margin-top: clamp(3rem, 4vw, 9rem);
}

.hc-client {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(6rem, 5vw, 11rem);
	color: var(--hc-muted);
	transition: color var(--hc-t), transform var(--hc-t);
}

.hc-client:hover {
	color: var(--hc-dark);
	transform: translateY(-0.3rem);
}

.hc-client__logo {
	max-height: clamp(5rem, 4.5vw, 10rem);
	width: auto;
	filter: grayscale(1);
	opacity: 0.8;
	transition: filter var(--hc-t), opacity var(--hc-t);
}

.hc-client:hover .hc-client__logo {
	filter: none;
	opacity: 1;
}

.hc-client__name {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	font-size: var(--hc-fs-20);
	font-weight: var(--hc-fw-semibold);
	text-align: center;
	line-height: 1.2;
}

.hc-client__mark {
	width: clamp(2.4rem, 1.8vw, 4rem);
	height: auto;
	flex: 0 0 auto;
}

@media (max-width: 991.98px) {
	.hc-clients__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 575.98px) {
	.hc-clients__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---------------------------------------------------------------------
   13. Split heading, sliders, industry & post cards
   --------------------------------------------------------------------- */
.hc-split-head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 4vw, 9rem);
	align-items: end;
	margin-bottom: clamp(3rem, 3.5vw, 8rem);
}

.hc-split-head--center {
	align-items: center;
}

.hc-split-head__aside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(2rem, 2vw, 4.4rem);
}

.hc-split-head--center .hc-split-head__aside {
	align-items: flex-end;
}

.hc-split-head__text {
	font-size: var(--hc-fs-20);
	line-height: 1.5;
	color: var(--hc-body-2);
	margin: 0;
}

.hc-slider {
	overflow: hidden;
}

.hc-slider__slide {
	height: auto;
}

.hc-slider__pagination {
	display: flex;
	justify-content: center;
	gap: clamp(0.4rem, 0.5vw, 1.2rem);
	margin-top: clamp(2.4rem, 2.5vw, 5.6rem);
}

.hc-slider__bullet {
	width: clamp(2.4rem, 2.5vw, 5.6rem);
	height: 0.4rem;
	border-radius: var(--hc-radius-pill);
	background: var(--hc-border);
	cursor: pointer;
	transition: background var(--hc-t), width var(--hc-t);
}

.hc-slider__bullet.is-active {
	background: var(--hc-primary);
}

.hc-industry {
	min-height: clamp(26rem, 24vw, 52rem);
}

.hc-industry__num {
	align-self: flex-end;
	font-size: var(--hc-fs-20);
	font-weight: var(--hc-fw-medium);
	color: var(--hc-accent);
}

.hc-industry__title {
	font-size: var(--hc-fs-32);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.15;
	margin: clamp(2.4rem, 3.5vw, 7.6rem) 0 0;
	color: var(--hc-dark);
}

.hc-industry__rule {
	display: block;
	height: 0.15rem;
	background: var(--hc-accent);
	margin-top: clamp(1rem, 1vw, 2.2rem);
}

.hc-industry__text {
	font-size: var(--hc-fs-18);
	line-height: 1.45;
	color: var(--hc-body);
	margin: clamp(1.4rem, 1.5vw, 3.2rem) 0 0;
}

.hc-industry__link {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: clamp(1.6rem, 1.5vw, 3.2rem);
	font-size: var(--hc-fs-16);
	font-weight: var(--hc-fw-semibold);
	color: var(--hc-primary);
}

.hc-industry__link i {
	transition: transform var(--hc-t);
}

.hc-industry:hover .hc-industry__link i {
	transform: translate(0.3rem, -0.3rem);
}

.hc-post-card__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.2rem;
}

.hc-post-card__media {
	display: block;
	width: 50%;
	aspect-ratio: 16 / 10;
	border-radius: var(--hc-radius-sm);
	overflow: hidden;
	background: var(--hc-white);
}

.hc-post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hc-t-slow);
}

.hc-post-card:hover .hc-post-card__img {
	transform: scale(1.06);
}

.hc-post-card__title {
	font-size: var(--hc-fs-26);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.25;
	margin: clamp(1.4rem, 1.5vw, 3.2rem) 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hc-post-card__title a:hover {
	color: var(--hc-primary);
}

.hc-post-card__excerpt {
	font-size: var(--hc-fs-18);
	line-height: 1.45;
	color: var(--hc-body);
	margin: clamp(1rem, 1vw, 2.2rem) 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hc-post-card__meta {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: auto;
	padding-top: clamp(1.6rem, 1.5vw, 3.2rem);
	font-size: var(--hc-fs-16);
	color: var(--hc-muted);
}

.hc-post-card__read {
	font-weight: var(--hc-fw-semibold);
	color: var(--hc-primary);
}

@media (max-width: 991.98px) {
	.hc-split-head {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.hc-split-head--center .hc-split-head__aside {
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------
   14. Footer
   --------------------------------------------------------------------- */
.hc-footer {
	position: relative;
	background: var(--hc-primary-dark);
	color: var(--hc-white);
	overflow: hidden;
}

.hc-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 0.9fr 0.9fr 1.4fr;
	padding-top: clamp(4rem, 4vw, 9rem);
}

.hc-footer__col {
	padding: 0 clamp(1.6rem, 2vw, 4.8rem) clamp(3rem, 3vw, 7rem);
	border-left: 0.1rem solid rgba(255, 255, 255, 0.25);
}

.hc-footer__col:first-child {
	padding-left: 0;
	border-left: 0;
}

.hc-footer__headline {
	color: var(--hc-white);
	margin-bottom: clamp(1.6rem, 1.5vw, 3.2rem);
}

.hc-footer__cta-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
	font-size: var(--hc-fs-18);
}

.hc-footer__cta-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
}

.hc-footer__cta-links a:hover,
.hc-footer__links a:hover,
.hc-footer__contact a:hover {
	color: rgba(255, 255, 255, 0.75);
}

.hc-footer__title {
	font-size: var(--hc-fs-28);
	font-weight: var(--hc-fw-semibold);
	color: var(--hc-white);
	margin: 0 0 clamp(1.2rem, 1.25vw, 2.8rem);
	line-height: 1.2;
}

.hc-footer__title--lg + .hc-footer__contact {
	margin-bottom: clamp(2rem, 2vw, 4.4rem);
}

.hc-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(0.6rem, 0.75vw, 1.6rem);
	font-size: var(--hc-fs-18);
}

.hc-footer__links + .hc-footer__links {
	margin-top: clamp(1.6rem, 1.5vw, 3.2rem);
	padding-top: clamp(1.6rem, 1.5vw, 3.2rem);
	border-top: 0.1rem solid rgba(255, 255, 255, 0.25);
}

.hc-footer__contact {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(0.8rem, 0.75vw, 1.6rem);
	font-size: var(--hc-fs-18);
}

.hc-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	line-height: 1.5;
}

.hc-footer__contact i {
	flex: 0 0 auto;
	font-size: 1.1em;
	line-height: 1.5;
}

.hc-footer__big {
	position: relative;
	margin-top: clamp(1rem, 1vw, 2rem);
	padding-top: clamp(2rem, 2vw, 4rem);
	border-top: 0.1rem solid rgba(255, 255, 255, 0.25);
	line-height: 0.82;
	overflow: hidden;
}

.hc-footer__big-text {
	display: block;
	font-size: clamp(5rem, 16.4vw, 36rem);
	font-weight: var(--hc-fw-extrabold);
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 0.1rem rgba(255, 255, 255, 0.75);
	white-space: nowrap;
	transform: translateY(0.06em);
}

.hc-footer__big-mark {
	position: absolute;
	right: 0;
	top: clamp(2rem, 2.5vw, 5rem);
	width: clamp(2.4rem, 3vw, 6rem);
	height: auto;
	color: rgba(255, 255, 255, 0.75);
}

.hc-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: clamp(2rem, 2vw, 4.4rem) 0 clamp(2.4rem, 2.5vw, 5.6rem);
	font-size: var(--hc-fs-16);
}

.hc-footer__copy {
	margin: 0;
}

@media (max-width: 991.98px) {
	.hc-footer {
		padding-bottom: var(--hc-appbar-h);
	}

	.hc-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}

	.hc-footer__col {
		border-left: 0;
		padding-left: 0;
	}

	.hc-footer__col--cta,
	.hc-footer__col--contact {
		grid-column: 1 / -1;
	}

	.hc-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ---------------------------------------------------------------------
   15. Mobile app bar, floating buttons
   --------------------------------------------------------------------- */
.hc-appbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--hc-z-appbar);
	display: flex;
	align-items: stretch;
	justify-content: space-around;
	height: calc(var(--hc-appbar-h) + env(safe-area-inset-bottom));
	padding-bottom: env(safe-area-inset-bottom);
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(1.2rem);
	border-top: 0.1rem solid var(--hc-border);
	box-shadow: 0 -0.6rem 2.4rem rgba(29, 29, 29, 0.08);
}

.hc-appbar__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	border: 0;
	background: transparent;
	color: var(--hc-muted);
	font-size: 1.05rem;
	font-weight: var(--hc-fw-medium);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color var(--hc-t);
}

.hc-appbar__item i {
	font-size: 2.2rem;
}

.hc-appbar__item.is-active,
.hc-appbar__item:hover {
	color: var(--hc-primary);
}

.hc-appbar__item--primary {
	position: relative;
	color: var(--hc-dark);
}

.hc-appbar__fab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 5.2rem;
	height: 5.2rem;
	margin-top: -2.8rem;
	border-radius: 50%;
	background: var(--hc-primary);
	color: var(--hc-white);
	box-shadow: 0 0.8rem 2rem rgba(var(--hc-primary-rgb), 0.4);
	border: 0.4rem solid var(--hc-white);
}

.hc-appbar__fab i {
	font-size: 2rem;
}

.hc-whatsapp {
	position: fixed;
	right: var(--hc-pad);
	bottom: 2.4rem;
	z-index: var(--hc-z-float);
	width: clamp(5.2rem, 3vw, 7rem);
	height: clamp(5.2rem, 3vw, 7rem);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	background: var(--hc-whatsapp);
	color: var(--hc-white);
	font-size: clamp(2.6rem, 1.5vw, 3.6rem);
	box-shadow: 0 1rem 2.4rem rgba(37, 211, 102, 0.4);
	transition: transform var(--hc-t);
}

.hc-whatsapp:hover {
	color: var(--hc-white);
	transform: scale(1.08);
}

/* ---------------------------------------------------------------------
   16. Inner pages
   --------------------------------------------------------------------- */
.hc-page-header {
	background: linear-gradient(135deg, var(--hc-navy-2) 0%, var(--hc-primary-deep) 100%);
	color: var(--hc-white);
	padding: calc(var(--hc-header-h) + clamp(4rem, 5vw, 11rem)) 0 clamp(4rem, 4vw, 9rem);
}

.hc-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem;
	font-size: var(--hc-fs-14);
	font-weight: var(--hc-fw-medium);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin-bottom: clamp(1.6rem, 1.5vw, 3.2rem);
	color: rgba(255, 255, 255, 0.7);
}

.hc-breadcrumb a:hover {
	color: var(--hc-white);
}

.hc-breadcrumb__sep {
	font-size: 1rem;
}

.hc-breadcrumb__current {
	color: var(--hc-white);
}

.hc-page-header__title {
	color: var(--hc-white);
}

.hc-page-header__sub {
	font-size: var(--hc-fs-24);
	color: rgba(255, 255, 255, 0.85);
	max-width: 80rem;
	margin: clamp(1.6rem, 1.5vw, 3.2rem) 0 0;
}

.hc-prose {
	font-size: var(--hc-fs-18);
	color: var(--hc-body);
	max-width: 96rem;
}

.hc-prose > * + * {
	margin-top: 1.6rem;
}

.hc-prose h2,
.hc-prose h3,
.hc-prose h4 {
	margin-top: 3.2rem;
}

.hc-prose h2 {
	font-size: var(--hc-fs-40);
}

.hc-prose h3 {
	font-size: var(--hc-fs-28);
}

.hc-prose img {
	border-radius: var(--hc-radius-sm);
}

.hc-prose ul li,
.hc-prose ol li {
	margin-bottom: 0.6rem;
}

.hc-prose blockquote {
	margin: 2.4rem 0;
	padding: 2rem 2.4rem;
	border-left: 0.4rem solid var(--hc-accent);
	background: var(--hc-light);
	border-radius: 0 var(--hc-radius-sm) var(--hc-radius-sm) 0;
	font-style: italic;
}

.hc-prose table {
	width: 100%;
	border-collapse: collapse;
}

.hc-prose th,
.hc-prose td {
	padding: 1rem 1.2rem;
	border: 0.1rem solid var(--hc-border);
}

.hc-entry__thumb {
	display: block;
	margin-bottom: 3.2rem;
	border-radius: var(--hc-radius);
	overflow: hidden;
}

.hc-entry__img {
	width: 100%;
	aspect-ratio: 16 / 8;
	object-fit: cover;
}

.hc-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.6rem;
	font-size: 1.4rem;
	color: var(--hc-muted);
}

.hc-entry__meta {
	margin-bottom: 2.4rem;
	padding-bottom: 1.6rem;
	border-bottom: 0.1rem solid var(--hc-border);
}

.hc-entry__tags {
	margin-top: 3.2rem;
}

.hc-entry__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: 3.2rem;
}

.hc-entry__icon {
	display: inline-flex;
	width: 5.6rem;
	height: 5.6rem;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--hc-primary-light);
	color: var(--hc-primary);
	font-size: 2.6rem;
}

.hc-postnav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.6rem;
	margin: 4.8rem 0 0;
	padding-top: 3.2rem;
	border-top: 0.1rem solid var(--hc-border);
}

.hc-postnav .nav-links {
	display: contents;
}

.hc-postnav .nav-next {
	text-align: right;
}

.hc-postnav a {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.6rem 2rem;
	border-radius: var(--hc-radius-sm);
	background: var(--hc-light);
	color: var(--hc-dark);
	transition: background var(--hc-t);
}

.hc-postnav a:hover {
	background: var(--hc-primary-light);
}

.hc-postnav__label {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--hc-primary);
}

.hc-postnav__title {
	font-weight: var(--hc-fw-semibold);
	font-size: 1.5rem;
}

.hc-pagination {
	margin-top: 4.8rem;
}

.hc-pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.8rem;
}

.hc-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 4.4rem;
	height: 4.4rem;
	padding: 0 1.2rem;
	border: 0.15rem solid var(--hc-border-2);
	border-radius: var(--hc-radius-pill);
	background: var(--hc-white);
	color: var(--hc-dark);
	font-size: 1.4rem;
	font-weight: var(--hc-fw-medium);
	transition: all var(--hc-t);
}

.hc-pagination .page-numbers:hover,
.hc-pagination .page-numbers.current {
	background: var(--hc-dark);
	border-color: var(--hc-dark);
	color: var(--hc-white);
}

.hc-sidebar {
	display: grid;
	gap: 2.4rem;
	position: sticky;
	top: calc(var(--hc-header-h) + 2rem);
}

.hc-widget {
	padding: 2.4rem;
	background: var(--hc-light);
	border-radius: var(--hc-radius-sm);
	font-size: 1.4rem;
}

.hc-widget__title {
	font-size: 1.6rem;
	margin-bottom: 1.6rem;
}

.hc-widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.8rem;
}

.hc-search {
	display: flex;
	max-width: 60rem;
	background: var(--hc-light);
	border-radius: var(--hc-radius-pill);
	overflow: hidden;
}

.hc-search-row {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(3rem, 3vw, 7rem);
}

.hc-search-row .hc-search {
	width: 100%;
}

.hc-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	padding: 0 2.4rem;
	min-height: 5.6rem;
	font: inherit;
	font-size: 1.5rem;
	background: transparent;
	outline: none;
}

.hc-search__btn {
	border: 0;
	width: 6rem;
	background: var(--hc-dark);
	color: var(--hc-white);
	font-size: 1.8rem;
	cursor: pointer;
	transition: background var(--hc-t);
}

.hc-search__btn:hover {
	background: var(--hc-primary);
}

.hc-empty,
.hc-empty-state {
	padding: 4rem 0;
	text-align: center;
	color: var(--hc-muted);
}

.hc-empty-state__icon {
	font-size: 6rem;
	color: var(--hc-border);
	display: block;
	margin-bottom: 1.6rem;
}

.hc-title {
	font-size: var(--hc-fs-40);
	font-weight: var(--hc-fw-semibold);
	letter-spacing: -0.02em;
}

.hc-404__code {
	font-size: clamp(8rem, 12vw, 26rem);
	font-weight: var(--hc-fw-extrabold);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 0.2rem var(--hc-primary);
	margin-bottom: 1.6rem;
}

.comments-area {
	margin-top: 4.8rem;
	padding-top: 3.2rem;
	border-top: 0.1rem solid var(--hc-border);
}

.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
	width: 100%;
	padding: 1.2rem 1.6rem;
	border: 0.1rem solid var(--hc-border);
	border-radius: var(--hc-radius-sm);
	font: inherit;
	font-size: 1.4rem;
}

.comment-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-height: 5.2rem;
	padding: 0 2.8rem;
	border: 0;
	border-radius: var(--hc-radius-pill);
	background: var(--hc-primary);
	color: var(--hc-white);
	font: inherit;
	font-size: 1.4rem;
	font-weight: var(--hc-fw-semibold);
	cursor: pointer;
}

/* WordPress core helpers */
.alignleft {
	float: left;
	margin: 0.5em 2em 1em 0;
}

.alignright {
	float: right;
	margin: 0.5em 0 1em 2em;
}

.aligncenter {
	display: block;
	margin: 1em auto;
}

.wp-caption {
	max-width: 100%;
}

.wp-caption-text {
	font-size: 1.2rem;
	color: var(--hc-muted);
	text-align: center;
	margin-top: 0.6rem;
}

.sticky,
.bypostauthor {
	display: block;
}

.admin-bar .hc-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .hc-header {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.hc-btn__circle,
	.hc-ping {
		animation: none;
	}

	.hc-line__bar {
		transform: none;
	}
}


/* Category grids on archive pages */
.hc-cats--auto {
	grid-template-columns: repeat(auto-fill, minmax(clamp(22rem, 18vw, 40rem), 1fr));
}

.hc-archive__block + .hc-archive__block {
	margin-top: clamp(4rem, 4vw, 9rem);
}

.hc-archive .hc-products__subtitle {
	margin-bottom: clamp(2rem, 2vw, 4.4rem);
}

/* Category grids on archive pages */
.hc-cats--auto {
	grid-template-columns: repeat(auto-fill, minmax(clamp(22rem, 18vw, 40rem), 1fr));
}

.hc-archive__block + .hc-archive__block {
	margin-top: clamp(4rem, 4vw, 9rem);
}

.hc-archive .hc-products__subtitle {
	margin-bottom: clamp(2rem, 2vw, 4.4rem);
}

/* Archive product cards: full-width image on top, category pill over the image */
.hc-products__grid--full .hc-product__top {
	position: relative;
	display: block;
}

.hc-products__grid--full .hc-product__media {
	width: 100%;
	aspect-ratio: 4 / 3;
}

.hc-products__grid--full .hc-product__top .hc-pill {
	position: absolute;
	top: 1.2rem;
	left: 1.2rem;
	z-index: 2;
	background: rgba(255, 255, 255, 0.92);
	border-color: transparent;
	backdrop-filter: blur(0.4rem);
}

/* ---------------------------------------------------------------------
   17. Contact page & Contact Form 7
   --------------------------------------------------------------------- */
.hc-contact__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(3rem, 5vw, 12rem);
	align-items: start;
}

.hc-contact__intro {
	margin-top: clamp(1.6rem, 2vw, 4.4rem);
}

.hc-contact__cards {
	display: grid;
	gap: clamp(1rem, 1vw, 2.4rem);
	margin-top: clamp(2.4rem, 3vw, 6.8rem);
}

.hc-contact__card {
	display: flex;
	align-items: center;
	gap: clamp(1.4rem, 1.25vw, 2.8rem);
	padding: clamp(1.6rem, 1.5vw, 3.2rem);
	border-radius: var(--hc-radius);
	background: var(--hc-light);
	color: var(--hc-dark);
	transition: background var(--hc-t), transform var(--hc-t), box-shadow var(--hc-t);
}

.hc-contact__card:hover {
	background: var(--hc-primary-light);
	transform: translateY(-0.3rem);
	box-shadow: var(--hc-shadow);
	color: var(--hc-dark);
}

.hc-contact__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(4.8rem, 3.5vw, 7.6rem);
	height: clamp(4.8rem, 3.5vw, 7.6rem);
	border-radius: 50%;
	background: var(--hc-white);
	color: var(--hc-primary);
	font-size: clamp(2rem, 1.4vw, 3rem);
}

.hc-contact__icon--wa {
	color: var(--hc-whatsapp);
}

.hc-contact__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
	flex: 1;
}

.hc-contact__card-label {
	font-size: var(--hc-fs-14);
	font-weight: var(--hc-fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hc-muted);
}

.hc-contact__card-value {
	font-size: var(--hc-fs-20);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.3;
}

.hc-contact__card-sub {
	font-size: var(--hc-fs-16);
	color: var(--hc-body);
}

.hc-contact__arrow {
	flex: 0 0 auto;
	font-size: clamp(1.8rem, 1.25vw, 2.8rem);
	color: var(--hc-primary);
	transition: transform var(--hc-t);
}

.hc-contact__card:hover .hc-contact__arrow {
	transform: translate(0.3rem, -0.3rem);
}

.hc-form {
	padding: clamp(2.4rem, 2.5vw, 5.6rem);
}

.hc-form__head {
	margin-bottom: clamp(2rem, 2vw, 4.4rem);
}

.hc-form__title {
	font-size: var(--hc-fs-32);
	font-weight: var(--hc-fw-semibold);
	margin: clamp(1.2rem, 1.25vw, 2.8rem) 0 0.6rem;
}

.hc-form__text {
	font-size: var(--hc-fs-16);
	color: var(--hc-body);
	margin: 0;
}

.hc-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.4rem, 1.25vw, 2.8rem);
}

.hc-form__field--full {
	grid-column: 1 / -1;
}

.hc-form__field label {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	font-size: var(--hc-fs-14);
	font-weight: var(--hc-fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hc-dark);
}

.wpcf7-form-control-wrap {
	display: block;
	position: relative;
}

.hc-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.hc-form textarea,
.hc-form select {
	width: 100%;
	padding: clamp(1.2rem, 1vw, 2.2rem) clamp(1.4rem, 1.25vw, 2.8rem);
	border: 0.15rem solid var(--hc-border-2);
	border-radius: var(--hc-radius-sm);
	background: var(--hc-white);
	font: inherit;
	font-size: var(--hc-fs-16);
	font-weight: var(--hc-fw-regular);
	letter-spacing: 0;
	text-transform: none;
	color: var(--hc-dark);
	outline: none;
	transition: border-color var(--hc-t), box-shadow var(--hc-t);
}

.hc-form input:not([type="submit"]):focus,
.hc-form textarea:focus,
.hc-form select:focus {
	border-color: var(--hc-primary);
	box-shadow: 0 0 0 0.4rem rgba(var(--hc-primary-rgb), 0.15);
}

.hc-form textarea {
	min-height: 14rem;
	resize: vertical;
}

.hc-form ::placeholder {
	color: var(--hc-muted);
	opacity: 1;
}

.hc-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem;
	margin-top: clamp(2rem, 2vw, 4.4rem);
}

.hc-form__submit,
.hc-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	min-height: clamp(4.8rem, 3.2vw, 7rem);
	padding: 0 clamp(2.8rem, 2.4vw, 5.6rem);
	border: 0.2rem solid var(--hc-primary);
	border-radius: var(--hc-radius-pill);
	background: var(--hc-primary);
	color: var(--hc-white);
	font: inherit;
	font-size: var(--hc-fs-18);
	font-weight: var(--hc-fw-semibold);
	cursor: pointer;
	transition: background var(--hc-t), transform 0.15s ease, box-shadow var(--hc-t);
}

.hc-form__submit:hover,
.hc-form input[type="submit"]:hover {
	background: var(--hc-primary-dark);
	box-shadow: 0 1rem 2.4rem rgba(var(--hc-primary-rgb), 0.3);
}

.hc-form input[type="submit"]:active {
	transform: scale(0.97);
}

.wpcf7-spinner {
	display: inline-block;
	width: 2.4rem;
	height: 2.4rem;
	border: 0.3rem solid var(--hc-border);
	border-top-color: var(--hc-primary);
	border-radius: 50%;
	animation: hcSpin 0.8s linear infinite;
	visibility: hidden;
}

.wpcf7-form.submitting .wpcf7-spinner {
	visibility: visible;
}

@keyframes hcSpin {
	to {
		transform: rotate(360deg);
	}
}

.wpcf7-not-valid {
	border-color: #e03131 !important;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.6rem;
	font-size: 1.3rem;
	font-weight: var(--hc-fw-medium);
	text-transform: none;
	letter-spacing: 0;
	color: #e03131;
}

.wpcf7-response-output {
	margin: clamp(1.6rem, 1.5vw, 3.2rem) 0 0;
	padding: 1.4rem 1.8rem;
	border-radius: var(--hc-radius-sm);
	font-size: var(--hc-fs-16);
	font-weight: var(--hc-fw-medium);
	background: var(--hc-primary-light);
	color: var(--hc-primary-dark);
	border: 0.15rem solid rgba(var(--hc-primary-rgb), 0.3);
}

.wpcf7-form.sent .wpcf7-response-output {
	background: #e8f8ef;
	color: #1e7a45;
	border-color: #a9e2c1;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	background: #fff1f0;
	color: #c92a2a;
	border-color: #ffc9c9;
}

.wpcf7-form.init .wpcf7-response-output,
.wpcf7-response-output:empty {
	display: none;
}

.hc-map {
	position: relative;
	height: clamp(32rem, 32vw, 70rem);
	background: var(--hc-light-2);
}

.hc-map__frame {
	width: 100%;
	height: 100%;
	border: 0;
	filter: grayscale(0.2);
}

@media (max-width: 991.98px) {
	.hc-contact__grid {
		grid-template-columns: 1fr;
	}

	.hc-form__grid {
		grid-template-columns: 1fr;
	}
}

/* Image logo: colour version normally, white version on the transparent header / footer */
.hc-logo--image .hc-logo__img {
	max-height: calc(var(--hc-header-h) * 0.62);
	width: auto;
}

.hc-logo--auto .hc-logo__img--white {
	display: none;
}

.hc-header--transparent:not(.is-scrolled) .hc-logo--auto .hc-logo__img--color {
	display: none;
}

.hc-header--transparent:not(.is-scrolled) .hc-logo--auto .hc-logo__img--white {
	display: block;
}

/* Custom logo without a white variant: turn it white where needed */
.hc-logo--single .hc-logo__img--white {
	filter: brightness(0) invert(1);
}

.hc-footer .hc-logo--image .hc-logo__img {
	max-height: clamp(4.4rem, 3.2vw, 7rem);
}

.hc-loader__mark {
	display: none;
}

.hc-loader__logo {
	width: clamp(16rem, 12vw, 30rem);
	height: auto;
}

/* Footer bottom: developer credit badge + social */
.hc-footer__bottom-right {
	display: flex;
	align-items: center;
	gap: clamp(1.6rem, 2vw, 4.4rem);
}

.hc-credit {
	display: inline-flex;
	align-items: center;
	opacity: 0.85;
	transition: opacity var(--hc-t), transform var(--hc-t);
}

.hc-credit:hover {
	opacity: 1;
	transform: translateY(-0.2rem);
}

.hc-credit svg {
	width: clamp(12rem, 9.5vw, 20rem);
	height: auto;
}

@media (max-width: 991.98px) {
	.hc-footer__bottom-right {
		width: 100%;
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------------------
   18. FAQ accordion
   --------------------------------------------------------------------- */
.hc-faq-section__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(3rem, 5vw, 12rem);
	align-items: start;
}

.hc-faq-section__head {
	position: sticky;
	top: calc(var(--hc-header-h) + 2rem);
}

.hc-faq-section__text {
	font-size: var(--hc-fs-20);
	color: var(--hc-body-2);
	margin: clamp(1.6rem, 2vw, 4.4rem) 0 clamp(2rem, 2vw, 4.4rem);
	max-width: 52rem;
}

.hc-faq {
	display: grid;
	gap: clamp(1rem, 1vw, 2.2rem);
}

.hc-faq__item {
	background: var(--hc-light);
	border-radius: var(--hc-radius);
	overflow: hidden;
	transition: background var(--hc-t);
}

.hc-faq__item.is-open {
	background: var(--hc-primary-light);
}

.hc-faq__q {
	display: flex;
	align-items: center;
	gap: clamp(1.2rem, 1.25vw, 2.8rem);
	width: 100%;
	padding: clamp(1.8rem, 1.6vw, 3.6rem) clamp(1.8rem, 1.5vw, 3.6rem);
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	color: var(--hc-dark);
}

.hc-faq__num {
	flex: 0 0 auto;
	font-size: var(--hc-fs-16);
	font-weight: var(--hc-fw-semibold);
	color: var(--hc-accent);
}

.hc-faq__text {
	flex: 1;
	font-size: var(--hc-fs-24);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.3;
}

.hc-faq__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.6rem, 2.5vw, 5.6rem);
	height: clamp(3.6rem, 2.5vw, 5.6rem);
	border-radius: 50%;
	background: var(--hc-white);
	color: var(--hc-primary);
	font-size: clamp(1.4rem, 1vw, 2.2rem);
	transition: transform var(--hc-t), background var(--hc-t), color var(--hc-t);
}

.hc-faq__item.is-open .hc-faq__icon {
	transform: rotate(45deg);
	background: var(--hc-primary);
	color: var(--hc-white);
}

.hc-faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--hc-t-slow);
}

.hc-faq__item.is-open .hc-faq__a {
	grid-template-rows: 1fr;
}

.hc-faq__a-inner {
	overflow: hidden;
	padding: 0 clamp(1.8rem, 1.5vw, 3.6rem);
	font-size: var(--hc-fs-18);
	color: var(--hc-body);
}

.hc-faq__item.is-open .hc-faq__a-inner {
	padding-bottom: clamp(1.8rem, 1.6vw, 3.6rem);
	padding-left: calc(clamp(1.8rem, 1.5vw, 3.6rem) + clamp(1.2rem, 1.25vw, 2.8rem) + 2.4rem);
}

.hc-faq__a-inner > :last-child {
	margin-bottom: 0;
}

.hc-faq-section--page {
	background: var(--hc-white);
	border-top: 0.1rem solid var(--hc-border);
}

@media (max-width: 991.98px) {
	.hc-faq-section__grid {
		grid-template-columns: 1fr;
	}

	.hc-faq-section__head {
		position: static;
	}

	.hc-faq__item.is-open .hc-faq__a-inner {
		padding-left: clamp(1.8rem, 1.5vw, 3.6rem);
	}
}

/* ---------------------------------------------------------------------
   19. Clients marquee (sliding logos)
   --------------------------------------------------------------------- */
.hc-marquee {
	position: relative;
	overflow: hidden;
	margin-top: clamp(3rem, 4vw, 9rem);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.hc-marquee__track {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 3vw, 7rem);
	width: max-content;
	animation: hcMarquee var(--hc-marquee-speed, 45s) linear infinite;
}

.hc-marquee:hover .hc-marquee__track {
	animation-play-state: paused;
}

.hc-marquee + .hc-marquee {
	margin-top: clamp(2rem, 2vw, 4.4rem);
}

.hc-marquee--reverse .hc-marquee__track {
	animation-direction: reverse;
}

@keyframes hcMarquee {
	to {
		transform: translateX(calc(-50% - clamp(2rem, 3vw, 7rem) / 2));
	}
}

.hc-marquee .hc-client {
	flex: 0 0 auto;
	min-width: clamp(16rem, 14vw, 30rem);
	height: clamp(7rem, 6vw, 13rem);
	padding: 0 clamp(1.6rem, 1.5vw, 3.2rem);
	border: 0.1rem solid var(--hc-border);
	border-radius: var(--hc-radius-sm);
	background: var(--hc-white);
}

.hc-marquee .hc-client__logo {
	max-height: clamp(4rem, 3.4vw, 7.6rem);
}

@media (prefers-reduced-motion: reduce) {
	.hc-marquee__track {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
   20. Blog index, single post, archives
   --------------------------------------------------------------------- */
.hc-filter__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	margin-left: 0.6rem;
	border-radius: var(--hc-radius-pill);
	background: rgba(0, 0, 0, 0.08);
	font-size: 1.1rem;
	font-weight: var(--hc-fw-semibold);
}

.hc-filter__btn.is-active .hc-filter__count {
	background: rgba(255, 255, 255, 0.2);
}

.hc-featured-post {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 0;
	margin-bottom: clamp(2.4rem, 2.5vw, 5.6rem);
	border-radius: var(--hc-radius);
	background: var(--hc-light);
	overflow: hidden;
}

.hc-featured-post__media {
	display: block;
	min-height: clamp(26rem, 26vw, 56rem);
}

.hc-featured-post__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--hc-t-slow);
}

.hc-featured-post:hover .hc-featured-post__img {
	transform: scale(1.04);
}

.hc-featured-post__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: clamp(2.4rem, 3vw, 7rem);
}

.hc-featured-post__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem;
	font-size: var(--hc-fs-16);
	color: var(--hc-muted);
	margin-bottom: clamp(1.6rem, 1.5vw, 3.2rem);
}

.hc-featured-post__title {
	font-size: var(--hc-fs-40);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 1.6rem;
}

.hc-featured-post__title a:hover {
	color: var(--hc-primary);
}

.hc-featured-post__excerpt {
	font-size: var(--hc-fs-18);
	color: var(--hc-body);
	margin-bottom: clamp(2rem, 2vw, 4.4rem);
}

.hc-single__inner {
	max-width: 96rem;
	margin: 0 auto;
}

.hc-share {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-top: clamp(3rem, 3vw, 6rem);
	padding-top: clamp(2rem, 2vw, 4rem);
	border-top: 0.1rem solid var(--hc-border);
}

.hc-share__label {
	font-size: var(--hc-fs-14);
	font-weight: var(--hc-fw-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hc-muted);
	margin-right: 0.8rem;
}

.hc-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.2rem;
	height: 4.2rem;
	border-radius: 50%;
	background: var(--hc-light);
	color: var(--hc-dark);
	font-size: 1.7rem;
	transition: all var(--hc-t);
}

.hc-share__link:hover {
	background: var(--hc-primary);
	color: var(--hc-white);
}

.hc-related .hc-card {
	background: var(--hc-white);
}

@media (max-width: 991.98px) {
	.hc-featured-post {
		grid-template-columns: 1fr;
	}

	.hc-featured-post__media {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

/* 8K / large screens: raster logo must scale with the header (height instead of max-height) */
.hc-logo--image .hc-logo__img {
	height: calc(var(--hc-header-h) * 0.5);
	max-height: none;
	width: auto;
}

.hc-footer .hc-logo--image .hc-logo__img {
	height: clamp(4.4rem, 3.2vw, 7rem);
}

.hc-loader__logo {
	width: auto;
	height: clamp(4rem, 3vw, 7rem);
}

/* Keep hero text clear of the slider controls on short viewports */
.hc-hero__content {
	padding-bottom: calc(clamp(3rem, 3vw, 7rem) + clamp(6rem, 4vw, 9rem));
}

/* Hero grows with its content on short viewports instead of clipping */
.hc-hero__swiper {
	height: auto;
	min-height: 100vh;
	min-height: 100svh;
}

.hc-hero__slide {
	min-height: 100vh;
	min-height: 100svh;
}

@media (min-width: 992px) {
	.hc-hero__content {
		padding-bottom: clamp(26rem, 24vw, 48rem);
	}

	.hc-hero__right {
		bottom: clamp(3rem, 3vw, 7rem);
	}
}


/* Desktop: hero is exactly one screen tall (reference). Only very short
   viewports let it grow so the text and cards never clip. */
@media (min-width: 992px) {
	.hc-hero__swiper,
	.hc-hero__slide {
		height: 100vh;
		height: 100svh;
		min-height: 64rem;
	}

	.hc-hero__content {
		padding-top: calc(var(--hc-header-h) + clamp(3rem, 5vw, 12rem));
		padding-bottom: calc(clamp(3rem, 3vw, 7rem) + 7rem);
	}
}

@media (min-width: 992px) and (max-height: 760px) {
	.hc-hero__swiper,
	.hc-hero__slide {
		height: auto;
		min-height: 100vh;
		min-height: 100svh;
	}

	.hc-hero__content {
		padding-bottom: clamp(24rem, 22vw, 44rem);
	}
}


/* Footer: tighter spacing, smaller outlined brand text, room for the WhatsApp button */
.hc-footer__grid {
	padding-top: clamp(3.2rem, 3.5vw, 8rem);
}

.hc-footer__col {
	padding-bottom: clamp(2.4rem, 2.5vw, 6rem);
}

.hc-footer__big {
	margin-top: 0;
	padding-top: clamp(1.6rem, 1.5vw, 3.6rem);
	line-height: 0.8;
}

.hc-footer__big-text {
	font-size: clamp(4.4rem, 10.5vw, 22rem);
	transform: translateY(0.04em);
}

.hc-footer__big-mark {
	top: clamp(1.6rem, 1.5vw, 3.6rem);
	width: clamp(2rem, 2vw, 4rem);
}

.hc-footer__bottom {
	padding: clamp(1.6rem, 1.5vw, 3.6rem) 0 clamp(2rem, 2vw, 4.4rem);
}

/* Keep the floating WhatsApp button clear of the footer's social icons */
@media (min-width: 992px) {
	.hc-footer__bottom-right {
		padding-right: calc(clamp(5.2rem, 3vw, 7rem) + 2rem);
	}
}

/* Hide the floating WhatsApp button while the footer is on screen (JS adds the class) */
.hc-whatsapp.is-parked {
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
}

.hc-whatsapp {
	transition: transform var(--hc-t), opacity var(--hc-t), visibility var(--hc-t);
}

/* Mobile hero: smaller title so long words fit, controls in normal flow below the text */
@media (max-width: 991.98px) {
	.hc-hero__title {
		font-size: clamp(3.4rem, 11vw, 6.4rem);
		overflow-wrap: anywhere;
	}

	.hc-hero__content {
		padding-bottom: 4rem;
	}

	.hc-hero__controls {
		position: static;
		transform: none;
		padding-top: 0;
		padding-bottom: 3rem;
		background: var(--hc-navy);
	}

	.hc-hero__swiper {
		background: var(--hc-navy);
	}
}

/* Mobile: hero text must clear the fixed bottom app bar */
@media (max-width: 991.98px) {
	.hc-hero__content {
		padding-bottom: calc(var(--hc-appbar-h) + 3rem);
	}
}

/* ---------------------------------------------------------------------
   Hero: always exactly one screen on desktop. On short viewports the
   content scales down instead of the banner growing.
   --------------------------------------------------------------------- */
@media (min-width: 992px) {
	.hc-hero__swiper,
	.hc-hero__slide {
		height: 100vh;
		height: 100svh;
		min-height: 56rem;
		max-height: 120rem;
	}

	.hc-hero__slide {
		overflow: hidden;
	}

	.hc-hero__content {
		padding-top: calc(var(--hc-header-h) + clamp(2rem, 4vw, 10rem));
		padding-bottom: 0;
	}

	.hc-hero__left {
		width: 52%;
	}
}

/* Short desktop viewports (typical 1366×768 laptop = ~650px usable) */
@media (min-width: 992px) and (max-height: 820px) {
	.hc-hero__content {
		padding-top: calc(var(--hc-header-h) + 1.6rem);
	}

	.hc-hero__title {
		font-size: clamp(3.4rem, 4.6vw, 6.4rem);
		line-height: 1;
	}

	.hc-hero__text {
		font-size: var(--hc-fs-18);
		margin-top: 1.6rem;
		max-width: 56rem;
	}

	.hc-hero__actions {
		margin-top: 2rem;
	}

	.hc-hero__actions .hc-btn {
		--btn-fs: var(--hc-fs-18);
		--btn-circle-size: 4.2rem;
		--btn-gap: 3rem;
	}

	.hc-hero__right {
		bottom: 2rem;
		gap: 1rem;
	}

	.hc-hero__pcard {
		width: 34%;
	}

	.hc-hero__pcard-media {
		aspect-ratio: 16 / 7;
	}

	.hc-hero__pcard .hc-pill {
		margin-top: 1rem;
	}

	.hc-glass {
		padding: 1.6rem;
	}

	.hc-glass__title {
		font-size: var(--hc-fs-20);
		margin-top: 1.2rem;
	}

	.hc-glass__text {
		font-size: 1.3rem;
		margin-top: 0.8rem;
	}

	.hc-pill {
		font-size: 1.1rem;
		padding: 0.5rem 1.1rem;
	}

	.hc-hero__controls {
		bottom: 2rem;
	}
}

@media (min-width: 992px) and (max-height: 680px) {
	.hc-hero__title {
		font-size: clamp(3rem, 4vw, 5.2rem);
	}

	.hc-hero__text {
		font-size: var(--hc-fs-16);
	}

	.hc-hero__pcard-media {
		display: none;
	}

	.hc-hero__pcard .hc-pill {
		margin-top: 0;
	}

	.hc-glass__text {
		display: none;
	}
}

/* Hero = exactly the screen, on every screen size (no max-height cap) */
@media (min-width: 992px) {
	.hc-hero__swiper,
	.hc-hero__slide {
		height: 100vh;
		height: 100svh;
		max-height: none;
		min-height: 0;
	}
}

/* Reference-style: image stays bright; only a light gradient for text legibility */
.hc-hero__overlay {
	background: linear-gradient(90deg, rgba(8, 30, 80, 0.38) 0%, rgba(8, 30, 80, 0.12) 50%, rgba(8, 30, 80, 0) 100%);
}

@media (max-width: 991.98px) {
	.hc-hero__overlay {
		background: linear-gradient(180deg, rgba(8, 30, 80, 0.15) 0%, rgba(8, 30, 80, 0.75) 100%);
	}
}

/* Products card line-art fills the card */
.hc-hero__pcard-media {
	aspect-ratio: 16 / 11;
}

.hc-hero__pcard-img {
	filter: drop-shadow(0 0.4rem 1.2rem rgba(0, 0, 0, 0.3));
}

/* Short desktop viewports: keep every card complete, just more compact */
@media (min-width: 992px) and (max-height: 820px) {
	.hc-hero__right {
		width: calc(52% - var(--hc-pad));
	}

	.hc-hero__left {
		width: 46%;
	}

	.hc-hero__pcard {
		width: 36%;
	}

	.hc-hero__pcard-media {
		aspect-ratio: 16 / 8;
	}
}

@media (min-width: 992px) and (max-height: 680px) {
	.hc-hero__pcard-media {
		display: block;
		aspect-ratio: 16 / 6;
	}

	.hc-glass__text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 1.2rem;
	}

	.hc-glass__title {
		font-size: var(--hc-fs-18);
		margin-top: 0.8rem;
	}

	.hc-glass {
		padding: 1.2rem 1.4rem;
	}

	.hc-hero__title {
		font-size: clamp(2.8rem, 3.6vw, 4.8rem);
	}

	.hc-hero__text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* Screenshot mode on mobile: emulate an 844px-tall phone inside a tall capture */
@media (max-width: 991.98px) {
	.hc-shot .hc-hero__swiper,
	.hc-shot .hc-hero__slide {
		min-height: 78rem;
	}
}

/* ---------------------------------------------------------------------
   Hero intro animations in pure CSS (never depends on JS to become visible)
   --------------------------------------------------------------------- */
@keyframes hcRise {
	from {
		opacity: 0;
		transform: translateY(110%);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes hcFadeUp {
	from {
		opacity: 0;
		transform: translateY(2.4rem);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hc-hero__slide .hc-display__inner,
.hc-hero__slide [data-hero-text],
.hc-hero__slide [data-hero-actions] {
	opacity: 1;
	transform: none;
}

body:not(.hc-loading) .swiper-slide-active .hc-display__inner {
	animation: hcRise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body:not(.hc-loading) .swiper-slide-active .hc-display__line:nth-child(2) .hc-display__inner {
	animation-delay: 0.1s;
}

body:not(.hc-loading) .swiper-slide-active .hc-display__line:nth-child(3) .hc-display__inner {
	animation-delay: 0.2s;
}

body:not(.hc-loading) .swiper-slide-active .hc-display__line:nth-child(4) .hc-display__inner {
	animation-delay: 0.3s;
}

body:not(.hc-loading) .swiper-slide-active [data-hero-text] {
	animation: hcFadeUp 0.7s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body:not(.hc-loading) .swiper-slide-active [data-hero-actions] {
	animation: hcFadeUp 0.7s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body:not(.hc-loading) .hc-hero__right .hc-glass {
	animation: hcFadeUp 0.8s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

body:not(.hc-loading) .hc-hero__right .hc-hero__card--wide {
	animation-delay: 0.55s;
}

body:not(.hc-loading) .hc-hero__right .hc-hero__card:not(.hc-hero__card--wide) {
	animation-delay: 0.7s;
}

/* Loader can never trap the page: auto-dismisses after 4.5s even without JS */
.hc-loader {
	animation: hcLoaderOut 0.5s 4.5s ease forwards;
}

@keyframes hcLoaderOut {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

body.hc-loading {
	overflow: auto;
}

.hc-shot .hc-hero__slide *,
.hc-shot .hc-hero__right .hc-glass,
.hc-shot .hc-loader {
	animation: none !important;
}

/* Glass cards: reference-like contrast on bright backgrounds */
.hc-hero .hc-glass {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.42);
	box-shadow: 0 1.2rem 3.2rem rgba(5, 25, 70, 0.22);
}

.hc-hero .hc-glass:hover {
	background: rgba(255, 255, 255, 0.24);
	border-color: rgba(255, 255, 255, 0.6);
}

.hc-hero__overlay {
	background:
		linear-gradient(180deg, rgba(8, 30, 80, 0) 45%, rgba(8, 30, 80, 0.45) 100%),
		linear-gradient(90deg, rgba(8, 30, 80, 0.35) 0%, rgba(8, 30, 80, 0.08) 55%, rgba(8, 30, 80, 0) 100%);
}

/* WordPress admin bar pushes the page down: subtract it from the hero height */
@media (min-width: 992px) {
	.admin-bar .hc-hero__swiper,
	.admin-bar .hc-hero__slide {
		height: calc(100vh - 32px);
		height: calc(100svh - 32px);
	}
}

/* Short desktop viewports (≈ 1366×768 laptops, ~640px usable): the three
   cards sit in ONE row at the bottom-right so nothing is cut off */
@media (min-width: 992px) and (max-height: 760px) {
	.hc-hero__content {
		padding-top: calc(var(--hc-header-h) + 1rem);
	}

	.hc-hero__left {
		width: 38%;
	}

	.hc-hero__title {
		font-size: clamp(3rem, 3.8vw, 5rem);
	}

	.hc-hero__right {
		flex-direction: row;
		align-items: stretch;
		width: calc(60% - var(--hc-pad));
		gap: 1rem;
		bottom: 1.6rem;
	}

	.hc-hero__pcard {
		flex: 0 0 24%;
		width: 24%;
		justify-content: space-between;
	}

	.hc-hero__pcard-media {
		display: flex;
		aspect-ratio: 4 / 3;
	}

	.hc-hero__pcard .hc-pill {
		margin-top: 0.8rem;
		padding-inline: 1rem;
		font-size: 1rem;
	}

	.hc-hero__cards {
		flex: 1;
		gap: 1rem;
	}

	.hc-hero__card--wide {
		width: 58%;
	}

	.hc-hero__card:not(.hc-hero__card--wide) {
		width: 42%;
	}

	.hc-glass {
		padding: 1.4rem 1.6rem;
	}

	.hc-glass__title {
		font-size: var(--hc-fs-18);
		margin-top: 1rem;
	}

	.hc-glass__text {
		font-size: 1.2rem;
		margin-top: 0.6rem;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.hc-hero__controls {
		bottom: 1.6rem;
	}

	.hc-whatsapp {
		bottom: 1.6rem;
		width: 4.6rem;
		height: 4.6rem;
		font-size: 2.2rem;
	}
}

/* =====================================================================
   HERO – desktop layout mirrored from the reference (all sizes in vw,
   content block bottom-aligned, hero = min one screen, grows only if
   content needs it). These rules come last and win.
   ===================================================================== */
@media (min-width: 992px) {
	.hc-hero__swiper,
	.hc-hero__slide,
	.admin-bar .hc-hero__swiper,
	.admin-bar .hc-hero__slide {
		height: auto;
		min-height: 100vh;
		min-height: 100svh;
		max-height: none;
	}

	.admin-bar .hc-hero__swiper,
	.admin-bar .hc-hero__slide {
		min-height: calc(100vh - 32px);
		min-height: calc(100svh - 32px);
	}

	.hc-hero__slide {
		display: flex;
		align-items: flex-end;
	}

	.hc-hero__content {
		display: flex;
		align-items: flex-end;
		width: 100%;
		padding: 6.5vw var(--hc-pad) 4.6vw;
	}

	.hc-hero__left {
		width: 50%;
		padding-right: 2vw;
	}

	.hc-hero__title {
		font-size: 5.73vw;
		line-height: 1.02;
		letter-spacing: -0.3vw;
		margin-top: 1vw;
	}

	.hc-hero__text {
		width: 90%;
		max-width: none;
		font-size: 1.25vw;
		line-height: 1.41;
		margin-top: 2vw;
		display: block;
		-webkit-line-clamp: unset;
	}

	.hc-hero__actions {
		margin-top: 3.5vw;
		gap: 1vw;
	}

	.hc-hero__actions .hc-btn {
		--btn-fs: 1.2vw;
		--btn-circle-size: 2.5vw;
		--btn-gap: 4vw;
		--btn-pad-l: 1.35vw;
		padding: 0.3vw;
		padding-left: var(--btn-pad-l);
	}

	.hc-hero__right {
		position: static;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 1vw;
		bottom: auto;
		right: auto;
	}

	.hc-hero__pcard {
		flex: 0 0 auto;
		width: 37.93%;
		justify-content: flex-start;
	}

	.hc-hero__pcard-media {
		display: flex;
		aspect-ratio: 4 / 3;
	}

	.hc-hero__pcard .hc-pill {
		margin-top: 1.5vw;
		font-size: 0.83vw;
		padding: 0.6vw 1vw;
	}

	.hc-hero__cards {
		display: flex;
		flex: 0 0 auto;
		width: 100%;
		gap: 1vw;
	}

	.hc-hero__card--wide {
		width: 62.07%;
	}

	.hc-hero__card:not(.hc-hero__card--wide) {
		width: 37.93%;
	}

	.hc-hero .hc-glass {
		padding: 1.5vw;
		border-radius: 1.25vw;
	}

	.hc-hero .hc-pill {
		font-size: 0.83vw;
		padding: 0.45vw 1vw;
	}

	.hc-hero .hc-glass__title {
		font-size: 1.35vw;
		line-height: 1.2;
		margin-top: 1.6vw;
	}

	.hc-hero .hc-glass__text {
		display: block;
		font-size: 0.9vw;
		line-height: 1.4;
		margin-top: 0.75vw;
		-webkit-line-clamp: unset;
		overflow: visible;
	}

	.hc-hero .hc-glass__arrow {
		font-size: 1.25vw;
	}

	.hc-hero__controls {
		position: absolute;
		left: 0;
		bottom: 1.2vw;
		transform: none;
	}

	.hc-hero__arrow {
		width: 2.4vw;
		height: 2.4vw;
		font-size: 1vw;
	}

	.hc-whatsapp {
		width: 3vw;
		height: 3vw;
		font-size: 1.5vw;
		right: var(--hc-pad);
		bottom: 1.2vw;
	}
}

@media (min-width: 992px) {
	/* Right column lives outside the slider, so it is pinned to the content's bottom edge */
	.hc-hero__right {
		position: absolute;
		right: var(--hc-pad);
		bottom: 4.6vw;
		width: calc(50% - var(--hc-pad));
		z-index: 3;
	}

	/* Hero is at least as tall as the right column (≈36vw) + paddings */
	.hc-hero__content {
		min-height: 47vw;
	}
}

@media (min-width: 992px) {
	.hc-hero__content {
		min-height: 46vw;
		padding-bottom: 4.2vw;
	}

	.hc-hero__right {
		bottom: 4.2vw;
	}

	.hc-hero__controls {
		bottom: 0.9vw;
	}
}

/* Floating WhatsApp hides while the hero is on screen (it would sit on the cards) */
.hc-whatsapp.is-parked-hero {
	opacity: 0;
	visibility: hidden;
	transform: translateY(1rem);
}

/* Display headings: inner line as block (inline-block added baseline gap per line) */
.hc-display__inner {
	display: block;
}

.hc-display__line {
	padding-bottom: 0.06em;
	margin-bottom: -0.06em;
}

@media (min-width: 992px) {
	.hc-hero__title {
		font-size: 5.2vw;
		letter-spacing: -0.22vw;
		margin-top: 0.5vw;
	}

	.hc-hero__text {
		margin-top: 1.6vw;
	}

	.hc-hero__actions {
		margin-top: 2.8vw;
	}
}

/* Vision section: tighter vertical spacing */
.hc-vision {
	padding: clamp(4rem, 4vw, 9rem) 0;
}

.hc-vision .hc-eyebrow {
	margin-bottom: 0;
}

.hc-vision__body {
	padding: clamp(4rem, 5vw, 12rem) 0 clamp(2rem, 3vw, 7rem);
}

.hc-vision__text {
	font-size: clamp(2.6rem, 3.3vw, 6.4rem);
}

/* Screenshot mode (?shot=1) on desktop: cap hero at a fixed height so tall captures show the sections below */
@media (min-width: 992px) {
	.hc-shot .hc-hero__swiper,
	.hc-shot .hc-hero__slide {
		min-height: 64rem;
	}
}

/* WhatsApp button stays visible over the footer; footer icons keep clear of it */
.hc-whatsapp.is-parked {
	opacity: 1;
	visibility: visible;
	transform: none;
}

@media (min-width: 992px) {
	.hc-footer__bottom-right {
		padding-right: calc(3vw + 2.4rem);
	}
}

@media (max-width: 991.98px) {
	.hc-footer__bottom-right {
		padding-right: 0;
	}
}

/* ---------------------------------------------------------------------
   Blog: plain grid like the reference (no title band), full-image cards
   --------------------------------------------------------------------- */
.hc-blog-index--plain {
	padding-top: calc(var(--hc-header-h) + clamp(2rem, 2.5vw, 5.6rem));
}

.hc-post-card--full {
	padding: 0;
	overflow: hidden;
	background: var(--hc-white);
	border: 0.1rem solid var(--hc-border);
}

.hc-post-card--full .hc-post-card__media {
	width: 100%;
	aspect-ratio: 16 / 11;
	border-radius: 0;
}

.hc-post-card--full .hc-post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.8rem, 1.5vw, 3.6rem) clamp(1.8rem, 1.5vw, 3.6rem) clamp(2rem, 1.75vw, 4rem);
}

.hc-post-card--full .hc-post-card__title {
	margin-top: 0;
	font-size: var(--hc-fs-26);
	-webkit-line-clamp: 3;
}

.hc-post-card--full .hc-post-card__excerpt {
	-webkit-line-clamp: 3;
}

.hc-post-card--full:hover {
	box-shadow: var(--hc-shadow);
	background: var(--hc-white);
}

.hc-blog-index .hc-pagination {
	margin-top: clamp(3rem, 3vw, 7rem);
}

/* Nav hover: blob lives inside the pill, smooth slide (reference feel) */
.hc-nav__list {
	position: relative;
	isolation: isolate;
}

.hc-nav__list .hc-nav__indicator {
	position: absolute;
	top: 50%;
	left: 0;
	height: 85%;
	border-radius: 1.25vw;
	background: var(--hc-primary-deep);
	z-index: 0;
	transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, opacity 0.2s ease;
}

.hc-nav__list .hc-nav__item,
.hc-nav__list .hc-nav__link {
	position: relative;
	z-index: 1;
}

.hc-nav__list .hc-nav__panel {
	z-index: 2;
}

/* Dropdown rows with category thumbnails */
.hc-nav__sub-icon--img {
	overflow: hidden;
	background: var(--hc-light-2);
}

.hc-nav__sub-icon--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.hc-nav__sub:hover .hc-nav__sub-icon--img {
	background: var(--hc-light-2);
}

/* Dropdown panel spans the whole nav pill (items stay static, links above the blob) */
.hc-nav__list .hc-nav__item {
	position: static;
}

.hc-nav:not(.hc-nav--mobile) .hc-nav__panel {
	left: 0;
	width: 100%;
	padding-top: 1vw;
}

.hc-nav__panel-list {
	border-radius: 0.85vw;
	padding: 0.75vw 1.75vw;
}

.hc-nav__sub-desc {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------------
   Mobile hero: long words wrap, text never clips
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.hc-hero__title {
		font-size: clamp(3.2rem, 10vw, 5.6rem);
		letter-spacing: -0.03em;
		line-height: 1.02;
	}

	.hc-hero__title .hc-display__inner {
		overflow-wrap: anywhere;
		white-space: normal;
	}

	.hc-hero__text {
		width: 100%;
		max-width: none;
		font-size: clamp(1.5rem, 4.4vw, 2rem);
		line-height: 1.5;
		white-space: normal;
	}

	.hc-hero__controls {
		display: flex;
		position: static;
		padding: 2rem var(--hc-pad) 0;
	}
}

/* ---------------------------------------------------------------------
   About page
   --------------------------------------------------------------------- */
.hc-about-page {
	overflow: hidden;
}

.hc-about-page__grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(3rem, 4vw, 9rem);
	align-items: center;
}

.hc-about-page__media {
	border-radius: var(--hc-radius);
	overflow: hidden;
}

.hc-about-page__img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.hc-about-page__img--line {
	aspect-ratio: auto;
	object-fit: contain;
	opacity: 0.8;
}

.hc-about-page__content {
	max-width: 96rem;
	margin-top: clamp(3rem, 3vw, 7rem);
}

.hc-stairs--page {
	margin-top: clamp(4rem, 4vw, 9rem);
}

.hc-values__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.4rem, 1.5vw, 3.2rem);
	margin-top: clamp(3rem, 3vw, 7rem);
}

.hc-value {
	background: var(--hc-white);
}

.hc-value__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(4.8rem, 3.2vw, 7rem);
	height: clamp(4.8rem, 3.2vw, 7rem);
	border-radius: 50%;
	background: var(--hc-primary-light);
	color: var(--hc-primary);
	font-size: clamp(2.2rem, 1.5vw, 3.2rem);
	margin-bottom: clamp(1.6rem, 1.5vw, 3.2rem);
}

.hc-value__title {
	font-size: var(--hc-fs-24);
	font-weight: var(--hc-fw-semibold);
	margin: 0 0 0.8rem;
}

.hc-value__text {
	font-size: var(--hc-fs-18);
	color: var(--hc-body);
	margin: 0;
}

.hc-about-cta__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 2.4rem;
	padding-top: clamp(3rem, 3vw, 7rem);
	padding-bottom: clamp(3rem, 3vw, 7rem);
	border-top: 0.1rem solid var(--hc-border);
}

.hc-about-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}

/* ---------------------------------------------------------------------
   Careers page
   --------------------------------------------------------------------- */
.hc-perks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.4rem, 1.5vw, 3.2rem);
	margin-top: clamp(3rem, 3vw, 7rem);
}

.hc-perk {
	padding: clamp(1.8rem, 1.5vw, 3.6rem);
	border-radius: var(--hc-radius);
	background: var(--hc-light);
}

.hc-perk__num {
	display: block;
	font-size: var(--hc-fs-16);
	font-weight: var(--hc-fw-semibold);
	color: var(--hc-accent);
	margin-bottom: clamp(2rem, 2.5vw, 5.6rem);
}

.hc-perk__title {
	font-size: var(--hc-fs-24);
	font-weight: var(--hc-fw-semibold);
	margin: 0 0 0.8rem;
}

.hc-perk__text {
	font-size: var(--hc-fs-18);
	color: var(--hc-body);
	margin: 0;
}

.hc-openings__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 3vw, 7rem);
	align-items: end;
	margin-bottom: clamp(2.4rem, 2.5vw, 5.6rem);
}

.hc-jobs {
	display: grid;
	gap: clamp(1rem, 1vw, 2.2rem);
}

.hc-job {
	background: var(--hc-white);
	border: 0.1rem solid var(--hc-border);
	border-radius: var(--hc-radius);
	overflow: hidden;
	transition: box-shadow var(--hc-t), border-color var(--hc-t);
}

.hc-job.is-open {
	border-color: var(--hc-primary);
	box-shadow: var(--hc-shadow);
}

.hc-job__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	padding: clamp(1.8rem, 1.6vw, 3.6rem) clamp(1.8rem, 1.5vw, 3.6rem);
	border: 0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	color: var(--hc-dark);
}

.hc-job__main {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	min-width: 0;
}

.hc-job__title {
	font-size: var(--hc-fs-26);
	font-weight: var(--hc-fw-semibold);
	line-height: 1.2;
}

.hc-job__summary {
	font-size: var(--hc-fs-18);
	color: var(--hc-body);
}

.hc-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.8rem;
	margin-top: 0.4rem;
	font-size: var(--hc-fs-14);
	font-weight: var(--hc-fw-medium);
	color: var(--hc-muted);
}

.hc-job__meta i {
	color: var(--hc-primary);
}

.hc-job__meta--single {
	margin-bottom: clamp(2rem, 2vw, 4.4rem);
	font-size: var(--hc-fs-16);
}

.hc-job__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(3.6rem, 2.5vw, 5.6rem);
	height: clamp(3.6rem, 2.5vw, 5.6rem);
	border-radius: 50%;
	background: var(--hc-light);
	color: var(--hc-primary);
	transition: transform var(--hc-t), background var(--hc-t), color var(--hc-t);
}

.hc-job.is-open .hc-job__icon {
	transform: rotate(45deg);
	background: var(--hc-primary);
	color: var(--hc-white);
}

.hc-job__body {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--hc-t-slow);
}

.hc-job.is-open .hc-job__body {
	grid-template-rows: 1fr;
}

.hc-job__inner {
	overflow: hidden;
	padding: 0 clamp(1.8rem, 1.5vw, 3.6rem);
}

.hc-job.is-open .hc-job__inner {
	padding-bottom: clamp(2rem, 2vw, 4.4rem);
}

.hc-job__inner .hc-prose {
	border-top: 0.1rem solid var(--hc-border);
	padding-top: clamp(1.6rem, 1.5vw, 3.2rem);
}

.hc-job__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem;
	margin-top: clamp(2rem, 2vw, 4.4rem);
}

.hc-job__mail {
	font-size: var(--hc-fs-16);
	font-weight: var(--hc-fw-medium);
	color: var(--hc-primary);
}

.hc-form input[type="file"] {
	width: 100%;
	padding: 1rem;
	border: 0.15rem dashed var(--hc-border-2);
	border-radius: var(--hc-radius-sm);
	font-size: var(--hc-fs-14);
	background: var(--hc-light);
}

@media (max-width: 991.98px) {
	.hc-about-page__grid,
	.hc-openings__head {
		grid-template-columns: 1fr;
	}

	.hc-values__grid,
	.hc-perks {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 575.98px) {
	.hc-values__grid,
	.hc-perks {
		grid-template-columns: 1fr;
	}

	.hc-job__head {
		align-items: flex-start;
	}
}

/* Footer brand text: letters rise in, then a light sweep keeps moving */
.hc-footer__big-text {
	display: flex;
	overflow: hidden;
}

.hc-footer__ch {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s ease;
	transition-delay: calc(var(--i, 0) * 70ms);
	will-change: transform;
}

.hc-footer__big.is-visible .hc-footer__ch {
	transform: translateY(0);
	opacity: 1;
}

.hc-footer__big.is-visible .hc-footer__big-text {
	background: linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 70%);
	background-size: 250% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	animation: hcSheen 4.5s linear 1.4s infinite;
}

@keyframes hcSheen {
	from {
		background-position: 150% 0;
	}

	to {
		background-position: -150% 0;
	}
}

.hc-footer__big-mark {
	transform: rotate(-90deg) scale(0.6);
	opacity: 0;
	transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s, opacity 0.6s ease 0.5s;
}

.hc-footer__big.is-visible .hc-footer__big-mark {
	transform: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.hc-footer__ch {
		transform: none;
		opacity: 1;
		transition: none;
	}

	.hc-footer__big.is-visible .hc-footer__big-text {
		animation: none;
	}
}

/* Mobile hero: compact (reference ≈ 60% of screen), content bottom-aligned */
@media (max-width: 991.98px) {
	.hc-hero__swiper,
	.hc-hero__slide,
	.hc-shot .hc-hero__swiper,
	.hc-shot .hc-hero__slide {
		height: auto;
		min-height: 0;
	}

	.hc-hero__slide {
		min-height: 62svh;
		min-height: 62vh;
		align-items: flex-end;
	}

	.hc-hero__content {
		padding-top: calc(var(--hc-header-h) + 8vw);
		padding-bottom: 6vw;
	}

	.hc-hero__actions {
		margin-top: 6vw;
	}

	.hc-hero__controls {
		padding: 3vw var(--hc-pad) 0;
	}

	.hc-hero__right {
		padding-top: 2vw;
		padding-bottom: 8vw;
	}
}

/* Mobile: slider controls sit inside the banner, bottom-left */
@media (max-width: 991.98px) {
	.hc-hero__controls {
		position: absolute;
		left: 0;
		bottom: 5vw;
		padding: 0 var(--hc-pad);
		background: transparent;
		z-index: 5;
	}

	.hc-hero__content {
		padding-bottom: 18vw;
	}

	.hc-hero__arrow {
		width: 4rem;
		height: 4rem;
		font-size: 1.6rem;
	}
}

/* Brand yellow accent (from the logo) for dots, lines and highlights */
.hc-hero__pagination .swiper-pagination-bullet-active,
.hc-slider__bullet.is-active {
	background: var(--hc-accent);
}

.hc-line__bar,
.hc-industry__rule {
	background: var(--hc-accent);
}

.hc-eyebrow--dark .hc-line__bar {
	background: var(--hc-accent);
}

.hc-stat__suffix,
.hc-faq__num,
.hc-perk__num,
.hc-industry__num,
.hc-loader__dot,
.hc-post-card__date {
	color: var(--hc-accent);
}

.hc-loader__dot {
	background: var(--hc-accent);
}

.hc-btn--accent {
	--btn-bg: var(--hc-accent);
	--btn-border: var(--hc-accent);
	--btn-color: var(--hc-dark);
	--btn-circle: var(--hc-dark);
	--btn-arrow: var(--hc-accent);
}

.hc-header__phone i,
.hc-offcanvas__line i,
.hc-footer__contact i {
	color: var(--hc-accent);
}

.hc-footer__title::after,
.hc-about__badge {
	background: var(--hc-accent);
}

.hc-about__badge {
	color: var(--hc-dark);
}

.hc-checklist i {
	color: var(--hc-accent-dark);
}

.hc-hero__label::before {
	background: var(--hc-accent);
	box-shadow: 0 0 0 0.4rem rgba(var(--hc-accent-rgb), 0.3);
}

.hc-breadcrumb__current {
	color: var(--hc-accent);
}

/* Mobile: hide the decorative "Explore our product range" intro card */
@media (max-width: 991.98px) {
	.hc-cat--intro {
		display: none;
	}
}

/* Mobile menu: fits one screen, contact block pinned to the bottom */
.hc-offcanvas {
	height: 100%;
	height: 100dvh;
}

.hc-offcanvas__head {
	flex: 0 0 auto;
	padding: 1.2rem var(--bs-offcanvas-padding-x);
}

.hc-offcanvas__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 1rem var(--bs-offcanvas-padding-x) 1.6rem;
}

.hc-nav--mobile {
	flex: 1 1 auto;
}

.hc-nav--mobile .hc-nav__list {
	gap: 0;
	font-size: 1.6rem;
}

.hc-nav--mobile .hc-nav__link {
	padding: 1rem 1.2rem;
}

.hc-nav--mobile .hc-nav__toggle {
	width: 3.8rem;
	height: 3.8rem;
}

.hc-offcanvas__contact {
	flex: 0 0 auto;
	margin-top: auto;
	padding-top: 1.6rem;
	gap: 0.8rem;
}

.hc-offcanvas__contact .hc-btn {
	--btn-fs: 1.5rem;
	--btn-circle-size: 3.8rem;
	min-height: 0;
	margin-bottom: 0.4rem;
}

.hc-offcanvas__line {
	font-size: 1.35rem;
	line-height: 1.4;
	gap: 1rem;
}

.hc-offcanvas__contact .hc-social {
	margin-top: 0.4rem;
}

.hc-offcanvas__contact .hc-social__link {
	width: 3.6rem;
	height: 3.6rem;
	font-size: 1.5rem;
}

@media (max-height: 640px) {
	.hc-nav--mobile .hc-nav__link {
		padding: 0.7rem 1.2rem;
	}

	.hc-offcanvas__contact .hc-btn {
		display: none;
	}
}

/* Mobile menu: obvious sub-menu indicator; whole row toggles */
.hc-nav--mobile .hc-nav__item.has-children > .hc-nav__link {
	flex: 1;
}

.hc-nav--mobile .hc-nav__toggle {
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 50%;
	background: var(--hc-primary);
	color: var(--hc-white);
	font-size: 1.3rem;
	box-shadow: 0 0.4rem 1rem rgba(var(--hc-primary-rgb), 0.3);
}

.hc-nav--mobile .hc-nav__toggle i::before {
	content: "\f282"; /* chevron-down */
}

.hc-nav--mobile .hc-nav__item.is-open > .hc-nav__toggle {
	transform: rotate(180deg);
	background: var(--hc-dark);
}

.hc-nav--mobile .hc-nav__item.has-children > .hc-nav__link::after {
	content: attr(data-count);
	margin-left: 0.8rem;
	padding: 0.2rem 0.8rem;
	border-radius: var(--hc-radius-pill);
	background: var(--hc-light);
	color: var(--hc-muted);
	font-size: 1.1rem;
	font-weight: var(--hc-fw-semibold);
}

.hc-nav--mobile .hc-nav__panel {
	padding: 0.2rem 0 0.6rem;
}

.hc-nav--mobile .hc-nav__panel-list {
	padding: 0.2rem 1.2rem;
	border-radius: var(--hc-radius-sm);
}

.hc-nav--mobile .hc-nav__panel-item + .hc-nav__panel-item {
	border-top-width: 0.1rem;
}

.hc-nav--mobile .hc-nav__sub {
	padding: 0.9rem 0;
	gap: 1rem;
}

.hc-nav--mobile .hc-nav__sub-icon {
	width: 3.8rem;
	height: 3.8rem;
}

.hc-nav--mobile .hc-nav__sub-title {
	font-size: 1.45rem;
}

.hc-nav--mobile .hc-nav__sub-desc {
	display: none;
}

.hc-nav--mobile .hc-nav__sub-arrow {
	font-size: 1.3rem;
}

.hc-nav--mobile .hc-nav__panel-item--all .hc-nav__sub-title {
	color: var(--hc-primary);
}

.hc-nav--mobile .hc-nav__toggle i::before {
	content: "\f282";
}

.hc-nav--mobile .hc-nav__item.is-open > .hc-nav__toggle {
	transform: rotate(180deg);
}

.hc-nav:not(.hc-nav--mobile) .hc-nav__toggle {
	display: none;
}

/* ---------------------------------------------------------------------
   Contact Form 7 core rules (its own stylesheet is disabled by the theme,
   so these must live here): screen-reader error list stays hidden, empty
   / in-progress message box hidden, spinner only while sending.
   --------------------------------------------------------------------- */
.wpcf7 .screen-reader-response {
	position: absolute !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	clip-path: inset(50%) !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	word-wrap: normal !important;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output,
.wpcf7 .wpcf7-response-output:empty {
	display: none !important;
}

.wpcf7-form-control-wrap {
	position: relative;
	display: block;
}

.wpcf7-not-valid-tip {
	display: block;
}

.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}

.wpcf7 [inert] {
	opacity: 0.5;
}