:root{
      /* tune these if you change paddings */
      --topbar-h: 36px;          /* approx height on desktop */
      --navbar-h: 72px;          /* approx height on desktop */
    }

    /* Fixed header wrapper */
    .site-header{
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 1030;             /* above page content */
    }

    /* Load Orbitron from Google (CSS import) */

/* Global heading font (Orbitron) */
html, body{
font-family: "Inter", sans-serif;  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 1) Guard against sideways scroll globally (safe) */
html, body { overflow-x: clip; }     

/* Apply to all headings + common title classes */
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,
.navbar-brand, .card-title {
  font-family: "Orbitron", sans-serif !important;
  letter-spacing: .06em;       /* tweak tracking if needed */
  font-weight: 700;            /* adjust per design (400–900) */
}


/* Base */
.topbar { background:#7a7a7a; color:#fff; }
.topbar a { color:#fff; text-decoration:none; }
.tb-item { display:inline-flex; align-items:center; gap:.45rem; }
.tb-item i { flex:0 0 auto; font-size:1rem; }
.tb-text { display:inline-block; min-width:0; } /* min-width:0 enables truncation inside flex */

/* Mobile: two items on first row, email below; tighter spacing & smaller font */
@media (max-width: 575.98px){
  .topbar { font-size:.85rem; padding:.35rem 0; }
  

  /* Make flex children allow ellipsis */
  .tb-item { width:100%; }
  .tb-text {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width: 100%;
    vertical-align: middle;
  }

  /* Hide "Call:" to save space on tiny screens */
  .xs-hide { display:none; }
}

/* ≥ md: normal three columns with tidy widths */
@media (min-width: 768px){
  .tb-item { width:auto; }
  .tb-text { max-width: 32ch; } /* keep long strings neat */
}

/* Optional: icon contrast */
.topbar .bi { opacity:.9; }




/* Navbar (black) */
.main-nav{ background:#000; }
.main-nav .nav-link{ color:#cfcfcf; font-weight:500; }
.main-nav .nav-link:hover,
.main-nav .nav-link.active{ color:#fff; }

/* Use our own caret (hide Bootstrap's) */
.main-nav .dropdown-toggle::after{ display:none; }

/* Caret base */
.nav-caret{
  transition: transform .2s ease;
  font-size: .9rem;
}

/* Rotate caret when dropdown is open via click/keyboard */
.navbar .dropdown.show .nav-caret,
.navbar .dropdown-toggle[aria-expanded="true"] .nav-caret{
  transform: rotate(180deg);
}

/* Desktop: open on hover + rotate caret */
@media (min-width: 992px){
  .navbar .dropdown:hover .dropdown-menu{
    display:block;
    margin-top:0; /* prevents jump */
  }
  .navbar .dropdown:hover .nav-caret{
    transform: rotate(180deg);
  }
}

/* Dark dropdown styling to match navbar */
.main-nav .dropdown-menu{
  background:#111;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.main-nav .dropdown-item{ color:#cfcfcf; }
.main-nav .dropdown-item:hover{
  color:#fff;
  background:rgba(255,255,255,.06);
}


    /* Make room for the fixed header */
    body{
      padding-top: calc(var(--topbar-h) + var(--navbar-h));
    }
    
    @media (max-width: 575.98px){
  .topbar{ display:none !important; }   /* hide topbar */
            
}

    /* Responsive tweaks */
    @media (max-width: 991.98px){     /* < lg */
      :root{ --navbar-h: 64px; }
      .topbar{ font-size:.85rem; }
      .brand-img{ height:30px; }
    }
    @media (max-width: 575.98px){     /* < sm */
      :root{ --topbar-h: auto; }      /* allow multi-line stack */
      body{ padding-top: calc(52px + var(--navbar-h)); } /* room for stacked topbar */
      .topbar .row > div{ padding-top:.25rem; padding-bottom:.25rem; }
    }


    /* more space between nav links (desktop) */
@media (min-width: 992px){
  .main-nav .navbar-nav{
    gap: 2rem;            /* tweak: 1.5rem–3rem as you like */
  }
}
@media (min-width: 992px){
  .main-nav .nav-link{ padding: .5rem 1rem; }  /* L/R space */
}
@media (min-width: 992px){
  .main-nav .navbar-nav{ gap: 1.25rem; }
  .main-nav .nav-link{ padding: .5rem .85rem; }
}

:root{
--bg:#ffffff; /* page background */
--ink:#0b0f14; /* primary text / buttons */
--muted:#667085; /* secondary text */
--line:#e7eaf0; /* borders */
--card:#f9fafb; /* subtle card bg */
--ring:#0b0f1420; /* focus ring */
}


html, body{ background:var(--bg); color:var(--ink); }
body{ font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }


/* ---------- Utilities ---------- */
.container-narrow{ max-width: 1040px; }
.section{ padding: clamp(48px, 8vw, 96px) 0; }
.eyebrow{ letter-spacing:.22em; text-transform:uppercase; font-weight:700; font-size:.78rem; color:var(--muted); }
.section-title{ font-weight:800; line-height:1.1; }
.lead-lg{ font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); color:var(--muted); }


/* ---------- Buttons ---------- */
.btn-black{ background:#000; color:#fff; border-color:#000; }
.btn-black:hover{ background:#111; border-color:#111; color:#fff; }
.btn-outline-black{ border-color:#000; color:#000; }
.btn-outline-black:hover{ background:#000; color:#fff; }


/* ---------- Hero ---------- */
.hero-wrap{ position:relative; isolation:isolate; }
.hero-art{ position:absolute; inset:auto 0 -80px 0; height:200px; background:radial-gradient(40% 60% at 50% 100%, #00000010, transparent 60%); pointer-events:none; }
.hero-image{ border-radius:20px; overflow:hidden; box-shadow: 0 12px 40px #0b0f1414; }
.hero-badge{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:0 10px 30px #0b0f1412; }


/* ---------- Feature Cards ---------- */
.service-card{ background: linear-gradient(#fff, #fff) padding-box, linear-gradient(180deg, #00000020, transparent) border-box; border:1px solid var(--line); border-radius:18px; height:100%; transition: transform .25s ease, box-shadow .25s ease; }
.service-card:hover{ transform: translateY(-3px); box-shadow:0 16px 48px #0b0f1416; }
.icon-badge{ width:52px; height:52px; border-radius:12px; display:grid; place-content:center; background:#0b0f140a; color:#000; font-size:1.3rem; }


/* ---------- Why Us ---------- */
.why-item{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px dashed var(--line); }
.why-item:last-child{ border-bottom:0; }


/* ---------- Process ---------- */
.step{ position:relative; padding-left:64px; }
.step:not(:last-child){ margin-bottom:26px; }
.step-index{ position:absolute; left:0; top:0; width:44px; height:44px; border-radius:12px; background:#000; color:#fff; display:grid; place-content:center; font-weight:700; }


/* ---------- Case Tiles ---------- */
.tile{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; transition:transform .25s ease, box-shadow .25s ease; height:100%; }
.tile img{ height:180px; object-fit:cover; width:100%; }
.tile:hover{ transform: translateY(-4px); box-shadow:0 10px 30px #0b0f1412; }


/* ---------- Pricing ---------- */
.price-card{ border:1px solid var(--line); border-radius:18px; background:#fff; transition: transform .25s ease, box-shadow .25s ease; height:100%; }
.price-card:hover{ transform: translateY(-4px); box-shadow:0 12px 36px #0b0f1412; }
.price-bullet{ display:flex; gap:10px; align-items:flex-start; margin:.4rem 0; }


/* ---------- Testimonials ---------- */
.quote{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }


/* ---------- Contact ---------- */
.form-control:focus{ box-shadow: 0 0 0 .20rem var(--ring); border-color:#000; }
.contact-card{ border:1px solid var(--line); border-radius:18px; }


/* ---------- FAQ ---------- */
.accordion-button:not(.collapsed){ background:#fafafa; color:#000; }
.site-footer{
  background:#000;
  color:#fff;
}
.footer-logo{ height: 100px; object-fit:contain; }

/* menu with separators */
.footer-menu li{
  position:relative;
  padding: .25rem 0;
}
.footer-menu li + li{ margin-left:1rem; padding-left:1rem; }
.footer-menu li + li::before{
  content:"|";
  position:absolute; left:0; top:0; bottom:0;
  margin:auto 0; height:1em; line-height:1;
  color:rgba(255,255,255,.35);
}
.footer-menu a{
  color:#fff; opacity:.85; text-decoration:none; font-weight:500;
}
.footer-menu a:hover{ opacity:1; }

/* socials */
.social-circle{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  color:#fff; opacity:.9;
}
.social-circle:hover{ background:#fff; color:#000; }

/* legal */
.footer-legal a{
  color:#fff; opacity:.75; text-decoration:none;
}
.footer-legal a:hover{ opacity:1; }

/* responsive tweaks */
@media (max-width: 575.98px){
  .footer-menu{ justify-content:center; gap:.25rem .5rem; }
  .footer-menu li + li{ margin-left:.5rem; padding-left:.75rem; }
  .social-circle{ width:32px; height:32px; }
}