/* 1. UTILITY BAR */
.utility-bar {
	background-color:var(--surface);
	border-bottom:1px solid var(--line);
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink-soft);
	position:relative;
	z-index:40;
}


.utility-bar-inner {
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:var(--space-sm);
	padding-block:0.5rem;
	flex-wrap:wrap;
}


.utility-item {
	display:inline-flex;
	align-items:center;
	gap:0.45rem;
}


.utility-item .icon {
	width:0.95em;
	height:0.95em;
	color:var(--ink);
}


.utility-link {
	color:var(--ink-soft);
	text-decoration:none;
	display:inline-flex;
	align-items:center;
	min-height:24px;
	transition:color var(--dur-fast) var(--ease-ledger);
}


.utility-link:hover {
	color:var(--ink);
	text-decoration:underline;
}


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


.utility-group {
	display:flex;
	align-items:center;
	gap:var(--space-md);
	flex-wrap:wrap;
}


/* 2. MASTHEAD HEADER */
.site-header {
	background-color:var(--ground);
	border-bottom:1px solid var(--line);
	position:relative;
	width:100%;
	z-index:30;
}


.header-inner {
	display:flex;
	justify-content:space-between;
	align-items:center;
	min-height:4.5rem;
	padding-block:0.75rem;
	gap:var(--space-md);
}


.brand-wrap {
	display:flex;
	align-items:center;
	flex-shrink:0;
}


.brand {
	display:inline-flex;
	align-items:center;
	text-decoration:none;
	height:2.1rem;
}


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


.nav-toggle {
	display:none;
	align-items:center;
	justify-content:center;
	gap:0.4rem;
	min-height:44px;
	min-width:44px;
	padding:0.5rem 0.85rem;
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink);
	background:var(--surface);
	border:1px solid var(--line);
	cursor:pointer;
	transition:background var(--dur-fast) var(--ease-ledger), border-color var(--dur-fast) var(--ease-ledger);
}


.nav-toggle:hover {
	background:var(--surface-2);
	border-color:var(--ink);
}


.nav-toggle:active {
	background:var(--line);
}


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


.primary-nav {
	display:flex;
	align-items:center;
	gap:var(--space-sm);
}


.nav-list {
	display:flex;
	align-items:center;
	gap:0.25rem;
}


.nav-link {
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	letter-spacing:0.02em;
	color:var(--ink);
	padding:0.65rem 0.85rem;
	min-height:48px;
	height:48px;
	box-sizing:border-box;
	display:inline-flex;
	align-items:center;
	text-decoration:none;
	border:1px solid transparent;
	transition:background var(--dur-fast) var(--ease-ledger), border-color var(--dur-fast) var(--ease-ledger), color var(--dur-fast) var(--ease-ledger);
}


.nav-link:hover {
	background:var(--surface);
	border-color:var(--line);
	color:var(--ink);
}


.nav-link:active {

	background:var(--surface-2);
}


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


.nav-link[aria-current="page"] {
	border-bottom:2px solid var(--accent);
	font-weight:600;
	color:var(--ink);
}


/* MEGA PANEL */
.nav-item-has-mega {
	position:static;
}


.mega-trigger {
	cursor:pointer;
}


.mega-panel {
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	background:var(--ground);
	border-bottom:1px solid var(--line);
	border-top:1px solid var(--line);
	box-shadow:0 16px 32px rgba(0, 0, 0, 0.06);
	padding:var(--space-lg) 0;
	display:none;
	z-index:50;
}


.nav-item-has-mega:hover .mega-panel,
.nav-item-has-mega:focus-within .mega-panel,
.mega-panel.is-open {
	display:block;
}


.mega-grid {
	display:grid;
	grid-template-columns:280px 1fr;
	gap:var(--space-lg);
}


.mega-intro {
	border-right:1px solid var(--line);
	padding-right:var(--space-lg);
}


.mega-intro h3 {
	font-size:var(--text-md);
	margin-bottom:var(--space-xs);
}


.mega-intro p {
	font-size:var(--text-sm);
	color:var(--ink-soft);
	margin-bottom:var(--space-sm);
}


.mega-tiles {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:var(--space-md);
}


