/* JML site-specific styles based on JML_Temp design */

:root {
   --jml-black: #0b0b0b;
   --jml-gold: #c9a24a;
   --jml-dark: #111111;
   --jml-text: #eaeaea;
   --jml-muted: #b7b7b7;
}

body {
   background: var(--jml-black);
   color: var(--jml-text);
   line-height: 1.5;
   font-family: Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: bold;
}

.jml-landing {
   min-height: 100vh;
   background: var(--jml-black);
}

.jml-header {
   background: linear-gradient(135deg, #000000, #111111);
   padding: 40px 20px;
   text-align: center;
   border-bottom: 1px solid rgba(201, 162, 74, 0.3);
}

.jml-main-logo {
   width: min(450px, 100%);
   margin: 0 auto 15px;
   display: block;
}

.jml-brand-row {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 16px;
}

.jml-brand-text {
   text-align: left;
}

.jml-brand-text h1 {
   color: var(--jml-gold);
   letter-spacing: 2px;
   font-size: 28px;
   margin: 0;
}

.jml-brand-badge {
   width: 70px;
   height: 70px;
   object-fit: cover;
   border-radius: 50%;
   border: 1px solid rgba(201, 162, 74, 0.4);
}

.jml-tagline {
   color: var(--jml-muted);
   margin-top: 8px;
}

.jml-hero {
   display: flex;
   justify-content: center;
   padding: 30px;
}

.jml-hero img {
   width: 100%;
   max-width: 700px;
   border-radius: 12px;
   border: 1px solid rgba(201, 162, 74, 0.25);
}

.jml-services {
   padding: 40px 20px;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 20px;
}

.jml-card {
   background: #121212;
   border: 1px solid rgba(201, 162, 74, 0.25);
   padding: 20px;
   border-radius: 10px;
}

.jml-card h2 {
   color: var(--jml-gold);
   font-size: 20px;
   margin-bottom: 10px;
}

.jml-card ul {
   list-style: none;
   margin: 0;
   padding: 0;
   color: var(--jml-muted);
}

.jml-card li {
   margin-bottom: 6px;
}

.jml-cta {
   text-align: center;
   padding: 40px 20px;
   border-top: 1px solid rgba(201, 162, 74, 0.3);
}

.jml-cta h2 {
   color: var(--jml-gold);
   margin-bottom: 10px;
}

.jml-cta p {
   color: var(--jml-muted);
}

.jml-cta-buttons {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 12px;
   margin-top: 14px;
}

.jml-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 180px;
   padding: 12px 20px;
   border: 1px solid var(--jml-gold);
   color: var(--jml-gold);
   text-decoration: none;
   border-radius: 6px;
}

.jml-btn-facebook {
   border-color: #1877f2;
   color: #1877f2;
}

.jml-footer {
   text-align: center;
   padding: 20px;
   font-size: 14px;
   color: var(--jml-muted);
   border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.jml-footer-socials {
   display: flex;
   justify-content: center;
   gap: 12px;
   margin-top: 14px;
   flex-wrap: wrap;
}

.jml-social-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   border: 1px solid rgba(212, 175, 55, 0.45);
   border-radius: 999px;
   color: var(--jml-gold);
   text-decoration: none;
   background: rgba(255, 255, 255, 0.03);
}

.jml-social-link svg {
   width: 18px;
   height: 18px;
}

.jml-social-link:hover,
.jml-social-link:focus-visible {
   color: #ffffff;
   border-color: var(--jml-gold);
   background: rgba(212, 175, 55, 0.15);
}

@media (max-width: 640px) {
   .jml-brand-row {
      flex-direction: column;
      gap: 10px;
   }

   .jml-brand-text {
      text-align: center;
   }
}