/* ======================================================
   SITE LOCATION HERO
====================================================== */

.hero{
    position:relative;

    min-height:100vh;

    display:flex;
    align-items:flex-end;

    overflow:hidden;

    background:var(--charcoal);
}

/* ==========================================
   Background Media
========================================== */

.hero-media{
    position:absolute;
    inset:0;

    overflow:hidden;

    z-index:0;
}

/* ==========================================
   Background Image
========================================== */

.hero-image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    display:block;

    object-fit:cover;

    /* Match Homepage & Project */
    object-position:65% center;

    transform:scale(1.02);

    z-index:0;

    transition:transform 8s ease;
}

.hero:hover .hero-image{
    transform:scale(1.05);
}

/* ==========================================
   Overlay
========================================== */

.hero-overlay{
    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            90deg,
            rgba(10,15,20,.88) 0%,
            rgba(10,15,20,.72) 35%,
            rgba(10,15,20,.45) 65%,
            rgba(10,15,20,.22) 100%
        ),

        linear-gradient(
            180deg,
            rgba(0,0,0,.10) 0%,
            rgba(0,0,0,.78) 100%
        );
}

/* ==========================================
   Topographic Overlay
========================================== */

.hero::before{

    content:"";

    position:absolute;
    inset:0;

    z-index:2;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at 30% 20%,
            rgba(198,165,90,.08),
            transparent 55%
        ),

        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,.03) 0px,
            rgba(255,255,255,.03) 2px,
            transparent 2px,
            transparent 90px
        );

    opacity:.35;
}

/* ==========================================
   Cinematic Vignette
========================================== */

.hero::after{

    content:"";

    position:absolute;
    inset:0;

    z-index:3;

    pointer-events:none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 35%,
            rgba(0,0,0,.18) 100%
        );
}

/* ==========================================
   Hero Content
========================================== */

.hero-content{

    position:relative;

    z-index:5;

    width:100%;

    padding:80px 0 90px;
}

.hero .eyebrow{
    margin-bottom:26px;
}

.hero h1{

    max-width:780px;

    color:var(--white);

    font-size:clamp(2.4rem,4.8vw,4.3rem);

    line-height:1.12;

    margin-bottom:28px;
}

.hero p{

    max-width:640px;

    color:rgba(255,255,255,.78);

    font-size:1.03rem;

    line-height:1.75;

    font-weight:300;

    margin-bottom:18px;
}

.hero-buttons{

    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;
}

/* ==========================================
   Hero Tag
========================================== */

.hero-tag{

    position:absolute;

    top:120px;
    right:48px;

    z-index:6;

    padding:6px 12px;

    font-size:.62rem;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:rgba(255,255,255,.50);

    border:1px solid rgba(255,255,255,.18);

    background:rgba(10,15,20,.25);

    backdrop-filter:blur(8px);

    border-radius:4px;
}

/* ==========================================
   Responsive
========================================== */

@media(max-width:992px){

    .hero-content{
        padding:150px 0 80px;
    }

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

}

@media(max-width:768px){

    .hero{
        min-height:85vh;
    }

    .hero-content{
        padding:130px 0 70px;
    }

    .hero-tag{
        top:90px;
        right:24px;
    }

    .hero-image{
        object-position:72% center;
    }

}

@media(max-width:576px){

    .hero-content{
        padding:80px 0 60px;
    }

    .hero h1{
        font-size:clamp(2rem,9vw,3rem);
    }

    .hero p{
        font-size:.96rem;
    }

    .hero-tag{
        display:none;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:flex-start;
    }

}

  /* ---------- Feature Update ---------- */
