/* =========================================================
		   GLOBAL
		   ========================================================= */

		* {
			box-sizing: border-box;
		}

		html,
		body {
			margin: 0;
			padding: 0;
		}

		body {
			font-family: Arial, Helvetica, sans-serif;
			background: #f4f6f8;
			color: #1f2937;
		}


		/* =========================================================
		   HEADER & NAVIGATION
		   ========================================================= */

		header {
			background: #062b52;
			color: #ffffff;
			padding: 14px 20px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
			position: relative;
			z-index: 1000;
		}

		.header-inner {
			max-width: 1500px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 25px;
		}

		.brand {
			display: flex;
			align-items: center;
			text-decoration: none;
			color: #ffffff;
			min-width: 0;
		}

		.brand img {
			display: block;
			width: 300px;
			height: auto;
			max-width: 100%;
		}

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

		.nav a {
			color: #ffffff;
			text-decoration: none;
			padding: 9px 14px;
			border-radius: 6px;
			font-size: 15px;
			font-weight: 600;
			transition: background 0.2s ease;
		}

		.nav a:hover {
			background: rgba(255, 255, 255, 0.12);
		}

		.nav a.active {
			background: #f5b700;
			color: #062b52;
		}
		.nav a.alerts {
			background: #e8f4ff;
			color: #062b52;
			padding: 7px 10px;
			
		}

		.nav a.alerts:hover {
			background: #1976d2;
			color: #fff;
		}


		/* =========================================================
		   COMMON PAGE LAYOUT
		   ========================================================= */

		main {
			max-width: 1500px;
			margin: 0 auto;
			padding: 28px 30px 0;
		}

		.page-intro {
			margin-bottom: 22px;
		}

		.page-intro h1 {
			margin: 0;
			color: #062b52;
			font-size: 28px;
		}

		.page-intro p {
			margin: 6px 0 0;
			color: #66727a;
			font-size: 15px;
		}


		/* =========================================================
		   COMMON CARDS & PANELS
		   ========================================================= */

		.card,
		.panel {
			background: #ffffff;
			border-radius: 10px;
			padding: 20px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
		}

		.card h2,
		.panel h2 {
			margin-top: 0;
			color: #062b52;
		}


		/* =========================================================
		   COMMON TABLES
		   ========================================================= */

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

		th {
			background: #062b52;
			color: #ffffff;
			text-align: left;
			padding: 12px;
			font-size: 14px;
			white-space: nowrap;
		}

		th:first-child {
			border-radius: 5px 0 0 0;
		}

		th:last-child {
			border-radius: 0 5px 0 0;
		}

		td {
			padding: 12px;
			border-top: 1px solid #e5e7eb;
			font-size: 14px;
		}

		tbody tr:hover {
			background: #f8fafc;
		}


		/* =========================================================
		   COMMON TEXT & STATUS
		   ========================================================= */

		.number {
			text-align: right;
		}

		.highlight {
			font-weight: bold;
		}

		.muted {
			color: #64748b;
		}

		.code {
			font-weight: bold;
			font-family: monospace;
			font-size: 15px;
			color: #062b52;
		}

		.success,
		.good {
			color: #15803d;
			font-weight: bold;
		}

		.running {
			color: #2563eb;
			font-weight: bold;
		}

		.failed,
		.bad {
			color: #dc2626;
			font-weight: bold;
		}

		.delayed,
		.warning {
			color: #b45309;
			font-weight: bold;
		}

		.never {
			color: #6b7280;
			font-weight: bold;
		}


		/* =========================================================
		   LIVE OUTAGE MAP
		   ========================================================= */

		.map-controls {
			max-width: 1400px;
			margin: 0 auto;
			padding: 15px 20px 12px;
		}

		.map-controls h1 {
			margin: 0 0 12px;
			color: #062b52;
			font-size: 24px;
		}

		.stats {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-bottom: 12px;
		}

		.stat {
			background: #f4f4f4;
			border-radius: 6px;
			padding: 8px 14px;
			font-size: 14px;
		}

		.stat strong {
			font-size: 18px;
			margin-right: 4px;
		}

		.stat.unplanned {
			border-left: 5px solid #d32f2f;
		}

		.stat.planned {
			border-left: 5px solid #1976d2;
		}

		.stat.mapped {
			border-left: 5px solid #388e3c;
		}

		.stat.unmapped {
			border-left: 5px solid #757575;
		}

		.filters {
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
		}

		.filter-button {
			border: 1px solid #c9d2da;
			background: #ffffff;
			color: #062b52;
			border-radius: 6px;
			padding: 7px 12px;
			cursor: pointer;
			font-size: 14px;
			font-weight: 600;
			transition: 0.15s;
		}

		.filter-button:hover {
			background: #eef3f7;
			border-color: #062b52;
		}

		.filter-button.active {
			background: #062b52;
			border-color: #062b52;
			color: #ffffff;
		}

		#map {
			width: 100%;
			height: calc(100vh - 205px);
		}

		.legend {
			background: #ffffff;
			padding: 10px 12px;
			border-radius: 6px;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
			line-height: 22px;
		}

		.legend-item {
			white-space: nowrap;
		}

		.legend-icon {
			display: inline-block;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			margin-right: 7px;
			vertical-align: middle;
		}

		.legend-unplanned {
			background: #d32f2f;
		}

		.legend-planned {
			background: #1976d2;
		}

		.popup {
			min-width: 250px;
		}

		.popup h3 {
			margin: 0 0 8px;
			font-size: 16px;
		}

		.popup-row {
			margin: 4px 0;
		}

		.popup-label {
			font-weight: bold;
		}

		.popup-description {
			margin-top: 8px;
			padding-top: 8px;
			border-top: 1px solid #ddd;
		}

		.popup-link {
			display: inline-block;
			margin-top: 10px;
			padding: 7px 11px;
			background: #062b52;
			color: #ffffff;
			text-decoration: none;
			border-radius: 5px;
			font-weight: 600;
		}

		.popup-link:hover {
			background: #f5b700;
			color: #062b52;
		}

		.leaflet-container a.popup-link {
			color: #ffffff;
			text-decoration: none;
		}
		
		.outage-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
}

