/*
 * HÜBNER Product Template - frontend styles.
 * Everything is scoped under .hubner-product-template so the Avada theme,
 * header, navigation and footer are never affected.
 */

.hubner-product-template {
	--hubner-brand: #009de2;
	--hubner-primary: #1589c6;
	--hubner-primary-dark: #124161;
	--hubner-cta: #ed6e12;
	--hubner-cta-dark: #cf5604;
	--hubner-navy: #0b263c;
	--hubner-navy-fg: #f2f6f8;
	--hubner-fg: #162631;
	--hubner-muted-fg: #5f6b74;
	--hubner-surface: #f3f6f8;
	--hubner-muted: #f1f4f6;
	--hubner-border: #d9dfe3;
	--hubner-bg: #ffffff;
	--hubner-accent: #dfeef7;
	--hubner-radius: 4px;
	--hubner-nav-offset: 0px;

	color: var(--hubner-fg);
	background: var(--hubner-bg);
	font-size: 16px;
	line-height: 1.6;
	/* clip prevents horizontal paint overflow without creating the scroll
	 * container that would disable position: sticky on the section nav. */
	overflow-x: clip;

	/* Break out of Avada's boxed .fusion-row while keeping section content
	 * constrained by .hubner-container. This affects only opted-in products. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.hubner-product-template *,
.hubner-product-template *::before,
.hubner-product-template *::after {
	box-sizing: border-box;
}

.hubner-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

.hubner-section {
	padding: 64px 0;
	scroll-margin-top: calc(var(--hubner-nav-offset) + 24px);
}

.hubner-section--surface {
	background: var(--hubner-surface);
}

.hubner-section--muted {
	background: var(--hubner-muted);
}

.hubner-section--navy {
	background: var(--hubner-navy);
	color: var(--hubner-navy-fg);
}

.hubner-product-template h1,
.hubner-product-template h2,
.hubner-product-template h3 {
	margin: 0;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: inherit;
}

.hubner-product-template p {
	margin: 0;
}

.hubner-eyebrow {
	display: inline-block;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--hubner-primary);
}

.hubner-section--navy .hubner-eyebrow {
	color: var(--hubner-brand);
}

.hubner-section-heading {
	max-width: 760px;
	margin-bottom: 40px;
}

.hubner-section-title {
	margin-top: 12px;
	font-size: clamp(1.6rem, 3.2vw, 2.35rem);
	font-weight: 600;
	color: var(--hubner-fg);
}

.hubner-section--navy .hubner-section-title,
.hubner-comparison .hubner-section-title {
	color: #fff;
}

.hubner-section-intro {
	margin-top: 16px;
	color: var(--hubner-muted-fg);
	font-size: 1.05rem;
}

.hubner-section--navy .hubner-section-intro {
	color: rgba(242, 246, 248, 0.78);
}

.hubner-icon {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	flex: none;
}

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

.hubner-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hubner-btn--cta {
	background: var(--hubner-cta);
	color: #fff;
}

.hubner-btn--cta:hover,
.hubner-btn--cta:focus {
	background: var(--hubner-cta-dark);
	color: #fff;
}

.hubner-btn--brand {
	background: var(--hubner-brand);
	color: #fff;
}

.hubner-btn--brand:hover,
.hubner-btn--brand:focus {
	background: #0089c6;
	color: #fff;
}

.hubner-btn--outline {
	border-color: rgba(22, 38, 49, 0.25);
	color: inherit;
}

.hubner-btn--outline:hover,
.hubner-btn--outline:focus {
	border-color: var(--hubner-brand);
	color: var(--hubner-brand);
}

.hubner-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--hubner-primary);
	text-decoration: none;
}

.hubner-link:hover {
	text-decoration: underline;
}

.hubner-product-template :focus-visible {
	outline: 2px solid var(--hubner-brand);
	outline-offset: 2px;
}

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

/* Avada normally inserts a breadcrumb/title band and page padding before the
 * product. The Lovable design starts directly below the site header. */
.hubner-product-template-active .fusion-page-title-bar,
.hubner-product-template-active .avada-page-titlebar-wrapper {
	display: none !important;
}

.hubner-product-template-active #main {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.hubner-hero {
	padding: 72px 0 76px;
	background: radial-gradient(circle at 75% 35%, #123e5a 0%, #0b2d44 36%, #08263a 100%);
	color: #fff;
}

.hubner-hero__grid {
	display: grid;
	gap: 40px;
	align-items: center;
}

.hubner-hero .hubner-eyebrow {
	color: #35b6e9;
}

.hubner-hero__title {
	margin-top: 14px;
	max-width: 650px;
	font-size: clamp(2.5rem, 5vw, 4.35rem);
	font-weight: 700;
	letter-spacing: -0.025em;
}

.hubner-hero__intro {
	margin-top: 20px;
	max-width: 600px;
	font-size: 1.1rem;
	color: rgba(255, 255, 255, 0.76);
}

.hubner-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.hubner-hero__download {
	margin-top: 18px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.82);
}