.overview-layout{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
@media(max-width:960px){ .overview-layout{ grid-template-columns:1fr; gap:20px; } }
.overview-copy p{ color:rgba(255,255,255,0.72); font-weight:300; margin-top:18px; max-width:520px; }
.overview-copy h2{ margin-top:20px; font-size:clamp(1.7rem,2.8vw,2.4rem); line-height:1.22; color:var(--white); }
.overview-link{ margin-top:30px; }
.overview-media .image-frame--compact{ aspect-ratio:4/3.4; margin-top:0; overflow:hidden; border-radius:4px; }
.overview-media .image-frame--compact img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
.overview-media .image-frame--compact:hover img{ transform:scale(1.05); }

/* =====================================================
   ARTICLE LINK
===================================================== */

.article-link{

    display:inline-flex;
    align-items:center;
    gap:12px;

    position:relative;

    margin-top:18px;

    font-family:var(--sans);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;

    color:var(--gold);

    transition:color .35s ease;

}

.article-link::after{

    content:"";

    position:absolute;
    left:0;
    bottom:-10px;

    width:110px;
    height:2px;

    background:var(--gold);

    transition:width .35s ease;

}

.article-link svg{

    width:16px;
    height:16px;

    transition:transform .35s ease;

}

.article-link:hover{

    color:var(--gold);

}

.article-link:hover::after{

    width:135px;

}

.article-link:hover svg{

    transform:translateX(7px);

}

/* ==========================================
   REGIONAL ACCESSIBILITY
========================================== */

.regional-accessibility{

    padding:110px 0;

}

.accessibility-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:1px;

    background:var(--line-dark);

    margin-top:45px;

}

.accessibility-card{

    display:flex;
    align-items:flex-start;
    gap:22px;

    padding:34px 30px;

    background:var(--off-white);

    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}

.accessibility-card:hover{

    background:#fff;

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(13,41,67,.08);

}

.accessibility-icon{

    width:56px;
    height:56px;

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

    flex-shrink:0;

    color:var(--gold);

}

.accessibility-icon svg{

    width:34px;
    height:34px;

    stroke:currentColor;

}

.accessibility-content{

    flex:1;

}

.accessibility-content h3{

    font-size:1.05rem;

    font-family:var(--sans);

    font-weight:600;

    color:var(--charcoal);

    margin-bottom:10px;

}