.outage-map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.outage-map-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.outage-map-legend-current {
    background: #dc2626;
}

.outage-map-legend-previous {
    background: #16a34a;
}


		/* =========================================================
		   RESPONSIVE - MAP
		   ========================================================= */

		@media (max-width: 900px) {

			.map-controls {
				padding: 12px 15px 10px;
			}

			#map {
				height: calc(100vh - 255px);
			}
		}

		@media (max-width: 600px) {

			.map-controls h1 {
				font-size: 21px;
			}

			#map {
				height: calc(100vh - 285px);
			}
		}


		/* =========================================================
		   RESPONSIVE - GENERAL
		   ========================================================= */

		@media (max-width: 900px) {

			.header-inner {
				flex-direction: column;
				gap: 12px;
			}

			.nav {
				width: 100%;
				justify-content: center;
			}

			main {
				padding: 15px;
			}
		}

		@media (max-width: 700px) {

			.brand img {
				width: 185px;
			}

			.nav {
				gap: 4px;
			}

			.nav a {
				padding: 8px 10px;
				font-size: 14px;
			}

			.page-intro h1 {
				font-size: 24px;
			}
		}

@media (max-width: 600px) {
    .nav-about,
    .nav-contact {
        display: none;
    }
}
		/* =========================================================
		   MAP DISCLAIMER
		   ========================================================= */

		.map-disclaimer {
			margin-top: 10px;
			padding: 8px 12px;
			background: #f8f9fa;
			border: 1px solid #dee2e6;
			border-radius: 5px;
			color: #555;
			font-size: 0.85rem;
			line-height: 1.4;
		}

		.map-disclaimer strong {
			color: #333;
		}

		.map-disclaimer a {
			color: #0078A8;
			font-weight: 600;
			text-decoration: none;
			margin-left: 5px;
		}

		.map-disclaimer a:hover {
			text-decoration: underline;
		}


		/* =========================================================
		   LEGAL PAGES
		   ========================================================= */

		.legal-page {
			max-width: 1000px;
			margin: 30px auto 0;
			padding: 0 20px;
		}

		.legal-page h1 {
			margin-bottom: 10px;
		}

		.legal-page .intro {
			font-size: 1.05rem;
			color: #555;
			margin-bottom: 35px;
		}

		.legal-page section {
			margin-bottom: 35px;
		}

		.legal-page h2 {
			margin-bottom: 12px;
			padding-bottom: 8px;
			border-bottom: 1px solid #ddd;
		}

		.legal-page p {
			line-height: 1.65;
			margin-bottom: 12px;
		}

		.legal-page ul {
			line-height: 1.65;
			margin-top: 10px;
		}

		.important-notice {
			background: #fff3cd;
			border: 1px solid #ffe69c;
			border-left: 5px solid #ffc107;
			padding: 18px 20px;
			margin: 25px 0 35px;
			border-radius: 5px;
		}

		.important-notice strong {
			display: block;
			margin-bottom: 8px;
		}

		.independent-notice {
			background: #e7f3ff;
			border: 1px solid #b6d7f5;
			border-left: 5px solid #0078A8;
			padding: 18px 20px;
			margin: 25px 0 35px;
			border-radius: 5px;
		}

		.last-updated {
			font-size: 0.9rem;
			color: #666;
			margin-top: 40px;
		}

		.privacy-notice {
			background: #e7f3ff;
			border: 1px solid #b6d7f5;
			border-left: 5px solid #0078A8;
			padding: 18px 20px;
			margin: 25px 0 35px;
			border-radius: 5px;
		}

		.privacy-notice strong {
			display: block;
			margin-bottom: 8px;
			color: #333;
		}

		@media (max-width: 600px) {

			.legal-page {
				margin-top: 20px;
				padding: 0 15px;
			}
		}


		/* =========================================================
		   OUTAGE LINKS
		   ========================================================= */

		.outage-link {
			color: inherit;
			text-decoration: none;
			font-weight: 600;
			border-bottom: 1px dotted currentColor;
			transition: opacity 0.15s ease, border-bottom-style 0.15s ease;
		}

		.outage-link:hover {
			opacity: 0.75;
			border-bottom-style: solid;
		}


		/* =========================================================
		   FOOTER
		   ========================================================= */

		.site-footer {
			background: #062b52;
			color: #ffffff;
			margin-top: 40px;
			padding: 28px 20px;
		}

		.footer-content {
			max-width: 1500px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 30px;
		}


		/* Footer brand */

		.footer-brand {
			display: flex;
			align-items: center;
			gap: 15px;
			min-width: 230px;
		}

		.footer-logo-link {
			display: block;
		}

		.footer-logo {
			display: block;
			width: 105px;
			height: auto;
		}

		.footer-brand span {
			font-size: 13px;
			color: rgba(255, 255, 255, 0.75);
		}


		/* Footer navigation */

		.footer-nav {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 22px;
		}

		.footer-nav a {
			color: #ffffff;
			text-decoration: none;
			font-size: 14px;
			font-weight: 600;
		}

		.footer-nav a:hover {
			color: #f5b700;
		}


		/* Footer secondary links */

		.footer-secondary {
			display: flex;
			align-items: center;
			gap: 20px;
		}

		.footer-legal {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 12px;
		}

		.footer-legal a {
			color: rgba(255, 255, 255, 0.75);
			text-decoration: none;
		}

		.footer-legal a:hover {
			color: #f5b700;
		}

		.footer-legal span {
			color: rgba(255, 255, 255, 0.35);
		}


		/* Back to top */

		.back-to-top {
			position: fixed;
			right: 20px;
			bottom: 20px;
			width: 34px;
			height: 34px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #0078A8;
			color: #ffffff;
			border: 1px solid rgba(255, 255, 255, 0.3);
			border-radius: 50%;
			text-decoration: none;
			font-size: 18px;
			line-height: 1;
			font-weight: bold;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
			transition:
				background 0.2s ease,
				transform 0.2s ease,
				border-color 0.2s ease,
				color 0.2s ease;
		}

		.back-to-top:hover {
			background: #f5b700;
			border-color: #f5b700;
			color: #062b52;
			transform: translateY(-2px);
		}


		/* Footer responsive */

		@media (max-width: 800px) {

			.footer-content {
				flex-direction: column;
				text-align: center;
				gap: 22px;
			}

			.footer-brand {
				flex-direction: column;
				gap: 8px;
			}

			.footer-nav {
				flex-wrap: wrap;
				gap: 14px 20px;
			}

			.footer-secondary {
				flex-direction: column;
				gap: 15px;
			}

			.footer-legal {
				flex-wrap: wrap;
				justify-content: center;
			}
		}

		@media (max-width: 480px) {

			.site-footer {
				padding: 20px 15px;
			}

			.footer-brand {
				flex-direction: column;
				gap: 4px;
			}
		}


		/* =========================================================
		   ABOUT PAGE
		   ========================================================= */

		.hero-section {
			background: linear-gradient(
				135deg,
				#0f172a,
				#1e293b
			);
			color: white;
			border-radius: 12px;
			padding: 45px 40px;
			margin-bottom: 25px;
		}

		.hero-content {
			max-width: 850px;
		}

		.hero-section h1 {
			margin: 0 0 10px;
			font-size: 36px;
		}

		.hero-lead {
			color: #fbbf24;
			font-size: 21px;
			font-weight: 600;
			margin: 0 0 15px;
		}

		.hero-section p:last-child {
			color: #e2e8f0;
			font-size: 17px;
			line-height: 1.6;
			margin-bottom: 0;
		}

		.content-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 25px;
			margin-bottom: 25px;
		}

		.content-card {
			background: white;
			border-radius: 12px;
			padding: 25px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
			margin-bottom: 25px;
		}

		.content-card h2 {
			margin-top: 0;
			color: #0f172a;
		}

		.content-card p {
			color: #475569;
			line-height: 1.65;
		}

		.content-card a {
			color: #d97706;
			font-weight: 600;
			text-decoration: none;
		}

		.content-card a:hover {
			text-decoration: underline;
		}

		.dno-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
			margin-top: 20px;
		}

		.dno-item {
			background: #f8fafc;
			border: 1px solid #e2e8f0;
			border-radius: 8px;
			padding: 15px;
		}

		.dno-item strong {
			display: block;
			color: #0f172a;
			margin-bottom: 4px;
		}

		.dno-item span {
			display: block;
			color: #64748b;
			font-size: 14px;
		}

		.about-cta {
			background: #f8fafc;
			border: 1px solid #e2e8f0;
			border-radius: 12px;
			padding: 30px;
			text-align: center;
			margin-bottom: 25px;
		}

		.about-cta h2 {
			margin-top: 0;
			color: #0f172a;
		}

		.about-cta p {
			color: #64748b;
		}

		.cta-buttons {
			display: flex;
			justify-content: center;
			gap: 12px;
			flex-wrap: wrap;
			margin-top: 20px;
		}

		.cta-buttons .button {
			display: inline-block;
			background: #0f172a;
			color: white;
			padding: 10px 18px;
			border-radius: 7px;
			text-decoration: none;
			font-weight: 600;
		}

		.cta-buttons .button:hover {
			background: #1e293b;
		}


		/* About responsive */

		@media (max-width: 700px) {

			.content-grid,
			.dno-grid {
				grid-template-columns: 1fr;
			}

			.hero-section {
				padding: 30px 25px;
			}

			.hero-section h1 {
				font-size: 30px;
			}
		}


		/* =========================================================
		   CONTACT PAGE
		   ========================================================= */

		.contact-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 25px;
			margin-bottom: 25px;
		}

		.contact-card {
			background: white;
			border-radius: 12px;
			padding: 30px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
		}

		.contact-icon {
			font-size: 32px;
			margin-bottom: 10px;
		}

		.contact-card h2 {
			margin-top: 0;
			color: #0f172a;
		}

		.contact-card p {
			color: #475569;
			line-height: 1.65;
			min-height: 75px;
		}

		.contact-button {
			display: inline-block;
			background: #0f172a;
			color: white;
			padding: 10px 18px;
			border-radius: 7px;
			text-decoration: none;
			font-weight: 600;
			margin-top: 10px;
		}

		.contact-button:hover {
			background: #1e293b;
		}

		.contact-cta {
			background: #f8fafc;
			border: 1px solid #e2e8f0;
			border-radius: 12px;
			padding: 30px;
			text-align: center;
			margin-bottom: 25px;
		}

		.contact-cta h2 {
			margin-top: 0;
			color: #0f172a;
		}

		.contact-cta p {
			color: #64748b;
		}


		/* Contact responsive */

		@media (max-width: 700px) {

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

			.hero-section {
				padding: 30px 25px;
			}

			.hero-section h1 {
				font-size: 30px;
			}

			.contact-card p {
				min-height: auto;
			}
		}


		/* =========================================================
		   HOMEPAGE
		   ========================================================= */

		.homepage {
			max-width: 1500px;
			margin: 0 auto;
			padding: 28px 30px 0;
		}


		/* ---------------------------------------------------------
		   Homepage hero
		   --------------------------------------------------------- */

		.home-hero {
			background: #062b52;
			color: #ffffff;
			border-radius: 12px;
			padding: 30px;
			margin-bottom: 20px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
			display: grid;
			grid-template-columns: minmax(0, 1fr) 500px;
			gap: 30px;
			align-items: center;
		}

		.home-hero-copy h1 {
			margin: 0 0 8px;
			font-size: 34px;
			line-height: 1.15;
		}

		.home-hero-copy p {
			margin: 0 0 22px;
			color: #dbeafe;
			font-size: 16px;
			line-height: 1.5;
		}

		.postcode-search {
			display: flex;
			gap: 9px;
			max-width: 700px;
		}

		.postcode-search input {
			flex: 1;
			min-width: 0;
			padding: 14px 16px;
			border: 0;
			border-radius: 7px;
			font-size: 16px;
			outline: none;
		}

		.postcode-search input:focus {
			box-shadow: 0 0 0 3px rgba(245, 183, 0, 0.35);
		}

		.postcode-search button {
			border: 0;
			border-radius: 7px;
			padding: 14px 22px;
			background: #f5b700;
			color: #062b52;
			font-size: 15px;
			font-weight: 700;
			cursor: pointer;
		}

		.postcode-search button:hover {
			background: #ffd04a;
		}

		.lookup-note {
			margin-top: 8px;
			color: #b9cee2;
			font-size: 12px;
		}


		/* Homepage hero statistics */

		.hero-stats {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
		}

		.hero-stat {
			background: rgba(255, 255, 255, 0.10);
			border: 1px solid rgba(255, 255, 255, 0.14);
			border-radius: 8px;
			padding: 13px 15px;
		}

		.hero-stat.unplanned {
			border-left: 4px solid #ef5350;
		}

		.hero-stat.planned {
			border-left: 4px solid #42a5f5;
		}

		.hero-stat.customers {
			border-left: 4px solid #f5b700;
		}

		.hero-stat.active {
			border-left: 4px solid #8bc34a;
		}

		.hero-stat .label {
			color: #c9d9e8;
			font-size: 12px;
			margin-bottom: 4px;
		}

		.hero-stat .value {
			color: #ffffff;
			font-size: 25px;
			font-weight: 700;
			line-height: 1.1;
		}

		.hero-stat .detail {
			margin-top: 4px;
			color: #a9bfd4;
			font-size: 11px;
		}


		/* ---------------------------------------------------------
		   Homepage map & outage list
		   --------------------------------------------------------- */

		.home-grid {
			display: grid;
			grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
			gap: 20px;
			align-items: stretch;
		}

		.home-card {
			background: #ffffff;
			border-radius: 10px;
			box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
			overflow: hidden;
		}

		.card-heading {
			padding: 18px 20px 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
		}

		.card-heading h2 {
			margin: 0;
			color: #062b52;
			font-size: 20px;
		}

		.card-heading a {
			color: #006da8;
			text-decoration: none;
			font-size: 13px;
			font-weight: 600;
		}

		.card-heading a:hover {
			color: #f09f00;
			text-decoration: underline;
		}


		/* Homepage map */

		.map-panel {
			display: flex;
			flex-direction: column;
		}

		.map-toolbar {
			padding: 0 20px 14px;
			display: flex;
			flex-wrap: wrap;
			gap: 6px;
		}

		.map-filter {
			border: 1px solid #c9d2da;
			background: #ffffff;
			color: #062b52;
			border-radius: 6px;
			padding: 7px 11px;
			cursor: pointer;
			font-size: 12px;
			font-weight: 600;
		}

		.map-filter:hover {
			background: #eef3f7;
			border-color: #062b52;
		}

		.map-filter.active {
			background: #062b52;
			border-color: #062b52;
			color: #ffffff;
		}

		#homepage-map {
			width: 100%;
			height: 570px;
		}

		.map-note {
			padding: 9px 15px;
			border-top: 1px solid #e5e7eb;
			background: #f8f9fa;
			color: #64748b;
			font-size: 11px;
		}
		.homepage-outage-marker {
    background: transparent;
    border: none;
}

