:root{
  --nav:#1a0f0f;
  --accent:#d4af37;
  --muted:#c9b37c;
  --light-blue:#e10600;
  --dark-blue:#000000;
  --footer:#140c0c;
  --container:1150px;
  --max-width:1150px;
  --radius:6px;
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: 'Open Sans', Arial, sans-serif;color:#071033}
.container{max-width:var(--container);margin:0 auto;padding:22px}

/* TOPBAR - top info */
.topbar{background:var(--nav);color:white}
.topbar-top{display:flex;justify-content:space-between;align-items:center;padding:18px 0}
.brand{display:flex;align-items:center;gap:14px}

/* LOGO: .brand-logo-img in your HTML — set to medium (48px) */
.brand-logo-img{
  width:50px;        /* MEDIUM SIZE */
  height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:8px;
  background:transparent; /* keep transparent so logo background shows through */
}

/* Ensure the actual image fits inside the box */
.brand-logo-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* Slightly smaller on small screens */
@media (max-width:640px){
  .brand-logo-img{
    width:42px;
    height:42px;
  }
}

.brand-text .b1{display:block;font-weight:800;letter-spacing:1px}
.brand-text .b2{display:block;font-size:13px;color:rgba(255,255,255,0.85);margin-top:2px}

/* top-right items */
.top-right{display:flex;gap:18px;align-items:center}
.top-icons{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.95)}

/* ---------- SOCIAL ICONS (HORIZONTAL + WHITE) ---------- */
.socials{
  display:flex;            /* horizontal layout */
  flex-direction:row;      /* ensure row direction */
  align-items:center;
  gap:10px;
  margin-left:8px;
}

.socials .social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  text-decoration:none;
  opacity:0.95;
}

.socials .social-link svg{
  width:20px;
  height:20px;
  fill: #ffffff;           /* icon color -> white */
  transition: transform .14s ease, opacity .14s ease;
  display:block;
}

.socials .social-link:hover svg{
  transform:translateY(-2px);
  opacity:1;
}

/* adjust icon sizing on small screens */
@media (max-width:640px){
  .socials .social-link{ width:22px; height:22px; }
  .socials .social-link svg{ width:18px; height:18px; }
}
/* ------------------------------------------------------- */

.socials span{margin-left:8px;opacity:0.85}

/* MAIN NAV */
.mainnav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-top:1px solid rgba(255,255,255,0.03)}
.mainnav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.mainnav a{color:white;text-decoration:none;padding:12px 8px;font-weight:700}
.mainnav li.active a{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:18px}
.vert-line{width:1px;height:40px;background:rgba(255,255,255,0.04)}
.phone{background:rgba(0,0,0,0.18);padding:10px 16px;border-radius:4px;font-weight:700}

/* INTRO */
.intro{padding:36px 0 18px}
.intro h1{font-family:'Montserrat',sans-serif;color:var(--accent);font-size:56px;margin:0 0 12px;font-weight:800}
.intro-body{display:flex;gap:28px;align-items:flex-start}
.intro-text{flex:1;font-size:18px;line-height:1.8;color:#071033}
.intro-text p{Margin:18px 0}

/* CALL BUTTON (right) */
.intro-side{width:320px;display:flex;align-items:flex-start;justify-content:flex-end}
.call-btn{display:inline-block;background:var(--accent);color:var(--dark-blue);padding:16px 22px;border-radius:8px;font-weight:800;text-decoration:none}
.call-btn:hover{opacity:0.95}

/* STATS BAND */
.stats{background:var(--nav);color:white;padding:48px 0;margin-top:8px}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:center}
.stat-item{padding:6px}
.stat-item .big{font-size:72px;font-weight:800;color:var(--light-blue)}
.stat-title{font-weight:700;margin-top:10px;font-size:18px}
.stat-sub{color:var(--muted);margin-top:12px}