.mega-tile {
	background:var(--surface);
	border:1px solid var(--line);
	padding:var(--space-md);
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	text-decoration:none;
	transition:border-color var(--dur-fast) var(--ease-ledger), background var(--dur-fast) var(--ease-ledger);
}


.mega-tile:hover {
	border-color:var(--ink);
	background:var(--ground);
}


.mega-tile:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}


.mega-tile-header {
	margin-bottom:var(--space-xs);
}


.mega-tile-title {
	font-family:var(--vinu-811);
	font-size:var(--text-base);
	font-weight:700;
	color:var(--ink);
	margin-bottom:var(--space-2xs);
}


.mega-tile-desc {
	font-size:var(--text-sm);
	color:var(--ink-soft);
	line-height:var(--leading-snug);
}


.mega-tile-footer {

	margin-top:var(--space-sm);
	padding-top:var(--space-xs);
	border-top:1px solid var(--line);
	display:flex;
	justify-content:space-between;
	align-items:center;
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink);
}


.btn {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0.5rem;
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	letter-spacing:0.03em;
	text-transform:uppercase;
	padding:0.75rem 1.4rem;
	min-height:48px;
	height:48px;
	box-sizing:border-box;
	cursor:pointer;
	text-decoration:none;
	border-radius:var(--radius);
	transition:background var(--dur-fast) var(--ease-ledger),
							border-color var(--dur-fast) var(--ease-ledger),
							color var(--dur-fast) var(--ease-ledger),
							transform var(--dur-fast) var(--ease-ledger);
}


.btn-primary {
	background-color:var(--accent);
	color:var(--accent-ink);
	border:1px solid var(--accent);
}


.btn-primary:hover {
	background-color:#2d4770;
	border-color:#2d4770;
	color:var(--accent-ink);
}


.btn-primary:active {
	background-color:#233959;
	border-color:#233959;

	transform:translateY(1px);
}


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


.btn-secondary {
	background-color:var(--surface);
	color:var(--ink);
	border:1px solid var(--line);
}


.btn-secondary:hover {
	background-color:var(--surface-2);
	border-color:var(--ink);
	color:var(--ink);
}


.btn-secondary:active {
	background-color:var(--line);
	transform:translateY(1px);
}


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


.btn-ghost {
	background-color:transparent;
	color:var(--ink);
	border:1px solid var(--line);
}


.btn-ghost:hover {
	background-color:var(--surface);
	border-color:var(--ink);
}


.btn-ghost:active {
	background-color:var(--surface-2);
	transform:translateY(1px);
}


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


/* 4. SPEC TABLES & DATA ROWS */
.data-table-container {
	overflow-x:auto;
	border:1px solid var(--line);
	background:var(--ground);
	margin-block:var(--space-md);
}


.data-table {
	width:100%;
	border-collapse:collapse;
	font-size:var(--text-sm);
	text-align:left;
}


.data-table th,
.data-table td {
	padding:0.85rem 1.15rem;
	border-bottom:1px solid var(--line);
	border-right:1px solid var(--line);
}


.data-table th:last-child,
.data-table td:last-child {
	border-right:0;
}


.data-table th {
	background:var(--surface);
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink);
	font-weight:600;
	letter-spacing:0.03em;
	text-transform:uppercase;
}


.data-table tr:last-child td {
	border-bottom:0;
}


.data-table tr:hover td {
	background:#fafafa;
}


.data-table td.num {
	font-family:var(--vinu-235);
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}


/* 5. SERVICE TILES & MEDIA CARDS */
.service-grid {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:var(--space-md);
}


.service-card {
	background:var(--surface);
	border:1px solid var(--line);
	display:flex;
	flex-direction:column;
	transition:border-color var(--dur-fast) var(--ease-ledger);
}


.service-card:hover {
	border-color:var(--ink);
}


.service-card-media {
	aspect-ratio:16 / 10;
	overflow:hidden;
	border-bottom:1px solid var(--line);
	position:relative;
}


.service-card-media img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform var(--dur-slow) var(--ease-ledger);
}


.service-card:hover .service-card-media img {
	transform:scale(1.02);
}


.service-card-body {
	padding:var(--space-md);
	display:flex;
	flex-direction:column;
	flex-grow:1;
}


.service-card-meta {
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink-soft);
	margin-bottom:var(--space-2xs);
}


