/* Header & Navigation (Stacked single row: wordmark left, plain text links) */
/* -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--bg-ground);
	border-bottom: 2px solid var(--border-strong);
	transition: padding var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

.site-header.is-condensed {
	padding-block: 0.25rem;
	background-color: rgba(238, 244, 247, 0.96);
	backdrop-filter: blur(8px);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 0.875rem;
	gap: 1.5rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.brand img {
	height: 3.2rem;
	width: auto;
	display: block;
}

.nav-desktop { display: none; }

.nav-links {
	display: flex;
	align-items: center;
	list-style: none;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.nav-link {
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;

	color: var(--text-main);
	padding: 0.5rem 0.25rem;
	position: relative;
	transition: color var(--dur-fast) var(--ease-out);
}

.nav-link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background-color: var(--accent-mint);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--dur-fast) var(--ease-out);
}

.nav-link:hover { color: #075C47; }

.nav-link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.nav-link:active { color: var(--accent-mint-hover); }

.nav-link:focus-visible {
	outline: 2px solid #075C47;

	outline-offset: 2px;
}

.nav-link[aria-current="page"] {
	color: #075C47;
	font-weight: 700;
}

.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.header-cta-group {
	display: none;
	align-items: center;
	gap: 1.25rem;
}

.header-phone-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--text-main);
	text-decoration: none;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--border-hairline);
	background-color: var(--bg-surface);
	transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.header-phone-link:hover {
	border-color: var(--text-main);
	color: var(--accent-mint);
}

.header-phone-link:active { background-color: var(--bg-surface-alt); }

.header-phone-link:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 2px;
}

/* Nav toggle button for mobile */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	padding: 0;
	background: var(--bg-surface);
	border: 1px solid var(--border-strong);
	cursor: pointer;
	color: var(--text-main);
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.nav-toggle:hover {
	background-color: var(--bg-surface-alt);
	color: var(--accent-mint);
}

.nav-toggle:active {
	background-color: var(--text-main);
	color: var(--bg-surface);
}

.nav-toggle:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 2px;
}

.nav-mobile {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: var(--bg-ground);
	border-bottom: 2px solid var(--border-strong);
	padding: 1.5rem var(--gutter);
	box-shadow: 0 12px 24px rgba(20, 34, 45, 0.08);
}

.nav-mobile.is-open { display: block; }

.nav-mobile .nav-links {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.25rem;
}

.nav-mobile .nav-link {
	font-size: var(--text-base);

	width: 100%;
	padding-block: 0.625rem;
	border-bottom: 1px solid var(--border-hairline);
}

@media (min-width: 900px) {
	.nav-desktop { display: block; }
	.header-cta-group { display: flex; }
	.nav-toggle { display: none; }
	.nav-mobile { display: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Buttons & Badges                                                           */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	min-height: 44px;
	padding: 0.75rem 1.375rem;
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	white-space: normal;
	text-align: center;
	border: 1px solid transparent;
	transition: background-color var(--dur-fast) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out),
							color var(--dur-fast) var(--ease-out),
							box-shadow var(--dur-fast) var(--ease-out),
							transform var(--dur-fast) var(--ease-out);
}

.btn-primary {
	background-color: var(--text-main);
	color: var(--bg-ground);
	border-color: var(--text-main);
}

.btn-primary:hover {
	background-color: var(--accent-mint);
	border-color: var(--accent-mint);
	color: #FFF;
}

.btn-primary:active {
	background-color: var(--accent-mint-hover);
	border-color: var(--accent-mint-hover);
	color: #FFF;
	transform: translateY(1px);
}

.btn-primary:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 3px;
}

.btn-secondary {
	background-color: transparent;
	color: var(--text-main);
	border-color: var(--border-strong);
}

.btn-secondary:hover {
	background-color: var(--text-main);
	color: var(--bg-ground);
}

.btn-secondary:active {
	background-color: #000;
	color: #FFF;
	transform: translateY(1px);
}

.btn-secondary:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 3px;
}

.btn-mint {
	background-color: var(--accent-mint);
	color: #FFF;
	border-color: var(--accent-mint);
}

.btn-mint:hover {
	background-color: var(--accent-mint-hover);
	border-color: var(--accent-mint-hover);
	color: #FFF;
}

