/* ============================================
   BGTS Global Styles
   ============================================ */
.bgts-wrapper *,
.bgts-header-wrapper * {
    box-sizing: border-box;
}

/* Gold gradient utility */
.bgts-gold-gradient { background: linear-gradient(135deg, #C5A059 0%, #D4AF37 100%); }
.bgts-text-gold { color: #C5A059; }
.bgts-bg-navy  { background-color: #0F172A; }

/* Reveal animation */
.bgts-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.bgts-reveal.bgts-active {
    opacity: 1;
    transform: translateY(0);
}

/* Ticker */
@keyframes bgts-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.bgts-ticker-track {
    display: flex;
    width: max-content;
    animation: bgts-ticker 40s linear infinite;
}
.bgts-ticker-track:hover { animation-play-state: paused; }

/* Container */
.bgts-container-xl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ============================================
   HEADER
   ============================================ */
.bgts-navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 9999;
    padding: 1rem 2rem;
    transition: all 0.3s ease-in-out;
    background-color: transparent;
}
.bgts-navbar.bgts-scrolled {
    background-color: #ffffff;
    padding: 0.5rem 2rem;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,.1);
}
.bgts-navbar .bgts-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bgts-logo img { max-height: 150px; width: auto; transition: all .3s ease; }
.bgts-navbar.bgts-scrolled .bgts-logo img { max-height: 85px; }

/* Desktop links */
.bgts-nav-links { display: none; }
.bgts-nav-links a {
    margin-left: 2rem;
    font-size: .875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #e2e8f0;
    transition: color .3s ease;
    text-decoration: none;
}
.bgts-nav-links a:hover { color: #f59e0b; }
.bgts-navbar.bgts-scrolled .bgts-nav-links a { color: #334155; }
.bgts-navbar.bgts-scrolled .bgts-nav-links a:hover { color: #f59e0b; }

/* Mobile toggle */
.bgts-mobile-toggle {
    display: block;
    background: none; border: none; cursor: pointer;
    color: #ffffff; transition: color .3s ease; padding: 5px;
}
.bgts-navbar.bgts-scrolled .bgts-mobile-toggle { color: #0F172A; }

/* Mobile menu */
.bgts-mobile-menu {
    display: block; overflow: hidden; height: 0;
    background: #ffffff; width: 100%;
    position: absolute; top: 100%; left: 0;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.1);
    transition: height .4s cubic-bezier(.16,1,.3,1);
}
.bgts-mobile-menu.bgts-open { height: 280px; }
.bgts-mobile-links { display: flex; flex-direction: column; padding: 1.5rem 2rem; }
.bgts-mobile-links a {
    padding: .75rem 0; color: #0F172A; font-weight: 500;
    border-bottom: 1px solid #f1f5f9; transition: color .2s; text-decoration: none;
}
.bgts-mobile-links a:last-child { border-bottom: none; }
.bgts-mobile-links a:hover { color: #f59e0b; }

@media (min-width: 768px) {
    .bgts-mobile-toggle { display: none; }
    .bgts-mobile-menu   { display: none !important; }
    .bgts-nav-links     { display: flex; }
}

/* ============================================
   HERO
   ============================================ */
.bgts-hero {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.bgts-hero-bg {
    position: absolute; inset: 0; z-index: 0;
}
.bgts-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.bgts-hero-overlay { position: absolute; inset: 0; }
.bgts-hero-content { position: relative; z-index: 10; }

/* ============================================
   STATS BAR
   ============================================ */
.bgts-stats-bar {
    background: linear-gradient(135deg, #C5A059 0%, #D4AF37 100%);
    padding: 3rem 0;
    position: relative; z-index: 20;
}
.bgts-stats-grid {
    display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; text-align: center;
}
@media (min-width: 768px) { .bgts-stats-grid { grid-template-columns: repeat(4,1fr); } }
.bgts-stat-item h3 { font-size: 3rem; font-weight: 700; color: #0F172A; margin: 0 0 .5rem; }
.bgts-stat-item p  { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #1e293b; font-weight: 500; margin: 0; }

/* ============================================
   SECTION HEADING UTILITY
   ============================================ */
.bgts-section-tag {
    display: inline-block; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; color: #f59e0b; margin-bottom: .5rem;
}
.bgts-section-h2 { font-size: 2.25rem; font-weight: 700; color: #0F172A; margin: 0 0 1rem; }
.bgts-section-h2.light { color: #ffffff; }

/* ============================================
   PROJECT CARDS
   ============================================ */
.bgts-project-card {
    background: #fff; border-radius: .75rem; overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,.07);
    transition: box-shadow .3s, transform .3s;
    display: flex; flex-direction: column;
}
.bgts-project-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,.15); transform: translateY(-4px); }
.bgts-project-card .bgts-card-img { position: relative; overflow: hidden; }
.bgts-project-card .bgts-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.bgts-project-card:hover .bgts-card-img img { transform: scale(1.1); }
.bgts-project-card .bgts-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.bgts-project-card h3 { font-size: 1.125rem; font-weight: 700; color: #0F172A; margin: 0 0 .75rem; }
.bgts-project-card p  { font-size: .875rem; color: #475569; flex: 1; }
.bgts-card-meta { display: flex; justify-content: space-between; font-size: .75rem; color: #64748b; font-weight: 500; border-top: 1px solid #f1f5f9; padding-top: 1rem; margin-top: 1rem; }
.bgts-card-meta span { display: flex; align-items: center; gap: .35rem; }
.bgts-card-num {
    position: absolute; top: 1rem; right: 1rem; z-index: 10;
    background: rgba(255,255,255,.95); font-size: .75rem; font-weight: 700;
    padding: .25rem .75rem; border-radius: .375rem;
}

/* Hero card style (home page featured grid) */
.bgts-hero-card { position: relative; overflow: hidden; border-radius: .5rem; cursor: pointer; }
.bgts-hero-card img { width: 100%; object-fit: cover; transition: transform .7s; }
.bgts-hero-card:hover img { transform: scale(1.1); }
.bgts-hero-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #0F172A, rgba(15,23,42,.4), transparent);
    opacity: .9; transition: opacity .3s;
}
.bgts-hero-card:hover .bgts-hero-card-overlay { opacity: 1; }
.bgts-hero-card-info {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 2rem; transform: translateY(1rem); transition: transform .3s;
}
.bgts-hero-card:hover .bgts-hero-card-info { transform: translateY(0); }

/* ============================================
   SERVICE CARDS
   ============================================ */
.bgts-service-card {
    background: #fff; border-radius: .5rem; overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,.07);
    transition: transform .3s;
}
.bgts-service-card:hover { transform: translateY(-8px); }
.bgts-service-card .bgts-svc-img { height: 12rem; overflow: hidden; position: relative; }
.bgts-service-card .bgts-svc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.bgts-service-card:hover .bgts-svc-img img { transform: scale(1.1); }
.bgts-service-card .bgts-svc-body { padding: 2rem; position: relative; }
.bgts-svc-icon {
    position: absolute; top: -2rem; right: 2rem;
    width: 4rem; height: 4rem;
    background: linear-gradient(135deg, #C5A059 0%, #D4AF37 100%);
    border-radius: .5rem; display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.bgts-svc-icon svg { width: 2rem; height: 2rem; }

/* ============================================
   VALUE CARDS / WHY BGTS CARDS
   ============================================ */
.bgts-value-card {
    background: #fff; padding: 2rem; border-radius: .5rem;
    box-shadow: 0 4px 15px rgba(0,0,0,.08); border-top: 4px solid #f59e0b;
    transition: box-shadow .3s;
}
.bgts-value-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.12); }

.bgts-why-card {
    padding: 1.5rem; background: #f8fafc; border-radius: .5rem;
    border: 1px solid #e2e8f0; transition: background .3s, box-shadow .3s;
}
.bgts-why-card:hover { background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.1); }
.bgts-why-dot { width: .5rem; height: .5rem; background: #f59e0b; border-radius: 50%; margin-bottom: 1rem; }

/* ============================================
   FOOTER
   ============================================ */
.bgts-footer { background: #020617; color: #94a3b8; padding: 3rem 0; border-top: 1px solid #0f172a; }
.bgts-footer-inner { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
@media (min-width: 768px) { .bgts-footer-inner { flex-direction: row; justify-content: space-between; align-items: center; } }
.bgts-footer-links { display: flex; gap: 1.5rem; font-size: .875rem; font-weight: 500; }
.bgts-footer-links a { color: #94a3b8; text-decoration: none; transition: color .3s; }
.bgts-footer-links a:hover { color: #f59e0b; }
.bgts-footer-copy { text-align: center; font-size: .75rem; border-top: 1px solid #0f172a; padding-top: 2rem; margin-top: 2rem; }

/* ============================================
   CONTACT
   ============================================ */
.bgts-office-card {
    background: #fff; padding: 2rem; border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.bgts-office-card.bgts-gold-top  { border-top: 4px solid #f59e0b; }
.bgts-office-card.bgts-navy-top  { border-top: 4px solid #0F172A; }
.bgts-contact-form-wrap { background: #fff; border-radius: 1rem; box-shadow: 0 4px 20px rgba(0,0,0,.08); overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 768px) { .bgts-contact-form-wrap { flex-direction: row; } }
.bgts-form-side { padding: 2.5rem; flex: 0 0 60%; }
.bgts-info-side { background: #0F172A; padding: 2.5rem; color: #fff; flex: 0 0 40%; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; }
.bgts-form-input {
    width: 100%; background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: .25rem; padding: .75rem; color: #334155; font-size: .875rem;
    transition: border-color .3s; outline: none;
}
.bgts-form-input:focus { border-color: #f59e0b; }
.bgts-form-label { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: .5rem; letter-spacing: .05em; }
.bgts-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #C5A059 0%, #D4AF37 100%);
    color: #0F172A; font-weight: 700; text-transform: uppercase;
    padding: 1rem 2rem; border: none; border-radius: .25rem; cursor: pointer;
    transition: box-shadow .3s, transform .3s; font-size: .875rem; letter-spacing: .05em;
}
.bgts-submit-btn:hover { box-shadow: 0 8px 20px rgba(0,0,0,.2); transform: translateY(-2px); }

/* ============================================
   WORKFLOW STEPS
   ============================================ */
.bgts-workflow-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; text-align: center; position: relative; }
@media (min-width: 768px) { .bgts-workflow-grid { grid-template-columns: repeat(4,1fr); } }
.bgts-workflow-step-num {
    width: 6rem; height: 6rem; margin: 0 auto 1.5rem;
    background: #1e293b; border: 4px solid #334155; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 700; color: #f59e0b;
    transition: border-color .3s, background .3s;
}
.bgts-workflow-step:hover .bgts-workflow-step-num { border-color: #f59e0b; background: #334155; }

/* ============================================
   CTA BANNER
   ============================================ */
.bgts-cta-banner { background: linear-gradient(135deg, #C5A059 0%, #D4AF37 100%); padding: 5rem 0; text-align: center; }
.bgts-cta-btn-dark { background: #0F172A; color: #fff; padding: 1rem 2rem; border-radius: .25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; display: inline-block; transition: background .3s; }
.bgts-cta-btn-dark:hover { background: #1e293b; }
.bgts-cta-btn-outline { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.4); color: #fff; padding: 1rem 2rem; border-radius: .25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; text-decoration: none; display: inline-block; transition: background .3s, color .3s; }
.bgts-cta-btn-outline:hover { background: #fff; color: #d97706; }

/* ============================================
   PAGE HERO (inner pages)
   ============================================ */
.bgts-page-hero { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.bgts-page-hero-bg { position: absolute; inset: 0; }
.bgts-page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.bgts-page-hero-overlay { position: absolute; inset: 0; }
.bgts-page-hero-content { position: relative; z-index: 10; text-align: center; max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }

/* ============================================
   ABOUT INTRO
   ============================================ */
.bgts-about-stat-box { background: #f8fafc; padding: 1.5rem; border-radius: .5rem; border-left: 4px solid #f59e0b; }

/* ============================================
   LEADERSHIP
   ============================================ */
.bgts-leader-avatar { width: 12rem; height: 12rem; border-radius: 50%; overflow: hidden; border: 4px solid rgba(245,158,11,.2); transition: border-color .3s; display: inline-block; }
.bgts-leader-card:hover .bgts-leader-avatar { border-color: #f59e0b; }

/* ============================================
   SUSTAINABILITY
   ============================================ */
.bgts-sustain-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: #cbd5e1; }
.bgts-sustain-list li svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: #4ade80; }

/* ============================================
   SERVICE DETAIL (services page)
   ============================================ */
.bgts-svc-detail-section { padding: 5rem 0; }
.bgts-svc-detail-img { position: relative; overflow: hidden; border-radius: .5rem; box-shadow: 0 20px 40px rgba(0,0,0,.12); }
.bgts-svc-detail-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.bgts-svc-detail-section:hover .bgts-svc-detail-img img { transform: scale(1.05); }
.bgts-svc-checklist { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .bgts-svc-checklist { grid-template-columns: 1fr 1fr; } }
.bgts-svc-checklist-item { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; font-weight: 500; color: #334155; }
.bgts-svc-checklist-item svg { width: 1.25rem; height: 1.25rem; color: #22c55e; flex-shrink: 0; margin-top: 1px; }

/* ============================================
   CLIENTS BAR
   ============================================ */
.bgts-clients-bar { padding: 4rem 0; background: #fff; border-bottom: 1px solid #f1f5f9; text-align: center; overflow: hidden; }
.bgts-clients-scroll { overflow: hidden; position: relative; }

/* ============================================
   Responsive grids
   ============================================ */
.bgts-grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.bgts-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.bgts-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (min-width: 768px)  { .bgts-grid-2 { grid-template-columns: 1fr 1fr; } .bgts-grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .bgts-grid-2 { grid-template-columns: 1fr 1fr; } .bgts-grid-3 { grid-template-columns: repeat(3,1fr); } .bgts-grid-4 { grid-template-columns: repeat(4,1fr); } }