.hubner-hero__download-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.hubner-hero__download-link:hover,
.hubner-hero__download-link:focus {
	color: var(--hubner-brand);
}

.hubner-hero__media {
	position: relative;
	min-height: 360px;
}

.hubner-hero__media > img:first-child {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	margin: 0;
	height: auto;
	filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.28));
}

.hubner-hero .hubner-btn--outline {
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: #fff;
	background: transparent;
}

.hubner-hero .hubner-btn--outline:hover,
.hubner-hero .hubner-btn--outline:focus {
	border-color: #fff;
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

/* Metrics ---------------------------------------------------------------- */

.hubner-metrics {
	padding: 0;
	background: #08263a;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.hubner-metrics__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.hubner-metrics__item {
	background: #08263a;
	padding: 26px 22px;
	margin: 0;
}

.hubner-metrics__value {
	display: flex;
	align-items: baseline;
	gap: 4px;
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	font-weight: 700;
	color: #2fb4e7;
}

.hubner-metrics__unit {
	font-size: 0.5em;
	font-weight: 600;
	margin: 0;
	color: #2fb4e7;
}

.hubner-metrics__label {
	display: block;
	margin-top: 6px;
	font-weight: 600;
	font-size: 0.76rem;
	line-height: 1.25;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}

.hubner-metrics__desc {
	display: block;
	margin-top: 4px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.62);
}

/* Sticky section navigation ---------------------------------------------- */

.hubner-sectionnav {
	position: sticky;
	top: var(--hubner-site-header-offset, 0px);
	z-index: 9990;
	background: rgba(243, 246, 248, 0.96);
	border-bottom: 1px solid var(--hubner-border);
	backdrop-filter: blur(6px);
}

.hubner-sectionnav__inner {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.hubner-sectionnav__inner::-webkit-scrollbar {
	display: none;
}

.hubner-sectionnav__link {
	flex: none;
	white-space: nowrap;
	padding: 14px 12px;
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--hubner-muted-fg);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.hubner-sectionnav__link:hover {
	color: var(--hubner-fg);
}

.hubner-sectionnav__link.is-active {
	color: var(--hubner-primary);
	border-bottom-color: var(--hubner-primary);
}

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

.hubner-cards {
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
}

.hubner-card {
	background: var(--hubner-bg);
	border: 1px solid var(--hubner-border);
	padding: 28px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hubner-card:hover {
	transform: translateY(-2px);
	border-color: var(--hubner-primary);
	box-shadow: 0 10px 24px rgba(11, 38, 60, 0.08);
}

.hubner-card__icon {
	width: 28px;
	height: 28px;
	color: var(--hubner-primary);
	margin-bottom: 14px;
}

.hubner-card__number {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--hubner-brand);
	margin-bottom: 10px;
}

.hubner-card__title {
	font-size: 1.15rem;
	font-weight: 600;
}

.hubner-card__text {
	margin-top: 10px;
	color: var(--hubner-muted-fg);
	font-size: 0.95rem;
}

/* Gallery ---------------------------------------------------------------- */

.hubner-gallery {
	display: grid;
	gap: 20px;
	margin-top: 40px;
	grid-template-columns: 1fr;
}

.hubner-gallery__item {
	margin: 0;
}

.hubner-gallery__item img {
	display: block;
	width: 100%;
	height: auto;
}

.hubner-gallery__item figcaption {
	margin-top: 10px;
	font-size: 0.85rem;
	color: var(--hubner-muted-fg);
}

/* Tables ----------------------------------------------------------------- */

.hubner-tablewrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.hubner-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--hubner-bg);
	font-size: 0.95rem;
}

.hubner-table th,
.hubner-table td {
	text-align: left;
	padding: 16px 18px;
	border-bottom: 1px solid var(--hubner-border);
	vertical-align: top;
}

