/* === Montserrat (uploaded) === */
@font-face{
  font-family: "MontserratVar";
  src: url("./Montserrat-Black.ttf") format("truetype");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "MontserratVar";
  src: url("./Montserrat-Bold.ttf") format("truetype");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

/* === Base === */
:root{
  --brand-yellow:#F9CD46;
  --brand-black:#0b0b0b;
  --brand-gray:#121212;
}
html,body{height:100%;}
body{
  font-family:"MontserratVar", Montserrat, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--brand-black);
  color:#fff;
  text-underline-offset: 2px;

  /* Page enter animation */
  opacity:0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
}
body.is-loaded{
  opacity:1;
  transform:none;
}

/* Mobile nav slide-down */
.mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-nav.is-open {
  /* max-height is set inline via JS to match content height */
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body{ transition: none !important; }
  .reveal,[data-animate]{ transition: none !important; opacity:1 !important; transform:none !important; }
}

/* === FULLSCREEN HERO === */
/* === HERO BANNERS (1080x466-ish on desktop) === */
.hero{
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;

  /* default for mobile / small screens */
  height: 60vh;
  min-height: 380px;
}

/* Desktop: lock the hero height to 466px */
@media (min-width: 1024px){
  .hero{
    height: 466px;
    min-height: 466px;
    max-height: 466px;
  }
}

/* Per-page hero backgrounds */
.hero--home   { background-image: url('img/bg.jpg'); }
.hero--about  { background-image: url('img/newabt.jpeg'); }
.hero--why    { background-image: url('img/why.jpg'); }
.hero--contact{ background-image: url('img/contact.jpeg'); }
.hero--network { background-image: url('img/network.png'); }

/* === LEFT STRIPES (road markings) === */
.hero-stripes{
  position:absolute;
  inset:0 auto 0 0;
  width:120px;
  pointer-events:none;
  z-index:1;
}

.stripe{
  position:absolute;
  left:18px;
  width:60px;
  height:220px;
  background-image:url('img/strip_texture.png');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
}

/* --- Default: mobile-first positions --- */
.stripe-1{ top:4%; }      /* a bit down so it's visible on short phones   */
.stripe-2{ top:58%; }     /* second block in the middle-ish on phones     }

/* --- Tablets (768–1023px) --- */
@media (min-width:768px){
  .hero-stripes{ width:100px; }

  .stripe{
    left:14px;
    width:50px;
    height:190px;
  }

  .stripe-1{ top:-6%; }   /* slide slightly up, closer to the design      */
  .stripe-2{ top:64%; }
}

/* --- Desktop (1024px+) – your tuned values (-11 and 69) --- */
@media (min-width:1024px){
  .hero-stripes{ width:120px; }

  .stripe{
    left:18px;
    width:60px;
    height:220px;
  }

  .stripe-1{ top:-11%; }  /* match the console-tuned desktop look         */
  .stripe-2{ top:69%; }
}
/* === Parallax CTA (asphalt) — used on index/why/contact === */
.parallax-cta{
  position:relative;
  background-image:url('img/bg.jpg'); /* asphalt texture */
  background-size:cover; background-position:center;
  background-attachment: fixed;
}
.parallax-cta .parallax-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.40); }
/* iOS fallback */
@supports (-webkit-touch-callout: none) {
  .parallax-cta{ background-attachment: scroll; }
}

/* Social pill buttons (yellow squares) */
.social-pill{
  width:48px; height:48px; display:grid; place-items:center;
  background:var(--brand-yellow); color:#000;
  border-radius:10px; font-weight:800; font-size:1.25rem;
  transition: transform .18s ease, filter .18s ease;
}
.social-pill:hover{ transform:scale(1.06); filter:brightness(.98); }
@media (min-width:768px){
  .social-pill{ width:52px; height:52px; font-size:1.35rem; }
}

/* === REVEAL ON SCROLL ANIMATIONS === */
[data-animate]{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
[data-animate].in{
  opacity:1;
  transform:none;
}
[data-animate="fade"]{ transform:none; }
[data-animate="fade-up"]{ transform: translateY(14px); }
[data-animate="fade-left"]{ transform: translateX(14px); }
[data-animate="fade-right"]{ transform: translateX(-14px); }

/* === Loader (preloader) === */
#preloader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--brand-black);
  transition: opacity .6s ease, visibility .6s ease;
}
#preloader.hidden{ opacity:0; visibility:hidden; }

/* Spinner + wordmark lockup */
.loader-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.loader-ring{
  width:64px; height:64px; border-radius:50%;
  border:5px solid rgba(249,205,70,.25);
  border-top-color:var(--brand-yellow);
  animation: spin 1s linear infinite;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.35));
}
.loader-word{
  letter-spacing:.35em; text-indent:.35em;
  font-weight:900; font-size:.8rem; opacity:.85;
}
@keyframes spin{ to{ transform: rotate(360deg); } }


/* === Remove all white borders globally === */
*,
*:before,
*:after {
  border-color: transparent !important;
}

/* Optional: remove light section dividers only */
.border,
.border-white,
.border-white\/10,
.border-white\/20 {
  border: none !important;
}

/* If you still want section dividers to show subtly, use this instead: */
/*
.border-white\/10 {
  border-color: rgba(255,255,255,0.03) !important;
}
*/