:root {
	--ink: #17212b;
	/* --muted: #65717d; */
	--muted: #161616;
	--line: #dfe5e8;
	--paper: #ffffff;
	--bg: #f3f5f4;
	--navy: #132b3a;
	--teal: #0d8b7d;
	--teal-dark: #087267;
	--orange: #ee9b3a;
	--red: #ba3d3d;
	--shadow: 0 12px 32px rgba(25, 45, 55, .08);
}

/* Autocomplete suggestions for invoice customer search */
#customer-suggestions {
	display: none;
	margin-top: 6px;
	background: #fff;
	border: 1px solid #e6eaec;
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(16, 30, 36, .06);
	width: 100%;
	max-width: 720px;
	z-index: 1200;
}

#customer-suggestions .suggestion {
	padding: 10px 12px;
	border-bottom: 1px solid #f2f4f4;
	cursor: pointer;
}

#customer-suggestions .suggestion:last-child {
	border-bottom: 0;
}

#customer-suggestions .s-main {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: center;
}

#customer-suggestions .s-main strong {
	font-weight: 700;
	color: var(--ink);
}

#customer-suggestions .s-main small {
	color: var(--muted);
}

#customer-suggestions .s-vehicles {
	margin-top: 8px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

#customer-suggestions .s-vehicle {
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink);
	padding: 6px 10px;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 700;
}

.inline-suggestions {
	background: #fff;
	border: 1px solid #e1e7ea;
	border-radius: 8px;
	box-shadow: 0 10px 24px rgba(16, 30, 36, .12);
	display: none;
	max-height: 220px;
	overflow-y: auto;
	position: absolute;
	z-index: 1400;
}

.inline-suggestion {
	background: transparent;
	border: 0;
	color: var(--ink);
	cursor: pointer;
	display: block;
	font-size: 13px;
	font-weight: 650;
	padding: 9px 11px;
	text-align: left;
	width: 100%;
}

.inline-suggestion:hover {
	background: #f4f8f7;
	color: var(--teal-dark);
}


* {
	box-sizing: border-box;
}

html {
	color-scheme: light;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.5;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	cursor: pointer;
}

.topbar {
	align-items: center;
	background: var(--navy);
	color: white;
	display: flex;
	height: 72px;
	justify-content: space-between;
	padding: 0 max(24px, calc((100vw - 1390px) / 2));
}

.brand {
	align-items: center;
	display: flex;
	font-size: 18px;
	font-weight: 800;
	gap: 11px;
	letter-spacing: -.02em;
}