.accessibility-content p{

    font-size:.95rem;

    line-height:1.7;

    color:#5f666d;

    margin:0;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1100px){

    .accessibility-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media (max-width:700px){

    .accessibility-grid{

        grid-template-columns:1fr;

    }

    .accessibility-card{

        padding:28px 24px;

    }

    .accessibility-icon{

        width:50px;
        height:50px;

    }

    .accessibility-icon svg{

        width:30px;
        height:30px;

    }

}

/* ==========================================
   Minin Lease
========================================== */

  .stage{display:flex; flex-direction:column; width:100%; min-width:0;}
 .card{
      position:relative; width:100%; min-width:0; min-height:600px; aspect-ratio:16/10; overflow:hidden; border-radius:20px; border:1px solid rgba(198,165,90,.18);
      background:radial-gradient(circle at 18% 15%, rgba(58,64,41,.55), transparent 45%), radial-gradient(circle at 82% 85%, rgba(43,48,33,.55), transparent 50%), linear-gradient(160deg, #1B1E20 0%, #23271F 55%, #2D3426 100%);
      box-shadow:0 30px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03); display:flex; align-items:stretch; justify-content:stretch;
  }
  svg.terrain{display:block; position:absolute; inset:0; width:100%; height:100%;}

  .pin{
    position:absolute;
    transform:translate(-50%,-100%);
    text-align:center;
    filter:drop-shadow(0 0 10px rgba(230,201,138,0.35));
  }
  .pin .glow{
    position:absolute;left:50%;bottom:-6px;transform:translate(-50%,0);
    width:34px;height:34px;border-radius:50%;
    background:radial-gradient(circle, rgba(230,201,138,0.35) 0%, rgba(230,201,138,0) 70%);
    animation:pulse 3.4s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:0.5;transform:translate(-50%,0) scale(0.9);}
    50%{opacity:1;transform:translate(-50%,0) scale(1.15);}
  }
  .pin svg{position:relative;z-index:2;}
  .pin-label{
    margin-top:4px;font-size:12.5px;font-weight:500;color:var(--ink);
    letter-spacing:0.01em;white-space:nowrap;
    text-shadow:0 2px 6px rgba(0,0,0,0.8);
  }
  .pin-sub{
    font-size:10px;color:var(--gold-soft);letter-spacing:0.06em;text-transform:uppercase;
    text-shadow:0 2px 6px rgba(0,0,0,0.8);
  }

  .glass{
    background:rgba(20,22,17,0.55);
    backdrop-filter:blur(14px) saturate(120%);
    -webkit-backdrop-filter:blur(14px) saturate(120%);
    border:1px solid var(--hairline);
    border-radius:14px;
  }

  .info-panel{
    position:absolute;top:20px;right:20px;
    padding:16px 20px;min-width:220px;
  }
  .info-panel .title{
    font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:12px;
  }
  .info-row{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:6px 0;border-top:1px solid var(--hairline);
  }
  .info-row:first-of-type{border-top:none;}
  .info-row .label{font-size:12px;color:var(--ink-dim);}
  .info-row .value{font-size:14px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;}
  .info-row .value.gold{color:var(--gold-soft);}
  .info-total{
    margin-top:10px;padding-top:12px;border-top:1px solid rgba(205,164,94,0.25);
    display:flex;justify-content:space-between;align-items:baseline;
  }
  .info-total .label{font-size:11px;letter-spacing:0.04em;color:var(--ink-faint);text-transform:uppercase;}
  .info-total .value{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--gold-soft);font-weight:600;}

  .legend{
    position:absolute;bottom:20px;left:20px;
    padding:14px 18px;
  }
  .legend .title{
    font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--ink-faint);margin-bottom:10px;
  }
  .legend-item{
    display:flex;align-items:center;gap:9px;padding:4px 0;font-size:12px;color:var(--ink-dim);
  }
  .chip{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
  .chip.lease{background:rgba(205,164,94,0.25);border:1.4px solid var(--gold);}
  .chip.permit{background:rgba(111,208,207,0.2);border:1.4px solid var(--cyan);}
  .chip.historic{background:var(--sandstone);border-radius:50%;width:8px;height:8px;margin:0 1.5px;}
  .chip.future{background:transparent;border:1.4px dashed var(--future);}

  .scale{
    position:absolute;bottom:20px;right:20px;
    font-size:10.5px;color:var(--ink-faint);text-align:right;letter-spacing:0.04em;
  }
  .scale-bar{width:90px;height:2px;background:var(--ink-faint);margin:6px 0 4px auto;position:relative;}
  .scale-bar::before,.scale-bar::after{content:'';position:absolute;top:-3px;width:1px;height:8px;background:var(--ink-faint);}
  .scale-bar::before{left:0;}
  .scale-bar::after{right:0;}

  .north{
    position:absolute;top:20px;left:20px;
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  }

/* ==========================================
   INTERACTIVE ENHANCEMENTS
   (Append only - do not replace existing CSS)
========================================== */

/* Smooth terrain interaction */

.terrain polygon,
.terrain circle{
    transition:
        transform .35s ease,
        opacity .35s ease,
        filter .35s ease,
        stroke-width .35s ease;
}

/* Polygon hover */

.terrain polygon:hover{

    cursor:pointer;

    filter:brightness(1.12);

    transform-origin:center;

}

/* ==========================================
   PIN INTERACTION
========================================== */

.pin{

    cursor:pointer;

    transition:
        transform .35s ease,
        filter .35s ease;

    z-index:10;

}

.pin:hover{

    transform:
        translate(-50%,-108%)
        scale(1.05);

    z-index:20;

}

.pin.active{

    transform:
        translate(-50%,-112%)
        scale(1.08);

    z-index:30;

    filter:
        drop-shadow(0 0 18px rgba(198,165,90,.65));

}

.pin.active .glow{

    opacity:1;

    transform:
        translate(-50%,0)
        scale(1.45);

}

/* ==========================================
   LABELS
========================================== */

.pin-label,
.pin-sub{

    transition:
        color .3s ease,
        transform .3s ease;

}

.pin:hover .pin-label,
.pin.active .pin-label{

    color:var(--gold);

}

.pin:hover .pin-sub,
.pin.active .pin-sub{

    color:#ffffff;

}

/* ==========================================
   INFO PANEL
========================================== */

.info-panel{

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}

.info-panel.active{

    border-color:rgba(198,165,90,.4);

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

}

/* ==========================================
   LEGEND
========================================== */

.legend{

    transition:
        transform .35s ease;

}

.legend:hover{

    transform:translateY(-3px);

}

/* ==========================================
   NORTH INDICATOR
========================================== */

.north{

    transition:transform .35s ease;

}

.card:hover .north{

    transform:rotate(-4deg);

}

/* ==========================================
   SCALE
========================================== */

.scale{

    transition:opacity .3s ease;

}

.card:hover .scale{

    opacity:1;

}

/* ==========================================
   ACCESSIBILITY
========================================== */

.pin:focus-visible{

    outline:2px solid var(--gold);

    outline-offset:5px;

}
  
/* ==========================================
DISTRICT LANDHOLDING
========================================== */

.district-layout{
    display:block;
}

.district-content{
    max-width:620px;
    margin-bottom:60px;
}

.district-content h2{
    margin:18px 0 22px;
    font-size:clamp(2rem,3vw,2.6rem);
    line-height:1.18;
    color:var(--white);
}

.district-content p{
    max-width:620px;
    color:rgba(255,255,255,.72);
    line-height:1.85;
    margin-bottom:0;
}

.district-map{
    width:100%;
    margin-top:60px;
}

.district-map .card{
    width:100%;
    min-height:600px;
}

/* ==========================================
RESPONSIVE
========================================== */

/* ---------- Large Desktop ---------- */

.district-content{
    max-width:620px;
    margin-bottom:60px;
}

.district-map{
    width:100%;
}

.district-map .card{
    width:100%;
    min-height:720px;
}


/* ---------- Tablet ---------- */

@media (max-width:1024px){

    .district-landholding{
        padding:90px 0;
    }

    .district-content{
        max-width:100%;
        margin-bottom:50px;
    }

    .district-content h2{
        font-size:2.2rem;
    }

    .district-map .card{
        min-height:600px;
    }

}


/* ---------- Mobile ---------- */

@media (max-width:768px){

    .district-landholding{
        padding:70px 0;
    }

    .district-content{
        margin-bottom:40px;
    }

    .district-content h2{
        font-size:1.9rem;
        line-height:1.25;
    }

    .district-content p{
        font-size:.95rem;
        line-height:1.8;
    }

    .district-map{
        margin-top:0;
    }

    .district-map .card{
        min-height:420px;
        border-radius:16px;
    }

}


/* ---------- Small Mobile ---------- */

@media (max-width:480px){

    .district-landholding{
        padding:30px 0;
    }

    .district-content h2{
        font-size:1.7rem;
    }

    .district-content p{
        font-size:.92rem;
    }

    .district-map .card{
        min-height:100%;
        border-radius:12px;
    }

}

/* ==========================================
STRATEGIC LOCATION ADVANTAGES
========================================== */

.strategic-advantages{

    padding:110px 0;

}

.advantages-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:1px;

    background:var(--line-dark);

    margin-top:45px;

}

