/* ======================================================
   PROJECT HERO
====================================================== */

.proj-hero{
    position:relative;
    min-height:100vh;

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

    overflow:hidden;

    background:var(--charcoal);
}

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

.proj-hero-media{
    position:absolute;
    inset:0;
    overflow:hidden;
}

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

    width:100%;
    height:100%;

    object-fit:cover;

    /* Same positioning as Media Hero */
    object-position:65% center;

    transform:scale(1.02);

    z-index:0;
}

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

.proj-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
========================================== */

.proj-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
========================================== */

.proj-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
========================================== */

.proj-hero-content{

    position:relative;

    z-index:5;

    width:100%;

    padding:80px 0 80px;
}

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

.proj-hero h1{

    max-width:780px;

    color:var(--white);

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

    line-height:1.12;

    margin-bottom:28px;
}

.proj-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;
}

.proj-hero-buttons{

    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;
}

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

.proj-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);
}

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

@media(max-width:992px){

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

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

}

@media(max-width:768px){

    .proj-hero{
        min-height:85vh;
    }

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

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

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

}

@media(max-width:576px){

    .proj-hero-content{
        padding:0px 0 0px;
    }

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

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

    .proj-hero-tag{
        display:none;
    }

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

}

/* ======================================================
   PHOTO SLIDER
====================================================== */

.photo-slider{
    position:relative;
    width:100%;
    overflow:hidden;
    border:1px solid var(--line-dark);
    border-radius:5px;
}

/* Slider Viewport */

.slider-viewport{
    position:relative;
    width:100%;
    overflow:hidden;
    aspect-ratio:16 / 8;
}

@media (max-width:700px){

    .slider-viewport{
        aspect-ratio:4 / 4.4;
    }

}

/* Slider Track */

.slider-track{
    display:flex;
    width:100%;
    height:100%;
    transition:transform .55s cubic-bezier(.25,.8,.25,1);
    will-change:transform;
}

/* Individual Slide */

.slide{
    position:relative;
    flex:0 0 100%;
    min-width:100%;
    height:100%;
    overflow:hidden;
}

/* Slide Image */

.slide-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

/* Overlay */

.slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        180deg,
        rgba(13,15,17,.08) 0%,
        rgba(13,15,17,.60) 100%
    );
    pointer-events:none;
}

/* Slide Tag */

.slide-tag{
    position:absolute;
    top:18px;
    right:18px;
    z-index:5;

    padding:4px 10px;

    font-size:.6rem;
    letter-spacing:.1em;
    text-transform:uppercase;

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

    background:rgba(13,15,17,.35);
    border:1px solid rgba(255,255,255,.25);
    backdrop-filter:blur(4px);
}

/* Slide Caption */

.slide-caption{
    position:absolute;
    left:24px;
    right:24px;
    bottom:22px;
    z-index:5;

    font-family:var(--serif);
    font-size:1.1rem;
    color:#fff;
}

/* ======================================================
   NAVIGATION ARROWS
====================================================== */

.slider-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;

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

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.55);

    background:rgba(15,17,19,.45);
    backdrop-filter:blur(6px);

    color:#fff;
    cursor:pointer;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}

.slider-arrow.prev{
    left:18px;
}

.slider-arrow.next{
    right:18px;
}

.slider-arrow:hover{
    background:rgba(198,165,90,.25);
    border-color:var(--gold);
}

.slider-arrow svg{
    width:16px;
    height:16px;
}

/* ======================================================
   SLIDER DOTS
====================================================== */

.slider-dots{
    position:absolute;
    right:24px;
    bottom:20px;

    display:flex;
    gap:8px;

    z-index:10;
}

.slider-dots button{
    width:8px;
    height:8px;

    padding:0;

    border:1px solid rgba(255,255,255,.60);
    border-radius:50%;

    background:transparent;
    cursor:pointer;

    transition:all .3s ease;
}

.slider-dots button:hover{
    border-color:var(--gold);
}