.homepage-outage-marker-inner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    line-height: 1;
}

.homepage-outage-marker-inner span {
    display: block;
}

.map-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.map-legend-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 11px;
    line-height: 1;
}

.map-legend-icon.unplanned {
    background-color: #d32f2f;
}

.map-legend-icon.planned {
    background-color: #1976d2;
}
		/* Homepage outage panel */

		.outage-panel {
			display: flex;
			flex-direction: column;
			min-height: 0;
		}

		.outage-tabs {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 6px;
			padding: 0 15px 12px;
		}

		.outage-tab {
			border: 1px solid #d5dde4;
			background: #ffffff;
			color: #062b52;
			border-radius: 6px;
			padding: 8px 5px;
			cursor: pointer;
			font-size: 12px;
			font-weight: 700;
		}

		.outage-tab:hover {
			background: #f1f5f9;
		}

		.outage-tab.active {
			background: #062b52;
			border-color: #062b52;
			color: #ffffff;
		}

		.outage-tab .count {
			opacity: 0.75;
		}

		.outage-scroll {
			height: 570px;
			overflow-y: auto;
			padding: 0 15px 15px;
			scrollbar-width: thin;
		}

		.outage-item {
			display: block;
			text-decoration: none;
			color: inherit;
			border: 1px solid #e2e8f0;
			border-left: 4px solid #d32f2f;
			border-radius: 7px;
			padding: 12px;
			margin-bottom: 9px;
			background: #ffffff;
		}

		.outage-item.planned {
			border-left-color: #1976d2;
		}

		.outage-item:hover {
			background: #f8fafc;
			border-color: #cbd5e1;
		}

		.outage-top {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			gap: 8px;
		}

		.outage-location {
			color: #062b52;
			font-size: 14px;
			font-weight: 700;
		}

		.outage-type {
			flex-shrink: 0;
			font-size: 10px;
			font-weight: 700;
		}

		.outage-type.unplanned {
			color: #dc2626;
		}

		.outage-type.planned {
			color: #1976d2;
		}

		.outage-reference {
			margin-top: 3px;
			color: #64748b;
			font-size: 11px;
		}

		.outage-details {
			display: flex;
			flex-wrap: wrap;
			gap: 5px 12px;
			margin-top: 8px;
			color: #64748b;
			font-size: 11px;
		}

		.outage-description {
			margin-top: 7px;
			color: #475569;
			font-size: 11px;
			line-height: 1.35;
		}

		.empty-outages {
			padding: 40px 20px;
			text-align: center;
			color: #64748b;
		}


		/* ---------------------------------------------------------
		   Homepage information strip
		   --------------------------------------------------------- */

		.home-info {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15px;
			margin-top: 20px;
		}

		.info-tile {
			background: #ffffff;
			border-radius: 10px;
			padding: 17px 20px;
			box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
		}

		.info-tile strong {
			display: block;
			color: #062b52;
			margin-bottom: 4px;
			font-size: 14px;
		}

		.info-tile span {
			color: #64748b;
			font-size: 12px;
			line-height: 1.45;
		}


		/* Homepage Leaflet popup */

		.homepage .popup {
			min-width: 250px;
		}

		.homepage .popup h3 {
			margin: 0 0 8px;
			font-size: 16px;
		}

		.homepage .popup-row {
			margin: 4px 0;
		}

		.homepage .popup-label {
			font-weight: bold;
		}

		.homepage .popup-description {
			margin-top: 8px;
			padding-top: 8px;
			border-top: 1px solid #ddd;
		}

		.homepage .popup-link {
			display: inline-block;
			margin-top: 10px;
			padding: 7px 11px;
			background: #062b52;
			color: #ffffff !important;
			text-decoration: none !important;
			border-radius: 5px;
			font-weight: 600;
		}


		/* Homepage responsive */

		@media (max-width: 1050px) {

			.home-hero {
				grid-template-columns: 1fr;
			}

			.hero-stats {
				max-width: 700px;
			}

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

			.outage-scroll {
				height: 480px;
			}

			#homepage-map {
				height: 500px;
			}
		}

		@media (max-width: 700px) {

			.homepage {
				padding: 15px;
			}

			.home-hero {
				padding: 24px 20px;
			}

			.home-hero-copy h1 {
				font-size: 27px;
			}

			.postcode-search {
				flex-direction: column;
			}

			.postcode-search button {
				width: 100%;
			}

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

			.home-info {
				grid-template-columns: 1fr;
			}

			#homepage-map {
				height: 430px;
			}
		}


		/* =========================================================
		   COLLECTION STATUS
		   ========================================================= */

		.collection-status {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			margin-top: 5px;
			font-weight: 600;
		}

		.collection-status::before {
			content: "";
			width: 9px;
			height: 9px;
			border-radius: 50%;
			display: inline-block;
		}

		.status-good {
			color: #15803d;
		}

		.status-good::before {
			background: #16a34a;
		}

		.status-delayed {
			color: #d97706;
		}

		.status-delayed::before {
			background: #f59e0b;
		}

		.status-stopped {
			color: #dc2626;
		}

		.status-stopped::before {
			background: #dc2626;
		}

		.status-unknown {
			color: #6b7280;
		}

		.status-unknown::before {
			background: #9ca3af;
		}