.advantage-card{

    display:flex;

    align-items:flex-start;

    gap:22px;

    padding:34px 28px;

    background:var(--off-white);

    transition:
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}

.advantage-card:hover{

    background:#fff;

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(13,41,67,.08);

}

.advantage-icon{

    width:56px;

    height:56px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:var(--gold);

}

.advantage-icon svg{

    width:34px;

    height:34px;

}

.advantage-content{

    flex:1;

}

.advantage-content h3{

    font-family:var(--sans);

    font-size:1rem;

    font-weight:600;

    color:var(--charcoal);

    margin-bottom:12px;

    line-height:1.4;

}

.advantage-content p{

    font-size:.93rem;

    line-height:1.75;

    color:#5d646c;

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1100px){

.advantages-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

.advantages-grid{

    grid-template-columns:1fr;

}

.advantage-card{

    padding:28px 24px;

}

.advantage-icon{

    width:48px;

    height:48px;

}

.advantage-icon svg{

    width:30px;

    height:30px;

}

}

/* ==========================================
   INTERACTIVE LOCATION MAP
========================================== */

.location-map{
    position:relative;
}

.location-layout{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(320px,.8fr);
    gap:72px;
    align-items:start;
}

/* ==========================================
   DISTRICT MAP
========================================== */

.district-map{
    position:relative;
}