.service-card-title {
	font-size:var(--text-lg);
	margin-bottom:var(--space-xs);
}


.service-card-desc {
	font-size:var(--text-sm);
	color:var(--ink-soft);
	margin-bottom:var(--space-md);
	flex-grow:1;
}


.service-card-footer {
	border-top:1px solid var(--line);
	padding-top:var(--space-sm);
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	gap:var(--space-xs);
}


.service-card-price {
	font-family:var(--vinu-235);
	font-size:var(--text-sm);
	font-weight:600;
	color:var(--ink);
}


/* 6. FORMS AND INPUT CONTROLS */
.form-shell {
	background:var(--surface);
	border:1px solid var(--line);
	padding:clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}


.form-grid {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:var(--space-md);
}


.form-group {
	display:flex;
	flex-direction:column;
	gap:0.35rem;
}


.form-group.full {
	grid-column:1 / -1;
}


.form-label {
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	font-weight:500;
	color:var(--ink);
	display:flex;
	justify-content:space-between;
}


.form-label .optional {
	color:var(--ink-soft);
	font-weight:400;
}


.form-input,
.form-select,
.form-textarea {
	width:100%;
	padding:0.75rem 0.95rem;
	background:var(--ground);
	border:1px solid var(--line);
	font-family:var(--vinu-57f);
	font-size:var(--text-base);
	color:var(--ink);
	min-height:48px;
	height:48px;
	box-sizing:border-box;
	border-radius:var(--radius);
	transition:border-color var(--dur-fast) var(--ease-ledger), box-shadow var(--dur-fast) var(--ease-ledger);
}


.form-textarea {
	height:auto;
	min-height:120px;
}


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


.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 1px var(--accent);
}


.form-textarea {
	min-height:120px;
	resize:vertical;
}


.form-checkbox-label {
	display:flex;
	align-items:flex-start;
	gap:0.75rem;
	font-size:var(--text-sm);
	color:var(--ink);
	cursor:pointer;
	line-height:var(--leading-snug);
}


.form-checkbox {
	margin-top:0.2rem;
	width:18px;
	height:18px;
	accent-color:var(--accent);
	cursor:pointer;
	flex-shrink:0;
}


.field-error {
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:#a31d1d;
	margin-top:0.25rem;
	display:none;
}


.form-group.has-error .field-error {
	display:block;
}


.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
	border-color:#a31d1d;
}


.form-status-banner {
	padding:var(--space-sm) var(--space-md);
	margin-bottom:var(--space-md);
	font-family:var(--vinu-235);
	font-size:var(--text-sm);
	border:1px solid var(--line);
	display:none;
}


.form-status-banner.is-success {
	background:#eaf4ea;
	border-color:#2e6b2e;
	color:#164016;
	display:block;
}


.form-status-banner.is-error {
	background:#fce8e8;
	border-color:#a31d1d;
	color:#690b0b;
	display:block;
}


.sr-field {
	position:absolute !important;
	left:-9999px !important;
	width:1px !important;
	height:1px !important;
	overflow:hidden !important;
	clip:rect(0,0,0,0) !important;
}


.site-footer {
	background-color:var(--surface);
	border-top:1px solid var(--line);
	margin-top:clamp(2rem, 1.5rem + 1.5vw, 3.5rem);
	padding-top:clamp(2rem, 1.5rem + 1.5vw, 3rem);
	padding-bottom:clamp(1.5rem, 1rem + 1vw, 2rem);
	font-size:var(--text-sm);
}


.footer-top {
	display:grid;
	grid-template-columns:2fr 1fr 1fr 1fr;
	gap:clamp(1rem, 0.75rem + 1vw, 2rem);
	padding-bottom:clamp(1.5rem, 1rem + 1vw, 2rem);
	border-bottom:1px solid var(--line);
}


.footer-col-brand {
	padding-right:var(--space-md);
}


.footer-brand {
	display:inline-block;
	margin-bottom:var(--space-sm);
	height:2.3rem;
}


.footer-brand img {
	height:2.3rem;
	width:auto;
}


.footer-tagline {
	font-size:var(--text-sm);
	color:var(--ink-soft);
	max-width:36ch;
	margin-bottom:var(--space-md);
	line-height:var(--leading-snug);
}