.btn-mint:active {
	background-color: #054536;
	border-color: #054536;
	color: #FFF;
	transform: translateY(1px);
}

.btn-mint:focus-visible {
	outline: 2px solid var(--text-main);
	outline-offset: 3px;
}

.btn-sm {
	min-height: 38px;
	padding: 0.5rem 1rem;
	font-size: 0.75rem;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.5rem;
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-hairline);
	background-color: var(--bg-surface);
	color: var(--text-muted);
}

.badge-mint {
	border-color: #075C47;
	background-color: var(--accent-mint-subtle);
	color: #075C47;
}

.badge-alert {
	border-color: var(--accent-alert);
	background-color: var(--accent-alert-subtle);
	color: var(--accent-alert);
}

/* -------------------------------------------------------------------------- */
/* Specification Rows & Datasheet Blocks                                     */
/* -------------------------------------------------------------------------- */

.spec-sheet {
	background-color: var(--bg-surface);
	border: 2px solid var(--border-strong);
	border-radius: var(--radius-sm);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

.spec-sheet-header {
	border-bottom: 2px solid var(--border-strong);
	padding-bottom: 1.25rem;
	margin-bottom: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.spec-row {
	display: grid;
	grid-template-columns: 1fr;
	padding-block: 0.875rem;
	border-bottom: 1px solid var(--border-hairline);
	align-items: baseline;
	gap: 0.35rem;
}

@media (min-width: 640px) {
	.spec-row {
		grid-template-columns: minmax(180px, max-content) 1fr;
		gap: 1.5rem;
	}
}

.spec-label {
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	font-weight: 600;
}

.spec-val {
	font-size: var(--text-base);
	color: var(--text-main);
	line-height: var(--lh-snug);
}

.spec-val-metric {
	font-family: var(--fowo-526);
	font-weight: 700;
}

.spec-val-mint {
	color: var(--accent-mint);
	font-family: var(--fowo-526);
	font-weight: 700;
}

/* -------------------------------------------------------------------------- */
/* Forms & Input Controls                                                     */
/* -------------------------------------------------------------------------- */

.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-block-end: 1.25rem;
}

.form-label {
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-main);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.form-label-hint {
	font-family: var(--fowo-1a7);
	text-transform: none;
	font-weight: 400;
	color: var(--text-muted);
}

.form-input,
.form-select,
.form-textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 0.875rem;
	background-color: var(--bg-surface);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	color: var(--text-main);
	font-family: var(--fowo-1a7);
	font-size: var(--text-base);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.form-textarea {
	min-height: 110px;
	resize: vertical;
	line-height: var(--lh-body);
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover { border-color: var(--accent-mint); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	border-color: var(--accent-mint);
	outline: 2px solid var(--accent-mint);
	outline-offset: 1px;
}

.form-input:active,
.form-select:active,
.form-textarea:active { border-color: var(--accent-mint-hover); }

.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
	border-color: var(--accent-alert);
	background-color: var(--accent-alert-subtle);
}

.form-error {
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	color: var(--accent-alert);
	font-weight: 600;
	display: none;
	margin-top: 0.25rem;
}

.form-error.is-visible { display: block; }

.form-checkbox-label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
	font-size: var(--text-sm);
	line-height: var(--lh-snug);
	color: var(--text-main);
	cursor: pointer;
	user-select: none;
}

.form-checkbox {
	width: 18px;
	height: 18px;
	margin-top: 0.15rem;
	accent-color: var(--accent-mint);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.form-checkbox:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 2px;
}

.form-banner-status {
	padding: 1rem 1.25rem;
	border: 2px solid var(--border-strong);
	border-radius: var(--radius-sm);
	background-color: var(--bg-surface);
	font-family: var(--fowo-526);
	font-size: var(--text-sm);
	margin-block-end: 1.5rem;
	display: none;
}

.form-banner-status.is-success {
	display: block;
	border-color: var(--accent-mint);
	background-color: var(--accent-mint-subtle);
	color: var(--accent-mint);
}

.form-banner-status.is-error {
	display: block;
	border-color: var(--accent-alert);
	background-color: var(--accent-alert-subtle);
	color: var(--accent-alert);
}

/* Signature Moment: Overlapping Photo Collage                               */
/* -------------------------------------------------------------------------- */