.map-frame{
    position:relative;
    overflow:hidden;

    background:#232722;

    border:1px solid rgba(255,255,255,.08);
    border-radius:8px;

    box-shadow:0 25px 70px rgba(0,0,0,.35);

    aspect-ratio:16 / 10;
}

.project-map{
    display:block;
    width:100%;
    height:100%;
}

/* ==========================================
   MAP CONTROLS
========================================== */

.map-controls{
    position:absolute;

    top:24px;
    left:24px;

    display:flex;
    flex-direction:column;

    gap:8px;

    z-index:20;
}

.map-controls button{

    width:42px;
    height:42px;

    border:none;
    border-radius:4px;

    cursor:pointer;

    background:#fff;
    color:#1c1e21;

    font-size:1.2rem;
    font-weight:700;

    transition:.25s;
}

.map-controls button:hover{

    background:var(--gold);
    transform:translateY(-2px);

}

/* ==========================================
   MAP LEGEND
========================================== */

.map-legend{

    position:absolute;

    left:24px;
    bottom:24px;

    width:230px;

    padding:22px;

    display:flex;
    flex-direction:column;
    gap:15px;

    background:rgba(12,15,18,.86);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);

    border-radius:6px;

    z-index:20;

}

.map-legend .legend-item{

    display:flex;
    align-items:center;

    gap:12px;

    color:rgba(255,255,255,.82);

    font-size:.8rem;

    line-height:1.4;

}

/* ==========================================
   LEGEND SYMBOLS
========================================== */

.legend-box{

    width:16px;
    height:16px;

    flex-shrink:0;

    border-radius:2px;

}

.legend-box.boundary{

    border:2px solid var(--gold);

    background:transparent;

}

.legend-box.lease{

    background:rgba(198,165,90,.55);

    border:1px solid var(--gold);

}

.legend-box.permit{

    background:rgba(70,150,170,.55);

    border:1px solid #63bdd8;

}

.legend-dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:var(--gold);

    box-shadow:0 0 0 5px rgba(198,165,90,.15);

}

/* ==========================================
   SVG
========================================== */

.project-map polygon{

    transition:.35s ease;

}

.project-map polygon:hover{

    filter:brightness(1.15);

}

.project-map circle{

    transform-origin:center;

    animation:pulseMarker 2.8s infinite;

}

@keyframes pulseMarker{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.25);
    }

    100%{
        transform:scale(1);
    }

}

/* ==========================================
   PROJECT INFORMATION
========================================== */

.location-details{

    display:flex;
    flex-direction:column;

}

.location-details .eyebrow{

    margin-bottom:30px;

}

/* ==========================================
   INFORMATION ROWS
========================================== */

.location-row{

    display:grid;
    grid-template-columns:52px 1fr auto;

    align-items:center;

    gap:20px;

    padding:24px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:
        padding-left .3s ease,
        border-color .3s ease;

}