.slider-dots button[aria-current="true"]{
    width:22px;
    border-radius:20px;

    background:var(--gold);
    border-color:var(--gold);
}

    /* ---------- metric cards (snapshot) ---------- */
  .metric-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media(max-width:900px){ .metric-grid{ grid-template-columns:repeat(2,1fr); } }
  @media(max-width:560px){ .metric-grid{ grid-template-columns:1fr; } }
  .metric-card{
    border:1px solid var(--line-dark); background:#fff; padding:28px 26px; border-radius:5px;
    box-shadow:0 1px 2px rgba(13,15,17,0.04); transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  }
  .metric-card:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(13,15,17,0.08); border-color:rgba(198,165,90,0.4); }
  .metric-card .num{ font-family:var(--serif); color:var(--navy); font-size:clamp(1.5rem,2.2vw,2.1rem); }
  .metric-card .label{ color:#5a5f65; font-size:0.82rem; margin-top:8px; }
  
  /* ---------- layered flow (vertical) ---------- */
  .layer-flow{ max-width:700px; margin:0 auto; position:relative; }
  .layer-flow::before{
    content:''; position:absolute; left:29px; top:10px; bottom:10px; width:1px; background:var(--line-dark);
  }
  .section-navy .layer-flow::before, .section-charcoal .layer-flow::before{ background:rgba(255,255,255,0.16); }
  .layer-item{ position:relative; display:grid; grid-template-columns:60px 1fr; gap:24px; padding-bottom:44px; }
  .layer-item:last-child{ padding-bottom:0; }
  .layer-num{
    width:60px; height:60px; border-radius:50%; border:1px solid var(--line-dark); background:#fff;
    display:flex; align-items:center; justify-content:center; font-family:var(--serif); color:var(--gold); font-size:1rem;
    position:relative; z-index:1;
  }
  .section-navy .layer-num, .section-charcoal .layer-num{ background:var(--charcoal-light); border-color:rgba(255,255,255,0.2); }
  .layer-body h3{ font-size:1.1rem; color:var(--navy); margin-top:10px; }
  .section-navy .layer-body h3, .section-charcoal .layer-body h3{ color:var(--white); }
  .layer-body p{ font-size:0.86rem; color:#5a5f65; font-weight:300; margin-top:6px; }
  .section-navy .layer-body p, .section-charcoal .layer-body p{ color:rgba(255,255,255,0.65); }

/* ---------- hotspot image (shared: infrastructure + resource diagram) ---------- */

.hotspot-image{

    position:relative;

    aspect-ratio:16/9;

    border:1px solid var(--line-dark);

    border-radius:5px;

    overflow:hidden;

    background:
        linear-gradient(180deg, rgba(13,15,17,.18), rgba(13,15,17,.60)),
        repeating-linear-gradient(115deg, #23262b 0px, #23262b 2px, #1b1d20 2px, #1b1d20 90px),
        linear-gradient(160deg,#2a2d31 0%, #17191c 60%, #0f1113 100%);
}


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

.hotspot-background{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:50% 50%;

    z-index:0;

    user-select:none;

    pointer-events:none;

}


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

.hotspot-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(13,15,17,.20),
            rgba(13,15,17,.45)
        );

    z-index:1;

    pointer-events:none;

}


/* ===== Media Tag ===== */

.hotspot-image .media-tag{

    position:absolute;

    top:16px;

    right:16px;

    font-size:.6rem;

    letter-spacing:.1em;

    text-transform:uppercase;

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

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

    padding:5px 10px;

    z-index:5;

}


/* ===== Hotspots ===== */

.hotspot{

    position:absolute;

    width:26px;

    height:26px;

    border-radius:50%;

    background:rgba(255,255,255,.25) !important;

    border:2px solid #ffffff !important;

    cursor:pointer;

    transform:translate(-50%,-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:all .25s ease;

    z-index:10;

    box-shadow:
        0 0 0 5px rgba(255,255,255,.18),
        0 8px 18px rgba(0,0,0,.35);

}


/* ===== Centre Dot ===== */

.hotspot::after{

    content:'';

    width:8px;

    height:8px;

    border-radius:50%;

    background:#ffffff !important;

}


/* ===== Hover ===== */

.hotspot:hover{

    background:#ffffff !important;

    border-color:#ffffff !important;

    transform:translate(-50%,-50%) scale(1.15);

    box-shadow:
        0 0 0 8px rgba(255,255,255,.30),
        0 10px 24px rgba(0,0,0,.45);

}

.hotspot:hover::after{

    background:var(--gold) !important;

}


/* ===== Active ===== */

.hotspot.active,
.hotspot[aria-pressed="true"]{

    background:#ffffff !important;

    border-color:#ffffff !important;

    transform:translate(-50%,-50%) scale(1.15);

    box-shadow:
        0 0 0 8px rgba(255,255,255,.30),
        0 10px 24px rgba(0,0,0,.45);

}

.hotspot.active::after,
.hotspot[aria-pressed="true"]::after{

    background:var(--gold) !important;

}


/* ===== Information Panel ===== */

.hotspot-panel{

    background:#fff;

    border:1px solid var(--line-dark);

    border-radius:5px;

    padding:22px 24px;

    margin-top:18px;

}

.section-navy .hotspot-panel,
.section-charcoal .hotspot-panel{

    background:rgba(255,255,255,.05);

    border-color:rgba(255,255,255,.14);

}

.hotspot-panel h4{

    font-size:1.02rem;

    color:var(--navy);

    margin-bottom:8px;

    font-family:var(--serif);

}

.section-navy .hotspot-panel h4,
.section-charcoal .hotspot-panel h4{

    color:var(--gold);

}

.hotspot-panel p{

    font-size:.86rem;

    color:#4b4f54;

    font-weight:300;

}

.section-navy .hotspot-panel p,
.section-charcoal .hotspot-panel p{

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

}

  /* ---------- location stats ---------- */
  .loc-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:5px; overflow:hidden; margin-top:32px; }
  @media(max-width:800px){ .loc-stats-row{ grid-template-columns:1fr 1fr; } }
  .loc-stats-row .ls{ background:#fff; padding:24px 22px; }
  .loc-stats-row .num{ font-family:var(--serif); font-size:1.5rem; color:var(--navy); }
  .loc-stats-row .label{ font-size:0.78rem; color:#6a6f75; margin-top:6px; }

  .map-frame-wrap{ position:relative; width:100%; aspect-ratio:16/8; overflow:hidden; border:1px solid var(--line-dark); border-radius:5px; background:#e8e4da; margin-top:32px; }
  @media(max-width:700px){ .map-frame-wrap{ aspect-ratio:4/5; } }
  .map-frame-wrap iframe{ width:100%; height:100%; border:0; display:block; }
  .map-fallback{ margin-top:14px; font-size:0.84rem; color:var(--steel); }
  .map-fallback a{ color:var(--navy); font-weight:600; border-bottom:1px solid rgba(13,41,67,0.3); }
  .map-fallback a:hover{ color:var(--gold); border-color:var(--gold); }

  .regional-access{ display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap; margin-top:36px; }
  .regional-node{ background:var(--off-white); border:1px solid var(--line-dark); border-radius:5px; padding:18px 24px; text-align:center; min-width:140px; }
  .regional-node .city{ font-family:var(--serif); font-size:1.05rem; color:var(--navy); }
  .regional-node .sub{ font-size:0.74rem; color:var(--steel); margin-top:4px; }
  .regional-link{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:0 20px; color:var(--gold); }
  .regional-link .time{ font-size:0.8rem; font-weight:600; }
  .regional-link svg{ width:26px; height:10px; }
  @media(max-width:700px){ .regional-access{ flex-direction:column; } .regional-link svg{ transform:rotate(90deg); } }

  /* ---------- inventory composition selector ---------- */
  .inventory-panels{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:5px; overflow:hidden; margin-bottom:36px; }
  @media(max-width:700px){ .inventory-panels{ grid-template-columns:1fr; } }
  .inventory-panel{ background:var(--navy); color:#fff; padding:36px 34px; }
  .inventory-panel.alt{ background:var(--navy-light); }
  .inventory-panel .big{ font-family:var(--serif); font-size:clamp(1.8rem,3vw,2.4rem); color:var(--gold); }
  .inventory-panel h3{ font-size:1.05rem; margin:10px 0 8px; color:#fff; }
  .inventory-panel p{ font-size:0.86rem; color:rgba(255,255,255,0.68); font-weight:300; }

  .composition-selector{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
  .comp-chip{
    flex:1 1 160px; text-align:left; padding:16px 18px; border:1px solid var(--line-dark); background:#fff;
    cursor:pointer; border-radius:5px; transition:all .25s ease;
  }
  .comp-chip[aria-pressed="true"]{ border-color:var(--gold); background:rgba(198,165,90,0.08); }
  .comp-chip .tag{ font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:6px; }
  .comp-chip .name{ font-size:0.92rem; color:var(--navy); font-weight:600; }
  .comp-detail{ margin-top:18px; background:#fff; border:1px solid var(--line-dark); border-radius:5px; padding:22px 24px; }
  .comp-detail h4{ color:var(--navy); font-size:1rem; margin-bottom:8px; font-family:var(--serif); }
  .comp-detail p{ font-size:0.86rem; color:#4b4f54; font-weight:300; }

  /* ---------- staged restart mini timeline ---------- */
  .mini-stage-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(255,255,255,0.12); border-radius:5px; overflow:hidden; margin-top:8px; }
  @media(max-width:800px){ .mini-stage-row{ grid-template-columns:1fr 1fr; } }
  @media(max-width:480px){ .mini-stage-row{ grid-template-columns:1fr; } }
  .mini-stage{ background:var(--navy); padding:30px 26px; position:relative; }
  .mini-stage::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s ease; }
  .mini-stage:hover::before{ transform:scaleX(1); }
  .mini-stage .n{ font-family:var(--serif); color:var(--gold); font-size:0.85rem; }
  .mini-stage h3{ font-size:1.05rem; color:#fff; margin:12px 0 8px; }
  .mini-stage p{ font-size:0.84rem; color:rgba(255,255,255,0.65); font-weight:300; }

  /* ---------- district map (schematic) ---------- */
  .map-layer-toggles{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; margin-bottom:20px; }
  .chip{
    font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; font-weight:600; padding:8px 14px;
    border:1px solid rgba(13,15,17,0.18); background:transparent; color:inherit; cursor:pointer; border-radius:3px; transition:all .25s ease;
  }
  .chip[aria-pressed="true"]{ background:var(--gold); border-color:var(--gold); color:var(--charcoal); }
  .chip:hover{ border-color:var(--gold); }
  .district-map-shell{ position:relative; border:1px solid var(--line-dark); border-radius:5px; background:linear-gradient(160deg,#e9e5da,#d7d1c0); aspect-ratio:16/9; overflow:hidden; }
  @media(max-width:700px){ .district-map-shell{ aspect-ratio:4/5; } }
  .district-map-shell svg{ width:100%; height:100%; }
  .map-note{ margin-top:12px; font-size:0.76rem; color:var(--steel); }
  .map-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:14px; font-size:0.76rem; color:#4b4f54; }
  .map-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .map-legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; }
  .explore-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); border-radius:5px; overflow:hidden; margin-top:24px; max-width:520px; }
  .explore-stats .es{ background:#fff; padding:24px 26px; }
  .explore-stats .num{ font-family:var(--serif); font-size:1.6rem; color:var(--navy); }
  .explore-stats .label{ font-size:0.78rem; color:#6a6f75; margin-top:6px; }
  .qualifier-note{ margin-top:22px; font-size:0.82rem; color:var(--steel); border-left:3px solid var(--gold); padding:12px 18px; background:rgba(198,165,90,0.06); max-width:640px; }

/* ======================================================
   PROJECT VIDEO
====================================================== */

.video-frame{
    position:relative;

    width:100%;
    max-width:100%;

    height:500px;
    margin:0 auto;

    aspect-ratio:16 / 8;

    overflow:hidden;

    border-radius:16px;
    border:1px solid rgba(255,255,255,.10);

    background:#111;

    transition:box-shadow .4s ease;
}

.video-frame:hover{
    box-shadow:0 24px 50px rgba(0,0,0,.35);
}


/* ======================================================
   VIDEO
====================================================== */

.site-video{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


/* ======================================================
   VIDEO TAG
====================================================== */

.video-tag{
    position:absolute;

    top:22px;
    right:22px;

    z-index:6;

    font-size:.62rem;
    letter-spacing:.10em;
    text-transform:uppercase;

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

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

    background:rgba(10,15,20,.30);
    backdrop-filter:blur(4px);

    padding:6px 12px;

    border-radius:4px;
}


/* ======================================================
   VIDEO FEATURES
====================================================== */

.video-features{
    display:flex;
    flex-wrap:wrap;

    gap:18px;

    margin-top:16px;

    font-size:.78rem;

    color:var(--steel);
}

.video-features span{
    display:inline-flex;
    align-items:center;

    gap:6px;
}


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

@media (max-width:1024px){

    .video-frame{
        height:420px;
    }

}

@media (max-width:768px){

    .video-frame{
        width:100%;
        height:auto;

        aspect-ratio:16 / 9;

        border-radius:12px;
    }

    .video-tag{
        top:16px;
        right:16px;

        font-size:.55rem;
        letter-spacing:.08em;

        padding:5px 10px;
    }

    .video-features{
        gap:12px;
        margin-top:14px;

        font-size:.75rem;
    }

}

@media (max-width:576px){

    .video-frame{
        width:100%;
        aspect-ratio:16 / 9;

        border-radius:10px;
    }

    .site-video{
        width:100%;
        height:100%;

        object-fit:cover;
    }

    .video-tag{
        top:12px;
        right:12px;

        font-size:.50rem;
        letter-spacing:.06em;

        padding:4px 8px;
    }

    .video-features{
        display:grid;
        grid-template-columns:1fr;

        gap:10px;

        margin-top:14px;

        font-size:.72rem;
    }

    .video-features span{
        gap:8px;
    }

}
  /* ---------- final CTA ---------- */
  .cta-section{ background:linear-gradient(160deg, #0f1113 0%, #17191c 55%, #0d0f11 100%); text-align:center; }
  .cta-section h2{ font-size:clamp(1.8rem,3.2vw,2.8rem); max-width:760px; margin:22px auto; color:#fff; }
  .cta-section p{ max-width:620px; margin:0 auto 34px; color:rgba(255,255,255,0.7); font-weight:300; }
  .cta-buttons{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; align-items:center; }