/* ==========================================================
   home.css — page-specific styles for index.html
   Extracted from inline <style> — see site.css for shared rules
   ========================================================== */
  
.hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-image {
    opacity: 0;
    transition: opacity 1.2s ease;
}

.hero-image.active {
    opacity: 1;
}
.maplibregl-ctrl-bottom-right{display:none!important;}

/* ==========================================================
   "Our Projects" map — plain rewrite of the old x-dc widget.
   See assets/js/projects-map.js for the JS that drives this.
   ========================================================== */

.cpmap-sec{
  position:relative; width:100%; height:760px; min-height:560px; overflow:hidden;
  background:#141414; font-family:var(--sans); color:#fff; transition:background .5s ease;
}
.cpmap-sec.cpmap-light{ background:#f8f5ee; color:#252525; }

.cpmap-canvas{
  position:absolute; inset:0; z-index:0;
  opacity:0; transition:opacity 1.1s cubic-bezier(.16,1,.3,1);
}
.cpmap-canvas.cpmap-ready{ opacity:1; }
.cpmap-canvas .maplibregl-canvas{ outline:none; }
.cpmap-canvas .maplibregl-ctrl-attrib{ background:rgba(20,20,20,.78)!important; color:rgba(255,255,255,.45)!important; font-size:10px!important; }
.cpmap-canvas .maplibregl-ctrl-attrib a{ color:rgba(255,255,255,.62)!important; }
/* "White with golden veins" is normally rendered directly by a recolored MapLibre
   vector style (see buildGoldStyle() in projects-map.js — every road/rail line is
   painted gold, land + water are painted ivory/white, no filter trickery needed).
   This CSS filter is only a safety net: projects-map.js adds the
   .cpmap-canvas-raster class when the vector style can't be fetched (offline /
   blocked) and falls back to tinting plain raster tiles gold instead. */
.cpmap-sec.cpmap-light .cpmap-canvas.cpmap-canvas-raster .maplibregl-canvas{
  filter:sepia(.65) saturate(2.8) hue-rotate(-8deg) brightness(1.04) contrast(1.15);
}

.cpmap-vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; transition:background .5s ease;
  background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 40%,rgba(10,10,10,.55) 100%); }
.cpmap-sec.cpmap-light .cpmap-vignette{ background:radial-gradient(ellipse 120% 100% at 50% 50%,transparent 40%,rgba(240,237,230,.5) 100%); }

.cpmap-edgefade{ position:absolute; inset:0; z-index:1; pointer-events:none; transition:background .5s ease;
  background:linear-gradient(180deg,rgba(14,14,14,.6) 0%,transparent 12%,transparent 88%,rgba(14,14,14,.5) 100%); }
.cpmap-sec.cpmap-light .cpmap-edgefade{ background:linear-gradient(180deg,rgba(240,237,230,.6) 0%,transparent 12%,transparent 88%,rgba(240,237,230,.5) 100%); }