.location-row:first-of-type{

    padding-top:0;

}

.location-row:last-child{

    border-bottom:none;

}

.location-row:hover{

    padding-left:12px;

    border-color:rgba(198,165,90,.30);

}

/* ==========================================
   ICON
========================================== */

.location-icon{

    width:52px;
    height:52px;

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

    flex-shrink:0;

    border:1px solid rgba(198,165,90,.25);
    border-radius:6px;

    background:rgba(198,165,90,.05);

    color:var(--gold);

    transition:.35s ease;

}

.location-row:hover .location-icon{

    background:rgba(198,165,90,.10);

    border-color:rgba(198,165,90,.55);

    transform:translateY(-2px);

}

.location-icon svg{

    width:24px;
    height:24px;

    display:block;

    stroke:currentColor;

    fill:none;

}

/* ==========================================
   LABELS
========================================== */

.location-label{

    font-size:1rem;

    font-weight:500;

    color:rgba(255,255,255,.82);

}

.location-value{

    font-size:1rem;

    font-weight:600;

    color:var(--white);

    text-align:right;

    white-space:nowrap;

}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1100px){

    .location-layout{

        grid-template-columns:1fr;

        gap:60px;

    }

}

@media (max-width:900px){

    .map-frame{

        aspect-ratio:1/1;

    }

    .map-legend{

        width:190px;

        left:18px;
        bottom:18px;

        padding:16px;

    }

}

@media (max-width:768px){

    .location-row{

        grid-template-columns:48px 1fr;

        gap:18px;

    }

    .location-value{

        grid-column:2;

        text-align:left;

        margin-top:6px;

    }

}

@media (max-width:640px){

    .map-controls{

        top:16px;
        left:16px;

    }

    .map-controls button{

        width:36px;
        height:36px;

    }

    .map-legend{

        position:relative;

        left:auto;
        bottom:auto;

        width:100%;

        margin-top:18px;

    }

}

 /* ---------- SECTION 6 — LEGACY TIMELINE ---------- */
  .legacy-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .legacy-nav{ display:flex; gap:10px; margin-bottom:8px; }
  .legacy-nav button{
    width:40px; height:40px; border-radius:50%; border:1px solid rgba(13,15,17,0.18);
    background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center;
    color:var(--navy); transition:all .3s ease;
  }
  .legacy-nav button:hover{ border-color:var(--gold); background:rgba(198,165,90,0.08); color:var(--gold); }
  .legacy-nav button svg{ width:16px; height:16px; }
  .legacy-track{
    display:flex; gap:0; overflow-x:auto; margin-top:60px; padding-bottom:24px;
    scrollbar-width:thin; scroll-behavior:smooth;
  }
  .legacy-track::-webkit-scrollbar{ height:5px; }
  .legacy-track::-webkit-scrollbar-thumb{ background:var(--steel); }
  .legacy-item{
    min-width:230px; flex:1 0 230px; padding:0 30px 0 0; position:relative;
    cursor:default; transition:transform .3s ease;
  }
  .legacy-item::before{
    content:''; position:absolute; top:9px; left:0; right:30px; height:1px; background:var(--line-dark);
  }
  .legacy-item:last-child::before{ display:none; }
  .legacy-dot{
    width:9px; height:9px; border-radius:50%; background:var(--gold); margin-bottom:22px; position:relative; z-index:1;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .legacy-item:hover{ transform:translateY(-4px); }
  .legacy-item:hover .legacy-dot{
    transform:scale(1.6);
    box-shadow:0 0 0 5px rgba(198,165,90,0.18);
  }
  .legacy-item .yr{ font-family:var(--serif); font-size:0.85rem; color:var(--navy); opacity:0.6; margin-bottom:6px; }
  .legacy-item h4{ font-family:var(--serif); font-weight:500; font-size:1.05rem; margin-bottom:8px; color:var(--charcoal); }
  .legacy-item p{ font-size:0.83rem; color:#63676c; font-weight:300; }
  
      /* ---------- SECTION 8 — FINAL CTA ---------- */
  .cta-section{
    background:
      radial-gradient(ellipse at 20% 20%, rgba(198,165,90,0.08), transparent 55%),
      linear-gradient(160deg, #0f1113 0%, #17191c 55%, #0d0f11 100%);
    text-align:center;
  }
  .cta-section .eyebrow{ justify-content:center; }
  .cta-section h2{ font-size:clamp(1.9rem,3.4vw,3rem); max-width:820px; margin:24px auto; color:var(--white); }
  .cta-section p{ max-width:620px; margin:0 auto 44px; color:rgba(255,255,255,0.68); font-weight:300; }
  .cta-buttons{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }


.district-map .grid{
  display:grid; grid-template-columns:2.45fr 1fr; gap:22px; align-items:start;
}
.district-map .map-column{ display:flex; flex-direction:column; gap:16px; }
 
/* -------- Map panel -------- */
.district-map .map-panel{
  position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--line); background:#111417;
  min-height:560px; isolation:isolate;
  box-shadow:0 24px 60px rgba(0,0,0,0.5);
}
.district-map .map-panel svg{ display:block; width:100%; height:100%; }
 
.district-map .map-controls{
  position:absolute; top:16px; left:16px; display:flex; flex-direction:column; gap:8px; z-index:6;
}
.district-map .map-controls button{
  width:36px; height:36px; border-radius:10px; border:none;
  background:var(--off-white); color:var(--charcoal); font-size:18px; font-weight:600;
  cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,0.35);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), background .15s;
}
.district-map .map-controls button:hover{ background:var(--white); transform:translateY(-1px); }
.district-map .map-controls button:active{ transform:translateY(0) scale(.94); }
 