.hubner-table thead th {
	background: var(--hubner-accent);
	color: var(--hubner-primary-dark);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hubner-table td.is-highlight {
	font-weight: 600;
	color: var(--hubner-primary-dark);
}

.hubner-table td.is-positive {
	color: #1c7d55;
	font-weight: 600;
}

.hubner-table .is-primary {
	background: var(--hubner-brand);
	color: #fff;
}

.hubner-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	background: var(--hubner-accent);
	color: var(--hubner-primary-dark);
}

.hubner-footnote {
	margin-top: 14px;
	font-size: 0.85rem;
	color: var(--hubner-muted-fg);
}

.hubner-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.hubner-filter {
	border: 1px solid var(--hubner-border);
	background: var(--hubner-bg);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	color: var(--hubner-muted-fg);
}

.hubner-filter.is-active {
	background: var(--hubner-brand);
	border-color: var(--hubner-brand);
	color: #fff;
}

/* Specifications --------------------------------------------------------- */

.hubner-specs .hubner-section-heading {
	margin-bottom: 28px;
}

.hubner-specs .hubner-filters {
	justify-content: flex-end;
	margin-top: -58px;
	margin-bottom: 42px;
}

.hubner-specs .hubner-table thead th {
	background: var(--hubner-navy);
	color: #fff;
}

.hubner-specs .hubner-table tbody th {
	font-weight: 500;
}

.hubner-specs .hubner-table td,
.hubner-specs .hubner-table tbody th {
	color: var(--hubner-muted-fg);
}

.hubner-specs .hubner-table td.is-highlight {
	color: var(--hubner-primary);
	font-weight: 500;
}

/* Comparison ------------------------------------------------------------- */

.hubner-comparison {
	background: var(--hubner-navy);
	color: var(--hubner-navy-fg);
}

.hubner-comparison .hubner-eyebrow {
	color: var(--hubner-brand);
}

.hubner-comparison .hubner-section-intro {
	color: rgba(242, 246, 248, 0.72);
}

.hubner-comparison .hubner-table {
	background: transparent;
	color: rgba(242, 246, 248, 0.78);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

.hubner-comparison .hubner-table th,
.hubner-comparison .hubner-table td {
	border-color: rgba(255, 255, 255, 0.14);
}

.hubner-comparison .hubner-table thead th {
	background: rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.65);
}

.hubner-comparison .hubner-table thead th.is-primary,
.hubner-comparison .hubner-table tbody td:nth-child(2) {
	background: rgba(21, 137, 198, 0.17);
}

.hubner-comparison .hubner-table td.is-positive {
	color: #fff;
}

.hubner-comparison .hubner-table td.is-positive svg {
	color: var(--hubner-brand);
}

/* Performance ------------------------------------------------------------ */

.hubner-perf {
	margin: 0;
	background: var(--hubner-bg);
	border: 1px solid var(--hubner-border);
}

.hubner-perf__trigger {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.hubner-perf img {
	display: block;
	width: 100%;
	height: auto;
}

.hubner-perf figcaption {
	padding: 20px 24px;
	border-top: 1px solid var(--hubner-border);
}

.hubner-perf__title {
	display: block;
	font-weight: 600;
}

.hubner-perf__text {
	display: block;
	margin-top: 6px;
	font-size: 0.9rem;
	color: var(--hubner-muted-fg);
}

/* Lightbox --------------------------------------------------------------- */

.hubner-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(11, 38, 60, 0.92);
	padding: 24px;
}

.hubner-lightbox[hidden] {
	display: none;
}

.hubner-lightbox__figure {
	margin: 0;
	max-width: 1100px;
	text-align: center;
	animation: hubner-fade 0.45s cubic-bezier(0.42, 0, 0.58, 1) both;
}

.hubner-lightbox__figure img {
	max-width: 100%;
	max-height: 78vh;
	height: auto;
}

.hubner-lightbox__caption {
	margin-top: 14px;
	color: #fff;
	font-size: 0.95rem;
}

