:root {
    --charcoal: #1c1c1c;
    --dark: #121212;
    --silver: #cfcfcf;
    --chrome: #e6e6e6;

    /* Silver-Gold Metallic (leans silver) */
    --accent: #cfc8ad;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

html, body {
    overflow-x: hidden;
}

body {
    background:var(--dark);
    color:var(--silver);
}

/* ================= HEADER ================= */

.main-header {
    background: url("sbj-header-texture.jpg");
    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px 8%;
    border-bottom: 2px solid var(--accent);
    position: relative;
}
.main-nav {
    position: absolute;
    top: 100%;          /* 👈 THIS is the key */
    left: 0;
    width: 100%;

    background: url("sbj-header-texture.jpg");
    background-size: cover;
    background-position: center;
    background-color: rgba(0,0,0,0.9);
    background-blend-mode: overlay;

    flex-direction: column;
    align-items: center;
    gap: 18px;

    padding: 30px 0;

    display: none;
    z-index: 2500;
}
/* Logo Centered */
.logo img {
    height: 75px;
}

/* Always show hamburger */
.menu-toggle {
    position: absolute;
    right: 8%;
    font-size: 30px;
    color: var(--accent);
    cursor: pointer;
    z-index: 3000;
}

/* Hide nav by default */


/* Show when active */
.main-nav.active {
    display: flex;
}

.main-nav a {
    width: 85%;
    text-align: center;
    padding: 14px 0;
    border-radius: 35px;

    background: linear-gradient(
        145deg,
        #f5f5f5,
        #d9d9d9,
        #bdbdbd,
        #f0f0f0
    );

    color: #111;
    font-weight: bold;
    text-decoration: none;
    transition: all 0.3s ease;
}

.main-nav a:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(184,167,106,0.5);
}
/* ================= HERO ================= */

.hero {
    text-align:center;
    padding:100px 10%;
}

.hero h1 {
    font-size:48px;
    color:var(--chrome);
    margin-bottom:20px;
}

.hero p {
    font-size:20px;
    margin-bottom:30px;
}

/* ================= BUTTON ================= */

/* ================= DYNAMIC CHROME BUTTON ================= */

.btn {
    padding: 14px 36px;
    border-radius: 45px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.5px;
    border: none;
    margin-top: 25px;
    margin-bottom: 35px;

    /* Stronger chrome contrast */
    background: linear-gradient(
        120deg,
        #ffffff 0%,
        #e6e6e6 15%,
        #bdbdbd 30%,
        #f5f5f5 45%,
        #ffffff 55%,
        #d8c78a 70%,
        #b8a76a 85%,
        #ffffff 100%
    );

    background-size: 400% 400%;
    animation: chromeFlow 4s linear infinite;

    color: #111;
    transition: all 0.3s ease;
}

/* Faster, more visible movement */
@keyframes chromeFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Stronger glow on hover */
.btn:hover {
    transform: scale(1.08);
    box-shadow:
        0 0 10px rgba(255,255,255,0.6),
        0 0 25px rgba(184,167,106,0.7),
        0 0 45px rgba(184,167,106,0.5);
}

/* ================= SERVICES ================= */

.services {
    padding:80px 8%;
}

.services h2 {
    text-align:center;
    margin-bottom:50px;
    font-size:36px;
    color:var(--chrome);
}

.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:25px;
}

.card {
    background:var(--charcoal);
    padding:25px;
    border-radius:10px;
    transition:0.3s ease;
    border:1px solid #333;
    cursor:pointer;
}

.card:hover {
    transform:translateY(-8px);
    border:1px solid var(--accent);
    box-shadow:0 0 15px rgba(200,190,150,0.3);
}

/* ================= PAGE SECTIONS ================= */

.page-section {
    padding:80px 8%;
}

.page-section img {
    max-width:100%;
    height:auto;
    display:block;
    border-radius:12px;
    margin:30px 0;
}

.page-section p {
    margin:20px 0;
    line-height:1.6;
}

/* ================= MODAL ================= */

.modal {
    display:none;
    position:fixed;
    z-index:4000;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.9);
}

.modal-content {
    margin:auto;
    display:block;
    width:85%;
    max-width:900px;
    border-radius:12px;
}

.close {
    position:absolute;
    top:30px;
    right:40px;
    color:white;
    font-size:40px;
    font-weight:bold;
    cursor:pointer;
}
.map-container {
    width: 100%;
    height: 300px;
    margin-top: 30px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* ================= COLLAGE ================= */

.services-collage {
    text-align:center;
    padding:60px 10%;
}

.services-collage img {
    width:100%;
    max-width:750px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
    transition:transform 0.4s ease;
}

.services-collage img:hover {
    transform:scale(1.03);
}
.contact-info a {
    color: var(--silver);
    text-decoration: none;
    font-weight: 500;
    transition: 0.3s ease;
}

.contact-info a:hover {
    color: var(--accent); /* or chrome-gold tone */
}
/* ================= FOOTER ================= */

footer {
    background:var(--charcoal);
    padding:20px;
    text-align:center;
    border-top:1px solid var(--accent);
}

footer a {
    color:var(--silver);
    text-decoration:none;
    transition:0.3s;
}

footer a:hover {
    color:var(--accent);
}

/* ================= FORM ================= */

form {
    display:flex;
    flex-direction:column;
    gap:15px;
    max-width:500px;
}

input, textarea {
    padding:10px;
    border-radius:5px;
    border:1px solid #444;
    background:#222;
    color:var(--silver);
}