.footer-specs-list {
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink-soft);
	display:flex;
	flex-direction:column;
	gap:0.35rem;
}


.footer-heading {
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	text-transform:uppercase;
	letter-spacing:0.05em;
	color:var(--ink);
	margin-bottom:var(--space-sm);
}


.footer-links {
	display:flex;
	flex-direction:column;
	gap:0.5rem;
}


.footer-link {
	color:var(--ink-soft);
	text-decoration:none;
	transition:color var(--dur-fast) var(--ease-ledger);
	display:inline-flex;
	align-items:center;
	min-height:24px;
}


.footer-link:hover {
	color:var(--ink);
	text-decoration:underline;
}


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


.footer-bottom {
	padding-top:var(--space-lg);
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	flex-wrap:wrap;
	gap:var(--space-md);
}


.footer-legal-row {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:var(--space-md);
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink-soft);
}


.footer-legal-links {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:1rem;
}


.footer-legal-links a {
	color:var(--ink-soft);
	text-decoration:underline;
	display:inline-flex;
	align-items:center;
	min-height:24px;
}


.footer-legal-links a:hover {
	color:var(--ink);
}


.footer-back-to-top {
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink-soft);
	display:inline-flex;
	align-items:center;
	gap:0.35rem;
	border:1px solid var(--line);
	padding:0.4rem 0.75rem;
	min-height:36px;
	background:var(--ground);
	transition:background var(--dur-fast) var(--ease-ledger), border-color var(--dur-fast) var(--ease-ledger);
}


.footer-back-to-top:hover {
	background:var(--surface-2);
	border-color:var(--ink);
	color:var(--ink);
}


.footer-back-to-top:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}


.cookie-banner {
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	background-color:var(--surface);
	border-top:1px solid var(--line);
	box-shadow:0 -4px 18px rgba(0, 0, 0, 0.08);
	padding:0.75rem 1rem;
	z-index:990;
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	color:var(--ink);
}


.cookie-banner-inner {
	max-width:var(--shell-max);
	margin-inline:auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-md);
	flex-wrap:wrap;
}


.cookie-banner-copy {
	display:flex;
	align-items:center;
	gap:0.5rem;
	max-width:65ch;
	line-height:var(--leading-snug);
}


.cookie-banner-copy a {
	text-decoration:underline;
	color:var(--ink);
}


.cookie-banner-actions {
	display:flex;
	align-items:center;
	gap:0.5rem;
	flex-shrink:0;
}


.btn-cookie {
	padding:0.45rem 0.85rem;
	min-height:38px;
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	cursor:pointer;
	border-radius:var(--radius);
	border:1px solid var(--line);
	background:var(--ground);
	color:var(--ink);
	transition:background var(--dur-fast) var(--ease-ledger), border-color var(--dur-fast) var(--ease-ledger);
}


.btn-cookie:hover {
	background:var(--surface-2);
	border-color:var(--ink);
}


.btn-cookie:active {
	background:var(--line);
}


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


.btn-cookie-primary {
	background:var(--accent);
	color:var(--accent-ink);
	border-color:var(--accent);
}


.btn-cookie-primary:hover {
	background:#2d4770;
	border-color:#2d4770;
}


/* 9. CHAT WIDGET & LAUNCHER */
.chat-launcher {
	position:fixed;
	bottom:1.25rem;
	right:1.25rem;
	z-index:980;
	display:inline-flex;
	align-items:center;
	gap:0.5rem;
	padding:0.65rem 1.15rem;
	min-height:44px;
	background:var(--ink);
	color:var(--ground);
	border:1px solid var(--ink);
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	letter-spacing:0.03em;
	box-shadow:0 4px 14px rgba(0, 0, 0, 0.2);
	cursor:pointer;
	transition:background var(--dur-fast) var(--ease-ledger),
							transform var(--dur-fast) var(--ease-ledger),
							box-shadow var(--dur-fast) var(--ease-ledger);
}


.chat-launcher:hover {
	background:#111;
	transform:translateY(-2px);
	box-shadow:0 6px 18px rgba(0, 0, 0, 0.25);
}


.chat-launcher:active {
	background:#000;
	transform:translateY(0);
}


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