.collage-wrap {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
	padding-block: var(--space-2xl);
	min-height: 480px;
}

.collage-item {
	position: absolute;
	border: 2px solid var(--border-strong);
	background-color: var(--bg-surface);
	box-shadow: 0 16px 32px rgba(20, 34, 45, 0.12);
	transition: transform var(--dur-base) var(--ease-out), z-index var(--dur-fast);
}

.collage-item:hover {
	z-index: 10;
	transform: scale(1.02) !important;
}

.collage-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.collage-item-1 {
	width: 60%;
	top: 0;
	left: 0;
	aspect-ratio: 4 / 3;
	transform: rotate(-2deg);
	z-index: 1;
}

.collage-item-2 {
	width: 52%;
	top: 15%;
	right: 0;
	aspect-ratio: 16 / 10;
	transform: rotate(2.5deg);
	z-index: 2;
}

.collage-item-3 {
	width: 48%;
	bottom: 0;
	left: 20%;
	aspect-ratio: 3 / 2;
	transform: rotate(-1.2deg);
	z-index: 3;
}

.collage-caption {
	padding: 0.5rem 0.75rem;
	background-color: var(--bg-surface);
	border-top: 1px solid var(--border-hairline);
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	color: var(--text-muted);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (max-width: 640px) {
	.collage-wrap {
		min-height: 0;
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		padding-block: var(--space-md);
	}
	.collage-item {
		position: static;
		width: 100%;
		transform: none !important;
	}
}

/* Line that draws itself (SVG Progression Spine)                            */
/* -------------------------------------------------------------------------- */

.drawn-line-section {
	position: relative;
	padding-block: var(--space-3xl);
}

.drawn-line-spine {
	position: absolute;
	top: 0;
	left: 16px;
	bottom: 0;
	width: 24px;
	pointer-events: none;
	z-index: 1;
}

.drawn-line-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.drawn-line-path {
	stroke: var(--accent-mint);
	stroke-width: 3;
	fill: none;
	stroke-dasharray: 1000;
	stroke-dashoffset: 0;
	stroke-linecap: round;
}

.drawn-stages-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
	padding-left: 44px;
	position: relative;
	z-index: 2;
}

@media (max-width: 480px) {
	.drawn-line-spine { display: none; }
	.drawn-stages-list { padding-left: 0; }
	.stage-card::before { display: none; }
}

.stage-card {
	background-color: var(--bg-surface);
	border: 2px solid var(--border-strong);
	padding: 1.5rem;
	border-radius: var(--radius-sm);
	position: relative;
	transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.stage-card::before {
	content: "";
	position: absolute;
	left: -44px;
	top: 1.75rem;
	width: 14px;
	height: 14px;
	background-color: var(--bg-surface);
	border: 3px solid var(--accent-mint);
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--bg-ground);
}

.stage-card.is-active {
	border-color: var(--accent-mint);
	box-shadow: 0 8px 24px rgba(13, 130, 103, 0.12);
}

.stage-card.is-active::before { background-color: var(--accent-mint); }

@media (min-width: 840px) {
	.drawn-line-spine {
		left: 50%;
		transform: translateX(-50%);
	}
	.drawn-stages-list {
		padding-left: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-xl) var(--space-3xl);
	}
	.stage-card:nth-child(odd) {
		grid-column: 1;
		margin-right: var(--space-lg);
	}
	.stage-card:nth-child(even) {
		grid-column: 2;
		margin-left: var(--space-lg);
		margin-top: var(--space-2xl);
	}
	.stage-card:nth-child(odd)::before {
		left: auto;
		right: calc(-1 * var(--space-lg) - 19px);
	}
	.stage-card:nth-child(even)::before { left: calc(-1 * var(--space-lg) - 19px); }
}

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

.scrolly-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
	padding-block: var(--space-3xl);
}

@media (min-width: 880px) {
	.scrolly-section {
		grid-template-columns: 1fr 1.1fr;
		align-items: start;
	}
}

.scrolly-sticky-col { position: relative; }

@media (min-width: 880px) {
	.scrolly-sticky-col {
		position: sticky;
		top: 6rem;
	}
}

.scrolly-figure-frame {
	background-color: var(--bg-surface);
	border: 2px solid var(--border-strong);
	overflow: hidden;
}