/* POSTS GRID */
.posts{padding:48px 0}
.posts-title{text-align:center;font-family:'Montserrat',sans-serif;font-size:30px;margin-bottom:22px;color:var(--dark-blue)}
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.post{background:transparent}
.post .thumb{height:200px;overflow:hidden;border-radius:4px;position:relative}
.post .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post .date{position:relative;left:22px;margin-top:-42px;display:inline-block;padding:10px 16px;border-radius:4px;font-weight:800}
.badge-blue{background:#08183a;color:white}
.badge-blue-dark{background:#04102a;color:white}
.badge-gold{background:#b07a18;color:white}
.post h3{font-family:'Montserrat',sans-serif;text-align:center;font-size:20px;margin-top:20px;color:var(--dark-blue);line-height:1.3}

/* VIEW MORE */
.view-more-wrap{text-align:center;margin-top:30px}
.btn-view{background:var(--nav);color:white;padding:12px 26px;border-radius:8px;text-decoration:none;font-weight:700}

/* CTA band before footer */
.final-cta{display:flex;gap:28px;align-items:center;padding:44px 0}
.cta-left{flex:1;font-family:'Montserrat',sans-serif;font-size:20px;color:var(--dark-blue)}
.cta-right{width:320px;display:flex;justify-content:flex-end}
.call-btn-large{display:inline-block;background:var(--accent);color:var(--dark-blue);padding:18px 26px;border-radius:8px;font-weight:800;text-decoration:none}

/* FOOTER */
.site-footer{background:var(--footer);color:#d7e0e8;padding:44px 0;margin-top:28px}
.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-bottom:18px}
.footer-col h4{color:white;font-weight:800;margin-bottom:12px}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin:10px 0;color:rgba(255,255,255,0.85)}
.footer-col p{color:rgba(255,255,255,0.85)}
.copyright{padding:16px 0;color:rgba(255,255,255,0.6)}

/* Responsiveness */
@media (max-width:1000px){
  .posts-grid{grid-template-columns:repeat(2,1fr)}
  .stats-inner{grid-template-columns:repeat(2,1fr)}
  .intro h1{font-size:42px}
}
@media (max-width:640px){
  .container{padding:14px}
  .mainnav ul{display:none}
  .intro h1{font-size:28px}
  .intro-body{flex-direction:column}
  .intro-side{width:100%;justify-content:flex-start}
  .posts-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .stats-inner{grid-template-columns:1fr}
  .call-btn-large,.call-btn{width:100%;text-align:center}
}


/* ===== POSTS GRID OVERRIDES (append at end of your main CSS) ===== */

/* local variables to avoid interfering with global styles */
:root {
  --posts-accent: #d4af37;
  --posts-nav: #07173a;
  --posts-muted: #6b7280;
  --posts-radius: 6px;
}

/* grid layout for posts */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
  width: 100%;
}

/* responsive breakpoints */
@media (max-width: 992px) {
  .posts-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 640px) {
  .posts-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* card base - targets your existing .post class */
.post {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--posts-radius);
  overflow: visible;
  box-shadow: 0 1px 0 rgba(11,22,48,0.06);
  min-height: 100%;
}

/* image container - makes the badge positioned relative to the image */
.post .thumb {
  position: relative; /* IMPORTANT: makes badge position relative */
  width: 100%;
  height: 190px;      /* consistent card heights */
  overflow: hidden;
  border-top-left-radius: var(--posts-radius);
  border-top-right-radius: var(--posts-radius);
}

/* images crop consistently */
.post .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* date badge styling; your existing .badge-blue/.badge-gold classes remain usable */
.post .date {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(7,23,58,0.95);
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(7,23,58,0.12);
  z-index: 2;
}

/* ensure the <a> inside date is styled like text (keeps your anchor) */
.post .date a {
  color: inherit;
  text-decoration: none;
}

/* card body below image */
.post .card-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

/* small accent bar under thumbnail (like your example) */
.post .card-body::before {
  content: "";
  display: block;
  width: 36px;
  height: 6px;
  background: var(--posts-accent);
  border-radius: 4px;
  margin-bottom: 6px;
}

/* title link */
.post .card-body h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  color: var(--posts-nav);
  font-weight: 700;
}
.post .card-body h3 a {
  color: inherit;
  text-decoration: none;
}
.post .card-body h3 a:hover {
  text-decoration: underline;
}

/* limit title lines so cards remain tidy */
.post .card-body h3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* small safety override if there are rogue absolute rules earlier */
.post .date { position: absolute !important; }
.post .thumb { position: relative !important; }

/* ================= SERVICES DROPDOWN FIX ================= */

/* parent must be relative */
.services-menu {
  position: relative;
}

/* hide dropdown by default */
.services-dropdown {
  display: none !important;
  position: absolute;
  top: 100%;
  left: 0;
  background: #ffffff;
  min-width: 260px;
  padding: 8px 0;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  z-index: 9999;
}

/* show ONLY when hovering Services */
.services-menu:hover > .services-dropdown {
  display: block !important;
}

/* dropdown items */
.services-dropdown li {
  list-style: none;
}

.services-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  text-decoration: none;
  color: #071033;
  font-weight: 600;
  font-size: 14px;
}

/* hover effect */
.services-dropdown a:hover {
  background: #f4f4f4;
}

/* ========================================================= */