.chat-launcher .icon {
	width:1.2em;
	height:1.2em;
}


.chat-unread-badge {
	background:var(--accent);
	color:var(--accent-ink);
	padding:0.1rem 0.35rem;
	font-size:0.7rem;
	font-weight:600;
	border-radius:var(--radius);
}


.chat-panel {
	position:fixed;
	bottom:4.75rem;
	right:1.25rem;
	width:360px;
	max-width:calc(100vw - 2.5rem);
	height:480px;
	max-height:calc(100vh - 6rem);
	max-height:calc(100svh - 6rem);
	background:var(--ground);
	border:1px solid var(--line);
	box-shadow:0 12px 32px rgba(0, 0, 0, 0.16);
	z-index:985;
	display:flex;
	flex-direction:column;
}


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


.chat-title {
	font-family:var(--vinu-811);
	font-size:var(--text-base);
	font-weight:700;
	color:var(--ink);
}


.chat-close-btn {
	padding:0.35rem;
	min-width:32px;
	min-height:32px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border:1px solid transparent;
	cursor:pointer;
	color:var(--ink-soft);
	transition:color var(--dur-fast) var(--ease-ledger), background var(--dur-fast) var(--ease-ledger);
}


.chat-close-btn:hover {
	color:var(--ink);
	background:var(--surface-2);
}


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


.chat-body {
	flex-grow:1;
	overflow-y:auto;
	padding:1rem;
	display:flex;
	flex-direction:column;
	gap:0.75rem;
}


.chat-msg {
	max-width:82%;
	padding:0.65rem 0.85rem;
	font-size:var(--text-sm);
	line-height:var(--leading-snug);
}


.chat-msg.operator {
	align-self:flex-start;
	background:var(--surface);
	border:1px solid var(--line);
	color:var(--ink);
}


.chat-msg.user {
	align-self:flex-end;
	background:var(--ink);
	color:var(--ground);
}


.chat-footer {
	padding:0.75rem;
	border-top:1px solid var(--line);
	background:var(--surface);
}


.chat-form {
	display:flex;
	gap:0.5rem;
}


.chat-input {
	flex-grow:1;
	padding:0.5rem 0.75rem;
	border:1px solid var(--line);
	background:var(--ground);
	font-size:var(--text-sm);
}


.chat-send-btn {
	padding:0.5rem 0.85rem;
	min-height:38px;
	background:var(--accent);
	color:var(--accent-ink);
	font-family:var(--vinu-235);
	font-size:var(--text-xs);
	cursor:pointer;
	transition:background var(--dur-fast) var(--ease-ledger);
}


.chat-send-btn:hover {
	background:#2d4770;
}


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


/* 10. RESPONSIVE BREAKPOINTS FOR COMPONENTS */
@media (max-width: 1024px) {
	.footer-top {
		grid-template-columns:1fr 1fr;
	}


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


@media (max-width: 768px) {
	.nav-toggle {
		display:inline-flex;
	}


	.primary-nav {
		display:none;
		position:absolute;
		top:100%;
		left:0;
		width:100%;
		background:var(--ground);
		border-bottom:1px solid var(--line);
		padding:var(--space-md);
		box-shadow:0 16px 24px rgba(0, 0, 0, 0.08);
	}


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


	.nav-list {
		flex-direction:column;
		align-items:stretch;
		gap:0.5rem;
	}


	.nav-link {
		padding:0.85rem 1rem;
		border-bottom:1px solid var(--surface-2);
	}


	.mega-panel {
		position:static;
		display:none;
		padding:var(--space-sm) 0;
		border:none;
		box-shadow:none;
	}


	.mega-grid {
		grid-template-columns:1fr;
	}


	.mega-intro {
		border-right:none;
		border-bottom:1px solid var(--line);
		padding-right:0;
		padding-bottom:var(--space-sm);
	}


	.mega-tiles {
		grid-template-columns:1fr;
	}


	.service-grid {
		grid-template-columns:1fr;
	}


	.form-grid {
		grid-template-columns:1fr;
	}


	.footer-top {
		grid-template-columns:1fr;
	}


	.cookie-banner-inner {
		flex-direction:column;
		align-items:flex-start;
	}


	.cookie-banner-actions {
		width:100%;
		justify-content:flex-end;
	}
}