.scrolly-figure-frame img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.scrolly-progress-bar-wrap {
	width: 100%;
	height: 4px;
	background-color: var(--border-hairline);
	position: relative;
}

.scrolly-progress-fill {
	height: 100%;
	background-color: var(--accent-mint);
	width: 0%;
	transition: width var(--dur-fast) linear;
}

.scrolly-prose-col {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xl);
}

.scrolly-step {
	padding: 1.5rem;
	background-color: var(--bg-surface);
	border-left: 3px solid var(--border-hairline);
	transition: border-color var(--dur-base) var(--ease-out);
}

.scrolly-step.is-active { border-left-color: var(--accent-mint); }

.site-footer {
	background-color: var(--bg-dark);
	color: var(--text-inverse);
	border-top: 3px solid var(--border-strong);
	padding-block-start: var(--space-3xl);
	padding-block-end: var(--space-2xl);
}

.site-footer a {
	color: var(--text-inverse);
	text-decoration-color: var(--text-inverse-muted);
}

.site-footer a:hover {
	color: #FFF;
	text-decoration-color: #FFF;
}

.site-footer a:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 2px;
}

.footer-top {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-2xl);
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	padding-bottom: var(--space-2xl);
}

@media (min-width: 840px) and (max-width: 1100px) {
	.footer-top {
		grid-template-columns: 1.2fr 1.3fr 1.5fr;
		gap: 1.5rem;
	}
}

@media (min-width: 1101px) {
	.footer-top { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer-brand img {
	height: 3.5rem;
	width: auto;
	margin-bottom: 1.25rem;
}

.footer-tagline {
	font-size: var(--text-sm);
	color: var(--text-inverse-muted);
	line-height: var(--lh-snug);
	max-width: 42ch;
	margin-bottom: 1.25rem;
}

.footer-col-title {
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-inverse-muted);
	margin-bottom: 1rem;
}

.footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.footer-list li {
	margin: 0;
	font-size: var(--text-sm);
	color: var(--text-inverse-muted);
}

.footer-list a {
	text-decoration: none;
	transition: color var(--dur-fast) var(--ease-out);
	word-break: break-word;
	overflow-wrap: break-word;
}

.footer-list a:hover {
	color: #FFF;
	text-decoration: underline;
}

.footer-legal-row {
	padding-top: var(--space-xl);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	font-size: var(--text-xs);
	color: var(--text-inverse-muted);
}

.footer-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-reopen-btn {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.25);
	color: var(--text-inverse-muted);
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	padding: 0.25rem 0.625rem;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast), color var(--dur-fast);
}

.footer-reopen-btn:hover {
	border-color: #FFF;
	color: #FFF;
}

.footer-reopen-btn:active { background-color: rgba(255, 255, 255, 0.1); }

.footer-reopen-btn:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------- */

.consent-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 900;
	background-color: var(--bg-surface);
	border-top: 2px solid var(--border-strong);
	padding: 0.875rem var(--gutter);
	box-shadow: 0 -4px 16px rgba(20, 34, 45, 0.12);
	display: none;
}

.consent-banner.is-visible { display: block; }

.consent-inner {
	max-width: var(--page-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: stretch;
}

@media (min-width: 720px) {
	.consent-inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 1.5rem;
	}
}

.consent-copy {
	font-size: var(--text-xs);
	line-height: var(--lh-snug);
	color: var(--text-main);
	margin: 0;
}

.consent-copy a {
	color: var(--accent-mint);
	font-weight: 600;
}

.consent-actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.consent-btn {
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.5rem 1rem;
	min-height: 40px;
	border-radius: var(--radius-sm);
	cursor: pointer;
	border: 1px solid var(--border-strong);
	background-color: var(--bg-surface);
	color: var(--text-main);
	transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}

.consent-btn:hover { background-color: var(--bg-surface-alt); }

.consent-btn:active {
	background-color: var(--text-main);
	color: var(--bg-surface);
}

.consent-btn:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 2px;
}

.consent-btn-accept {
	background-color: var(--accent-mint);
	border-color: var(--accent-mint);
	color: #FFF;
}

.consent-btn-accept:hover {
	background-color: var(--accent-mint-hover);
	border-color: var(--accent-mint-hover);
}