.cpmap-header{
  position:absolute; top:30px; left:38px; right:180px; z-index:500; pointer-events:none;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-weight:700; letter-spacing:.2em; font-size:13px; color:#CFAD66; text-transform:uppercase;
}
.cpmap-dot{ width:7px; height:7px; border-radius:50%; background:#CFAD66; box-shadow:0 0 10px #CFAD66; animation:cpmapGlow 3s ease-in-out infinite; }

.cpmap-wordmark{ position:absolute; bottom:30px; right:40px; z-index:450; pointer-events:none; text-align:right; }
.cpmap-wm-main{
  font-family:var(--serif); font-weight:600; font-size:28px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(241,238,230,.15); -webkit-text-stroke:1px rgba(241,238,230,.2); transition:color .5s ease;
}
.cpmap-sec.cpmap-light .cpmap-wm-main{ color:rgba(74,58,26,.1); -webkit-text-stroke:1px rgba(74,58,26,.15); }
.cpmap-wm-sub{ font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:rgba(207,173,102,.45); margin-top:5px; }

.cpmap-controls{ position:absolute; top:32px; right:38px; left:200px; z-index:500; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
/* Tabs never wrap to a second row. .cpmap-controls is bounded (left+right
   set below) so there's always room for the row to lay out flat; nowrap
   alone is enough — no scroll container needed. */
.cpmap-tabs{
  display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:8px;
  
}
.cpmap-tab{
  appearance:none; cursor:pointer; width:36px; height:36px; border-radius:999px; flex-shrink:0;
  font-family:var(--sans); font-weight:700; font-size:14px; transition:all 180ms cubic-bezier(.2,0,0,1);
  background:rgba(255,255,255,.07); color:#fff; border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(6px);
}
.cpmap-sec.cpmap-light .cpmap-tab{ background:rgba(74,58,26,.06); color:#4a3a1a; border-color:rgba(74,58,26,.18); }
.cpmap-tab:hover{ border-color:#CFAD66; }
.cpmap-tab.active{ background:#CFAD66; color:#252525; border-color:#CFAD66; box-shadow:0 0 0 4px rgba(207,173,102,.3); }

.cpmap-btnrow{ display:flex; gap:8px; }
.cpmap-btn{
  appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:12px; font-weight:500; padding:8px 14px; border-radius:999px;
  backdrop-filter:blur(6px); transition:all 220ms; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.22); color:#fff;
}
.cpmap-sec.cpmap-light .cpmap-btn{ background:rgba(74,58,26,.06); border-color:rgba(74,58,26,.16); color:#4a3a1a; }
.cpmap-btn:hover{ opacity:.85; }

/* ── Side scrollbar — click / drag / arrow-keys to move between project slides ── */
.cpmap-scrollbar{ position:absolute; top:130px; bottom:130px; right:14px; width:26px; z-index:500; display:flex; justify-content:center; cursor:pointer; touch-action:none; }
.cpmap-scrollbar-track{ position:relative; width:3px; height:100%; border-radius:999px; background:rgba(255,255,255,.18); transition:background .4s ease; }
.cpmap-sec.cpmap-light .cpmap-scrollbar-track{ background:rgba(74,58,26,.18); }
.cpmap-scrollbar-thumb{
  position:absolute; left:50%; top:0; min-height:26px; width:9px; border-radius:999px; transform:translateX(-50%);
  background:#CFAD66; box-shadow:0 0 8px rgba(207,173,102,.6);
  transition:top .35s cubic-bezier(.2,0,0,1), height .35s cubic-bezier(.2,0,0,1), width .2s ease;
}
.cpmap-scrollbar:hover .cpmap-scrollbar-thumb{ width:12px; }
.cpmap-scrollbar:focus-visible{ outline:2px solid #CFAD66; outline-offset:6px; border-radius:8px; }

.cpmap-loading{ position:absolute; inset:0; z-index:600; display:flex; align-items:center; justify-content:center; background:#141414; transition:opacity .3s ease; }
.cpmap-loading.hidden{ opacity:0; pointer-events:none; }
.cpmap-spinner{ width:34px; height:34px; border:3px solid rgba(255,255,255,.18); border-top-color:#CFAD66; border-radius:50%; animation:cpmapSpin .8s linear infinite; }

.cpmap-card{
  position:absolute; left:38px; bottom:34px; width:344px; max-width:calc(100% - 100px); z-index:500;
  background:rgba(22,22,22,.92); color:#fff; border:1px solid rgba(207,173,102,.12); border-radius:16px;
  box-shadow:0 24px 56px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04),inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden; backdrop-filter:blur(14px); transition:background .4s ease,color .4s ease,border-color .4s ease;
  animation:cpmapFadeUp .6s ease-out both;
}
.cpmap-sec.cpmap-light .cpmap-card{ background:rgba(255,255,255,.95); color:#1a1a1a; border-color:rgba(74,58,26,.14); box-shadow:0 16px 48px rgba(74,58,26,.14),0 0 0 1px rgba(74,58,26,.05); }
.cpmap-card-media{ height:138px; position:relative; background-size:cover; background-position:center; display:flex; align-items:flex-end; padding:12px; overflow:hidden; }
.cpmap-card-media::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%,rgba(207,173,102,.2),transparent 38%),linear-gradient(180deg,rgba(20,20,20,.15) 0%,rgba(20,20,20,0) 36%,rgba(20,20,20,.48) 100%); }
.cpmap-card-media.has-project-image{ background-color:#252525; background-repeat:no-repeat; }
.cpmap-card-media.has-project-image::before{ background:linear-gradient(180deg,rgba(20,20,20,.32) 0%,rgba(20,20,20,0) 36%,rgba(20,20,20,.84) 100%); }
.cpmap-card-iconwrap{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.cpmap-card-icon{ width:78px; height:78px; display:flex; align-items:center; justify-content:center; opacity:.95; filter:drop-shadow(0 12px 24px rgba(0,0,0,.35)); }
.cpmap-card-icon svg{ width:100%; height:100%; }
.cpmap-card-status{ position:relative; display:inline-flex; align-items:center; gap:6px; background:#CFAD66; color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.cpmap-card-coord{ position:absolute; top:12px; right:14px; font-family:var(--sans); font-weight:700; font-size:12.5px; color:rgba(255,255,255,.92); letter-spacing:.04em; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.cpmap-card-body{ padding:18px 20px 20px; }
.cpmap-card-area{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#CFAD66; }
.cpmap-card-name{ font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.1; margin-top:3px; color:inherit; }
.cpmap-card-blurb{ font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.7); margin-top:8px; transition:color .4s ease; }
.cpmap-sec.cpmap-light .cpmap-card-blurb{ color:rgba(37,30,15,.62); }
.cpmap-card-foot{ display:flex; align-items:center; gap:14px; margin-top:16px; }
.cpmap-card-cta{ appearance:none; border:none; cursor:pointer; background:#CFAD66; color:#fff; font-family:var(--sans); font-weight:700; font-size:14px; padding:11px 18px; border-radius:8px; transition:background 180ms cubic-bezier(.2,0,0,1); }
.cpmap-card-cta:hover{ background:#B8965A; }
.cpmap-card-type{ font-size:13px; color:rgba(255,255,255,.5); transition:color .4s ease; }
.cpmap-sec.cpmap-light .cpmap-card-type{ color:rgba(37,30,15,.45); }

/* ── Markers ── */
.cpmap-marker{ position:absolute; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer; }
/* Entrance animation lives on .cpmap-pin (not .cpmap-marker) because MapLibre
   itself drives .cpmap-marker's transform every frame to keep it pinned to its
   lng/lat — animating that element directly would fight the map's own
   positioning. .cpmap-pin is a plain child, safe to animate. */
.cpmap-pin{ position:relative; width:0; height:0; opacity:0; animation:cpmapPinIn .65s cubic-bezier(.16,1,.3,1) both; }
.cpmap-pin .ring{ position:absolute; left:-16px; top:-16px; width:32px; height:32px; border-radius:50%; border:2px solid #CFAD66; opacity:0; }
.cpmap-pin .glow{ position:absolute; left:-30px; top:-30px; width:60px; height:60px; border-radius:50%; background:radial-gradient(circle,rgba(207,173,102,.25) 0%,rgba(207,173,102,0) 70%); opacity:0; transition:opacity .4s ease; }
.cpmap-pin.active .glow{ opacity:1; animation:cpmapGlow 3s ease-in-out infinite; }
.cpmap-pin .dot{
  position:absolute; left:-8px; top:-8px; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid #141414;
  box-shadow:0 0 0 1px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.7);
  transition:width .25s cubic-bezier(.2,0,0,1), height .25s cubic-bezier(.2,0,0,1), left .25s cubic-bezier(.2,0,0,1), top .25s cubic-bezier(.2,0,0,1), transform .25s cubic-bezier(.2,0,0,1);
}
.cpmap-pin.active .dot{ opacity:0; }
.cpmap-pin .bldg{
  position:absolute; left:-23px; top:-58px; width:46px; height:62px; opacity:0; transform:translateY(12px) scale(.7); transform-origin:50% 92%;
  transition:opacity .45s ease, transform .5s cubic-bezier(.16,1,.3,1); pointer-events:none;
  filter:drop-shadow(0 7px 14px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(207,173,102,.15));
}
.cpmap-pin.active .bldg{ opacity:1; transform:translateY(0) scale(1); }
.cpmap-pin .base{ position:absolute; left:-9px; top:-5px; width:18px; height:9px; border-radius:50%; background:radial-gradient(closest-side,rgba(207,173,102,.95),rgba(207,173,102,0)); opacity:0; transition:opacity .35s ease; }
.cpmap-pin.active .base{ opacity:1; }
.cpmap-pin.active .ring{ animation:cpmapPulse 2s ease-out infinite; }
.cpmap-pin:hover .dot{ transform:scale(1.18); }
.cpmap-label{
  position:absolute; left:26px; top:-17px; white-space:nowrap; background:linear-gradient(135deg,rgba(30,30,30,.95),rgba(22,22,22,.95));
  border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:9px 15px; backdrop-filter:blur(10px);
  box-shadow:0 10px 28px rgba(0,0,0,.65),0 0 0 1px rgba(207,173,102,.08); opacity:0; transform:translateX(-4px);
  transition:opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1), border-color .3s;
}
.cpmap-pin.active .cpmap-label{ top:-50px; left:30px; }
.cpmap-label::before{ content:''; position:absolute; left:14px; top:1px; width:18px; height:2px; border-radius:2px; background:#CFAD66; opacity:0; }
.cpmap-pin.active .cpmap-label::before{ opacity:1; }
.cpmap-pin.active .cpmap-label,.cpmap-pin:hover .cpmap-label{ opacity:1; transform:translateX(0); }
.cpmap-label b{ display:block; font:700 14px var(--sans); color:#fff; letter-spacing:.01em; }
.cpmap-label i{ display:block; font:600 9.5px var(--sans); font-style:normal; color:rgba(255,255,255,.6); margin-top:3px; text-transform:uppercase; letter-spacing:.1em; }
.cpmap-pin.active .cpmap-label{ border-color:rgba(207,173,102,.55); box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 0 1px rgba(207,173,102,.25); }
.cpmap-pin.active .cpmap-label b{ color:#CFAD66; }

/* ── Landmark labels ── */
.cpmap-lm{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap; font-family:var(--sans); }
.cpmap-lm.road{ font-weight:700; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:#e2e2e2; text-shadow:0 0 4px rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.6); }
.cpmap-lm.place{ font-weight:600; font-size:11px; letter-spacing:.02em; color:#f2f2f2; text-shadow:0 0 4px rgba(0,0,0,.85),0 0 8px rgba(0,0,0,.6); }
.cpmap-lm.water{ font-weight:500; font-style:italic; font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:#7e8893; text-shadow:0 0 4px rgba(0,0,0,.7); }
.cpmap-lm-dot{ display:inline-block; width:4px; height:4px; border-radius:50%; background:#CFAD66; margin-right:5px; vertical-align:middle; }

@keyframes cpmapSpin{ to{ transform:rotate(360deg); } }
@keyframes cpmapPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(3.8); opacity:0; } }
@keyframes cpmapFadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes cpmapGlow{ 0%,100%{ opacity:.4; } 50%{ opacity:.7; } }
@keyframes cpmapPinIn{ from{ opacity:0; transform:translateY(-16px) scale(.55); } to{ opacity:1; transform:translateY(0) scale(1); } }
/* Opacity-only (no transform) because .cpmap-lm is itself a MapLibre marker
   root — MapLibre overwrites its inline transform every frame to keep it
   pinned to its lng/lat, so a transform-based entrance would fight that. */
@keyframes cpmapLmIn{ from{ opacity:0; } to{ opacity:1; } }

/* Landmark labels fade in on load, staggered per-item via inline
   animation-delay set in projects-map.js. */
.cpmap-lm{ opacity:0; animation:cpmapLmIn .9s ease-out both; }

@media(max-width:900px){
  .cpmap-sec{ height:640px; }
  .cpmap-wordmark{ display:none; }
  .cpmap-scrollbar{ right:8px; top:110px; bottom:110px; }
}
@media(max-width:640px){
  .cpmap-sec{ height:600px; }
  .cpmap-header{ right:120px; font-size:11px; }
  .cpmap-controls{ top:20px; right:16px; left:130px; }
  .cpmap-tab{ width:30px; height:30px; font-size:12px; }
  .cpmap-scrollbar{ display:none; } /* tab buttons cover navigation on small screens */
  .cpmap-card{ left:16px; right:16px; width:auto; max-width:none; bottom:16px; }
}
@media(max-width:380px){
  .cpmap-sec{ height:560px; }
  .cpmap-card-name{ font-size:21px; }
  .cpmap-controls{ left:96px; }
  .cpmap-tab{ width:26px; height:26px; font-size:11px; }
}