/* Simplicity Fibre Areas – page styles. Brand: navy #123151, blue #4374ba, cyan #5ad1ec. */
.sfa {
	--sfa-navy: #123151;
	--sfa-blue: #4374ba;
	--sfa-cyan: #5ad1ec;
	--sfa-ink: #1c2a3a;
	--sfa-muted: #5b6b7d;
	--sfa-line: #dde5ee;
	--sfa-pale: #f3f7fb;
	--sfa-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--sfa-body: "Inter", "Segoe UI", system-ui, sans-serif;
	color: var(--sfa-ink);
	font-family: var(--sfa-body);
	font-size: 1.0625rem;
	line-height: 1.6;
}
.sfa *, .sfa *::before, .sfa *::after { box-sizing: border-box; }
.sfa-wrap { max-width: 1040px; margin: 0 auto; padding: 0 1.25rem; }
.sfa h1, .sfa h2, .sfa h3 { font-family: var(--sfa-head); color: var(--sfa-navy); margin: 0; }
.sfa h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; line-height: 1.2; margin-bottom: .5rem; }

/* Hero */
.sfa-hero { background: var(--sfa-navy); color: #fff; padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.sfa-crumbs { font-size: .9rem; color: #b9c8da; margin-bottom: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.sfa-crumbs a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); }
.sfa-crumbs a:hover { border-bottom-color: var(--sfa-cyan); }
.sfa-hero .sfa-title { color: #fff; font-size: clamp(2.5rem, 7vw, 4.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.02em; max-width: 14ch; }
.sfa-lede { font-size: clamp(1.05rem, 2vw, 1.2rem); max-width: 62ch; margin: 1.25rem 0 0; color: #e3ebf4; }
.sfa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin: 2rem 0 0; }
.sfa-btn { display: inline-block; background: var(--sfa-cyan); color: var(--sfa-navy); font-family: var(--sfa-head); font-weight: 700; padding: .85rem 1.5rem; border-radius: 6px; text-decoration: none; }
.sfa-btn:hover { background: #fff; }
.sfa-updated { font-size: .9rem; color: #b9c8da; }

/* Sections */
.sfa-section { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.sfa-alt { background: var(--sfa-pale); }
.sfa-note { color: var(--sfa-muted); max-width: 62ch; margin: 0 0 1.75rem; }

/* Networks: the street strip is the page's signature element */
.sfa-networks { list-style: none; margin: 0; padding: 0; }
.sfa-net { display: grid; grid-template-columns: minmax(200px, 300px) 1fr; gap: 1rem 2rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--sfa-line); }
.sfa-net:last-child { border-bottom: 1px solid var(--sfa-line); }
.sfa-net-head { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-items: center; }
.sfa-net-head img { grid-row: span 2; width: 28px; height: 28px; object-fit: contain; }
.sfa-net-head h3 { font-size: 1.2rem; font-weight: 700; }
.sfa-net-head p { margin: 0; font-size: .92rem; color: var(--sfa-muted); }
.sfa-strip { display: flex; gap: 4px; height: 26px; }
.sfa-strip span { flex: 1; border-radius: 2px; background: var(--sfa-line); }
.sfa-strip .y { background: var(--sfa-blue); }
.sfa-strip .u { background: repeating-linear-gradient(45deg, var(--sfa-line) 0 4px, #fff 4px 8px); }
.sfa-net.is-absent h3 { color: var(--sfa-muted); }

/* Streets */
.sfa-streets { width: 100%; border-collapse: collapse; background: #fff; }
.sfa-streets th, .sfa-streets td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--sfa-line); vertical-align: top; }
.sfa-streets thead th { font-family: var(--sfa-head); font-size: .95rem; color: var(--sfa-navy); border-bottom: 2px solid var(--sfa-navy); }
.sfa-streets tbody th { font-weight: 600; }

/* Area lists */
.sfa-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 2rem; }
.sfa-areas li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--sfa-line); }
.sfa-areas a { color: var(--sfa-navy); font-weight: 600; text-decoration: none; }
.sfa-areas a:hover { color: var(--sfa-blue); text-decoration: underline; }
.sfa-areas span { font-size: .88rem; color: var(--sfa-muted); white-space: nowrap; }

.sfa a:focus-visible, .sfa-btn:focus-visible { outline: 3px solid var(--sfa-cyan); outline-offset: 3px; }

@media (max-width: 640px) {
	.sfa-net { grid-template-columns: 1fr; }
	.sfa-streets thead { display: none; }
	.sfa-streets tr { display: block; padding: .6rem 0; border-bottom: 1px solid var(--sfa-line); }
	.sfa-streets th, .sfa-streets td { display: block; border: 0; padding: .1rem 1rem; }
}