.hubner-lightbox button {
	position: absolute;
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	color: #fff;
	width: 46px;
	height: 46px;
	border-radius: 999px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hubner-lightbox__prev {
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.hubner-lightbox__next {
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
}

.hubner-lightbox__close {
	top: 16px;
	right: 16px;
}

@keyframes hubner-fade {
	from {
		opacity: 0;
		transform: scale(0.985);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Modules ---------------------------------------------------------------- */

.hubner-module {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hubner-border);
	background: var(--hubner-bg);
}

.hubner-module__media img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.hubner-module__body {
	padding: 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.hubner-checklist {
	list-style: none;
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--hubner-border);
	font-size: 0.92rem;
}

.hubner-checklist li {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.hubner-checklist .hubner-icon {
	color: var(--hubner-primary);
	margin-top: 4px;
}

.hubner-module__apps {
	margin-top: 16px;
	font-size: 0.9rem;
	color: var(--hubner-muted-fg);
}

.hubner-module__footer {
	margin-top: auto;
	padding-top: 24px;
}

.hubner-btn--module-download {
	width: 100%;
	justify-content: center;
	padding: 11px 18px;
	border: 1px solid var(--hubner-brand);
	background: transparent;
	color: var(--hubner-primary);
}

.hubner-btn--module-download:hover,
.hubner-btn--module-download:focus {
	background: var(--hubner-brand);
	border-color: var(--hubner-brand);
	color: #fff;
}

.hubner-download-action {
	margin-top: 18px;
}

/* Literature ------------------------------------------------------------- */

.hubner-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	border-bottom: 1px solid var(--hubner-border);
	margin-bottom: 0;
}

.hubner-tabs__tab {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 12px 16px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--hubner-muted-fg);
	cursor: pointer;
}

.hubner-tabs__tab.is-active {
	color: var(--hubner-primary);
	border-bottom-color: var(--hubner-primary);
}

.hubner-publist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	background: var(--hubner-bg);
	border-bottom: 1px solid var(--hubner-border);
}

.hubner-publist.is-active {
	display: block;
}

.hubner-publist__item {
	border-bottom: 1px solid var(--hubner-border);
	margin: 0;
}

.hubner-publist__item:last-child {
	border-bottom: 0;
}

.hubner-publist__item > a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 22px 24px;
	text-decoration: none;
	color: inherit;
}

.hubner-publist__item > a:hover {
	background: var(--hubner-surface);
}

@media (min-width: 782px) {
	.hubner-publist__item > a {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.hubner-publist__title {
	font-weight: 600;
	max-width: 60ch;
}

.hubner-publist__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 0.85rem;
	color: var(--hubner-muted-fg);
}

.hubner-tag {
	background: var(--hubner-accent);
	color: var(--hubner-primary-dark);
	padding: 2px 8px;
	font-size: 0.72rem;
	font-weight: 600;
}

.hubner-publist__desc {
	padding: 0 24px 20px;
	font-size: 0.9rem;
	color: var(--hubner-muted-fg);
}

/* Downloads -------------------------------------------------------------- */

.hubner-download {
	display: flex;
	gap: 16px;
	border: 1px solid var(--hubner-border);
	padding: 24px;
	background: var(--hubner-bg);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.hubner-download:hover {
	border-color: var(--hubner-primary);
	transform: translateY(-2px);
}

.hubner-download__icon {
	width: 22px;
	height: 22px;
	color: var(--hubner-primary);
	margin-top: 3px;
}

.hubner-download__title {
	font-size: 1rem;
	font-weight: 600;
}

.hubner-download__meta {
	margin-top: 6px;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--hubner-muted-fg);
}

.hubner-download__desc {
	margin-top: 8px;
	font-size: 0.9rem;
	color: var(--hubner-muted-fg);
}

/* Videos ----------------------------------------------------------------- */

.hubner-video {
	border: 1px solid var(--hubner-border);
	background: var(--hubner-bg);
	overflow: hidden;
}

.hubner-video__thumb {
	position: relative;
	display: block;
	width: 100%;
	height: 190px;
	padding: 0;
	border: 0;
	background: var(--hubner-navy);
	cursor: pointer;
}

.hubner-video__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.72;
	transition: opacity 0.2s ease;
}

.hubner-video__thumb:hover img {
	opacity: 0.92;
}

.hubner-video__play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto;
	border-radius: 999px;
	background: var(--hubner-brand);
	color: #fff;
	font-size: 20px;
	transition: transform 0.2s ease;
}

.hubner-video__thumb:hover .hubner-video__play {
	transform: scale(1.08);
}

.hubner-video__embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}

.hubner-video__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.hubner-video__body {
	padding: 22px 24px;
	min-height: 120px;
}

.hubner-video__meta {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--hubner-primary);
}

.hubner-video__title {
	margin-top: 8px;
	font-size: 1.05rem;
	font-weight: 600;
}

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

.hubner-faq__grid {
	display: grid;
	gap: 0 48px;
	grid-template-columns: 1fr;
}