.postcode-alert-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    padding: 22px 25px;
    background: #fff8dc;
    border: 1px solid #f5d36a;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
	margin-top: 12px;
}

.postcode-alert-cta h2 {
    margin: 0 0 6px;
    color: #062b52;
    font-size: 21px;
}

.postcode-alert-cta p {
    margin: 0;
    color: #4f6172;
    line-height: 1.5;
}

.postcode-alert-button {
    display: inline-block;
    flex-shrink: 0;
    padding: 12px 18px;
    border-radius: 7px;
    background: #f5b700;
    color: #062b52;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

.postcode-alert-button:hover {
    text-decoration: none;
    filter: brightness(.96);
}

@media (max-width: 700px) {
    .postcode-alert-cta {
        align-items: stretch;
        flex-direction: column;
    }

    .postcode-alert-button {
        width: 100%;
        box-sizing: border-box;
    }
}

.postcode-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 25px;
}

.postcode-area-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    background: #f5f7fa;
    border: 1px solid #d9e0e7;
    border-radius: 8px;
    text-decoration: none;
    color: #062b52;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.postcode-area-card:hover {
    background: #e8f4ff;
    border-color: #1976d2;
}

.postcode-area-card strong {
    font-size: 20px;
}

.postcode-area-card span {
    font-size: 14px;
    color: #555;
}

.postcode-sector-list {
    margin-top: 30px;
}

.postcode-sector {
    margin-bottom: 35px;
}

.postcode-sector h2 {
    margin-bottom: 12px;
    font-size: 22px;
    color: #062b52;
}

.postcode-directory-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.postcode-directory-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    background: #f5f7fa;
    border: 1px solid #d9e0e7;
    border-radius: 7px;
    text-decoration: none;
    color: #062b52;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.postcode-directory-card:hover {
    background: #e8f4ff;
    border-color: #1976d2;
}

.postcode-directory-card strong {
    font-size: 16px;
}

.postcode-directory-card span {
    font-size: 13px;
    color: #555;
}