.consent-btn-accept:active { background-color: #054536; }

/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

.chat-launcher {
	position: fixed;
	bottom: 1.25rem;
	right: 1.25rem;
	z-index: 800;
	min-height: 48px;
	height: 48px;
	padding-inline: 1rem;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	background-color: var(--text-main);
	color: #FFF;
	border: 2px solid var(--text-main);
	border-radius: var(--radius-sm);
	box-shadow: 0 6px 18px rgba(20, 34, 45, 0.2);
	cursor: pointer;
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background-color var(--dur-fast) var(--ease-out),
							border-color var(--dur-fast) var(--ease-out),
							transform var(--dur-fast) var(--ease-out),
							bottom var(--dur-base) var(--ease-out);
}

.chat-launcher:hover {
	background-color: var(--accent-mint);
	border-color: var(--accent-mint);
}

.chat-launcher:active {
	background-color: var(--accent-mint-hover);
	border-color: var(--accent-mint-hover);
	transform: translateY(1px);
}

.chat-launcher:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 3px;
}

/* When consent banner is visible on mobile, lift launcher */
body.consent-active .chat-launcher { bottom: 5.5rem; }

.chat-badge-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background-color: var(--accent-mint);
	color: #FFF;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 700;
}

.chat-panel {
	position: fixed;
	bottom: 5rem;
	right: 1.25rem;
	width: min(380px, calc(100vw - 2.5rem));
	height: min(520px, calc(100vh - 7rem));
	background-color: var(--bg-surface);
	border: 2px solid var(--border-strong);
	border-radius: var(--radius-sm);
	box-shadow: 0 16px 36px rgba(20, 34, 45, 0.18);
	z-index: 850;
	display: none;
	flex-direction: column;
	overflow: hidden;
}

.chat-panel.is-open { display: flex; }

.chat-header {
	background-color: var(--bg-surface-alt);
	border-bottom: 2px solid var(--border-strong);
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.chat-header-title {
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--text-main);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.chat-close-btn {
	background: none;
	border: 1px solid var(--border-hairline);
	color: var(--text-main);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.chat-close-btn:hover {
	background-color: var(--bg-surface);
	border-color: var(--text-main);
}

.chat-close-btn:active {
	background-color: var(--text-main);
	color: var(--bg-surface);
}

.chat-close-btn:focus-visible {
	outline: 2px solid var(--accent-mint);
	outline-offset: 2px;
}

.chat-messages {
	flex: 1;
	padding: 1rem;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background-color: var(--bg-ground);
}

.chat-msg {
	max-width: 85%;
	padding: 0.625rem 0.875rem;
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	line-height: var(--lh-snug);
	border: 1px solid var(--border-hairline);
}

.chat-msg-operator {
	align-self: flex-start;
	background-color: var(--bg-surface);
	color: var(--text-main);
	border-color: var(--border-hairline);
}

.chat-msg-user {
	align-self: flex-end;
	background-color: var(--text-main);
	color: #FFF;
	border-color: var(--text-main);
}

.chat-msg-time {
	font-family: var(--fowo-526);
	font-size: 10px;
	color: var(--text-muted);
	display: block;
	margin-top: 0.25rem;
}

.chat-msg-user .chat-msg-time { color: var(--text-inverse-muted); }

.chat-form {
	padding: 0.75rem;
	background-color: var(--bg-surface);
	border-top: 1px solid var(--border-hairline);
	display: flex;
	gap: 0.5rem;
}

.chat-input {
	flex: 1;
	min-height: 38px;
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
}

.chat-input:focus { outline: 2px solid var(--accent-mint); }

.chat-send-btn {
	background-color: var(--accent-mint);
	color: #FFF;
	border: 1px solid var(--accent-mint);
	border-radius: var(--radius-sm);
	padding: 0.45rem 0.75rem;
	cursor: pointer;
	font-family: var(--fowo-526);
	font-size: var(--text-xs);
	font-weight: 700;
	transition: background-color var(--dur-fast);
}

.chat-send-btn:hover { background-color: var(--accent-mint-hover); }

.chat-send-btn:active { background-color: #054536; }

.chat-send-btn:focus-visible {
	outline: 2px solid var(--text-main);
	outline-offset: 2px;
}

.chat-intake-step {
	padding: 1.25rem;
	background-color: var(--bg-surface);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.chat-intake-step p {
	font-size: var(--text-xs);
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}