/* Extracted inline styles for Dark Hills — moved from index.html
   These use dh- prefixes or existing IDs to avoid clashing with site CSS.
*/

/* navbar contrast (moved from head) */
.navbar-contrast{
    background-color: rgba(10,12,15,0.55) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.45);
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
@media (max-width: 991px){ .navbar-contrast { padding-top: .6rem; padding-bottom: .6rem; } }

/* nav brand size */
#nav-brand{ font-size: 1.25rem; }

.footer-brand{ font-size: 1.25rem; }

/* Projects cards extracted styles */
.proj-card { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.6); }
.proj-card img { width: 100%; height: 320px; object-fit: cover; display:block; transition: transform .6s ease; }
.proj-card:hover img { transform: scale(1.06); }
.proj-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,6,8,0.0) 30%, rgba(1,6,8,0.85) 90%); color: #fff; display:flex; flex-direction:column; justify-content:flex-end; padding:20px; }
.proj-title { font-size: 1.25rem; font-weight:700; margin-bottom:6px; }
.proj-teaser { color: #cfcfcf; font-size: .95rem; margin-bottom:12px; max-height:48px; overflow:hidden; }
.proj-meta { color:#9aa1a6; font-size:.85rem; margin-bottom:10px; }
.proj-btn { align-self:flex-start; }
@media (max-width:767px){ .proj-card img{height:220px} }

/* About section extracted styles */
.about-redesign .about-text p { color: #e6eaec; font-size: 1rem; line-height: 1.6; }
.about-redesign .badge { border: 1px solid rgba(255,255,255,0.08); color: #9aa1a6; padding: .45rem .7rem; border-radius: 8px; }
.about-visual { display: block; }
.about-visual .about-image { box-shadow: 0 10px 30px rgba(0,0,0,0.6); }

/* Services section extracted styles */
.dh-services-label { color: #e4e8ea; }

.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (max-width: 767px){ .services-grid { grid-template-columns: 1fr; } }

.service-card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border-radius: 16px; padding: 20px; display:flex; gap:16px; align-items:flex-start; transition: transform .28s ease, box-shadow .28s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
.service-icon { width:64px; height:64px; flex: 0 0 64px; border-radius:12px; display:flex; align-items:center; justify-content:center; background: rgba(11,125,140,0.08); }
.service-icon img{ max-width:48px; max-height:48px; }
.service-body h4{ margin:0 0 6px 0; color:#fff; font-size:1.05rem; }
.service-body p{ margin:0; color:#cfcfcf; font-size:.95rem; line-height:1.4; }
.service-meta{ margin-top:8px; color:#9aa1a6; font-size:.85rem; }

/* Contact area extracted styles */
.contact-card { background: rgba(1,6,8,0.55); }
.contact-visual { overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.25)); }

#contact-canvas { filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6)); width:100% !important; height:auto !important; max-width:100%; box-sizing:border-box; border-radius:8px; display:block; background:transparent; }
@media (max-width: 991px) { #contact-canvas{height:68px} }

#contact-feedback { display:none; }

/* small utility classes moved from inline styles */
.dh-contact-icon-wrapper { width:56px; height:56px; background:rgba(255,255,255,0.03); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.dh-contact-icon { font-size:1.25rem; }

/* Footer social list cleanup */
.dh-footer-social-list { gap:.6rem; display:inline-flex; align-items:center; padding:0; margin:0; list-style:none; }

/* Canvas helper class (if referenced) */
.dh-contact-canvas { width:100%; height:auto; }