: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;
}

/* 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; }
}
/* ====== HERO BASE (IMAGE VERSION) ====== */
.hero-owl{
  position: relative;
  background:#000;
  overflow: hidden; /* prevent peeking while sliding */
}

.hero-carousel .hero-slide{
  position: relative;
  min-height: 90vh;                /* a bit taller for desktop */
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Real media inside each slide */
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-img{
  width:100%; height:100%;
  object-fit: cover;               /* default: fill like bg cover */
  object-position: center center;
}

/* (Optional) no-crop variant for specific slides */
.hero-carousel .hero-slide.hero--contain .hero-img{
  object-fit: contain;
  background:#000;                 /* letterbox color */
}

/* Dim layer + bottom gradient (now above the image) */
.hero-carousel .hero-slide::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  z-index: 1;
}
.hero-carousel .hero-slide::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:240px;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 100%);
  pointer-events:none;
  z-index: 1;
}

.hero-caption{
  position: relative;
  z-index: 2;                        /* above overlays */
  text-align: left;
}

/* Furore-like title */
.hero-title{
  margin: 0 0 .6rem 0;
  line-height: 1.05;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hero-copy{ opacity: .95; }

/* Buttons */
.btn-pill{ border-radius: 999px; }

/* ====== OWL DOTS OVER SLIDE ====== */
.hero-owl .owl-dots{
  position: absolute;
  left:0; right:0;
  bottom: 90px;
  display: flex; justify-content: center; gap: 10px;
  z-index: 3;
}
.hero-owl .owl-dot span{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.6);
  transition: transform .2s ease, background .2s ease;
}
.hero-owl .owl-dot.active span{
  background:#fff; transform: scale(1.15);
}

/* ====== FIX DESKTOP “BLACK BARS” (Owl stage padding/margins) ====== */
.hero-owl .owl-stage-outer{ padding-left:0 !important; padding-right:0 !important; }
.hero-owl .owl-stage{ margin-left:0 !important; margin-right:0 !important; }
.hero-owl .owl-item{ margin:0 !important; }
/* Ensure the carousel chain is truly full-width */
.hero-owl,
.hero-owl .owl-carousel,
.hero-owl .owl-stage-outer,
.hero-owl .owl-stage,
.hero-owl .owl-item{ width:100%; }

/* ====== RESPONSIVE (CLEANED + MOBILE FULL-BLEED) ====== */
@media (max-width: 991.98px){
  .hero-carousel .hero-slide{ min-height: 78vh; }
  .hero-owl .owl-dots{ bottom: 70px; }
}

/* Phones: full-bleed hero, no letterboxing */
@media (max-width: 575.98px){
  .hero-carousel .hero-slide{ min-height: 100svh; }
  .hero-title{ font-size: clamp(28px, 9vw, 40px); }
  .hero-owl .owl-dots{ bottom: 56px; }
}