.district-map .map-badge{
  position:absolute; top:16px; right:16px; z-index:6;
  font-family:var(--sans); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--gold-light); background:var(--glass-bg); backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-border);
  padding:7px 12px; border-radius:9px; font-weight:600;
}
 
.district-map .tooltip{
  position:absolute; z-index:20; pointer-events:none;
  background:var(--glass-bg-strong); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--gold-dim); border-left:3px solid var(--gold-light);
  border-radius:10px; padding:10px 14px; min-width:160px;
  box-shadow:0 16px 36px rgba(0,0,0,0.55);
  opacity:0; transform:translate(-50%,-112%) scale(0.95);
  transition:opacity .16s var(--ease), transform .16s var(--ease);
}
.district-map .tooltip.show{ opacity:1; transform:translate(-50%,-124%) scale(1); }
.district-map .tooltip.blue{ border-color:var(--mineral-dim); border-left-color:var(--mineral-light); }
.district-map .tooltip .tt-kicker{
  font-family:var(--sans); font-size:0.62rem; letter-spacing:0.13em; text-transform:uppercase;
  color:var(--gold-light); margin-bottom:3px; font-weight:600;
}
.district-map .tooltip.blue .tt-kicker{ color:var(--mineral-light); }
.district-map .tooltip .tt-title{ font-family:var(--serif); font-weight:500; font-size:0.95rem; color:var(--off-white); }
.district-map .tooltip .tt-sub{ font-family:var(--sans); font-size:0.76rem; color:var(--steel); margin-top:2px; }
 
.district-map .map-footer{
  position:absolute; left:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:space-between;
  padding:14px 18px; pointer-events:none; z-index:4;
}
.district-map .scale-bar{
  font-family:var(--sans); color:var(--off-white); font-size:0.68rem; pointer-events:auto;
  background:var(--glass-bg); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  border:1px solid var(--glass-border); border-radius:8px; padding:8px 12px 7px 12px;
}
.district-map .scale-bar svg{ display:block; margin-top:5px; }