.hubner-faq__item {
	border-bottom: 1px solid var(--hubner-border);
}

.hubner-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.hubner-faq__question::-webkit-details-marker {
	display: none;
}

.hubner-faq__chevron {
	width: 18px;
	height: 18px;
	color: var(--hubner-primary);
	transition: transform 0.2s ease;
}

.hubner-faq__item[open] .hubner-faq__chevron {
	transform: rotate(90deg);
}

.hubner-faq__answer {
	padding: 0 0 20px;
	font-size: 0.95rem;
	color: var(--hubner-muted-fg);
}

.hubner-faq__answer p {
	margin-bottom: 12px;
}

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

.hubner-quote__grid {
	display: grid;
	gap: 40px;
}

.hubner-quote__bullets {
	margin: 28px 0 0;
	padding-left: 18px;
	font-size: 0.95rem;
	color: rgba(242, 246, 248, 0.8);
}

.hubner-quote__bullets li {
	margin-bottom: 8px;
}

.hubner-quote__privacy {
	margin-top: 20px;
	font-size: 0.85rem;
	color: rgba(242, 246, 248, 0.7);
}

.hubner-quote__privacy a {
	color: var(--hubner-brand);
}

.hubner-quote__form {
	background: #fff;
	padding: 8px;
	align-self: start;
}

.hubner-quote__iframe {
	display: block;
	width: 100%;
	border: 0;
	height: var(--hubner-quote-height-mobile, 1500px);
}

/* Portfolio -------------------------------------------------------------- */

.hubner-portfolio__inner {
	max-width: 900px;
	text-align: center;
}

.hubner-portfolio .hubner-section-title {
	color: var(--hubner-fg);
}

.hubner-portfolio__image {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 36px;
}

.hubner-spectrum {
	height: 14px;
	border-radius: 999px;
	margin-top: 40px;
	background: linear-gradient(
		to right,
		#8878e3 0%,
		#6a00a3 4%,
		#8200c8 9%,
		#0046ff 13%,
		#00f7ff 16%,
		#1fff00 18.7%,
		#c6ff00 21.6%,
		#ffd200 23.8%,
		#ff4200 26.2%,
		#f00 27.9%,
		#a10000 32.7%,
		#610000 37.6%,
		#610000 100%
	);
}

.hubner-portfolio__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
	font-weight: 600;
	font-size: 0.9rem;
}

.hubner-portfolio__actions {
	justify-content: center;
	margin-top: 36px;
}

.hubner-admin-note {
	margin-top: 12px;
	padding: 10px 14px;
	background: #fff7e6;
	border-left: 3px solid var(--hubner-cta);
	font-size: 0.85rem;
}

/* Responsive ------------------------------------------------------------- */

@media (min-width: 640px) {
	.hubner-metrics__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

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

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

@media (min-width: 782px) {
	.hubner-container {
		padding-left: 32px;
		padding-right: 32px;
	}

	.hubner-section {
		padding: 88px 0;
	}

	.hubner-section.hubner-metrics {
		padding: 0;
	}

	.hubner-hero {
		padding: 84px 0 82px;
	}

	.hubner-hero__grid {
		grid-template-columns: 1fr 1fr;
		gap: 56px;
	}

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

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

	.hubner-quote__grid {
		grid-template-columns: 1fr 1.1fr;
	}

	.hubner-quote__iframe {
		height: var(--hubner-quote-height, 1100px);
	}
}

@media (min-width: 1024px) {
	.hubner-cards--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Mobile table cards */
@media (max-width: 640px) {
	.hubner-table thead {
		display: none;
	}

	.hubner-table,
	.hubner-table tbody,
	.hubner-table tr,
	.hubner-table th,
	.hubner-table td {
		display: block;
		width: 100%;
	}

	.hubner-table tr {
		border: 1px solid var(--hubner-border);
		margin-bottom: 14px;
		background: var(--hubner-bg);
	}

	.hubner-table th,
	.hubner-table td {
		border-bottom: 0;
		padding: 10px 16px;
	}

	.hubner-table tbody th[scope="row"] {
		background: var(--hubner-accent);
		font-weight: 700;
	}

	.hubner-table td::before {
		content: attr(data-label);
		display: block;
		font-size: 0.7rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--hubner-muted-fg);
		margin-bottom: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hubner-product-template *,
	.hubner-product-template *::before,
	.hubner-product-template *::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
