/* ============================================================
   SILVER SPUR PAGE — section-specific CSS only
   Namespaced under .sp- so nothing collides with existing styles.
   ============================================================ */

/* ---- Hero ---- */
.sp-hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--charcoal);
}

.sp-hero-media{
  position:absolute; inset:0; overflow:hidden; z-index:0;
}

.sp-hero-image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; transform:scale(1.02); z-index:0;
}

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

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

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

.sp-hero-inner{
  position:relative; z-index:5; width:100%; padding:80px 0 48px;
}

.sp-hero .eyebrow{ color:var(--gold); margin-bottom:26px; }

.sp-hero h1{
  max-width:780px; color:var(--white);
  font-size:clamp(2.4rem,4.8vw,4.3rem); line-height:1.12; margin-bottom:28px;
}

.sp-hero-intro{
  max-width:640px; margin-top:0; color:rgba(255,255,255,.78);
  font-size:1.03rem; line-height:1.75; font-weight:300;
}

.sp-hero-cta{ margin-top:40px; }

.sp-hero-meta{
  margin-top:56px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:36px;
}

.sp-hero-meta-item{ display:flex; flex-direction:column; gap:6px; }

.sp-hero-meta-label{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); font-weight:600;
}

.sp-hero-meta-value{ font-size:.92rem; color:var(--white); font-weight:300; }

@media(max-width:992px){
  .sp-hero-inner{ padding:80px 0 60px; }
  .sp-hero h1{ max-width:680px; }
}

@media(max-width:768px){
  .sp-hero{ min-height:85vh; }
  .sp-hero-image{ object-position:72% center; }
  .sp-hero-inner{ padding:80px 0 70px; }
  .sp-hero-meta{ gap:24px; }
}

@media(max-width:576px){
  .sp-hero{ min-height:85vh; }
  .sp-hero-image{ object-position:72% center; }
  .sp-hero-inner{ padding:0; }
  .sp-hero h1{ font-size:clamp(2rem,9vw,3rem); line-height:1.08; }
  .sp-hero-intro{ font-size:.96rem; line-height:1.7; }
  .sp-hero-cta{ margin-top:32px; }
  .sp-hero-meta{ margin-top:42px; padding-top:22px; gap:20px; }
}

/* ---- Section 2: Overview ---- */
.sp-overview-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:80px; align-items:start; }
@media(max-width:900px){ .sp-overview-grid{ grid-template-columns:1fr; gap:48px; } }

.sp-overview-text p{ font-size:0.98rem; font-weight:300; color:#3a3d41; line-height:1.85; margin-bottom:20px; }
.sp-overview-text p:last-child{ margin-bottom:0; }

.sp-info-list{ border-top:1px solid var(--line-dark); }
.sp-info-row{ display:flex; justify-content:space-between; gap:20px; padding:18px 0; border-bottom:1px solid var(--line-dark); }
.sp-info-label{ font-size:0.78rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--steel); font-weight:600; flex-shrink:0; }
.sp-info-value{ font-size:0.92rem; color:var(--charcoal); text-align:right; font-weight:400; max-width:280px; }

/* ---- Section 3: The Silver Spur Project (60/40) ---- */
.sp-project-grid{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; align-items:stretch; }
@media(max-width:900px){ .sp-project-grid{ grid-template-columns:1fr; } }

.sp-project-image{ overflow:hidden; border-radius:5px; }
.sp-project-image img{ width:100%; height:100%; object-fit:cover; min-height:420px; }

.sp-project-content{ padding-left:64px; display:flex; flex-direction:column; justify-content:center; }
@media(max-width:900px){ .sp-project-content{ padding-left:0; padding-top:40px; } }

.sp-project-content h2{ font-size:clamp(1.6rem, 3vw, 2.2rem); color:var(--navy); margin-top:16px; line-height:1.28; }
.sp-project-content p{ margin-top:20px; font-size:0.96rem; font-weight:300; color:#3a3d41; line-height:1.8; }

.sp-pull-quote{
  font-family:var(--serif); font-size:1.4rem; color:var(--navy); line-height:1.5; font-weight:500;
  margin:28px 0; padding-left:20px; border-left:2px solid var(--gold);
}

/* ---- Section 4: Location (navy) ---- */
.sp-location-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
@media(max-width:900px){ .sp-location-grid{ grid-template-columns:1fr; gap:40px; } }

.sp-location-text p{ font-size:0.98rem; font-weight:300; color:rgba(255,255,255,0.75); line-height:1.85; margin-top:20px; }

.sp-location-visual{ border:1px solid var(--line); border-radius:5px; overflow:hidden; }
.sp-location-visual img{ width:100%; height:420px; object-fit:cover; }
.sp-location-caption{ margin-top:14px; font-size:0.76rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); }

