@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg:#020607;
    --panel:#071016;
    --gold:#d1a03a;
    --gold2:#f0c463;
    --line:rgba(209,160,58,.34);
    --muted:#d4d8d9;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; background:#000; }
body { background:#000; color:#fff; font-family:Poppins,Arial,sans-serif; overflow-x:hidden; }

.page,
.content-section,
.estimate-section {
    width:90%;
    max-width:1200px;
    margin:0 auto;
}

.top-visual {
    position:relative;
    background:#020607;
}

.top-visual img {
    width:100%;
    height:auto;
    display:block;
}

.hotspot { position:absolute; z-index:5; display:block; }

.nav-home { left: 29.4%; top: 3.15%; width: 5.3%; height: 4%; }
.nav-services { left: 36.1%; top: 3.15%; width: 8.8%; height: 4%; }
.nav-projects { left: 45.2%; top: 3.15%; width: 8.2%; height: 4%; }
.nav-about { left: 54.2%; top: 3.15%; width: 8.3%; height: 4%; }
.nav-estimate { left: 63.2%; top: 3.15%; width: 8%; height: 4%; }
.nav-contact { left: 71.5%; top: 3.15%; width: 7.5%; height: 4%; }

.hs-estimate { left: 4.2%; top: 53.2%; width: 21%; height: 5.5%; }
.hs-call { left: 26.3%; top: 53.2%; width: 12.8%; height: 5.5%; }
.hs-whatsapp { left: 40.5%; top: 53.2%; width: 13.6%; height: 5.5%; }
.hs-top-phone { right: 11.8%; top: 2.9%; width: 13%; height: 4.6%; }
.hs-top-call { right: 2.7%; top: 2.9%; width: 8.6%; height: 4.6%; }

.stats {
    display:grid;
    grid-template-columns:repeat(5,1fr);
    padding:36px 26px;
    background:linear-gradient(180deg,#081016,#05090c);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid var(--line);
}

.stat {
    text-align:center;
    padding:10px 20px;
    border-right:1px solid rgba(209,160,58,.25);
}

.stat:last-child { border-right:0; }

.icon {
    color:var(--gold2);
    font-size:44px;
    line-height:1;
    margin-bottom:14px;
}

.stat h3 {
    font-family:'Cormorant Garamond', Georgia, serif;
    font-size:30px;
    line-height:1.08;
    margin-bottom:7px;
    color:#fff;
}

.stat p {
    font-size:15px;
    font-weight:600;
    color:#fff;
}

.stat small {
    color:var(--muted);
    font-size:13px;
}

.contact-row {
    display:grid;
    grid-template-columns:1.3fr 1fr 1.2fr .8fr;
    gap:22px;
    padding:34px 36px;
    background:#060b0e;
    border-bottom:1px solid var(--line);
}

.contact-row article {
    display:grid;
    grid-template-columns:42px 1fr;
    gap:14px;
    border-right:1px solid rgba(209,160,58,.22);
}

.contact-row article span {
    color:var(--gold2);
    font-size:32px;
}

.contact-row h4 {
    font-size:17px;
    margin-bottom:5px;
}

.contact-row p {
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}

.follow {
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:14px;
    border-right:0 !important;
}

.socials {
    display:flex;
    gap:10px;
}

.socials a {
    width:38px;
    height:38px;
    border:1px solid var(--gold);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--gold2);
    font-weight:900;
    text-decoration:none;
}

.content-section, .estimate-section {
    padding:70px 5%;
    background:#030303;
    border-top:1px solid var(--line);
}

.content-section.alt { background:#071016; }
.content-section.light { background:#f2efe8; color:#111; }

.eyebrow {
    color:var(--gold2);
    text-align:center;
    text-transform:uppercase;
    letter-spacing:3px;
    font-weight:800;
    margin-bottom:10px;
}

.content-section h1,
.estimate-section h1 {
    text-align:center;
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:clamp(38px,5vw,60px);
    margin-bottom:24px;
}

.section-text {
    max-width:920px;
    margin:0 auto;
    text-align:center;
    font-size:18px;
    line-height:1.7;
}

.cards {
    max-width:1120px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.cards article {
    padding:26px;
    border:1px solid var(--line);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(209,160,58,.08), rgba(0,0,0,.72));
}

.cards h3 {
    font-family:'Cormorant Garamond',Georgia,serif;
    font-size:28px;
    margin-bottom:10px;
}

.cards p { color:var(--muted); }
.content-section a, .section-text a { color:var(--gold2); font-weight:700; }

.form {
    max-width:980px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.form input, .form select, .form textarea {
    width:100%;
    padding:15px;
    border-radius:8px;
    border:1px solid rgba(209,160,58,.42);
    background:rgba(0,0,0,.72);
    color:white;
    font-family:inherit;
}

.form textarea {
    grid-column:1/-1;
    min-height:130px;
    resize:vertical;
}

.form button {
    grid-column:1/-1;
    min-height:52px;
    border:0;
    border-radius:7px;
    background:linear-gradient(135deg,#f2ca70,#d0a03a,#956917);
    color:white;
    text-transform:uppercase;
    font-weight:900;
    cursor:pointer;
}

.alert {
    max-width:980px;
    margin:0 auto 20px;
    padding:14px 18px;
    border:1px solid var(--line);
    border-radius:8px;
}

.alert.success { color:#bff7c7; }
.alert.error { color:#ffb5b5; }

.whatsapp-fixed {
    position:fixed;
    right:20px;
    bottom:20px;
    background:#25d366;
    color:white;
    padding:12px 18px;
    border-radius:999px;
    font-weight:900;
    text-decoration:none;
    z-index:99;
    box-shadow:0 15px 35px rgba(0,0,0,.45);
}

@media (max-width:900px) {
    .stats { grid-template-columns:repeat(2,1fr); }
    .contact-row { grid-template-columns:1fr 1fr; }
    .cards { grid-template-columns:1fr 1fr; }
}

@media (max-width:768px) {
    .page, .content-section, .estimate-section { width:100%; max-width:none; }
    .stats, .contact-row, .cards, .form { grid-template-columns:1fr; }
    .stat, .contact-row article { border-right:0; border-bottom:1px solid rgba(209,160,58,.22); padding-bottom:18px; }
    .form textarea, .form button { grid-column:auto; }
    .hotspot { min-height:24px; }
    .follow { justify-content:flex-start; }
    .whatsapp-fixed { right:14px; bottom:14px; padding:10px 14px; font-size:13px; }
}

/* V11 deploy-ready package */


/* V12 Services Gallery */
.services-gallery-section {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    background: #f6f3ee;
    color: #111;
    border-top: 1px solid rgba(209,160,58,.34);
}

.services-hero {
    padding: 70px 5% 54px;
    text-align: center;
    color: #fff;
    background:
        linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.82)),
        url("https://images.unsplash.com/photo-1618220179428-22790b461013?auto=format&fit=crop&w=1800&q=85") center/cover;
}

.services-hero h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1;
    margin-bottom: 18px;
}

.services-hero p {
    max-width: 780px;
    margin: 0 auto;
    color: rgba(255,255,255,.88);
    font-size: 17px;
}

.gallery-toolbar {
    padding: 24px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.toolbar-label {
    display: block;
    color: #c89125;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 3px;
}

.toolbar-actions {
    display: flex;
    gap: 10px;
}

.view-btn {
    border: 1px solid rgba(209,160,58,.55);
    background: #fff;
    color: #111;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

.view-btn.active,
.view-btn:hover {
    background: linear-gradient(135deg, #f2ca70, #d0a03a, #956917);
    color: #fff;
}

.project-gallery {
    padding: 28px 5%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.project-photo {
    border: 0;
    padding: 0;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0,0,0,.14);
    transition: transform .22s ease, box-shadow .22s ease;
}

.project-photo:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(0,0,0,.22);
}

.project-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.project-photo:hover img {
    transform: scale(1.05);
}

.gallery-note {
    margin: 8px 5% 42px;
    padding: 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, #05090c, #111);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(209,160,58,.35);
}

.note-icon {
    width: 54px;
    height: 54px;
    border: 1px solid var(--gold);
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: var(--gold2);
    font-size: 28px;
}

.gallery-note h3 {
    color: var(--gold2);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: Poppins, Arial, sans-serif;
    font-size: 16px;
    margin-bottom: 4px;
}

.gallery-note p {
    color: rgba(255,255,255,.82);
}

.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.lightbox.open {
    display: flex;
}

.lightbox figure {
    width: min(1100px, 86vw);
    margin: 0;
    text-align: center;
}

.lightbox img {
    max-width: 100%;
    max-height: 82vh;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.lightbox figcaption {
    margin-top: 12px;
    color: #fff;
    font-weight: 700;
}

.lightbox-close,
.lightbox-arrow {
    position: absolute;
    border: 0;
    background: rgba(255,255,255,.08);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 999px;
    font-size: 34px;
    cursor: pointer;
}

.lightbox-close {
    right: 24px;
    top: 22px;
}

.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.no-scroll { overflow: hidden; }

@media (max-width: 1100px) {
    .project-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .services-gallery-section { width: 100%; }
    .gallery-toolbar { align-items: flex-start; flex-direction: column; }
    .project-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .gallery-note { align-items: flex-start; flex-direction: column; }
    .lightbox { padding: 14px; }
    .lightbox figure { width: 92vw; }
    .lightbox-arrow { width: 42px; height: 42px; font-size: 28px; }
}