/* Project additions: image placeholder card + Shivalik Villas page.
   Kept outside the inline critical CSS so the CSP style hash stays valid. */

/* Card image placeholder (used until the real project photo arrives) */
.property-placeholder{position:relative;display:grid;place-items:end start;height:270px;overflow:hidden;padding:20px;color:#fff;background:linear-gradient(160deg,#0d2a55 0%,#071c3d 62%,#041226 100%)}
.property-placeholder svg{position:absolute;inset:auto 0 0;width:100%;height:62%;fill:#ffffff14}
.property-placeholder svg path+path{fill:#f3731926}
.property-placeholder b{position:relative;padding:6px 10px;border:1px solid rgba(255,255,255,.28);border-radius:6px;background:#071c3d8f;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

/* Shared line icon */
.ico{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Shivalik Villas page: hero */
.project-page .page-hero{padding-bottom:clamp(24px,4vw,48px)}
.project-page .page-hero-layout{align-items:center}
@media(min-width:981px){.project-page .page-hero-layout{grid-template-columns:minmax(0,1fr) minmax(0,560px)}}
.project-hero-media{position:relative;aspect-ratio:1;overflow:hidden;border-radius:8px;background:#071c3d;box-shadow:0 30px 80px #071c3d33}
.project-hero-media picture,.project-hero-media img{width:100%;height:100%}
.project-hero-media img{object-fit:cover}
.project-hero-media .price-card{position:absolute;left:16px;bottom:16px;max-width:300px;gap:6px;padding:18px 22px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(150deg,#0d2a55e6,#071c3deb);backdrop-filter:blur(12px)}
.project-hero-media .price-card strong{font-size:clamp(2.2rem,3.4vw,2.8rem)}
.project-hero-media .price-card small{font-size:.8rem}
.project-page .project-tagline{max-width:640px;margin:18px 0 0;color:var(--ink);font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:700;line-height:1.25}
.project-page .hero-actions{margin-top:30px}
.project-page .button.secondary{border-color:rgba(7,28,61,.18);color:var(--ink);background:#fff}

.price-card{display:grid;gap:10px;padding:clamp(22px,3vw,32px);border-radius:8px;color:#fff;background:linear-gradient(150deg,#0d2a55,#071c3d);box-shadow:0 24px 60px #071c3d2e}
.price-card span{color:var(--orange-2);font-size:.75rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.price-card strong{font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(2.6rem,5vw,3.6rem);line-height:.95}
.price-card small{color:#ffffffc2;font-size:.86rem}

/* About: heading column */
.project-page .about-story{padding-top:clamp(28px,5vw,64px)}
.project-page .story-copy h2{font-size:clamp(2rem,3vw,3rem);line-height:1.08}
.story-lead{max-width:460px;margin:24px 0 0;padding-left:18px;border-left:3px solid var(--orange);color:var(--ink);font-size:clamp(1.08rem,1.6vw,1.28rem);font-weight:700;line-height:1.45}
.story-place{display:inline-flex;align-items:center;gap:8px;margin:22px 0 0;padding:8px 14px 8px 10px;border-radius:999px;color:#c95f18;background:#fff0e6;font-size:.8rem;font-weight:800}
.story-place .ico{width:18px;height:18px}

/* About: feature cards */
.feature-list{display:grid;gap:14px}
.feature{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;padding:clamp(20px,3vw,28px);border:1px solid rgba(7,28,61,.08);border-radius:8px;background:#fff;box-shadow:0 14px 40px #071c3d0f;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
@media(hover:hover){.feature:hover{border-color:#f3731940;box-shadow:0 22px 55px #071c3d1c;transform:translateY(-3px)}}
.feature-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:12px;color:var(--orange);background:linear-gradient(135deg,#fff3ea,#ffe2cc)}
.feature-icon .ico{width:26px;height:26px}
.feature h3{margin:4px 0 10px;color:var(--ink);font-size:1.14rem;font-weight:800;line-height:1.25}
.feature p{margin:0;color:var(--muted);line-height:1.65}
.feature-note{display:flex;align-items:center;gap:22px;padding:22px clamp(20px,3vw,28px);border-radius:8px;color:#ffffffc9;background:linear-gradient(135deg,#0d2a55,#071c3d)}
.feature-note strong{flex:0 0 auto;color:var(--orange-2);font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(2rem,3vw,2.5rem);line-height:1}
.feature-note p{margin:0;padding-left:22px;border-left:1px solid rgba(255,255,255,.2);font-size:.95rem}

/* At a glance: bento grid */
.glance{width:min(calc(100% - 32px),var(--max));margin:clamp(28px,5vw,56px) auto clamp(48px,7vw,88px);padding:clamp(24px,5vw,56px);border-radius:8px;background:linear-gradient(180deg,#f4f7f7,#edf2f4)}
.glance-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px}
.glance-head h2{margin:12px 0 0;color:var(--ink);font-size:clamp(2rem,3vw,3rem);font-weight:800;line-height:1.08}
.glance-head>p{max-width:340px;margin:0;color:var(--muted)}
.glance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:14px;margin:28px 0 0}
.glance-item{display:flex;flex-direction:column;gap:18px;padding:24px;border:1px solid rgba(7,28,61,.06);border-radius:8px;background:#fff;box-shadow:0 10px 30px #071c3d0d}
.glance-item.wide{grid-column:span 2}
.glance-item dt{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.74rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.glance-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--orange);background:#fff0e6}
.glance-icon .ico{width:20px;height:20px}
.glance-item dd{display:grid;gap:12px;margin:0;color:var(--ink);font-size:1.05rem;font-weight:800;line-height:1.35}
.glance-sub{color:var(--muted);font-size:.86rem;font-weight:600}
.glance-sub b{color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 16px;border:1px solid #f3731933;border-radius:999px;color:var(--ink);background:#fff6ef;font-size:1rem;font-weight:800}

.plots{display:flex;align-items:flex-end;gap:clamp(12px,2.4vw,28px)}
.plot{display:grid;justify-items:center;gap:8px;font-size:.95rem;font-weight:800}
.plot i{width:calc(var(--s)*1px);height:calc(var(--s)*1px);border:2px solid var(--orange);border-radius:4px;background:repeating-linear-gradient(135deg,#fff0e6 0 5px,#fff 5px 10px)}
.p78{--s:38}.p90{--s:41}.p116{--s:47}.p135{--s:51}.p215{--s:64}
.p215 i{background:repeating-linear-gradient(135deg,#ffd9bd 0 5px,#fff0e6 5px 10px)}

.glance-tags,.landmarks{display:flex;flex-wrap:wrap;gap:6px}
.glance-tags span{padding:4px 10px;border-radius:6px;color:var(--muted);background:var(--soft);font-size:.78rem;font-weight:800}
.landmarks span{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.82rem;font-weight:700}
.landmarks span:not(:last-child):after{content:"";width:4px;height:4px;margin-left:4px;border-radius:50%;background:var(--orange)}

.glance-item.price{border-color:transparent;color:#fff;background:linear-gradient(150deg,#0d2a55,#071c3d)}
.glance-item.price dt{color:#ffffffb3}
.glance-item.price .glance-icon{color:var(--orange-2);background:#ffffff14}
.glance-item.price dd{gap:4px;margin-top:auto}
.glance-item.price strong{color:#fff;font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(2.4rem,4vw,3rem);font-weight:700;line-height:1}
.glance-item.price .glance-sub{color:var(--orange-2);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.74rem}


@media(max-width:980px){
  .glance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .project-page .hero-actions{grid-template-columns:1fr 1fr}
  .project-hero-media .price-card{left:12px;right:12px;bottom:12px;max-width:none;padding:14px 16px}
  .feature{grid-template-columns:1fr;gap:14px}
  .feature-icon{width:46px;height:46px}
  .feature-note{flex-direction:column;align-items:flex-start;gap:10px}
  .feature-note p{padding:0;border:0}
  .glance{width:100%;border-radius:0;padding:36px 16px}
  .glance-grid{grid-template-columns:1fr}
  .glance-item.wide{grid-column:auto}
  .glance-item{padding:20px}
  .plots{gap:10px}
  .plot i{width:calc(var(--s)*.85px);height:calc(var(--s)*.85px)}
}
@media(prefers-reduced-motion:reduce){
  .feature:hover{transform:none}
}