/* ---- Section 5: Key characteristics ---- */
.sp-features{ display:grid; grid-template-columns:repeat(4, 1fr); }
@media(max-width:900px){ .sp-features{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .sp-features{ grid-template-columns:1fr; } }

.sp-feature{ padding:0 28px 0 0; border-left:1px solid var(--line-dark); padding-left:28px; }
.sp-feature:first-child{ border-left:none; padding-left:0; }
@media(max-width:900px){
  .sp-feature{ border-left:none; padding-left:0; padding-bottom:32px; margin-bottom:32px; border-bottom:1px solid var(--line-dark); }
  .sp-feature:nth-child(2n){ padding-left:28px; border-left:1px solid var(--line-dark); }
}
@media(max-width:560px){ .sp-feature{ border-left:none !important; padding-left:0 !important; } }

.sp-feature-index{ font-family:var(--serif); font-size:1.5rem; color:var(--gold); opacity:0.85; }
.sp-feature h3{ margin-top:16px; font-size:1.1rem; color:var(--charcoal); font-weight:500; }
.sp-feature p{ margin-top:12px; font-size:0.88rem; font-weight:300; color:#5c6066; line-height:1.7; }

/* ---- Section 6: Project insight (charcoal) ---- */
.sp-insight-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; align-items:start; }
@media(max-width:900px){ .sp-insight-grid{ grid-template-columns:1fr; gap:40px; } }

.sp-insight-content p{ font-size:0.96rem; font-weight:300; color:rgba(255,255,255,0.72); line-height:1.85; margin-bottom:22px; }
.sp-insight-content p:last-child{ margin-bottom:0; }

.sp-meta-tags{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; }
.sp-meta-tag{
  font-size:0.72rem; letter-spacing:0.05em; color:var(--gold-light);
  border:1px solid rgba(198,165,90,0.35); padding:7px 14px; border-radius:2px;
}

/* ---- Section 7: Visual break ---- */
.sp-visual-break{ padding:0; }
.sp-visual-break-frame{ position:relative; height:520px; overflow:hidden; }
@media(max-width:900px){ .sp-visual-break-frame{ height:360px; } }
.sp-visual-break-frame img{ width:100%; height:100%; object-fit:cover; }
.sp-visual-break-caption{
  position:absolute; left:48px; bottom:28px; color:var(--white);
  font-family:var(--serif); font-size:1rem; font-style:italic;
  text-shadow:0 2px 12px rgba(0,0,0,0.5);
}
@media(max-width:480px){ .sp-visual-break-caption{ left:20px; } }

/* ---- Section 8: Project status ---- */
.sp-status-grid{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:80px; align-items:start; }
@media(max-width:900px){ .sp-status-grid{ grid-template-columns:1fr; gap:40px; } }

.sp-milestones{ border-top:1px solid var(--line-dark); }
.sp-milestone{ display:grid; grid-template-columns:56px 1fr; gap:24px; padding:32px 0; border-bottom:1px solid var(--line-dark); }
.sp-milestone-num{ font-family:var(--serif); font-size:1.7rem; color:var(--gold); line-height:1; }
.sp-milestone h3{ font-size:1.1rem; color:var(--navy); font-weight:500; }
.sp-milestone p{ margin-top:10px; font-size:0.92rem; font-weight:300; color:#4b4f54; line-height:1.75; }

/* ---- Section 9: Related projects ---- */
.sp-related-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:36px; margin-top:56px; }
@media(max-width:900px){ .sp-related-grid{ grid-template-columns:1fr; gap:32px; } }

.sp-related-card{ border:1px solid var(--line); transition:border-color .3s ease; }
.sp-related-card:hover{ border-color:rgba(198,165,90,0.5); }
.sp-related-image{ aspect-ratio:4/3; overflow:hidden; }
.sp-related-image img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.sp-related-card:hover .sp-related-image img{ transform:scale(1.04); }
.sp-related-body{ padding:26px 26px 30px; }
.sp-related-category{ font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); font-weight:600; }
.sp-related-body h3{ font-family:var(--serif); font-size:1.3rem; color:var(--white); margin-top:12px; font-weight:500; }
.sp-related-link{ display:inline-flex; align-items:center; gap:8px; margin-top:20px; font-size:0.76rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-light); font-weight:600; }
.sp-related-link svg{ width:12px; height:12px; transition:transform .3s ease; }
.sp-related-card:hover .sp-related-link svg{ transform:translateX(3px); }

/* ---- Section 10: Final CTA ---- */
.sp-final-cta{ text-align:center; max-width:620px; margin:0 auto; }
.sp-final-cta .eyebrow{ justify-content:center; margin-bottom:20px; }
.sp-final-cta h2{ font-size:clamp(2rem, 4vw, 2.8rem); color:var(--white); line-height:1.2; }
.sp-final-cta p{ margin-top:20px; font-size:1rem; font-weight:300; color:rgba(255,255,255,0.72); line-height:1.75; }
.sp-final-cta-actions{ margin-top:38px; display:flex; align-items:center; justify-content:center; gap:28px; flex-wrap:wrap; }