/* =============================================
               SCHOOL FINDER: News-section styling
               Open layout, white cards, control panel
               separated from the map
            ============================================= */
            .sf-app {
                --sf-primary: #EB6753;
                --sf-primary-dark: #d85540;
                --sf-primary-light: #FFF1ED;
                --sf-dark: #181A20;
                --sf-text: #181a20;
                --sf-text-soft: #303137;
                --sf-muted: #717171;
                --sf-border: #e8e8e8;
                --sf-bg: #f7f7f7;
                --sf-surface: #FFFFFF;
                --sf-success: #EB6753;
                --sf-warning: #F59E0B;
                --sf-danger: #EF4444;

                --sf-neutral: #303137;
                --sf-neutral-dark: #1C1D21;
                --sf-neutral-soft: #EAEBED;
                --sf-steel: #98A9BA;
                --sf-steel-dark: #7C8D9D;
                --sf-steel-soft: #EFF3F6;

                --sf-govt: #EB6753;
                --sf-govt-soft: #FFF1ED;
                --sf-catholic: #98A9BA;
                --sf-catholic-soft: #EFF3F6;
                --sf-independent: #303137;
                --sf-independent-soft: #EAEBED;

                --sf-shadow-sm: 0px 4px 16px rgba(24, 26, 32, 0.07);
                --sf-shadow: 0px 4px 20px rgba(24, 26, 32, 0.08), 0px 1px 4px rgba(24, 26, 32, 0.05);
                --sf-shadow-lg: 0px 12px 20px rgba(24, 26, 32, 0.12), 0px 2px 8px rgba(24, 26, 32, 0.1);

                font-family: var(--title-font-family, 'Poppins', sans-serif);
                color: var(--sf-text);
                position: relative;
            }

            /* =============================================
               COMMAND BAR / CONTROL PANEL (news style)
            ============================================= */
            .sf-commandbar {
                display: flex;
                align-items: center;
                gap: 14px;
                margin-bottom: 20px;
                flex-wrap: wrap;
            }

            .sf-searchwrap {
                flex: 1;
                min-width: 240px;
                position: relative;
                display: flex;
                align-items: center;
                background: #fff;
                border: 2px solid #e8e8e8;
                border-radius: 12px;
                padding: 4px 14px;
                min-height: 48px;
                transition: border-color 0.2s ease, box-shadow 0.2s ease;
            }

            .sf-searchwrap:focus-within {
                border-color: #EB6753;
                box-shadow: 0 0 0 3px rgba(235, 103, 83, 0.12);
            }

            .sf-searchwrap i {
                flex-shrink: 0;
                color: var(--sf-muted);
                font-size: 16px;
                margin-right: 10px;
            }

            .sf-searchwrap input {
                flex: 1;
                border: none;
                outline: none;
                background: transparent;
                font-size: 15px;
                color: #222;
                padding: 6px 0;
                font-family: inherit;
            }

            .sf-searchwrap input:focus { border: none; outline: none; box-shadow: none; }

            .sf-searchwrap input::placeholder { color: var(--sf-muted); }

            .sf-counts {
                display: flex;
                gap: 8px;
                flex-shrink: 0;
            }

            .sf-count-chip {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 10px 16px;
                background: #fff;
                border: 2px solid #e8e8e8;
                border-radius: 12px;
                font-size: 14px;
                font-weight: 600;
                color: var(--sf-text-soft);
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-count-chip strong {
                color: var(--sf-primary);
                font-weight: 700;
            }

            /* =============================================
               FILTERS (news topic-bar style)
            ============================================= */
            .sf-filterrail {
                display: flex;
                align-items: center;
                gap: 16px;
                margin-bottom: 24px;
                flex-wrap: wrap;
            }

            .sf-fgroup {
                display: flex;
                align-items: center;
                gap: 8px;
                flex-wrap: wrap;
            }

            .sf-fgroup-label {
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: var(--sf-muted);
                margin-right: 2px;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-pill {
                border: 2px solid #e8e8e8;
                background: #fff;
                color: #181a20;
                border-radius: 12px;
                padding: 8px 18px;
                font-size: 14px;
                font-weight: 600;
                cursor: pointer;
                transition: all 0.2s ease;
                white-space: nowrap;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
                line-height: 1.3;
            }

            .sf-pill:hover {
                border-color: #EB6753;
                color: #EB6753;
            }

            .sf-pill.is-active {
                background: #EB6753;
                border-color: #EB6753;
                color: #fff;
            }

            .sf-pill-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: inline-block;
            }

            .sf-fdivider {
                width: 2px;
                height: 22px;
                background: #e8e8e8;
                border-radius: 2px;
            }

            .sf-sortbox {
                margin-left: auto;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .sf-sortselect {
                display: flex;
                align-items: center;
                gap: 8px;
                border: 2px solid #e8e8e8;
                background: #fff;
                border-radius: 12px;
                padding: 10px 16px;
                font-size: 14px;
                font-weight: 600;
                color: #181a20;
                cursor: pointer;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
                white-space: nowrap;
                outline: none;
                appearance: none;
                -webkit-appearance: none;
                background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23181a20' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
                background-repeat: no-repeat;
                background-position: right 14px center;
                padding-right: 36px;
            }

            .sf-sortselect:hover {
                border-color: #EB6753;
            }

            /* =============================================
               SECTION DIVIDER (news style)
            ============================================= */
            .sf-section-divider {
                display: flex;
                align-items: center;
                gap: 14px;
                margin: 8px 0 22px 0;
            }

            .sf-section-divider h3 {
                font-size: 22px;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
                font-weight: 600;
                color: var(--sf-text);
                margin: 0;
                white-space: nowrap;
            }

            .sf-section-divider h3 span { color: #EB6753; }

            .sf-section-divider .sf-line {
                flex: 1;
                height: 2px;
                background: linear-gradient(to right, #EB6753, rgba(235,103,83,0));
                border-radius: 2px;
            }

            /* =============================================
               WORKSPACE, open layout: cards column + map
            ============================================= */
            .sf-workspace {
                display: grid;
                grid-template-columns: 420px minmax(0, 1fr);
                gap: 24px;
                align-items: start;
            }

            /* =============================================
               LIST COLUMN, normal document flow (open)
            ============================================= */
            .sf-list {
                max-height: 820px;
                overflow-y: auto;
                overflow-x: hidden;
                padding: 4px 12px 4px 2px;
    scrollbar-width: thin;
    scrollbar-color: #EB6753 transparent;
            }

            .sf-list::-webkit-scrollbar { width: 6px; }
            .sf-list::-webkit-scrollbar-thumb {
                background: rgba(0,0,0,0.2);
                border-radius: 4px;
            }
            .sf-list::-webkit-scrollbar-thumb:hover {
                background: rgba(0,0,0,0.35);
            }

            /* =============================================
               SCHOOL CARDS, white news-style cards
            ============================================= */
            .sf-card {
                background: #ffffff;
                border: 2px solid transparent;
                border-radius: 12px;
                padding: 0;
                margin-bottom: 18px;
                cursor: pointer;
                transition: 0.3s ease;
                position: relative;
                overflow: hidden;
                box-shadow: 0px 4px 20px rgba(24, 26, 32, 0.08), 0px 1px 4px rgba(24, 26, 32, 0.05);
                content-visibility: auto;
                contain-intrinsic-size: auto 420px;
            }

            .sf-card:hover {
                border-color: #EB6753;
                box-shadow: 0px 12px 20px rgba(24, 26, 32, 0.12), 0px 2px 8px rgba(24, 26, 32, 0.1);
            }

            .sf-card.is-selected {
                border-color: var(--sf-primary);
                box-shadow: 0px 8px 22px rgba(235, 103, 83, 0.22);
            }

            /* School photo banner */
            .sf-card-photo {
                position: relative;
                width: 100%;
                height: 150px;
                overflow: hidden;
                background: #eee;
            }

            .sf-card-photo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform 0.4s ease;
            }

            .sf-card:hover .sf-card-photo img {
                transform: scale(1.08);
            }

            .sf-card-photo::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(24,26,32,0) 40%, rgba(24,26,32,0.62) 100%);
            }

            .sf-card-photo-fallback {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 40px;
                color: rgba(255,255,255,0.9);
            }

            .sf-card[data-sector="Government"] .sf-card-photo-fallback {
                background: linear-gradient(135deg, #EB6753 0%, #D85540 100%);
            }
            .sf-card[data-sector="Catholic"] .sf-card-photo-fallback {
                background: linear-gradient(135deg, #98A9BA 0%, #7C8D9D 100%);
            }
            .sf-card[data-sector="Independent"] .sf-card-photo-fallback {
                background: linear-gradient(135deg, #303137 0%, #1C1D21 100%);
            }

            .sf-card-photo-badges {
                position: absolute;
                top: 14px;
                left: 14px;
                display: flex;
                gap: 6px;
                z-index: 2;
            }

            .sf-photo-badge {
                font-size: 12px;
                font-weight: 600;
                padding: 4px 12px;
                border-radius: 6px;
                color: #fff;
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-photo-badge[data-sector="Government"] { background: #EB6753; }
            .sf-photo-badge[data-sector="Catholic"] { background: #98A9BA; }
            .sf-photo-badge[data-sector="Independent"] { background: #303137; }

            .sf-photo-badge.level {
                background: rgba(255, 255, 255, 0.92);
                color: #303137;
            }

            .sf-pinbtn {
                position: absolute;
                top: 12px;
                right: 12px;
                z-index: 2;
                background: rgba(255, 255, 255, 0.95);
                border: 2px solid #fff;
                border-radius: 9px;
                width: 34px;
                height: 34px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                color: var(--sf-text-soft);
                font-size: 12px;
                transition: all 0.2s;
                box-shadow: 0 2px 8px rgba(0,0,0,0.18);
            }

            .sf-pinbtn:hover {
                background: var(--sf-primary-light);
                border-color: var(--sf-primary);
                color: var(--sf-primary);
            }

            .sf-pinbtn.is-on {
                background: var(--sf-primary);
                border-color: var(--sf-primary);
                color: #fff;
            }

            .sf-card-photo-name {
                position: absolute;
                left: 16px;
                right: 16px;
                bottom: 12px;
                z-index: 2;
            }

            .sf-card-photo-name h4 {
                margin: 0;
                font-size: 16px;
                font-weight: 600;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
                color: #fff;
                line-height: 1.35;
                text-shadow: 0 1px 4px rgba(0,0,0,0.5);
            }

            .sf-card-body {
                padding: 16px 20px 0;
            }

            .sf-card-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 5px 14px;
                font-size: 12px;
                color: var(--sf-muted);
                font-weight: 600;
                margin-bottom: 14px;
            }

            .sf-card-meta-item {
                display: inline-flex;
                align-items: center;
                gap: 5px;
            }

            .sf-card-meta-item i {
                font-size: 11px;
                color: var(--sf-primary);
            }

            .sf-card-meta-item.sector[data-sector="Government"] i { color: var(--sf-govt); }
            .sf-card-meta-item.sector[data-sector="Catholic"] i { color: var(--sf-catholic); }
            .sf-card-meta-item.sector[data-sector="Independent"] i { color: var(--sf-independent); }

            /* ICSEA visualization, gauge style */
            .sf-icsea-row {
                margin-bottom: 14px;
            }

            .sf-icsea-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 6px;
                font-size: 11px;
                font-weight: 600;
            }

            .sf-icsea-label {
                color: var(--sf-muted);
                text-transform: uppercase;
                letter-spacing: 0.4px;
            }

            .sf-icsea-value {
                color: var(--sf-text);
                font-weight: 700;
                font-size: 12px;
            }

            .sf-icsea-track {
                height: 6px;
                background: #f0f0f0;
                border-radius: 3px;
                position: relative;
                overflow: visible;
            }

            .sf-icsea-fill {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                border-radius: 3px;
                background: linear-gradient(90deg, #98A9BA 0%, #F59E0B 50%, #EB6753 100%);
            }

            .sf-icsea-pin {
                position: absolute;
                top: 50%;
                width: 12px;
                height: 12px;
                background: #fff;
                border: 2.5px solid var(--sf-text);
                border-radius: 50%;
                transform: translate(-50%, -50%);
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            }

            /* Stats row */
            .sf-card-stats {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
                gap: 8px;
                padding: 14px 20px;
                margin: 0 -20px 0;
                border-top: 1px solid #f0f0f0;
            }

            .sf-stat {
                text-align: center;
            }

            .sf-stat-val {
                font-size: 15px;
                font-weight: 700;
                color: var(--sf-text);
                line-height: 1.1;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-stat-val.na {
                color: var(--sf-muted);
                font-weight: 500;
            }

            .sf-stat-key {
                font-size: 10px;
                color: var(--sf-muted);
                text-transform: uppercase;
                letter-spacing: 0.4px;
                font-weight: 600;
                margin-top: 3px;
            }

            /* Empty state (news style) */
            .sf-empty {
                text-align: center;
                padding: 60px 20px;
                color: var(--sf-muted);
                background: #fff;
                border-radius: 12px;
                border: 2px solid #f0f0f0;
            }

            .sf-empty i {
                font-size: 50px;
                color: #EB6753;
                opacity: 0.8;
                margin-bottom: 18px;
                display: block;
            }

            .sf-empty p {
                font-size: 15px;
                margin: 0;
                font-weight: 500;
            }

            /* =============================================
               MAP COLUMN, sits beside the list, sticky
            ============================================= */
            .sf-mapcol {
                position: sticky;
                top: 90px;
            }

            .sf-mapwrap {
                position: relative;
                height: 820px;
                background: #E8EAED;
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0px 8px 30px rgba(24, 26, 32, 0.14);
                border: 2px solid #fff;
            }

            .sf-map {
                width: 100%;
                height: 100%;
            }

            .sf-map .maplibregl-ctrl-attrib,
            .sf-map .maplibregl-ctrl-logo {
                display: none !important;
            }

            /* Floating map UI */
            .sf-maplegend {
                position: absolute;
                bottom: 16px;
                left: 16px;
                background: #fff;
                border-radius: 12px;
                padding: 0;
                box-shadow: 0px 8px 24px rgba(24, 26, 32, 0.14);
                z-index: 3;
                font-size: 12px;
                max-width: 220px;
                border: 2px solid #f0f0f0;
                overflow: hidden;
            }

            .sf-maplegend-toggle {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 100%;
                background: transparent;
                border: 0;
                padding: 10px 13px;
                cursor: pointer;
                font-family: inherit;
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: var(--sf-text);
                line-height: 1;
            }

            .sf-maplegend-toggle i:first-child {
                color: var(--sf-primary);
                font-size: 12px;
            }

            .sf-maplegend-toggle-text {
                flex: 1;
                text-align: left;
                white-space: nowrap;
            }

            .sf-maplegend-chevron {
                font-size: 10px;
                color: var(--sf-muted);
                transition: transform 0.25s ease;
            }

            .sf-maplegend:not(.is-collapsed) .sf-maplegend-chevron {
                transform: rotate(180deg);
            }

            .sf-maplegend-body {
                padding: 11px 13px 13px;
                border-top: 1px solid #f0f0f0;
            }

            .sf-maplegend.is-collapsed .sf-maplegend-body {
                display: none;
            }

            .sf-maplegend-title {
                font-size: 10px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: var(--sf-muted);
                margin-bottom: 7px;
            }

            .sf-legend-item {
                display: flex;
                align-items: center;
                gap: 8px;
                padding: 3px 0;
                font-weight: 600;
                color: var(--sf-text);
                font-size: 12px;
            }

            .sf-legend-dot {
                width: 14px;
                height: 14px;
                border-radius: 50%;
                border: 2px solid #fff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
                flex-shrink: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
            }

            .sf-legend-dot svg {
                width: 8px;
                height: 8px;
                fill: #fff;
            }

            .sf-legend-divider {
                height: 1px;
                background: #f0f0f0;
                margin: 9px 0;
            }

            .sf-legend-toggle {
                display: inline-block;
                font-size: 11px;
                font-weight: 600;
                padding: 3px 11px;
                border-radius: 12px;
                cursor: pointer;
                margin: 3px 3px 0 0;
                color: #fff;
                user-select: none;
                transition: opacity 0.2s;
            }

            .sf-legend-toggle.is-hidden {
                opacity: 0.35;
            }

            /* Map control stack */
            .sf-mapctrls {
                position: absolute;
                top: 16px;
                right: 16px;
                display: flex;
                flex-direction: column;
                gap: 6px;
                z-index: 3;
            }

            .sf-mapbtn {
                background: #fff;
                border: 2px solid #fff;
                border-radius: 12px;
                width: 44px;
                height: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                box-shadow: 0px 4px 16px rgba(24, 26, 32, 0.12);
                color: var(--sf-text);
                transition: all 0.2s;
                font-size: 14px;
                font-weight: 700;
                font-family: inherit;
            }

            .sf-mapbtn:hover {
                background: var(--sf-primary);
                color: #fff;
                border-color: var(--sf-primary);
            }

            .sf-mapbtn.is-on {
                background: var(--sf-primary);
                color: #fff;
                border-color: var(--sf-primary);
            }

            /* 3D-only sub-controls */
            .sf-map3dctrls {
                position: absolute;
                top: 16px;
                right: 66px;
                display: none;
                flex-direction: column;
                gap: 6px;
                z-index: 3;
            }

            .sf-map3dctrls.is-visible { display: flex; }

            /* Compass */
            .sf-compass {
                position: absolute;
                top: 16px;
                right: 116px;
                width: 44px;
                height: 44px;
                background: #181A20;
                border-radius: 50%;
                border: 2px solid #fff;
                display: none;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 700;
                font-size: 12px;
                z-index: 3;
                box-shadow: 0px 4px 16px rgba(24, 26, 32, 0.2);
                transition: transform 0.1s linear;
            }

            .sf-compass.is-visible { display: flex; }

            /* Compare tray, floating dock */
            .sf-tray {
                position: absolute;
                bottom: 18px;
                left: 50%;
                transform: translateX(-50%) translateY(180%);
                background: #181A20;
                border-radius: 12px;
                padding: 12px 18px;
                box-shadow: 0px 16px 40px rgba(0, 0, 0, 0.3);
                z-index: 5;
                display: flex;
                align-items: center;
                gap: 14px;
                transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
                max-width: calc(100% - 32px);
            }

            .sf-tray.is-visible {
                transform: translateX(-50%) translateY(0);
            }

            .sf-tray-pile {
                display: flex;
                align-items: center;
            }

            .sf-tray-chip {
                width: 32px;
                height: 32px;
                border-radius: 12px;
                color: #fff;
                font-size: 11px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: -8px;
                border: 2px solid #181A20;
                font-weight: 600;
                overflow: hidden;
                background-size: cover;
                background-position: center;
            }

            .sf-tray-chip:first-child { margin-left: 0; }

            .sf-tray-chip[data-sector="Government"] {
                background-color: #EB6753;
                background-image: linear-gradient(135deg, #EB6753 0%, #D85540 100%);
            }
            .sf-tray-chip[data-sector="Catholic"] {
                background-color: #98A9BA;
                background-image: linear-gradient(135deg, #98A9BA 0%, #7C8D9D 100%);
            }
            .sf-tray-chip[data-sector="Independent"] {
                background-color: #303137;
                background-image: linear-gradient(135deg, #303137 0%, #1C1D21 100%);
            }

            .sf-tray-text {
                color: #fff;
                font-size: 13px;
                font-weight: 500;
            }

            .sf-tray-text strong {
                font-weight: 700;
            }

            .sf-tray-actions {
                display: flex;
                gap: 8px;
            }

            .sf-tray-btn {
                background: var(--sf-primary);
                border: none;
                color: #fff;
                font-weight: 600;
                font-size: 13px;
                padding: 10px 18px;
                border-radius: 12px;
                cursor: pointer;
                display: inline-flex;
                align-items: center;
                gap: 6px;
                transition: all 0.2s;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-tray-btn:hover {
                background: var(--sf-primary-dark);
            }

            .sf-tray-btn.is-secondary {
                background: rgba(255, 255, 255, 0.12);
            }

            .sf-tray-btn.is-secondary:hover {
                background: rgba(255, 255, 255, 0.22);
            }

            /* =============================================
               MAP MARKERS (kept structurally same)
            ============================================= */
            .sf-marker {
                width: 34px;
                height: 43px;
                cursor: pointer;
                position: absolute;
                top: 0;
                left: 0;
                box-sizing: border-box;
                line-height: 0;
                z-index: 1;
            }

            .sf-marker:hover {
                z-index: 500;
            }

            .sf-marker.is-active {
                z-index: 900 !important;
            }

            .sf-marker-svg {
                position: absolute;
                top: 0;
                left: 0;
                width: 34px;
                height: 43px;
                pointer-events: none;
                filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
                transition: transform 0.2s ease;
                transform-origin: 50% 100%;
                display: block;
            }

            .sf-marker:hover .sf-marker-svg { transform: scale(1.1); }
            .sf-marker.is-active .sf-marker-svg {
                transform: scale(1.25);
                filter: drop-shadow(0 6px 14px rgba(235, 103, 83, 0.55));
            }

            .sf-marker-head { transition: fill 0.2s ease; }

            .sf-marker[data-sector="Government"] .sf-marker-head { fill: #EB6753; }
            .sf-marker[data-sector="Catholic"] .sf-marker-head { fill: #98A9BA; }
            .sf-marker[data-sector="Independent"] .sf-marker-head { fill: #303137; }
            .sf-marker.is-active .sf-marker-head { fill: #D85540 !important; }

            .sf-marker-icon-svg {
                position: absolute;
                top: 8px;
                left: 50%;
                transform: translateX(-50%);
                width: 18px;
                height: 18px;
                pointer-events: none;
                fill: #fff;
                display: block;
                transition: transform 0.2s ease;
                transform-origin: 50% calc(100% + 17px);
            }

            .sf-marker:hover .sf-marker-icon-svg { transform: translateX(-50%) scale(1.1); }
            .sf-marker.is-active .sf-marker-icon-svg { transform: translateX(-50%) scale(1.25); }

            .sf-marker-badge {
                position: absolute;
                top: 0;
                right: 0;
                width: 16px;
                height: 16px;
                background: #fff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 1px 3px rgba(0,0,0,0.4);
                border: 1.5px solid #fff;
                pointer-events: none;
                z-index: 2;
                transition: transform 0.2s ease;
                transform-origin: 50% 50%;
                box-sizing: border-box;
                overflow: hidden;
            }

            .sf-marker-badge svg {
                width: 10px;
                height: 10px;
                fill: #fff;
                display: block;
            }

            .sf-marker:hover .sf-marker-badge,
            .sf-marker.is-active .sf-marker-badge { transform: scale(1.1); }

            .sf-marker[data-type="Primary"] .sf-marker-badge { background: #F59E0B; }
            .sf-marker[data-type="Secondary"] .sf-marker-badge { background: #303137; }

            /* Marker popup, white news-style card */
            .sf-mapwrap .maplibregl-popup {
                z-index: 1000;
            }

            .sf-popup .maplibregl-popup-content {
                padding: 0 !important;
                border-radius: 12px !important;
                overflow: hidden;
                box-shadow: 0px 12px 30px rgba(24, 26, 32, 0.18) !important;
                min-width: 280px;
                max-width: 300px;
                background: #fff !important;
                border: 2px solid #f0f0f0;
            }

            .sf-popup .maplibregl-popup-close-button {
                color: #fff;
                font-size: 16px;
                line-height: 1;
                right: 6px;
                top: 6px;
                z-index: 2;
                background: rgba(0,0,0,0.35);
                width: 22px;
                height: 22px;
                padding: 0;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .sf-popup .maplibregl-popup-close-button span {
                display: block;
                line-height: 1;
                margin-top: -1px;
            }

            .sf-popup .maplibregl-popup-tip {
                border-top-color: #fff !important;
            }

            .sf-pop {
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-pop-photo {
                position: relative;
                width: 100%;
                height: 120px;
                overflow: hidden;
                background: #eee;
            }

            .sf-pop-photo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .sf-pop-photo::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(24,26,32,0) 35%, rgba(24,26,32,0.62) 100%);
            }

            .sf-pop-photo-fallback {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 36px;
                color: rgba(255,255,255,0.9);
            }

            .sf-pop-photo-fallback[data-sector="Government"] {
                background: linear-gradient(135deg, #EB6753 0%, #D85540 100%);
            }
            .sf-pop-photo-fallback[data-sector="Catholic"] {
                background: linear-gradient(135deg, #98A9BA 0%, #7C8D9D 100%);
            }
            .sf-pop-photo-fallback[data-sector="Independent"] {
                background: linear-gradient(135deg, #303137 0%, #1C1D21 100%);
            }

            .sf-pop-photo-text {
                position: absolute;
                left: 14px;
                right: 14px;
                bottom: 10px;
                z-index: 2;
            }

            .sf-pop-photo-text .sf-pop-name {
                font-size: 15px;
                font-weight: 600;
                color: #fff;
                margin: 0;
                line-height: 1.3;
                text-shadow: 0 1px 4px rgba(0,0,0,0.5);
            }

            .sf-pop-photo-text .sf-pop-sub {
                font-size: 11px;
                color: rgba(255,255,255,0.9);
                margin-top: 2px;
                font-weight: 500;
            }

            .sf-pop-body {
                padding: 14px 16px 16px;
            }

            .sf-pop-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
                margin-bottom: 12px;
            }

            .sf-pop-stat {
                background: var(--sf-bg);
                padding: 9px 10px;
                border-radius: 8px;
            }

            .sf-pop-stat-key {
                font-size: 9px;
                color: var(--sf-muted);
                text-transform: uppercase;
                letter-spacing: 0.4px;
                font-weight: 600;
            }

            .sf-pop-stat-val {
                font-size: 15px;
                font-weight: 700;
                color: var(--sf-text);
                margin-top: 2px;
            }

            .sf-pop-btn {
                display: block;
                width: 100%;
                background: var(--sf-primary);
                color: #fff;
                border: none;
                padding: 11px;
                border-radius: 12px;
                font-weight: 600;
                font-size: 13px;
                cursor: pointer;
                text-align: center;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
                transition: all 0.2s;
            }

            .sf-pop-btn:hover {
                background: var(--sf-primary-dark);
            }

            /* =============================================
               SLIDE-IN DRAWERS: Detail + Compare
               Centered modal, white news-style surfaces
            ============================================= */
            .sf-overlay {
                display: none;
                position: fixed;
                inset: 0;
                background: rgba(24, 26, 32, 0.55);
                z-index: 9998;
                opacity: 0;
                transition: opacity 0.35s ease;
            }

            .sf-overlay.is-visible {
                display: block;
                opacity: 1;
            }

            .sf-drawer {
                position: fixed;
                top: 50%;
                left: 50%;
                bottom: auto;
                right: auto;
                height: calc(100vh - 48px);
                max-height: calc(100vh - 48px);
                background: #fff;
                z-index: 9999;
                transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.4s ease;
                display: flex;
                flex-direction: column;
                border-radius: 12px;
                box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
                overflow: hidden;
                opacity: 0;
                pointer-events: none;
            }

            /* Detail drawer width */
            .sf-detail {
                width: 800px;
                max-width: calc(100vw - 48px);
                transform: translate(-50%, -46%) scale(0.96);
            }

            /* Compare drawer width (wider) */
            .sf-compare-drawer {
                width: 1120px;
                max-width: calc(100vw - 48px);
                transform: translate(-50%, -46%) scale(0.96);
            }

            .sf-drawer.is-open {
                transform: translate(-50%, -50%) scale(1);
                opacity: 1;
                pointer-events: auto;
            }

            .sf-detail-inner {
                position: relative;
                z-index: 1;
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            /* Detail drawer hero photo header */
            .sf-detail-hero {
                position: relative;
                height: 290px;
                flex-shrink: 0;
                overflow: hidden;
                background: #eee;
            }

            .sf-detail-hero img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .sf-detail-hero::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(to top, rgba(24,26,32,0.92) 0%, rgba(24,26,32,0.45) 45%, rgba(24,26,32,0) 78%);
            }

            .sf-detail-hero-fallback {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 64px;
                color: rgba(255,255,255,0.9);
            }

            .sf-detail-hero-fallback[data-sector="Government"] {
                background: linear-gradient(135deg, #EB6753 0%, #D85540 100%);
            }
            .sf-detail-hero-fallback[data-sector="Catholic"] {
                background: linear-gradient(135deg, #98A9BA 0%, #7C8D9D 100%);
            }
            .sf-detail-hero-fallback[data-sector="Independent"] {
                background: linear-gradient(135deg, #303137 0%, #1C1D21 100%);
            }

            .sf-detail-hero-content {
                position: absolute;
                left: 28px;
                right: 28px;
                bottom: 22px;
                z-index: 2;
            }

            .sf-detail-loc {
                display: flex;
                align-items: center;
                gap: 6px;
                font-size: 12px;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: rgba(255,255,255,0.85);
                font-weight: 600;
                margin-bottom: 8px;
            }

            .sf-detail-loc i {
                color: var(--sf-primary);
            }

            .sf-detail-name {
                font-size: 28px;
                font-weight: 600;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
                margin: 0 0 12px 0;
                line-height: 1.25;
                color: #fff;
                text-shadow: 0 2px 8px rgba(0,0,0,0.4);
            }

            .sf-detail-tags {
                display: flex;
                gap: 6px;
                flex-wrap: wrap;
            }

            .sf-tag {
                font-size: 11px;
                font-weight: 600;
                padding: 4px 11px;
                border-radius: 6px;
                background: #fff;
                color: var(--sf-text);
                display: inline-flex;
                align-items: center;
                gap: 4px;
            }

            .sf-tag i {
                font-size: 9px;
            }

            .sf-tag.sector[data-sector="Government"] { color: var(--sf-govt); }
            .sf-tag.sector[data-sector="Catholic"] { color: var(--sf-catholic); }
            .sf-tag.sector[data-sector="Independent"] { color: var(--sf-independent); }
            .sf-tag.gem { background: linear-gradient(135deg, #FFB800, #FF9800); color: #fff; }

            .sf-detail-close,
            .sf-cmp-close {
                position: absolute;
                top: 18px;
                right: 18px;
                z-index: 3;
                background: rgba(0,0,0,0.4);
                border: 2px solid rgba(255,255,255,0.25);
                border-radius: 50%;
                width: 38px;
                height: 38px;
                color: #fff;
                cursor: pointer;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all 0.2s;
                flex-shrink: 0;
            }

            .sf-detail-close:hover,
            .sf-cmp-close:hover {
                background: var(--sf-primary);
                border-color: var(--sf-primary);
                transform: rotate(90deg);
            }

            .sf-detail-body {
                flex: 1;
                overflow-y: auto;
                padding: 0;
                scrollbar-width: thin;
                scrollbar-color: rgba(0,0,0,0.15) transparent;
            }

            .sf-detail-body::-webkit-scrollbar { width: 6px; }
            .sf-detail-body::-webkit-scrollbar-thumb {
                background: rgba(0,0,0,0.15);
                border-radius: 4px;
            }

            .sf-block {
                padding: 24px 28px;
                border-bottom: 1px solid #f0f0f0;
            }

            .sf-block:last-of-type {
                border-bottom: none;
            }

            .sf-block-title {
                font-size: 11px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.6px;
                color: var(--sf-muted);
                margin: 0 0 16px 0;
                display: flex;
                align-items: center;
                gap: 8px;
            }

            .sf-block-title i {
                color: var(--sf-primary);
                font-size: 12px;
            }

            /* Hero stats */
            .sf-stats-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 10px;
            }

            .sf-glass-stat {
                background: var(--sf-bg);
                border: 1px solid #f0f0f0;
                border-radius: 12px;
                padding: 16px 10px;
                text-align: center;
                transition: transform 0.2s;
            }

            .sf-glass-stat:hover {
                transform: translateY(-2px);
                border-color: #EB6753;
            }

            .sf-glass-stat-val {
                font-size: 22px;
                font-weight: 700;
                color: var(--sf-text);
                line-height: 1;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-glass-stat-val.compact {
                font-size: 16px;
            }

            .sf-glass-stat-key {
                font-size: 10px;
                color: var(--sf-muted);
                text-transform: uppercase;
                letter-spacing: 0.4px;
                margin-top: 5px;
                font-weight: 600;
            }

            .sf-glass-stat-sub {
                font-size: 10px;
                color: var(--sf-text-soft);
                margin-top: 2px;
                font-weight: 500;
            }

            /* AI summary card (news style) */
            .sf-summary-card {
                background: var(--sf-bg);
                border-left: 4px solid var(--sf-primary);
                padding: 18px 20px;
                border-radius: 0 8px 8px 0;
                font-size: 15px;
                line-height: 1.7;
                color: var(--sf-text-soft);
            }

            .sf-summary-card p { margin: 0; }

            .sf-principal-line {
                margin-top: 12px;
                font-size: 13px;
                color: var(--sf-text-soft);
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .sf-principal-line strong {
                color: var(--sf-text);
                font-weight: 600;
            }

            .sf-principal-line i {
                color: var(--sf-primary);
            }

            details.sf-report {
                margin-top: 12px;
            }

            details.sf-report summary {
                cursor: pointer;
                font-size: 13px;
                font-weight: 600;
                color: var(--sf-primary);
                list-style: none;
                display: inline-flex;
                align-items: center;
                gap: 5px;
            }

            details.sf-report summary::-webkit-details-marker {
                display: none;
            }

            details.sf-report[open] > div {
                font-size: 13px;
                line-height: 1.6;
                color: var(--sf-text-soft);
                margin-top: 8px;
                padding: 14px 16px;
                background: var(--sf-bg);
                border-radius: 8px;
                border: 1px solid #f0f0f0;
            }

            /* Score bars */
            .sf-scores {
                display: flex;
                flex-direction: column;
                gap: 14px;
            }

            .sf-score-row {
                display: grid;
                grid-template-columns: 140px 1fr 44px;
                align-items: center;
                gap: 12px;
            }

            .sf-score-label {
                font-size: 13px;
                font-weight: 600;
                color: var(--sf-text);
                display: flex;
                align-items: center;
                gap: 7px;
            }

            .sf-score-label i {
                color: var(--sf-muted);
                font-size: 11px;
                width: 14px;
            }

            .sf-score-bar {
                height: 8px;
                background: #f0f0f0;
                border-radius: 4px;
                position: relative;
                overflow: hidden;
            }

            .sf-score-fill {
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                border-radius: 4px;
                transition: width 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
            }

            .sf-score-fill.high { background: linear-gradient(90deg, #EB6753, #D85540); }
            .sf-score-fill.mid { background: linear-gradient(90deg, #F59E0B, #D97706); }
            .sf-score-fill.low { background: linear-gradient(90deg, #98A9BA, #7C8D9D); }

            .sf-score-val {
                font-size: 13px;
                font-weight: 700;
                color: var(--sf-text);
                text-align: right;
            }

            .sf-score-val.na {
                color: var(--sf-muted);
                font-weight: 500;
                font-size: 11px;
            }

            /* NAPLAN grid */
            .sf-naplan-grid {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 8px;
                margin-bottom: 16px;
            }

            .sf-naplan-cell {
                background: var(--sf-bg);
                border: 1px solid #f0f0f0;
                border-radius: 12px;
                padding: 12px 6px;
                text-align: center;
            }

            .sf-naplan-domain {
                font-size: 9px;
                color: var(--sf-muted);
                text-transform: uppercase;
                letter-spacing: 0.4px;
                font-weight: 600;
            }

            .sf-naplan-score {
                font-size: 16px;
                font-weight: 700;
                color: var(--sf-text);
                margin-top: 4px;
            }

            .sf-naplan-vs {
                font-size: 9px;
                margin-top: 2px;
                font-weight: 600;
            }

            .sf-naplan-vs.up { color: var(--sf-success); }
            .sf-naplan-vs.down { color: var(--sf-danger); }
            .sf-naplan-vs.flat { color: var(--sf-muted); }

            /* NAPLAN chart */
            .sf-chart-wrap {
                background: var(--sf-bg);
                border: 1px solid #f0f0f0;
                border-radius: 12px;
                padding: 16px 16px 12px;
                margin-top: 8px;
            }

            .sf-chart-head {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 8px;
                flex-wrap: wrap;
                gap: 8px;
            }

            .sf-chart-title {
                font-size: 13px;
                font-weight: 700;
                color: var(--sf-text);
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .sf-chart-title i { color: var(--sf-primary); }

            .sf-year-toggle {
                display: flex;
                gap: 4px;
            }

            .sf-year-chip {
                font-size: 11px;
                font-weight: 700;
                padding: 4px 12px;
                border-radius: 12px;
                cursor: pointer;
                background: #fff;
                border: 2px solid #e8e8e8;
                color: var(--sf-text);
                transition: all 0.2s;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-year-chip.is-active {
                background: var(--sf-primary);
                border-color: var(--sf-primary);
                color: #fff;
            }

            .sf-chart {
                width: 100%;
                height: 220px;
                position: relative;
            }

            .sf-chart-legend {
                display: flex;
                flex-wrap: wrap;
                gap: 10px 14px;
                margin-top: 10px;
                font-size: 11px;
                font-weight: 500;
            }

            .sf-chart-legend-item {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                color: var(--sf-text);
                cursor: pointer;
                user-select: none;
                transition: opacity 0.2s;
            }

            .sf-chart-legend-item.is-dim { opacity: 0.3; }

            .sf-chart-legend-dot {
                width: 12px;
                height: 3px;
                border-radius: 2px;
            }

            /* SEA distribution */
            .sf-sea-bar {
                display: flex;
                height: 32px;
                border-radius: 12px;
                overflow: hidden;
                margin-bottom: 10px;
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
            }

            .sf-sea-seg {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 700;
                font-size: 11px;
                transition: flex-basis 0.7s ease;
            }

            .sf-sea-seg-bottom { background: linear-gradient(135deg, #EF4444, #DC2626); }
            .sf-sea-seg-lower { background: linear-gradient(135deg, #F59E0B, #D97706); }
            .sf-sea-seg-upper { background: linear-gradient(135deg, #98A9BA, #7C8D9D); }
            .sf-sea-seg-top { background: linear-gradient(135deg, #EB6753, #D85540); }

            .sf-sea-legend {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 8px;
                font-size: 10px;
            }

            .sf-sea-leg-item {
                display: flex;
                align-items: center;
                gap: 5px;
            }

            .sf-sea-leg-dot {
                width: 10px;
                height: 10px;
                border-radius: 3px;
            }

            /* Programs */
            .sf-programs {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .sf-program-group {
                background: var(--sf-bg);
                border: 1px solid #f0f0f0;
                border-radius: 12px;
                padding: 14px 16px;
            }

            .sf-program-group-title {
                font-size: 10px;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                color: var(--sf-muted);
                margin-bottom: 8px;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .sf-program-group-title i {
                color: var(--sf-primary);
            }

            .sf-program-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
            }

            .sf-program-tag {
                background: #fff;
                border: 1px solid #e8e8e8;
                border-radius: 12px;
                padding: 5px 13px;
                font-size: 12px;
                color: var(--sf-text);
                font-weight: 500;
            }

            /* Demographics */
            .sf-demo-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 10px;
            }

            .sf-demo-card {
                background: var(--sf-bg);
                border: 1px solid #f0f0f0;
                border-radius: 12px;
                padding: 14px 16px;
                display: flex;
                align-items: center;
                gap: 12px;
            }

            .sf-demo-icon {
                width: 40px;
                height: 40px;
                border-radius: 12px;
                background: rgba(235, 103, 83, 0.12);
                color: var(--sf-primary);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                flex-shrink: 0;
            }

            .sf-demo-val {
                font-size: 18px;
                font-weight: 700;
                color: var(--sf-text);
                line-height: 1;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-demo-lab {
                font-size: 11px;
                color: var(--sf-muted);
                margin-top: 3px;
                font-weight: 500;
            }

            /* Gender split */
            .sf-gender-section {
                margin-bottom: 14px;
            }

            .sf-gender-bar {
                height: 36px;
                background: #f0f0f0;
                border-radius: 12px;
                overflow: hidden;
                display: flex;
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
            }

            .sf-gender-girls {
                background: linear-gradient(135deg, #EB6753, #D85540);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 700;
                font-size: 12px;
            }

            .sf-gender-boys {
                background: linear-gradient(135deg, #98A9BA, #7C8D9D);
                display: flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                font-weight: 700;
                font-size: 12px;
            }

            /* Finance */
            .sf-finance-top {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 10px;
                margin-bottom: 14px;
            }

            .sf-fin-card {
                background: var(--sf-bg);
                border: 1px solid #f0f0f0;
                border-radius: 12px;
                padding: 16px;
            }

            .sf-fin-label {
                font-size: 11px;
                color: var(--sf-muted);
                margin-bottom: 5px;
                font-weight: 500;
            }

            .sf-fin-value {
                font-size: 18px;
                font-weight: 700;
                color: var(--sf-text);
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-income-bar {
                display: flex;
                height: 14px;
                border-radius: 7px;
                overflow: hidden;
                margin: 10px 0;
                box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
            }

            .sf-income-state { background: #98A9BA; }
            .sf-income-fed { background: #303137; }
            .sf-income-fees { background: var(--sf-primary); }
            .sf-income-other { background: var(--sf-muted); }

            .sf-income-legend {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
                font-size: 11px;
                color: var(--sf-text);
            }

            /* Year 12 outcomes & VET */
            .sf-hsc-grid {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 10px;
            }

            .sf-vet-list {
                display: flex;
                flex-direction: column;
                gap: 6px;
                margin-top: 12px;
            }

            .sf-vet-row {
                display: flex;
                align-items: center;
                gap: 12px;
                background: var(--sf-bg);
                border: 1px solid #f0f0f0;
                border-radius: 12px;
                padding: 10px 14px;
                font-size: 12px;
            }

            .sf-vet-label {
                flex: 1;
                color: var(--sf-text);
                font-weight: 500;
            }

            .sf-vet-count {
                background: rgba(235, 103, 83, 0.12);
                color: var(--sf-primary);
                font-weight: 700;
                font-size: 11px;
                padding: 3px 11px;
                border-radius: 12px;
            }

            /* Suburb card */
            .sf-suburb-card {
                background: linear-gradient(135deg, #303137 0%, #1C1D21 100%);
                border-radius: 12px;
                padding: 18px;
                color: #fff;
                position: relative;
                overflow: hidden;
            }

            .sf-suburb-card::before {
                content: '';
                position: absolute;
                top: -50%;
                right: -20%;
                width: 250px;
                height: 250px;
                background: radial-gradient(circle, rgba(235, 103, 83, 0.2) 0%, transparent 70%);
            }

            .sf-suburb-inner {
                position: relative;
                z-index: 1;
            }

            .sf-suburb-loc {
                font-size: 12px;
                font-weight: 600;
                opacity: 0.7;
                margin-bottom: 4px;
                letter-spacing: 0.4px;
                text-transform: uppercase;
            }

            .sf-suburb-price {
                font-size: 30px;
                font-weight: 800;
                margin-bottom: 10px;
            }

            .sf-suburb-meta {
                display: flex;
                gap: 16px;
                flex-wrap: wrap;
                font-size: 12px;
            }

            .sf-suburb-meta strong {
                font-weight: 700;
            }

            .sf-suburb-growth {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                background: rgba(235, 103, 83, 0.25);
                color: #F7B9AD;
                padding: 4px 12px;
                border-radius: 12px;
                font-size: 11px;
                font-weight: 700;
                margin-top: 10px;
            }

            /* Strengths / suited */
            .sf-strengths {
                display: flex;
                flex-direction: column;
                gap: 10px;
            }

            .sf-strength {
                display: flex;
                align-items: flex-start;
                gap: 12px;
                background: var(--sf-bg);
                border: 1px solid #f0f0f0;
                padding: 14px 16px;
                border-radius: 12px;
            }

            .sf-strength-icon {
                width: 28px;
                height: 28px;
                border-radius: 12px;
                background: rgba(235, 103, 83, 0.15);
                color: var(--sf-success);
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 11px;
                flex-shrink: 0;
            }

            .sf-strength.trophy .sf-strength-icon {
                background: rgba(245, 158, 11, 0.15);
                color: var(--sf-warning);
            }

            .sf-strength-text {
                font-size: 14px;
                line-height: 1.6;
                color: var(--sf-text-soft);
            }

            .sf-suited {
                background: var(--sf-bg);
                border-left: 4px solid var(--sf-success);
                padding: 16px 18px;
                border-radius: 0 8px 8px 0;
                font-size: 14px;
                line-height: 1.7;
                font-style: italic;
                color: var(--sf-text-soft);
            }

            /* Footer */
            .sf-detail-foot {
                padding: 18px 28px;
                background: #fff;
                border-top: 1px solid #f0f0f0;
                display: flex;
                gap: 10px;
                flex-shrink: 0;
            }

            .sf-foot-btn {
                flex: 1;
                background: #EB6753;
                color: #FFFFFF;
                padding: 13px;
                border-radius: 12px;
                font-weight: 600;
                font-size: 14px;
                cursor: pointer;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
                transition: all 0.2s;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 7px;
                text-decoration: none;
                border: 2px solid #EB6753;
            }

            .sf-foot-btn:hover {
                background: #dc442b;
                border-color: #dc442b;
            }

            .sf-foot-btn.is-primary {
                background: #181A20;
                border-color: #181A20;
                color: #fff;
            }

            .sf-foot-btn.is-primary:hover {
                background: #EB6753;
                border-color: #EB6753;
            }

            /* =============================================
               COMPARE DRAWER, centered modal like detail
            ============================================= */
            .sf-cmp-head {
                padding: 24px 28px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #f0f0f0;
                position: relative;
                z-index: 1;
                flex-shrink: 0;
                background: #fff;
            }

            .sf-cmp-head h3 {
                margin: 0;
                font-size: 22px;
                font-weight: 600;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
                color: var(--sf-text);
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .sf-cmp-head h3 i {
                color: var(--sf-primary);
            }

            .sf-cmp-head-sub {
                font-size: 13px;
                color: var(--sf-muted);
                margin-top: 3px;
                font-weight: 500;
            }

            .sf-cmp-head-close {
                background: #fff;
                border: 2px solid #e8e8e8;
                color: var(--sf-text);
                width: 38px;
                height: 38px;
                border-radius: 50%;
                cursor: pointer;
                font-size: 14px;
                transition: all 0.2s;
                display: flex;
                align-items: center;
                justify-content: center;
                flex-shrink: 0;
            }

            .sf-cmp-head-close:hover {
                background: var(--sf-primary);
                border-color: var(--sf-primary);
                color: #fff;
                transform: rotate(90deg);
            }

            .sf-cmp-body {
                overflow: auto;
                flex: 1;
                padding: 0;
                position: relative;
                z-index: 1;
                scrollbar-width: thin;
                scrollbar-color: rgba(0,0,0,0.15) transparent;
            }

            .sf-cmp-body::-webkit-scrollbar { width: 6px; height: 6px; }
            .sf-cmp-body::-webkit-scrollbar-thumb {
                background: rgba(0,0,0,0.15);
                border-radius: 4px;
            }

            .sf-cmp-table {
                width: 100%;
                border-collapse: separate;
                border-spacing: 0;
                font-size: 13px;
            }

            .sf-cmp-table th,
            .sf-cmp-table td {
                padding: 14px 16px;
                text-align: left;
                border-bottom: 1px solid #f0f0f0;
            }

            .sf-cmp-table thead th {
                background: #fff;
                font-weight: 700;
                color: var(--sf-text);
                position: sticky;
                top: 0;
                z-index: 2;
                font-size: 12px;
                vertical-align: bottom;
            }

            .sf-cmp-table thead th:not(:first-child) {
                text-align: center;
                min-width: 200px;
            }

            .sf-cmp-table tbody td:not(:first-child) {
                text-align: center;
            }

            .sf-cmp-table tbody td:first-child {
                position: sticky;
                left: 0;
                background: #fff;
                z-index: 1;
            }

            .sf-cmp-section-row {
                background: var(--sf-primary-light) !important;
                font-weight: 700;
                color: var(--sf-primary) !important;
                text-transform: uppercase;
                letter-spacing: 0.4px;
                font-size: 10px;
            }

            .sf-cmp-section-row td {
                position: static !important;
            }

            .sf-cmp-key {
                color: var(--sf-text-soft);
                font-weight: 500;
            }

            .sf-cmp-val {
                font-weight: 600;
                color: var(--sf-text);
            }

            .sf-cmp-best {
                position: relative;
                color: var(--sf-success) !important;
                font-weight: 700 !important;
            }

            .sf-cmp-best::after {
                content: '\2605';
                margin-left: 5px;
                font-size: 11px;
            }

            .sf-cmp-na {
                color: var(--sf-muted);
                font-style: italic;
                font-size: 12px;
            }

            .sf-cmp-school-head {
                text-align: center;
                padding: 0 !important;
                vertical-align: top;
            }

            .sf-cmp-school-photo {
                position: relative;
                width: 100%;
                height: 96px;
                overflow: hidden;
                background: #eee;
            }

            .sf-cmp-school-photo img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .sf-cmp-school-photo::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(24,26,32,0) 40%, rgba(24,26,32,0.55) 100%);
            }

            .sf-cmp-school-photo-fallback {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 30px;
                color: rgba(255,255,255,0.9);
            }

            .sf-cmp-school-photo-fallback[data-sector="Government"] {
                background: linear-gradient(135deg, #EB6753 0%, #D85540 100%);
            }
            .sf-cmp-school-photo-fallback[data-sector="Catholic"] {
                background: linear-gradient(135deg, #98A9BA 0%, #7C8D9D 100%);
            }
            .sf-cmp-school-photo-fallback[data-sector="Independent"] {
                background: linear-gradient(135deg, #303137 0%, #1C1D21 100%);
            }

            .sf-cmp-school-meta {
                padding: 12px 14px 14px;
            }

            .sf-cmp-school-name {
                font-size: 13px;
                font-weight: 700;
                color: var(--sf-text);
                margin-bottom: 4px;
                line-height: 1.3;
                cursor: pointer;
                transition: color 0.2s;
                display: inline-flex;
                align-items: center;
                gap: 5px;
            }

            .sf-cmp-school-name:hover {
                color: var(--sf-primary);
                text-decoration: underline;
            }

            .sf-cmp-school-name i {
                font-size: 10px;
                opacity: 0.6;
            }

            .sf-cmp-school-sub {
                font-size: 11px;
                color: var(--sf-muted);
                font-weight: 500;
            }

            /* =============================================
               EXPANDED MODE
            ============================================= */
            .sf-app.is-expanded {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                max-width: 100vw !important;
                max-height: 100vh !important;
                z-index: 9990 !important;
                margin: 0 !important;
                background: #fff !important;
                padding: 20px !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: auto !important;
            }

            .sf-app.is-expanded .sf-workspace {
                flex: 1;
            }

            .sf-app.is-expanded .sf-mapcol {
                position: relative;
                top: 0;
            }

            .sf-app.is-expanded .sf-mapwrap {
                height: calc(100vh - 260px);
                min-height: 520px;
            }

            .sf-app.is-expanded .sf-list {
                max-height: calc(100vh - 260px);
            }

            body.sf-expanded-body {
                overflow: hidden !important;
            }

            /* =============================================
               RESPONSIVE, list stacks above map on mobile
            ============================================= */
            @media (max-width: 991px) {
                .sf-workspace {
                    grid-template-columns: 1fr;
                    gap: 20px;
                }

                .sf-mapcol {
                    position: relative;
                    top: 0;
                    order: 1;
                }

                .sf-list {
                    order: 2;
                    max-height: 560px;
                }

                .sf-mapwrap {
                    height: 460px;
                }

                .sf-drawer {
                    top: 50%;
                    left: 50%;
                    height: 100vh;
                    max-height: 100vh;
                    border-radius: 0;
                }

                .sf-detail,
                .sf-compare-drawer {
                    width: 100%;
                    max-width: 100%;
                }

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

                .sf-naplan-grid {
                    grid-template-columns: 1fr 1fr;
                }

                .sf-demo-grid {
                    grid-template-columns: 1fr;
                }

                .sf-commandbar {
                    flex-direction: column;
                    align-items: stretch;
                }

                .sf-counts {
                    justify-content: center;
                }

                .sf-sortbox {
                    margin-left: 0;
                }
            }

            @media (max-width: 500px) {
                .sf-block {
                    padding: 20px 20px;
                }

                .sf-detail-hero-content {
                    left: 20px;
                    right: 20px;
                }

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

                .sf-score-row {
                    grid-template-columns: 100px 1fr 36px;
                    gap: 8px;
                }

                .sf-detail-name {
                    font-size: 22px;
                }
            }

            /* Photo slot: an injected real photo fades in above the fallback */
            .sf-photo-img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                z-index: 1;
            }

            /* =============================================
               LOADING STATE
            ============================================= */
            .sf-loading {
                position: absolute;
                inset: 0;
                z-index: 4;
                display: none;
                align-items: center;
                justify-content: center;
                background: rgba(247, 247, 247, 0.82);
            }

            .sf-loading.is-visible { display: flex; }

            .sf-loading-box {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                background: #fff;
                border: 2px solid #f0f0f0;
                border-radius: 12px;
                padding: 12px 18px;
                font-size: 14px;
                font-weight: 600;
                color: #181a20;
                box-shadow: 0px 8px 24px rgba(24, 26, 32, 0.14);
            }

            .sf-spinner {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                border: 2px solid rgba(235, 103, 83, 0.25);
                border-top-color: #EB6753;
                animation: sfspin 0.7s linear infinite;
                display: inline-block;
                flex-shrink: 0;
            }

            @keyframes sfspin { to { transform: rotate(360deg); } }

            /* =============================================
               CATCHMENT TOGGLES + POPUP
            ============================================= */
            .sf-legend-toggle .sf-legend-count {
                opacity: 0.75;
                font-weight: 500;
                margin-left: 4px;
            }

            .sf-legend-toggle.is-empty {
                opacity: 0.28;
                cursor: not-allowed;
            }

            .sf-catchpop .maplibregl-popup-content { min-width: 240px; }

            .sf-catch {
                padding: 14px 16px;
                font-family: var(--title-font-family, 'Poppins', sans-serif);
            }

            .sf-catch-row + .sf-catch-row {
                margin-top: 12px;
                padding-top: 12px;
                border-top: 1px solid #f0f0f0;
            }

            .sf-catch-name {
                font-size: 14px;
                font-weight: 600;
                color: var(--sf-text);
                line-height: 1.35;
            }

            .sf-catch-tags {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
                margin-top: 7px;
            }

            .sf-catch-tag {
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.4px;
                text-transform: uppercase;
                padding: 3px 10px;
                border-radius: 6px;
                background: #303137;
                color: #fff;
            }

            .sf-catch-tag[data-t*="PRIMARY"] { background: #F59E0B; }

            .sf-catch-tag.alt {
                background: var(--sf-bg);
                color: var(--sf-text-soft);
                border: 1px solid #e8e8e8;
                text-transform: none;
                letter-spacing: 0;
                font-weight: 600;
            }

            .sf-catch-school {
                font-size: 12px;
                color: var(--sf-muted);
                margin-top: 8px;
                font-weight: 500;
            }

            .sf-catch-school i {
                color: var(--sf-primary);
                margin-right: 5px;
            }