.brand small {
	color: #9eb1bb;
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* .brand-mark {
	align-items: center;
	background: var(--teal);
	border-radius: 9px;
	display: inline-flex;
	font-size: 20px;
	height: 38px;
	justify-content: center;
	width: 38px;
} */

.brand-mark.large {
	font-size: 27px;
	height: 52px;
	width: 52px;
}

.topbar nav {
	align-items: stretch;
	display: flex;
	height: 100%;
}

.topbar nav a,
.topbar nav button {
	align-items: center;
	border: 0;
	border-bottom: 3px solid transparent;
	color: #c3ced4;
	display: flex;
	font-size: 14px;
	font-weight: 700;
	padding: 0 20px;
}

.topbar nav form {
	display: flex;
}

.topbar nav button {
	background: transparent;
}

.topbar nav a.active,
.topbar nav a:hover,
.topbar nav button:hover {
	border-color: var(--teal);
	color: white;
}

.page {
	margin: 0 auto;
	max-width: 1230px;
	padding: 20px 24px 70px;
}

.hero {
	align-items: end;
	display: flex;
	justify-content: space-between;
	margin: 8px 0 30px;
}

h1,
h2,
p {
	margin-top: 0;
}

h1 {
	font-size: clamp(30px, 4vw, 44px);
	letter-spacing: -.04em;
	line-height: 1.08;
	margin-bottom: 10px;
}

h2 {
	font-size: 21px;
	letter-spacing: -.025em;
	margin-bottom: 7px;
}

.hero h1 {
	max-width: 650px;
}

.muted {
	color: var(--muted);
}

.eyebrow {
	color: var(--teal);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .13em;
	margin-bottom: 8px;
}

.button {
	align-items: center;
	border: 0;
	border-radius: 8px;
	display: inline-flex;
	font-size: 14px;
	font-weight: 750;
	justify-content: center;
	min-height: 42px;
	padding: 9px 16px;
}

.button.primary {
	background: var(--teal);
	color: white;
	box-shadow: 0 5px 13px rgba(13, 139, 125, .2);
    margin-top: 10px;
}

.button.primary:hover {
	background: var(--teal-dark);
}

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

.button.danger {
	background: #fff2f2;
	border: 1px solid #efcccc;
	color: var(--red);
}

.button.small {
	min-height: 36px;
	padding: 6px 12px;
}

.button.wide {
	margin-top: 20px;
	width: 100%;
}

.button.disabled {
	color: #aab2b7;
	cursor: default;
}

.stats {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 24px;
}

.stat-card,
.panel {
	background: var(--paper);
	border: 1px solid #e5eaec;
	border-radius: 12px;
	box-shadow: var(--shadow);
}

.stat-card {
	border-top: 3px solid var(--teal);
	padding: 20px;
}

.stat-card.warn {
	border-top-color: var(--orange);
}

.stat-card span,
.stat-card small {
	color: var(--muted);
	display: block;
	font-size: 12px;
	font-weight: 650;
}

.stat-card strong {
	display: block;
	font-size: 25px;
	letter-spacing: -.03em;
	margin: 5px 0 2px;
}

.panel {
	padding: 24px;
}

.panel-head,
.section-title-row {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.filters {
	display: flex;
	gap: 8px;
}

.actions-row {
	align-items: center;
	display: flex;
	gap: 10px;
}

input,
select,
textarea {
	background: white;
	border: 1px solid #cfd8dc;
	border-radius: 7px;
	color: var(--ink);
	min-height: 42px;
	outline: none;
	padding: 9px 11px;
	width: 100%;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(13, 139, 125, .1);
}

.filters input {
	min-width: 270px;
}

.filters select {
	min-width: 135px;
}

.table-wrap {
	margin: 15px -24px 0;
	overflow-x: auto;
}

table {
	border-collapse: collapse;
	width: 100%;
}

th {
	background: #f7f9f9;
	color: #67747b;
	font-size: 11px;
	letter-spacing: .08em;
	padding: 12px 24px;
	text-align: left;
	text-transform: uppercase;
}

td {
	border-top: 1px solid #e7ecee;
	font-size: 14px;
	padding: 15px 24px;
}

td small {
	color: var(--muted);
	display: block;
	font-size: 12px;
	margin-top: 2px;
}

.right {
	text-align: right;
}

.clickable {
	cursor: pointer;
}

.clickable:hover {
	background: #f8fbfa;
}

.invoice-link {
	color: var(--teal);
	font-weight: 800;
}

.badge {
	border-radius: 20px;
	display: inline-block;
	font-size: 11px;
	font-weight: 800;
	padding: 5px 10px;
	text-transform: uppercase;
}

.badge.paid {
	background: #e1f5ef;
	color: #087360;
}

.badge.partial {
	background: #fff1d9;
	color: #95600b;
}

.badge.unpaid {
	background: #fbe5e5;
	color: #9e3434;
}

.empty {
	padding: 46px 20px;
	text-align: center;
}

.empty strong {
	font-size: 18px;
}

.empty p {
	color: var(--muted);
	margin: 5px 0 18px;
}

.pagination {
	align-items: center;
	border-top: 1px solid var(--line);
	color: var(--muted);
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	margin: 0 -24px -24px;
	padding: 16px 24px;
}

.pagination div {
	display: flex;
	gap: 8px;
}

.alert {
	border-radius: 9px;
	font-size: 14px;
	margin-bottom: 20px;
	padding: 13px 16px;
}

.alert.success {
	background: #dff4ed;
	border: 1px solid #b8e4d6;
	color: #086855;
}

.alert.error {
	background: #fff0f0;
	border: 1px solid #efcccc;
	color: #923131;
	display: flex;
	gap: 8px;
}

.page-heading {
	margin-bottom: 24px;
}

.page-heading h1 {
	font-size: 36px;
	margin-top: 16px;
}

.back-link {
	color: var(--teal);
	font-size: 13px;
	font-weight: 750;
}

.form-layout {
	align-items: start;
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(0, 1fr) 310px;
}

.form-main {
	display: grid;
	gap: 18px;
}

.form-section {
	display: flex;
	gap: 18px;
}

.section-number {
	align-items: center;
	background: var(--navy);
	border-radius: 50%;
	color: white;
	display: flex;
	flex: 0 0 30px;
	font-size: 13px;
	font-weight: 800;
	height: 30px;
	justify-content: center;
}

.section-content {
	min-width: 0;
	width: 100%;
}

.field-grid {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(2, 1fr);
	margin-top: 18px;
}

.field-grid.three {
	grid-template-columns: repeat(3, 1fr);
}

.field {
	color: #46535a;
	display: block;
	font-size: 12px;
	font-weight: 750;
}

.field input,
.field select,
.field textarea {
	display: block;
	font-weight: 500;
	margin-top: 6px;
}

.field.full {
	grid-column: 1 / -1;
}

.summary-card {
	position: sticky;
	top: 22px;
}

.summary-card h2 {
	margin-bottom: 22px;
}

.summary-line,
.summary-total {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding: 11px 0;
}

.summary-line {
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 13px;
}

.summary-input {
	align-items: center;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	padding: 8px 0;
}

.summary-input input {
	min-height: 34px;
	padding: 5px 8px;
	text-align: right;
	width: 100px;
}

.summary-total {
	border-bottom: 2px solid var(--navy);
	color: var(--ink);
	font-size: 17px;
	margin-top: 5px;
}

.summary-total strong {
	color: var(--teal);
	font-size: 24px;
}

.form-note {
	color: var(--muted);
	font-size: 11px;
	margin: 12px 0 0;
	text-align: center;
}

.items-head,
.item-row {
	align-items: center;
	display: grid;
	gap: 8px;
	grid-template-columns: 92px minmax(160px, 1fr) 117px 107px 87px 80px 30px;
	/* grid-template-columns: 105px minmax(140px, 1fr) 60px 100px 100px 105px 30px; */
}

.items-head {
	color: var(--muted);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .08em;
	margin-top: 18px;
	padding: 0 2px 7px;
	text-transform: uppercase;
}

.item-row {
	border-top: 1px solid var(--line);
	padding: 10px 0;
}

.item-row input,
.item-row select {
	min-height: 38px;
	padding: 7px 8px;
}

.line-total {
	font-size: 13px;
	text-align: right;
}

.remove-item {
	background: transparent;
	border: 0;
	color: #9ca6aa;
	font-size: 22px;
}

.remove-item:hover {
	color: var(--red);
}

.invoice-actions {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 18px;
}

.invoice-actions>div {
	display: flex;
	gap: 8px;
}

.inline {
	display: inline;
}

.invoice-sheet {
	background: white;
	box-shadow: var(--shadow);
	margin: 0 auto;
	min-height: 900px;
	padding: 52px;
}

/* Invoice Layout Styles */

/* Modern Layout (Default) */
.invoice-sheet.layout-modern {
	--primary: var(--invoice-primary, #0d8b7d);
	--header: var(--invoice-header, #132b3a);
	--text: var(--invoice-text, #17212b);
}

.invoice-sheet.layout-modern .invoice-header {
	border-bottom: 3px solid var(--header);
}

/* Classic Layout */
.invoice-sheet.layout-classic {
	--primary: var(--invoice-primary, #0d8b7d);
	--header: var(--invoice-header, #132b3a);
	--text: var(--invoice-text, #17212b);
}

.invoice-sheet.layout-classic .invoice-header {
	border-bottom: 5px solid var(--header);
	padding-bottom: 20px;
}

.invoice-sheet.layout-classic .invoice-brand h1 {
	font-size: 72px;
}

/* Minimal Layout */
.invoice-sheet.layout-minimal {
	--primary: var(--invoice-primary, #0d8b7d);
	--header: var(--invoice-header, #132b3a);
	--text: var(--invoice-text, #17212b);
}

.invoice-sheet.layout-minimal .invoice-header {
	border-bottom: 1px solid #e5eaec;
	padding-bottom: 10px;
}

.invoice-sheet.layout-minimal .invoice-brand {
	gap: 10px;
}

.invoice-sheet.layout-minimal .invoice-brand h1 {
	font-size: 48px;
}

.invoice-sheet.layout-minimal .invoice-title {
	display: none;
}

.invoice-header {
	align-items: start;
	border-bottom: 3px solid var(--navy);
	display: flex;
	justify-content: space-between;
	padding-bottom: 15px;
}

.invoice-brand {
	align-items: center;
	display: flex;
	gap: 14px;
}

.invoice-brand h1 {
	font-size: 65px;
	margin: 0;
}

.invoice-brand p {
	color: var(--muted);
	font-size: 12px;
	margin: 8px 0 0;
}

.invoice-title {
	display: grid;
	justify-items: end;
}

.invoice-title p {
	color: var(--teal);
	font-size: 25px;
	font-weight: 850;
	letter-spacing: .1em;
	margin-bottom: 1px;
}

.invoice-title strong {
	font-size: 14px;
	margin-bottom: 7px;
}

.invoice-meta {
	display: grid;
	gap: 30px;
	grid-template-columns: 1.2fr 1.2fr .8fr;
	padding: 32px 0;
}

.invoice-meta h2 {
	font-size: 17px;
	margin-bottom: 4px;
}

.invoice-meta p {
	color: var(--muted);
	font-size: 13px;
	margin-bottom: 3px;
}

.invoice-meta p strong {
	color: var(--ink);
}

.invoice-items th {
	padding: 11px 13px;
}

.invoice-items td {
	padding: 14px 13px;
}

.invoice-bottom {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr 330px;
	margin-top: 32px;
}

.invoice-notes {
	color: var(--muted);
	font-size: 13px;
}

.thank-you {
	color: var(--teal);
	font-weight: 750;
	margin-top: 45px;
}

.invoice-totals>div {
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	padding: 7px 0;
}

.invoice-totals .grand {
	border-bottom: 2px solid var(--navy);
	border-top: 2px solid var(--navy);
	font-size: 17px;
	margin: 5px 0;
	padding: 11px 0;
}

.invoice-totals .balance {
	color: var(--teal);
	font-size: 16px;
}

.invoice-footer {
	border-top: 1px solid var(--line);
	color: var(--muted);
	display: flex;
	font-size: 10px;
	justify-content: space-between;
	margin-top: 55px;
	padding-top: 13px;
	text-transform: uppercase;
}

.payment-panel {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 20px auto;
}

.payment-panel form {
	align-items: end;
	display: flex;
	gap: 10px;
}

.payment-panel .field {
	width: 180px;
}

.login-page {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: calc(100vh - 72px);
}

.login-card {
	background: white;
	border: 1px solid #e5eaec;
	border-radius: 14px;
	box-shadow: var(--shadow);
	display: grid;
	grid-template-columns: 1fr 1fr;
	max-width: 820px;
	overflow: hidden;
	width: 100%;
}

.login-intro {
	background: var(--navy);
	color: white;
	padding: 55px 45px;
}

.login-intro h1 {
	font-size: 38px;
}

.login-intro>p:last-child {
	color: #b9c7ce;
}

.login-card form {
	padding: 45px;
}

.login-card .field+.field {
	margin-top: 18px;
}

.remember {
	align-items: center;
	color: var(--muted);
	display: flex;
	font-size: 13px;
	gap: 8px;
	margin-top: 16px;
}

.remember input {
	min-height: 0;
	width: auto;
}

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

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

	.summary-card {
		position: static;
	}

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

	.items-head {
		display: none;
	}

	.item-row {
		grid-template-columns: 100px 1fr 70px;
	}

	.item-row .base-price {
		grid-column: 1 / 2;
	}

	.line-total {
		text-align: left;
	}

	.invoice-sheet {
		padding: 35px;
	}
}

@media (max-width: 650px) {
	.topbar {
		height: auto;
		padding: 13px 18px;
	}

	.topbar nav a {
		padding: 9px 8px;
	}

	.topbar nav a:first-child {
		display: none;
	}

	.page {
		padding: 28px 14px 50px;
	}

	.hero,
	.panel-head,
	.payment-panel {
		align-items: stretch;
		flex-direction: column;
		gap: 18px;
	}

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

	.filters,
	.payment-panel form {
		align-items: stretch;
		flex-direction: column;
	}

	.filters input,
	.filters select,
	.payment-panel .field {
		min-width: 0;
		width: 100%;
	}
}

/* Whatsapp button styling */
.button.whatsapp {
	background: #25d366;
	color: white;
	box-shadow: 0 5px 13px rgba(37, 211, 102, .2);
}

.button.whatsapp:hover {
	background: #1fa851;
}

.link-danger {
	background: transparent;
	border: 0;
	color: var(--red);
	cursor: pointer;
	font-size: 13px;
	font-weight: 700;
	padding: 0;
}

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

/* Form page styling */
.form-page {
	max-width: 800px;
}

.mb-2 {
	margin-bottom: 20px;
}

.split-heading {
	align-items: center;
	display: grid;
	justify-content: space-between;
}

/* Print styles */
@media print {
	.no-print {
		display: none !important;
	}

	.invoice-sheet {
		box-shadow: none;
		margin: 0;
		padding: 0;
	}

	body {
		background: white;
	}

	.no-print,
	.topbar {
		display: none !important;
	}

	.page {
		max-width: none;
		padding: 0;
	}

	.invoice-sheet {
		box-shadow: none;
		max-width: none;
		min-height: 0;
		padding: 0;
	}

	.invoice-items tr {
		break-inside: avoid;
	}
}


.topbar-shell {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-nav summary {
	list-style: none;
	cursor: pointer;
}

.mobile-nav summary::-webkit-details-marker {
	display: none;
}

.nav-toggle {
	display: none;
	color: #fff;
	font-weight: 700;
}

.nav-toggle-icon {
	width: 24px;
	height: 2px;
	background: #fff;
	display: block;
	position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background: #fff;
}

.nav-toggle-icon::before {
	top: -7px;
}

.nav-toggle-icon::after {
	top: 7px;
}


@media (max-width: 991px) {

	.page {
		padding: 20px;
	}

	.hero {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

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

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

	.summary-card {
		position: relative;
		top: auto;
	}

	.field-grid,
	.field-grid.three {
		grid-template-columns: 1fr;
	}

	.invoice-meta,
	.invoice-bottom {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.payment-panel {
		flex-direction: column;
		gap: 15px;
	}

	.payment-panel form {
		flex-direction: column;
	}
}


@media (max-width:768px) {

	.section-number {
		display: none;
	}

	.topbar {
		padding: 12px 15px;
		height: auto;
	}

	.nav-toggle {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.mobile-nav {
		position: relative;
	}

	.topbar-nav {
		position: absolute;
		top: 55px;
		right: 0;
		width: 260px;
		background:var(--navy);
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
		display: none !important;
		flex-direction: column;
		height: auto !important;
		z-index: 999;
	}

	.mobile-nav[open] .topbar-nav {
		display: flex !important;
	}

	.topbar-nav a,
	.topbar-nav button {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
		padding: 14px 18px;
		justify-content: flex-start;
	}

	.topbar nav form {
		width: 100%;
	}

	.brand span {
		font-size: 16px;
	}

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

	.filters {
		flex-direction: column;
	}

	.filters input,
	.filters select {
		min-width: 100%;
	}

	.panel {
		padding: 16px;
	}

	.table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	table {
		min-width: 700px;
	}

	.items-head {
		display: none;
	}

	.item-row {
		/* display: inline-block; */
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 15px;
		border: 1px solid #9a9a9a;
		border-radius: 10px;
		margin-bottom: 12px;
	}

	.remove-item {
		justify-self: end;
	}

	.invoice-sheet {
		padding: 20px;
	}

	.invoice-header {
		flex-direction: column;
		gap: 20px;
	}

	.invoice-title {
		justify-items: start;
	}

	.invoice-title p {
		font-size: 20px;
	}

	.invoice-items {
		display: block;
		overflow-x: auto;
	}

	.invoice-footer {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}

	.button {
		width: 100%;
	}

	.invoice-actions {
		flex-direction: column;
		gap: 10px;
	}

	.invoice-actions>div {
		width: 100%;
		flex-direction: column;
	}
}


@media (min-width:1400px) {

	.page {
		max-width: 1400px;
	}

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

	.invoice-sheet {
		/* max-width:1100px; */
	}

	.form-layout {
		grid-template-columns: minmax(0, 1fr) 350px;
	}
}

.table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

table {
	min-width: 900px;
}


@media(max-width:768px) {

	.login-card {
		grid-template-columns: 1fr;
		margin: 15px;
	}

	.login-intro {
		padding: 30px 20px;
	}

	.login-card form {
		padding: 25px 20px;
	}

	.login-intro h1 {
		font-size: 28px;
	}
}


.topbar {
	background: var(--navy);
	color: #fff;
	height: 72px;
}

.topbar-shell {
	max-width: 1400px;
	margin: auto;
	padding: 0 20px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
}

.brand-mark {
	width: 40px;
	height: 40px;
	background: var(--teal);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
}

.brand small {
	display: block;
	color: #9db0ba;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.topbar-nav {
	display: flex;
	align-items: center;
	height: 72px;
}

.topbar-nav a,
.topbar-nav button {
	display: flex;
	align-items: center;
	height: 72px;
	padding: 0 18px;
	color: #c8d2d8;
	text-decoration: none;
	border: none;
	background: none;
	font-size: 14px;
	font-weight: 600;
	border-bottom: 3px solid transparent;
}

.topbar-nav a:hover,
.topbar-nav button:hover,
.topbar-nav a.active {
	color: #fff;
	border-bottom-color: var(--teal);
}

.topbar-nav form {
	display: flex;
	height: 72px;
}

.mobile-menu-btn {
	display: none;
	border: none;
	background: none;
	color: #fff;
	font-size: 28px;
	cursor: pointer;
}

/* MOBILE */

@media(max-width:768px) {

	.topbar {
		height: auto;
	}

	.topbar-shell {
		height: auto;
		min-height: 72px;
		position: relative;
		padding: 12px 16px;
	}

	.mobile-menu-btn {
		display: block;
	}

	.topbar-nav {
		display: none;
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		background: var(--navy);
		flex-direction: column;
		align-items: stretch;
		height: auto;
		z-index: 9999;
		box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
	}

	.topbar-nav.show {
		display: flex;
	}

	.topbar-nav a,
	.topbar-nav button {
		height: auto;
		padding: 15px 20px;
		width: 100%;
		justify-content: flex-start;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	.topbar-nav form {
		width: 100%;
		height: auto;
	}
}


@media(max-width:768px) {

	.topbar-nav {
		display: none;
		flex-direction: column;
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		background: var(--navy);
		z-index: 9999;
	}

	.topbar-nav.show {
		display: flex !important;
	}
}