/* Very small phones: reserve space for dots, tighten copy/buttons */
@media (max-width: 400px){
  .hero-caption{
    padding-top:  calc(64px + 8px + env(safe-area-inset-top));
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  .hero-owl .owl-dots{
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
  /* If you prefer dots under the slider, you can switch to:
  .hero-owl{ padding-bottom: 24px; }
  .hero-owl .owl-dots{ position: static; margin-top: 8px; } */

  .hero-caption .mt-5{ margin-top: 0.75rem !important; }
  .hero-title{ font-size: clamp(24px, 8vw, 34px); line-height: 1.1; }
  .hero-copy { font-size: .95rem; }
  .hero-caption .btn{ padding: .45rem .9rem; font-size: .95rem; }
  .hero-caption .d-flex.gap-3{ gap: .5rem !important; }
}

/* Short devices: slightly reduce top padding */
@media (max-width: 400px) and (max-height: 740px){
  .hero-caption{ padding-top: calc(56px + 8px + env(safe-area-inset-top)); }
}

/* --- Display font styling (keep single copy) --- */
.furore-like{
  text-transform: uppercase;
  letter-spacing: .04em;   /* was .06em */
}

/* Eyebrow label */
.eyebrow{
  color:#9aa3ad;
  font-weight:500;
  letter-spacing:.08em;
}

/* About title: allow wrapping by default */
.about-title{
  line-height:1.05;
  letter-spacing:.035em;   /* slightly tighter so it fits easier */
  white-space: normal;
  overflow-wrap: anywhere; /* safety if a long word sneaks in */
}

/* Only force one line on very wide screens (>=1400px).
   Remove any .no-wrap-lg usage! */
@media (min-width: 1400px){
  .about-title .one-line{ white-space: nowrap; }
}

/* Responsive sizing */
.about-split .display-5{ letter-spacing:.03em; }
@media (max-width: 575.98px){
  .about-split .lead{ font-size:1rem; }
  .about-split .display-5{ font-size:2rem; letter-spacing:.02em; }
}

/* Image helpers */
.object-cover{ object-fit:cover; }
.about-image img{ display:block; }


/* Service cards */
.service-card{ position:relative; overflow:hidden; color:#fff; }
.service-card .service-media{ position:absolute; inset:0; }
.service-card img{ display:block; object-fit:cover; }

/* Dark bottom gradient for readability */
.service-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}

/* Title (bottom-left) */
.service-title{
  position:absolute; left:1.1rem; bottom:1.1rem; margin:0;
  z-index:2; font-weight:600;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* Arrow button (bottom-right) */
.service-cta{
  position:absolute; right:1.1rem; bottom:1.1rem; z-index:2;
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(2px);
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.service-cta i{ font-size:1.05rem; }

/* Hover / focus */
.service-card:hover .service-cta,
.service-card:focus-visible .service-cta{
  background:#fff; color:#000; border-color:#fff; transform: translateY(-1px) scale(1.05);
}

/* Mobile tweaks */
@media (max-width: 575.98px){
  .service-title{ font-size:1.125rem; left:.9rem; bottom:.9rem; }
  .service-cta{ width:38px; height:38px; right:.9rem; bottom:.9rem; }
}
/* Optional: your techno display stack */
.furore-like{
  text-transform:uppercase; letter-spacing:.06em;
}

/* Owl cards */
.gallery-card{ position:relative; display:block; color:#fff; overflow:hidden; }
.gallery-card img{ display:block; }
.gallery-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
}

/* Label chip (bottom-left) */
.gallery-chip{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  font-size:.95rem; font-weight:600;
  background: rgba(0,0,0,.6);
  color:#fff; border-radius:999px; padding:.4rem .9rem;
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(2px);
}

/* External nav buttons */
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(0,0,0,.15);
  background:#fff; color:#000;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.15);
  z-index:5;
}
.gallery-nav.btn-prev{ left:-12px; }
.gallery-nav.btn-next{ right:-12px; }
.gallery-nav:hover{ background:#000; color:#fff; }

/* Owl item spacing */
.gallery-owl .owl-stage{ display:flex; }
.gallery-owl .owl-item{ padding:0; }

/* Responsive tweaks */
@media (max-width: 991.98px){
  .gallery-nav{ width:40px; height:40px; }
  .gallery-nav.btn-prev{ left:0; } .gallery-nav.btn-next{ right:0; }
}
@media (max-width: 575.98px){
  .gallery-chip{ left:.75rem; bottom:.75rem; font-size:.9rem; padding:.35rem .75rem; }
  .gallery-nav{ width:36px; height:36px; }
}
/* optional: your display stack from earlier */
.furore-like{
  text-transform:uppercase; letter-spacing:.06em;
}

/* cards */
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.insight-card .ratio{ transition: transform .3s ease; }
.insight-card:hover .ratio{ transform: translateY(-2px); }
.insight-type{ letter-spacing:.02em; }
.insight-date{ letter-spacing:.04em; }

/* tighter text on small screens */
@media (max-width: 575.98px){
  .insights .h1{ font-size:1.8rem; }
  .insight-card h3{ font-size:1.05rem; }
}
/* Optional display font you’ve been using */
.furore-like{
  text-transform:uppercase; letter-spacing:.06em;
}

/* Card look */
.t-card{ border:1px solid #eee; border-radius:12px; }
.t-card .card-body{ padding:1.25rem; }
.stars i{ color:#ffb400; margin-right:2px; font-size:1rem; }
.t-card h3{ line-height:1.4; }

/* Perfectly round avatar (fixed size, no stretching) */
.t-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 48px;            /* prevent flex grow/shrink */
}
.t-avatar img{
  width:100% !important;     /* beat any global img width rules */
  height:100% !important;    /* ensure square box is filled */
  object-fit:cover;          /* no oval distortion */
  display:block;
}

/* External nav buttons */
.testi-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(0,0,0,.1);
  background:#fff; color:#000; z-index:5;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.testi-nav.btn-prev{ left:-12px; }
.testi-nav.btn-next{ right:-12px; }
.testi-nav:hover{ background:#000; color:#fff; }

/* Owl spacing */
.testi-owl .owl-stage{ display:flex; }
.testi-owl .owl-item{ padding:0; }

/* Mobile tweaks */
@media (max-width: 575.98px){
  .t-card .card-body{ padding:1rem; }
  .testi-nav{ width:36px; height:36px; }
  .testi-nav.btn-prev{ left:0; } .testi-nav.btn-next{ right:0; }
}
/* Section with dimmed background image */
.contact-hero{
  position:relative;
  min-height:70vh;
  display:flex; align-items:center;
  background:url("image1.png")
            center/cover no-repeat;
}
.contact-hero::before{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,.55);          /* lowers brightness */
}
.contact-hero .container{ position:relative; z-index:2; }

/* Optional: your techno display stack */
.furore-like{
  text-transform:uppercase; letter-spacing:.06em;
}

/* Form */
.contact-form{ max-width:640px; }
.icon-field{ position:relative; }
.icon-field .bi{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  font-size:1rem; color:#6c757d;
}
/* icon position for multiline message */
.icon-field.icon-message .bi{
  top:18px; transform:none;
}

/* Inputs look */
.contact-form .form-control{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.contact-form .form-control:focus{
  border-color:#fff;
  box-shadow:0 0 0 .25rem rgba(255,255,255,.25), 0 14px 28px rgba(0,0,0,.2);
}
.contact-form ::placeholder{ color:#98a2b3; }

/* Responsive tweaks */
@media (max-width: 575.98px){
  .contact-hero{ min-height:60vh; }
  .contact-form{ max-width:100%; }
}
.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; }
}